掃二維碼與項目經(jīng)理溝通
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
本文利用 synaptic 庫構(gòu)建簡單的神經(jīng)網(wǎng)絡(luò)，并在瀏覽器中實現(xiàn)訓(xùn)練過程。該神經(jīng)網(wǎng)絡(luò)可以和其他框架共同打造一款簡單的推薦系統(tǒng)應(yīng)用。這種在瀏覽器上訓(xùn)練的神經(jīng)網(wǎng)絡(luò)因為將計算任務(wù)分配到各個終端設(shè)備，所以服務(wù)器的壓力大大降低。此外，在終端上訓(xùn)練的神經(jīng)網(wǎng)絡(luò)也大大保護(hù)了用戶的隱私。機(jī)器之心對本文做了簡要介紹，全部代碼請查看 Github 項目地址。
為珠山等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及珠山網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、成都網(wǎng)站設(shè)計、珠山網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
項目地址：https://github.com/markselby9/ml-in-browser
用 JS 進(jìn)行機(jī)器學(xué)習(xí)?為什么不呢!
一、項目概覽
我們將構(gòu)建一個基于人工神經(jīng)網(wǎng)絡(luò)的簡單 Web 應(yīng)用程序推薦系統(tǒng)。該應(yīng)用程序包含兩頁，***頁顯示書籍，第二頁顯示電影。用戶可以在***頁中選擇他或她感興趣的書籍，當(dāng)他點(diǎn)擊下一頁按鈕時，我們實際上可以在后臺預(yù)測他可能會感興趣的電影。在用戶選擇他喜歡的電影之后，我們會給用戶顯示他所選擇的結(jié)果，以及我們對他的選擇的預(yù)測。一些顯示截屏如下所示：
在***頁中選擇感興趣的書籍
在第二頁中選擇感興趣的電影
將選擇與預(yù)測結(jié)果進(jìn)行比較
這個應(yīng)用程序使用 Vue.js 和 ElementUI(Vue.js 的 UI 框架)構(gòu)建，并使用 synaptic 庫構(gòu)建神經(jīng)網(wǎng)絡(luò)。
有什么優(yōu)點(diǎn)?
該項目的優(yōu)勢可以歸結(jié)如下：
二、神經(jīng)網(wǎng)絡(luò)簡要介紹
首先，這里使用的神經(jīng)網(wǎng)絡(luò)是最基礎(chǔ)的人工神經(jīng)網(wǎng)絡(luò)，我們決定僅使用用戶的選擇作為輸入和輸出集。本節(jié)使用的圖像來自一個介紹神經(jīng)網(wǎng)絡(luò)的博客：
https://ujjwalkarn.me/2016/08/09/quick-intro-neural-networks/。
本項目涉及的概念包括：人工神經(jīng)網(wǎng)絡(luò)、神經(jīng)元、層次和訓(xùn)練(反向傳播)。如果你已經(jīng)熟悉這些概念，你可以跳過此部分。人工神經(jīng)網(wǎng)絡(luò)(ANN)是一種由人腦啟發(fā)的計算模型。它由神經(jīng)元組成，神經(jīng)元是神經(jīng)網(wǎng)絡(luò)的基本單元。神經(jīng)元從其它來源接收輸入，每個輸入分配一個權(quán)重，權(quán)重根據(jù)輸入的重要程度賦予。神經(jīng)元使用激活函數(shù)作用于所有輸入的加權(quán)之和，然后給出輸出。
神經(jīng)元
單層神經(jīng)網(wǎng)絡(luò)由幾個神經(jīng)元組成，如下圖所示。神經(jīng)網(wǎng)絡(luò)可以包含或可以不包含多個隱藏層，每對相鄰層之間具有連接，這種連接通常由前面提到的權(quán)重表示。
簡單全連接神經(jīng)網(wǎng)絡(luò)的層級結(jié)構(gòu)
但是如何通過正確衡量這些權(quán)重來架構(gòu)神經(jīng)網(wǎng)絡(luò)呢?這些權(quán)重需要訓(xùn)練，來達(dá)到使神經(jīng)網(wǎng)絡(luò)正常工作的要求。假設(shè)我們有一個數(shù)據(jù)表，其中包含 1000 對輸入和相應(yīng)的輸出。我們首先產(chǎn)生 0 和 1 之間的隨機(jī)數(shù)給出所有權(quán)重，然后遍歷所有數(shù)據(jù)對。在每對輸入和輸出中，我們使用神經(jīng)網(wǎng)絡(luò)的激活函數(shù)給出計算結(jié)果，并將其與實際輸出進(jìn)行比較。然后我們使用反向傳播算法重新訓(xùn)練網(wǎng)絡(luò)并調(diào)整權(quán)重。更新反向傳播的權(quán)重可以通過隨機(jī)梯度下降來完成，這是一種獲得***權(quán)重值的方法。
這里只是簡要介紹神經(jīng)網(wǎng)絡(luò)的原理。更詳細(xì)的內(nèi)容，請參考以下鏈接：
神經(jīng)網(wǎng)絡(luò)在瀏覽器中的實現(xiàn)
最近有一些在瀏覽器中實現(xiàn)神經(jīng)網(wǎng)絡(luò)的相關(guān)研究，如：
我們在這里使用 synaptic.js，因為不管對于 node.js 還是瀏覽器，它都是一個無架構(gòu)的神經(jīng)網(wǎng)絡(luò)庫。我們可以通過 github 庫中的 wiki 來檢查文檔：
https://github.com/cazala/synaptic/wiki/Architect。我們計劃在瀏覽器中實現(xiàn)所有的神經(jīng)網(wǎng)絡(luò)訓(xùn)練和部分激活函數(shù)，服務(wù)器(使用簡單的 node.js 和 express 搭建服務(wù)器框架)只保留包含網(wǎng)絡(luò)參數(shù)的 JSON 文件。synaptic.js 有一個方便的 API 來將神經(jīng)網(wǎng)絡(luò)解析成 JSON，并將 JSON 解析為神經(jīng)網(wǎng)絡(luò)實例。
應(yīng)用程序由 Vue.js 和 ElementUI 構(gòu)建。在創(chuàng)建主應(yīng)用程序組件的生命周期中，應(yīng)用程序從服務(wù)器獲取模型的 JSON 文件，并基于 JSON 文件構(gòu)建神經(jīng)網(wǎng)絡(luò)實例。然后該模型展示 20 張含有電影信息的卡片，讓用戶選擇他/她感興趣的項目，用戶完成選擇并單擊下一步后，網(wǎng)絡(luò)實例將調(diào)用激活函數(shù)，并給出該用戶可能想要的書籍的預(yù)測值(基于 20 種書籍選項)。同時，應(yīng)用程序還展示另外 20 張包含書籍信息的卡片，讓用戶選擇。用戶點(diǎn)擊提交按鈕后，應(yīng)用程序會將預(yù)測的書籍列表和實際的書籍列表呈現(xiàn)給用戶，并在后臺使用新的訓(xùn)練數(shù)據(jù)來反向傳播并重新訓(xùn)練模型。再次訓(xùn)練后，新的神經(jīng)網(wǎng)絡(luò)將被解析為 JSON 對象并發(fā)送回服務(wù)器。
下面是代碼。服務(wù)器利用簡單的 node.js 中的 I/O API 和 Express 構(gòu)建。
- 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 的細(xì)節(jié)，我們將僅關(guān)注組件 app.vue 下的腳本部分。
- created() {
- // fetch the train model from server
- thisthis.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);
- });
- },
以上是我們在應(yīng)用程序中創(chuàng)建的生命周期(lifecycle)。它嘗試從「getNetwork」API 獲取 JSON 對象：如果它是網(wǎng)絡(luò)的可用 JSON 設(shè)置，則它將通過 synaptic 的 fromJSON 方法創(chuàng)建本地網(wǎng)絡(luò)實例;否則，它將創(chuàng)建一個新的網(wǎng)絡(luò)實例并保存到「localNetworkInstance」變量中。
當(dāng)用戶在***頁單擊「下一頁」按鈕后，我們在「onClick」功能中調(diào)用激活函數(shù)，并將其作為預(yù)測結(jié)果保存在 Vue 組件的數(shù)據(jù)中。然后在用戶選擇他/她感興趣的電影之后，調(diào)用重新訓(xùn)練函數(shù)。
- 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!');
- }
- }
重新訓(xùn)練過程是一個反向傳播過程，利用當(dāng)前用戶的選擇作為輸入和輸出數(shù)據(jù)對。用戶對電影的選擇將成為反向傳播的數(shù)據(jù)。在反向傳播后，神經(jīng)網(wǎng)絡(luò)的權(quán)重將被調(diào)整，神經(jīng)網(wǎng)絡(luò)的新數(shù)據(jù)將被上傳到服務(wù)器并被保存。理想情況下，新網(wǎng)絡(luò)應(yīng)該更強(qiáng)大:)
進(jìn)一步探索
正如很多讀者可能已經(jīng)意識到的那樣，我們可以利用這個方法做比簡單推薦系統(tǒng)更多的事情。改進(jìn)此項目的一些可能方法包括：
有關(guān)此項目的完整代碼，請查閱參考：
https://github.com/markselby9/ml-in-browser/tree/feature/Recommendation_system_in_browser_demo。
原文：https://medium.com/@markselby9/neural-network-in-your-browser-3e6fc91709ca
【本文是專欄機(jī)構(gòu)“機(jī)器之心”的原創(chuàng)譯文，微信公眾號“機(jī)器之心( id: almosthuman2014)”】
我們在微信上24小時期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
微信二維碼
微信二維碼
移動版官網(wǎng)