Edge TensorFlow.js 가이드

빌드 대상

이 가이드에서는 AutoML Vision Edge를 사용하여 학습시키고 내보낸 TensorFlow.js 이미지 분류 모델을 다운로드합니다. 그런 후 모델을 로드하고 이미지에서 예측을 수행하는 웹 페이지를 빌드합니다.

목표

다음을 수행하기 위한 자바스크립트 코드를 작성합니다.

  • TensorFlow.js 라이브러리를 사용하여 웹 페이지에서 사전 학습된 AutoML Vision Edge 이미지 분류 모델을 실행합니다.

시작하기 전에

AutoML Vision Edge에서 모델 학습

모델을 Edge 기기에 배포하려면 먼저 Edge 기기 모델 빠른 시작에 따라 AutoML Vision Edge에서 TensorFlow.js 모델을 학습하고 내보내야 합니다.

마지막 단계에서 다음과 같이 모델을 TensorFlow.js로 내보냅니다.

업데이트된 TensorFlow.js 모델 내보내기 스크린샷

빠른 시작을 완료하면 Google Cloud Storage에 다음과 같은 내보낸 파일이 생성됩니다.

  • 라벨이 있는 dict.txt 파일
  • model.json 파일
  • *.bin 가중치 파일
Tensorflow.js 폴더 예시

모델 파일 다운로드

내보낸 파일을 Google Cloud Storage에서 로컬 디렉터리로 복사합니다.

gsutil cp gs://${cloud-storage-bucket}/model-export/icn/${model-name}/* ${local-folder}

소규모 웹 앱 제작

TensorFlow.js 모델 파일을 로컬로 저장했으면 웹 앱을 제작할 수 있습니다.

  1. 아직 저장하지 않은 경우 모델 파일이 저장된 로컬 디렉터리로 이동합니다.

  2. 동일한 로컬 디렉터리에서 다음 콘텐츠가 포함된 index.html 파일을 만듭니다.

    index.html

    코드 샘플

    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
    <script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>
    <img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">
    <script>
    async function run() {
      const model = await tf.automl.loadImageClassification('model.json');
      const image = document.getElementById('daisy');
      const predictions = await model.classify(image);
      console.log(predictions);
      // Show the resulting object on the page.
      const pre = document.createElement('pre');
      pre.textContent = JSON.stringify(predictions, null, 2);
      document.body.append(pre);
    }
    run();
    </script>

웹 앱 실행

index.html 파일이 포함된 디렉터리에서 간단한 HTTP 서버를 포트 8000에서 시작합니다.

Python

python3 -m SimpleHTTPServer 8000

Node.js

Node.js가 있으면 http-server 패키지를 전역적으로 설치하고 다음을 실행합니다.

http-server -p 8000

브라우저에서 http://localhost:8000을 열면 페이지와 Console(보기 > 개발자 > 자바스크립트 콘솔)에 예측 결과가 표시됩니다.

브라우저에 표시된 TensorFlow.js 예측

작동 방식

이제 앱이 실행되므로 코드가 수행하는 역할을 살펴볼 수 있습니다.

처음 두 스크립트 태그는 TensorFlow.js 라이브러리와 AutoML 라이브러리를 로드합니다. 이 라이브러리들은 NPM 패키지 관리자에서 사용할 수 있습니다.

<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow/tfjs-automl"></script>

AutoML NPM 패키지는 AutoML Vision Edge에서 생성된 모델을 로드하고 실행하기 위한 API 집합을 제공합니다. 이 패키지는 이미지 또는 동영상 요소 피드 기능, 픽셀 값 정규화, 라벨 및 점수가 포함된 정렬된 객체 반환 등 모델을 실행하는 데 필요한 모든 사전 또는 사후 처리를 담당합니다.

이미지 태그는 Google Cloud Storage 게시 경로에서 테스트 이미지를 로드합니다.

<img id="daisy" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/img_classification/daisy.jpg">

모델을 테스트할 때는 이미지 src를 자체 이미지 경로로 바꿔야 합니다.

그런 후 모델을 로드하고 이미지에 예측을 수행합니다.

const model = await tf.automl.loadImageClassification('model.json');
const image = document.getElementById('daisy');
const predictions = await model.classify(image);

tf.automl.loadImageClassification(url)으로 모델을 지정합니다. 이 함수는 내보낸 model.json 파일에 대해 절대 또는 상대 URL을 사용합니다. 여기에서는 index.html 파일 및 모델 파일이 같은 디렉터리에 있기 때문에 상대 URL입니다.

model.classify(image)를 호출하여 예측을 가져옵니다. 이 함수는 모델을 통해 단일 이미지를 실행하고 예측을 반환합니다. 이 함수의 입력은 html 이미지 요소, 동영상 요소, 3D 텐서입니다.

다음 단계

Edge 모델을 사용한 TensorFlow.js 이미지 분류 웹 앱에 대한 가이드를 마쳤습니다. 여기에서는 웹브라우저에서 웹 앱을 실행하고 커스텀 Edge 모델 및 웹에서 로드한 이미지를 사용하여 분류 예측을 수행했습니다. 그런 다음 기본 기능을 이해하기 위해 샘플 코드의 일부를 조사했습니다.

다음 단계: