
대부분 인공지능 모델은 파이썬으로 개발된다.
그렇다고 인공지능 모델 서빙을 파이썬 서버로 해야되느냐? 그건아니다.
가장 많이 사용되는 추론 서버로는 Nvidia Triton이 있고, 다양한 형태로 서빙될 수 있다.
js를 주언어를 사용하고 있는 곳에서는 js로 서빙하고 싶을 수 있다.
그럴때 어떤 모델이든 변환을 도와주는 ONNX를 사용할 수 있다.

tensorflow로 학습한 이미지 분류 모델을 js로 변환하여 추론을 하려했다.
onnx로 변환은 성공했고, 그 다음 추론을 해보아야하는데 이미지를 float으로 읽어와야하는 문제를 마주했다..!
파이썬은 pillow도 있고, opencv도 있고,,
(글을 쓰면서 opencv가 python 라이브러리가 아니었다는 사실이 번뜩 떠오르면서 opencv.js 가 있다는 사실을 알아버려서 다른 방법 한 번 알아보아야할 것 같다.)
javascript로 이미지 float32로 읽기
같은 이미지를 float32로 읽어서 출력했을때, 같은 shape와 같은 값을 갖는 것을 목표로 했다.
이곳 저곳에서 방법을 찾아보았고 최종적으로 이곳의 코드를 참고하여 구현했다.
https://onnxruntime.ai/docs/tutorials/web/classify-images-nextjs-github-template.html#imagehelperts
Node의 이미지 처리 라이브러리인 Jimp를 이용한다.
jimp
An image processing library written entirely in JavaScript (i.e. zero external or native dependencies). Latest version: 0.22.12, last published: 2 months ago. Start using jimp in your project by running `npm i jimp`. There are 2236 other projects in the np
www.npmjs.com
레퍼런스 코드를 그대로 사용했을 때 문제가 두 가지 있었다.
1. 이미지 shape이 다름
tensorflow는 이미지 학습시 [Batch, Height, Width, Channels]의 형태를 사용하고
pytorch는 [Batch, Channels, Height, Width]를 사용한다.
레퍼런스 코드는 pytorch 스타일이었고 나는 지금 tf로 학습한 모델을 변화했기때문에 이미지 shape을 변경해주었다.
2. 리사이즈시 보간법이 다름
각 라이브러리마다 리사이즈시 defualt로 사용하는 이미지 보간법이 다르다.
같은 이미지에 대해서 다른 값으로 리사이즈하면 성능에 차이가 발생할 수 있다고 생각해서 보간법을 BICUBIC으로 일치시켜주었다.
async function loadImageFromPath(path, height, width) {
const image = await Jimp.default.read(path).then((imageBuffer) => {
return imageBuffer.resize(width, height, Jimp.RESIZE_BICUBIC);
});
return image;
}
Pillow
2.7.0
Sane Plugin: The Sane plugin has now been split into its own repo: https://github.com/python-pillow/Sane. Png text chunk size limits: To prevent potential denial of service attacks using compressed...
pillow.readthedocs.io
Jimp
Optionally, the following constants can be passed to choose a particular resizing algorithm:
Jimp.RESIZE_NEAREST_NEIGHBOR;
Jimp.RESIZE_BILINEAR;
Jimp.RESIZE_BICUBIC;
Jimp.RESIZE_HERMITE;
Jimp.RESIZE_BEZIER;
For example:
image.resize(250, 250, Jimp.RESIZE_BEZIER);
Code (gist)
전체코드는 다음과 같다.
read image as float with javascript
read image as float with javascript. GitHub Gist: instantly share code, notes, and snippets.
gist.github.com
BenchMark 결과
이미지를 float로 불러오는 것에 성공했다!
onnx로 변환한 같은 모델을 각각 onnx python runtime, onnx js runtime에서 실행하여 런타임에 따른 성능 차이가 있는지 확인해보았고, 성능에는 차이가 없었다는 것을 알 수 있었다!
이제 onnx만 있으면 어디서든 인공지능 모델을 서빙할 수 있숴..!!
Js
약 900s 소요
███████████████████████ 100% | ETA: 0s | 8066/8066
TN : 3192, TP : 4638, FN : 57, FP : 179
Accuracy : 0.9707, Precision : 0.9628, Recall : 0.9878, F1 : 0.9751
Python
100%|██████████████████| 8057/8057 [14:14<00:00, 9.43it/s]
TN : 3187 TP: 4633 FN : 57 FP : 180
ACC : 0.9706 Precision : 0.9626 Recall : 0.9878 F1 : 0.9750
'AI' 카테고리의 다른 글
MLOps란? (1) | 2024.05.17 |
---|---|
Stable Diffusion WebUI 설치하고 사용해보기 - Apple Silicon (0) | 2023.12.27 |
Bytes Are All you Need: Transformers Operating Directly On File Bytes 리뷰 (0) | 2023.06.12 |
AutoEncoder 실습 (0) | 2023.05.18 |
AE, AutoEncoder (0) | 2023.05.18 |

대부분 인공지능 모델은 파이썬으로 개발된다.
그렇다고 인공지능 모델 서빙을 파이썬 서버로 해야되느냐? 그건아니다.
가장 많이 사용되는 추론 서버로는 Nvidia Triton이 있고, 다양한 형태로 서빙될 수 있다.
js를 주언어를 사용하고 있는 곳에서는 js로 서빙하고 싶을 수 있다.
그럴때 어떤 모델이든 변환을 도와주는 ONNX를 사용할 수 있다.

tensorflow로 학습한 이미지 분류 모델을 js로 변환하여 추론을 하려했다.
onnx로 변환은 성공했고, 그 다음 추론을 해보아야하는데 이미지를 float으로 읽어와야하는 문제를 마주했다..!
파이썬은 pillow도 있고, opencv도 있고,,
(글을 쓰면서 opencv가 python 라이브러리가 아니었다는 사실이 번뜩 떠오르면서 opencv.js 가 있다는 사실을 알아버려서 다른 방법 한 번 알아보아야할 것 같다.)
javascript로 이미지 float32로 읽기
같은 이미지를 float32로 읽어서 출력했을때, 같은 shape와 같은 값을 갖는 것을 목표로 했다.
이곳 저곳에서 방법을 찾아보았고 최종적으로 이곳의 코드를 참고하여 구현했다.
https://onnxruntime.ai/docs/tutorials/web/classify-images-nextjs-github-template.html#imagehelperts
Node의 이미지 처리 라이브러리인 Jimp를 이용한다.
jimp
An image processing library written entirely in JavaScript (i.e. zero external or native dependencies). Latest version: 0.22.12, last published: 2 months ago. Start using jimp in your project by running `npm i jimp`. There are 2236 other projects in the np
www.npmjs.com
레퍼런스 코드를 그대로 사용했을 때 문제가 두 가지 있었다.
1. 이미지 shape이 다름
tensorflow는 이미지 학습시 [Batch, Height, Width, Channels]의 형태를 사용하고
pytorch는 [Batch, Channels, Height, Width]를 사용한다.
레퍼런스 코드는 pytorch 스타일이었고 나는 지금 tf로 학습한 모델을 변화했기때문에 이미지 shape을 변경해주었다.
2. 리사이즈시 보간법이 다름
각 라이브러리마다 리사이즈시 defualt로 사용하는 이미지 보간법이 다르다.
같은 이미지에 대해서 다른 값으로 리사이즈하면 성능에 차이가 발생할 수 있다고 생각해서 보간법을 BICUBIC으로 일치시켜주었다.
async function loadImageFromPath(path, height, width) {
const image = await Jimp.default.read(path).then((imageBuffer) => {
return imageBuffer.resize(width, height, Jimp.RESIZE_BICUBIC);
});
return image;
}
Pillow
2.7.0
Sane Plugin: The Sane plugin has now been split into its own repo: https://github.com/python-pillow/Sane. Png text chunk size limits: To prevent potential denial of service attacks using compressed...
pillow.readthedocs.io
Jimp
Optionally, the following constants can be passed to choose a particular resizing algorithm:
Jimp.RESIZE_NEAREST_NEIGHBOR;
Jimp.RESIZE_BILINEAR;
Jimp.RESIZE_BICUBIC;
Jimp.RESIZE_HERMITE;
Jimp.RESIZE_BEZIER;
For example:
image.resize(250, 250, Jimp.RESIZE_BEZIER);
Code (gist)
전체코드는 다음과 같다.
read image as float with javascript
read image as float with javascript. GitHub Gist: instantly share code, notes, and snippets.
gist.github.com
BenchMark 결과
이미지를 float로 불러오는 것에 성공했다!
onnx로 변환한 같은 모델을 각각 onnx python runtime, onnx js runtime에서 실행하여 런타임에 따른 성능 차이가 있는지 확인해보았고, 성능에는 차이가 없었다는 것을 알 수 있었다!
이제 onnx만 있으면 어디서든 인공지능 모델을 서빙할 수 있숴..!!
Js
약 900s 소요
███████████████████████ 100% | ETA: 0s | 8066/8066
TN : 3192, TP : 4638, FN : 57, FP : 179
Accuracy : 0.9707, Precision : 0.9628, Recall : 0.9878, F1 : 0.9751
Python
100%|██████████████████| 8057/8057 [14:14<00:00, 9.43it/s]
TN : 3187 TP: 4633 FN : 57 FP : 180
ACC : 0.9706 Precision : 0.9626 Recall : 0.9878 F1 : 0.9750
'AI' 카테고리의 다른 글
MLOps란? (1) | 2024.05.17 |
---|---|
Stable Diffusion WebUI 설치하고 사용해보기 - Apple Silicon (0) | 2023.12.27 |
Bytes Are All you Need: Transformers Operating Directly On File Bytes 리뷰 (0) | 2023.06.12 |
AutoEncoder 실습 (0) | 2023.05.18 |
AE, AutoEncoder (0) | 2023.05.18 |