Давайте создадим простое приложение линейной регрессии, просто чтобы посмотреть, работает ли библиотека.

Инструкцию по установке смотрите в предыдущей главе

Главная страница

Во-первых, давайте создадим новый каталог и добавим в него два файла: index.html и index.js.

\ai_tfjs> mkdir part_1
\ai_tfjs> cd > part_1\index.html
\ai_tfjs> cd > part_1\index.js

Теперь откройте part_1\index.html и давайте создадим две точечные диаграммы, используя Chart.js и tfjs-vis, чтобы увидеть их различия. Chart.js нужен ‹canvas› для отображения диаграммы, а tfjs-vis нужен только раздел ‹div›. Tfjs-vis также предоставляет функцию, которая отображает визуализацию в новой вкладке за пределами главной страницы, которая называется окно визора. Мы попробуем их все, поэтому добавьте приведенный ниже код в файл index.html.

Затем мы импортируем все необходимые библиотеки в index.js.

Теперь мы можем опубликовать приложение, выполнив команду ниже:

\ai_tfjs> parcel part_1\index.html

который будет отображать только заголовок без каких-либо данных, поскольку мы их не создали. Итак, теперь давайте добавим некоторые данные на диаграмму.

Данные об игрушках

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

Затем, чтобы отобразить данные на диаграмме tfjs-vis, мы используем функцию рендеринга. При отображении данных на диаграмме Chart.js нам нужен немного более длинный код, но в целом это то же самое. как упоминалось ранее, tfjs-vis предлагает другой способ отображения данных в функции окна визора. Способ использования очень похож.

Теперь, если мы запустим страницу, она будет выглядеть примерно так. Вы можете показать и скрыть козырек, нажав кнопку [`].

Отныне мы будем использовать Chart.js для отображения визуализации данных, а tfjs-vis — для визуализации процесса обучения.

Теперь, когда у нас есть данные, давайте начнем создавать приложения линейной регрессии.

Линейная регрессия

Линейная регрессия — это статистическая функция, которая лежит в основе практически всех алгоритмов машинного обучения. Эта функция предназначена для создания прямой линии, которая может угадать/оценить вывод ввода на основе предоставленных данных.

Если мы посмотрим на данные, которые мы сделали ранее, линейная регрессия попытается провести прямую линию, которая может приблизиться или даже коснуться всех данных. Затем из полученной линейной функции мы можем оценить вывод (обычно значение по оси Y) нового ввода (значение по оси X).

Просто, верно?

Прежде чем мы определим модель регрессии, давайте сначала изменим представление.

Изменить index.html

Удалите раздел для tfjs-vis, оставив только раздел Chart.js, затем добавьте два новых раздела для обучения и тестирования. Поместите две кнопки в раздел «Обучение», каждая для инициализации и обучения модели. Во время тестирования добавьте форму ввода и кнопку для прогнозирования вывода новых данных.

Наша страница теперь будет выглядеть так

Изменить index.js

Переходя к index.js, сначала нам нужно определить нашу модель как глобальную переменную и преобразовать данные в тензор. Затем мы сделаем это после того, как мы инициализируем модель, нарисуем линию модели на графике. Для этого добавьте функцию viewPrediction() ниже.

Кнопка инициализации

Затем мы добавляем событие действия к кнопке Initialize. Для линейной регрессии нам нужен только один плотный слой. А поскольку и вход, и выход являются одномерными, мы устанавливаем единицы и inputShape равными 1. Затем мы компилируем модель с помощью Stochastic Gradient Decent. с потерей среднеквадратической ошибки. Вызовите viewPrediction, чтобы показать линию, и активируйте кнопку Train.

Кнопка поезда

Продолжить и добавить событие действия к кнопке Train. Во-первых, давайте поместим сообщение о том, что модель обучается. Затем мы вызываем функцию fit() для обучения модели. Функция fit() в TensorFlow.js — это асинхронная функция, что означает, что функция работает в фоновом режиме, поэтому основной поток пользовательского интерфейса не блокируется. В этом примере мы используем then() для определения блока кода, который будет выполняться после завершения асинхронной функции fit().

В этом блоке настроим обучение модели на 20 эпох. После завершения процесса обучения вызовите функцию evaluate(), чтобы вычислить и отобразить как линию, так и ошибку MSE из обученной модели. Не забудьте активировать кнопку прогнозирования.

Обратите внимание, что мы добавляем пару строк кода, чтобы показать историю тренировок в окне козырька, чтобы мы могли отслеживать потери во время тренировки.

Кнопка прогнозирования

Это оставляет нас с кнопкой прогнозирования. Событие действия в кнопке прогнозирования — это просто получение и анализ входных данных для преобразования их в число с плавающей запятой, преобразование их в тензор и вызов функции predict().

И это все. Теперь мы готовы попробовать нашу простую линейную регрессию.

Обучите и протестируйте линейную регрессию

При инициализации модели видно, что линия создается случайным образом. Затем мы можем начать учебный процесс. Обучение в основном означает, что сеть будет "вращать"и "сдвигать" линию регрессии, чтобы иметь возможность получить линию, которая имеет наименьшее расстояние от всех существующих обучающих данных.

После того, как модель обучена, мы можем попытаться ввести новое значение и предсказать выходное значение.

Это было легко, согласны?

На этом мы завершаем первую главу этого руководства по TensorFlow.js. Далее мы перейдем к следующему шагу в приложении машинного обучения: Классификация.

›› Продолжить — Часть 2: Бинарная классификация ››

Ссылка на гитхаб