企业官网建设流程全解析

TensorFlow.js Layers 高阶模型 API 完全指南：构建、训练与加载 Keras 模型

【免费下载链接】tfjsA WebGL accelerated JavaScript library for training and deploying ML models.项目地址: https://gitcode.com/gh_mirrors/tf/tfjs

TensorFlow.js Layers 是 TensorFlow.js 生态中基于tfjs-core构建的高阶模型 API，允许开发者在浏览器中直接构建、训练和部署深度学习模型。本指南以 tfjs-layers/README.md 为主体，结合仓库源码深入讲解三种导入方式、Sequential 模型构建、模型编译训练、预训练 Keras 模型加载与模型序列化格式，帮助读者完整掌握这套 API 的实战用法与底层原理。

一、TensorFlow.js Layers 是什么

TensorFlow.js Layers 是整个 TensorFlow.js 生态中的"高层次 API"层，它建立在 tfjs-core（张量运算与自动微分内核）之上，向用户提供一套面向机器学习建模的抽象接口，让开发者无需直接操作底层张量即可完成模型的构建、训练与推理。

从设计上看，TensorFlow.js Layers 参照了 Keras 与tf.keras的 API 风格，因此具备两个直接收益：

• API 心智模型一致：熟悉 Keras 的开发者可以零门槛迁移到 JavaScript 环境，sequential、model、compile、fit、predict等概念一一对应；
• 模型互通：可以直接加载由 Python 端 Keras /tf.keras训练并保存的模型文件，在浏览器中继续做推理、评估或迁移学习。

从源码结构看，Layers 包的公开入口集中在 tfjs-layers/src/index.ts：它统一导出constraints、initializers、layers、metrics、models、regularizers六大命名空间，以及LayersModel、Sequential、RNN、LayerVariable、Callback等核心类型，构建了一个完整的模型开发工具链。

二、三种导入方式及取舍

官方 README 给出了三种导入 TensorFlow.js Layers 的方式，本小节结合 tfjs-layers/package.json 给出具体说明。

方式一：通过 union 包@tensorflow/tfjs导入（最便捷）

@tensorflow/tfjs是 Core 与 Layers 的合并包，一次安装即可同时获得张量运算与高层次建模能力：

import * as tf from '@tensorflow/tfjs'; // 直接使用 tf.sequential / tf.layers / tf.loadLayersModel 等

优点：无需关心包之间的依赖关系，开箱即用。代价：bundle 体积较大——README 明确指出"我们未来还会向该包中加入更多子包"，因此追求极致包体时不应选择此方式。

方式二：独立安装@tensorflow/tfjs-layers（按需控制体积）

npm install @tensorflow/tfjs-layers

此时需要同时安装@tensorflow/tfjs-core，因为根据 tfjs-layers/package.json 中的声明，tfjs-layers以@tensorflow/tfjs-core为peerDependencies（对等依赖），必须由使用者显式提供：

npm install @tensorflow/tfjs-layers @tensorflow/tfjs-core

import * as tf from '@tensorflow/tfjs-layers'; import '@tensorflow/tfjs-core';

事实上，tfjs-layers/src/index.ts 在模块顶层就执行了import '@tensorflow/tfjs-core'以及import '@tensorflow/tfjs-core/dist/register_all_gradients'，这意味着 Layers 包本身强依赖 Core 的注册环境——这也解释了为何 peer dependency 是强制性的。

方式三：通过 CDN 以 standalone 方式引用

可以直接在 HTML 中以<script>标签方式引入构建产物。根据 tfjs-layers/package.json 的unpkg/jsdelivr字段，standalone 构建产物为dist/tf-layers.min.js，例如：

<script src="https://unpkg.com/@tensorflow/tfjs-layers/dist/tf-layers.min.js"></script>

选择建议：日常开发与演示用方式一；对包体敏感的生产项目用方式二；无需模块打包器（如纯静态页面演示）时用方式三。

三、构建、训练并执行一个模型

README 提供了一个"玩具级"线性回归示例：仅用一层dense拟合y = 2x - 1。这是理解 Layers API 完整生命周期的经典入门路径，完整代码与逐步拆解如下：

import * as tf from '@tensorflow/tfjs'; // 1. 创建 Sequential 容器，它可以不断向其中添加层 const model = tf.sequential(); // 2. 添加一个 1 个输出单元的 Dense 层 model.add(tf.layers.dense({units: 1, inputShape: [1]})); // 3. 指定损失函数与优化器 model.compile({loss: 'meanSquaredError', optimizer: 'SGD'}); // 4. 生成合成训练数据（xs -> ys 满足 ys = 2*xs - 1） const xs = tf.tensor2d([[1], [2], [3], [4]], [4, 1]); const ys = tf.tensor2d([[1], [3], [5], [7]], [4, 1]); // 5. 训练 500 个 epoch await model.fit(xs, ys, {epochs: 500}); // 6. 推理：对新的输入做预测 const output = model.predict(tf.tensor2d([[5]], [1, 1])); output.print();

各步骤背后的关键参数

tf.layers.dense的inputShape：首个层必须显式给出输入形状（不含 batch 维）。本例inputShape: [1]表示每个样本是 1 维向量。从 tfjs-layers/src/exports.ts 的文档注释可知，首层除inputShape外，也可以使用batchInputShape（如[null, 1]，null表示 batch 维未定），或对部分层类型使用inputDim；首层之后各层由框架自动做形状推断。

compile的loss与optimizer：meanSquaredError是回归任务的常用损失；optimizer: 'SGD'是字符串形式的优化器标识符。在 tfjs-layers/src/optimizers.ts 的getOptimizer中维护了标识符到优化器实例的映射，可直接使用的内置优化器及其默认超参数如下：

映射表同时注册了小写形式（如sgd、adam），传入未知名时会抛出ValueError。

fit的epochs：await model.fit(xs, ys, {epochs: 500})返回一个Promise<History>，可用await等待训练完成。训练过程中的回调机制（如EarlyStopping、CallbackList）由 tfjs-layers/src/base_callbacks.ts 与 tfjs-layers/src/callbacks.ts 提供，支持按 batch / epoch 粒度介入训练流程。

predict的输入形状：推理输入[5]需与训练数据形状一致（[batch, 1]），本例传入tf.tensor2d([[5]], [1, 1])。训练 500 个 epoch 后，输出应接近9（即2×5-1），output.print()会在控制台打印张量值。

四、从 Sequential 到任意计算图：tf.sequential与tf.model

README 只演示了tf.sequential，但 tfjs-layers/src/exports.ts 的源码注释系统性地说明了两种模型的区别：

• tf.sequential()：只支持"线性堆叠"——每一层的输出是下一层的输入，没有分支与跳跃连接，是最简单的拓扑形式；
• tf.model()：更通用，支持任意无环计算图（DAG），需要显式指定输入与输出，层与层之间通过apply()连接符号张量。

典型的多层Sequential写法（首层给出输入形状，后续层自动推断）：

const model = tf.sequential(); model.add(tf.layers.dense({units: 32, inputShape: [50]})); model.add(tf.layers.dense({units: 4})); console.log(JSON.stringify(model.outputs[0].shape)); // [null, 4]

等价地，也可以用batchInputShape指定含 batch 维的输入形状，或直接传入层数组：

const model = tf.sequential({ layers: [ tf.layers.dense({units: 32, inputShape: [50]}), tf.layers.dense({units: 4}), ] });

而tf.model的典型用法是先通过tf.input({shape: [...]})创建输入符号张量，再逐层apply，最后以{inputs, outputs}组装模型：

const input = tf.input({shape: [5]}); const dense1 = tf.layers.dense({units: 10, activation: 'relu'}); const dense2 = tf.layers.dense({units: 4, activation: 'softmax'}); const output = dense2.apply(dense1.apply(input)); const model = tf.model({inputs: input, outputs: output}); model.predict(tf.ones([2, 5])).print();

注意tf.input仅在tf.model场景下必须使用；使用sequential时通过首层的inputShape或inputLayer指定即可（tfjs-layers/src/exports_layers.ts 中导出inputLayer）。

五、加载预训练 Keras 模型并部署到浏览器

这是 Layers 包最具实用价值的场景之一：把 Python 生态中训练好的 Keras 模型搬到浏览器端做推理或迁移学习。

第一步：Python 端保存为 TensorFlow.js 格式

在 Python 中安装转换工具tensorflowjs：

pip install tensorflowjs

随后用其转换 API 将 Keras 模型保存为 TensorFlow.js 格式：

import tensorflowjs as tfjs # ... 创建并训练你的 Keras 模型 ... # 将 Keras 模型保存为 TensorFlow.js 格式 tfjs.converters.save_keras_model(model, '/path/to/tfjs_artifacts/')

保存目录下会生成model.json（拓扑 + 权重清单）与分片的权重二进制文件，之后用任意 Web 服务器托管该目录，例如通过 URLhttp://foo.bar/tfjs_artifacts/model.json对外提供访问。

第二步：浏览器端加载

import * as tf from '@tensorflow/tfjs'; const model = await tf.loadLayersModel('http://foo.bar/tfjs_artifacts/model.json'); // 模型立即可用于推理、评估或重新训练（迁移学习）

loadLayersModel的完整实现位于 tfjs-layers/src/models.ts。从源码可以确认它支持字符串路径与 IOHandler 对象两种入参，加载逻辑要点包括：

• 字符串路径会先通过io.getLoadHandlers()匹配内置 handler；若找不到匹配，则回退为相对 HTTP 路径的io.browserHTTPRequest请求；
• model.json中的modelTopology既可以是keras.Model.to_json()风格的纯拓扑，也可以是keras.models.save_model()风格的完整模型 JSON；若存在model_config字段，加载器会优先取该字段作为拓扑；
• 加载完成后得到的同样是LayersModel实例，可直接执行predict、evaluate、fit。

更多模型来源：本地存储、IndexedDB 与文件上传

loadLayersModel的源码文档还展示了多种加载途径，与model.save()成对使用：

// 保存到浏览器 localStorage 后再加载 await model.save('localstorage://my-model-1'); const loadedModel = await tf.loadLayersModel('localstorage://my-model-1'); // 保存到 IndexedDB 后再加载 await model.save('indexeddb://my-model-1'); const loadedModel2 = await tf.loadLayersModel('indexeddb://my-model-1'); // 从 HTML file input 选择 model.json 与权重文件后加载 const model3 = await tf.loadLayersModel( tf.io.browserFiles([jsonUpload.files[0], weightsUpload.files[0]]));

这套统一的 IO 抽象（tf.io）让模型的保存与加载不绑定于具体存储介质，极大方便了离线应用与隐私敏感场景。

六、模型文件格式：Keras JSON 序列化约定

要真正理解"从 Python Keras 到浏览器"的互通机制，需要了解 Layers 包对 Keras JSON 格式的实现约定。tfjs-layers/src/keras_format/README.md 对该格式做了精确定义，其核心设计如下：

• 格式镜像 Python API：每个 Python 模型中的类实例都被序列化为一个 JSON 对象，包含class_name与其构造参数config；
• *Serialization类型：仓库用 TypeScript 接口描述每种类的磁盘 JSON 表示，config中的值可以是原始类型、原始类型数组或键值字典；如果某个构造参数本身是对象，则递归地表示为嵌套的*Serialization：

FooSerialization { class_name: 'Foo'; config: { bar: string; baz: number[]; qux: QuxSerialization; } }

• 反序列化是纯树状过程：解包时需要递归反序列化嵌套对象参数，再以还原后的参数调用顶层构造函数。唯一的例外是LayersModel的反序列化——因为它允许层之间互相引用以描述 DAG 计算图；
• 配套*Args类型：每个*Serialization都对应一个*Args类型，表示嵌套对象反序列化完成后真正传给构造函数的参数形态，从而保证类型安全。

仓库中keras_format/layers/目录下按类别细分了这些序列化类型（core_serialization.ts、convolutional_serialization.ts、recurrent_serialization.ts、pooling_serialization.ts、normalization_serialization.ts、embeddings_serialization.ts等），任何合法 Keras JSON 都可以借助这些类型以类型安全的方式被解析，这也是loadLayersModel与tf.models.modelFromJSON()（tfjs-layers/src/exports_models.ts）能够还原完整模型结构的底层基础。

七、运行时环境配置

Layers 包在加载时会通过 tfjs-layers/src/flags_layers.ts 向tfjs-core环境注册一个自有 flag：TOPOLOGICAL_SORT_CACHE_MAX_ENTRIES，默认值为100，用于控制层拓扑排序缓存的条目上限。该 flag 影响计算图执行器（tfjs-layers/src/engine/executor.ts）在执行模型时的拓扑排序缓存规模，在复杂模型与高性能场景下可以通过调整该值进行内存与速度的权衡。

八、总结

TensorFlow.js Layers 为 JavaScript 开发者提供了完整的 Keras 风格建模体验：通过@tensorflow/tfjs合并包或@tensorflow/tfjs-layers+@tensorflow/tfjs-core组合导入，使用tf.sequential()/tf.model()定义模型，经compile与fit完成训练，再以predict推理；同时凭借对 Keras JSON 序列化格式的完整类型化实现（tfjs-layers/src/keras_format/），能够无缝加载 Python Keras 训练产出的模型，将训练好的深度学习能力直接带到浏览器端。读者可以继续深入 tfjs-layers/src/ 目录下的engine/（模型执行引擎）、layers/（各内置层实现，含卷积、循环、NLP 与预处理层）与callbacks.ts（训练回调）等模块，进一步掌握每一层与训练机制的实现细节。

【免费下载链接】tfjsA WebGL accelerated JavaScript library for training and deploying ML models.项目地址: https://gitcode.com/gh_mirrors/tf/tfjs