瀏覽器使用synaptic.js訓練簡單的神經網路推薦系統

選自Medium

作者：Mark Feng

機器之心編譯

參與：Jane W、蔣思源

本文利用 synaptic 庫構建簡單的神經網路，並在瀏覽器中實現訓練過程。該神經網路可以和其他框架共同打造一款簡單的推薦系統應用。這種在瀏覽器上訓練的神經網路因為將計算任務分配到各個終端設備，所以伺服器的壓力大大降低。此外，在終端上訓練的神經網路也大大保護了用戶的隱私。機器之心對本文做了簡要介紹，全部代碼請查看 Github 項目地址。

項目地址：https://github.com/markselby9/ml-in-browser

用 JS 進行機器學習？為什麼不呢！

項目概覽

我們將構建一個基於人工神經網路的簡單 Web 應用程序推薦系統。該應用程序包含兩頁，第一頁顯示書籍，第二頁顯示電影。用戶可以在第一頁中選擇他或她感興趣的書籍，當他點擊下一頁按鈕時，我們實際上可以在後台預測他可能會感興趣的電影。在用戶選擇他喜歡的電影之後，我們會給用戶顯示他所選擇的結果，以及我們對他的選擇的預測。一些顯示截屏如下所示：

在第一頁中選擇感興趣的書籍

在第二頁中選擇感興趣的電影

將選擇與預測結果進行比較

這個應用程序使用 Vue.js 和 ElementUI（Vue.js 的 UI 框架）構建，並使用 synaptic 庫構建神經網路。

有什麼優點？

該項目的優勢可以歸結如下：

• 我們將模型訓練工作轉移到前端而不是後端，這不僅降低了伺服器的壓力，同時還將一些計算任務分配給許多客戶端。由於 npm 社區提供許多神經網路相關的 Javascript 庫，這種方法是可行的。

• 我們保護用戶的隱私。用戶的數據並沒有實際被上傳到伺服器，當伺服器更新訓練模型時，他們的數據對於伺服器是匿名的。

神經網路簡要介紹

首先，這裡使用的神經網路是最基礎的人工神經網路，我們決定僅使用用戶的選擇作為輸入和輸出集。本節使用的圖像來自一個介紹神經網路的博客：https://ujjwalkarn.me/2016/08/09/quick-intro-neural-networks/。

本項目涉及的概念包括：人工神經網路、神經元、層次和訓練（反向傳播）。如果你已經熟悉這些概念，你可以跳過此部分。人工神經網路（ANN）是一種由人腦啟發的計算模型。它由神經元組成，神經元是神經網路的基本單元。神經元從其它來源接收輸入，每個輸入分配一個權重，權重根據輸入的重要程度賦予。神經元使用激活函數作用於所有輸入的加權之和，然後給出輸出。

神經元

單層神經網路由幾個神經元組成，如下圖所示。神經網路可以包含或可以不包含多個隱藏層，每對相鄰層之間具有連接，這種連接通常由前面提到的權重表示。

簡單全連接神經網路的層級結構

但是如何通過正確衡量這些權重來架構神經網路呢？這些權重需要訓練，來達到使神經網路正常工作的要求。假設我們有一個數據表，其中包含 1000 對輸入和相應的輸出。我們首先產生 0 和 1 之間的隨機數給出所有權重，然後遍歷所有數據對。在每對輸入和輸出中，我們使用神經網路的激活函數給出計算結果，並將其與實際輸出進行比較。然後我們使用反向傳播演算法重新訓練網路並調整權重。更新反向傳播的權重可以通過隨機梯度下降來完成，這是一種獲得最優權重值的方法。

這裡只是簡要介紹神經網路的原理。更詳細的內容，請參考以下鏈接：

• https://ujjwalkarn.me/2016/08/09/quick-intro-neural-networks/

• https://en.wikipedia.org/wiki/Artificial_neural_network

• https://github.com/cazala/synaptic/wiki/Neural-Networks-101

神經網路在瀏覽器中的實現

最近有一些在瀏覽器中實現神經網路的相關研究，如：

• Deeplearnjs：https://github.com/PAIR-code/deeplearnjs

• ConvnetJS：http://cs.stanford.edu/people/karpathy/convnetjs/

• synaptic.js：http://caza.la/synaptic/

我們在這裡使用 synaptic.js，因為不管對於 node.js 還是瀏覽器，它都是一個無架構的神經網路庫。我們可以通過 github 庫中的 wiki 來檢查文檔：https://github.com/cazala/synaptic/wiki/Architect。我們計劃在瀏覽器中實現所有的神經網路訓練和部分激活函數，伺服器（使用簡單的 node.js 和 express 搭建伺服器框架）只保留包含網路參數的 JSON 文件。synaptic.js 有一個方便的 API 來將神經網路解析成 JSON，並將 JSON 解析為神經網路實例。

應用程序由 Vue.js 和 ElementUI 構建。在創建主應用程序組件的生命周期中，應用程序從伺服器獲取模型的 JSON 文件，並基於 JSON 文件構建神經網路實例。然後該模型展示 20 張含有電影信息的卡片，讓用戶選擇他/她感興趣的項目，用戶完成選擇並單擊下一步後，網路實例將調用激活函數，並給出該用戶可能想要的書籍的預測值（基於 20 種書籍選項）。同時，應用程序還展示另外 20 張包含書籍信息的卡片，讓用戶選擇。用戶點擊提交按鈕後，應用程序會將預測的書籍列表和實際的書籍列表呈現給用戶，並在後台使用新的訓練數據來反向傳播並重新訓練模型。再次訓練後，新的神經網路將被解析為 JSON 對象並發送回伺服器。

下面是代碼。伺服器利用簡單的 node.js 中的 I/O API 和 Express 構建。

app.post("/getNetwork", (req, res) => {

if (req.body) {

console.log(req.body);

readJSONFromFile((network) => { // read local JSON file

res.send({

code: 200,

network,

});

}, (err) => {

console.log(err.toString());

});

}

});

app.post("/setNetwork", (req, res) => {

if (req.body && req.body.networkJSON) {

console.log(req.body);

const { networkJSON } = req.body;

saveJSONToFile(networkJSON, (err) => { // write to local JSON file

if (err) {

res.send({

code: 500,

err

});

} else {

res.send({

code: 200,

});

}

});

} else {

res.send({

code: 406,

})

}

});

app.listen(3000, () => {

console.log("server started");

});

以及在客戶端。在本文中我們不會介紹 DOM 的細節，我們將僅關注組件 app.vue 下的腳本部分。

created() {

// fetch the train model from server

this.content_data = this.shuffle(book_data);

this.loading = true;

axios.post("http://localhost:3000/getNetwork")

.then((response) => {

console.log(response);

this.loading = false;

const networkJSON = response.data.network;

if (networkJSON && Object.keys(networkJSON).length > 0) {

this.$message("Received neural network from server.");

localNetworkInstance = Network.fromJSON(networkJSON);

} else {

this.$message("Created a new network instance.");

// create a new network instance

const inputLayer = new Layer(20);

const hiddenLayer = new Layer(20);

const outputLayer = new Layer(20);

inputLayer.project(hiddenLayer);

hiddenLayer.project(outputLayer);

localNetworkInstance = new Network({

input: inputLayer,

hidden: [hiddenLayer],

output: outputLayer

});

}

})

.catch(function (error) {

this.loading = false;

console.log(error);

});

},

以上是我們在應用程序中創建的生命周期（lifecycle）。它嘗試從「getNetwork」API 獲取 JSON 對象：如果它是網路的可用 JSON 設置，則它將通過 synaptic 的 fromJSON 方法創建本地網路實例；否則，它將創建一個新的網路實例並保存到「localNetworkInstance」變數中。

當用戶在第一頁單擊「下一頁」按鈕後，我們在「onClick」功能中調用激活函數，並將其作為預測結果保存在 Vue 組件的數據中。然後在用戶選擇他/她感興趣的電影之後，調用重新訓練函數。

reTrainByThisUserData() {

// retrain the model by this user"s data

if (localNetworkInstance) {

localNetworkInstance.propagate(learningRate, this.trainingSet.output); // propagate the network

this.$message("Neural Network retrained!");

const successFunc = () => {

console.log("success");

this.$message("Successfully sent the new Neural Network!");

};

const errorFunc = (error) => {

console.log("error", error);

this.$message(error);

};

this.loading = true;

axios.post("http://localhost:3000/setNetwork", {

networkJSON: localNetworkInstance.toJSON()

})

.then((response) => {

this.loading = false;

if (response.data && response.data.code === 200) {

successFunc();

} else {

errorFunc(response.data);

}

})

.catch(function (error) {

errorFunc(error)

});

} else {

this.loading = false;

console.log("network is undefined!");

}

}

重新訓練過程是一個反向傳播過程，利用當前用戶的選擇作為輸入和輸出數據對。用戶對電影的選擇將成為反向傳播的數據。在反向傳播後，神經網路的權重將被調整，神經網路的新數據將被上傳到伺服器並被保存。理想情況下，新網路應該更強大:)

進一步探索

正如很多讀者可能已經意識到的那樣，我們可以利用這個方法做比簡單推薦系統更多的事情。改進此項目的一些可能方法包括：

• 更多關於瀏覽器的信息可以當作輸入，例如用戶在每張卡上花費的時間、用戶的點擊事件和滾動事件等。這些信息可以從前端得到。

• 神經網路可以具有更複雜的架構，但注意不能過擬合。

• 前端項目應該考慮大小。目前，構建的文件大小約為 1Mb，這在 PC 上是可以接受的，但對於移動端網站來說可能太大了。如果要在移動設備上使用該項目，應採取優化措施。

有關此項目的完整代碼，請查閱參考：https://github.com/markselby9/ml-in-browser/tree/feature/Recommendation_system_in_browser_demo。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！