# 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 或更新的版本) ```javascript $ node --version v 10.5.0 $ npm --version 6.4.1 ``` (2).建立 TensorFlow.js 項目目錄 ```javascript $ mkdir tfjs $ cd tfjs ``` (3).安裝 TensorFlow.js ```javascript # 初始化項目管理文件 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 工作正常 ```javascript $ 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== ```javascript $ pip install tensorflowjs tensorflowjs_converter 的使用細節，可以透過--help參數查看程式指令: $ tensorflowjs_converter --help ``` - 轉換 SavedModel ```javascript 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