阅读 397

演变:机器学习和基于 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 链接

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 转换器链接

github.com/tensorflow/…

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

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

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

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

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

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

注:通用传感器 API 链接

developers.google.com/web/updates…

机器学习和未来

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

注:AI 实验链接

experiments.withgoogle.com/collection/…

GitHub 链接

github.com/google/emoj…

这项工作是通过 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 数据艺术团队担任艺术总监三年。

关注下面的标签,发现更多相似文章
评论