learning_model 1.0.0 → 1.0.2

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "learning_model",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "learning model develop",
   "main": "dist/index.bundle.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
   "scripts": {
     "start": "webpack serve --open --mode development",
-    "build": "webpack --watch --mode=development"
+    "watch": "webpack --watch --mode=development",
+    "build": "tsc && webpack",
+    "tsc": "tsc"
   },
   "keywords": [
     "tensorflow"
@@ -16,20 +18,25 @@
   "dependencies": {
     "@tensorflow-models/mobilenet": "^2.1.0",
     "@tensorflow/tfjs": "^4.6.0",
-    "canvas": "^2.11.2"
+    "@tensorflow/tfjs-layers": "^4.6.0",
+    "canvas": "^2.11.2",
+    "learning_model": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "glob": "^7.1.7",
     "html-webpack-plugin": "^5.5.1",
     "style-loader": "^3.3.3",
+    "terser-webpack-plugin": "^5.3.9",
     "ts-loader": "^9.4.3",
     "typescript": "^4.4.4",
     "webpack": "^5.51.1",
+    "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.1.0"
   }

package/public/index.ts

@@ -0,0 +1,153 @@
+
+import LearningImage from '../src/learning/image';
+
+// 프로그레스 바를 표시하는 클래스
+class StatusBar {
+  constructor(private container: HTMLElement) {}
+  update(status: number, message: string) {
+    this.container.innerText = `Status: ${status} ${message}`;
+  }
+}
+
+
+async function appRun() {
+  //////////////////////////////////////////////////////////////////////////////////////////
+  const learningImage = new LearningImage({
+    epochs: 30,
+    batchSize: 32
+  });
+  learningImage.onProgress = (progress: number) => {
+    const element = document.getElementById('progress-bar');
+    if (element !== null) {
+      const bar = new StatusBar(element);
+      bar.update(progress, '%');
+    }
+  }
+  learningImage.onLoss = (loss: number) => {
+    const element = document.getElementById('loss-bar');
+    if (element !== null) {
+      const bar = new StatusBar(element);
+      bar.update(loss, 'loss');
+    }
+  }
+  //////////////////////////////////////////////////////////////////////////////////////////
+  //////////////////////////////////////////////////////////////////////////////////////////
+  //////////////////////////////////////////////////////////////////////////////////////////
+
+  // root UI
+  const container = document.createElement('div');
+  container.id = 'root';
+
+  // learning 준비 체크
+  const learningReadyCheck = () => {
+    if (!learningImage.ready()) {
+      window.alert('준비된 데이터가 없습니다.');
+      return false;
+    }
+    if (learningImage.running()) {
+      window.alert('이미 진행 중입니다.');
+      return false;
+    }
+    return true;
+  };
+
+  // 이미지 저장 버튼 클릭
+  async function handleImageButtonClick(label: string) {
+    // Canvas 생성
+    const canvas = document.createElement('canvas');
+    const video = document.createElement('video');
+  
+    // 웹캠 활성화
+    if (navigator.mediaDevices.getUserMedia) {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      video.srcObject = stream;
+    }
+    
+    // 비디오가 메타데이터 로딩되면 캔버스에 그리고 이미지 캡처
+    video.addEventListener('loadedmetadata', () => {
+      video.play(); // 비디오 플레이 시작
+    });
+
+    // 비디오가 메타데이터 로딩되면 캔버스에 그리고 이미지 캡처
+    video.addEventListener('play', () => {
+      canvas.width = 128;
+      canvas.height = 128;
+      const context = canvas.getContext('2d');
+      if (context) {
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        learningImage.addData(label, context.getImageData(0, 0, canvas.width, canvas.height));
+      }
+    });
+    container.appendChild(canvas);
+  }
+
+  // 추론하기 버튼
+  async function handleInferButtonClick() {
+    if(!learningReadyCheck()) {
+      return;
+    }
+
+    // Canvas 생성
+    const canvas = document.createElement('canvas');
+    const video = document.createElement('video');
+  
+    // 웹캠 활성화
+    if (navigator.mediaDevices.getUserMedia) {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      video.srcObject = stream;
+    }
+    
+    // 비디오가 메타데이터 로딩되면 캔버스에 그리고 이미지 캡처
+    video.addEventListener('loadedmetadata', () => {
+      video.play(); // 비디오 플레이 시작
+    });
+
+    // 비디오가 메타데이터 로딩되면 캔버스에 그리고 이미지 캡처
+    video.addEventListener('play', () => {
+      canvas.width = 128;
+      canvas.height = 128;
+      const context = canvas.getContext('2d');
+      if (context) {
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        learningImage.infer(context.getImageData(0, 0, canvas.width, canvas.height));
+      }
+    });
+    container.appendChild(canvas);
+  }
+
+  // Train 학습하기 버튼
+  async function handleTrainButtonClick() {
+    if(learningReadyCheck()) {
+      await learningImage.train();
+    } 
+  }
+
+  // image button UI
+  const image1Button = document.createElement('button');
+  image1Button.textContent = '라벨1 이미지';
+  image1Button.addEventListener('click', () => handleImageButtonClick('라벨1 이미지'));
+  container.appendChild(image1Button);
+
+  // image button UI
+  const image2Button = document.createElement('button');
+  image2Button.textContent = '라벨2 이미지';
+  image2Button.addEventListener('click', () => handleImageButtonClick('라벨2 이미지'));
+  container.appendChild(image2Button);
+
+  // save button UI
+  const trainButton = document.createElement('button');
+  trainButton.textContent = '모델 Train';
+  trainButton.addEventListener('click', handleTrainButtonClick);
+  container.appendChild(trainButton);
+  document.body.appendChild(container);
+
+  // image button UI
+  const inferButton = document.createElement('button');
+  inferButton.textContent = '예측하기';
+  inferButton.addEventListener('click', () => handleInferButtonClick());
+  container.appendChild(inferButton);
+
+  
+}
+
+appRun();

package/src/index.ts

@@ -1,5 +1,7 @@
-
 import LearningImage from './learning/image';
+<<<<<<< HEAD
+import LearningMobilenetImage from './learning/mobilenet_image';    
+=======
 
 // 프로그레스 바를 표시하는 클래스
 class StatusBar {
@@ -149,5 +151,6 @@ async function appRun() {
 
   
 }
+>>>>>>> 68f03c4696aa804e510cdbd6ebf6efd9e8eda5a4
 
-appRun();
+export { LearningImage, LearningMobilenetImage };

package/tsconfig.json

@@ -6,7 +6,8 @@
     "strict": true,
     "esModuleInterop": true,
     "declarationDir": "./types",
-    "declaration": true
+    "declaration": true,
+    "skipLibCheck": true,
   },
   "include": [
     "src/**/*.ts"

package/types/index.d.ts

@@ -1 +1,3 @@
-export {};
+import LearningImage from './learning/image';
+import LearningMobilenetImage from './learning/mobilenet_image';
+export { LearningImage, LearningMobilenetImage };

package/types/public/index.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/index.d.ts

@@ -0,0 +1,3 @@
+import LearningImage from './learning/image';
+import LearningMobilenetImage from './learning/mobilenet_image';
+export { LearningImage, LearningMobilenetImage };

package/types/src/learning/base.d.ts

@@ -0,0 +1,19 @@
+import * as tf from '@tensorflow/tfjs';
+interface LearningInterface {
+    model: tf.LayersModel | null;
+    epochs: number;
+    batchSize: number;
+    labels: string[];
+    isRunning: boolean;
+    isReady: boolean;
+    limitSize: number;
+    onProgress(progress: number): void;
+    onLoss(loss: number): void;
+    addData(label: string, data: any): void;
+    train(): Promise<tf.History>;
+    infer(data: any): Promise<Map<string, number>>;
+    saveModel(): void;
+    running(): boolean;
+    ready(): boolean;
+}
+export default LearningInterface;

package/types/src/learning/image.d.ts

@@ -0,0 +1,34 @@
+import * as tf from '@tensorflow/tfjs';
+import LearningInterface from './base';
+declare class LearningImage implements LearningInterface {
+    model: tf.LayersModel | null;
+    epochs: number;
+    batchSize: number;
+    labels: string[];
+    isRunning: boolean;
+    isReady: boolean;
+    limitSize: number;
+    trainImages: tf.Tensor3D[];
+    readonly MOBILE_NET_INPUT_WIDTH = 224;
+    readonly MOBILE_NET_INPUT_HEIGHT = 224;
+    readonly MOBILE_NET_INPUT_CHANNEL = 3;
+    readonly IMAGE_NORMALIZATION_FACTOR = 255;
+    constructor({ epochs, batchSize }?: {
+        modelURL?: string;
+        epochs?: number;
+        batchSize?: number;
+    });
+    onProgress: (progress: number) => void;
+    onLoss: (loss: number) => void;
+    addData(label: string, data: any): void;
+    train(): Promise<tf.History>;
+    infer(data: any): Promise<Map<string, number>>;
+    saveModel(): void;
+    running(): boolean;
+    ready(): boolean;
+    private _preprocessedTargetData;
+    private _preprocessedInputData;
+    private _preprocessData;
+    private _createModel;
+}
+export default LearningImage;

package/types/src/learning/mobilenet_image.d.ts

@@ -0,0 +1,36 @@
+import * as tf from '@tensorflow/tfjs';
+import LearningInterface from './base';
+declare class LearningMobilenetImage implements LearningInterface {
+    model: tf.LayersModel | null;
+    epochs: number;
+    batchSize: number;
+    labels: string[];
+    modelURL: string;
+    isRunning: boolean;
+    isReady: boolean;
+    limitSize: number;
+    trainImages: tf.Tensor3D[];
+    readonly MOBILE_NET_INPUT_WIDTH = 224;
+    readonly MOBILE_NET_INPUT_HEIGHT = 224;
+    readonly MOBILE_NET_INPUT_CHANNEL = 3;
+    readonly IMAGE_NORMALIZATION_FACTOR = 255;
+    constructor({ modelURL, // 디폴트 mobilenet 이미지 
+    epochs, batchSize }?: {
+        modelURL?: string;
+        epochs?: number;
+        batchSize?: number;
+    });
+    onProgress: (progress: number) => void;
+    onLoss: (loss: number) => void;
+    addData(label: string, data: any): void;
+    train(): Promise<tf.History>;
+    infer(data: any): Promise<Map<string, number>>;
+    saveModel(): void;
+    running(): boolean;
+    ready(): boolean;
+    private _preprocessedTargetData;
+    private _preprocessedInputData;
+    private _preprocessData;
+    private _createModel;
+}
+export default LearningMobilenetImage;