Предыстория

Недавно я хотел поделиться своей новой моделью Tensorflow JS со своими коллегами в офисе, чтобы получить их отзывы. Вместо того, чтобы передавать им папку с файлами HTML и JavaScript, я хотел развернуть ее как внутренний статический сайт для лучшего взаимодействия с пользователем. Есть несколько хостинговых услуг, позволяющих легко добиться этого, но поскольку моя модель является конфиденциальной, она должна быть доступна только сотрудникам компании. Я не хотел раскручивать всю систему на стороне сервера, чтобы позаботиться об авторизации, а вместо этого хотел добиться этого с минимальными изменениями в моем статическом HTML-файле. Моя компания подписана на сервисы GSuite (документы, таблицы, диск и т. д.), что я и выбрал для безопасного развертывания сайта. Если вы хотите публично развернуть свою модель через хостинг Firebase, ознакомьтесь с этой кодовой лабораторией Jason Mayes.

Прочитав эту статью, вы сможете развернуть свою модель Python Tensorflow как модель Tensorflow JS (tfjs) для непосредственного запуска на устройствах пользователей. Веб-страница обслуживается через Google App Script с уровнями разрешений по вашему выбору. Диск Google используется как хранилище моделей, что опять же позволяет вам контролировать, кто имеет доступ к файлам моделей. Здесь важна безопасность, поскольку модель, которая может быть конфиденциальной, загружается на устройство пользователя и может быть изменена по его желанию. Основное внимание в этой статье уделяется развертыванию модели ML, и предполагается, что читатель имеет базовое представление о веб-разработке и машинном обучении. В другой статье я рассказал, как обучить модель распознавания цифр прямо в браузере с помощью веб-воркеров, и попутно коснулся некоторых основ машинного обучения. В этой статье я также поделился некоторыми плюсами и минусами развертывания моделей непосредственно на устройствах пользователей.

Обратите внимание, что этот подход работает только с моделью Tensorflow Keras из-за отсутствия поддержки загрузки моделей GraphDef через API tfjs.io.browserFiles, от которого мы зависим. Теперь, когда мы знаем, почему и что стоит за этой идеей, давайте перейдем к захватывающей части…

Обзор решения

  1. Обучите и экспортируйте свою модель Tensorflow Keras
  2. Преобразование модели Python в Javascript
  3. Загрузите и обслуживайте модель с Google Диска через скрипт приложения с использованием tfjs.
  4. Разверните его как безопасный веб-сайт

1. Обучите простую модель

Чтобы продолжить, вы можете либо создать модель tf keras с нуля за считанные секунды, как показано в блокноте ниже, либо использовать свою собственную. Это фиктивная модель, которая обучена просто умножать введенные данные на 3. На практике она бесполезна, но имеет все ингредиенты, чтобы донести мысль.

Загрузите обученный файл модели 3_table_model.h5 из Google Colab (как?) или не стесняйтесь использовать тот, который я обучил прямо здесь.

2. Модель Python → Модель JavaScript

Команда Tensorflow JS создала замечательный преобразователь, который проведет нас через процесс преобразования различных типов моделей Python для запуска в JavaScript. Установите их инструмент и выполните шаги, указанные здесь.

Вы можете загрузить нашу папку с конвертированной моделью с 3 множителями прямо здесь и следовать ей.

3. ️️Обслуживайте модель с помощью Google App Script.

Наконец-то мы подошли к сути этого поста. Загрузите преобразованную папку модели tfjs на Google Диск и установите соответствующие разрешения. Это наша первая линия защиты 👮‍♀️ с точки зрения безопасности нашей модели. Я сделал его видимым для всех в моей компании.

Преобразованная папка модели tfjs содержит файл model.json и один или несколько файлов .bin. Файлы model.json содержат метаданные о модели и ее архитектуре. Файлы bin — это веса нашей модели, которые разделены/разделены для оптимальной передачи по сети.

Создайте новый проект App Script на https://script.google.com/home. Файл Code.gs извлекает наши модели с Диска, а также служит базовым HTML-файлом, как показано ниже:

В loadModelFromDrive() мы возвращаем файл mode.json f как строку JSON и единственный (в нашем случае) двоичный файл f2 как массив байтов. Если у вас есть другие bin-файлы, прочитайте и преобразуйте их аналогичным образом.

Создайте новый HTML-файл с именем index.html из меню «Файл». Здесь мы вызываем loadModelFromDrive(), запускаем модель и отвечаем на пользовательские события.

Интересная часть заключается в том, как мы используем файлы моделей и передаем их в tf.loadLayersModel(). Команда TFJS предоставила несколько вспомогательных методов ввода-вывода для загрузки нашей модели,

  1. общедоступный или аутентифицированный URL
  2. ИндекседБД
  3. Локальное хранилище
  4. Ввод файла HTML
  5. Пользовательский ввод-вывод

Поскольку Drive API предоставляет нам содержимое файлов, мы оборачиваем их как файлы JavaScript, искусно имитируя их как вводимые пользователем HTML-файлы (вариант 4). Поскольку model.json представляет собой строку JSON, мы можем легко создать из нее объект JS File, указав его тип MIME,

const modelJson = new File([modelFiles[0]], "model.json", { type: "application/json" })

Однако файл весов должен быть прочитан как необработанные байты, а затем обернут как объект JS File. Это связано с тем, что объект файл сценария приложения отличается от объекта файл JS. Поэтому, чтобы создать одно из другого, мы должны привести результат к общему знаменателю, который представляет собой необработанные байты уровня ОС. Функция loadModelFromDrive() в приведенном выше скрипте приложения возвращает массив Byte[]. Для его использования мы используем JS TypedArrays вот так,

const modelWeights = new File([Uint8Array.from(modelFiles[1])], "group1-shard1of1.bin")

Эти структуры данных недавно были введены в JavaScript для работы с мультимедийными данными (холст, изображение, аудио, видео и т. д.). Но, к счастью, они также пригодились для управления файлами наших моделей машинного обучения!

Поздравляем! теперь ваша модель готова делать прогнозы с помощью model.predict(). Полный скрипт, который показывает другие части, такие как пользовательский интерфейс, подготавливает ввод для прогнозов, показывает оповещения пользователю и т. д., доступен здесь.

Некоторые необязательные вещи, чтобы попробовать

для улучшения опыта может быть

  • Сохраните модель в IndexedDB браузера при первой загрузке с диска. Когда пользователь снова посещает ваш сайт, модель может быть загружена с его устройства, без необходимости совершать обход сети.
  • Используйте preact или аналогичный для создания более современного приложения на основе компонентов.
  • Используйте застежку для локального управления кодом вашего приложения-скрипта в вашем любимом редакторе и публикации его в git. Таким же образом я опубликовал этот код на https://github.com/Nithanaroy/tfjs-drive-deploy/tree/master.

4. Безопасное развертывание 🚀🔒

Это самый простой шаг из всех и одна из основных причин выбора app-script в первую очередь. Выберите параметр «Развернуть как веб-приложение» в меню «Опубликовать» пользовательского интерфейса приложения-скрипта и выберите параметры, которые соответствуют вашим потребностям. В моем случае я разрешил доступ пользователям из моей компании.

Вот и все друзья. Все файлы, используемые на каждом из шагов, доступны здесь. И вот сайт хостинга с нашей игрушечной моделью.

Что вы создали и развернули с помощью tfjs? В LinkedIn существует активное сообщество, где разработчики со всего мира делятся своими творческими проектами с tfjs. Смотрите и вдохновляйтесь!

Большое спасибо Jason Mayes за предложение нескольких альтернатив этому подходу и Ping Yu за пояснение того, как loadLayersModel() работает под капотом.