Текст / Такаси Кавасима
Иллюстрация / Морган Санглиер
Источник | Публичный аккаунт TensorFlow
Излишне говорить, что появление машинного обучения (МО) стало прорывным моментом в современной информатике. Как дизайнеры, так и пользователи, мы видели его влияние в реальном выражении: машинное обучение помогает изменить способ постановки медицинских диагнозов, повысить энергоэффективность центров обработки данных и даже идентифицировать тарелку рамена в магазине.
Машинное обучение (ML) также помогло разработать новейшие передовые продукты и пользовательский интерфейс, создав бесчисленные захватывающие возможности для веб-дизайнеров. В марте Google выпустила TensorFlow.js, платформу TensorFlow с открытым исходным кодом для машинного обучения с открытым исходным кодом в JavaScript. TensorFlow.js позволяет веб-разработчикам обучать и развертывать модели машинного обучения в веб-браузерах, таких как Google Chrome. Другими словами, ML открыт для публики, и любой, у кого есть подключение к Интернету, может получить к нему доступ. Но что это значит для веб-дизайнеров?
Google Brand Studio недавно выпустила Emoji Scavenger Hunt, забавную мобильную веб-игру на базе TensorFlow.js. Игра очень проста: она показывает вам эмодзи, и вам нужно использовать камеру вашего телефона, чтобы найти объекты в реальном мире за указанное время. Вам нужно найти его вовремя, чтобы перейти к следующему смайлику.
Примечание: ссылка Emoji Scavenger Hunt
emojiscavengerhunt.withgoogle.com/
Игроки захватили более двух миллионов смайликов со всего мира; на данный момент они нашли более 85 000 различных типов ? и 66 000 пар ?. Поиск ✋ выглядит довольно просто (в среднем 2,91 секунды), но его немного сложнее (в среднем 21,2 секунды). Но как эта игра точно идентифицирует изображения? Например, как он узнает, что часы на вашем запястье — это часы? Здесь в игру вступает ML.
Машинное обучение на основе браузера меняет правила игры для дизайнеров веб-сайтов
Машинное обучение (МО) показало нам способы улучшить взаимодействие с продуктом; аналогичным образом, машинное обучение (МО) в браузере открыло множество новых и неслыханных возможностей дизайна взаимодействия для дизайнеров веб-сайтов. В случае с Emoji Scavenger Hunt мы хотели создать динамичный, веселый и непосредственный опыт — как и концепция общения с помощью Emojis — и машинное обучение (ML) на основе Интернета помогло нам выполнить эту миссию.
Обеспечивает сверхбыстрое взаимодействие в реальном времени
Когда вы играете в Emoji Scavenger Hunt, вы можете наводить камеру своего телефона или ноутбука на объект, находящийся на разном расстоянии, в зависимости от освещения и под разными углами. Использование всех различных способов захвата объекта на телефоне для прогнозирования невозможно, однако я также был удивлен, увидев, как быстро наша модель машинного обучения распознала объект; на моем телефоне Pixel 2 алгоритм прогнозирования изображения выполняется 15 раз в секунду. и работает быстрее на моем ноутбуке (60 раз в секунду). Алгоритм игры работает настолько быстро, что постоянно предсказывает совпадения при перемещении телефона, что значительно повышает точность угадывания. Таким образом, можно получить сверхбыстрый интерактивный опыт в реальном времени, делая игру плавной без задержек, и игроки могут играть от души.
Одна из основных причин, по которой TensorFlow.js такой быстрый, заключается в том, что он использует WebGL, API JavaScript, который позволяет отображать графику в браузере с помощью графического процессора (GPU) вашего устройства. Это ускоряет работу нейронной сети, позволяя запускать модели машинного обучения локально на каждом устройстве без необходимости доступа к серверу или перехода к серверной части и обратно. Около 500 объектов в день — от ? до ? и от ? до ? — распознаются практически мгновенно благодаря ускорению модели машинного обучения.
Кэшируемые файлы и вычисления на стороне клиента обеспечивают быструю загрузку
Если вы когда-либо ждали загрузки веб-сайта, вы знаете, что скорость имеет решающее значение для удобной работы в Интернете. Даже если ваша модель машинного обучения хороша, но ее загрузка занимает слишком много времени, пользователи не придут к вам. Здесь могут помочь преобразователи TensorFlow.js. Он преобразует существующие модели TensorFlow в кэшируемые файлы, которые можно запускать непосредственно в браузере, при этом уменьшая размер файла до 75%.
Примечание. Ссылка на конвертер TensorFlow.js
Например, модель предсказания, которую мы использовали для Emoji Scavenger Hunt, занимает всего несколько мегабайт — примерно размер одного изображения на телефоне. После загрузки файл сохраняется локально на устройстве, чтобы игра работала быстрее при последующих загрузках.
Еще одним преимуществом машинного обучения на основе браузера является то, что он позволяет выполнять все вычисления машинного обучения — в данном случае распознавание изображений — на стороне клиента (например, в их браузерах), в то время как традиционный опыт машинного обучения часто требует мощной вычислительной мощности на стороне сервера. Для Emoji Scavenger Hunt серверу требуется только доступ к ресурсам веб-сайта, таким как графика и фактические HTML-файлы, во время игры. Это делает масштабируемость серверной части относительно простой и экономичной.
Когда мощь Интернета встречается с мощью машинного обучения
Хотя большинство дизайнеров и разработчиков в наши дни очень сосредоточены на разработке приложений, Интернет по-прежнему остается очень мощной средой. Он кроссплатформенный и может использоваться с различными устройствами, от мобильных устройств, планшетов до настольных компьютеров, и с различными операционными системами (Android, iOS и Mac, Windows и т. д.) всего по одной ссылке. В отличие от приложений, он не требует загрузки и установки, а также сложной настройки. Через сеть пользователи могут получить всесторонний опыт одним щелчком мыши. И, конечно же, сетевым контентом и опытом можно легко поделиться с другими.
Сегодня люди жаждут быстрых и веселых впечатлений; сочетание возможностей Интернета с машинным обучением позволяет создавать новые мощные взаимодействия, использующие собственные датчики устройства.
Распознавание изображений с помощью камеры устройства — лишь один из примеров. Используя Generic Sensor API, веб-разработчики теперь могут получить доступ к целому ряду датчиков устройств, включая акселерометры, микрофоны и GPS. Комбинируя датчики устройств с машинным обучением в браузере, вы можете придумывать и разрабатывать новые интерактивные возможности так, как вам хочется.
Примечание. Ссылка API универсального датчика
Developers.Google.com/Web/updates…
Машинное обучение и будущее
Мы только начинаем видеть, как машинное обучение может изменить веб-разработку. Есть еще бесчисленное множество потенциальных приложений, ожидающих изучения, и я не могу дождаться, когда увижу новые интерактивные возможности, которые разрабатывают люди. Вы работаете над новым проектом? Поделитесь им с нами, используя хэштег #tensorflowjs, или отправьте свой проект в AI Experiments. Если вас интересуют технические аспекты проекта, весь код доступен на GitHub.
Примечание. Ссылка на эксперимент с ИИ
эксперименты. с Google.com/collection/…
Ссылка на GitHub
GitHub.com/Google/Рог дьявола…
Эта работа стала возможной благодаря сотрудничеству между Brand Studio и командой TensorFlow.js в Google. Я также хотел бы поблагодарить Жака Брювера, Джейсона Кафаласа, Шухея Иицуку, Кэти Ченг, Кайла Грея, Блейка Давидоффа, Кайла Конерти, Даниэля Смилкова, Нихила Тората, Пинг Ю и Сару Сираджуддин.
Такаси Кавасима — дизайнер и креативный директор Google Brand Studio. Прежде чем присоединиться к команде, он три года был арт-директором команды Google Data Art в Chrome Experiments.