Chrome 확장 프로그램에 TensorFlow.js 배포

이 튜토리얼에서는 웹 페이지의 이미지를 마우스 오른쪽 버튼으로 클릭하고 이미지에서 멀티클래스 객체 감지를 수행할 수 있는 Chrome 확장 프로그램을 빌드하고 설치합니다. 확장 프로그램은 MobileNetV2 분류자를 이미지에 적용한 다음 예측된 클래스로 이미지에 레이블을 지정합니다.

예제 코드는 GitHub 에서 사용할 수 있습니다.

전제조건

이 튜토리얼을 완료하려면 개발 환경에 다음이 설치되어 있어야 합니다.

Node.js( 다운로드 )
원사( 설치 )
크롬( 다운로드 )

확장 빌드

소스 코드를 얻고 확장을 빌드하십시오.

tfjs-examples 저장소를 복제하거나 다운로드하세요.
chrome-extension 디렉토리로 변경합니다: cd tfjs-examples/chrome-extension .
종속성 설치: yarn .
빌드 스크립트를 실행합니다: yarn build .

빌드 스크립트를 실행하면 다음과 같은 새 파일이 표시됩니다.

dist/src/content.js
dist/src/service_worker.js
dist/src/service_worker.js.map

확장 프로그램 설치

Chrome에 확장 프로그램을 설치합니다.

Chrome 브라우저에서 chrome://extensions 로 이동합니다.
브라우저 오른쪽에 있는 토글을 사용하여 개발자 모드를 켭니다.
압축이 풀린 로드를 선택하고 tfjs-examples/chrome-extension/dist 디렉터리를 선택합니다. 이 디렉터리에는 manifest.json 파일과 빌드로 패키지된 src/*.js 파일이 포함되어 있습니다.

Chrome 확장 프로그램에 TF.js mobilenet 용 새 카드가 표시됩니다.

확장 프로그램을 사용하세요

확장 프로그램을 설치하면 브라우저에서 이미지를 분류할 수 있습니다.

이미지가 있는 사이트로 이동합니다. 예를 들어 google.com 으로 이동하여 'tigers'를 검색하고 결과 페이지에서 이미지를 선택합니다. 호랑이 이미지 페이지가 표시됩니다.
이미지를 마우스 오른쪽 버튼으로 클릭하고 TensorFlow.js로 이미지 분류를 선택합니다. 워밍업 기간이 있으므로 처음 앱을 실행하면 추론 속도가 느려집니다. (자신의 애플리케이션에서는 더미 데이터를 공급하여 모델을 준비할 수 있습니다.)

확장 프로그램은 이미지에 모델을 실행한 다음 예측을 나타내는 텍스트를 겹쳐 놓습니다.

확장 프로그램 제거

확장 프로그램 실험을 마치면 제거할 수 있습니다.

Chrome에서 chrome://extensions 로 이동합니다.
Chrome 확장 카드의 TF.js mobilenet 에서 제거를 선택하고 확장 프로그램 제거를 확인합니다.

확장 기능의 작동 방식

이 섹션에서는 확장이 어떻게 작동하는지 높은 수준에서 설명합니다.

매니페스트 파일인 manifest.json 은 Chrome이 백그라운드에서 실행할 서비스 워커를 지정합니다.

"background": {
   "service_worker": "src/service_worker.js"
},

서비스 워커 스크립트 service_worker.js 는 TensorFlow.js 패키지와 mobilenet 모델을 가져옵니다.

import * as mobilenet from '@tensorflow-models/mobilenet';
import * as tf from '@tensorflow/tfjs';

package.json 의 빌드 스크립트는 번들러 인 Parcel을 사용하여 모든 것을 하나로 묶어 런타임 시 외부 스크립트가 로드되지 않도록 합니다.

"build": "parcel build src/service_worker.js --dist-dir dist/src/ && npm run copy",

이는 원격 호스팅 코드를 금지하는 Chrome Manifest V3를 준수하기 위한 것입니다. 서비스 워커는 TensorFlow.js 모델과 같은 외부 리소스를 계속 로드할 수 있습니다.

서비스 워커 스크립트는 이미지에 대해 작동하는 컨텍스트 메뉴 항목을 생성합니다. 그런 다음 스크립트는 클릭을 수신합니다.

/**
 * Adds a right-click menu option to trigger classifying the image.
 * The menu option should only appear when right-clicking an image.
 */
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'contextMenu0',
    title: 'Classify image with TensorFlow.js ',
    contexts: ['image'],
  });
});

chrome.contextMenus.onClicked.addListener(clickMenuCallback);

사용자가 메뉴 항목을 선택하면 콜백이 현재 탭 ID와 마우스 오른쪽 버튼으로 클릭한 이미지의 URL이 포함된 메시지를 보냅니다. (서비스 워커에서는 DOM 객체를 사용할 수 없습니다.)

function clickMenuCallback(info, tab) {
  const message = { action: 'IMAGE_CLICKED', url: info.srcUrl };
  chrome.tabs.sendMessage(tab.id, message, (resp) => {
    if (!resp.rawImageData) {
      console.error(
        'Failed to get image data. ' +
        'The image might be too small or failed to load. ' +
        'See console logs for errors.');
      return;
    }
    const imageData = new ImageData(
      Uint8ClampedArray.from(resp.rawImageData), resp.width, resp.height);
    imageClassifier.analyzeImage(imageData, info.srcUrl, tab.id);
  });
}

콘텐츠 스크립트인 content.js 메시지를 수신하고 IMAGE_CLICKED 작업을 처리합니다. 스크립트는 이미지 URL을 수신하고, 이미지를 로드하고, OffscreenCanvas 에서 이미지를 렌더링하고, 캔버스에서 이미지 데이터를 가져온 다음, 해당 데이터를 서비스 워커로 다시 보냅니다.

서비스 워커는 이미지 데이터를 수신한 후 해당 데이터로 모바일넷 모델을 실행하고 예측 결과를 얻습니다. 위의 clickMenuCallback 함수에서 imageClassifier 모델을 로드하고 예측을 가져오는 ImageClassifier 클래스의 인스턴스입니다. 그런 다음 서비스 워커 스크립트는 결과를 표시하기 위해 콘텐츠 스크립트로 다시 보냅니다. 콘텐츠 스크립트는 결과를 받은 후 원본 이미지 위에 결과를 오버레이합니다.

서비스 작업자 스레드는 약 30초 동안 활동이 발생하지 않으면 유휴 상태가 됩니다. 서비스 워커 이벤트 관리에 대한 자세한 내용은 Chrome 설명서 를 참조하세요.

무엇 향후 계획

이 튜토리얼에서는 TensorFlow.js와 사전 훈련된 MobileNet 모델을 사용하여 이미지를 분류하는 Chrome 확장 프로그램을 배포하는 방법을 보여주었습니다. TensorFlow.js용 사전 학습된 모델에 대해 자세히 알아보려면 사전 학습된 모델 저장소를 참조하세요.