不可置信：前端也能训练神经网络了？

划时代的改变：在笔记本的浏览器上训练神经网络！！！

神经网络初相识

近几年来，AI大模型井喷，先是OpenAI放出了他们的ChatGPT，让人们第一次接触到AIGC(Artifical Intelligence Generated Content)，知道了AI居然可以生成这么多精简又高效的内容，接着是国内外各个互联网大厂开始纷纷推出自己的大模型，比如阿里的通义千问，其Qwen-2.5模型是目前推理能力最强的大模型，字节的豆包，百度的文心一言，微软的Copilot等等，到后面的智能驾驶，甚至自动泊车，不仅可以自动寻找合适的车位，还可以自己帮你停进去，解决了无论是小白还是老司机都头疼的侧方位停车问题，直到如今，各大手机厂商正计划推出大模型内置的旗舰手机，比如Apple海外版内置了ChatGPT的大模型，而这些都是机器学习加神经网络的功劳，促成了AI大模型的生成。

获得神经网络

首先你需要vscode并安装插件Live Server，打开工作区，先创建一个文件夹，并进行初始化

npm init -y

然后在终端输入

npm i brain.js

这里可能需要科学上网

当安装成功时，你就拥有了属于自己的神经网络了

训练神经网络准备事项

首先我们需要一个index.html文件，输入！后再回车就会出现html文件的原始框架 接着我们需要在body标签内引入

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

brain.js内包含了训练所需的神经网络

下面是需要投喂的数据，也就是我们把题目和答案喂给它，让它自己训练

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 
})

这里有几个注意事项，首先是我们的剩余运行内存要在4g以上，否则会训练失败，其次是我们需要耐心等待，配置越好的读者，理论上训练的越快，这里有几个参数，感兴趣的读者可以自行查阅

查看训练结果

// 执行一下
const output = network.run(
  "CSS flex for complex layouts"
);

console.log(output)

我输入CSS flex for complex layouts这段话，并打印出训练后的识别结果是frontend

最后

目前brain.js应该是只能进行文字级别的训练，读者可以根据以上教程自行训练神经网络仅仅只需要一个浏览器和vscode，后续的图片级别的训练，读者可以尽请期待。