智能前端技術與實踐

石璞东，西安建筑科技大学硕士研究生，研究方向包括机器学习、Web开发，担任百度飞桨领航团金牌团长和hahaWebsite网站站长。

吴萌，西安建筑科技大学信息与控制工程学院副教授，硕士生导师，美国俄亥俄州立大学访问学者，中国图象图形学学会数字文化遗产专委会委员。

王慧琴，西安建筑科技大学信息与控制工程学院副院长、教授、博士生导师，通信与信息系统研究所所长，陕西省图象图形学学会理事，中国图象图形学学会图像应用与系统集成专委会委员，中国图象图形学学会数字文化遗产专委会委员。

目　　錄

第 1章 開發環境配置 1

1.1 安裝Anaconda3 1

1.2 安裝TensorFlow 2 6

1.3 安裝npm包管理工具 11

1.4 安裝TensorFlow.js的相關包 14

1.5 使用WebStorm 18

1.6 使用Google瀏覽器 19

1.6.1 註冊Chrome Web Store開發者 19

1.6.2 Google瀏覽器擴展程序 20

1.7 使用微信開發者工具 27

1.7.1 添加微信小程序插件 29

1.7.2 使用微信小程序插件 29

1.7.3 發布微信小程序 35

第 2章 前端開發基礎 39

2.1 背景知識概述 39

2.2 HTML基礎 40

2.2.1 HTML文檔基本結構 41

2.2.2 常用標簽 49

2.3 CSS基礎 55

2.3.1 CSS的3種使用方法 55

2.3.2 CSS選擇器 56

2.4 JavaScript基礎 56

2.5 與Google擴展程序相關的JavaScriptAPI 58

2.6 深度學習中的JavaScript 61

2.6.1 JavaScript數據類型 61

2.6.2 JavaScript異步編程 63

2.7 微信小程序開發 67

2.7.1 微信小程序框架結構分析 68

2.7.2 頁面描述文件 72

2.7.3 頁面樣式文件 87

2.7.4 邏輯層文件 88

2.7.5 小程序的事件系統 91

第3章 深度學習概述 95

3.1 深度學習環境 95

3.1.1 雲端深度學習環境選擇 95

3.1.2 本地深度學習環境搭建 104

3.2 深度學習框架 105

3.3 TensorFlow 2基礎 113

3.3.1 數據類型 113

3.3.2 數值精度 115

3.3.3 操作和計算圖 116

3.3.4 自動微分和梯度帶 117

3.3.5 廣播機制 118

3.3.6 框架概述 118

3.4 深度學習基礎 119

3.4.1 BP神經網絡 120

3.4.2 激活函數 121

3.4.3 softmax函數 126

3.4.4 損失函數 126

3.4.5 梯度下降算法 130

3.4.6 反向傳播 132

第4章 TensorFlow.js框架詳解 134

4.1 TensorFlow.js框架概述 134

4.2 TensorFlow.js低階API詳解 136

4.2.1 張量操作方法 136

4.2.2 數學運算 148

4.3 TensorFlow.js高階API詳解 153

4.3.1 構建模型 154

4.3.2 模型配置 160

4.3.3 模型訓練 160

4.3.4 模型評估 160

4.3.5 模型轉換 164

4.4 TensorFlow.js Vis庫詳解 166

4.4.1 Visor接口方法介紹 167

4.4.2 模型可視化 168

4.4.3 數據可視化 173

4.4.4 模型評價指標 175

4.5 其他API 176

4.5.1 數據操作 176

4.5.2 瀏覽器操作 183

4.5.3 性能優化 184

4.5.4 正則化 185

4.5.5 早停法 185

第5章 捲積神經網絡 187

5.1 捲積神經網絡概述 187

5.2 捲積層 188

5.3 池化層 192

5.4 輕量級的捲積神經網絡 194

5.4.1 SqueezeNet 195

5.4.2 MobileNetV1 198

5.4.3 ShuffleNetV1 201

5.4.4 Xception 203

第6章 TensorFlow.js基礎案例 206

6.1 線性回歸 207

6.1.1 案例簡介 207

6.1.2 代碼實現 207

6.2 logistical回歸 211

6.2.1 案例簡介 211

6.2.2 代碼實現 211

6.3 XOR問題 215

6.3.1 案例簡介 215

6.3.2 代碼實現 216

6.4 加載與應用MobileNet模型 220

6.4.1 案例簡介 220

6.4.2 代碼實現 220

6.5 《你畫我猜》（MNIST手寫數字版） 224

6.5.1 案例簡介 224

6.5.2 代碼實現 224

第7章 TensorFlow官方數據集實戰 231

7.1 boston_housing數據集與實戰案例 231

7.1.1 數據集介紹 231

7.1.2 房價預測實戰 232

7.2 與CIFAR-10數據集相關的實戰案例 235

7.2.1 數據集介紹 235

7.2.2 在Anaconda3 Jupyter Notebook中加載數據集 235

7.2.3 在Kaggle中導入CIFAR-10數據集 236

7.2.4 從本地導入CIFAR-10數據集 240

7.3 與CIFAR-100數據集相關的實戰案例 248

7.3.1 數據集介紹 248

7.3.2 數據集展示 249

7.4 與MNIST數據集相關的實戰案例 253

7.4.1 數據集介紹 253

7.4.2 數據集展示 253

7.5 與Fashion_MNIST數據集相關實戰案例 255

7.5.1 數據集介紹 255

7.5.2 數據集加載 256

7.6 基於CNN的MNIST手寫數字識別 257

7.6.1 自定義網絡模型 257

7.6.2 微信小程序部署 261

第8章 基於CNN的常見水果分類識別 266

8.1 數據集介紹 266

8.2 數據集標註 269

8.3 數據預處理 277

8.3.1 數據文件讀取 277

8.3.2 文件解碼 278

8.3.3 文件數據類型轉換 278

8.3.4 數據歸一化 280

8.4 模型概覽 282

8.5 模型設計 284

8.6 模型配置 284

8.7 模型訓練 285

8.8 模型評估 286

8.9 模型部署 289

8.9.1 在微信小程序中加載模型 289

8.9.2 在Google瀏覽器中加載模型 291

第9章 基於PoseNet的人體姿態檢測 293

9.1 項目概述 293

9.2 項目初始化 294

9.2.1 添加camera組件 295

9.2.2 添加canvas對象 296

9.3 模型加載 296

9.4 姿態檢測 297

9.5 預測結果繪制 301

9.6 效果展示 302

第 10章 基於Coco SSD的目標檢測 303

10.1 項目概述 303

10.2 項目初始化 304

10.2.1 添加camera組件 304

10.2.2 添加canvas對象 305

10.3 模型加載 305

10.4 目標檢測 305

10.5 預測結果繪制 307

10.6 效果展示 307

第 11章 OCR技術 309

11.1 OCR技術概述 310

11.2 OCR工具推薦 311

11.3 微信OCR 315

11.3.1 插件配置信息 316

11.3.2 頁面結構設計 317

11.3.3 頁面邏輯功能 318

11.4 Google擴展程序OCR 319

11.4.1 插件配置信息 319

11.4.2 頁面結構設計 320

11.4.3 頁面邏輯功能 321

11.4.4 後台腳本 322

第 12章 神奇的人工智能 324

12.1 個人網站惡意評論檢測 324

12.1.1 項目簡介 324

12.1.2 代碼實現 326

12.1.3 效果展示 330

12.2 微信同聲傳譯 331

12.2.1 項目簡介 331

12.2.2 代碼實現 332

12.2.3 效果展示 333

12.3 Google面館正式營業了 334

12.4 猜畫小歌 335

12.5 Face Touch Monitor 335

12.6 Teachable Machine 336

12.7 其他案例 337