在 OpenHarmony 上跑通 tflite_web：WASM 推理适配要点
在 OpenHarmony 上用 Flutter Web 做混合应用时，端侧 AI 推理通常会考虑原生 MindSpore Lite，但如果手里已经有一堆 TFLite 模型，又不想做模型转换，tflite_web 提供了一个基于 WebAssembly 的轻量方案。它的原理是把 TFLite 推理引擎编译成 WASM，通过 JS 互操作与 Flutter 通信，利用 Webview 的 WebGL 或 WebGPU 后端做张量加速。
我最近在鸿蒙 Web 容器里跑通了基本的推理流程，这里记录一些适配细节和坑。
整体流程
调用流程大致是这样的：由 Flutter Web 层发起推理请求，经过 tflite_web 接口，将模型和数据交给 JS 侧的 tflite-wasm，WASM 执行内核利用 SIMD 优化，最终在鸿蒙 Webview 的 GPU 加速下完成张量计算，结果返回 UI 展示。
选择这个方案是因为：
- 已有的
.tflite模型可以直接用，不用再走模型转换。 - 同一套推理逻辑在鸿蒙、Android、iOS 以及 PC 浏览器上行为一致，适合多端项目。
- 推理跑在 Web 独立线程，不占 UIAbility 主线程，响应不会卡顿。
基础适配
鸿蒙 Webview 基于 Chromium 内核，对 WASM 的支持是内置的，所以 tflite_web 可以直接用。pubspec.yaml 里加上依赖就行：
dependencies:
tflite_web: ^0.1.0-alpha
模型加载
加载 .tflite 模型时，优先走本地资源，避免从 CDN 动态下载。模型文件放在 web/assets 目录下。
import 'package:tflite_web/tflite_web.dart';
Future<TFLiteModel> loadModel() async {
final model = await TFLiteModel.fromAsset(
'assets/mobilenet.tflite',
tfLiteLibUrl: 'https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite/dist/',
);
return model;
}
上面的 tfLiteLibUrl 虽然指向 CDN，但初始化时实际上可以替换成本地路径，后面安全部分会提到。
图像推理
对图像做分类推理时，需要把图片数据构造成张量。下面是一个示例：
import 'package:tflite_web/tflite_web.dart';
Future<void> runInference(TFLiteModel model, List<num> inputData) async {
// inputData 是一维或高维数组，这里假定是 [1, 224, 224, 3] 的输入
final inputTensor = TFLiteTensor(inputData, [1, 224, 224, 3]);
final outputs = await model.predict(inputTensor);
final resultData = outputs.first.data as List<num>;
// 处理 resultData...
}
我试过的两个场景
实时 OCR 区域提取
在鸿蒙 Webview 页面里，从 Canvas 拿到像素数据，塞进模型，输出文字区域坐标。
void startScanFrame(TFLiteModel model, CanvasRenderingContext2D ctx) {
final imageData = ctx.getImageData(0, 0, 224, 224).data;
model.predict(TFLiteTensor(imageData, [1, 224, 224, 4])).then((outputs) {
_drawOverlay(outputs.first.data);
});
}
眼球追踪坐标计算
平板 Web 端通过摄像头获取面部特征点，模型预测注视坐标。
void onGazeInference(TFLiteModel model, List<num> faceNodes) async {
final input = TFLiteTensor(faceNodes, [1, 128, 128, 1]);
final results = await model.predict(input);
final coords = results.last.data as List<num>;
_moveGazeCursor(coords[0], coords[1]);
}
适配时踩过的坑
WASM 后台线程限制
OpenHarmony 的 Webview 在低功耗模式下可能限制 SharedArrayBuffer，而 tflite_web 为了速度会依赖多线程。如果系统策略不允许跨源隔离环境，SIMD 加速可能失效。加载模型前最好检测一下 WASM 兼容性，如果不行就退化到单线程，避免直接崩溃。
网络下载与安全沙箱
默认情况下，tflite_web 可能尝试从 CDN 下载 WASM 二进制。但在内网测试或生产加固环境，动态下载往往被禁用。所以需要把所有 .wasm 和 .js 文件都打包到应用的 rawfile 或 web/assets 里，初始化时指定本地路径，比如：
TFLiteModel.fromAsset(
'assets/mobilenet.tflite',
tfLiteLibUrl: 'assets/tfjs-tflite/', // 指向本地目录
);
这样就不依赖外网了。
一个完整的监控页面示例
下面这个页面可以用来展示引擎初始化状态和手动触发一次推理，适合在适配阶段调试用。
import 'package:flutter/material.dart';
class TfliteMonitorPage extends StatefulWidget {
const TfliteMonitorPage({super.key});
@override
State<TfliteMonitorPage> createState() => _TfliteMonitorPageState();
}
class _TfliteMonitorPageState extends State<TfliteMonitorPage> {
String _statusOutput = "引擎未初始化...";
bool _isEngineReady = false;
@override
void initState() {
super.initState();
_initEngine();
}
Future<void> _initEngine() async {
setState(() {
_statusOutput = "[系统日志] 正在沙箱环境初始化 WASM 推理内核驱动...\n";
});
await Future.delayed(const Duration(milliseconds: 700));
setState(() {
_statusOutput += "WebGL 1.0/2.0 计算后端已就绪\n" +
"包装映射：tflite_web (WASM Worker)\n" +
"异构计算雷达监控已开启";
_isEngineReady = true;
});
}
void _executeDemo() {
if (!_isEngineReady) return;
setState(() {
_statusOutput = "====== 异构计算推理轨迹 ======\n" +
"[系统] 侦测到指令下发，开始张量下发 (WebGL Memory)\n" +
"[模块] 正在强力驱动 TensorFlow Lite 轻量大模型推理内核运转\n";
});
Future.delayed(const Duration(milliseconds: 600), () {
if (!mounted) return;
setState(() {
_statusOutput += "[指令] model.predict(TFLiteTensor(imageData, [1, 224, 224, 4]))\n";
_statusOutput += "[反馈] 成功识别单据 OCR 文字区域点位。\n";
_statusOutput += "结论：针对鸿蒙 Web 环境的 AI 适配链路运行极其稳健！";
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF121212),
appBar: AppBar(
title: const Text('tflite_web 演示', style: TextStyle(color: Colors.white, fontSize: 16)),
backgroundColor: const Color(0xFF1E1E1E),
elevation: 0,
centerTitle: true,
iconTheme: const IconThemeData(color: Colors.white),
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text('🎯 当前演示场景：', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.amberAccent)),
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.amber.withOpacity(0.05),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.amber.withOpacity(0.2)),
),
child: const Text('搭建异构计算 WebGL 后台管线并强力驱动 TensorFlow Lite 轻量大模型推理内核运转', style: TextStyle(fontSize: 14, color: Colors.blueGrey, height: 1.5)),
),
const SizedBox(height: 24),
const Text('💻 异构计算监控与推理响应：', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.amberAccent)),
const SizedBox(height: 8),
Expanded(
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color(0xFF000000),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.amber.withOpacity(0.3)),
boxShadow: [
BoxShadow(color: Colors.amber.withOpacity(0.1), blurRadius: 20, offset: const Offset(0, 0)),
],
),
child: SingleChildScrollView(
child: Text(
_statusOutput,
style: const TextStyle(
fontFamily: 'Courier',
fontSize: 13,
color: Colors.amber,
height: 1.6,
),
),
),
),
),
const SizedBox(height: 24),
ElevatedButton.icon(
onPressed: _isEngineReady ? _executeDemo : null,
icon: const Icon(Icons.flash_on, color: Colors.black),
label: const Text('启动 WASM 内核分析', style: TextStyle(fontSize: 16, color: Colors.black, fontWeight: FontWeight.w900)),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amberAccent,
disabledBackgroundColor: Colors.amber.withOpacity(0.3),
padding: const EdgeInsets.symmetric(vertical: 18),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
elevation: 8,
),
),
],
),
),
),
);
}
}
上面的代码只是一个监控界面，实际推理逻辑需要替换成真实的模型调用。
总结
tflite_web 在 OpenHarmony Web 环境下可以正常运作，但需要注意 WASM 线程策略和网络兼容性。把推理耦合进 Web 容器，对多端一致性和快速复用已有模型是有帮助的。后续可以看看如何将 Web 端的 TFLite 推理结果跟鸿蒙原生 AI 引擎做异构协同，也许能在多模态交互场景下得到更好的性能平衡。
