Разверните TensorFlow.js в расширении Chrome.

В этом руководстве вы создадите и установите расширение Chrome, которое позволит вам щелкнуть правой кнопкой мыши изображение на веб-странице и выполнить обнаружение многоклассовых объектов на изображении. Расширение применяет к изображению классификатор MobileNetV2 , а затем помечает изображение предсказанным классом.

Код примера доступен на GitHub .

Предварительные условия

Для работы с этим руководством в вашей среде разработки необходимо установить следующее:

• Node.js ( скачать )
• Пряжа ( установить )
• Хром ( скачать )

Создайте расширение

Получите исходный код и создайте расширение:

1. Клонируйте или загрузите репозиторий tfjs-examples .
2. Перейдите в каталог chrome-extension : cd tfjs-examples/chrome-extension .
3. Установите зависимости: yarn .
4. Запустите скрипт сборки: yarn build .

После запуска сценария сборки вы должны увидеть следующие новые файлы:

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

Установите расширение

Установите расширение в Chrome:

1. В браузере Chrome перейдите по адресу chrome://extensions .
2. Включите режим разработчика с помощью переключателя в правой части браузера.
3. Выберите «Загрузить распакованный» и выберите каталог tfjs-examples/chrome-extension/dist . Этот каталог содержит файл manifest.json и файлы src/*.js , упакованные сборкой.

Вы должны увидеть новую карточку для TF.js mobilenet в расширении Chrome .

Используйте расширение

Установив расширение, вы сможете классифицировать изображения в браузере:

1. Перейдите на сайт с изображениями. Например, перейдите на google.com , найдите «тигры» и выберите «Изображения» на странице результатов. Вы должны увидеть страницу с изображениями тигров.
2. Щелкните изображение правой кнопкой мыши и выберите «Классифицировать изображение с помощью TensorFlow.js» . Существует период разминки, поэтому при первом запуске приложения вывод будет медленнее. (В ваших собственных приложениях вы можете улучшить модель, подав в нее фиктивные данные.)

Расширение запускает модель на изображении, а затем накладывает текст, указывающий прогноз.

Удалить расширение

Когда вы закончите экспериментировать с расширением, вы можете удалить его:

1. В Chrome перейдите по адресу chrome://extensions .
2. В мобильной сети TF.js на карточке расширения Chrome выберите «Удалить» и подтвердите, что вы хотите удалить расширение.

Как работает расширение

В этом разделе описывается, как работает расширение, на высоком уровне.

Файл манифеста , 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 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);

Когда пользователь выбирает пункт меню, обратный вызов отправляет сообщение, содержащее идентификатор текущей вкладки и 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 секунд не происходит никаких действий. Дополнительную информацию об управлении событиями Service Worker см. в документации Chrome .

Что дальше

В этом руководстве показано, как развернуть расширение Chrome, которое использует TensorFlow.js и предварительно обученную модель MobileNet для классификации изображений. Подробнее о предварительно обученных моделях для TensorFlow.js можно узнать в репозитории предварительно обученных моделей .