React中基于TensorFlow.js上传图片传入Keras模型实现预测及异常排查

• 技术目标：基于React + TensorFlow.js，在浏览器端加载自有Keras二分类.h5模型，支持用户从本地选择图片输入，输出“是/否”的二分类结果
• 已尝试操作：
  • 首次转换为Layers格式模型加载时，触发Unknown layer: RandomFlip报错，无法正常运行
  • 调整为图模型加载逻辑后，先后出现输入张量形状不匹配报错，调整张量形状后，无论输入何种图片，预测结果始终固定返回1
  • 目前预测输出的张量特征：形状为[1,1]的float32类型，无分类区分度
• 现有疑问：如何判定.h5模型适配的TF.js模型格式，当前流程的问题节点在哪里

模型转换环节错配 #

• 当前使用的图模型转换命令参数存在本质错误：命令中指定--output_format tfjs_layers_model，输出的本就是Layers格式模型，并非图模型，混用loadGraphModel加载、错配模型格式，是加载、推理流程失效的核心诱因
• 之前记录的第二次转换命令存在路径书写错误：输出路径写成了/myUser/mariomendes/Documents/convert-keras-model，和系统实际的用户目录（/Users/myUser/Documents/）不匹配，路径错位会导致转换后的模型文件不完整、权重映射错位，同样会引发推理异常
• 关于RandomFlip层的报错不需要通过切换模型格式解决：Keras模型中用于训练阶段数据增强的RandomFlip、RandomZoom类预处理层，在旧版转换器中存在兼容问题，只要在导出推理模型时剔除这类仅训练阶段生效的层，保留推理主干和训练权重不变，即可正常转换为Layers格式模型
• 关于模型格式选择的判定规则：.h5格式本质是Keras模型的序列化存储格式，没有强制要求必须转图模型或Layers格式，两类格式的选择逻辑很简单：如果模型仅包含常规Keras推理层、无自定义非兼容层，优先选Layers格式（调试方便、性能稳定）；如果模型包含自定义层、或者Layers格式转换存在无法兼容的报错，再转图模型格式

输入预处理未对齐训练规则 #

• 当前图片预处理逻辑仅实现了转单通道、缩放到380*380尺寸、增加batch维度，完全没有对齐原Keras模型训练时的输入归一化要求：
  • 原模型要求的输入形状是[-1,380,380,1]，对应单通道灰度图、像素值的分布必须和训练时完全一致，如果训练时要求像素值缩放到0-1范围、或做过均值标准化，当前代码直接将0-255范围的uint8像素值直接转float传入模型，输入分布和训练分布偏差极大，模型极易输出固定的偏向性结果
  • 虽然使用tf.browser.fromPixels(img, 1)实现了单通道读取，但需要确认缩放、扩维后的张量维度顺序为[batch数, 高, 宽, 通道数]，没有出现维度顺序错位

预测结果解析逻辑错误 #

• 当前拿到的[1,1]形状的输出是sigmoid层输出的0-1连续概率值，不是0/1离散类别值
• 现有代码直接对概率浮点数做parseInt转换，只要浮点数大于0就会被截断为1，完全忽略概率值的实际大小，这是所有输入都返回1的直接原因
• 正确的解析逻辑是读取张量内的实际概率值，以0.5为判定阈值：大于0.5判定为1（是），小于等于0.5判定为0（否）

图模型调用方式错误 #

• 即使加载的是真的图模型，直接传入裸张量调用model.predict()也无法正确完成推理：此前的报错已经提示图模型需要按照字典格式传入，输入键名为image_tensor，必须按照model.execute({image_tensor: 张量})的格式传参，错配的调用方式下模型无法接收到正确的输入，自然输出固定结果

前端代码逻辑的隐性问题 #

• 模型加载的useEffect没有设置空依赖数组，当前写法会在组件每次重新渲染时都触发loadModel的异步调用，虽然有if(!model)的判空逻辑，但重复调用的异步流程存在竞态风险，可能导致模型加载状态异常
• 张量处理完成后没有及时做内存释放，浏览器端的tf张量如果不及时dispose或包裹在tf.tidy作用域内，会快速累积内存占用，导致页面崩溃

• 第一步：重新导出推理模型
  1. 加载原.h5模型，剔除所有仅训练阶段生效的随机预处理层（RandomFlip、RandomCrop等），保留推理主干的训练权重
  2. 重新执行Layers格式模型转换，确保转换器输出的是符合要求的tfjs Layers模型
• 第二步：对齐输入预处理
  1. 回溯原模型训练时的输入预处理规则，明确像素值的缩放要求（如除以255转0-1区间、按固定均值做标准化等）
  2. 调整张量处理代码：完成像素读取、尺寸缩放、单通道转换后，按照训练要求做对应数值缩放，最后扩展batch维度得到形状为[1, 380, 380, 1]的输入张量，所有张量操作使用tf.tidy包裹避免浏览器内存泄漏
• 第三步：修正预测解析逻辑
  1. 读取预测输出张量的实际概率值，不要直接做整数截断
  2. 用0.5作为分类判定阈值，替换现有的parseInt解析逻辑
  3. 用若干张明确分类结果的测试图片做验证，检查输出概率值是否存在合理区分度
• 第四步：如必须使用图模型
  1. 将转换命令的输出格式参数修正为tfjs_graph_model，重新导出图模型
  2. 加载时使用loadGraphModel，调用前先打印模型的输入签名，确认所需的输入键名，按照字典格式传入张量完成推理

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