前端使用TensorFlow.js reactjs调用本地模型实现图像、文本、音频/声音、视频相关识别

前端能做的

类型	可做任务	示例模型	前端场景
图像	分类、检测、分割、姿态识别、手势识别、风格迁移	mobilenet, coco-ssd, bodypix, handpose, style-transfer	商品识别、健身、AR、艺术滤镜
文本	情感分析、分类、相似度、实体识别	toxicity, universal-sentence-encoder	评论分析、搜索、问答
音频	语音识别、音频分类	speech-commands	语音控制、事件触发
视频	实时姿态/手势识别	pose-detection, handpose	健身动作捕捉、游戏交互
综合	自定义迁移学习、生成式 AI	mobilenet+自训练、pix2pix	行业识别、内容生成

TensorFlow.js 是什么？

TensorFlow.js 是 Google 官方推出的前端 + 后端通用的机器学习框架。一句话总结：你可以用 JavaScript 在浏览器或 Node.js 里运行 AI（深度学习模型）。

完全不需要后台服务器，也不需要 Python。
不上传数据，隐私更安全。
Web 端性能高，运行在 GPU/WebGL 上。

TensorFlow.js 有什么用？（真实场景）

应用类型	描述
人脸表情识别	判断是否开心、生气、惊讶
图片识别	判断图片里是什么（猫/狗/人/车等）
摄像头识别	实时识别人脸、物体
手势识别	识别比心、点赞等动作
声音识别	判断"上"、"下"、"停"等指令
文本情绪分析	判断文字是正面还是负面
物体跟踪	行为识别、目标跟踪

TensorFlow.js 能做什么？（官方模型一览）

模型	用途
mobilenet	图片分类（物体识别）
coco-ssd	检测多个物体并框出
face-api / blazeface	人脸检测
face-expression	表情识别
handpose	手势识别
posenet / movenet	人体姿态
speech-commands	语音命令识别
toxicity	文字攻击性检测
qna	问答模型
universal-sentence-encoder	文本向量

TensorFlow.js 如何使用

安装 npm install @tensorflow/tfjs

示例 1：识别图片内容

复制代码

import React, { useState } from "react";
import * as tf from "@tensorflow/tfjs";
import * as mobilenet from "@tensorflow-models/mobilenet";

export default function App() {
  const [result, setResult] = useState("");
  const [model, setModel] = useState<any>(null);

  // 加载模型
  React.useEffect(() => {
    mobilenet.load().then(setModel);
  }, []);

  const handleImage = async (e: any) => {
    const file = e.target.files[0];
    if (!file || !model) return;

    const img = document.createElement("img");
    img.src = URL.createObjectURL(file);
    await img.decode();

    const predictions = await model.classify(img);

    setResult(
      predictions.map((p: any) => `${p.className} (${(p.probability * 100).toFixed(2)}%)`).join("\n")
    );
  };

  return (
    <div>
      <h2>图片识别 Demo</h2>
      <input type="file" onChange={handleImage} />
      <pre>{result}</pre>
    </div>
  );
}

可识别猫、狗、香蕉、键盘、车、人、动物等 1000 类物体。

示例 2：摄像头实时识别

复制代码

import React, { useEffect, useRef } from "react";
import * as mobilenet from "@tensorflow-models/mobilenet";
import Webcam from "react-webcam";

export default function App() {
  const webcamRef = useRef<Webcam>(null);
  const modelRef = useRef<any>(null);

  useEffect(() => {
    mobilenet.load().then(model => (modelRef.current = model));

    const interval = setInterval(async () => {
      if (webcamRef.current && modelRef.current) {
        const video = webcamRef.current.video as HTMLVideoElement;
        if (video) {
          const predictions = await modelRef.current.classify(video);
          console.log("识别结果:", predictions);
        }
      }
    }, 500);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <h2>摄像头识别 Demo</h2>
      <Webcam ref={webcamRef} />
    </div>
  );
}

创建rea

ct 项目

复制代码

npx create-react-app my-ai-demo --template typescript

示例demo

安装命令

复制代码

npm install @tensorflow/tfjs@4 @tensorflow-models/mobilenet@2 react-webcam @vladmandic/face-api

@tensorflow/tfjs@4
@tensorflow-models/mobilenet@2
@tensorflow-models/speech-commands
react-webcam

示例 3：语音识别（speech-commands）

使用 CDN 才能运行：

复制代码

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>

const recognizer = (window as any).speechCommands.create("BROWSER_FFT");

await recognizer.ensureModelLoaded();

const words = recognizer.wordLabels();

recognizer.listen(result => {
  const scores = Array.from(result.scores);
  const bestIndex = scores.indexOf(Math.max(...scores));
  console.log("识别到：", words[bestIndex]);
});

可识别：

复制代码

"yes"

"no"

"up"

"down"

"left"

"right"

"stop"

"go"

图片识别、摄像头识别音频检测（关键字识别）

复制代码

import { useEffect, useRef, useState } from "react";
import * as mobilenet from "@tensorflow-models/mobilenet";
import * as speech from "@tensorflow-models/speech-commands";
import Webcam from "react-webcam";

function App() {
  const webcamRef = useRef<Webcam>(null);
  const imgRef = useRef<HTMLImageElement>(null);

  const [model, setModel] = useState<mobilenet.MobileNet | null>(null);
  const [audioModel, setAudioModel] = useState<any>(null);

  const [imageResult, setImageResult] = useState("");
  const [cameraResult, setCameraResult] = useState("");
  const [audioResult, setAudioResult] = useState("");

  /** -------------------------
   *  初始化加载模型
   --------------------------*/
  useEffect(() => {
    const loadModels = async () => {
      const imgModel = await mobilenet.load();
      setModel(imgModel);

      const recognizer = await speech.create("BROWSER_FFT");
      await recognizer.ensureModelLoaded();
      setAudioModel(recognizer);

      console.log("All models loaded!");
    };

    loadModels();
  }, []);

  /** -------------------------
   *  上传图片识别
   --------------------------*/
  const handleUploadImage = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!model) return alert("模型加载中...");

    const file = e.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = async () => {
      if (imgRef.current) {
        imgRef.current.src = reader.result as string;

        const predictions = await model.classify(imgRef.current);
        if (predictions.length > 0) {
          setImageResult(
            `${predictions[0].className}（置信度：${(
              predictions[0].probability * 100
            ).toFixed(2)}%）`
          );
        }
      }
    };
    reader.readAsDataURL(file);
  };

  /** -------------------------
   *  摄像头识别
   --------------------------*/
  const handleCameraDetect = async () => {
    if (!model) return alert("模型加载中...");

    const video = webcamRef.current?.video;
    if (!video) return;

    const predictions = await model.classify(video);
    if (predictions.length > 0) {
      setCameraResult(
        `${predictions[0].className}（置信度：${(
          predictions[0].probability * 100
        ).toFixed(2)}%）`
      );
    }
  };

  /** -------------------------
   *  音频识别
   --------------------------*/
  const handleStartAudio = async () => {
    if (!audioModel) return alert("音频模型加载中...");

    audioModel.listen(
      (result: any) => {
        const scores = result.scores;
        const labels = audioModel.wordLabels();
        const highest = scores.indexOf(Math.max(...scores));

        setAudioResult(`检测到: ${labels[highest]}`);
      },
      { probabilityThreshold: 0.75 }
    );
  };

  const handleStopAudio = () => {
    audioModel?.stopListening();
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>TensorFlow.js Demo（上传图片 + 摄像头 + 语音）</h1>

      {/* -------------- 上传图片识别 ---------------- */}
      <section style={{ marginTop: 20 }}>
        <h2>上传图片识别</h2>
        <input type="file" accept="image/*" onChange={handleUploadImage} />
        <br />
        <img
          ref={imgRef}
          alt=""
          style={{ width: 300, marginTop: 10, borderRadius: 10 }}
        />
        <p>识别结果：{imageResult}</p>
      </section>

      <hr />

      {/* -------------- 摄像头识别 ---------------- */}
      <section style={{ marginTop: 20 }}>
        <h2>摄像头识别</h2>
        <Webcam
          ref={webcamRef}
          screenshotFormat="image/jpeg"
          style={{ width: 300, borderRadius: 10 }}
        />
        <div>
          <button onClick={handleCameraDetect} style={{ marginTop: 10 }}>
            识别镜头画面
          </button>
        </div>
        <p>识别结果：{cameraResult}</p>
      </section>

      <hr />

      {/* -------------- 语音识别 ---------------- */}
      <section style={{ marginTop: 20 }}>
        <h2>音频检测（关键字识别）</h2>
        <button onClick={handleStartAudio}>开始监听</button>
        <button onClick={handleStopAudio} style={{ marginLeft: 10 }}>
          停止监听
        </button>
        <p>识别结果：{audioResult}</p>
      </section>
    </div>
  );
}

export default App;

前端使用TensorFlow.js reactjs调用本地模型 实现图像、文本、音频/声音、视频相关识别

前端能做的

TensorFlow.js 是什么？

TensorFlow.js 有什么用？（真实场景）

TensorFlow.js 能做什么？（官方模型一览）

TensorFlow.js 如何使用

示例 1：识别图片内容

示例 2：摄像头实时识别

创建rea

示例demo

示例 3：语音识别（speech-commands）

图片识别、 摄像头识别 音频检测（关键字识别）

前端使用TensorFlow.js reactjs调用本地模型实现图像、文本、音频/声音、视频相关识别

图片识别、摄像头识别音频检测（关键字识别）