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/iod/${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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">
<script>
async function run() {
  const model = await tf.automl.loadObjectDetection('model.json');
  const img = document.getElementById('salad');
  const options = {score: 0.5, iou: 0.5, topk: 20};
  const predictions = await model.detect(img, options);
  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>

  3. (선택사항): 자체 이미지를 가리키도록 <img> 태그의 src 경로 속성을 바꿉니다.

웹 앱 실행

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

Python

python -m http.server 8000

Node.js

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

http-server -p 8000

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

결과는 정렬된 예측 객체 목록입니다.

[
  {
    "box": {
      "left": 105.1,
      "top": 22.2,
      "width": 70.6,
      "height": 55.7
    },
    "label": "Tomato",
    "score": 0.972
  },
  ...
]

API에 대한 자세한 내용은 AutoML NPM 패키지 문서를 참조하세요.

작동 방식

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

처음 두 스크립트 태그는 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="salad" crossorigin="anonymous" src="https://storage.googleapis.com/tfjs-testing/tfjs-automl/object_detection/test_image.jpg">

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

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

const model = await tf.automl.loadObjectDetection('model.json');
const img = document.getElementById('salad');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);

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

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

model.detect(img, options) 함수는 가능한 사양으로 options 인수(선택사항)도 사용합니다.

  • score - 확률 점수는 0과 1 사이여야 합니다 기본값은 0.5입니다. 점수가 이 임곗값보다 낮은 상자는 무시됩니다.
  • topk - 가능성이 가장 높은 객체의 topk만 반환됩니다. 실제 객체 수는 이 값보다 작을 수 있습니다.

  • iou - IoU(Intersection over Union) 임곗값입니다. IoU는 0과 1 사이의 측정항목으로 두 상자 간에 중첩된 영역을 측정하는 데 사용됩니다. 예측 상자 간에 중첩되는 영역은 지정된 임곗값을 초과하지 않습니다.

    IoU(Intersection over Union)를 사용한 모델 평가에 대한 자세한 내용은 모델 평가 페이지를 참조하세요.

API에 대한 자세한 내용은 AutoML NPM 패키지 문서를 참조하세요.

다음 단계

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

다음 단계:

  • 이미지 위에 확률이 포함된 예측 상자를 오버레이하기 위해 SVG를 사용하는 데모 보기
  • TensorFlow.js 자세히 알아보기
  • 공식 문서에서 AutoML NPM 라이브러리 자세히 알아보기
  • 가이드에서 TensorFlow의 일반사항 자세히 알아보기