tensorflowjs 통해 첫 번째 웹 서비스 'Teachable Machine' 만들기

텐서플로배우다가 웹에서 서비스가 가능하다고 해서 찾아보던중 tensorflowjs 를 테스트 해보기로 했다.

인용글 보면 [텐서플로우 2.0의 혁신 중 하나가 바로 자바스크립트 구현인 TensorFlow.js다. 필자는 이것이 학습이나 추론 속도를 개선할 것으로 기대하지 않았는데, 웹GL(WebGL) API를 통해 모든 GPU(CUDA GPU뿐만 아니라)를 지원해 실제로 속도 개선 효과가 있다.

TensorFlow.js는 여러 백엔드를 지원하지만 활성화는 한 번에 하나만 가능하다. TensorFlow.js Node.js 환경은 설치된 파이썬/C 텐서플로우 빌드를 백엔드로 사용하도록 지원하며, 이를 통해 예를 들어 CUDA와 같은 해당 시스템의 가용 하드웨어 가속을 사용할 수 있다. Node.js용 자바스크립트 기반 백엔드도 있지만 기능은 제한적이다.

브라우저에서 TensorFlow.js에는 서로 다른 특성의 여러 백엔드가 있다. 웹GL 백엔드는 저장용으로 웹GL 텍스처를, 실행용으로 웹GL 셰이더를 사용해 GPU를 지원하며, 일반 CPU 백엔드에 비해 최대 100배 더 빠른 실행이 가능하다. 웹GL에는 CUDA가 불필요하므로 현재 있는 GPU가 무엇이든 활용할 수 있다.

브라우저용 웹어셈블리(WASM) TensorFlow.js back 백엔드는 신경망 연산자의 최적화된 CPU 구현을 위해 XNNPACK 라이브러리를 사용한다. WASM 백엔드는 일반적으로 자바스크립트 CPU 백엔드에 비해 훨씬 더 빠르지만(10~30배) 모델이 아주 작은 경우를 제외하면 웹GL 백엔드보다는 대체로 느리다. 각자의 상황마다 다를 수 있으므로 현재의 하드웨어에서 자신의 모델을 사용해 WASM과 웹GL 백엔드를 모두 테스트하는 것이 좋다.

]

튜터리얼 사이트 입니다.

https://www.tensorflow.org/js/tutorials?hl=ko 

TensorFlow.js 시작하기

관련 티스토리 링크

https://www.itworld.co.kr/news/163470

TensorFlow.js로 브라우저에서 텐서플로우를 사용하는 방법

 

90분동안 땨라하면서 말들수 있는 예제입니다.

영상 사물을 인식해서 둘중하나를 판별하는 TensorFlow.js로 전이 학습을 사용하여 나만의 'Teachable Machine' 만들기

https://codelabs.developers.google.com/tensorflowjs-transfer-learning-teachable-machine?hl=ko#0 

TensorFlow.js: TensorFlow.js로 전이 학습을 사용하여 나만의 'Teachable Machine' 만들기  |  Google Codelabs

 

제가 만들었던 소스 코드

https://codepen.io/Kwon-P/pen/eYQzJMM?editors=1111 

Tensorflow.js Boilerplate

 

실제 웹상에서 서비스 해봅니다.

https://iukj.cafe24.com/ai/

Transfer Learning - TensorFlow.js