新纪元AI + 前端,实战brain.js库

2,624 阅读5分钟

前端“已死”?随着AI技术的发展,前端开发如果依然局限于传统的页面展示和交互逻辑,不是向着更加智能化、个性化的方向发展,可能会变得很局限。现如今,AI工程化成为了一种趋势,尤其是在前端领域,各种轻量级的AI工具和框架层出不穷,为开发者提供了更多的可能性。

image.png

测一下电脑CPU运行快不快,搞了下端模型,使用brain.js库,通过喂给模型正确的数据,train并且调试,实现推理是否是前端或是后端的能力,将了解到如何准备数据、初始化神经网络、训练模型以及进行推理,最终实现一个实用的文本分类器。收藏等于学会~~~

前端未来的交汇点在哪

之前百度大会有提到智能穿戴,百度公司发布了其最新的创新产品——小度AI眼镜** 。多少说明前端需要端模型的未来 从智能推荐到语音识别,再到图像处理,端模型的应用场景日益丰富。通过在手机、电脑乃至可穿戴设备上部署小型化、高效的AI模型。前端开发才能得到扩展

brain.js 正是这一趋势下的佼佼者,它不仅支持基本的神经网络功能,还具备良好的性能表现,能够在资源受限的设备上高效运行。

什么是brain.js

  • brain.js:浏览器端的神经网络库 brain.js 是一款轻量级的JavaScript库,专为在浏览器端和Node.js环境中运行神经网络而设计。它提供了一套简单易用的API,使开发者能够轻松构建、训练和部署神经网络模型,无需深入了解复杂的深度学习理论。这为前端开发者开辟了一条通向AI世界的便捷之路。

  • 开放平台与社区的力量

    • OpenAI 大模型:虽然OpenAI的大模型主要应用于后端服务器,但它们为前端提供了强大的API接口,使得前端应用能够利用这些先进的模型来增强自身的智能特性。
    • ModelScope 魔搭社区:这是一个面向AI模型的开源社区,提供了丰富的预训练模型资源。前端开发者可以通过魔搭社区获取到最新的模型,并将其集成到自己的应用中,加速产品的智能化升级。

之前写过openai大模型运用文章,里面讲了直接调用API接口就能实现简单开发Openai接口编程

这里也附带魔搭社区链接有篇文章简单介绍“魔搭体验LLM大模型”,希望对你有帮助

为了更好地理解brain.js的使用方式,我们可以通过一个具体的例子来说明——构建一个能够区分前端与后端任务的文本分类器。

实战:构建一个前端/后端任务分类器

先安装

  • 在node.js环境下,要开始使用Brain.js,你可以通过npm安装:
npm install brain.js

或者通过CDN在浏览器中引入:

<script src="//unpkg.com/brain.js"></script>

开始写代码:

  1. 准备数据

      投喂数据进行训练。我们需要准备一些示例数据来训练模型。这里数据将以JSON数组的形式存在,每个元素包含一个任务描述(input)及其对应的类别(output)。

    
    const data = [
      { input: "implementing a caching mechanism improves performance", output: "backend" },
      { input: "hover effects on buttons", output: "frontend" },
      // 更多数据...
    ];
    

数据数据比较多,文本末尾附带我输入的数据和完整代码~~

  1. 实例化模型

    接下来,我们需要创建一个神经网络模型。这里我们选择使用LSTM(长短期记忆网络),因为它擅长处理文本等序列数据。

    //导入库,文末的代码是调用brain.js文件
    const brain = require('brain.js');
    // 初始化神经网络
    const network = new brain.recurrent.LSTM();
    
  2. train训练模型

    有了数据和模型之后,下一步就是训练模型了。在这个过程中,我们可以调整一些参数,比如迭代次数、是否显示训练日志等,以优化训练效果。如果电脑性能比较差可以少迭代几次

    network.train(data, {
      iterations: 2000, // 迭代次数
      log: true, // 是否打印训练日志
      logPeriod: 100 // 日志打印频率
    });
    
  3. 使用模型进行推理

    训练完成后,我们可以使用模型来进行推理,即对新的输入数据做出预测。

    const output = network.run("CSS flex for complex layouts");
    console.log(output); // 预期输出:"frontend"
    
  4. 结果评估

    最后,让我们通过一个例子来检验模型的表现。当我们向模型输入“CSS flex for complex layouts”时,如果模型返回的结果是“frontend”,那么我们就知道模型成功地学会了如何区分前端和后端的任务描述。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI 端模型- 前端开发的时代</title>
</head>
<body>
<script src="./brain.js"></script>
<script>
// json 数组  
// 输入  input
// 喂给大模型的数据 
const data = [
  { "input": "implementing a caching mechanism improves performance", "output": "backend" },
  { "input": "hover effects on buttons", "output": "frontend" },
  { "input": "optimizing SQL queries", "output": "backend" },
  { "input": "using flexbox for layout", "output": "frontend" },
  { "input": "setting up a CI/CD pipeline", "output": "backend" },
  { "input": "SVG animations for interactive graphics", "output": "frontend" },
  { "input": "authentication using OAuth", "output": "backend" },
  { "input": "responsive images for different screen sizes", "output": "frontend" },
  { "input": "creating REST API endpoints", "output": "backend" },
  { "input": "CSS grid for complex layouts", "output": "frontend" },
  { "input": "database normalization for efficiency", "output": "backend" },
  { "input": "custom form validation", "output": "frontend" },
  { "input": "implementing web sockets for real-time communication", "output": "backend" },
  { "input": "parallax scrolling effect", "output": "frontend" },
  { "input": "securely storing user passwords", "output": "backend" },
  { "input": "creating a theme switcher (dark/light mode)", "output": "frontend" },
  { "input": "load balancing for high traffic", "output": "backend" },
  { "input": "accessibility features for disabled users", "output": "frontend" },
  { "input": "scalable architecture for growing user base", "output": "backend" }
];
// 初始化一个神经网络
const network = new brain.recurrent.LSTM();
// 训练 花蛮长时间
network.train(data, {
  iterations: 2000,
  log: true,
  logPeriod: 100 
})
// 执行一下
const output = network.run(
  "CSS  flex for complex  layout"
);

console.log(output)

</script>
</body>
</html>

结语

通过上述过程,我们不仅构建了一个简单的文本分类器,更重要的是,我们看到了前端开发与AI技术结合的可能性。随着技术的进步,未来的前端开发将会更加智能化、个性化,为用户提供更好的体验。希望这篇文章能激发你对前端与AI结合的兴趣,鼓励你尝试更多创新的想法和技术。