如何在浏览器使用synaptic.js训练简单的神经网络推荐系统

本文利用 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 构建。

 
 
 
 
    
  
  
  
  
  1. app.post('/getNetwork', (req, res) => {
    2. 
  
  
  
  
  2.     if (req.body) {
    3. 
  
  
  
  
  3.         console.log(req.body);
    4. 
  
  
  
  
  4.         readJSONFromFile((network) => { // read local JSON file
    5. 
  
  
  
  
  5.             res.send({
    6. 
  
  
  
  
  6.                 code: 200,
    7. 
  
  
  
  
  7.                 network,
    8. 
  
  
  
  
  8.             });
    9. 
  
  
  
  
  9.         }, (err) => {
    10. 
  
  
  
  
  10.             console.log(err.toString());
    11. 
  
  
  
  
  11.         });
    12. 
  
  
  
  
  12.     }
    13. 
  
  
  
  
  13. });
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. app.post('/setNetwork', (req, res) => {
    16. 
  
  
  
  
  16.     if (req.body && req.body.networkJSON) {
    17. 
  
  
  
  
  17.         console.log(req.body);
    18. 
  
  
  
  
  18.         const { networkJSON } = req.body;
    19. 
  
  
  
  
  19.         saveJSONToFile(networkJSON, (err) => { // write to local JSON file
    20. 
  
  
  
  
  20.             if (err) {
    21. 
  
  
  
  
  21.                 res.send({
    22. 
  
  
  
  
  22.                     code: 500,
    23. 
  
  
  
  
  23.                     err
    24. 
  
  
  
  
  24.                 });
    25. 
  
  
  
  
  25.             } else {
    26. 
  
  
  
  
  26.                 res.send({
    27. 
  
  
  
  
  27.                     code: 200,
    28. 
  
  
  
  
  28.                 });
    29. 
  
  
  
  
  29.             }
    30. 
  
  
  
  
  30.         });
    31. 
  
  
  
  
  31.     } else {
    32. 
  
  
  
  
  32.         res.send({
    33. 
  
  
  
  
  33.             code: 406,
    34. 
  
  
  
  
  34.         })
    35. 
  
  
  
  
  35.     }
    36. 
  
  
  
  
  36. });
    37. 
  
  
  
  
  37. app.listen(3000, () => {
    38. 
  
  
  
  
  38.     console.log('server started');
    39. 
  
  
  
  
  39. });
    40.

以及在客户端。在本文中我们不会介绍 DOM 的细节，我们将仅关注组件 app.vue 下的脚本部分。

 
 
 
 
    
  
  
  
  
  1. created() {
    2. 
  
  
  
  
  2.             // fetch the train model from server
    3. 
  
  
  
  
  3.             thisthis.content_data = this.shuffle(book_data);
    4. 
  
  
  
  
  4.             this.loading = true;
    5. 
  
  
  
  
  5.             axios.post('http://localhost:3000/getNetwork')
    6. 
  
  
  
  
  6.                 .then((response) => {
    7. 
  
  
  
  
  7.                     console.log(response);
    8. 
  
  
  
  
  8.                     this.loading = false;
    9. 
  
  
  
  
  9.                     const networkJSON = response.data.network;
    10. 
  
  
  
  
  10.                     if (networkJSON && Object.keys(networkJSON).length > 0) {
    11. 
  
  
  
  
  11.                         this.$message('Received neural network from server.');
    12. 
  
  
  
  
  12.                         localNetworkInstance = Network.fromJSON(networkJSON);
    13. 
  
  
  
  
  13.                     } else {
    14. 
  
  
  
  
  14.                         this.$message('Created a new network instance.');
    15. 
  
  
  
  
  15.                         // create a new network instance
    16. 
  
  
  
  
  16.                         const inputLayer = new Layer(20);
    17. 
  
  
  
  
  17.                         const hiddenLayer = new Layer(20);
    18. 
  
  
  
  
  18.                         const outputLayer = new Layer(20);
    19. 
  
  
  
  
  19. 
  
  
  
  
  20.                         inputLayer.project(hiddenLayer);
    21. 
  
  
  
  
  21.                         hiddenLayer.project(outputLayer);
    22. 
  
  
  
  
  22. 
  
  
  
  
  23.                         localNetworkInstance = new Network({
    24. 
  
  
  
  
  24.                             input: inputLayer,
    25. 
  
  
  
  
  25.                             hidden: [hiddenLayer],
    26. 
  
  
  
  
  26.                             output: outputLayer
    27. 
  
  
  
  
  27.                         });
    28. 
  
  
  
  
  28.                     }
    29. 
  
  
  
  
  29.                 })
    30. 
  
  
  
  
  30.                 .catch(function (error) {
    31. 
  
  
  
  
  31.                     this.loading = false;
    32. 
  
  
  
  
  32.                     console.log(error);
    33. 
  
  
  
  
  33.                 });
    34. 
  
  
  
  
  34.         },
    35.

以上是我们在应用程序中创建的生命周期(lifecycle)。它尝试从「getNetwork」API 获取 JSON 对象：如果它是网络的可用 JSON 设置，则它将通过 synaptic 的 fromJSON 方法创建本地网络实例;否则，它将创建一个新的网络实例并保存到「localNetworkInstance」变量中。

当用户在***页单击「下一页」按钮后，我们在「onClick」功能中调用激活函数，并将其作为预测结果保存在 Vue 组件的数据中。然后在用户选择他/她感兴趣的电影之后，调用重新训练函数。

 
 
 
 
    
  
  
  
  
  1. reTrainByThisUserData() {
    2. 
  
  
  
  
  2.     // retrain the model by this user's data
    3. 
  
  
  
  
  3.     if (localNetworkInstance) {
    4. 
  
  
  
  
  4.         localNetworkInstance.propagate(learningRate, this.trainingSet.output);   // propagate the network
    5. 
  
  
  
  
  5. 
  
  
  
  
  6.         this.$message('Neural Network retrained!');
    7. 
  
  
  
  
  7. 
  
  
  
  
  8.         const successFunc = () => {
    9. 
  
  
  
  
  9.             console.log('success');
    10. 
  
  
  
  
  10.             this.$message('Successfully sent the new Neural Network!');
    11. 
  
  
  
  
  11.         };
    12. 
  
  
  
  
  12.         const errorFunc = (error) => {
    13. 
  
  
  
  
  13.             console.log('error', error);
    14. 
  
  
  
  
  14.             this.$message(error);
    15. 
  
  
  
  
  15.         };
    16. 
  
  
  
  
  16. 
  
  
  
  
  17.         this.loading = true;
    18. 
  
  
  
  
  18.         axios.post('http://localhost:3000/setNetwork', {
    19. 
  
  
  
  
  19.             networkJSON: localNetworkInstance.toJSON()
    20. 
  
  
  
  
  20.         })
    21. 
  
  
  
  
  21.             .then((response) => {
    22. 
  
  
  
  
  22.                 this.loading = false;
    23. 
  
  
  
  
  23.                 if (response.data && response.data.code === 200) {
    24. 
  
  
  
  
  24.                     successFunc();
    25. 
  
  
  
  
  25.                 } else {
    26. 
  
  
  
  
  26.                     errorFunc(response.data);
    27. 
  
  
  
  
  27.                 }
    28. 
  
  
  
  
  28.             })
    29. 
  
  
  
  
  29.             .catch(function (error) {
    30. 
  
  
  
  
  30.                 errorFunc(error)
    31. 
  
  
  
  
  31.             });
    32. 
  
  
  
  
  32.     } else {
    33. 
  
  
  
  
  33.         this.loading = false;
    34. 
  
  
  
  
  34.         console.log('network is undefined!');
    35. 
  
  
  
  
  35.     }
    36. 
  
  
  
  
  36. }
    37.

重新训练过程是一个反向传播过程，利用当前用户的选择作为输入和输出数据对。用户对电影的选择将成为反向传播的数据。在反向传播后，神经网络的权重将被调整，神经网络的新数据将被上传到服务器并被保存。理想情况下，新网络应该更强大:)

进一步探索

正如很多读者可能已经意识到的那样，我们可以利用这个方法做比简单推荐系统更多的事情。改进此项目的一些可能方法包括：

  • 更多关于浏览器的信息可以当作输入，例如用户在每张卡上花费的时间、用户的点击事件和滚动事件等。这些信息可以从前端得到。
  • 神经网络可以具有更复杂的架构，但注意不能过拟合。
  • 前端项目应该考虑大小。目前，构建的文件大小约为 1Mb，这在 PC 上是可以接受的，但对于移动端网站来说可能太大了。如果要在移动设备上使用该项目，应采取优化措施。

有关此项目的完整代码，请查阅参考：

https://github.com/markselby9/ml-in-browser/tree/feature/Recommendation_system_in_browser_demo。

原文：https://medium.com/@markselby9/neural-network-in-your-browser-3e6fc91709ca

【本文是专栏机构“机器之心”的原创译文，微信公众号“机器之心( id: almosthuman2014)”】

本文标题：如何在浏览器使用synaptic.js训练简单的神经网络推荐系统
转载来于：http://www.shufengxianlan.com/qtweb/news36/534886.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

微信公众号知识

分类信息网站

芦山网站建设　　 　网站营销推广　　 　成都网站优化　　 　网站托管运营　　 　成都网站设计　　 　南充主机托管　　 　手机网站制作设计　　 　双流做网站　　 　绵竹做网站　　 　绵阳服务器托管　　 　堡垒主机　　 　深圳纱窗安装　　 　兴久牧业　　 　成都网络营销　　 　小程序开发　　 　四川白乌鱼　　 　红光高低压开关厂　　 　联通机柜租用　　 　成都钢筋机械设备　　 　成都app软件开发公司