퍼셉트론 시각화 기능 구현(feat/perceptron)

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
+  "plugins": ["prettier"],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "no-unused-vars": "warn",
+    "no-console": "off"
+  }
+}

.github/workflows/deploy.yml

@@ -0,0 +1,39 @@
+name: Deploy perceptron preview
+
+on:
+  push:
+    branches:
+      - feat/perceptron
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: Install deps
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        env:
+          GITHUB_REF_NAME: ${{ github.ref_name }}
+        run: pnpm build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          publish_branch: gh-pages
+          destination_dir: feat/perceptron

.gitignore

@@ -1,2 +1,6 @@
 dev/train/trainData/mnist/mnistTraindata_large.js
 dev/train/trainData/mnist/mnist_train.csv
+node_modules
+dist
+build
+*.min.js

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "tabWidth": 4,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "semi": true
+}

dev/train/Tester.js

@@ -1,22 +1,26 @@
-import {Trainer} from "./Trainer.js";
+import { Trainer } from './Trainer.js';
 // data sets
-import {mnistTrainData} from "./trainData/mnist/mnistTrainData.js";
-import {mnistTestData} from "./trainData/mnist/mnistTestData.js";
-import {mnistTrainData_large} from "./trainData/mnist/mnistTraindata_large.js";
-
-// train utils
-import {normalizeInputs, oneHotEncodeLabels} from "./utils/trainDataHandler.js";
-import {saveWeightsAsJson} from "./utils/saveWeightsAsJson.js";
+import { mnistTrainData } from './trainData/mnist/mnistTrainData.js';
+import { mnistTestData } from './trainData/mnist/mnistTestData.js';
+import { mnistTrainData_large } from './trainData/mnist/mnistTraindata_large.js';
 
+// train canvasUtils
+import { normalizeInputs, oneHotEncodeLabels } from './utils/trainDataHandler.js';
+import { saveWeightsAsJson } from './utils/saveWeightsAsJson.js';
 
 // <entry point>
 export const tester = () => {
-    const networkConfig = {inputNodes: 784, hiddenNodes: 200, outputNodes: 10, learningRate: 0.15};
+    const networkConfig = {
+        inputNodes: 784,
+        hiddenNodes: 200,
+        outputNodes: 10,
+        learningRate: 0.15,
+    };
     const $NN = new Trainer({
         inputNodes: networkConfig.inputNodes,
         hiddenNodes: networkConfig.hiddenNodes,
         outputNodes: networkConfig.outputNodes,
-        learningRate: networkConfig.learningRate
+        learningRate: networkConfig.learningRate,
     });
 
     const inputs = normalizeInputs(mnistTrainData);
@@ -25,16 +29,16 @@ export const tester = () => {
     inputs.map((array, idx) => {
         $NN.train(array, targets[idx]);
         if (idx % 5000 === 0) console.log(`Training progress: ${idx}/60000`);
-        console.log("✅ training complete!");
+        console.log('✅ training complete!');
     });
 
-    for (let i = 0; i<9; i++){
+    for (let i = 0; i < 9; i++) {
         console.log('Query', mnistTestData[i][0]);
         console.log($NN.query(normalizeInputs(mnistTestData)[i]));
     }
 
     saveWeightsAsJson($NN.W_inputToHidden, $NN.W_hiddenToOutput);
-    console.log("✅ Weight Downloaded!");
-}
+    console.log('✅ Weight Downloaded!');
+};
 
-export default tester;
+export default tester;

dev/train/Trainer.js

@@ -1,27 +1,44 @@
-import { NeuralNetworkBase } from "../../src/core/NeuralNetworkBase.js";
+import { NeuralNetworkBase } from '../../src/core/NeuralNetworkBase.ts';
 
 // matrix operations
-import {matrixMultiply, transposeMatrix} from "../../src/core/ops/matrixOps.js";
+import { matrixMultiply, transposeMatrix } from '../../src/core/ops/matrixOps.ts';
 
 export class Trainer extends NeuralNetworkBase {
-    train(inputs, targets){
+    train(inputs, targets) {
         // CNN operations
         const { finalOutputs, hiddenOutputs } = this.feedForward(inputs);
         // calculate errors
-        const output_errors = targets.map((v, idx) => v - finalOutputs[idx]).map(v => [v]); // 출력 계층의 오차를 목표값 - 출력값으로 지정
+        const output_errors = targets.map((v, idx) => v - finalOutputs[idx]).map((v) => [v]); // 출력 계층의 오차를 목표값 - 출력값으로 지정
         const hidden_errors = matrixMultiply(transposeMatrix(this.W_hiddenToOutput), output_errors); // 은닉 계층의 오차를 은닉-> 출력 계층의 가중치값과(W_hiddenToOutput.T) 출력 계층의 오차들을 재조합하여 계산
 
         // activation function derivative
-        const activationDerivative_HtO = finalOutputs.map(v => 1.0 - v).map((v, idx) => v * finalOutputs[idx]); // hidden to output derivative
-        const outputGradient = activationDerivative_HtO.map((v, idx) => v * output_errors[idx]).map(v => [v]);
-        const W_HtO_Update = matrixMultiply(outputGradient, transposeMatrix(hiddenOutputs)).map(array => array.map(v => v * this.learningRate)); // 오차값을 이용해 은닉 계층과 출력 계층간의 가중치 업데이트
+        const activationDerivative_HtO = finalOutputs
+            .map((v) => 1.0 - v)
+            .map((v, idx) => v * finalOutputs[idx]); // hidden to output derivative
+        const outputGradient = activationDerivative_HtO
+            .map((v, idx) => v * output_errors[idx])
+            .map((v) => [v]);
+        const W_HtO_Update = matrixMultiply(outputGradient, transposeMatrix(hiddenOutputs)).map(
+            (array) => array.map((v) => v * this.learningRate),
+        ); // 오차값을 이용해 은닉 계층과 출력 계층간의 가중치 업데이트
 
-        const activationDerivative_ItH = hiddenOutputs.map(v => 1.0 - v).map((v, idx) => v * hiddenOutputs[idx]);
-        const hiddenGradient = activationDerivative_ItH.map((v, idx) => v * hidden_errors[idx]).map(v => [v]);
-        const W_ItH_update = matrixMultiply(hiddenGradient, transposeMatrix(inputs.map(v => [v]))).map(array => array.map(v => v * this.learningRate));
+        const activationDerivative_ItH = hiddenOutputs
+            .map((v) => 1.0 - v)
+            .map((v, idx) => v * hiddenOutputs[idx]);
+        const hiddenGradient = activationDerivative_ItH
+            .map((v, idx) => v * hidden_errors[idx])
+            .map((v) => [v]);
+        const W_ItH_update = matrixMultiply(
+            hiddenGradient,
+            transposeMatrix(inputs.map((v) => [v])),
+        ).map((array) => array.map((v) => v * this.learningRate));
 
         // update weights
-        this.W_hiddenToOutput = this.W_hiddenToOutput.map((row, i)=> row.map((v, j) => v + W_HtO_Update[i][j]));
-        this.W_inputToHidden = this.W_inputToHidden.map((row, i)=> row.map((v, j) => v + W_ItH_update[i][j]));
+        this.W_hiddenToOutput = this.W_hiddenToOutput.map((row, i) =>
+            row.map((v, j) => v + W_HtO_Update[i][j]),
+        );
+        this.W_inputToHidden = this.W_inputToHidden.map((row, i) =>
+            row.map((v, j) => v + W_ItH_update[i][j]),
+        );
     }
-}
+}

index.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Neural Network Visualization</title>
+    <script type="module" src="src/main.ts"></script>
+    <script src="modernizr-custom.js"></script>
+    <link rel="stylesheet" href="/src/view/styles/settings.css">
+    <link rel="stylesheet" href="/src/view/styles/main.css">
+</head>
+<body>
+    <div id="app">
+        <header>
+            <h1 id="main-title">Neural Network</h1>
+            <h3 id="sub-title">visualization - Mobile Beta v1.0</h3>
+        </header>
+        <main id="wrapper">
+            <section id="query-result">
+                <div id="result"></div>
+            </section>
+            <div id="canvas-unit">
+                <div id="position-aligner">
+                    <div id="left-indicator" class="indicator">
+                        <div class="indicator-blur">
+                            <img id="left-arrow" src="assets/left_arrow.png" alt="arrow_icon">
+                        </div>
+                    </div>
+                    <div id="right-indicator" class="indicator">
+                        <div class="indicator-blur">
+                            <img id="right-arrow" src="assets/right_arrow.png" alt="arrow_icon">
+                        </div>
+                    </div>
+                    <div id="perceptron-section">
+                        <canvas id="perceptron"></canvas>
+                    </div>
+                    <button id="clear">
+                        <img src="assets/eraser.png" alt="eraser_icon">
+                    </button>
+                    <div id="user-input-section">
+                        <svg width="0" height="0">
+                            <defs>
+                                <clipPath id="arc-clip" clipPathUnits="userSpaceOnUse">
+                                    <path id="arc-path"/>
+                                </clipPath>
+                            </defs>
+                        </svg>
+                        <canvas class="user-input-canvas" id="user-input-canvas"></canvas>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+</body>
+</html>

jsconfig.json

@@ -1,9 +1,8 @@
 {
   "compilerOptions": {
-    "baseUrl": "src",
+    "baseUrl": "./src",
     "paths": {
-      "@controller/*": ["controller/*"],
-      "@view/*": ["view/*"]
+      "@/*": ["*"]
     }
   },
   "include": ["src"]

package.json

@@ -3,9 +3,25 @@
   "version": "1.0.0",
   "type": "module",
   "description": "",
-  "main": "public/index.html",
+  "main": "index.html",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vite",
+    "build": "vite build",
+    "deploy": "gh-pages -d dist",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write ."
   },
-  "private": true
-}
+  "private": true,
+  "devDependencies": {
+    "@types/node": "^24.3.0",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "gh-pages": "^6.3.0",
+    "prettier": "3.6.2",
+    "vite": "^7.0.6"
+  }
+}