利用tensorflow.js實現JS中的AI

利用tensorflow.js實現JS中的AI(譯)

來自https://javascriptweekly.com/link/57596/a956973cda

很是感謝Seth Juarez提供的這篇文章。

這不是一篇關於數學的文章，也不是一篇闡述邪惡的有知覺的人工智能最終會殺死咱們全部人文章（我是不會訂閱這類的文章）。親愛的讀者們，這篇文章的目的是帶你走上一條別人未走過的路，那即是講述關於軟件工程的過程以及AI和JS目前的樣子。 每當咱們試圖建立軟件時，咱們都會提出無數個問題並編寫代碼來解決問題(包括全部的邊界狀況)。考慮這樣一種狀況，你的任務是編寫一個函數，該函數給定一個由整數組成的二維數組，要求您返回它看上去最類似的數字。

準確的說，你正在編寫一個識別數字的函數，獲得的數組看上去是下面這樣的（在這種狀況下你應該返回5）。

咱們爲了完成這種任務，不得不編寫蹩腳代碼——咱們知道這種代碼太過鬆散，一旦將其投入生產，咱們就會以爲須要重構(或作點什麼)。

你和我都會發現代碼中有充斥着大量的if判斷和for循環語句，可是咱們又必須使用它們，來建立必要的程序。

然而，面對這類任務，最佳選擇即是機器學習（人工智能的一個子領域）。機器學習的優點在於咱們不須要爲了解決問題考慮一系列的步驟，而是給予機器學習算法一些正確的例子，以下圖。它便會給出正確的步驟。

過程

雖然本文的主要目的不是去研究這些算法如何實現，可是在實際軟件程序中，瞭解其運用的基本過程和主要輸出是很是重要的（本文以JS爲例）。數據科學家常常會使用如下幾個步驟：

1. 定義問題（識別數字）；
2. 給出數據（MNIST數據集);
3. 建立最優模型（實際功能的抽象）；
4. 模型運用

做爲開發人員，咱們的工做介於步驟3和步驟4之間。

模型

一般，這些模型利用機器學習框架，以Python語言進行建立。這個過程須要很長的時間，而且依賴大量的數據。這是很是容易讓人乏味和感受沮喪的。然而，一旦完成了冗長和使人沮喪的部分，就會有一個實際文件輸出來表示模型。你應該把它看做是你項目的一項資產。在使用TensorFlow的狀況下，輸出一般是一個protobuf文件。

TensorFlow.js

這裏，我要提醒你們，我並不認爲我本身是一個JS專家，因此，若是我錯了或有更好的解決方案，請務必告知我。這部份內容重點是向你展現如何在JavaScript應用程序中使用模型，咱們會用到TensorFlow.js，它被宣傳爲訓練和部署機器學習模型的框架，而咱們將重點關注部署部分，由於一般大多數模型都是由使用全強度TensorFlow python包的數據科學家建立的。我認可，在某些狀況下，在客戶端進行遷移學習聽起來很是有趣。

建立模型並將它轉換到TensorFlow.js的過程仍是很是簡單的（這裏不作介紹，但它確實是一個頗有趣的練習，建議有機會你仍是徹底能夠作一下），參考(github.com/sethjuarez/…)

如今，咱們開始實際例子：

在這個狀況下，我決定使用vue.js。由於我有一些框架方面的經驗，並且已經有一個(組件)[codepen.io/getflourish…]完成了大部分的畫布繪製工做。

code

使用實際模型時，有兩個重要的部分：

1. 加載模型
2. 調用模型

讓咱們依次看一下：

加載模塊

建立一個vue組件看上去時一個不錯的idea，由於我能夠爲整個組件只加載一次模型，而且把它保留在內存中。

mounted: async function () {
        ... other things...
        // load model
        const MODEL = 'model/tensorflowjs_model.pb';
        const WEIGHTS = 'model/weights_manifest.json';
        this.model = await tf.loadFrozenModel(MODEL, WEIGHTS);
    }
複製代碼

我認爲我能夠選擇vue生命週期中的另一個鉤子，可是目前mounted看上去不錯。一旦this.model被掛載，不管何時Predict按鈕被點擊，這個模型都會被使用。（另一個有趣的現象是鼠標擡起時，模型也會使用，進行預測）。

調用模塊

如今咱們來看咱們如何來調用模型的例子：

predict: async function() {
            const digit = this.getDigit();
            const d = tf.tensor1d(digit).reshape([1, digit.length]);
            this.probabilities = await this.model.execute({'x': d}).reshape([10]).data();
            this.prediction = this.probabilities.indexOf(Math.max(...this.probabilities));
        }
複製代碼

getDigit()方法獲取手繪的圖像，作兩件事：

1. 縮小到28*28的圖像
2. 獲取數字類型的數組，將其輸入進模型

關鍵調用是this.model.execute(…)。這是咱們實際傳遞數組並使模型運轉的地方。 模型輸出的結果是一個長度爲10，包含每一個數字出現機率的數組。換句話說，在數組索引爲0是它認爲數字爲0的機率(以此類推)。

思考

雖然本文並無詳細介紹如何建立這個應用程序，但它的目的是讓您瞭解如何使用TensorFlow.js在現代JavaScript中使用機器學習模型。

想進一步瞭解TensorFlow.js，移步[github.com/frontend9/f…]

瞭解更多，移步github倉庫[github.com/sethjuarez/…]