从入门到精通：TensorFlow.js可训练模型全解析——附5类核心模型实操示例

在浏览器里跑深度学习早已不是新鲜事，但如何正确选择模型结构、快速落地项目，仍是很多开发者的痛点。本文按 “新手易上手→进阶灵活→专用场景→高级定制” 的逻辑，系统梳理TensorFlow.js（tfjs）中真正支持训练的核心模型类型，每个类型都配有可直接运行的代码示例，帮你快速从理论过渡到实践。

一、新手首选：Sequential顺序模型

核心特点

  • 线性堆叠：层与层之间严格按顺序连接，无分支、无多输入/输出
  • 极低学习成本：API简洁直观，是理解神经网络的基础起点
  • 适用场景：线性回归、基础分类任务、单输入单输出的标准结构

实操示例：手写数字分类（简化版MNIST）

<!-- 前置：引入tfjs核心库 -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.14.0/dist/tf.min.js"></script>
<script>
// 步骤1：模拟MNIST数据（100个28×28灰度图，标签为0-9）
const xs = tf.randomNormal([100, 28, 28, 1]); // 输入：100个样本，28×28×1（灰度）
const ys = tf.oneHot(
  tf.tensor1d(
    Array.from({ length: 100 }, () => Math.floor(Math.random() * 10)),
    'int32'
  ),
  10
); // 标签：独热编码

// 步骤2：构建Sequential模型
const model = tf.sequential();
// 卷积层（提取图片特征）
model.add(tf.layers.conv2d({
  filters: 16,
  kernelSize: 3,
  activation: 'relu',
  inputShape: [28, 28, 1] // 第一层必须指定输入形状
}));
// 池化层（降维，减少计算量）
model.add(tf.layers.maxPooling2d({poolSize: [2, 2]}));
// 展平层（多维转一维，对接全连接层）
model.add(tf.layers.flatten());
// 输出层（10分类，softmax激活）
model.add(tf.layers.dense({units: 10, activation: 'softmax'}));

// 步骤3：编译模型（配置训练规则）
model.compile({
  optimizer: 'adam', // 优化器：自适应学习率
  loss: 'categoricalCrossentropy', // 多分类损失函数
  metrics: ['accuracy'] // 监控准确率
});

// 步骤4：训练模型
model.fit(xs, ys, {
  epochs: 5, // 训练轮数
  batchSize: 10, // 批次大小
  verbose: 1 // 打印训练过程
}).then(() => {
  console.log("✅ Sequential模型训练完成！");
  // 预测示例：输入1张测试图，输出预测类别
  const testInput = tf.randomNormal([1, 28, 28, 1]);
  const pred = model.predict(testInput);
  pred.data().then(v => {
    console.log("预测数字：", v.indexOf(Math.max(...v))); // 输出概率最高的类别
  });
  
  // ⚠️ 释放张量（避免浏览器内存泄漏）
  testInput.dispose();
  pred.dispose();
  xs.dispose();
  ys.dispose();
});
</script>

关键点：第一层必须指定inputShape，训练结束后务必调用.dispose()释放张量，否则浏览器内存会快速耗尽。

二、进阶灵活：Functional函数式模型

核心特点

  • 突破线性限制：支持多输入、多输出、分支、残差连接等复杂拓扑
  • 模型即函数：通过tf.model()显式定义输入输出，灵活性MAX
  • 适用场景：多模态融合（图片+文本）、残差网络ResNet、U-Net、自定义网络结构

实操示例：双输入模型（年龄+收入预测消费等级）

// 步骤1：准备双输入数据
const ageInput = tf.tensor2d(Array.from({length:100}, () => [Math.random()*50+20])); // 年龄（20-70）
const incomeInput = tf.tensor2d(Array.from({length:100}, () => [Math.random()*10000+5000])); // 收入（5k-15k）
const labels = tf.oneHot(tf.tensor1d(Array.from({length:100}, () => Math.floor(Math.random()*3))), 3); // 消费等级（0-2）

// 步骤2：定义两个输入层
const ageLayer = tf.input({shape: [1], name: 'age'});
const incomeLayer = tf.input({shape: [1], name: 'income'});

// 步骤3：合并特征（多输入融合）
const concatLayer = tf.layers.concatenate().apply([ageLayer, incomeLayer]);
// 全连接层提取特征
const dense1 = tf.layers.dense({units: 16, activation: 'relu'}).apply(concatLayer);
// 输出层（3分类）
const outputLayer = tf.layers.dense({units: 3, activation: 'softmax'}).apply(dense1);

// 步骤4：构建函数式模型（指定输入/输出）
const model = tf.model({
  inputs: [ageLayer, incomeLayer],
  outputs: outputLayer
});

// 步骤5：编译+训练
model.compile({
  optimizer: 'adam',
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy']
});

// 训练时需匹配输入名称
model.fit(
  {age: ageInput, income: incomeInput},
  labels,
  {epochs: 10, verbose: 1}
).then(() => {
  console.log("✅ Functional模型训练完成！");
  // 预测示例：输入30岁、8000收入
  const pred = model.predict({
    age: tf.tensor2d([[30]]),
    income: tf.tensor2d([[8000]])
  });
  pred.data().then(v => console.log("预测消费等级：", v.indexOf(Math.max(...v))));
  
  // 释放张量
  pred.dispose();
  ageInput.dispose();
  incomeInput.dispose();
  labels.dispose();
});

核心优势：当业务需求从单输入扩展到多特征融合时，Functional模型无需重构，直接增加输入分支即可。

三、tfjs核心杀手锏：预训练模型微调

核心特点

  • 迁移学习：基于Google官方预训练模型（MobileNet、ResNet、BERT），无需从零开始训练
  • 数据高效：几十到几百张图片即可训练出不错的效果，解决小数据集训练差的问题
  • 适用场景：自定义图片分类、特定领域目标检测、文本情感分析等

实操示例：微调MobileNet v2实现“猫/狗/鸟”分类

async function fineTuneMobileNet() {
  // 步骤1：加载预训练MobileNet（不加载顶层分类器）
  const mobilenet = await tf.loadLayersModel('https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v2_1.0_224/model.json');
  
  // 关键：冻结底层（保留预训练特征，只训练顶层）
  mobilenet.layers.forEach(layer => layer.trainable = false);
  
  // 步骤2：添加自定义顶层（3分类：猫/狗/鸟）
  const input = tf.input({shape: [224, 224, 3]});
  const features = mobilenet.apply(input); // 提取MobileNet的特征
  const flatten = tf.layers.flatten().apply(features);
  const output = tf.layers.dense({units: 3, activation: 'softmax'}).apply(flatten);
  
  // 步骤3：构建微调模型
  const model = tf.model({inputs: input, outputs: output});
  
  // 步骤4：编译（学习率要小，避免破坏预训练特征）
  model.compile({
    optimizer: tf.train.adam(0.0001), // 小学习率是关键！
    loss: 'categoricalCrossentropy',
    metrics: ['accuracy']
  });
  
  // 步骤5：模拟自定义数据（替换为你的图片数据）
  const xs = tf.randomNormal([50, 224, 224, 3]); // 50张224×224的RGB图
  const ys = tf.oneHot(tf.tensor1d(Array.from({length:50}, () => Math.floor(Math.random()*3))), 3); // 3分类标签
  
  // 步骤6：微调训练
  await model.fit(xs, ys, {epochs: 10, batchSize: 5});
  console.log("✅ MobileNet微调完成！");
  
  // 释放资源
  xs.dispose();
  ys.dispose();
  return model;
}

// 执行微调
fineTuneMobileNet();

避坑指南：学习率必须设为极小值（如0.0001），否则预训练权重会被快速覆盖，失去迁移学习意义。

四、专用任务模型：场景化解决方案

tfjs针对图片、文本、时序数据提供了高度优化的专用模型，选型对照表如下：

模型类型 核心能力 适用场景 关键层/API
CNN卷积网络 提取空间特征 图片分类、目标检测、OCR conv2d、maxPooling2d
RNN/LSTM/GRU 处理序列数据（带记忆） 文本生成、气温预测、语音识别 lstm、gru
Transformer 注意力机制（并行处理序列） 文本翻译、语义理解 multiHeadAttention
MLP全连接网络 通用简单任务 表格数据分类/回归 dense

实操示例：LSTM时序模型（预测气温趋势）

// 步骤1：准备时序数据（用前10个时间步预测下一个气温）
const timeSteps = 10; // 时间步长
const xs = tf.randomNormal([100, timeSteps, 1]); // 100个序列，每个10步，1个特征（气温）
const ys = tf.randomNormal([100, 1]); // 预测下一个时间步的气温

// 步骤2：构建LSTM模型
const model = tf.sequential();
model.add(tf.layers.lstm({
  units: 32, // 神经元数量
  inputShape: [timeSteps, 1],
  returnSequences: false // 只输出最后一步结果（预测值）
}));
model.add(tf.layers.dense({units: 1})); // 输出预测值

// 步骤3：编译+训练
model.compile({
  optimizer: 'adam',
  loss: 'meanSquaredError' // 回归任务用MSE
});

model.fit(xs, ys, {epochs: 15, verbose: 1}).then(() => {
  console.log("✅ LSTM时序模型训练完成！");
  // 预测示例：输入1个10步的气温序列
  const testSeq = tf.randomNormal([1, timeSteps, 1]);
  const pred = model.predict(testSeq);
  pred.data().then(v => console.log("预测气温：", v[0].toFixed(2)));
  
  // 释放张量
  testSeq.dispose();
  pred.dispose();
  xs.dispose();
  ys.dispose();
});

选型建议：时序预测优先用LSTM，分类任务先看CNN，表格数据直接用MLP，NLP任务再考虑Transformer。

五、高级定制：自定义层模型

当内置层无法满足特殊需求（如自定义激活函数、特殊卷积核），tfjs支持从零定义层结构：

// 步骤1：定义自定义激活层（解决ReLU死亡神经元问题）
class CustomReluLayer extends tf.layers.Layer {
  constructor() {
    super({});
  }
  
  // 核心：定义前向传播逻辑
  call(inputs) {
    return tf.tidy(() => {
      const half = tf.mul(inputs, 0.1); // 0.1x
      return tf.maximum(inputs, half); // max(x, 0.1x)
    });
  }
  
  // 必须注册类名（序列化用）
  static get className() {
    return 'CustomReluLayer';
  }
}

// 步骤2：注册自定义层
tf.serialization.registerClass(CustomReluLayer);

// 步骤3：构建带自定义层的模型
const model = tf.sequential();
model.add(tf.layers.dense({units: 16, inputShape: [5]}));
model.add(new CustomReluLayer()); // 使用自定义层
model.add(tf.layers.dense({units: 1}));

// 编译模型（可直接训练）
model.compile({optimizer: 'sgd', loss: 'mse'});
console.log("✅ 自定义层模型构建完成！");

价值场景：学术研究、特殊激活函数实验、企业级专有算法封装。

六、总结与实践建议

  1. 新手路径：Sequential模型 → 理解CNN/LSTM基础 → 小数据集上用预训练模型微调
  2. 进阶路径：掌握Functional模型 → 实现多输入/分支结构 → 自定义层解决特殊需求
  3. 部署策略：
    • 浏览器端：适合小规模模型训练/微调，注意内存管理和批次大小
    • Node.js端：大规模模型训练建议在Node.js环境（启用GPU加速），训练完成后导出为model.json部署到浏览器
  4. 性能优化：使用tf.tidy()自动管理内存，优先选择tf.loadLayersModel()加载预训练权重，避免重复训练

tfjs的真正魅力在于 “即训即用” ——训练与部署无缝衔接，一个.html文件就能跑完整AI流程。现在，打开你的浏览器控制台，复制上面的代码，开始你的第一个tfjs模型吧！

延伸阅读：

（本文代码均在TensorFlow.js 4.14.0版本测试通过，建议读者使用最新稳定版）

# tensorflow # javascript # 人工智能
Logo
脑启社区

脑启社区是一个专注类脑智能领域的开发者社区。欢迎加入社区，共建类脑智能生态。社区为开发者提供了丰富的开源类脑工具软件、类脑算法模型及数据集、类脑知识库、类脑技术培训课程以及类脑应用案例等资源。

更多推荐

cover

突破 Transformer 极限：一文看懂类脑架构 MT-LNN 最新的“超神”评测结果！

avatar 脑启社区

人工智能导论：模型与算法（未来发展与趋势）

人工智能作为引领新一轮科技革命和产业变革的战略性技术，正在深刻改变人类社会。本章从类脑计算、自动化机器学习、神经网络压缩、人工智能芯片、量子机器学习、人工智能伦理与治理、人工智能算法开发框架等方面，简要总结人工智能的未来发展方向和趋势。

avatar 脑启社区
cover

脑启社区类脑开发工具Samna开源上线｜试用开发，赢好礼！

avatar 脑启社区