learning_model 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.generateRandomString = void 0;
4
+ // 랜덤 string for test
5
+ function generateRandomString(length) {
6
+ const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
7
+ let result = '';
8
+ for (let i = 0; i < length; i++) {
9
+ const randomIndex = Math.floor(Math.random() * characters.length);
10
+ result += characters.charAt(randomIndex);
11
+ }
12
+ return result;
13
+ }
14
+ exports.generateRandomString = generateRandomString;
package/package.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "learning_model",
3
+ "version": "1.0.0",
4
+ "description": "learning model develop",
5
+ "main": "dist/index.bundle.js",
6
+ "types": "dist/index.d.ts",
7
+ "scripts": {
8
+ "start": "webpack serve --open --mode development",
9
+ "build": "webpack --watch --mode=development"
10
+ },
11
+ "keywords": [
12
+ "tensorflow"
13
+ ],
14
+ "author": "walter.jung@luxrobo.com",
15
+ "license": "MIT",
16
+ "dependencies": {
17
+ "@tensorflow-models/mobilenet": "^2.1.0",
18
+ "@tensorflow/tfjs": "^4.6.0",
19
+ "canvas": "^2.11.2"
20
+ },
21
+ "devDependencies": {
22
+ "@babel/core": "^7.15.0",
23
+ "@babel/preset-env": "^7.15.0",
24
+ "babel-loader": "^8.2.2",
25
+ "clean-webpack-plugin": "^4.0.0",
26
+ "css-loader": "^6.8.1",
27
+ "glob": "^7.1.7",
28
+ "html-webpack-plugin": "^5.5.1",
29
+ "style-loader": "^3.3.3",
30
+ "ts-loader": "^9.4.3",
31
+ "typescript": "^4.4.4",
32
+ "webpack": "^5.51.1",
33
+ "webpack-cli": "^4.8.0",
34
+ "webpack-dev-server": "^4.1.0"
35
+ }
36
+ }
@@ -0,0 +1,7 @@
1
+ #container {
2
+ position: relative;
3
+ }
4
+
5
+ #canvas {
6
+ margin-bottom: 20px; /* 간격을 조정할 값 */
7
+ }
@@ -0,0 +1,15 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="index.css">
5
+ <title>My CNN Module</title>
6
+ </head>
7
+ <body>
8
+ <div id="loss-bar"></div>
9
+ <div id="progress-bar"></div>
10
+ <div id="root"></div>
11
+ <div id="container">
12
+ <canvas id="canvas"></canvas>
13
+ </div>
14
+ </body>
15
+ </html>
package/src/index.ts ADDED
@@ -0,0 +1,153 @@
1
+
2
+ import LearningImage from './learning/image';
3
+
4
+ // 프로그레스 바를 표시하는 클래스
5
+ class StatusBar {
6
+ constructor(private container: HTMLElement) {}
7
+ update(status: number, message: string) {
8
+ this.container.innerText = `Status: ${status} ${message}`;
9
+ }
10
+ }
11
+
12
+
13
+ async function appRun() {
14
+ //////////////////////////////////////////////////////////////////////////////////////////
15
+ const learningImage = new LearningImage({
16
+ epochs: 30,
17
+ batchSize: 32
18
+ });
19
+ learningImage.onProgress = (progress: number) => {
20
+ const element = document.getElementById('progress-bar');
21
+ if (element !== null) {
22
+ const bar = new StatusBar(element);
23
+ bar.update(progress, '%');
24
+ }
25
+ }
26
+ learningImage.onLoss = (loss: number) => {
27
+ const element = document.getElementById('loss-bar');
28
+ if (element !== null) {
29
+ const bar = new StatusBar(element);
30
+ bar.update(loss, 'loss');
31
+ }
32
+ }
33
+ //////////////////////////////////////////////////////////////////////////////////////////
34
+ //////////////////////////////////////////////////////////////////////////////////////////
35
+ //////////////////////////////////////////////////////////////////////////////////////////
36
+
37
+ // root UI
38
+ const container = document.createElement('div');
39
+ container.id = 'root';
40
+
41
+ // learning 준비 체크
42
+ const learningReadyCheck = () => {
43
+ if (!learningImage.ready()) {
44
+ window.alert('준비된 데이터가 없습니다.');
45
+ return false;
46
+ }
47
+ if (learningImage.running()) {
48
+ window.alert('이미 진행 중입니다.');
49
+ return false;
50
+ }
51
+ return true;
52
+ };
53
+
54
+ // 이미지 저장 버튼 클릭
55
+ async function handleImageButtonClick(label: string) {
56
+ // Canvas 생성
57
+ const canvas = document.createElement('canvas');
58
+ const video = document.createElement('video');
59
+
60
+ // 웹캠 활성화
61
+ if (navigator.mediaDevices.getUserMedia) {
62
+ const stream = await navigator.mediaDevices.getUserMedia({ video: true });
63
+ video.srcObject = stream;
64
+ }
65
+
66
+ // 비디오가 메타데이터 로딩되면 캔버스에 그리고 이미지 캡처
67
+ video.addEventListener('loadedmetadata', () => {
68
+ video.play(); // 비디오 플레이 시작
69
+ });
70
+
71
+ // 비디오가 메타데이터 로딩되면 캔버스에 그리고 이미지 캡처
72
+ video.addEventListener('play', () => {
73
+ canvas.width = 128;
74
+ canvas.height = 128;
75
+ const context = canvas.getContext('2d');
76
+ if (context) {
77
+ context.drawImage(video, 0, 0, canvas.width, canvas.height);
78
+ learningImage.addData(label, context.getImageData(0, 0, canvas.width, canvas.height));
79
+ }
80
+ });
81
+ container.appendChild(canvas);
82
+ }
83
+
84
+ // 추론하기 버튼
85
+ async function handleInferButtonClick() {
86
+ if(!learningReadyCheck()) {
87
+ return;
88
+ }
89
+
90
+ // Canvas 생성
91
+ const canvas = document.createElement('canvas');
92
+ const video = document.createElement('video');
93
+
94
+ // 웹캠 활성화
95
+ if (navigator.mediaDevices.getUserMedia) {
96
+ const stream = await navigator.mediaDevices.getUserMedia({ video: true });
97
+ video.srcObject = stream;
98
+ }
99
+
100
+ // 비디오가 메타데이터 로딩되면 캔버스에 그리고 이미지 캡처
101
+ video.addEventListener('loadedmetadata', () => {
102
+ video.play(); // 비디오 플레이 시작
103
+ });
104
+
105
+ // 비디오가 메타데이터 로딩되면 캔버스에 그리고 이미지 캡처
106
+ video.addEventListener('play', () => {
107
+ canvas.width = 128;
108
+ canvas.height = 128;
109
+ const context = canvas.getContext('2d');
110
+ if (context) {
111
+ context.drawImage(video, 0, 0, canvas.width, canvas.height);
112
+ learningImage.infer(context.getImageData(0, 0, canvas.width, canvas.height));
113
+ }
114
+ });
115
+ container.appendChild(canvas);
116
+ }
117
+
118
+ // Train 학습하기 버튼
119
+ async function handleTrainButtonClick() {
120
+ if(learningReadyCheck()) {
121
+ await learningImage.train();
122
+ }
123
+ }
124
+
125
+ // image button UI
126
+ const image1Button = document.createElement('button');
127
+ image1Button.textContent = '라벨1 이미지';
128
+ image1Button.addEventListener('click', () => handleImageButtonClick('라벨1 이미지'));
129
+ container.appendChild(image1Button);
130
+
131
+ // image button UI
132
+ const image2Button = document.createElement('button');
133
+ image2Button.textContent = '라벨2 이미지';
134
+ image2Button.addEventListener('click', () => handleImageButtonClick('라벨2 이미지'));
135
+ container.appendChild(image2Button);
136
+
137
+ // save button UI
138
+ const trainButton = document.createElement('button');
139
+ trainButton.textContent = '모델 Train';
140
+ trainButton.addEventListener('click', handleTrainButtonClick);
141
+ container.appendChild(trainButton);
142
+ document.body.appendChild(container);
143
+
144
+ // image button UI
145
+ const inferButton = document.createElement('button');
146
+ inferButton.textContent = '예측하기';
147
+ inferButton.addEventListener('click', () => handleInferButtonClick());
148
+ container.appendChild(inferButton);
149
+
150
+
151
+ }
152
+
153
+ appRun();
@@ -0,0 +1,40 @@
1
+ import * as tf from '@tensorflow/tfjs';
2
+
3
+ // AI Learning 디폴트 인터페이스
4
+ interface LearningInterface {
5
+ // tf 모델
6
+ model: tf.LayersModel | null;
7
+ // epoch 훈련 개수
8
+ epochs: number;
9
+ // 배치 사이즈
10
+ batchSize: number;
11
+ // 라벨 array
12
+ labels: string[];
13
+ // 이미 train중인지 여부 - 이미 진행중인경우 취소
14
+ isRunning: boolean;
15
+ // 준비
16
+ isReady: boolean;
17
+ // 데이타 사이즈
18
+ limitSize: number;
19
+
20
+ // 진행상태 이벤트
21
+ onProgress(progress: number): void;
22
+
23
+ // loss 정보
24
+ onLoss(loss: number): void;
25
+
26
+ // 학습 데이타 추가 data는 다른 클래스에 맞게 any로 설정
27
+ addData(label: string, data: any): void;
28
+ // 학습 진행
29
+ train(): Promise<tf.History>;
30
+ // 추론
31
+ infer(data: any): Promise<Map<string, number>>;
32
+ // 모델 저장
33
+ saveModel(): void;
34
+ //
35
+ running(): boolean;
36
+ //
37
+ ready(): boolean;
38
+ }
39
+
40
+ export default LearningInterface;
@@ -0,0 +1,239 @@
1
+ import * as tf from '@tensorflow/tfjs';
2
+ import LearningInterface from './base';
3
+
4
+ class LearningImage implements LearningInterface {
5
+ model: tf.LayersModel | null;
6
+ epochs: number;
7
+ batchSize: number;
8
+ labels: string[];
9
+ isRunning: boolean;
10
+ isReady: boolean;
11
+ limitSize: number;
12
+ trainImages: tf.Tensor3D[] = [];
13
+
14
+ readonly MOBILE_NET_INPUT_WIDTH = 224;
15
+ readonly MOBILE_NET_INPUT_HEIGHT = 224;
16
+ readonly MOBILE_NET_INPUT_CHANNEL = 3;
17
+ readonly IMAGE_NORMALIZATION_FACTOR = 255.0;
18
+
19
+ constructor({
20
+ epochs = 10,
21
+ batchSize = 16
22
+ }: { modelURL?: string, epochs?: number, batchSize?: number} = {}) {
23
+ this.model = null;
24
+ this.epochs = epochs;
25
+ this.batchSize = batchSize;
26
+ this.labels = [];
27
+ this.isRunning = false;
28
+ this.isReady = false;
29
+ this.limitSize = 2;
30
+ }
31
+
32
+ public onProgress: (progress: number) => void = () => {};
33
+
34
+ public onLoss: (loss: number) => void = () => {};
35
+
36
+ // 학습 데이타 등록
37
+ public addData(label: string, data: any): void {
38
+ try {
39
+ const tensor = tf.browser.fromPixels(data);
40
+ console.log('addData', tensor);
41
+ this.trainImages.push(tensor);
42
+ this.labels.push(label);
43
+ if(this.labels.length >= this.limitSize) {
44
+ this.isReady = true;
45
+ }
46
+ return;
47
+ } catch (error) {
48
+ console.error('Model training failed', error);
49
+ throw error;
50
+ }
51
+ }
52
+
53
+ // 모델 학습 처리
54
+ public async train(): Promise<tf.History> {
55
+ if (this.isRunning) {
56
+ return Promise.reject(new Error('Training is already in progress.'));
57
+ }
58
+
59
+ // 콜백 정의
60
+ const customCallback = {
61
+ onTrainBegin: () => {
62
+ console.log('Training has started.');
63
+ },
64
+ onTrainEnd: () => {
65
+ console.log('Training has ended.');
66
+ this.isRunning = false;
67
+ },
68
+ onBatchBegin: (batch: any, logs: any) => {
69
+ console.log(`Batch ${batch} is starting.`);
70
+ },
71
+ onBatchEnd: (batch: any, logs: any) => {
72
+ console.log(`Batch ${batch} has ended.`);
73
+ },
74
+ onEpochBegin: (epoch: number, logs: any) => {
75
+ const progress = Math.floor(((epoch + 1) / this.epochs) * 100);
76
+ this.onProgress(progress);
77
+ console.log(`Epoch ${epoch+1} is starting.`);
78
+ },
79
+ onEpochEnd: (epoch: number, logs: any) => {
80
+ console.log(`Epoch ${epoch+1} has ended.`);
81
+ this.onLoss(logs.loss);
82
+ console.log('Loss:', logs.loss);
83
+ }
84
+ };
85
+
86
+ try {
87
+ this.isRunning = true;
88
+ if (this.labels.length < this.limitSize) {
89
+ return Promise.reject(new Error('Please train Data need over 2 data length'));
90
+ }
91
+ this.model = await this._createModel(this.labels.length);
92
+ const inputData = this._preprocessedInputData(this.model);
93
+ const targetData = this._preprocessedTargetData();
94
+ const history = await this.model.fit(inputData, targetData, {
95
+ epochs: this.epochs,
96
+ batchSize: this.batchSize,
97
+ callbacks: customCallback
98
+ });
99
+ console.log('Model training completed', history);
100
+ return history;
101
+ } catch (error) {
102
+ this.isRunning = false;
103
+ console.error('Model training failed', error);
104
+ throw error;
105
+ }
106
+ }
107
+
108
+ // 추론하기
109
+ public async infer(data: any): Promise<Map<string, number>> {
110
+ if (this.model === null) {
111
+ throw new Error('Model is null');
112
+ }
113
+
114
+ try {
115
+ const tensor = tf.browser.fromPixels(data);
116
+ const resizedTensor = tf.image.resizeBilinear(tensor, [this.MOBILE_NET_INPUT_WIDTH, this.MOBILE_NET_INPUT_HEIGHT]);
117
+ const reshapedTensor = resizedTensor.expandDims(0); // 배치 크기 1을 추가하여 4차원으로 변환
118
+ const predictions = this.model.predict(reshapedTensor) as tf.Tensor;
119
+ const predictionsData = await predictions.data(); // 예측 텐서의 데이터를 비동기로 가져옴
120
+ const classProbabilities = new Map<string, number>(); // 클래스별 확률 누적값을 저장할 맵
121
+ for (let i = 0; i < predictionsData.length; i++) {
122
+ const className = this.labels[i]; // 클래스 이름
123
+ const probability = predictionsData[i];
124
+ const existingProbability = classProbabilities.get(className);
125
+ if (existingProbability !== undefined) {
126
+ classProbabilities.set(className, existingProbability + probability);
127
+ } else {
128
+ classProbabilities.set(className, probability);
129
+ }
130
+ }
131
+ console.log('Class Probabilities:', classProbabilities);
132
+ return classProbabilities;
133
+ } catch (error) {
134
+ throw error;
135
+ }
136
+ }
137
+
138
+
139
+ // 모델 저장
140
+ public saveModel(): void {
141
+ console.log('saved model');
142
+ }
143
+
144
+
145
+ // 진행중 여부
146
+ public running(): boolean {
147
+ return this.isRunning;
148
+ }
149
+
150
+
151
+ public ready(): boolean {
152
+ return this.isReady;
153
+ }
154
+
155
+
156
+ // target 라벨 데이타
157
+ private _preprocessedTargetData(): tf.Tensor<tf.Rank> {
158
+ // 라벨 unique 처리 & 배열 리턴
159
+ console.log('uniqueLabels.length', this.labels, this.labels.length);
160
+ const labelIndices = this.labels.map((label) => this.labels.indexOf(label));
161
+ console.log('labelIndices', labelIndices);
162
+ const oneHotEncode = tf.oneHot(tf.tensor1d(labelIndices, 'int32'),this.labels.length);
163
+ console.log('oneHotEncode', oneHotEncode);
164
+ return oneHotEncode;
165
+ }
166
+
167
+
168
+ // 입력 이미지 데이타
169
+ private _preprocessedInputData(model: tf.LayersModel): tf.Tensor<tf.Rank> {
170
+ // 이미지 배열을 배치로 변환 - [null, 224, 224, 3]
171
+ const inputShape = model.inputs[0].shape;
172
+ console.log('inputShape', inputShape);
173
+ // inputShape를 이와 같이 포멧 맞춘다. for reshape to [224, 224, 3]
174
+ const inputShapeArray = inputShape.slice(1) as number[];
175
+ console.log('inputShapeArray', inputShapeArray);
176
+ const inputBatch = tf.stack(this.trainImages.map((image) => {
177
+ // 이미지 전처리 및 크기 조정 등을 수행한 후에
178
+ // 모델의 입력 형태로 변환하여 반환
179
+ const xs = this._preprocessData(image); // 전처리 함수는 사용자 정의해야 함
180
+ return tf.reshape(xs, inputShapeArray);
181
+ }));
182
+ return inputBatch;
183
+ }
184
+
185
+
186
+ // 모델 학습하기 위한 데이타 전처리 단계
187
+ private _preprocessData(tensor: tf.Tensor3D): tf.Tensor4D {
188
+ try {
189
+ // mobilenet model summary를 하면 위와 같이 224,224 사이즈의 입력값 설정되어 있다. ex) input_1 (InputLayer) [null,224,224,3]
190
+ const resizedImage = tf.image.resizeBilinear(tensor, [this.MOBILE_NET_INPUT_WIDTH, this.MOBILE_NET_INPUT_HEIGHT]);
191
+ // 이미지를 [0,1] 범위로 정규화 255로 나뉜 픽셀값
192
+ const normalizedImage = resizedImage.div(this.IMAGE_NORMALIZATION_FACTOR);
193
+ // expandDims(0)을 하여 차원을 추가하여 4D텐서 반환
194
+ return normalizedImage.expandDims(0) as tf.Tensor4D;
195
+ } catch (error) {
196
+ console.error('Failed to _preprocessData data', error);
197
+ throw error;
198
+ }
199
+ }
200
+
201
+ // 모델 저장
202
+ private async _createModel(numClasses: number): Promise<tf.Sequential> {
203
+ try {
204
+ const inputShape = [this.MOBILE_NET_INPUT_WIDTH, this.MOBILE_NET_INPUT_HEIGHT, this.MOBILE_NET_INPUT_CHANNEL];
205
+ const model = tf.sequential();
206
+
207
+ model.add(tf.layers.conv2d({
208
+ inputShape,
209
+ filters: 32,
210
+ kernelSize: 3,
211
+ activation: 'relu'
212
+ }));
213
+ model.add(tf.layers.maxPooling2d({ poolSize: 2 }));
214
+ model.add(tf.layers.conv2d({
215
+ filters: 64,
216
+ kernelSize: 3,
217
+ activation: 'relu'
218
+ }));
219
+ model.add(tf.layers.maxPooling2d({ poolSize: 2 }));
220
+ model.add(tf.layers.flatten());
221
+ model.add(tf.layers.dense({
222
+ units: numClasses,
223
+ activation: 'softmax'
224
+ }));
225
+ model.compile({
226
+ loss: (numClasses === 2) ? 'binaryCrossentropy': 'categoricalCrossentropy',
227
+ optimizer: tf.train.adam(),
228
+ metrics: ['accuracy']
229
+ });
230
+ model.summary();
231
+ return model;
232
+ } catch (error) {
233
+ console.error('Failed to load model', error);
234
+ throw error;
235
+ }
236
+ }
237
+ }
238
+
239
+ export default LearningImage;