首页 > 文章 > 前端

TensorFlow.js实战教程与使用指南

时间：2026-02-22 16:44:00 329浏览收藏

TensorFlow.js让机器学习真正走进浏览器——无需服务器部署、数据全程本地处理保障隐私安全、离线环境也能运行模型，它既支持加载预训练模型快速实现图像识别、手势控制和情感分析等应用，又具备在前端直接训练模型的能力；配合直观的Tensor操作、智能内存管理（如tf.tidy）和灵活的引入方式（CDN或npm），再加上WebGL加速与完善的调试工具，为开发者打开了轻量、高效、隐私友好的AI应用新可能。

TensorFlow.js在浏览器中运行的优势是无需服务器、保护隐私和离线支持；1. 无需服务器：模型直接在客户端运行，减少服务器负载并降低延迟；2. 保护隐私：用户数据无需上传至服务器，提升隐私安全性；3. 离线支持：部分应用可在无网络环境下运行，增强可用性。

TensorFlow.js怎么使用

TensorFlow.js让你可以在浏览器和Node.js环境中直接运行机器学习模型。它提供了灵活的API，能进行模型训练、推理，甚至可以直接使用预训练好的模型。

解决方案

引入TensorFlow.js库:

通过CDN: 在HTML文件中添加以下代码：

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.15.0/dist/tf.min.js"></script>

通过npm (Node.js):

npm install @tensorflow/tfjs

然后在你的JavaScript文件中引入：

const tf = require('@tensorflow/tfjs');

创建Tensor: Tensor是TensorFlow.js的核心数据结构，类似于NumPy中的数组。

// 创建一个标量 (0维 Tensor)
const scalar = tf.scalar(5);

// 创建一个1维 Tensor (向量)
const vector = tf.tensor1d([1, 2, 3]);

// 创建一个2维 Tensor (矩阵)
const matrix = tf.tensor2d([[1, 2], [3, 4]]);

// 创建一个3维 Tensor
const tensor3d = tf.tensor3d([[[1, 2], [3, 4]], [[5, 6], [7, 8]]]);

scalar.print();
vector.print();
matrix.print();
tensor3d.print();

Tensor运算: TensorFlow.js提供了丰富的数学运算函数。

const a = tf.tensor1d([1, 2, 3]);
const b = tf.tensor1d([4, 5, 6]);

const sum = a.add(b); // 加法
const product = a.mul(b); // 乘法
const squared = a.square(); // 平方
const mean = a.mean(); // 平均值

sum.print();
product.print();
squared.print();
mean.print();

// 释放 Tensor 占用的内存
a.dispose();
b.dispose();
sum.dispose();
product.dispose();
squared.dispose();
mean.dispose();

注意内存管理！ TensorFlow.js在浏览器中运行，内存是有限的。使用 dispose() 方法释放不再需要的 Tensor，或者使用 tf.tidy() 函数自动管理内存：

const result = tf.tidy(() => {
  const a = tf.tensor1d([1, 2, 3]);
  const b = tf.tensor1d([4, 5, 6]);
  return a.add(b); // a 和 b 会在 tidy 函数结束时自动释放
});

result.print();
result.dispose(); // 仍然需要释放 result

模型加载与使用: TensorFlow.js 可以加载预训练好的模型，例如由 Python TensorFlow 训练的模型。

async function loadModel() {
  const model = await tf.loadLayersModel('path/to/my_model/model.json');
  return model;
}

async function predict(model, inputData) {
  const tensorInput = tf.tensor2d(inputData, [1, inputData.length]); // 将输入数据转换为 Tensor
  const prediction = model.predict(tensorInput); // 进行预测
  const result = await prediction.data(); // 获取预测结果
  tensorInput.dispose();
  prediction.dispose();
  return result;
}

async function run() {
  const model = await loadModel();
  const inputData = [0.1, 0.2, 0.3, 0.4]; // 你的输入数据
  const prediction = await predict(model, inputData);
  console.log('Prediction:', prediction);
  model.dispose();
}

run();

模型训练: TensorFlow.js 也可以在浏览器中进行模型训练。

// 定义一个简单的线性模型
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// 定义优化器和损失函数
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});

// 准备训练数据
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([2, 4, 6, 8], [4, 1]);

// 训练模型
async function trainModel(model, xs, ys) {
  await model.fit(xs, ys, {epochs: 100});
}

async function runTraining() {
  await trainModel(model, xs, ys);
  console.log("Training complete!");

  // 使用训练好的模型进行预测
  const prediction = model.predict(tf.tensor2d([5], [1, 1]));
  prediction.print();
  xs.dispose();
  ys.dispose();
  prediction.dispose();
  model.dispose();
}

runTraining();

TensorFlow.js 在浏览器中运行的优势是什么？