Как настроить Tensorflow.js для машинного обучения в вашем браузере

1656615378 kak nastroit tensorflowjs dlya mashinnogo obucheniya v vashem brauzere

от Кевина Скотта

1*AlcVryPcarDIsQ9b9a6VVw

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

В прошлом году я создал свой ПК специально для машинного обучения. Я исследовал подробности и сам собрал. Просто это стоило мне около 1600 долларов США и 30 часов в настройке. Я все еще пытаюсь спорить о конфигурации и библиотеках компьютера и заставить его работать с разными фреймворками.

Хорошая новость состоит в том, что начать работу с машинным обучением сегодня еще никогда не было проще. На самом деле, если вы читаете это, значит, у вас уже есть инструменты, которые вам нужны для погружения. Теперь вы можете изучить фреймворк машинного обучения Tensorflow прямо в своем браузере с помощью JavaScript.

Tensorflow.js

1*rsWM2fP8HtMBQnhd31Dzow
Google I/O 2018, Бруно Санчес-Андраде Нуньо

Google выпустил Tensorflow.js в Google I/O 2018. Существует несколько огромных случаев использования алгоритмов машинного обучения в браузере.

Кроме того, это отличная возможность использовать JavaScript для изучения концепций машинного обучения, не устанавливая ничего.

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

Учебник по настройке

Позвольте мне кое-что повторить: все, что вам нужно для запуска Tensorflow.js, это ваш веб-браузер.

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

Давайте посмотрим три быстрых способа запустить пример Hello World, не устанавливая ничего. Я буду использовать код «Начало работы» из документации Tensorflow.js.

Getting started с помощью консоли браузера

Каждый современный веб-браузер поставляется со встроенной интерактивной консолью JavaScript. Я использую Chrome, который включает в себя консоль JavaScript, которую можно открыть с помощью «Просмотр > Разработчик > Консоль JavaScript».

1*ZaPOW2eZ_ubo1hBnx6ugkg

Эта консоль JavaScript позволяет писать JavaScript и выполнять его немедленно. Мы будем использовать это для запуска примера «Начало работы» из документов Tensorflow.js.

Во-первых, нужно включить JavaScript-файл Tensorflow.js. Размещенная версия файла доступна через сеть доставки содержимого (CDN) ниже. Быстрый способ включить внешний .js файл через консоль:

var script = document.createElement('script');script.src = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.10.0";document.getElementsByTagName('head')[0].appendChild(script);

Скопируйте и вставьте это в свою консоль JavaScript, и у вас будет копия Tensorflow, сохраненная как переменная tf. (Если вы вводите tf в своей консоли вы увидите ссылку на него).

Затем вы можете скопировать и вставить остальной пример «Начало работы» ( JavaScript между вторым <script>), вставив его непосредственно в свою консоль.

Начало работы с платформой хостинга JavaScript

Альтернативный подход – использовать онлайн-платформу хостинга JavaScript. Три популярных из них – CodePen, JSFiddle и JSBin. Эти платформы могут автоматически включать скрипты для вас и позаботиться о транспиляции вашего кода в браузере, что облегчает начало работы.

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

1*7ID_fTBRD7koiRuH38zVNw

Начало работы локально

Третий вариант работы Tensorflow.js предполагает сохранение кода как a .html файл и открыть его локально на компьютере. И для этого вам не нужен веб-сервер!

Скопируйте HTML-код в файл и откройте его в своем веб-браузере. Например, если вы сохранили файл на рабочем столе и пользуетесь компьютером Mac, вы можете открыть его в своем браузере по следующему URL-адресу:

file:///Users/YOURNAME/Desktop/sample.html

Важно отметить, что просмотр HTML-файлов таким образом создает ограничения, в частности, проблемы со ссылками на относительные ссылки, обработкой вызовов ajax и безопасностью, среди прочего. Но это быстрый и простой способ запустить что-нибудь в вашем браузере.

Современный процесс разработки JavaScript

Надеемся, к этому моменту вы увидите, как легко получить что-нибудь базовое для отображения в вашем браузере. Если вы начинаете рассматривать примеры Tensorflow.js, вы можете подумать:

  • Как упорядочить свои файлы?
  • как управлять посторонними библиотеками в моем коде?
  • что с этими синтаксическими ошибками?

Как только вы перейдете за рамки базового примера Hello World выше и к другим примерам, вы начнете сталкиваться с проблемами синтаксиса и проблемами организации. Именно здесь крепкий конвейер JavaScript станет вашим лучшим другом.

Немного истории JavaScript

Поскольку наши ожидания относительно веб-приложений выросли за последнее десятилетие, экосистема интерфейса взорвалась в сложности.

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

Новые изменения в спецификации языка ссылаются с помощью акронимов, таких как ES5, ES6, ES2015 и E2016.

ES означает ECMAScript, а JavaScript базируется на этом стандарте. Цифры 5 и 6 традиционно использовались для обозначения версий стандарта, но в настоящее время годы используются для дополнительной ясности.

Поддержка ES6 современными браузерами неоднозначна. Некоторые передовые или предложенные функции еще не поддерживаются, а более старые браузеры (в частности, Internet Explorer) никогда не будут поддерживать новейшую спецификацию.

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

Во многих примерах Tensorflow.js используется новый синтаксис, еще не широко поддерживаемый в браузерах и требующий транспиляции. Сначала я объясню синтаксис, затем объясню, как заставить их работать.

import и export

import и export это два бита синтаксиса, недавно введенные в JavaScript для импорта модулей. Сага о модулях JavaScript длинная и запутанная, но сообщество в основном остановилось import закончено require.

К сожалению, по состоянию на май 2018 г. import не поддерживается никакими браузерами, поэтому для его использования нужно использовать транспиллер.

В документах Начало работы вы увидите пример import заранее:

import * as tf from '@tensorflow/tfjs';

Это в основном то же, что:

var tf = require('@tensorflow/tfjs');

Вы также можете увидеть что-то вроде:

import { util, tensor2d } from '@tensorflow/tfjs';

Эквивалент использования require есть:

var tf = require("@tensorflow/tfjs");var util = tf.util;var tensor2d = tf.tensor2d

async и await

Javascript традиционно активно используется с интерфейсами, выполняющими многие асинхронные действия. На протяжении многих лет существовали три широкие модели обработки асинхронного кода: обратные вызовы, обещания и асинхронный/ожидание.

async/await обеспечивает способ определения асинхронных функций синхронным способом. Многие примеры Tensorflow.js используют это async / await синтаксиса.

Вот две версии того же кода, первая написанная из async/awaitвторой с помощью обещаний:

// With async/awaitasync function loadMobilenet() {  const mobilenet = await tf.loadModel(      '  // Return a model that outputs an internal activation.  const layer = mobilenet.getLayer('conv_pw_13_relu');  return tf.model({inputs: model.inputs, outputs: layer.output});});// With promisesfunction loadMobilenet() {  return tf.loadModel(' (mobilenet) {    // Return a model that outputs an internal activation.    const layer = mobilenet.getLayer('conv_pw_13_relu');    return tf.model({inputs: model.inputs, outputs: layer.output});  });});

Обе эти языковые особенности import/export и async/await — сделать написание JavaScript более приятным. Давайте посмотрим какие инструменты нам нужны, чтобы использовать их в нашем коде.

Инструменты JavaScript

В документах «Начало работы» вы увидите это примечание:

Примечание: поскольку мы используем синтаксис ES2017 (например import), этот рабочий процесс предполагает, что вы используете пакетник/транспилер для преобразования кода в то, что понимает браузер. Просмотрите наши примеры, чтобы увидеть, как мы используем Parcel для создания нашего кода. Однако вы можете использовать любой инструмент для создания, который вам нравится.

Поговорим об инструментах для создания.

Комплектовщики

1*6mtkrbd03TcqOJGqqb0YlA
Дирижер Роб Свистун

Bundlers взяли на себя роль дирижера оркестра растущих фронтенд кодовых баз. Комплектовщик – это приложение, которое берет ваш код JavaScript и «соединяет» его в совместимый файл для браузера.

Bundlers также транспилируют код (превратят код ES2018 в ES5 вместе с другими диалектами, такими как React или Typescript, используя что-то вроде babel), настраивают «горячую перезагрузку», чтобы обновить браузер изменениями кода без перезагрузки страницы, и многие другие вещи для улучшить фронтенд разработку.

Grunt и Gulp раньше были популярными пакетами, но недавно упали в немилость. webpack. Остальные комплекты включают parcel и rollup. Используются примеры Tensorflow.js parcel.

Менеджеры пакетов

Часто, столкнувшись с библиотекой JavaScript, вы увидите инструкции по установке, например yarn add @tensorflow/tfjs или npm install @tensorflow/tfjs.

yarn и npm оба являются менеджерами пакетов. Это инструменты командной строки, которые используются для установки и отслеживания зависимостей от JavaScript сторонних разработчиков.

yarn и npm они очень похожи, и решение, какое из них использовать, в значительной степени зависит от личных предпочтений (хотя вы найдете много горячих дебатов в Интернете, если вы любите такие вещи).

Любой из них сохранит ваши зависимости в package.json файл, который следует проверить в вашем хранилище git. Этот файл позволит другим разработчикам быстро установить необходимые зависимости для вашего проекта и быстро запустить работу.

Чтобы получить все эти вкусности, первым шагом является установка npm или yarnвместе с Node.js. Когда они будут на месте, вы можете следовать инструкциям на любом примере Tensorflow.js, и они должны работать «из коробки». Обычно создание нового интерфейсного проекта посредством этих инструментов является одноэтапным процессом.

Подведению

Опять же вам не нужен ни один из этих инструментов для работы с этими примерами, но их использование значительно упрощает работу. Если вы намерены заняться какой-либо серьезной разработкой JavaScript, я бы призвал вас поиграть с этими инструментами вместе с другими популярными инструментами JavaScript, такими как React и Typescript, которые значительно улучшают работу с большими кодовыми базами.

Первоначально опубликовано на thekevinscott.com

Особая благодарность Ари Зильнику.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *