演變：機器學習和基於 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 數據藝術團隊擔任藝術總監三年。