《智能系統與技術叢書 ：基于瀏覽器的深度學習 》

智能系統與技術叢書

基于瀏覽器的深度學習

Deep Learning in the Browser

[ 法 ] 澤維爾·布里（Xavier Bourry）

[ 美 ] 佐佐木凱（Kai Sasaki）

[ 奧地利 ] 克里斯托夫·科納（ Christoph K.rner）

[ 日 ] 中野禮一郎（Reiichiro Nakano） 著

俠 天 易樂天 譯

譯者序

TensorFlow 已經成為工業界主流的深度學習框架，再加上 Keras 易用性的加持，越來 越多的從業者或者公司開始使用 TensorFlow 實現其深度學習的應用。一直以來缺乏客戶端的深度學習框架，而且基于瀏覽器的 TensorFlow.js 則彌補了這一空白。基于瀏覽器的TensorFlow.js 可以跨平臺、實時地進行推斷，深受 JavaScript 開發者的喜愛，在 Github上的 Star 數也增長迅速。

本書是一本介紹 TensorFlow.js 的書，內容主要包括神經網絡架構、主流的 JavaScript深度學習框架、深度學習的 JavaScript 基礎、基于 WebGL 的 GPU 加速、瀏覽器上的數據抽取和操作，以及 TensorFlow.js 實踐應用。每章都配有完整的代碼示例以及可視化效果，輕松易學。書中還詳細介紹了 TensorFlow.js 中的重要模塊 tfjs-core、tfjs-layers、tfjs-node和 tfjs-converter 等。

本書雖然不難，但是對于新手或者渴望獲得知識的讀者來說，他們會從這本書學到有用的知識點。

本書大部分是在周末或乘坐高鐵時翻譯的。 雖然譯書可以學到知識，卻要消耗更多的時間。但只要在某個時間點某個人讀到其中一段文字， 然后拍著桌子說“看了好多種表述，這次終于搞懂了”，我就知足了。

在此，也要感謝家人和朋友的幫助和支持。沒有他們的支持完成本書的時間會更長。

俠 天

前言

“一次編寫，處處運行”是開發者們曾經的夢想。如果在所有環境，無論是什么樣的機器、操作系統、屏幕分辨率或者計算能力，你都可以執行相同的軟件，這個世界該是多么美好啊！這個美好的愿望首先導致了虛擬機的出現：模擬一個標準的計算機以供軟件運行，在物理計算機和代碼之間增加一個抽象層。因為在不同的架構中虛擬機是相同的，你只需編寫和編譯一次源代碼。Java 虛擬機在 1994 年正式發布，是第一個真正意義上的跨平臺虛擬機。

與此同時，萬維網還在襁褓中。每個連接的用戶能夠使用相同的文件格式在網上讀取和發布文檔。HTML 語言迅速成為網上豐富的文本內容的標準。但它只是描述性的，不能滿足網絡用戶的新需求。在 20 世紀 90 年代末，網絡不再是一個共享的存儲庫：用戶希望動態地與內容和其他用戶進行交互。基于這個目的，瀏覽器上的 JavaScript 語言出現了，成為一個圖靈機。通過使用 Java applet，Java 虛擬機也可以在瀏覽器上運行，并且大量使用，因為 JavaScript 功能弱且運行慢，不適合大型應用。

隨著時間推移，JavaScript 變得越來越強大。JavaScript 第一次標準化是在 1997 年。在不使用 WebAssembly 或者 ASM.js 的情況下，它的速度增長到了比原生語言慢不到一個數量級的程度。Web 瀏覽器實現新的 API 提供訪問以前預留給編譯應用的接口：基于 WebGL 的 GPU、基于 WebRTC 的相機和 P2P 流、基于游戲手柄 API 的游戲機、基于 WebAudio 的音頻卡以及基于 WebXR 的 VR 和 AR 設備。JavaScript 甚至發起新的挑戰：基于 Node.js 的服務器端應用、基于 Electron 的桌面應用、基于漸進式網頁程序（Progressive Web Application）的移動應用，甚至基于 Lisk 的分布式區塊鏈應用。像 Re-act.js 或者 Angular 這樣的大型框架和像 Node 包管理器這樣的包管理器使得開發大型軟件成為可能。JavaScript 勢不可當，而它的競爭者 (比如 VBScript、Flash 或者 Silverlight，甚至 Java 虛擬機) 不斷從 Web 瀏覽器中出局。角色發生了逆轉：JavaScript 經常通過Webview 組件嵌入 Java 應用。在第一個虛擬機發布大約 25 年之后，“一次編寫，處處運行”又怎么樣了呢？

當 Web 瀏覽器使用新的 JavaScript 特征而越來越豐富時，由于作為計算支持的GPU 使用和像 Cuda 或者 OpenCL 這樣的 GPU 并行計算庫的出現，人工智能神經網絡的能力得以釋放。它們增加了新的功能，并在許多領域快速發展：自然語言處理、翻譯、面部識別、給對象加標簽、圖片分割和聊天機器人。大型開源深度學習框架，比如Torch、Theano、TensorFlow 和云 GPU 計算的提供，讓這種技術走出了實驗室。

然而，深度學習的使用大部分仍然在服務器端，而不在客戶端。造成這種情況的原因有三個：首先，為了高效地進行深度學習，你需要使用 GPU，而現在即使移動設備的平均 GPU 能力也足夠好；其次，神經網絡模型一般比較大，只有新移動網絡技術 (比如5G) 能夠足夠快地傳輸這些數據；第三，你需要用 JavaScript 編寫的、易構建的開源框架（比如 TensorFlow.js）運行神經網絡模型。技術趨勢也從完全的云計算轉向邊緣計算概念主導的更務實的方法：當用戶有免費的強大計算終端時，為什么還要經過網絡在昂貴的服務器端處理所有的計算？技術已經到位，所以你將看到許多在瀏覽器上的深度學習應用，這只是時間問題。

在客戶端實現深度學習應用有很大的優勢。你可以處理瀏覽器輸入，這些在服務器端不可行，或者具有一些實時的限制 (比如來自麥克風的音頻或者來自網絡攝像頭的視頻)。客戶端的深度學習使得應用擴展性更好，連接更健壯。軟件可以享受 JavaScript 的所有便利：它能用 Node.js 在服務器端測試，使用漸進式網頁程序封裝的手機應用或者安裝為桌面應用。用戶可以在不安裝任何東西的情況下安全地測試它。

本書是 Web 開發和深度學習的跨界。當這兩種技術結合時，它們的“蜜月”將產生讓人想象不到的新應用。你準備好開始冒險了嗎？本書就是為你而寫的：你可以學習到如何使用 JavaScript 的深度學習框架、抓取輸入的 Web 編程以及 WebGL 的實現。

在不遠的未來，計算機會與我們更密切。在 20 世紀 70 年代，它們遠離主流，但是在20 世紀 80 年代桌面計算機出現時，它們開始貼近我們。它們逐漸進入筆記本電腦，最終進入智能手機。增強現實是下一步，為其準備了 Web 標準：WebXR。它使互聯網更貼近我們，而且智能應用讓我們更好地理解真實的世界。基于瀏覽器的深度學習當前還處于萌芽階段，這是在其強大之前關注它的最佳時機。

開心地學習，開心地進行深度學習。

本書示例

本書所有源代碼放在 https://github.com/backstopmedia/deep-learning-browser。你可以在 https://reiinakano.github.io/tfjs-rock-paper-scissors/訪問石頭剪刀布游戲示例，也可以在 https://reiinakano.github.io/tfjs-lstm-text-generation/訪問文本生成模型的示例。

2 Xavier Bourry 是創業公司 Jeeliz 的聯合創始人和 CTO，專注于深度學習。

2 Kai Sasaki 是 Arm 公司的高級軟件工程師，還是 Apache Hivemall Committer。

2 Christoph K.orner 在都柏林的微軟公司處理 TSP 數據和 AI。

2 Reiichiro Nakano 是 Infostellar 公司的軟件開發工程師，專注于機器學習。

目錄

譯者序

前言

第 1 章 深度學習. . . . . . . . . . . . . . . . . . . . . . .1

1.1 深度神經網絡的數學基礎 . . . . 1

1.1.1 感知機||門控線性回歸 . . . . 2

1.1.2 多層感知機. . . . . . . . . . . . . . . . .5

1.1.3 卷積和池化. . . . . . . . . . . . . . . . .5

1.1.4 激活函數 . . . . . . . . . . . . . . . . . . . 7

1.2 深度神經網絡的訓練. . . . . . . .11

1.2.1 損失函數的重要性 . . . . . . . . . 12

1.2.2 正則化 . . . . . . . . . . . . . . . . . . . .12

1.2.3 反向傳播算法 . . . . . . . . . . . . . 13

1.2.4 優化方法. . . . . . . . . . . . . . . . . .13

1.3 本章小結. . . . . . . . . . . . . . . . . . . .14

第 2 章 神經網絡架構. . . . . . . . . . . . . . . . .15

2.1 卷積神經網絡 . . . . . . . . . . . . . . . 15

2.1.1 AlexNet . . . . . . . . . . . . . . . . . . 16

2.1.2 GoogLeNet. . . . . . . . . . . . . . . .17

2.1.3 ResNet . . . . . . . . . . . . . . . . . . . 18

2.1.4 SqueezeNet . . . . . . . . . . . . . . . 19

2.2 循環神經網絡 . . . . . . . . . . . . . . . 22

2.2.1 LSTM . . . . . . . . . . . . . . . . . . . 23

2.2.2 GRU . . . . . . . . . . . . . . . . . . . . .24

2.3 深度強化學習 . . . . . . . . . . . . . . . 25

2.4 本章小結. . . . . . . . . . . . . . . . . . . .28

第 3 章 JavaScript 深度學習框架 . . . . 29

3.1 TensorFlow.js . . . . . . . . . . . . . . .29

3.1.1 TensorFlow.js 介紹 . . . . . . . . 30

3.1.2 XOR 問題 . . . . . . . . . . . . . . . . 30

3.1.3 解決 XOR 問題 . . . . . . . . . . . 32

3.1.4 網絡架構. . . . . . . . . . . . . . . . . .37

3.1.5 張量 . . . . . . . . . . . . . . . . . . . . . . 39

3.1.6 張量操作. . . . . . . . . . . . . . . . . .40

3.1.7 模型訓練. . . . . . . . . . . . . . . . . .43

3.1.8 TensorFlow.js 的生態 . . . . . . 46

3.2 WebDNN . . . . . . . . . . . . . . . . . . . 48

3.3 Keras.js . . . . . . . . . . . . . . . . . . . . 51

3.4 本章小結. . . . . . . . . . . . . . . . . . . .52

第 4 章 深度學習的 JavaScript 基礎 . . . . . . . . . . . . . . . . . . . . . . . . . . 53

4.1 JavaScript 中的TypedArray . . . . . . . . . . . . . . . . 53

4.1.1 ArrayBu.er . . . . . . . . . . . . . . 55

4.1.2 DataView . . . . . . . . . . . . . . . . 56

4.2 JavaScript 中的并發 . . . . . . . . 58

4.2.1 JavaScript 的事件循環 . . . . . 58

4.2.2 用 Promise 創建一個異步函數 . . . . . . . . . . . . . . . . . .59

4.2.3 使用新的async/await語法 . . . . . . . . . . . . . . . . . . . . . . 61

4.2.4 多線程使用 WebWorker . . . 64

4.2.5 深度學習應用程序的處理循環 . . . . . . . . . . . . . . . . . .66

4.3 在 CPU/GPU 上加載資源 . . . . . . . . . . . . . . . . . . . . . . . . 66

4.3.1 Fetch API . . . . . . . . . . . . . . . . 67

4.3.2 標簽編碼. . . . . . . . . . . . . . . . . .69

4.3.3 one-hot 編碼 . . . . . . . . . . . . . . 69

4.4 本章小結. . . . . . . . . . . . . . . . . . . .70

第 5 章 基于 WebGL 的 GPU加速 . . . . . . . . . . . . . . . . . . . . . . . . . . 73

5.1 WebGL 基礎 . . . . . . . . . . . . . . . . 74

5.1.1 WebGL 工作流程 . . . . . . . . . . 76

5.1.2 片段著色器渲染 . . . . . . . . . . . 78

5.2 WebGL 實現常規計算 . . . . . . 85

5.2.1 調試 WebGL . . . . . . . . . . . . . 86

5.2.2 渲染紋理. . . . . . . . . . . . . . . . . .87

5.2.3 精度重要性. . . . . . . . . . . . . . . .92

5.2.4 優化器 . . . . . . . . . . . . . . . . . . . .94

5.2.5 GLSL 開發. . . . . . . . . . . . . . . .95

5.2.6 浮點型的特殊性 . . . . . . . . . . . 95

5.2.7 從 CPU 流向 GPU，反之亦然 . . . . . . . . . . . . . . . . . .99

5.3 使用紋理和著色器的矩陣計算 . . . . . . . . . . . . . . . . . . 101

5.3.1 標準的矩陣加法 . . . . . . . . . . 101

5.3.2 標準的矩陣乘法 . . . . . . . . . . 102

5.3.3 激活函數應用 . . . . . . . . . . . . 103

5.3.4 運用WGLMatrix庫 . . . . . . . . . 104

5.4 手寫數字識別應用 . . . . . . . . . 105

5.4.1 數據編碼 . . . . . . . . . . . . . . . . 105

5.4.2 內存優化 . . . . . . . . . . . . . . . . 105

5.4.3 前向傳播 . . . . . . . . . . . . . . . . 107

5.4.4 第一次嘗試 . . . . . . . . . . . . . . 107

5.4.5 優化性能 . . . . . . . . . . . . . . . . 108

5.5 本章小結 . . . . . . . . . . . . . . . . . . 109

第 6 章 從瀏覽器中提取數據 . . . . . . . . 111

6.1 加載圖像數據. . . . . . . . . . . . . .112

6.1.1 從圖像中提取像素 . . . . . . . . 112

6.1.2 加載遠程資源 . . . . . . . . . . . . 114

6.1.3 獲取二進制塊 . . . . . . . . . . . . 116

6.2 將像素數據渲染到屏幕上 . . 117

6.2.1 顯示圖片 . . . . . . . . . . . . . . . . 118

6.2.2 將像素數據渲染到畫布 . . . . 119

6.2.3 插值圖像數據 . . . . . . . . . . . . 122

6.2.4 在畫布上繪制形狀 . . . . . . . . 124

6.3 訪問相機、麥克風和揚聲器. . . . . . . . . . . . . . . . . . . . .126

6.3.1 從網絡攝像頭捕獲圖像 . . . . 126

6.3.2 用麥克風錄音 . . . . . . . . . . . . 128

6.3.3 加載、解碼和播放聲音 . . . . 130

6.4 深度學習框架中的實用工具. . . . . . . . . . . . . . . . . . .131

6.4.1 TensorFlow.js . . . . . . . . . . . 131

6.4.2 Keras.js . . . . . . . . . . . . . . . . . 133

6.4.3 WebDNN . . . . . . . . . . . . . . . 133

6.5 本章小結 . . . . . . . . . . . . . . . . . . 135

第 7 章 高級數據操作的方法 . . . . . . . . 137

7.1 反序列化 Protobuf . . . . . . . . 138

7.1.1 解析 Caffe 模型參數 . . . . . . 139

7.1.2 解析 TensorFlow 圖. . . . . . .141

7.1.3 浮點精度的注意事項 . . . . . . 142

7.2 用 Chart.js 繪制圖表. . . . . . .143

7.2.1 探索不同的圖表類型 . . . . . . 144

7.2.2 配置數據集 . . . . . . . . . . . . . . 146

7.2.3 更新值. . . . . . . . . . . . . . . . . . .147

7.2.4 選項和配置概述 . . . . . . . . . . 150

7.3 用畫布畫草圖. . . . . . . . . . . . . .153

7.3.1 在畫布上繪圖 . . . . . . . . . . . . 154

7.3.2 提取筆畫 . . . . . . . . . . . . . . . . 158

7.4 從麥克風計算頻譜圖. . . . . . .159

7.5 人臉檢測與跟蹤 . . . . . . . . . . . 162

7.5.1 用 Jeeliz FaceFilter跟蹤人臉. . . . . . . . . . . . . . . . .162

7.5.2 使用 tracking.js 跟蹤人臉 . . . . . . . . . . . . . . . . . . . . . 163

7.5.3 Chrome 中人臉檢測的原生支持. . . . . . . . . . . . . . . . .165

7.6 本章小結 . . . . . . . . . . . . . . . . . . 167

第 8 章 基于 TensorFlow.js構建應用 . . . . . . . . . . . . . . . . . . . . 169

8.1 TensorFlow.js 實現手勢識別. . . . . . . . . . . . . . . . . . .169

8.1.1 算法解說 . . . . . . . . . . . . . . . . 170

8.1.2 TensorFlow.js 項目準備 . . . 171

8.1.3 實例化 KNN 圖像分類器 . . . . . . . . . . . . . . . . . . . . . 172

8.1.4 TensorFlow.js 迭代訓練 . . . 173

8.1.5 小結. . . . . . . . . . . . . . . . . . . . .176

8.2 TensorFlow.js 實現文本生成 . . . . . . . . . . . . . . . . . . . . . . . 176

8.2.1 算法解說 . . . . . . . . . . . . . . . . 176

8.2.2 Keras 模型 . . . . . . . . . . . . . . .177

8.2.3 將 Keras 模型轉換為TensorFlow.js 模型 . . . . . . . 178

8.2.4 項目準備 . . . . . . . . . . . . . . . . 178

8.2.5 在 TensorFlow.js 中導入Keras 模型 . . . . . . . . . . . . . . 179

8.2.6 TensorFlow.js 迭代訓練 . . . 179

8.2.7 構造模型輸入 . . . . . . . . . . . . 181

8.2.8 模型預測 . . . . . . . . . . . . . . . . 183

8.2.9 模型輸出抽樣 . . . . . . . . . . . . 184

8.2.10 小結. . . . . . . . . . . . . . . . . . . .186

8.3 TensorFlow.js 實現圖像降噪. . . . . . . . . . . . . . . . . . .186

8.3.1 算法解說 . . . . . . . . . . . . . . . . 187

8.3.2 將 Keras 模型轉換為TensorFlow.js 模型 . . . . . . . 188

8.3.3 項目準備 . . . . . . . . . . . . . . . . 189

8.3.4 初始化. . . . . . . . . . . . . . . . . . .190

8.3.5 應用流程 . . . . . . . . . . . . . . . . 190

8.3.6 加載測試數字圖片 . . . . . . . . 191

8.3.7 更新噪聲 . . . . . . . . . . . . . . . . 193

8.3.8 生成變形圖片 . . . . . . . . . . . . 194

8.3.9 圖片降噪 . . . . . . . . . . . . . . . . 195

8.3.10 初始化函數 . . . . . . . . . . . . . 196

8.3.11 小結. . . . . . . . . . . . . . . . . . . .197

8.4 本章小結 . . . . . . . . . . . . . . . . . . 197

8.5 最后結論 . . . . . . . . . . . . . . . . . . 198

深度學習

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。