onnxruntime-web加载失败主因是初始化时机、路径协议、后端兼容性及io匹配问题：需await创建会话、http服务托管模型、按需选wasm/webgl后端、严格核对输入名/shape并做格式转换。
onnxruntime-web 加载模型失败：常见报错和初始化检查
直接在浏览器里跑 ONNX 模型，onnxruntime-web 是目前最稳的方案，但它不是“扔个 .onnx 文件就能跑”。最常卡在第一步：模型加载失败，控制台报 Invalid ONNX model 或 Failed to fetch。
原因往往不是模型本身有问题，而是环境或路径没对上：
-
ORT.WasmSession或ORT.InferenceSession初始化必须等onnxruntime-web完全加载完成，不能在script标签里同步 new —— 要用await ORT.InferenceSession.create(...) - 模型文件得走 HTTP 服务（比如
http://localhost:5173/model.onnx），直接双击 HTML 打开会触发 CORS 和 file:// 协议限制，浏览器直接拒载 - WebAssembly 后端（
wasm）默认不支持所有 OP，比如NonMaxSuppression、Resize的某些 mode；若模型含这些，得切到webgl后端，或提前用onnx-simplifier+onnxoptimizer削减算子
input 和 output 名字对不上：怎么查、怎么改
模型跑通了但输出全是 NaN 或 shape 不对？大概率是输入张量名字或 shape 和模型期望的不一致。ONNX 模型的 input/output 是有固定名称的，不是你随便传个 data 就行。
用 Python 先确认一遍（部署前必做）：
import onnx
model = onnx.load("model.onnx")
for inp in model.graph.input:
print(f"input name: {inp.name}, shape: {[d.dim_value for d in inp.type.tensor_type.shape.dim]}")
浏览器里对应要严格匹配：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
session.run()的第一个参数是{input_name: tensor}对象，key 必须等于上面查出的inp.name（比如"x:0"或"input.1"，不是"input"） -
tensor的data类型必须是Uint8Array/Float32Array，且new ORT.Tensor(...)时传的 shape 必须和模型定义完全一致（包括 batch 维，哪怕只是 1） - 图像类模型常要求 NHWC → NCHW 转换，JS 里没现成函数，得手动 reshape + transpose，漏这步输出就全乱
性能卡在 WebAssembly 编译：怎么预热、怎么降延迟
首次运行时，WASM 模块编译 + 模型解析可能卡住主线程 1–3 秒，用户点一次按钮等半天。这不是 bug，是 WebAssembly 的冷启动特性。
缓解方法很实际：
- 在页面加载完、用户操作前，就用空配置提前 init 一次 session：
await ORT.InferenceSession.create(modelPath, { executionProviders: ["wasm"] })，后续真正 run 时就只剩推理耗时 - 避免每次推理都 new Tensor；复用
ORT.Tensor实例，只更新.data字段（尤其适合视频帧连续输入） - 如果模型 >5MB，启用 streaming 加载：用
fetch+Response.arrayBuffer()拿到 buffer 后传给session.create()，比直接传 URL 更可控 -
webgl后端在中高端手机上更快，但不支持 int64 输入；wasm兼容性好，但 CPU 占用高——得按目标设备选，别无脑默认 wasm
CORS 和跨域资源加载：本地开发绕不过的坑
开发时用 Vite / Webpack Dev Server 是对的，但很多人直接把 model.onnx 放进 src/ 目录，然后写 ./model.onnx —— 这会导致 404，因为 dev server 默认不托管二进制文件。
正解只有两个：
- 把模型放
public/目录下（Vite）或static/（Vue CLI），这样它会被原样 serve，路径变成/model.onnx - 或者，在 dev server 配置里显式添加静态资源规则，比如 Vite 的
server.headers加{"Access-Control-Allow-Origin": "*"}，并确保model.onnx在能被 GET 到的路径下 - 千万别用
file://协议打开 HTML——连fetch都被浏览器禁掉，更别说 WASM 加载了
模型路径一旦带域名或协议（比如 https://cdn.example.com/model.onnx），后端必须返回 Access-Control-Allow-Origin，否则 fetch 直接被拦在 network tab 里，连错误都不会抛到 JS 层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
