首页 > 文章 > 前端

TensorFlow.js浏览器模型运行指南

时间：2025-10-28 13:22:28 302浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《TensorFlow.js浏览器模型运行教程》，聊聊，希望可以帮助到正在努力赚钱的你。

通过TensorFlow.js可在浏览器中直接运行机器学习模型，1. 引入CDN脚本加载库；2. 加载预训练模型如MobileNet；3. 将图像转为张量并推理；4. 使用dispose或tidy管理内存，实现高效、隐私安全的前端AI推理。

如何用TensorFlow.js在浏览器中运行机器学习模型？

在浏览器中运行机器学习模型可以通过 TensorFlow.js 实现，它允许你直接在前端加载和推理预训练模型，无需后端支持。整个过程不依赖服务器计算，响应快且保护用户隐私。

1. 引入 TensorFlow.js

最简单的方式是通过 CDN 在 HTML 文件中引入 TensorFlow.js：

引入后，你就可以在 JavaScript 中使用 tf 全局变量进行模型操作和张量计算。

2. 加载预训练模型

你可以加载已经转换为 TensorFlow.js 格式的模型。常见来源包括：

TensorFlow.js 官方提供的模型（如 coco-ssd、mobilenet）
自己用 Python 训练后导出的模型，再用 tfjs-converter 转换

以加载 MobileNet 为例：

import * as tf from '@tensorflow/tfjs';
const model = await tf.loadLayersModel('model.json');

或使用官方封装好的模型：

import * as mobilenet from '@tensorflow/tfjs-models/mobilenet';
const net = await mobilenet.load();

3. 预处理输入并执行推理

大多数图像模型需要将图像转换为张量。例如，从一个 img 元素获取数据：

const img = document.getElementById('myImage');
const tensor = tf.browser.fromPixels(img)
  .resizeNearestNeighbor([224, 224])
  .toFloat()
  .expandDims();

然后执行预测：

const prediction = await net.classify(tensor);
console.log(prediction);

对于自定义模型，使用 model.predict(tensor) 获取输出。

4. 释放资源

张量和中间结果会占用显存，推理完成后应手动清理：

tensor.dispose();
// 或批量清理
tf.dispose([tensor, output]);

也可以使用 tf.tidy() 自动管理内存：

tf.tidy(() => {
const result = model.predict(input);
return result;
});

基本上就这些。只要模型已转成 Web 友好格式，TensorFlow.js 能在多数现代浏览器中高效运行推理任务，适合做图像分类、姿态检测、文本生成等轻量级 AI 功能。关键点是模型格式正确、输入预处理匹配训练方式，以及注意内存管理。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~