一个js库带你看懂AI+前端的发展方向
前言
随着技术的发展,人工智能正逐渐渗透到我们生活的方方面面,从前端开发到后端服务,从数据分析到用户体验设计。特别是在前端领域,AI 的应用正成为一个不可忽视的趋势。本文将探讨 AI 在前端领域的应用,并重点介绍一个在浏览器端即可运行的神经网络库——Brain.js。
Brain.js:浏览器端的神经网络库
Brain.js 是一个专为前端开发者设计的 JavaScript 库,它允许开发者在浏览器或 Node.js 环境中轻松创建和训练神经网络。以下是 Brain.js 的几个核心能力:
- 投喂数据训练
- Brain.js 支持以 JSON 数组的形式投喂数据,这使得准备训练数据变得非常简单。例如,可以准备一个包含输入和期望输出的数据集,用于训练神经网络。
const trainingData = [
{ input: [0, 0], output: { zero: 1 } },
{ input: [0, 1], output: { one: 1 } },
{ input: [1, 0], output: { one: 1 } },
{ input: [1, 1], output: { zero: 1 } }
];
- 实例化神经网络
- Brain.js 提供了多种类型的神经网络,包括前馈神经网络(Feedforward Neural Networks)和循环神经网络(Recurrent Neural Networks)。对于文本处理和序列数据,推荐使用
brain.recurrent.LSTM()
,这是一种长短期记忆网络,特别适合处理时间序列数据。
- 训练模型
- 训练神经网络非常简单,只需调用
train
方法并传入训练数据即可。Brain.js 会自动调整网络参数,使模型逐步学会从输入数据中提取特征并作出准确的预测。
- 推理能力
- 训练完成后,可以使用
run
方法对新的输入数据进行推理。例如,在 NLP 场景中,可以使用训练好的模型对用户输入的文本进行情感分析或分类。
- 结果分类
- Brain.js 支持多分类任务,可以将输入数据归类到多个预定义的类别中。这对于内容推荐、垃圾邮件过滤等应用场景非常有用。
开始使用 Brain.js:
要开始使用 Brain.js,首先需要安装它。如果你是在 Node.js 环境下工作,可以通过 npm 安装:
npm install brain.js
如果你在浏览器中使用,可以直接通过 CDN 引入:
<script src="https://cdn.jsdelivr.net/npm/brain.js"></script>
然后可以按照官方文档提供的示例代码来构建你的第一个神经网络模型。
示例1:
// 创建一个神经网络
const network = new brain.NeuralNetwork();
// 用 4 个输入对象训练网络
network.train([
{ input: [0, 0], output: { zero: 1 } },
{ input: [0, 1], output: { one: 1 } },
{ input: [1, 0], output: { one: 1 } },
{ input: [1, 1], output: { zero: 1 } }
]);
// [1, 0] 的预期输出是什么?
const result = network.run([1, 0]);
// 显示 "zero" 和 "one" 的概率
console.log(result["one"] + " " + result["zero"]);
- 使用
new brain.NeuralNetwork()
创建一个神经网络。 - 使用
network.train([examples])
训练网络。 examples
表示 4 个输入值及其对应的输出值。- 使用
network.run([1, 0])
询问 "[1, 0] 的可能输出是什么?"
网络的输出是:
- one: 93%(接近 1)
- zero: 6%(接近 0)
使用 CSS,颜色可以通过 RGB 设置:
示例2:
颜色 | RGB |
---|---|
黑色 | RGB(0,0,0) |
黄色 | RGB(255,255,0) |
红色 | RGB(255,0,0) |
白色 | RGB(255,255,255) |
浅灰色 | RGB(192,192,192) |
深灰色 | RGB(65,65,65) |
下面的代码展示了如何预测颜色的深浅:
// 创建一个神经网络
const net = new brain.NeuralNetwork();
// 用 4 个输入对象训练网络
net.train([
// 白色 RGB(255, 255, 255)
{ input: [255 / 255, 255 / 255, 255 / 255], output: { light: 1 } },
// 浅灰色 (192, 192, 192)
{ input: [192 / 255, 192 / 255, 192 / 255], output: { light: 1 } },
// 深灰色 (64, 64, 64)
{ input: [65 / 255, 65 / 255, 65 / 255], output: { dark: 1 } },
// 黑色 (0, 0, 0)
{ input: [0, 0, 0], output: { dark: 1 } }
]);
// 深蓝色 (0, 0, 128) 的预期输出是什么?
let result = net.run([0, 0, 128 / 255]);
// 显示 "dark" 和 "light" 的概率
console.log(result["dark"] + " " + result["light"]);
- 使用
new brain.NeuralNetwork()
创建一个神经网络。 - 使用
network.train([examples])
训练网络。 examples
表示 4 个输入值及其对应的输出值。- 使用
network.run([0, 0, 128 / 255])
询问 "深蓝色的可能输出是什么?"
网络的输出是:
- Dark: 95%
- Light: 4%
示例3:
下面这个例子演示如何使用 Brain.js 创建并训练一个基本的神经网络,该网络学习从摄氏度转换为华氏度:
const brain = require('brain.js');
// 创建一个 LSTM 神经网络实例
const net = new brain.recurrent.LSTM();
// 准备训练数据
const trainingData = [
{ input: '0', output: '32' }, // 0°C -> 32°F
{ input: '100', output: '212' } // 100°C -> 212°F
];
// 训练神经网络
net.train(trainingData, {
iterations: 20000, // 训练迭代次数
log: (stats) => console.log(`Training progress: ${stats.iterations}/${stats.error}`) // 训练日志
});
// 使用训练好的模型进行推理
const output = net.run('50'); // 预测 50°C 对应的华氏温度
console.log(output); // 输出结果接近 "122"
其他用于创建神经网络的js库
TensorFlow.js、Synaptic.js、ConvNetJS、Keras.js、Deeplearn.js (现更名为 TensorFlow.js)、 ML.js等。
这些js库作为在浏览器端即可运行的神经网络库,为前端开发者提供了强大的工具,使得我们能够在不深入数学和机器学习理论的前提下,快速实现和应用机器学习功能。无论是简单的分类任务、预测建模,还是更复杂的自然语言处理和图像识别,它们都能帮助你轻松应对。
结语
你发现了吗,通过brain.js,你也可以轻松地将机器学习功能集成到你的项目中。未来,随着模型的小型化、边缘计算的发展以及多模态融合的推进,AI + 前端将更加普及和成熟。
点个赞再走吧~
作者:PW
来源:juejin.cn/post/7438876948762066980
来源:juejin.cn/post/7438876948762066980