TensorFlow.js 超小白入门手册

杜金房

发布于 2026-06-15 16:55:08

810

TensorFlow.js 是一个强大的 JavaScript AI 框架，它允许开发者在浏览器或 Node.js 环境中运行机器学习模型。借助这个框架，前端开发者无需依赖服务器端的计算，就能直接在网页上实现实时的数据处理和用户交互，极大地拓展了网页应用的功能边界，为用户带来更智能的体验。

环境搭建

在项目中使用 TensorFlow.js，可通过以下两种方式引入该库：

通过 CDN 引入：在 HTML 文件中添加如下脚本标签：

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

这种方式简单直接，无需进行安装操作，能让你快速开始使用 TensorFlow.js。

通过 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 模型具有诸多优势，它能增强用户体验并降低延迟。部署前，要确保项目中已包含 TensorFlow.js 库。部署流程如下：

模型准备：训练好模型后，将其保存为适合在浏览器中加载的格式。
在 HTML 中加载模型：使用 tf.loadLayersModel 方法加载模型。
进行预测：在网页中获取用户输入的数据，将其转换为合适的张量格式，然后使用加载的模型进行预测，并将结果展示给用户。

初学者项目示例

图像分类

使用 TensorFlow.js 创建一个简单的图像分类器，识别图像中的物体。这个项目能帮助理解如何预处理数据和训练模型

聊天机器人开发

使用 brain.js 构建一个基本的聊天机器人，使其能够响应用户的查询。

情感分析

创建一个网页应用，使用机器学习模型分析用户的评论并确定其情感倾向。

总结

特点：Google开发的机器学习库支持浏览器和Node.js环境可以直接在浏览器中训练和部署模型。

几个关键点和坑：

模型加载需要时间：

第一次打开网页时，浏览器要下载模型文件（几 MB 到几十 MB）。耐心等一下，或者加个“加载中”提示给用户。

图片大小很重要：

如果我们上传了图片，使用代码例如 `resizeNearestNeighbor([224, 224])` 是因为 MobileNet 模型要求输入图片必须是 224x224 像素。不同的模型可能有不同要求，要看文档。

清理内存 (dispose())：

TensorFlow.js 处理数据时会在背后用到一个叫 `Tensor` 的东西（可以理解为临时变量）。用完后要手动 `dispose()` 掉它们，不然浏览器内存会越用越多，网页可能变卡！使用API `imageTensor.dispose();`

不是所有模型都适合浏览器：

超级复杂的大模型在浏览器里跑可能很慢。TF.js 官方提供了一些优化好的小模型（像 MobileNet），更适合网页。

浏览器兼容性：

现代浏览器（Chrome, Firefox, Safari, Edge 新版）基本都支持。TF.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
});

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2026-03-10，如有侵权请联系 cloudcommunity@tencent.com 删除

入门