Традиционно машинное обучение было ограничено высокопроизводительными вычислительными средами, но с появлением TensorFlow.js (TFJS) его можно выполнять и в средах на основе браузера.

Обзор

TensorFlow.js — это библиотека JavaScript с открытым исходным кодом, которая объединяет возможности популярной библиотеки Python TensorFlow в JavaScript. Это позволяет разработчикам определять, обучать и развертывать модели машинного обучения без необходимости использования внешнего сервера или сложной настройки. TensorFlow.js поддерживает разработку как внешнего интерфейса, так и внутреннего интерфейса, что дает вам возможность создавать комплексные приложения для машинного обучения полностью на JavaScript.

TensorFlow.js открывает целый ряд новых возможностей для браузерных приложений. В этой статье мы углубимся в основы TensorFlow.js и изучим его возможности.

Особенности TensorFlow.js

  1. Совместимость с браузерами. TensorFlow.js разработан для бесперебойной работы в различных браузерах, включая Chrome, Firefox, Safari и другие. Такая совместимость гарантирует, что ваши модели машинного обучения смогут охватить более широкую аудиторию без каких-либо проблем с совместимостью.
  2. Выполнение на стороне клиента. Наиболее значительным преимуществом TensorFlow.js является то, что он выполняет вычисления непосредственно на стороне клиента, используя графический процессор и процессор пользовательского устройства. Это не только снижает нагрузку на сервер, но и обеспечивает вывод в реальном времени, делая ваши приложения более быстрыми и отзывчивыми.
  3. Преобразование модели. TensorFlow.js поддерживает преобразование моделей из моделей TensorFlow Python, что позволяет повторно использовать предварительно обученные модели и даже импортировать популярные модели, такие как MobileNet и Coco SSD, непосредственно в ваше веб-приложение.
  4. Поддержка мобильных устройств. TensorFlow.js можно интегрировать в мобильные приложения с помощью React Native или любой другой гибридной среды разработки для мобильных устройств, предоставляя мобильным пользователям возможности машинного обучения на устройстве.
  5. Перенос обучения. Вы можете использовать методы переноса обучения для точной настройки предварительно обученных моделей для конкретных задач. Это значительно сокращает время обучения и вычислительные ресурсы, необходимые для построения пользовательских моделей.
  6. Layers API: TensorFlow.js предоставляет высокоуровневый Layers API, который упрощает процесс построения архитектур нейронных сетей, подобно Keras в Python.
  7. Гибкий бэкенд: TensorFlow.js может использовать WebGL, Web Assembly или CPU в качестве своего вычислительного движка, также известного как просто бэкэнд, и позволяет нам переключаться между ними. Подробнее об этом мы поговорим ниже.

Бэкенд TensorFlow.js

В TensorFlow.js серверная часть относится к базовому вычислительному механизму, который выполняет математические операции и вычисления, необходимые для запуска модели машинного обучения. Бэкенд — это аппаратно-зависимый выбор, в котором хранятся и используются тензоры.

// Get the active backend.
console.log(tf.getBackend());

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

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

WebGL

Библиотека веб-графики, сокращенно WebGL, — это самая мощная серверная часть, доступная для задач машинного обучения в браузере. Это серверная часть по умолчанию, которую TensorFlow.js будет использовать в браузере.

WebGL — это API JavaScript, который обеспечивает высокопроизводительный рендеринг 2D- и 3D-графики непосредственно в браузере. TensorFlow.js использует возможности параллельной обработки графического процессора через WebGL для ускорения вычислений, что делает его особенно подходящим для логических выводов и выполнения моделей в реальном времени в веб-приложениях.

Для интенсивного обучения и больших моделей рекомендуется использовать WebGL.

Веб-сборка

Web Assembly (WASM) — еще один быстрый и производительный бэкенд, доступный в TensorFlow.js. Хотя он не быстрее, чем серверная часть WebGL, он может немного превзойти серверную часть WebGL при использовании для небольших моделей. Вот почему этот бэкэнд может подойти для крошечных моделей или когда WebGL недоступен.

Процессор

Центральный процессор (CPU) — это самый простой, но наименее производительный бэкенд. В этом бэкенде тензоры хранятся и управляются внутри JavaScript, что может привести к снижению производительности. Этот бэкэнд подходит для тестирования или когда WebGL и WASM недоступны.

Краткое руководство

Чтобы познакомиться с основами TensorFlow.js, мы построим простую модель, которая будет предсказывать двойное число. Это будет действительно простая модель линейной регрессии, в которой мы будем использовать 100 чисел в качестве входных данных вместе с соответствующими им удвоенными числами в качестве выходных данных в качестве набора данных для обучения.

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

Настройте разметку, как показано ниже.

    <h1>Doubler</h1>
    <label for="inputNumber">Enter a number: </label>
    <input type="number" id="number-input" />
    <button id="predict-btn" disabled>Predict</button>
    <p>Predicted Number: <span id="output"></span></p>

Установите библиотеку @tensorflow/tfjs.

npm i @tensorflow/tfjs

Вставьте следующий код в основной скрипт.

// 1) Import APIs and declare variables.
import * as tf from '@tensorflow/tfjs';

const input = document.getElementById('number-input');
const output = document.getElementById('output');
const button = document.getElementById('predict-btn');
let model

// 2) Genertate the dataset and create Tensors.
function generateDataset() {
  const data = Array(100)
    .fill(null)
    .map((_, ind) => ind + 1);

  tf.util.shuffle(data);

  const input = tf.tensor(data, [data.length, 1]);
  const output = input.mul(2);

  return {
    inputs: input,
    outputs: output,
  };
}

// 3) Create the model.
function createModel() {
  model = tf.sequential();
  model.add(tf.layers.dense({ units: 1, inputShape: [1] }));
  return model;
}

// 4) Train the model.
async function trainModel(model, inputs, outputs) {
  model.compile({ optimizer: 'rmsprop', loss: 'meanSquaredError' });
  const history = await model.fit(inputs, outputs, {
    epochs: 100,
    batchSize: 10,
  });
  return history;
}

// 5) Main function which will utilize the model and predict the number.
function predictDouble() {
  const inputValue = parseFloat(input.value);
  const inputTensor = tf.tensor([inputValue], [1, 1]);

  const outputTensor = model.predict(inputTensor);
  const prediction = outputTensor.dataSync()[0];
  output.textContent = Math.round(prediction);
}

// 6) Our main function to run everything.
async function main() {
  const dataset = generateDataset();
  const model = createModel();
  const history = await trainModel(model, dataset.inputs, dataset.outputs);

  console.log('Training history:', history);
}

// 7) Finally run the `main` function when the DOM is loaded.
document.addEventListener('DOMContentLoaded', () => {
  main().then(() => {
    button.disabled = false;
    button.onclick = predictDouble;
  });
});

Код Пояснение

  1. Прежде всего, мы импортировали API из библиотеки и объявили некоторые глобальные переменные для наших элементов DOM и модели, которую мы скоро создадим.
  2. Мы генерируем набор данных из 100 чисел для ввода и их соответствующего вывода. Мы делаем это, создавая двумерный тензор с именем input из data и оперируя этим тензором, используя метод Tensor.mul() для создания выходного тензора.
  3. Мы создаем модель и назначаем ее model для последующего вывода. Здесь мы использовали только 1 слой для модели, так как он будет маленьким.
  4. Здесь мы обучаем нашу модель, принимая ранее созданные входные и выходные тензоры и выбирая соответствующие конфигурации optimizer, loss, epoch и batch. Мы также возвращаем историю тренировок, которую позже запишем в консоль.
  5. Это функция, которая будет использовать модель для прогнозирования выходных данных. Он берет введенное пользователем число —> создает с ним тензоры —> передает его в модель —> выводит число из предсказанного тензора —> показывает число на странице.
  6. Как следует из названия, это основная функция, которая будет генерировать набор данных, обучать модель и, наконец, записывать историю в консоль, чтобы вы могли понять, как прошло обучение.
  7. Когда DOM загружен, запустите основную функцию, запустите обучение и назначьте функцию predictDouble функции button.

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

Следуя приведенному выше руководству, вы получите страницу, работающую, как показано ниже.

Краткое содержание

TensorFlow.js решает множество проблем, существующих в Интернете, особенно связанных с машинным обучением. Это делает экосистему JavaScript еще более мощной и дает разработчикам JavaScript совершенно новый набор возможностей.

Короче говоря, TensorFlow.js является обязательным для изучения, если вы в первую очередь веб-разработчик и хотите создавать мощные и производительные веб-приложения.

Если вам понравились мои статьи, подпишитесь на меня или поддержите меня на моей странице BMC. Спасибо за прочтение.

На простом английском

Спасибо, что являетесь частью нашего сообщества! Прежде чем уйти: