Flutter tflite_flutter图像分类精度异常及预处理图像展示方案

问题背景 #

在项目中使用v0.9.0版本的tflite_flutter库加载自定义TFLite模型实现图像分类功能，模型推理采用RGB通道，配置与Python端图像分类脚本完全一致，但同一张图像分别在Python脚本、移动端运行推理时出现精度不一致问题。需要实现预处理后输入图像的可视化，完成精度差异排查，同时确认Flutter是否具备类似Python matplotlib的图像处理与可视化能力支撑排查工作。

现有实现代码 #

步骤1：从图库获取图像 #

String imageFile;
_getFromGallery() async {
  try {
    PickedFile? pickedFile = await ImagePicker().getImage(
      source: ImageSource.gallery,
      maxWidth: 1800,
      maxHeight: 1800,
    );
    if (pickedFile != null) {
       imageFile = pickedFile.path;
    } else {
      print("File is not available------");
      openPhoneSetting();
      throw Exception('File is not available');
    }
  }  on PlatformException catch (e) {
    openPhoneSetting();
    print("File is not available+++++++");
    print("Unsupported operation" + e.toString());
  }
}

步骤2：解码图像 #

File imageFile = File(imageFile);
Uint8List imageRaw = await imageFile.readAsBytes();
img.Image? imageInput = img.decodeImage(imageRaw!);
var prediction = _classifier.predict(imageInput!);
var string = prediction.label;

步骤3：图像预测逻辑 #

TensorImage? _inputImage;
Category predict(Image image) {
  print("Image Dimension::::${image.height} ${image.width}");
  final pres = DateTime.now().millisecondsSinceEpoch;
  _inputImage = TensorImage(_inputType!);
  _inputImage?.loadImage(image);
  _inputImage = _preProcess();
  final pre = DateTime.now().millisecondsSinceEpoch - pres;
  print('Time to load image: $pre ms');

  final runs = DateTime.now().millisecondsSinceEpoch;
  interpreter!.run(_inputImage!.buffer, _outputBuffer!.getBuffer());
  final run = DateTime.now().millisecondsSinceEpoch - runs;

  print('Time to run inference: $run ms');

  Map<String, double> labeledProb = TensorLabel.fromList(
      labels!, _probabilityProcessor.process(_outputBuffer))
      .getMapWithFloatValue();
  final pred = getTopProbability(labeledProb);

  return Category(pred.key, pred.value);
}

步骤4：图像预处理逻辑 #

TensorImage _preProcess() {
  return ImageProcessorBuilder()
      .add(ResizeOp(
      _inputShape![1], _inputShape![2], ResizeMethod.BILINEAR))
      .build()
      .process(_inputImage!);
}

排查与实现方案 #

• Flutter完全可以实现预处理图像的可视化与逐像素对比，不需要引入类matplotlib的重型依赖，直接使用现有依赖库即可完成：
  预处理后的_inputImage为TensorImage类型，可直接调用.image属性获取img.Image格式的预处理后图像对象，该对象就是实际送入模型推理的输入数据。通过img.encodePng()将对象转为Uint8List格式的字节流，传入Flutter自带的Image.memory()组件即可直接在页面展示，和Python端预处理输出的图像做直观对比。
• 结合现有代码，精度不一致的核心问题大概率来自以下三个预处理对齐缺口：
  1. 通道格式不匹配：img.decodeImage默认解码出的图像为RGBA四通道格式，当前预处理流程没有显式做通道转换，部分版本的tflite_flutter在加载带Alpha通道的图像时，会出现通道顺序错位、Alpha通道值混入RGB通道的问题，需要在预处理流程中新增ConvertOp(TfLiteType.float32, colorSpace: ColorSpaceType.RGB)，强制将图像转为三通道RGB格式，剔除Alpha通道。
  2. 像素归一化逻辑缺失：当前预处理仅做了双线性插值resize，没有对齐Python端的像素值归一化规则。如果Python端做了0-255到0-1/(-1,1)的像素缩放，或是基于数据集均值、标准差做了标准化，当前送进模型的像素值分布和Python端差异极大，会直接导致推理精度偏差，需要在ImageProcessor中新增对应的NormalizeOp完成数值对齐。
  3. 取图阶段的不可控压缩：当前ImagePicker配置了maxWidth、maxHeight为1800，该压缩逻辑由系统原生实现，不同设备、系统版本的插值算法和Python端PIL/OpenCV的resize实现存在细微差异，建议将maxWidth、maxHeight设为null获取原图，所有缩放操作统一在Dart侧通过img库或ResizeOp完成，保证预处理逻辑完全可控。
• 可视化对比的实现代码参考：

// 预处理完成后提取可可视化的图像对象
img.Image preprocessedImg = _inputImage!.image;
// 转为可被Flutter组件识别的字节流
Uint8List preprocessedImgBytes = Uint8List.fromList(img.encodePng(preprocessedImg));
// 页面中直接展示即可
// Image.memory(preprocessedImgBytes)

// 逐像素打印数值，和Python端预处理结果做精准对比
for (int x = 0; x < 10; x++) {
  int pixelVal = preprocessedImg.getPixel(x, 0);
  print("坐标($x, 0) R:${img.getRed(pixelVal)} G:${img.getGreen(pixelVal)} B:${img.getBlue(pixelVal)}");
}

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