Веб-сборка (WASM) захватывает мир Интернета штурмом. Это увеличивает скорость и эффективность сложных веб-действий, и это идеальное приложение для таких сложных процессов, как TensorFlow.js.
До того, как TensorFlow официально поддержал WASM, нам пришлось написать собственный код WASM для чтения моделей прямо в браузере, что дало потрясающие результаты, но потребовало огромных усилий и времени.
Если вы хотите использовать AI / ML на своем веб-сайте или в мобильном приложении, давай поговорим.
На момент написания этой статьи TensorFlow.js имеет полуфункциональную бэкэнд WASM для запуска моделей в браузере, и вы можете добавить его в качестве опции на свои веб-сайты TensorFlow. Давайте рассмотрим, что вам нужно сделать, чтобы включить эту альфа-функцию в свои приложения Create React App.
Почему даже WASM?
Для машин с небольшим количеством графических процессоров или без них серверная часть WASM значительно увеличивает скорость по сравнению с традиционным JavaScript, а на очень легких моделях серверная часть WASM сравнима с WebGL с лучшей числовой стабильностью.
Давайте узнаем, как добавить его на сайт Create React App!
ПРЕДУПРЕЖДЕНИЕ О ТЕХНИЧЕСКОЙ ЗАДОЛЖЕННОСТИ: CRA + WASM = ???
На момент написания этой статьи в настоящее время не существует чистого способа (который я нашел) для соединения WASM с приложением Create React. Я могу сделать это с помощью прямого веб-пакета, но CRA имеет сложный конвейер, который вызывает множество проблем. Я пробовал react-app-rewired + file-loader, wasm-loader и пару уловок вроде copy-webpack-plugin. Могу сказать, что я был близок несколько раз, но согласно GitHub приложения Create React, это все еще не сделано.
По этой причине я полностью пропущу сложность и выберу простое, хотя и слегка взломанное решение, которое работает .
1 - Добавить серверную часть WASM TensorFlow.js
Я предполагаю, что в вашем проекте уже есть TensorFlow.js, но на всякий случай я включил его в инструкции по установке TFJS и TFJS Backend WASM ниже.
# NPM npm i @tensorflow/tfjs @tensorflow/tfjs-backend-wasm --save # Yarn yarn add @tensorflow/tfjs @tensorflow/tfjs-backend-wasm
Вот грязная часть:
Нам нужен файл WASM от tfjs-backend-wasm, но из всех грязных решений для приложения Create React это самое чистое, что я мог придумать. Мы собираемся скопировать файл в папку public. Для этого мы добавим в наш package.json файл новый скрипт wasm.
Это скопирует файл .wasm из пакета узла в общую папку.
Как видите, мы помещаем его перед сценариями запуска и сборки, поэтому у нас всегда будет последний файл из нашего локального модуля NPM. В качестве бонуса winwasm command - это версия для Windows. Измените указанное выше, чтобы использовать npx или winwasm в зависимости от характеристик вашего компьютера.
2- Используйте серверную часть WASM
Теперь мы можем указать нашему приложению TensorFlow.js использовать WASM в качестве бэкэнда в нескольких строках. Мы просто устанавливаем путь wasm к нашему общедоступному файлу .wasm.
Когда мы запускаем наше приложение для реагирования, мы видим наш дружелюбный вращающийся атом, а если мы откроем консоль, мы увидим, что теперь мы используем бэкэнд wasm!
Мы готовы запустить машинное обучение TensorFlow.js!
Давай, тигр! 🐅
Если вы не знакомы с AI / ML - вот бесплатный курс, который поможет вам начать!
Хотите узнать, как использовать ИИ и машинное обучение в Интернете с помощью TensorFlow.js?
JavaScript позволяет создавать интерфейсные веб-сайты, которые могут использовать возможности ИИ непосредственно в браузере. Учитесь с нуля с помощью этой книги.
Зарезервируйте свою копию на Amazon прямо сейчас
Гант Лаборд - совладелец и директор по инновациям в Infinite Red, опубликованный автор, адъюнкт-профессор, всемирно известный оратор и безумный ученый, обучающийся. Хлопайте / подписывайтесь / твитните или посетите его на конференции.
Я также помогаю вести учетную запись FunMachineLearn Twitter.
Есть минутка? Подробнее!
Машинное обучение: как перейти от нуля к герою
Начните с вопроса« Почему? и в конце "Я готов!" medium.com »
Иллюстрации для блога https://icons8.com
