[Tensorflow-models] model loading - 1. 로딩 방법 ①CDN ②npm install ③오프라인 저장

이하 글의 코드와 글의 근본적인 출처는 Tensorflow-models 공식 깃헙입니다!

 

개요

• 이하에서는 이번 프로젝트에서 구현한 hand-pose-detection, face-landmarks-detection, pose-detection 모델을 로딩하는 방법을 정리하였음.
• 위 모델들을 로딩한다는 것 = createDetector() 함수를 실행한다는 것 
• 이하 방법은 model loading 시리즈 2편인 npm install 해야하는 최소한의 모듈 글을 참고해서 코드를 짜야 보다 효율적임
• 또한 createDetector() 함수를 오프라인으로 저장한 모델과 함께 사용하는 경우, 버전을 제대로 맞추지 않는다면 quantization 오류를 계에에에에속 맞닥뜨릴 것임. 따라서 해당 오류를 해결한 글과 함께 보길 권장함 

 

---

 

1. CDN

• CDN 이란 
  • Contents Delivery Network : 콘텐츠 전송 네트워크
  • 콘텐츠를 임시 저장 서버에 옮겼다가 수요가 있을 때 콘텐츠를 전달
• 핵심 코드 : 이하 코드는 Tensorflow-models 공식 깃헙에서 demo 코드로 명시한 방법

<!-- Require the peer dependencies of hand-pose-detection. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>

<!-- You must explicitly require a TF.js backend if you're not using the TF.js union bundle. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>

<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection"></script>

 

---

 

2. npm install + require( 또는 import )

• npm 모듈 설치 

npm install @tensorflow-models/hand-pose-detection
npm install @tensorflow/tfjs-core, @tensorflow/tfjs-converter
npm install @tensorflow/tfjs-backend-webgl

• require (또는 import)

// require
const {createDetector,SupportedModels} = require("@tensorflow-models/hand-pose-detection");

// import
import * as handPoseDetection from '@tensorflow-models/hand-pose-detection';
import * as tf from '@tensorflow/tfjs-core';
// Register WebGL backend.
import '@tensorflow/tfjs-backend-webgl';

• 그러나 위의 1번, 2번 방법은 온라인 환경에서만 정상 작동한다는 단점이 있음. 이를 보완하는 방법으로 모델을 오프라인으로 저장해서 불러오는 3번이 있음

 

---

 

3. 오프라인 저장 

• 모델을 오프라인 저장 해야 하는 이유
  1. CORS 에러 (Cross-Origin Resource Sharing)
     • 웹 브라우저가 다른 도메인, 프로토콜, 포트에서 실행되는 웹페이지에서 리소스를 요청할 때 발생
     • 따라서 모델을 오프라인 저장하지 않고, localhost:5050 에서 localhost:8888 로 model.json을 요청한다면,
       웹 브라우저가 포트 번호가 달라 다른 출처(origin)으로 간주하고 CORS 정책에 따라 요청 차단함
     • CORS에 대해 보다 전문적으로 설명한 글 보러 가기 

CORS

       2. 자사 소프트웨어 특성 상 인터넷이 끊어져도 제품 사용할 수 있어야 함
          : 그러나 CDN 방식과 npm install 방식은 온라인 상태여야만 Tensorflow-models의 npm 모듈 사용 가능

 

• 해결 과정
  1. 모델을 오프라인으로 저장
     -> 오프라인으로 저장하는 곳 : Kaggle의 Tensorflow.js 모델 다운로드 받는 곳

Find Pre-trained Models | Kaggle

       

        2. createDetector() 함수의 옵션 지정 : detectorModelUrl, landmarkModelUrl 모델 저장 장소 지정

_createDetector() {
  const model = SupportedModels.MediaPipeHands;
  const detector = createDetector(model, {
      runtime: "tfjs",
      modelType: "lite",
      maxHands: 2, // or 2~10.
      flipHorizontal: false,
      staticImageMode: false,
      detectorModelUrl:
          "/static/tensorflow-models/tfjs-model_handpose_3d_detector_lite_1/model.json",
      landmarkModelUrl:
          "/static/tensorflow-models/tfjs-model_handpose_3d_landmark_lite_1/model.json",
  });
  return detector;
}

 

      3. 비동기로 모델 로딩

if (!this._detector) {
    this._createDetector().then(detector => {
        this._detector = detector;
        console.log("model loading success!, detector: ", this._detector);
    })
}

 

      4. 모델 로딩 결과 : <pending> → 펼치면 “fulfilled” 출력되어야 함