用TensorFlow.js在浏览器运行AI模型教程

本文详解了如何利用TensorFlow.js在浏览器中直接运行AI模型，涵盖模型转换（如用tfjs-converter将Keras模型转为Web友好格式）、异步加载、输入预处理（图像缩放、归一化、张量化）、predict推理全流程，并强调通过WebGL加速、内存优化（如tidy()）和用户体验设计（加载提示、轻量模型选型）来应对前端AI的性能与兼容性挑战——让AI真正“飞入”用户浏览器，实现零后端依赖、低延迟、高隐私的智能化网页体验。

在浏览器中运行AI模型已成为前端智能化的重要方向，借助TensorFlow.js这类机器学习库，开发者可以直接在网页中加载和执行训练好的模型，无需依赖服务器端计算。整个过程不依赖后端，响应更快，也更保护用户隐私。

选择并准备合适的模型

要让AI模型在浏览器中运行，首先要确保模型是为Web环境优化过的。通常使用TensorFlow训练的模型需要转换成TensorFlow.js支持的格式（如.json和二进制权重文件）。

• 使用tfjs-converter工具将Python中训练好的Keras或SavedModel模型转为Web可用格式。
• 推荐使用轻量级模型（如MobileNet、Tiny YOLO），避免因体积过大影响页面加载速度。
• 也可以直接使用TensorFlow.js提供的预训练模型，例如图像分类、姿态检测、语音识别等。

在网页中引入并加载模型

通过npm安装或CDN引入TensorFlow.js库后，即可在JavaScript中加载模型并准备推理。

• 使用tf.loadLayersModel()从远程或本地路径加载模型JSON文件。
• 确保服务器支持CORS，否则跨域请求会失败。
• 模型加载是异步操作，需用async/await或Promise处理完成后的逻辑。

const model = await tf.loadLayersModel('https://example.com/model.json');
console.log('模型加载完成');

预处理输入并执行推理

浏览器中的数据（如图像、音频）需要转换为张量（tensor）才能送入模型。

• 使用tf.browser.fromPixels()将图像元素转为tensor，并调整尺寸和归一化。
• 对输入进行批处理（batching）以匹配模型期望的shape。
• 调用model.predict(inputTensor)获取输出结果。

const img = document.getElementById('inputImage');
const tensor = tf.browser.fromPixels(img)
  .resizeNearestNeighbor([224, 224])
  .toFloat()
  .div(tf.scalar(255))
  .expandDims();
  
const prediction = model.predict(tensor);

优化性能与用户体验

在浏览器中运行AI模型可能面临性能瓶颈，尤其在低端设备上。

• 启用WebGL后端提升计算速度：tf.setBackend('webgl')。
• 避免频繁创建和销毁张量，使用tidy()清理中间变量防止内存泄漏。
• 添加加载动画或进度提示，提升用户等待体验。

到这里，我们也就讲完了《用TensorFlow.js在浏览器运行AI模型教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！