近两年机器学习火的一塌糊涂, 智能两个字随处可见. 今天分享的内容是我们如何在浏览器端实现机器学习, 通过机器学习增强用户体验.
首先通过一个小示例来体验一下 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).
图
图
图
图
图
图
来源: http://www.jianshu.com/p/decbabe10793