JavaScript之機器學習2:Tensorflow.js

目錄

1. Tensorflow.js是什麼？
2. Tensorflow.js具體功能有？
3. 安裝Tensorflow.js
4. 什麼是Tensor?
5. 線性迴歸
6. 定義模型結構
7. 損失函數：均方誤差（MSE）和優化器：隨機梯度下降（SGD）
8. 訓練模型並可視化訓練過程
9. 進行預測

1. Tensorflow.js是什麼？

• 一個用JavaScript實現的機器學習庫
• 使我們可以直接在瀏覽器和Node.js中使用機器學習

2. Tensorflow.js具體功能有？

• 運行現有模型 （使用算法工程師已經訓練好的模型）
• 重新訓練現有模型
• 使用JavaScript從零開發機器學習模型

3. 安裝使用Tensorflow.js

• 使用<script>標籤，但是沒有智能提示

  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
  

• 使用npm安裝，安裝純JavaScript版本，這是性能方面最慢的選項。

  npm install @tensorflow/tfjs
  

• 安裝帶有原生C++綁定的TensorFlow.js

  npm install @tensorflow/tfjs-node
  

  安裝這個還需要先安裝：npm i node-gyp，驅動C++需要這個包，但是安裝這個包，還需要在電腦上安裝vs2015/vs2017,python2.7等環境，很麻煩；
  還可以如下安裝，過程中還是可能會出現很多問題，坑！還需要翻個牆 _(¦3」∠)_

  npm i node-gyp windows-build-tools -g
  

• （僅限Linux）如果您的系統具有支持CUDA的NVIDIA®GPU，請使用GPU包以獲得更高的性能

  npm install @tensorflow/tfjs-node-gpu
  

4. 什麼是Tensor?

• Tensor 又名：張量
• 張量是向量和矩陣向更高維度的推廣
• 相當於多維數組

代碼演示：

import * as tf from '@tensorflow/tfjs';

// 0維數組
const t0 = tf.tensor(1); 
t0.print();
console.log(t0);

// 1維數組
const t1 = tf.tensor([1,2]);
t1.print();
console.log(t1);

// 2維數組
const t2 = tf.tensor([[1],[3]]);
t2.print();
console.log(t2);

Tensor和機器學習的關係

• 神經網絡的每一層要存儲N維數據
• 需要N層的For循環運算
• Tensor作爲高維數據結構完美解決以上問題

代碼示例：

import * as tf from '@tensorflow/tfjs';

// 傳統的for循環實現
const input = [1,2,3,4];  // 輸入
const w = [[1,2,4,1],[3,1,1,2],[2,3,2,4],[1,3,3,4]]; // 神經元數組，裏面是相應的權重
const output = [0,0,0,0];

for(let i=0; i < w.length; i++){
    for(let j = 0; j<input.length; j++){
        output[i] += input[j]*w[i][j];
    }
}
console.log(output);

// 使用Tensor來實現
tf.tensor(w).dot(tf.tensor(input)).print();

5. 線性迴歸

什麼是線性迴歸？

利用數理統計中迴歸分析，來確定兩種或兩種以上變量間相互依賴的定量關係的一種統計分析方法
例如：身高體重預測

安裝可視化的一個庫：

npm i @tensorflow/tfjs-vis -S

簡易代碼演示：

import * as tfvis from '@tensorflow/tfjs-vis';

window.onload = () =>{
    const xs = [1,2,3,4];
    const ys = [2,4,6,8];

    tfvis.render.scatterplot(
        { name:'線性迴歸訓練集'},
        { values:xs.map((x,i) => ({x,y:ys[i]}))},
        {xAxisDomain: [0,5], yAxisDomain: [0,9]},  // 設置x軸y軸的範圍
    );

}

效果圖：

6. 定義模型結構

單層單個神經元組成的神經網絡

線性迴歸

import * as tf from '@tensorflow/tfjs';
import * as tfvis from '@tensorflow/tfjs-vis';

window.onload = () =>{
    const xs = [1,2,3,4];
    const ys = [2,4,6,8];

    tfvis.render.scatterplot(
        { name:'線性迴歸訓練集'},
        { values:xs.map((x,i) => ({x,y:ys[i]}))},
        {xAxisDomain: [0,5], yAxisDomain: [0,9]},  // 設置x軸y軸的範圍
    );

    const model = tf.sequential();  // 初始化一個模型
    model.add(tf.layers.dense({units:1,inputShape:[1]}));    // 給模型添加層，全連接層；units:神經元的個數，inputShape：輸入形狀 
}

7. 損失函數：均方誤差（MSE）和優化器：隨機梯度下降（SGD）

推薦閱讀：https://developers.google.cn/machine-learning/crash-course/descending-into-ml/training-and-loss?hl=zh-cn&authuser=0
這個是谷歌發佈的機器學習教程；

示例代碼：

model.compile({loss: tf.losses.meanSquaredError, optimizer:tf.train.sgd(0.1)}); // 設置loss:損失函數，均方誤差; 設置優化器：optimizer

8. 訓練模型並可視化訓練過程

• 將訓練數據轉爲Tensor
• 訓練模型
• 使用tfvis 可視化訓練過程

代碼演示：

import * as tf from '@tensorflow/tfjs';
import * as tfvis from '@tensorflow/tfjs-vis';

window.onload = async () =>{
    const xs = [1,2,3,4];
    const ys = [2,4,6,8];

    tfvis.render.scatterplot(
        { name:'線性迴歸訓練集'},
        { values:xs.map((x,i) => ({x,y:ys[i]}))},
        {xAxisDomain: [0,5], yAxisDomain: [0,9]},  // 設置x軸y軸的範圍
    );

    const model = tf.sequential();  // 初始化一個模型
    model.add(tf.layers.dense({units:1,inputShape:[1]}));    // 給模型添加層，全連接層；units:神經元的個數，inputShape：輸入形狀 
    model.compile({loss: tf.losses.meanSquaredError, optimizer:tf.train.sgd(0.1)}); // 設置loss:損失函數，均方誤差; 設置優化器：optimizer

    // 把數據轉換爲Tensor
    const inputs = tf.tensor(xs);
    const labels = tf.tensor(ys);
    await model.fit(inputs,labels, {
        batchSzie:1,  // 每次模型要學習的樣本設置爲：1
        epochs: 100,   // 迭代整個訓練的次數
        callbacks: tfvis.show.fitCallbacks(
            {name:'訓練過程'},
            ['loss'],  // 度量單位，這裏看損失參數
        )
    }); 

}

9. 進行預測

• 將待預測數據轉爲Tensor
• 使用訓練好的模型進行預測
• 將輸出的Tensor轉爲普通數據並顯示

綜合以上，全部代碼如下：

import * as tf from '@tensorflow/tfjs';
import * as tfvis from '@tensorflow/tfjs-vis';

window.onload = async () =>{
    const xs = [1,2,3,4];
    const ys = [2,4,6,8];

    tfvis.render.scatterplot(
        { name:'線性迴歸訓練集'},
        { values:xs.map((x,i) => ({x,y:ys[i]}))},
        {xAxisDomain: [0,5], yAxisDomain: [0,9]},  // 設置x軸y軸的範圍
    );

    const model = tf.sequential();  // 初始化一個模型
    model.add(tf.layers.dense({units:1,inputShape:[1]}));    // 給模型添加層，全連接層；units:神經元的個數，inputShape：輸入形狀 
    model.compile({loss: tf.losses.meanSquaredError, optimizer:tf.train.sgd(0.1)}); // 設置loss:損失函數，均方誤差; 設置優化器：optimizer

    // 把數據轉換爲Tensor
    const inputs = tf.tensor(xs);
    const labels = tf.tensor(ys);
    await model.fit(inputs,labels, {
        batchSzie:1,  // 每次模型要學習的樣本設置爲：1
        epochs: 100,   // 迭代整個訓練的次數
        callbacks: tfvis.show.fitCallbacks(
            {name:'訓練過程'},
            ['loss'],  // 度量單位，這裏看損失參數
        )
    }); 

    const output = model.predict(tf.tensor([5])); // 預測數字5
    console.log(output.dataSync()[0]);  // 輸出：9.982701301574707
}