TensorFlow.js零基础入门手册

时间：2026-06-16 19:14

TensorFlow js是Google开发的机器学习库，支持浏览器和Node js环境直接训练与部署模型。通过CDN或npm引入，利用SequentialAPI创建模型，经编译、训练后可进行预测。部署时需注意模型加载、图片尺寸、内存清理及浏览器兼容性。适用于图像分类、情感分析等初学者项目。

对于前端开发者而言，若希望涉足机器学习领域，TensorFlow.js无疑是最得心应手的框架。它允许你在浏览器或Node.js环境中直接运行模型，省去了后端调用的延迟，使网页应用的智能化水平显著提升。用户交互能够实时响应，数据处理也可在本地完成，整体体验自然更加流畅。

环境搭建

要开始使用TensorFlow.js，有两种引入方式可供选择，根据项目需求灵活配置即可：

通过CDN引入：在HTML中添加一个script标签即可快速上手，无需安装任何依赖。

这种方式零安装、零配置，适合快速原型开发。

通过npm安装：如果你正在使用Node.js或Webpack等构建工具，在终端中执行以下命令：

npm install @tensorflow/tfjs

安装完成后，在JavaScript文件中通过如下方式导入：

import * as tf from '@tensorflow/tfjs';

构建第一个TensorFlow.js模型

从零搭建一个模型通常遵循以下步骤。

创建顺序模型

使用Sequential API创建一个最基本的前后顺序堆叠模型：

const model = tf.sequential();

添加层

例如添加一个全连接层，包含10个神经元，激活函数选择ReLU：

const inputSize = 1;
model.add(tf.layers.dense({units: 10, activation: 'relu', inputShape: [inputSize]}));

编译模型

编译时需要指定优化器、损失函数以及训练过程中需要监控的评估指标：

model.compile({
  optimizer: 'adam',
  loss: 'meanSquaredError',
  metrics: ['accuracy']
});

训练模型

训练需要准备数据，以下是一个简单的示例：

const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

async function trainModel() {
  await model.fit(xs, ys, {epochs: 10});
}
trainModel();

其中xs为输入，ys为对应的输出，模型将在10个训练周期内学习输入与输出的映射关系。

进行预测

训练完成之后即可进行推断：

const output = model.predict(tf.tensor2d([5], [1, 1]));
output.print();

输入5，模型会根据已学习到的模式给出一个预测值。

在浏览器中部署TensorFlow.js模型

直接在浏览器中运行模型的最大优势在于用户交互无延迟、响应迅速。部署前确保已经正确引入了TensorFlow.js库，大致流程如下：

模型准备：完成模型训练并保存为浏览器可加载的格式。
在HTML中加载模型：通过 tf.loadLayersModel 方法加载已保存的模型。
进行预测：从网页获取用户输入，将其转换为张量，然后利用加载的模型进行预测，并将结果展示给用户。

初学者项目示例

以下几个实战项目非常适合入门练习：

图像分类：借助TensorFlow.js编写一个简单的分类器，识别图片中的物体，帮助你理解数据预处理与模型训练流程。
聊天机器人：使用 brain.js 构建一个基础的对话机器人，能够对用户的简单查询做出响应。
情感分析：开发一个网页应用，对用户评论进行情感倾向分析，判断其正面或负面情绪。

总结

TensorFlow.js是Google推出的机器学习库，支持浏览器和Node.js环境，使开发者能够在浏览器端直接完成模型的训练与部署。不过在使用过程中有一些常见注意事项，提前了解可以避免不少弯路：

模型加载需要时间：首次打开网页时，浏览器需要下载模型文件（大小通常为几MB到几十MB）。建议添加“加载中”提示，避免用户无等待。
输入图片尺寸必须匹配：例如使用MobileNet模型时，代码中需调用 resizeNearestNeighbor([224, 224])，因为模型要求输入为224×224像素。不同模型的输入规格不同，务必查阅文档。
及时清理内存 (dispose())：TensorFlow.js底层使用Tensor对象（可理解为临时变量）。使用完毕后应手动调用 dispose() 释放内存，否则浏览器内存占用持续增长，导致页面卡顿。例如 imageTensor.dispose();。
并非所有模型都适合浏览器：过于复杂的大型模型在浏览器中运行可能效率低下。TF.js官方提供了一些经过优化的小型模型（如MobileNet），更适合网页应用场景。
注意浏览器兼容性：现代浏览器（Chrome、Firefox、Safari、新版Edge）基本都支持TensorFlow.js，它会利用WebGL调用显卡进行加速计算，提升性能。
出错的排查思路：首先检查控制台(Console)的报错信息。若是网络问题，确认CDN链接能否正常下载；若模型未加载完成，请确保 console.log('模型加载成功！') 出现后再点击识别按钮。

核心API速览：

// 模型加载
const model = await tf.loadLayersModel('model.json');
// 张量操作
const tensor = tf.tensor2d([[1, 2], [3, 4]]);
// 模型预测
const prediction = model.predict(inputTensor);
// 模型训练
const history = await model.fit(xs, ys, {
  epochs: 100,
  batchSize: 32,
  validationSplit: 0.2
});

来源：https://cloud.tencent.com.cn/developer/article/2689353

Tensor