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