1. Введение
Итак, вы создали собственную модель машинного обучения с помощью TensorFlow.js, но теперь вам нужно разместить её где-нибудь для использования на выбранном вами веб-сайте. Существует множество вариантов, но сегодня мы рассмотрим, насколько легко использовать Firebase Hosting , который также может предоставить вам дополнительные преимущества, такие как версионирование, запуск моделей по защищенному соединению и многое другое «из коробки».
Что вы построите
В этом практическом занятии вы создадите полноценную систему, способную размещать и запускать пользовательскую сохраненную модель TensorFlow.js вместе с соответствующими ресурсами, такими как HTML, CSS и JavaScript. Мы создадим очень простую, легковесную модель, которая может предсказывать числовое значение на выходе, имея некоторое входное значение (например, какова цена дома, если известна его площадь), и разместим ее на Firebase Hosting для масштабируемого использования.
Что вы узнаете
- Как сохранить пользовательскую модель TensorFlow.js в правильном формате
- Как настроить учетную запись Firebase для хостинга
- Как развернуть ресурсы на Firebase Hosting
- Как развернуть новые версии модели.
Обратите внимание: основное внимание в этом практическом занятии уделяется тому, как взять обученную вами модель и разместить её для развертывания, а не курсу по созданию идеальной архитектуры модели, поэтому мы быстро перейдем к созданию самой модели машинного обучения на простом примере. Принципы будут одинаковыми независимо от того, какую модель вы в итоге создадите самостоятельно.
Поделитесь с нами своими творениями!
Если вы создали что-нибудь интересное, используя этот набор, расскажите нам! Мы будем рады увидеть ваши творения.
Отмечайте нас в социальных сетях, используя хэштег #MadeWithTFJS , чтобы получить шанс на публикацию вашего проекта в нашем блоге TensorFlow или даже на будущих мероприятиях, таких как наши презентации проектов .
2. Что такое Firebase Hosting?
Firebase Hosting предоставляет быстрый и безопасный хостинг производственного уровня для ваших веб-приложений, статического/динамического контента и микросервисов.
С помощью одной команды вы можете быстро развернуть веб-приложения и предоставлять контент через глобальную CDN (сеть доставки контента), обеспечивая доступность контента с низкой задержкой практически в любом месте. Вы также можете использовать Firebase Hosting в сочетании с Firebase Cloud Functions или Cloud Run для создания и размещения микросервисов, но это выходит за рамки данного практического занятия.
Ключевые возможности Firebase Hosting
- Передача контента осуществляется через защищенное соединение — современный интернет безопасен. Часто для доступа к датчикам на стороне клиента сайт должен передаваться в защищенном контексте. В Firebase Hosting встроен SSL-сертификат, не требующий настройки, поэтому контент всегда передается безопасно для всех размещенных файлов.
- Размещение статического и динамического контента, а также микросервисов с поддержкой аутентификации, позволяющей загружать/просматривать эти файлы только авторизованным пользователям при необходимости.
- Быстрая доставка контента — каждый загруженный вами файл кэшируется на SSD-накопителях на CDN-серверах по всему миру. Независимо от местоположения ваших пользователей, контент доставляется быстро.
- Развертывайте новые версии одной командой — используя интерфейс командной строки Firebase, вы можете запустить свое приложение за считанные секунды.
- Откат в один клик — быстрая развертка — это здорово, но возможность отменить ошибки еще лучше. Firebase Hosting предоставляет полное управление версиями и релизами с возможностью отката в один клик.
Независимо от того, развертываете ли вы простую целевую страницу приложения или сложное прогрессивное веб-приложение (PWA) , хостинг предоставляет вам инфраструктуру, функции и инструменты, специально разработанные для развертывания и управления веб-сайтами и приложениями.
По умолчанию каждый проект Firebase имеет бесплатные поддомены на доменах web.app и firebaseapp.com. Эти два сайта предоставляют один и тот же развернутый контент и конфигурацию. При желании вы также можете подключить собственное доменное имя к сайту, размещенному на Firebase.
Этапы реализации
- Создать проект
- Установите и настройте интерфейс командной строки Firebase.
- Разверните свой сайт
- Ссылка на веб-приложение Firebase для мониторинга производительности (необязательно)
Но прежде чем мы сможем это сделать, нам понадобится модель машинного обучения и веб-приложение для развертывания. Так давайте же их создадим!
3. Простая модель машинного обучения для прогнозирования цен на жилье.
Для целей этого упражнения мы создадим очень простую модель машинного обучения, которая предсказывает числовые значения. Мы попробуем использовать машинное обучение для прогнозирования стоимости вымышленного дома, исходя из его площади в квадратных футах, исключительно в иллюстративных целях. На самом деле, для этой демонстрации мы просто умножим площадь дома в квадратных футах на 1000, чтобы получить прогнозируемую стоимость для наших обучающих данных, но машинному обучению потребуется научиться этому самостоятельно.
В реальности вам, скорее всего, потребуется использовать данные из реального мира, которые могут иметь более сложные зависимости (например, для небольших домов расчетная стоимость в долларах может составлять всего 500-кратное увеличение их размера, но после определенного порога она постепенно увеличивается до 1000-кратного увеличения и т.д.), и вам может понадобиться более продвинутая модель для определения наилучшего способа прогнозирования этих значений.
Созданная нами сегодня модель (линейная регрессия) может использоваться для прогнозирования многих других вещей при наличии достаточного количества реальных данных, и начать работу с ней довольно просто для нашего гипотетического случая, описанного выше. Однако сегодня мы сосредоточимся на том, как сохранять и развертывать модель, а не на ее проектировании и оптимизации для конкретного случая. Итак, приступим!
Данные для обучения и тестирования
Все модели машинного обучения начинаются с получения обучающих данных, которые мы можем использовать для обучения модели прогнозированию будущих значений. Обычно такие данные можно получить из базы данных, папки с файлами, CSV-файла и т. д., но здесь мы напрямую зададим 20 примеров в виде массива на JavaScript, как показано ниже. Мы рекомендуем воспроизвести этот код в среде, в которой вам удобно работать с кодом, например, на Glitch.com , или в вашем собственном текстовом редакторе локально, если вы можете запустить сервер на localhost.
model.js
// House square footage.
const data = [800, 850, 900, 950, 980, 1000, 1050, 1075, 1100, 1150, 1200, 1250, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000];
// Estimated dollar cost of house for each piece of data above (1000x square footage).
const answers = [800000, 850000, 900000, 950000, 980000, 1000000, 1050000, 1075000, 1100000, 1150000, 1200000, 1250000 , 1300000, 1400000, 1500000, 1600000, 1700000, 1800000, 1900000, 2000000];
// Testing data separate from training data.
const dataTest = [886, 1225, 500];
const answersTest = [886000, 1225000, 500000];
Как видите, каждому элементу данных соответствует определенное значение ответа, которое мы будем пытаться предсказать в будущем (можно представить их как значения x и y на простом двумерном графике).
Итак, для значения 800 мы хотим получить на выходе оценку в 800 000 долларов. Для значения 900 мы выведем 900 000 долларов и так далее. По сути, число умножается на 1000. Однако модель машинного обучения не знает об этом простом соотношении 1000 * N, и она должна изучить его самостоятельно на примерах, которые мы приводим.
Обратите внимание, что у нас также есть тестовые данные, которые полностью отделены от обучающих данных. Это позволяет нам оценить обученную модель и увидеть, насколько хорошо она работает на данных, с которыми она никогда раньше не сталкивалась.
Мы загрузим этот скрипт вместе с библиотекой TensorFlow.js, используя следующий HTML-код:
train.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Training Model</title>
<meta charset="utf-8">
</head>
<body>
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<!-- Import our JS code to train the model -->
<script src="/model.js" defer></script>
</body>
</html>
Обучение модели
Далее настало время обучить модель, добавив приведенный ниже код к существующему коду JavaScript, расположенному выше, в конец файла.
Для тех, кому интересно, добавлены комментарии, но, как уже упоминалось, этот практический урок в основном посвящен созданию модели на основе уже сохраненных данных. В конце вы найдете ссылки на другие практические уроки, если хотите подробнее разобраться в создании моделей. А пока вы можете просто скопировать и вставить код в свой проект.
model.js
// Create Tensor representations of our vanilla JS arrays above
// so can be used to train our model.
const trainTensors = {
data: tf.tensor2d(data, [data.length, 1]),
answer: tf.tensor2d(answers, [answers.length, 1])
};
const testTensors = {
data: tf.tensor2d(dataTest, [dataTest.length, 1]),
answer: tf.tensor2d(answersTest, [answersTest.length, 1])
};
// Now actually create and define model architecture.
const model = tf.sequential();
// We will use one dense layer with 1 neuron and an input of
// a single value.
model.add(tf.layers.dense({inputShape: [1], units: 1}));
// Choose a learning rate that is suitable for the data we are using.
const LEARNING_RATE = 0.0001;
train();
async function train() {
// Compile the model with the defined learning rate and specify
// our loss function to use.
model.compile({
optimizer: tf.train.sgd(LEARNING_RATE),
loss: 'meanAbsoluteError'
});
// Finally do the training itself over 500 iterations of the data.
// As we have so little training data we use batch size of 1.
// We also set for the data to be shuffled each time we try
// and learn from it.
let results = await model.fit(trainTensors.data, trainTensors.answer, {epochs: 500, batchSize: 1, shuffle: true});
// Once trained we can evaluate the model.
evaluate();
}
async function evaluate(stuff) {
// Predict answer for a single piece of data.
model.predict(tf.tensor2d([[768]])).print();
}
Используя приведенный выше код, мы смогли обучить модель, способную предсказывать выходное значение на основе входного значения. При запуске кода я получаю предсказание 768 073 для входного значения 768, которое выводится в консоль разработчика вашего браузера (нажмите F12, чтобы открыть ее, если она еще не открыта). Это довольно хорошая оценка цены дома, учитывая, что мы привели примеры, которые были в 1000 раз выше входного значения. Примечание: ваше предсказанное значение может немного отличаться, и это нормально.
Если нас устраивает такой результат, всё, что нам нужно сделать, это сохранить модель на диск, чтобы загрузить её в Firebase Hosting!
Сохранение модели
Добавление приведенного ниже кода в конец функции evaluate (после model.predict) позволяет экспортировать полученную модель после завершения обучения непосредственно из веб-браузера и сохранить ее на диск, чтобы затем разместить ее где-нибудь и использовать в будущем без необходимости переобучения при каждой загрузке страницы.
model.js
await model.save('downloads://my-model');
Если вы теперь перейдете на страницу train.html и запустите ее, она должна обучить модель (что может занять несколько секунд), а затем предложить загрузить полученную обученную модель после завершения.
4. Настройка Firebase
Войдите в Firebase и создайте проект.
Если вы новичок в Firebase, зарегистрироваться очень просто, используя свою учетную запись Google. Просто перейдите по ссылке https://firebase.google.com/ и войдите в систему, используя свою обычную учетную запись Google. После перенаправления на главную страницу нажмите «Перейти в консоль» в правом верхнем углу страницы:
После перенаправления в консоль вы должны увидеть целевую страницу, примерно такую:
Просто нажмите кнопку «Добавить проект», как показано на рисунке, чтобы создать новый проект Firebase, дайте проекту уникальное имя, примите условия и нажмите «Продолжить».
Далее вас спросят, хотите ли вы добавить аналитику в свой проект. Если вы хотите иметь доступ к такой аналитике, включите эту опцию и нажмите «Продолжить», как показано на рисунке:
Если все прошло успешно, вы должны увидеть страницу, готовую к запуску проекта, как показано на рисунке:
Ура! У нас есть проект. Нажмите «Продолжить», чтобы перейти в консоль только что созданного проекта. Оставьте страницу открытой для дальнейшего использования, а пока нам нужно установить некоторые инструменты.
Установка и подключение интерфейса командной строки.
Firebase доступен в виде пакета Node NPM, который можно установить и использовать через интерфейс командной строки (CLI), что упрощает развертывание локальных файлов и папок на Firebase Hosting. В сегодняшнем уроке мы будем использовать среду Linux, но если у вас Windows или Mac, вы можете следовать инструкциям здесь , чтобы настроить инструменты CLI на вашем устройстве.
Однако в Linux сначала необходимо установить NPM и Node.js, если они еще не установлены (следуйте этим инструкциям, если используете другие среды ), выполнив следующие 3 команды в окне терминала:
Терминал командной строки:
sudo apt update
Терминал командной строки:
sudo apt install nodejs
Терминал командной строки:
sudo apt install npm
Теперь, когда у вас установлены Node.js и NPM, вам просто нужно выполнить следующую команду в окне терминала, чтобы установить инструменты командной строки Firebase:
Терминал командной строки:
sudo npm install -g firebase-tools
Отлично! Теперь мы готовы подключить наш проект Firebase к нашей системе, чтобы иметь возможность отправлять в него файлы и многое другое.
Вход в Firebase
Войдите в Firebase, используя свою учетную запись Google, выполнив следующую команду:
Терминал командной строки:
firebase login
Вам будет предложено предоставить доступ к вашей учетной записи Google Firebase, как показано ниже:
Разрешите это, и вы наконец увидите успешное подключение ваших инструментов командной строки к вашей учетной записи Firebase:
Закройте окно и вернитесь в командную строку терминала, в которой вы вводили команды ранее. Теперь терминал должен быть готов принимать новые команды, как показано на скриншоте (мы скрыли любую конфиденциальную информацию):
Поздравляем! Теперь мы готовы загрузить файлы в созданный нами проект с локального компьютера.
Инициализация вашего проекта для развертывания на Firebase Hosting.
Чтобы подключить локальную папку к вашему проекту Firebase, выполните следующую команду из корневого каталога вашего локального проекта (папки, которую вы хотите использовать для загрузки файлов при развертывании).
Терминал командной строки:
firebase init
После выполнения этой команды просто следуйте инструкциям в терминале, чтобы завершить настройку, как показано ниже:
Здесь вы можете просто выбрать «Хостинг» с помощью стрелки вниз на клавиатуре, затем нажать пробел для подтверждения и Enter для подтверждения.
Теперь мы можем выбрать существующий проект, который мы создали ранее, для использования:
Нажмите Enter на кнопке «Использовать существующий проект», а затем выберите его с помощью клавиши со стрелкой вниз, как показано ниже:
Наконец, нажмите Enter, чтобы использовать его, затем примите значения по умолчанию на появившемся экране и выберите «Нет», чтобы настроить его как одностраничное приложение:
Это позволит вам размещать несколько HTML-страниц, если вы этого захотите.
Теперь, когда инициализация завершена, вы заметите, что в каталоге, из которого мы выполняли команды выше, создан файл firebase.json и папка "public".
Теперь нам осталось только переместить файлы, которые мы хотим развернуть, в созданную нами общедоступную папку, и всё будет готово к развертыванию! Давайте сделаем это прямо сейчас.
5. Создание веб-страницы TensorFlow.js
Загрузка сохраненной модели
Для начала давайте скопируем сохраненную ранее в практическом задании модель машинного обучения в созданную нами публичную папку с помощью Firebase. Просто перетащите сохраненные файлы в эту папку, как показано на рисунке:
Вы также заметите, что Firebase создал для нас файлы index.html и 404.html. Давайте отредактируем index.html с помощью вашего любимого текстового редактора, чтобы добавить собственный код, как показано ниже:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World - TensorFlow.js</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Import the webpage's stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TensorFlow.js Hello World</h1>
<p>Check the console (Press F12) to see predictions!</p>
<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<!-- Import the page's JavaScript to do some stuff -->
<script src="script.js" defer></script>
</body>
</html>
В приведенном выше новом коде для index.html мы указываем таблицу стилей, чтобы при желании можно было добавить стили на страницу позже, а также файл script.js для размещения кода, необходимого для использования сохраненной модели TensorFlow.js.
Давайте создадим эти файлы и заполним их следующим образом, чтобы они выполняли полезную функцию:
style.css
/** Leave blank for now **/
скрипт.js
// Load our saved model from current directory (which will be
// hosted via Firebase Hosting)
async function predict() {
// Relative URL provided for my-model.json.
const model = await tf.loadLayersModel('my-model.json');
// Once model is loaded, let's try using it to make a prediction!
// Print to developer console for now.
model.predict(tf.tensor2d([[1337]])).print();
}
predict();
Если вы правильно выполнили все шаги, то теперь в созданной нами общедоступной папке должны отображаться следующие отредактированные файлы:
Теперь нам осталось только развернуть наши файлы, чтобы проверить, работает ли всё!
6. Развертывание вашей модели и веб-сайта.
Запуск в эфир
Вернитесь в окно терминала, открытое в папке проекта Firebase на вашем локальном компьютере (это папка, содержащая нашу папку "public" и файлы инициализации Firebase).
Для развертывания файлов из общедоступной папки просто введите следующее:
Терминал командной строки:
firebase deploy
Дождитесь завершения выполнения команды в терминале, и вы должны получить сообщение об успешном завершении выпуска, а также URL-адрес, который вы можете использовать для его применения:
В приведенном выше примере вы можете увидеть, что конечный URL-адрес для просмотра нашего развертывания выглядит следующим образом:
https://tensorflow-js-demo.web.app (но ваш URL будет именем созданного вами проекта).
Откройте этот URL-адрес в веб-браузере, чтобы проверить его работоспособность. В случае успеха в консоли разработчика открытой страницы должно отобразиться что-то подобное (нажмите F12, чтобы открыть консоль разработчика).
Как видите, страница загружается на развернутом домене, и мы правильно видим прогноз нашей модели для площади в 1337 квадратных футов, который составляет 1 336 999,25 долларов США. Это действительно очень хорошая оценка, поскольку мы ожидали, что площадь будет в 1000 раз больше. Конечно, мы можем делать столько прогнозов, сколько захотим, если создадим удобный пользовательский интерфейс для вызова модели, и все это будет работать полностью на JavaScript, обеспечивая конфиденциальность и безопасность ваших запросов.
Теперь, когда ваша модель развернута и размещена, вы можете поделиться веб-сайтом с кем угодно в мире, и они смогут использовать ваше приложение на своих компьютерах. Конечно, вы можете захотеть добавить улучшенный пользовательский интерфейс и сделать его привлекательным, но это выходит за рамки данного руководства. Нет предела возможностям веб-приложений, которые вы можете разместить таким образом, используя машинное обучение, работающее в один клик и не требующее установки, и мы рекомендуем вам подумать о других ситуациях, в которых может быть полезна модель машинного обучения, работающая в браузере.
Мониторинг использования
В дополнение к любым инструментам Google Analytics, которые вы можете добавить в код своего веб-сайта, Firebase также предлагает версионирование и статистику использования через консоль для вашего проекта. После развертывания вы увидите что-то подобное, что можно периодически проверять по мере необходимости:
Как видите, по умолчанию на бесплатном тарифе вы получаете 10 ГБ трафика в месяц для ваших размещенных файлов. Если ваш сайт более популярен, вам может потребоваться добавить платёжный аккаунт, чтобы использовать больше трафика в течение месяца. Вы можете ознакомиться с тарифами Firebase для более крупных проектов здесь, хотя большинство обычных пользователей, работающих над прототипами, вероятно, не будут превышать бесплатный тариф, если ваша модель небольшая и использование невелико, поэтому это отличный способ протестировать и проверить, соответствует ли тариф вашим потребностям, прежде чем переходить на платный тариф по мере роста вашего бизнеса или идеи.
7. Поздравляем!
Поздравляем, вы сделали первые шаги в использовании TensorFlow.js с Firebase для создания и развертывания собственной модели машинного обучения, которой вы можете поделиться со всем миром. Только представьте, сколько всего еще вы могли бы создать, используя этот мощный и масштабируемый подход, готовый к применению в производственных условиях, поскольку Firebase автоматически масштабируется в зависимости от спроса, поэтому независимо от того, 10 или 10 000 пользователей захотят использовать это, все будет работать.
Если вы измените какие-либо файлы, просто повторно разверните приложение с помощью Firebase Deploy, как и раньше, и обязательно очистите кэш браузера, чтобы при следующей загрузке страницы получить новую версию файлов. Если у вас открыты инструменты разработчика, вы можете принудительно отключить кэш во вкладке «Сеть» во время тестирования, выбрав флажок «Отключить кэш» в верхней части этой вкладки.
Краткий обзор
В этой лабораторной работе по программированию мы:
- Разработал и обучил с нуля собственную модель на TensorFlow.js для прогнозирования цен на жилье.
- Зарегистрируйтесь, настройте и установите Firebase + инструменты Firebase CLI на свой компьютер для разработки.
- Развернули и запустили работающий веб-сайт, который загружает нашу обученную модель из шага 1 и использует ее в реальном веб-приложении, доступном любому пользователю в любой точке мира в масштабе.
Что дальше?
Теперь, когда у вас есть рабочая база, с которой можно начать, какие креативные идеи вы можете придумать, чтобы расширить этот шаблон развертывания модели машинного обучения?
Мы будем рады увидеть, как вы используете это со своими собственными данными. Подумайте об отрасли или регионе, в котором вы живете или работаете. Как вы могли бы обучить модель на таких данных, чтобы делать прогнозы, которые могли бы быть полезны вам (или другим) в будущем? Недвижимость — не единственный пример, и мы призываем вас применять это и к своим собственным задачам. Удачного программирования!
Не забудьте отметить нас в своих работах, используя хэштег #MadeWithTFJS (перейдите по этой ссылке, чтобы посмотреть, что сделали другие), и получить шанс быть представленными в социальных сетях или даже на будущих мероприятиях TensorFlow! Мы будем рады увидеть ваши работы и, конечно же, свяжемся с автором этого практического занятия, если у вас возникнут какие-либо вопросы или замечания.
Больше практических заданий по TensorFlow.js для более глубокого изучения темы.
- Напишите нейронную сеть с нуля на TensorFlow.js
- Распознавание звука с использованием трансферного обучения в TensorFlow.js
- Пользовательская классификация изображений с использованием трансферного обучения в TensorFlow.js