演變：機器學習和基於 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 連結
ofollow,noindex">emojiscavengerhunt.withgoogle.com/
玩家在世界各地捕獲了超過二百萬個表情符號；到目前為止，他們已經找到了八萬五千多種不同型別的 :bulb: 和六萬六千雙 :jeans:。找到 :hand: 看上去相當簡單（平均 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 個物體 -從 :jeans: 到 :cat: 和從 :hamburger: 到 :stew: ，幾乎可以立即被識別出來。
使用 Pixel2 XL 在 Chrome 上基於實時 ML 進行的影象分類。 除錯視窗顯示 ML 模型更新檢測到的物件列表和置信度級別得分為大約每秒 15 次。 訪問此連結，親自嘗試一下
可快取檔案和客戶端計算意味著快速載入時間
如果您曾經花費時間在等待網站載入上，您就會知道速度對於良好的網路體驗至關重要。 即使您的 ML 模型非常出色，一旦載入時間過長，使用者便不會來參與您的體驗。 這是 TensorFlow.js 轉換器可以助力的地方。它將現有的 TensorFlow 模型轉換為可在瀏覽器中直接執行的可快取的檔案，同時檔案大小最多可以縮小 75%。
注：TensorFlow.js 轉換器連結
例如，我們用於 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 連結
這項工作是通過 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 資料藝術團隊擔任藝術總監三年。