TF.js预训练模型：图像、文本与语音

可视化演示

演示TF.js在Web端加载预训练模型进行图像、文本与语音推理的完整流程。

模型加载：请大厨进店

想象你开了一家快餐厅，重金请来一位在米其林三星后厨历练过的全能大厨。大厨答应来，但他得先从总店“调过来”——陪伴他多年的刀具、灶台布局、秘制香料，全都要搬到你的店里。对他而言，“换店”意味着重铺一套顺手的工作台；对预训练模型来说，这个“搬店”的过程就是模型加载。

在 TF.js 的世界里，tf.loadLayersModel 和 tf.loadGraphModel 是请大厨入店的“两条专用通道”。前者负责迎接“Keras 出身”的模型——也就是用 Python 的 Keras API 训练、导出为 JSON 加权重分片的组合；后者则迎接来自 TensorFlow 生态的 SavedModel / GraphDef 格式。你只需提供一个 URL，TF.js 就会先下载描述文件 model.json，再由它找到权重分片逐一拉取。除了 TF.js，ONNX.js 是另一条并行的“传菜管道”，但本文以 TF.js 为主角。

加载完成后，模型对象已“上岗”：你可以调用 model.predict(input) 让它干活。这个函数的底层是一条计算图——从输入张量出发，逐层做矩阵乘法、卷积、激活，最后在输出端给出预测。加载细节里藏着几个工程坑：模型文件大时要上 CDN；加载是异步的，要用 await 处理；若模型 URL 失效必须捕获异常并给出友好提示。

大厨就位，刀具齐整。接下来就该看看他如何面对形形色色的客人了——第一位客人端着一盘照片走了过来。

图像输入：切配熟悉的食材

第一位客人递来的不是食材，而是手机里的照片。大厨不会把带着反光、滤镜的照片直接丢进炒锅，他会先切出自己习惯的规格。图像识别模型同样“挑剔”：它认识的食材是固定尺寸、经过标准化的数字矩阵，而不是浏览器里的 <img> 元素。

在 TF.js 中，tf.browser.fromPixels() 是第一个中转站，它把图像像素读取为 H×W×3 的张量（3 代表 R、G、B 三个通道）。随后通常要链式调用 resizeBilinear([224,224]) 统一尺寸，再 toFloat().div(255) 完成归一化。为什么是 224×224？因为 MobileNet 等主流预训练模型正是在这个分辨率上练就的“手艺”。

更严格的预处理还要求按通道减去均值、除以标准差——比如 ImageNet 数据集的 mean=[0.485, 0.456, 0.406]、std=[0.229, 0.224, 0.225]。这组数字是大厨食谱里的“火候刻度”，差一点都不香。若跳过预处理，模型相当于拿到一堆“没切过的整块猪肘”，输出自然离谱。若做目标检测，COCO-SSD 模型不仅要求同样的预处理，还会输出多个目标框坐标与类别，进一步加大“切配”的讲究。

食材按大厨的要求切成了均匀的“丁”，接下来的炒制顺理成章。

文本输入：大厨的私房词典

第二位客人递来一张皱巴巴的菜单，写着“麻婆豆腐，微辣”。大厨读菜单时看到的不是笔画，而是脑子里浮现的“味觉向量”——花椒的麻、豆瓣酱的咸鲜、豆腐的嫩滑。文本模型也一样，它要通过一本“数字词典”把文字翻译成向量的语言。

第一步是分词（tokenize）：句子被切成词或子词，每个 token 在词典里对应一个整数 id，比如“麻婆豆腐”映射为 [102, 15, 88]。社区封装好的 @tensorflow-models/universal-sentence-encoder 会把整句话一键编码为 512 维向量；BERT 类模型则需要更细致的 token 输入，还附带 attention mask。输入张量的形状通常是 (1, seq_len)，类型为 int32。

得到 token 索引只是“识字”，真正“懂味”靠的是嵌入矩阵 E——一个 V×d 的查表，把每个整数 id 映射成稠密向量，这一步叫嵌入向量查找。预训练模型的“阅历”就藏在这些向量里。情感分析模型的输出端接一个分类头，能给出“好评 92%”这样的分数；GPT 类生成模型则输出下一个 token 的概率分布，每次采样拼接，实现逐字续写。

大厨的词典越厚，读菜单的“品味”就越准——预训练模型的嵌入向量越丰富，语义理解越细腻。

语音输入：竖起耳朵听波形

第三位客人隔着玻璃喊了一声“少辣，快一点！”，后厨噪音不小，大厨却能精准抓住关键词。他的秘诀不是听力超群，而是善于提取声线里的频谱特征——语调、共振峰、节奏，这些才是他听得懂的“语音纹理”。

浏览器里，麦克风经 AudioContext 解出的是一串原始采样点（比如每秒 16000 个）。直接把这上万个浮点塞给模型既不高效也不稳定，所以第一步是波形分帧：每 20~30 毫秒切一帧，帧与帧之间重叠，再对每帧加窗做短时傅里叶变换（STFT），得到一个二维频谱特征矩阵。这一步与大厨“听语气”如出一辙：放弃波形细节，抓住频率结构。

TF.js 社区包 @tensorflow-models/speech-commands 已封装好“录音→分帧→特征→分类”全链路，适合唤醒词识别（如"Hey Siri"）。完整语音转录则需要更深模型配合 CTC 解码——模型输出每一帧的字符合成概率，通过解码策略合并成一句完整的话。

就像大厨听到的是语气和关键词，语音模型听到的是梅尔系数、频谱峰和语音纹理——特征对了，转录自然正确。

后处理：装盘、点缀、上桌

大厨炒完菜，不会连铁锅带油烟端给顾客。他会装盘、摆盘、确认温度、撒上葱花——这些收尾动作，对应到 AI 推理里就是后处理。

模型的裸输出是一个张量，里面的数值往往是 logits——可以理解为大厨刚出锅的“半成品”。分类模型最后一层有 K 个 logits，它们不是概率：加起来不等于 1，还可能出现负数。Softmax 就像“调味”步骤，把 logits 指数化再归一化，变成一组和为 1 的概率。拿到概率后还要做“质检”：置信度低于阈值（如 0.5）的结果直接丢弃，宁可不报也不能报错。

图像分类往往取 top-k 个标签并渲染成条形图，这是结果可视化；语音转录则用 CTC 贪心解码，把帧级概率合并成词句，这是解码策略。在 TF.js 中，所有输出都需要 await output.data() 把张量取成普通 JS 数组，才能在页面上绘制图表。

装盘既不能烫手也不能寡淡——后处理既保证准确性，又保证用户看得懂。

部署优化：后厨提速指南

午市高峰来了，点单如山。大厨炒得再快，如果传菜道只有一条、锅具又大又沉，顾客照样等得不耐烦。让 AI 在浏览器里流畅运行，同样是一套“后厨工程”。

第一个瓶颈是模型体积。MobileNet 约 16MB，BERT 轻量模型约 25MB，更大的模型动辄数百 MB。int8 量化是最直接的“换小锅”：把 FP32 权重按比例缩放、取整、截断到 0~255 的整数，体积直接缩到四分之一。模型裁剪则是“砍掉冗余配菜”——删除贡献极低的网络通道。TF.js Converter 在模型转换时即可顺手完成两步。

第二个瓶颈是运行时性能。WebGL 后端让推理跑在 GPU 上；把推理放进 Web Worker 则避免阻塞 UI 主线程；模型文件用 HTTP 缓存或 IndexedDB 存下来，二次访问秒开。要评估效果，可以用 tf.engine().profile() 分析每一层耗时。一套组合拳下来，“首屏加载 3 秒内、单次推理 100 毫秒内”是现实的工程红线。

灶台规格统一、备料提前就位、高峰订单走独立窗口——轻量化部署就是一家“快而不乱”的后厨。

AI 应用场景

Python 演示

# 模拟 TF.js 预训练模型的三模态加载、推理与后处理流程import numpy as npimport jsonfrom pathlib import Path  class PretrainedPipeline:    """模拟 TF.js 预训练模型在浏览器中的完整推理流程"""     def __init__(self, model_dir="models"):        self.model_dir = Path(model_dir)        self.model_dir.mkdir(exist_ok=True)        self.loaded_models = {}     def load_model(self, name):        """加载模型: 对应 tf.loadLayersModel 的异步过程"""        print(f"[加载] 正在加载 {name} ...")        self.loaded_models[name] = True        return self     @staticmethod    def softmax(logits):        """后处理: logits -> 概率分布"""        exp = np.exp(logits - np.max(logits))        return exp / exp.sum()     def predict_image(self, pixels):        """图像推理: 像素归一化 -> 模拟 logits -> softmax"""        x = np.array(pixels, dtype=np.float32) / 255.0        logits = np.array([2.1, 0.3, -1.2, 0.8])        prob = self.softmax(logits)        return {            "class_id": int(prob.argmax()),            "confidence": round(float(prob.max()), 3),            "distribution": prob.round(3).tolist(),        }     def predict_text(self, token_ids):        """文本推理: token 序列 -> 平均嵌入 -> 情感打分"""        emb = np.array(token_ids, dtype=np.float32)        score = float(np.tanh(emb.mean() * 0.5))        return {"sentiment": "positive" if score > 0 else "negative",                "score": round(score, 4)}     def predict_audio(self, frames):        """语音推理: 波形帧 -> 均方根能量 -> 转录结果"""        energy = float(np.sqrt(np.mean(np.square(frames))))        return {"transcript": "你好" if energy > 0.3 else "...",                "energy": round(energy, 4)}     def run_web_demo(self):        """综合演示: 加载三个模型并依次执行推理"""        self.load_model("mobilenet_v2")        self.load_model("bert_tiny")        self.load_model("deepspeech_tfjs")         image_out = self.predict_image([128, 64, 200, 15, 90, 230])        text_out = self.predict_text([102, 15, 88, 3, 204])        audio_out = self.predict_audio([0.1, -0.3, 0.4, -0.2, 0.5])        print("[图像]", image_out)        print("[文本]", text_out)        print("[语音]", audio_out)         return {"image": image_out, "text": text_out, "audio": audio_out}  if __name__ == "__main__":    pipe = PretrainedPipeline()    result = pipe.run_web_demo()    with open("demo_result.json", "w", encoding="utf-8") as f:        json.dump(result, f, ensure_ascii=False, indent=2)    print("结果已保存至 demo_result.json")

1. self.loaded_models[name] = True记录已加载的模型，对应 TF.js 中模型对象的缓存复用。
2. exp = np.exp(logits - np.max(logits))减去最大值防止指数溢出，这是数值稳定的 softmax 标准写法。
3. x = np.array(pixels, dtype=np.float32) / 255.0模拟图像像素的 0~1 归一化预处理。
4. prob = self.softmax(logits)后处理的关键一步：把裸 logits 转成概率分布。
5. score = float(np.tanh(emb.mean() * 0.5))模拟文本 token 嵌入取平均后映射为情感分数。
6. energy = float(np.sqrt(np.mean(np.square(frames))))模拟语音波形的均方根能量特征提取。
7. pipe.run_web_demo()主入口：依次加载并推理三个模态模型，对应真实项目的初始化流程。

常见误区

面试题