如何用TensorFlow.js在浏览器中运行机器学习模型？-js教程-PHP中文网

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

紅蓮之龍

发布： 2025-09-29 19:24:02

原创

614人浏览过

通过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 元素获取数据：

一览运营宝

一览“运营宝”是一款搭载AIGC的视频创作赋能及变现工具，由深耕视频行业18年的一览科技研发推出。

查看详情

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 功能。关键点是模型格式正确、输入预处理匹配训练方式，以及注意内存管理。

以上就是如何用TensorFlow.js在浏览器中运行机器学习模型？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript归并排序实现中的常见陷阱与优化指南 JavaScript：高效实现对象数组中相邻相同属性值的条件递增 JavaScript归并排序实现：常见陷阱与优化指南 javascript脚本怎么编写_javascript脚本编写入门与基础语法详解 JavaScript键盘事件控制音频播放教程：聚焦与全局监听策略