前端也能玩轉機器學習？Google Brain 工程師來支招！
演講者 | 俞玶
整理 | 伍杏玲
出品 | CSDN（ID：CSDNnews）
【CSDN 編者按】9 月 7 日，在CSDN主辦的「AI ProCon 2019」上，Google Brain 工程師，TensorFlow。js 專案負責人俞玶發表《TensorFlow。js 遇到小程式》的主題演講，分享 TensorFlow。js 的技術實現和與微信小程式相結合的落地實踐。
詳情如何？一起來看看。
以下為演講內容：
首先想問問大家有多少人瞭解或聽過 Tensorflow。js 的？
不多。
再提問一個問題：這裡有哪些同學希望把機器學習（Machine Learning， ML）落地到小程式或者前端？
也不多。
沒關係，希望以下的分享可以幫助大家瞭解它。
初識 Tensorflow.js
Tensorflow。js 的目的是為了幫助前端工程師，降低加強學習的門檻。另外，讓大家充分地發揮自身創造性，把機器學習落地到前端各個應用裡。
它本身是一個全方位平臺，它不是呼叫服務端的簡單平臺，而是完全由JavaScript 實現的平臺，它可以讓你已有的模型從 Python 轉換過來，在瀏覽器裡執行。也可以透過轉移學習或者加強學習的方式對已有模型進行再訓練。另外，它更能允許你建立模型，如果大家熟悉 Tensorflow。js，它有對應的 API，你可以建立模型，可以透過 JavaScript 來訓練，一般是在 Node。js 比較合適，所以我們也支援 Node。js。
為什麼大家對這個東西並不瞭解？可能大家並不瞭解它的應用場景是什麼，大家普遍關注在大資料等比較宏大的問題上。個人認為，有很多小的問題也可以用它來解決，比如酷炫的互動方式完全可以用它來實現。
Tensorflow.js應用場景
Tensorflow。js 的應用場景有：
Tensorflow.js
比如抖音這些功能都是在端的實現，用 JavaScript 同樣也可以實現。
1、增強現實AR
現在我們的互動方式有手機用手指，網站用滑鼠。透過它可以增加新的互動方式，比如用嘴型、眼神、手勢。
2、基於手勢或肢體的互動
使用它後，可以把語音識別注入到網站裡，還可以增加一些新的體驗、新的互動方式，後面我會舉一些例子。不管怎樣，Web是一個以文字為主的環境，針對文字的模型在這個互動環境裡是非常合適的，比如語義分析、智慧會話，這些模型可以直接在 App 裡執行。最後，可以透過分析，用裝置本身的效能或者網路情況，來最佳化網頁。
這些場景為什麼用端上的機器學習來實現而不是用伺服器呢？其優勢是：
3、語音識別
1、保護使用者隱私
它並不需要網路，如果網路不好或者本身流量有限制，可以幫助使用者減少流量。
2、減少響應延遲，減少流量
有些功能無法做到實時的，可能 5G 將來有可能，但現在是做不到的。
3、提高使用者體驗
透過把 ML 放到端上，減少了在服務端的依賴。如果開發者自己搭建服務的話，費用會很高，這可以減少伺服器的費用。
Tensorflow。js 的目的就是為了簡化這些問題，為前端工程師提供所有可以實現的這些功能，我們的目標是提供很多已有的模型給大家去用。而且這些模型是開源的，你可以隨便用。
4、降低伺服器費用
Tensorflow。js 提供五類模型：影象分類、物體識別、姿態識別、語音命令識別、文字分類。直接用 NPM 安裝，或者直接透過 JavaScript 也可以把它裝上，放到網頁裡。
五大模型
姿態識別模型在小程式裡可以跑，它提供的是人的五官的座標、四肢關節的座標，它有多種不同的精度和速度最佳化版本，透過安裝不同的版本可以在不同的裝置上去跑。
1、姿態識別
它可以幫你做背景虛化，或者是人的各個部分的分類，比如頭部、軀幹、四肢。還可以做很多有意思的事情，且針對不同的裝置有不同的精度。
2、人物分割
這是我們即將推出的一種模型叫 FaceMesh，大概有 400 個關鍵點在人的臉上，並且提供的是一個三維的人臉模型。
3、高解析度的面部跟蹤
我們曾經讓一個漸凍症病人跟機器互動，用鐳射點按各個鍵，互動速度非常慢，漸凍症病人不能說話，但是他可以發出一些聲音，他的聲音是有不同意義的，我們透過這個模型對他們做了個性化的互動方式。讓他們很容易地用不同的聲音，比如說“我要有一個披薩”，它透過不停地訓練來增加詞彙量。
4、語音命令識別
在文字模型中，支援如語氣分析、毒性語言檢測、智慧回覆，我們希望給大家做一些好用的、能用的模型。
5、文字模型
在示例裡，我的同事做了 3 個不一樣的動作，透過擷取影片的圖片開始實時訓練這個模型，訓練速度非常快，大概是幾毫秒、幾十毫秒，現在他以非常高的精確度來識別 3 個不同的動作，一是招手，第二個是搖頭，第三個是把手放在嘴旁邊。
6、轉移學習
Tensorflow。js 支援多平臺：無線端（微信小程式、React Native）、伺服器端（Node。js）；桌上型電腦（Electron）、瀏覽器（谷歌瀏覽器、火狐瀏覽器、safari瀏覽器）。
下面給大家講一個例子，在谷歌搜尋引擎上，有一個它的Logo的圖片，我們把這圖片轉成了一個遊戲。這是為了紀念十八世紀的巴赫，他做出來的曲子非常有節奏。所以我們做了一個模型：玩家可以在一個聲部編一個曲，最終透過機器模型形成了完整的四聲部的協奏曲。
這個模型是 CoCoNet，玩家總線上時間 78 年，分享超過 5 千萬創作，大概是最大使用者生成的交響樂庫了。它用到的技術是 Tensorflow。js 和谷歌的 TPU。
有些使用者手機並不快，所以要到服務端，如果手機效能不錯的話完全可以在手機上執行。還能節約 50% 伺服器費用，因為充分運用使用者的 GPU，可以想象，如果是一個很大的專案，可以節省的費用有多大的。
7、支援多平臺
最近微信做了一個大學生小程式大賽，這是得獎同學做的一個手語識別專案。它首先能夠手勢識別，對一個手勢能認知，並且得到它的含義。
下面是整體句子的識別，它在簡單的 CNN 模型上實現了 RNN 的語義模型，這好像是花了一個星期做出來的。
下面看看小程式在美妝領域的應用，和 ModiFace 合作推出了阿曼尼的美妝小程式。這個小程式在端上做美妝的過程中遇到很多挑戰：
1、不可能把使用者的圖片實時傳到服務端進行實時跟蹤，實時得到結果，必須在端上才能實現，至少要達到 10FPS 才能有連續的感覺。
2、微信對於外掛的 JavaScript files 有 2MB 的限制，載入模型也有延時的問題。
3、模型是自主開發的，有他們特定的運算元、特定的框架。另外，手機多樣性也導致他們很難來滿足這些需求。
他們在考慮模型框架和其他部分的結合方面做了很多選擇和嘗試，也看了不同的框架，最後選擇 Tensorflow。js。
我們透過模型和框架的結合來以上問題得到解決：
最佳化結果：
1、ModiFace 虛擬試妝外掛共 1。8MB，其中 JavaScript 檔案是 983KB，Model Files 是 829KB。ModiFace 虛擬試妝外掛執行速度為 25FPS。
模型執行時間是 30ms，渲染時間是 10ms。
其實並不是一定要在服務端才能實現這個 ML，現在透過這個平臺，很多模型都可以在端上實行。
很多同學可能覺得這個不適合才上手 ML 的同學，但是我們把這些都簡化出來了，大家可以想象，原來資料庫也要有好多安裝複雜的步驟，後來為什麼都沒了？因為工具給大家解決了大部分問題。
Tensorflow.js 遇見微信小程式
給大家舉個例子，假設產品經理要求你這個星期做出墨鏡試戴 AR 的網站，你很生氣地想，這週末要加班了。
我現在給你一個流程圖參考，看看能不能幫你少加幾天班。
流程圖是這樣的，一般情況下有一個輸入，輸入可以來自很多小程式具有的 API，然後對於一個 ML 的執行環境來說，它必須把輸入格式轉化成 Tensor，轉化成模型可以消費的模式，選擇一個正確的模型或者建立一個模型，透過這個模型執行得到一個推理結果。
推理結果後期處理有時也是非常複雜的，因為模型本身不是給前端開發者用的，ML 工程師並不是很在乎前端使用者怎麼用，所以你還要做很多工作把這個結果解釋出來。
因為 ML 只是一個模組，對於整個應用來說只是一部分，不能提供完整的解決方案，所以往往把輸出結果給下一個模組去執行。
從這個流程圖分析一下怎麼解決做 AR 網站的問題：
流程圖
抓取影片資料，然後把它們轉化成模型可以用的結構。Tensorflow。js 提供資料API，支援 Camera、Audio、Image、CSV等。
1、預處理
選擇一個模型或者創造一個模型是很難的，因為需要實時識別人臉，實時的測人臉關鍵點，判斷出人臉的朝向，知道他抬頭/低頭/朝左/朝右臉的朝向要有3D的判斷。
於是我們推出 Facemesh，實時人臉關鍵點檢測及跟蹤模型，速度非常快，可以檢測唇、眉毛、眼睛等，還可以做很多事情。
另外，後期處理也很複雜，即使給你一個三維的點，你也不知道攝像頭在座標系裡在哪，如何把三維模型放到人臉的座標系裡，這也不是那麼簡單，因為這跟攝像頭的結構，是透視型攝像頭還是平行攝像頭有關係。最終還要渲染3D模型，這要求速度要夠快。
Facemesh 的速度能做到 10ms 的推理速度，並且提供 3D 座標轉換的 API。
Three。js 超級高速 WebGL 渲染模型在小程式裡也是可以跑的。
回到 AR 網站，現在是不是可以解決你的問題了？
透過資料 API 可以抓取資料，Tensorflow。js 平臺執行速度非常快，Facemesh 3D 座標轉化API將帶來非常簡化的工作，最後把輸出結果交給Three。js 去渲染。
程式碼舉例：
這是一個載入模型，load 呼叫模型，輸出的結果是非常易於理解的輸出結果，而不是用 Tensor 給你顯示的結果。
這段是渲染的步驟，把模型輸出的結果到 3D 模型上去渲染，最後結果是什麼樣？400 個點的渲染，它能夠檢查主要的位置，這是3維朝向的渲染，把三維眼鏡放在人臉上，速度在 40 幀/秒左右，包括執行和渲染，這個例子不是小程式。
2、模型選擇
最後給大家分享下 Tensorflow。js 為什麼速度這麼快？
1、這是用JavaScript做，但是和 Tensorflow 相容，提供三個不同層次的 API：先是模型，可以直接在模型上呼叫，開發者不用瞭解建立模型和加速模型。如果希望自己建立模型就用 Layers API。還有 Core API，這跟Tensorflow 的 CAPI 是一致的。
2、後端分兩種情況：
（1）在客戶端直接支援 WebGL，可以無縫加速。
（2）在服務端主要提供 Node。j s的支援，直接跑在 Tensorflow 的 CPU、GPU 上，還有 Headless GL。
Tensorflow.js技術架構
在服務端，Tensorflow。js 的速度基本和 Python 是一致的，這是高階的GPU，速度是八毫秒，我們在 CPU 甚至還稍微快一點。
由於在 JavaScript 這個層面，在端上基本沒有別的系統跟 Tensorflow。js 進行比較，所以我們選擇跟原生系統進行比較。
在iPhone上Tensorflow。js執行的速度是22。8毫秒，是一個標準的MobileNetV2 1。0-224 的模型執行時間。另外，在安卓上，Tensorflow。js 渲染稍微落後，安卓 CPU 大概是 50 毫秒，Tensorflow。js 是 100 毫秒，安卓的 GPU 是 12 毫秒，Tensorflow。js 也在儘量去拉近這個距離，這是我們接下來的研發主要方向，希望能提升速度，特別是在安卓方面。
Tensorflow.js
Tensorflow。js 在未來的研發方向是：
1、我們將尋找好用的場景給大家提供完整的解決方案。
2、Tensorflow。js 將支援 AutoML，這是在谷歌雲的一個服務，可以自動尋找最佳的結構，去解決已有的定製模型。
3、在 Node。js 上發力，目標是提供全棧在服務端加強學習訓練、部署的平臺。假如公司是用 Node。js，為什麼還要用 Python？我們希望把這個門檻降低，讓開發者訓練模型，並且融入到已有的環境裡，這也是針對中小型企業的，因為大企業可能已經有這些平臺了。
4、用最新的技術提供更新的最佳化，例如 WASM、WebGPU 等。
5、支援更多的 JavaScript 執行平臺，將和支付寶小程式、谷歌小程式合作。
Tensorflow。js 大概是一年前推出的開源專案，目前發展很快，大概 700K 的NPM 下載，5M CDN 的點選，11K GitHub Stars，貢獻者超過 120 人。
俞玶簡介：Google Brain 工程師，TensorFlow。js 專案負責人。他致力於將深度學習引入到 Web 和其他 JavaScript 開發平臺。他曾擔任谷 Google Attribution 平臺的技術負責人。俞玶是清華大學理學學士，UMCP 理學碩士。
