# TensorFlow.js

###### tags: `TensorFlow.js`

### Sample Code [link](https://drive.google.com/file/d/1E95N-YtT6bQIVED1pm5rz2610g79nobV/view?usp=sharing)
### 1: TensorFlow.js 簡介
TensorFlow.js 是 TensorFlow 的 JavaScript 版本，支持 GPU 硬體加速，可以執行在 Node.js 或瀏覽器環境中。不但支援完全基於 JavaScript 從頭開發、訓練和部署模型，也可以用來運行已有的 Python 版 TensorFlow 模型，或者基於現有的模型進行繼續訓練。在 Node.js 環境中，如果有 CUDA 環境支援，或者在瀏覽器環境中，有 WebGL 環境支援，那麼 TensorFlow.js 可以使用硬體進行加速。

TensorFlow.js 可以讓我們直接在瀏覽器中載入 TensorFlow，讓用戶立即透過自己的 CPU/GPU 資源進行我們所需要的機器學習運算，更靈活地進行 AI 應用的開發。

瀏覽器中進行機器學習，相對比與伺服器端來講，將擁有以下四大優勢：
- 不需要安裝軟體或驅動程式（打開瀏覽器即可使用）
- 可以透過瀏覽器進行更加方便的人機互動
- 可以透過手機瀏覽器，呼叫手機硬體的各種感測器（如：GPS、電子羅盤、加速度傳感器、相機等
- 用戶的資料不需要上傳到伺服器，在本機端即可完成所需操作

### 2: TensorFlow.js環境配置
在瀏覽器中載入 TensorFlow.js ，最方便的方法是在 HTML 中直接引用 TensorFlow.js 發布的 NPM 包中已經打包安裝好的 JavaScript 程式碼。

`<!-- TensorFlow.js Core -->`
`<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>`

伺服器端使用 JavaScript ，首先需要按照 NodeJS.org 官網的說明，完成安裝最新版本的 Node.js 。然後，完成以下四個步驟即可完成配置：

(1).確認 Node.js 版本(v10 或更新的版本)

$ node --version
v 10.5.0

$ npm --version
6.4.1

(2).建立 TensorFlow.js 項目目錄

$ mkdir tfjs
$ cd tfjs

(3).安裝 TensorFlow.js

# 初始化項目管理文件 package.json
$ npm init -y

# 安裝 tfjs 函式庫，純 JavaScript 版本
$ npm install @tensorflow/tfjs

# 安裝 tfjs-node 函式庫，C Binding 版本
$ npm install @tensorflow/tfjs-node

# 安裝 tfjs-node-gpu 函式庫，支援 CUDA GPU 加速
$ npm install @tensorflow/tfjs-node-gpu

(4).確認 Node.js 和 TensorFlow.js 工作正常

$ node
> require('@tensorflow/tfjs').version
{
    'tfjs-core': '1.3.1',
    'tfjs-data': '1.3.1',
    'tfjs-layers': '1.3.1',
    'tfjs-converter': '1.3.1',
    tfjs: '1.3.1'
}

如果你看到了上面的==tfjs-core==, ==tfjs-data==, ==tfjs-layers== 和 ==tfjs-converter== 的輸出資訊，那麼就說明環境配置沒有問題了。

### 3: TensorFlow.js 模型部署
於瀏覽器加載AI模型。一般 TensorFlow 的模型，會被存儲為 SavedModel 格式。這也是 Google 目前推薦的模型保存最佳方式。SavedModel 格式可以通過 tensorflowjs-converter 轉換器轉換為可以直接被 TensorFlow.js 載入的格式，在 JavaScript 語言中進行使用。
- 安裝 ==tensorflowjs_converter==

$ pip install tensorflowjs

tensorflowjs_converter 的使用細節，可以透過--help參數查看程式指令:

$ tensorflowjs_converter --help

- 轉換 SavedModel

tensorflowjs_converter --input_format=keras model_path/model.h5 save_path/tfjs_target

tensorflowjs_converter --input_format=keras PoseNet_yolo_tiny_v2_ep312_config.h5 PoseNetV2_tiny

tensorflowjs_converter --input_format=keras python/rakuten_yolo_tiny_ep499_config.h5 python/rakuten_tiny

- 轉換完成後的模型，轉換成兩文件
==model.json==：模型架構
==group1-shard*of*==：模型參數
### 4: 於瀏覽器上使用AI模型進行任務
查看sample code，包含detection以及classification的sample範例，利用vscode搭配http-server，再透過ngrok來轉https網址以提供任何硬體使用。
- https://marketplace.visualstudio.com/items?itemName=philnash.ngrok-for-vscode
### 參考資料
- https://www.youtube.com/watch?v=EoYfa6mYOG4
- https://deeplizard.com/learn/video/HEQDRWMK6yY
- https://tf.wiki/zh_hant/deployment/javascript.html