初识 Tensorflow.js【Plan - June - Week 3】

一、TensorFlow.js

TensorFlow.js 是 TensorFlow 的 JavaScript 实现，支持在浏览器或 Node.js 环境中训练和部署机器学习模型。

---

1、TensorFlow.js 能做什么？

• 在浏览器中训练机器学习模型
• 加载并使用已有的模型（TensorFlow SavedModel、Keras 模型、TensorFlow Hub 等）
• 在 Node.js 环境中训练和部署模型
• 将模型从 Python TensorFlow 转换成 JS 可用格式

---

2、安装 TensorFlow.js

浏览器

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

或使用 包管理器：

npm install @tensorflow/tfjs

Node.js

npm install @tensorflow/tfjs-node

Node.js 环境下还可以选择 @tensorflow/tfjs-node-gpu 获得 GPU 加速支持。

---

3、核心概念

Tensor (张量)

• 数据容器：Tensor 是多维数组，类似于 NumPy 数组。
• 示例：

const tensor = tf.tensor([1, 2, 3, 4], [2, 2]);
tensor.print();

输出：

[[1, 2],
 [3, 4]]

---

操作 (Operations)

TensorFlow.js 提供了丰富的张量运算，如矩阵乘法、加减、转置等。

const a = tf.tensor([[1, 2], [3, 4]]);
const b = tf.tensor([[5, 6], [7, 8]]);
const result = tf.matMul(a, b);
result.print();

---

模型 (Models)

顺序模型 (Sequential)

const model = tf.sequential();
model.add(tf.layers.dense({units: 32, inputShape: [50], activation: 'relu'}));
model.add(tf.layers.dense({units: 1, activation: 'linear'}));

函数式模型 (Functional)

const input = tf.input({shape: [50]});
const dense1 = tf.layers.dense({units: 32, activation: 'relu'}).apply(input);
const output = tf.layers.dense({units: 1, activation: 'linear'}).apply(dense1);
const model = tf.model({inputs: input, outputs: output});

---

训练 (Training)

model.compile({
  optimizer: 'sgd',
  loss: 'meanSquaredError'
});

// 假设 xs 和 ys 是 Tensor
await model.fit(xs, ys, {
  epochs: 10,
  batchSize: 32
});

---

加载/保存模型

加载预训练模型

const model = await tf.loadLayersModel('https://example.com/model.json');

保存模型

await model.save('downloads://my-model');  // 浏览器下载
await model.save('file://path-to-save');   // Node.js 保存到文件系统

---

4、内存管理

TensorFlow.js 不会自动回收内存，需手动处理：

tf.tidy(() => {
  const y = tf.add(a, b);
  y.print();
}); // 自动释放内部中间张量

手动释放：

tensor.dispose();

---

5、部署场景

场景	技术栈
浏览器推理/训练	TensorFlow.js + WebGL/WebGPU
Node.js 推理/训练	TensorFlow.js Node Bindings
混合端部署	将模型转换成不同端适用格式

---

6、工具链支持

• TensorFlow Converter：Python 模型 → TensorFlow.js 格式
• TensorFlow Hub：直接加载预训练模型
• tfjs-vis：用于可视化训练过程、权重分布等

---

二、张量与运算

张量是 TensorFlow.js 的核心数据结构，用于存储和操作数据。TensorFlow.js 提供了丰富的运算 API 实现高效的数值计算。

---

1、什么是张量（Tensor）？

• 张量 = 多维数组，类似于 NumPy ndarray。
• 数据类型支持：float32（默认）、int32、bool、complex64、string。

张量维度示例

维度	含义	示例
0D	标量	tf.scalar(42)
1D	向量	tf.tensor1d([1, 2, 3])
2D	矩阵	tf.tensor2d([[1, 2], [3, 4]])
3D+	高维数组（张量）	tf.tensor3d([...])

---

2、创建张量

从数组创建

const t1 = tf.tensor([1, 2, 3, 4], [2, 2]);
const t2 = tf.tensor2d([[1, 2], [3, 4]]);

特殊张量

tf.zeros([2, 3]).print();
tf.ones([2, 2]).print();
tf.eye(3).print();  // 单位矩阵

生成序列

tf.range(0, 10, 2).print();  // 0, 2, 4, 6, 8

---

3、张量运算

TensorFlow.js 提供无副作用的函数式 API，每次运算都会返回新张量。

基本运算

const a = tf.tensor([1, 2]);
const b = tf.tensor([3, 4]);
tf.add(a, b).print();   // [4, 6]
tf.mul(a, b).print();   // [3, 8]

矩阵乘法

const m1 = tf.tensor2d([[1, 2], [3, 4]]);
const m2 = tf.tensor2d([[5, 6], [7, 8]]);
tf.matMul(m1, m2).print();

广播机制

const x = tf.tensor1d([1, 2, 3]);
const y = tf.scalar(2);
tf.mul(x, y).print();  // 每个元素乘2

取子集与变形

const t = tf.tensor2d([[1,2,3],[4,5,6]]);
t.reshape([3,2]).print();
t.slice([0,1], [2,2]).print();  // 从 (0,1) 开始取 2x2 子矩阵

---

4、内存管理

张量和中间结果默认不会自动释放，需要手动管理。

自动释放临时张量

tf.tidy(() => {
  const a = tf.tensor1d([1, 2, 3]);
  const b = a.square();
  b.print();
});  // 离开 tidy 后自动释放 a 和 b

手动释放

const t = tf.tensor([1, 2, 3]);
t.dispose();

查看内存使用

console.log(tf.memory());

---

5、异步操作

某些操作是异步的，例如从张量取值：

const t = tf.tensor([1, 2, 3]);
t.data().then(data => console.log(data));  // TypedArray
t.array().then(arr => console.log(arr));   // 普通数组

在 Node.js 或浏览器 async/await 环境：

const data = await t.data();
console.log(data);

---

6、计算设备

• TensorFlow.js 默认会使用 WebGL 或 WebGPU 在浏览器加速。
• 在 Node.js 环境可选用 @tensorflow/tfjs-node 或 @tensorflow/tfjs-node-gpu 获得更高性能。

三、MobileNet 模型

MobileNet 是一种轻量级卷积神经网络，用于高效的图像分类与特征提取，适合在浏览器、移动端和边缘设备运行。

---

1、MobileNet 的主要特点

• 轻量化，推理速度快，适合实时应用
• 支持多种输入尺寸和不同的模型深度（通过 α 参数调整）
• 可作为特征提取器用于迁移学习
• 预训练权重来自 ImageNet 数据集

---

2、快速使用

安装 TensorFlow.js

npm install @tensorflow/tfjs

或 在 HTML 中引入：

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

---

加载 MobileNet 模型

import * as mobilenet from '@tensorflow-models/mobilenet';

// 或在浏览器中
// const mobilenet = window.mobilenet;

const model = await mobilenet.load({
  version: 2,          // MobileNet V2
  alpha: 1.0           // 模型宽度系数（0.25 ~ 1.0）
});

---

图像分类示例

const img = document.getElementById('img');  // HTMLImageElement 或 Canvas
const predictions = await model.classify(img);

console.log(predictions);
// [
//   {className: 'Egyptian cat', probability: 0.75},
//   {className: 'tabby, tabby cat', probability: 0.15},
//   ...
// ]

---

提取特征用于迁移学习

const activation = model.infer(img, true);
activation.print();  // 返回一个张量，可用于后续自定义分类器训练

---

3、参数说明

参数	含义	默认值
version	模型版本（1 或 2）	1
alpha	宽度缩放系数，减小模型大小	1.0（完整模型）

推荐：

• 快速推理：version: 2, alpha: 0.5
• 更高准确率：version: 2, alpha: 1.0

---

4、模型输入要求

• 输入图像可以是：
  • HTMLImageElement
  • HTMLCanvasElement
  • HTMLVideoElement
  • Tensor (tf.browser.fromPixels(img))
• 输入尺寸会自动调整为模型要求的大小。

---

5、性能优化

• 使用 WebGL 或 WebGPU 提升推理性能（TensorFlow.js 自动选择）
• 建议在调用前将图像转换为固定尺寸并缓存模型
• 使用 tf.tidy 自动释放中间张量内存

---

6、示例代码片段

<img id="img" src="cat.jpg" />
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs">script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet">script>
<script>
  async function run() {
    const img = document.getElementById('img');
    const model = await mobilenet.load({version: 2, alpha: 0.75});
    const predictions = await model.classify(img);
    console.log(predictions);
  }
  run();
script>

学习资料来源

TensorFolw.js
张量和运算
MobileNet 模型