如何将自定义训练的TensorFlow 2.0模型部署到React.js应用？

核心结论 #

不用非得部署成API接口，直接借助TensorFlow.js的TFLite Runtime就能在浏览器端加载模型，和你之前用cocoSsd的本地推理模式逻辑一致，只是替换模型加载与推理的代码即可。

具体操作步骤 #

1. 安装依赖 #

在React项目根目录执行命令，安装TensorFlow.js及TFLite相关包：

npm install @tensorflow/tfjs @tensorflow/tfjs-tflite

2. 放置模型文件 #

将你的.tflite模型文件放到React项目的public目录下（比如public/models/my-custom-model.tflite），这样打包后可通过静态资源路径直接访问。如果有配套的标签文件（如labels.txt），也一并放入该目录。

3. 替换原有cocoSsd的代码逻辑 #

把原来调用cocoSsd加载、推理的代码，替换为TFLite模型的处理逻辑，示例如下：

import * as tf from '@tensorflow/tfjs';
import { TFLiteModel } from '@tensorflow/tfjs-tflite';

let customModel = null;
// 加载自定义模型
async function loadModel() {
  if (!customModel) {
    customModel = await TFLiteModel.load('/models/my-custom-model.tflite');
    // 如果有标签文件，可在这里同步加载
    // const labelsResponse = await fetch('/models/labels.txt');
    // const labels = await labelsResponse.text();
    // this.labelsList = labels.split('\n');
  }
}

// 图像检测推理函数
async function runDetection(imageElement) {
  await loadModel();

  // 图像预处理：必须和训练模型时的输入规则完全一致
  const inputTensor = tf.browser.fromPixels(imageElement)
    .resizeNearestNeighbor([224, 224]) // 替换为你模型要求的输入尺寸
    .toFloat()
    .div(tf.scalar(255.0)) // 归一化规则和训练时保持一致
    .expandDims(0); // 增加batch维度

  // 执行推理
  const output = await customModel.predict(inputTensor);
  
  // 解析输出结果：根据你的模型输出格式调整
  // 示例：如果是分类模型，提取最大概率的类别
  const outputData = await output.data();
  const maxScoreIndex = outputData.indexOf(Math.max(...outputData));
  const detectionResult = {
    classIndex: maxScoreIndex,
    score: outputData[maxScoreIndex]
    // 如果有标签，可对应上：className: this.labelsList[maxScoreIndex]
  };

  // 释放张量，避免浏览器内存泄漏
  inputTensor.dispose();
  output.dispose();

  return detectionResult;
}

4. 适配原有业务流程 #

将项目中原来调用cocoSsd.detect()的地方，替换为上述的runDetection()函数，同时根据自定义模型的输出格式（比如目标检测的边界框、类别、置信度）调整结果渲染逻辑。

关键注意事项 #

• 预处理规则必须和训练阶段完全匹配：包括图像尺寸、归一化方式、颜色通道顺序（RGB/BGR），否则推理结果会完全错误。
• 性能优化：可通过tf.setBackend('webgl')启用GPU加速，大幅提升浏览器端推理速度。
• CORS问题：如果模型放在外部服务器，需确保服务器配置了CORS允许你的React域名访问；放在本地public目录则无需处理。

备选方案：API化部署 #

如果你的模型体积过大（超过100MB），或者需要严格控制模型权重不暴露，也可以将模型部署到Firebase Functions，封装成HTTP接口，React通过fetch或axios调用。但这种方式会增加网络延迟，适合对客户端性能要求极低的场景，优先推荐浏览器端本地加载方案。

内容的提问来源于stack exchange，提问作者3dsss