1、TensorFlow.js 简介：什么是 TensorFlow.js、浏览器端 ML 的优势、项目环境搭建与 Hello World
什么是 TensorFlow.js？
说白了，TensorFlow.js 就是让 JavaScript 也能跑机器学习的框架。你想想看，以前做 AI 基本离不开 Python，得装 Anaconda、配 CUDA、搞虚拟环境……一套下来新手直接劝退。
我个人习惯把 TensorFlow.js 看作「浏览器里的 AI 引擎」。它能把训练好的模型直接拉到网页上运行，甚至可以在浏览器里从头训练一个模型。嗯，这里要注意——它并不是 Python 版 TensorFlow 的简单移植，而是专门为 JS 生态重写的。
我在项目中遇到过不少次这样的场景：后端同学训练好一个模型，前端同学却不知道怎么集成。有了 TensorFlow.js，前端自己就能搞定推理部分，前后端协作一下子顺畅多了。
浏览器端 ML 的优势
为什么要在浏览器里做机器学习？我总结了几个核心好处：
- 零部署成本：用户打开网页就能用，不用装任何东西。我曾经给客户做过一个图像分类工具，要是让他们装 Python 环境，项目估计直接黄了。
- 数据隐私保护：所有计算都在本地完成，敏感数据不用上传服务器。比如医疗影像分析，这个优势就很关键。
- 实时交互：摄像头、麦克风、传感器数据可以直接喂给模型，延迟极低。你想想看，用 WebGL 加速的矩阵运算，在浏览器里跑推理其实挺快的。
- 跨平台：一套代码跑在 PC、手机、平板上，只要有个现代浏览器就行。
核心观点：浏览器端 ML 不是要取代服务端，而是填补「轻量级、实时性、隐私敏感」场景的空白。
项目环境搭建
搭建环境其实很简单，我推荐两种方式：
方式一：CDN 引入（适合快速体验）
直接在 HTML 里加一行 script 标签就行：
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>这种方式我经常在原型验证时用，省事。但生产环境建议指定版本号，避免意外更新导致问题。
方式二：npm 安装（适合正式项目）
如果你用 React、Vue 这类框架，推荐用 npm：
npm install @tensorflow/tfjs然后在代码里 import：
import * as tf from '@tensorflow/tfjs';小提示：我个人习惯在开发时打开浏览器控制台的「Performance」面板，观察模型加载和推理的耗时，这对后续优化很有帮助。
Hello World：线性回归
光说不练假把式，咱们直接写个 Hello World。这个例子用线性回归拟合一条直线，麻雀虽小五脏俱全。
先准备数据：
// 生成一些带噪声的线性数据
const xs = tf.tensor2d([1, 2, 3, 4, 5], [5, 1]);
const ys = tf.tensor2d([3, 5, 7, 9, 11], [5, 1]);然后定义模型：
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));编译并训练：
model.compile({loss: 'meanSquaredError', optimizer: 'sgd'});
await model.fit(xs, ys, {
epochs: 200,
callbacks: {
onEpochEnd: (epoch, logs) => {
console.log(`Epoch ${epoch}: loss = ${logs.loss}`);
}
}
});最后做个预测：
const result = model.predict(tf.tensor2d([6], [1, 1]));
result.print(); // 应该接近 13避坑指南：我曾经在训练时忘记用 await，结果模型还没训练完就去预测了，返回的全是 NaN。记住，fit 是异步操作，一定要加 await 或者用 then 链式调用。
理解核心概念
跑通代码后，咱们聊聊背后的几个关键概念：
| 概念 | 说明 | 类比 |
|---|---|---|
| 张量 (Tensor) | 多维数组，TensorFlow.js 的基本数据单位 | 就像 Excel 里的单元格区域 |
| 模型 (Model) | 由多个层组成的计算图 | 就像一套加工流水线 |
| 层 (Layer) | 模型的基本构建块，负责数据变换 | 流水线上的一个工位 |
| 损失函数 (Loss) | 衡量预测值与真实值的差距 | 就像考试分数，越低越好 |
| 优化器 (Optimizer) | 调整模型参数以减小损失 | 就像老师帮你纠正错误 |
你想想看，整个训练过程其实就是：数据进来 → 模型猜答案 → 算算差多少 → 调整参数 → 再猜……直到猜得足够准。
浏览器里的特殊之处
在浏览器里跑 ML，有几个点需要特别注意：
- 内存管理：JS 的垃圾回收机制对张量不太友好。我建议用完张量后手动调用
tensor.dispose()或者用tf.tidy()自动清理。 - 主线程阻塞：训练任务如果太重，会卡住页面。可以用 Web Workers 把计算放到后台线程。
- 模型大小：浏览器能承受的模型一般在 5MB 以内，太大的模型加载时间会很长。
经验之谈：我刚开始做浏览器端 ML 时，总想把 Python 那套大模型搬过来，结果页面直接崩溃。后来学乖了，先用 tfjs-converter 把模型压缩一下，再考虑量化、剪枝这些优化手段。
小结
这一章咱们走通了 TensorFlow.js 的第一个程序。说白了，浏览器端 ML 的核心就三件事：准备数据、定义模型、训练预测。环境搭建比 Python 简单得多，一个 CDN 链接就能开干。
下一章我会深入讲讲张量的各种操作，这可是 TensorFlow.js 的基石。到时候咱们用实际案例来演示，保证你学完就能上手干活。