【前端+AI】介绍除Brain.js之外，还有哪些前端AI库技术可以用于不同场景

最新推荐文章于 2025-04-21 20:03:08 发布

爱上大树的小猪

最新推荐文章于 2025-04-21 20:03:08 发布

阅读量480

点赞数 15

文章标签：前端人工智能 javascript

本文链接：https://blog.youkuaiyun.com/abcd2468sfdsfsd/article/details/145298606

版权

1. TensorFlow.js

TensorFlow.js 是 Google 开发的用于在浏览器和 Node.js 中运行机器学习模型和深度学习神经网络的库。它允许直接在 JavaScript 中训练模型或加载预训练模型。

基础 Demo: 使用预训练模型进行图像分类

<!DOCTYPE html>
<html>
<head>
  <title>TensorFlow.js Image Classification</title>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
</head>
<body>
  <h1>Image Classification with MobileNet</h1>
  <input type="file" id="imageLoader" name="imageLoader"/>
  <img id="preview" style="width:200px;"/>

  <script>
    async function classifyImage() {
      const model = await mobilenet.load();
      console.log('Model loaded');
      
      const imgElement = document.getElementById('preview');
      const result = await model.classify(imgElement);
      console.log(result);
    }

    document.getElementById('imageLoader').addEventListener('change', (e) => {
      const reader = new FileReader();
      reader.onload = function(event) {
        document.getElementById('preview').src = event.target.result;
        classifyImage();
      }
      reader.readAsDataURL(e.target.files[0]);
    });
  </script>
</body>
</html>

2. ml5.js

ml5.js 是一个旨在使机器学习更加易于访问和包容的库，它基于 TensorFlow.js 构建，提供了更高级别的 API 来简化常见的机器学习任务。

基础 Demo: 使用 Posenet 进行姿态估计

<!DOCTYPE html>
<html>
<head>
  <title>Pose Estimation with PoseNet</title>
  <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
  <h1>Pose Estimation with PoseNet</h1>
  <video id="video" width="640" height="480" autoplay></video>
  <canvas id="output" width="640" height="480"></canvas>

  <script>
    let video;
    let poseNet;
    let poses = [];

    function setup() {
      createCanvas(640, 480);
      video = createCapture(VIDEO);
      video.hide();

      poseNet = ml5.poseNet(video, modelReady);
      poseNet.on('pose', gotPoses);
    }

    function modelReady() {
      console.log('Model Loaded');
    }

    function gotPoses(_poses) {
      poses = _poses;
    }

    function draw() {
      image(video, 0, 0);

      if (poses.length > 0) {
        drawKeypoints();
        drawSkeleton();
      }
    }

    function drawKeypoints() {
      for (let i = 0; i < poses.length; i++) {
        let pose = poses[i].pose;
        for (let j = 0; j < pose.keypoints.length; j++) {
          let keypoint = pose.keypoints[j];
          if (keypoint.score > 0.2) {
            fill(255, 0, 0);
            noStroke();
            ellipse(keypoint.position.x, keypoint.position.y, 10, 10);
          }
        }
      }
    }

    function drawSkeleton() {
      for (let i = 0; i < poses.length; i++) {
        let skeleton = poses[i].skeleton;
        for (let j = 0; j < skeleton.length; j++) {
          let partA = skeleton[j][0];
          let partB = skeleton[j][1];
          stroke(255, 0, 0);
          line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
        }
      }
    }
  </script>
</body>
</html>

3. Comlink

Comlink 是一个用于在 Web Workers 和主线程之间透明通信的小型库。虽然不是专门针对 AI 的库，但它可以用来将繁重的计算任务（如 AI 模型推理）移到 Web Worker 中以避免阻塞主线程。

基础 Demo: 使用 Comlink 在 Web Worker 中运行 TensorFlow.js 模型

// worker.js
importScripts('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs');

async function classifyImage(imageData) {
  // Load model and perform classification here...
  return 'classification result';
}

self.onmessage = async ({ data }) => {
  const result = await classifyImage(data);
  self.postMessage(result);
};

// main.js
import { createProxy } from 'comlink';

const worker = new Worker('./worker.js');
const proxy = createProxy(worker);

proxy.classifyImage(imageData).then(result => {
  console.log('Classification Result:', result);
});

4. Synaptic.js

Synaptic.js 是一个用于创建和训练人工神经网络的 JavaScript 库。它适用于构建简单的前馈神经网络。

基础 Demo: 创建和训练一个简单的神经网络

<!DOCTYPE html>
<html>
<head>
  <title>Synaptic.js Neural Network</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/synaptic/1.7.9/synaptic.min.js"></script>
</head>
<body>
  <h1>Simple Neural Network with Synaptic.js</h1>

  <script>
    // 创建神经网络架构
    const layer1 = new synaptic.Layer(2); // 输入层
    const layer2 = new synaptic.Layer(3); // 隐藏层
    const layer3 = new synaptic.Layer(1); // 输出层

    // 连接层
    layer1.project(layer2);
    layer2.project(layer3);

    // 创建网络
    const myNetwork = new synaptic.Network({
      input: layer1,
      hidden: [layer2],
      output: layer3
    });

    // 创建训练器
    const trainer = new synaptic.Trainer(myNetwork);

    // 训练数据集
    const trainingSet = [
      { input: [0, 0], output: [0] },
      { input: [0, 1], output: [1] },
      { input: [1, 0], output: [1] },
      { input: [1, 1], output: [0] }
    ];

    // 训练网络
    trainer.train(trainingSet, {
      rate: .3,
      iterations: 20000,
      error: .005,
      shuffle: true,
      log: 1000,
      cost: synaptic.Trainer.cost.CROSS_ENTROPY
    });

    // 测试网络
    console.log(myNetwork.activate([0, 0])); // 应接近 0
    console.log(myNetwork.activate([0, 1])); // 应接近 1
    console.log(myNetwork.activate([1, 0])); // 应接近 1
    console.log(myNetwork.activate([1, 1])); // 应接近 0
  </script>
</body>
</html>

以上这些库和技术为前端开发者提供了丰富的工具来实现各种AI功能。选择哪个库取决于具体需求、项目复杂度以及对底层技术的掌握程度。