美文网首页让前端飞程序员Web前端之路
浏览器端机器学习—brain.js

浏览器端机器学习—brain.js

作者: zidea | 来源:发表于2018-11-20 18:26 被阅读73次

    近两年机器学习火的一塌糊涂,智能两个字随处可见。今天分享的内容是我们如何在浏览器端实现机器学习,通过机器学习增强用户体验。

    首先通过一个小示例来体验一下 js 机器学习库 brain.js,我们让 brain.js 读取数据模型(体重和身高),学习如何鉴别是大人还是小孩。可以标签来作为分类的依据进行分类。

    1. 使用 npm init 创建一个项目

    2. npm install brain.js --save(注意这里是 brain.js 而不是 brain)。大家容易忽略 js 后缀。

    3. 接下来创建一个 app.js 。内容如下图下。

    是不是很简单。train 方法接受数组作为参数,数组中每个对象都有一个 input 属性和一个 output 属性,input 中放用于决策的数据模型,output 中放置对应数据模型的结果,brain.js 通过学习这些数据,可以推测出某个数据模型的结果的概率。

    输出和输入

    看一下面数据 input[体重,身高] ,这里用身高和体重作为标签。output [1 表示成人,0 表示儿童]

    然后通过喂数据来进行学习,经过一段学习后。我们用测试数据[65,172],检测一下训练的结果吧。看看这个数据的结果是儿童还是成人。

    从结果来看数据显示可能是成人的可能性较大。不算精确。简单地了解一下如何使用 brain.js 实现浏览器端机器学习。就结合实际来一个实例。通过颜色的r,g,b值来判断颜色的明暗。首先设计一下数据模型,让输入为 input(r,g,b)(红,绿,蓝)输出是 dark:1 或 light:1)明暗。

    接下来用准备好的数据来喂机器学习,再用一个输出为 light:1 的测试数据,来让机器学习进行推测。看看他的学习成果。

    学习的效果还不错吧,基本达到我们的预期。

    好我们现在在项目根目录下,创建名称为 index.html 的文件,还需要引入浏览器端的 brain.js 如图,一个颜色选择器,一个蓝色为背景,白色文字的标题。

    还需要做一些准备工作,getRgb 方法将颜色值转为一个 {r, g, b} 的对象。

    测试一下创建好的方法。

    先初始化一个机器学习的实例,再提供机器学习的训练的数据,然后让机器学习读取标题的背景色,然后便可判断背景色是明还是暗。

    测试一下,当背景色为下图中的颜色,看一下输出为 dark 0.9 ,推测的还是很准的。

    需要再适当一下代码,如图,这次此判断结果的值为 dark 或 light,然后通过输出结果值来来决定文字显示为白色(dark)还是显示为黑色(light)。

    相关文章

      网友评论

        本文标题:浏览器端机器学习—brain.js

        本文链接:https://www.haomeiwen.com/subject/yhwgfqtx.html