演变：机器学习和基于 Web 的体验 ，快速、实时和完全交互

文 / Takashi Kawashima

插图 / Morgane Sanglier

来源 | TensorFlow 公众号

毋庸置疑，机器学习（ML）的出现是现代计算机科学领域的一个突破性时刻。作为设计师以及用户，我们已经看到了它的切实的影响：ML 助力改变医疗诊断方式，提高数据中心的能源效率，甚至可以通过商店来识别一碗拉面。

机器学习（ML）还帮助开发了最新的尖端产品和用户体验，为网页设计师制造了无数令人兴奋的机会。今年 3 月，谷歌发布了 TensorFlow.js，这是 TensorFlow 用 JavaScript 开源 ML 的开源框架。 TensorFlow.js 允许 Web 开发人员在 Google Chrome 等网络浏览器中训练和部署 ML 模型。 换句话说，ML 对公众开放，任何有 Internet 连接的人都可以访问。 但是这对网页设计师来说，意味着什么呢？

Emoji Scavenger Hunt。游戏将向您展示一个表情符号，您必须在规定时间内找到它的真实版本。当您搜索时，神经网络将尝试猜测它所看到的内容

Google Brand Studio 最近发布了 Emoji Scavenger Hunt，一款由 TensorFlow.js 提供支持的有趣的移动网页游戏。游戏非常简单：它会向您展示一个表情符号，你需要在规定时间内使用手机里的摄像头在现实世界中查找对象。需要您及时找到才能进入下一个表情符号。

注：Emoji Scavenger Hunt 链接

https://emojiscavengerhunt.withgoogle.com/

玩家在世界各地捕获了超过二百万个表情符号；到目前为止，他们已经找到了八万五千多种不同类型的 ? 和六万六千双 ?。找到 ✋ 看上去相当简单（平均 2.91 秒） 但是捕获就有一定难度了（平均 21.2 秒）。但是，这个游戏是如何准确辨认图像的呢？比如，它是如何知道你腕上计时装置是一只手表呢？这就是 ML 发挥作用的地方。

基于浏览器的机器学习为网站设计师改变了游戏规则

媒体艺术家 Kyle McDonald 期望将实时 ML 和移动浏览器与传感器结合起来，这将开辟更多可供探索的可能

机器学习（ML）已经向我们展示了增强产品体验的方法；同样，浏览器中的机器学习（ML）为网站设计师带来了许多崭新的，闻所未闻的交互设计机会。 在 Emoji Scavenger Hunt 的案例中，我们想要创造一个快节奏的，有趣和直接的体验 - 就像与 Emojis 沟通的概念 - 基于网络的机器学习（ML）帮助我们达成了这个使命。

实现超快的实时交互

当您玩 Emoji Scavenger Hunt 时，可以将手机或笔记本电脑的摄像头对准一个物体，距离、光线和角度可以不尽相同。运用所有不同的方式在手机上去捕捉一个物体来预测是不可能的，但是，我也很惊讶地看到我们的 ML 模型识别物体的速度是有多快；在我的 Pixel 2 手机上，图像预测算法每秒运行 15 次，在我的笔记本电脑上运行速度更快（每秒 60 次）。 游戏的算法运行速度如此之快，以至于在移动手机时不断预测匹配，从而显著提高了猜测的准确性。这样可以产生超快的实时交互体验，让游戏流畅无卡顿，玩家玩地酣畅淋漓。

TensorFlow.js 如此之快的主要原因之一是它利用了 WebGL，这是一种 JavaScript API，允许您使用设备的图形处理单元（GPU）在浏览器中渲染图形。 这加快了神经网络的执行速度，同时允许您在各个设备上本地运行 ML 模型，无需访问服务器，或者往返于后端。 通过加速 ML 模型，每天有近 500 个物体 -从 ? 到 ? 和从 ? 到 ? ，几乎可以立即被识别出来。

使用 Pixel2 XL 在 Chrome 上基于实时 ML 进行的图像分类。 调试窗口显示 ML 模型更新检测到的对象列表和置信度级别得分为大约每秒 15 次。 访问此链接，亲自尝试一下

可缓存文件和客户端计算意味着快速加载时间

如果您曾经花费时间在等待网站加载上，您就会知道速度对于良好的网络体验至关重要。 即使您的 ML 模型非常出色，一旦加载时间过长，用户便不会来参与您的体验。 这是 TensorFlow.js 转换器可以助力的地方。它将现有的 TensorFlow 模型转换为可在浏览器中直接运行的可缓存的文件，同时文件大小最多可以缩小 75%。

注：TensorFlow.js 转换器链接

https://github.com/tensorflow/tfjs-converter

例如，我们用于 Emoji Scavenger Hunt 的预测模型只有几兆字节 - 大约相当于手机上单个图像的大小。 加载之后，文件将在设备上本地保存，以便游戏在后续加载时运行得更快。

基于浏览器的 ML 的另一个好处是它允许所有 ML 计算 - 在这种情况下，图像识别 - 发生在客户端（例如在他们的浏览器中），而传统的 ML 体验通常需要具有强大处理能力的服务器端。 对于 Emoji Scavenger Hunt，服务器只需在游戏过程中访问图形和实际 html 文件等网站资源。 这使得后端可扩展性相对简单且经济高效。

当网络的力量遭遇 ML 的力量

尽管现如今大多数的设计人员和开发人员都非常关注开发应用程序，但网络仍然是一个非常强大的媒介。 它是跨平台的，可以与各种不同的设备一起使用，从移动设备，平板电脑到桌面设备，以及不同的操作系统（Android，iOS 和 Mac，Windows 等），只需一个链接。 与应用程序不同，它不需要下载和安装，也不需要复杂的配置。通过网络，用户只需轻轻一点，即可深度体验。 而且，毋庸置疑，基于网络的内容和体验也能轻而易举地共享给他人。

今天，人们渴望快速，有趣的体验；将网络的力量与 ML 相结合，可以利用设备自身的传感器进行强大的新的交互。

使用设备的摄像头进行图像识别只是一个例子。 使用通用传感器 API（Generic Sensor API） ，Web 开发人员现在可以访问一系列的设备传感器，包括加速度计，麦克风和 GPS。 通过将设备传感器与浏览器中的 ML 相结合，您可以随心所欲地想象和设计出新的交互式体验。

注：通用传感器 API 链接

https://developers.google.com/web/updates/2017/09/sensors-for-the-web

机器学习和未来

ML 能够改变 Web 开发的许多种方式我们才初见端倪。 依旧有无数潜在的应用程序等待我们去探索，我迫不及待地想看到人们设计的新的交互式体验。您正在研究一个新的项目么？ 使用 #tensorflowjs 标签与我们分享吧，或将您的项目提交给 AI 实验。 如果您对该项目的技术方面感兴趣，可以在 GitHub 上获得所有代码。

注：AI 实验链接

https://experiments.withgoogle.com/collection/ai

GitHub 链接

https://github.com/google/emoji-scavenger-hunt

这项工作是通过 Brand Studio 和 Google 的 TensorFlow.js 团队之间的合作实现的。 我还要感谢 Jacques Bruwer，Jason Kafalas，Shuhei Iitsuka，Cathy Cheng，Kyle Gray，Blake Davidoff，Kyle Conerty，Daniel Smilkov，Nikhil Thorat，Ping Yu 和 Sarah Sirajuddin。

Takashi Kawashima 是 Google Brand Studio 的设计师和创意主管。在加入团队之前，他曾在 Chrome Experiments 的 Google 数据艺术团队担任艺术总监三年。