【共创稿事节】鸿蒙图像超分 · 清晰铺子：电商商品图端侧 4× 批量超分、批次进度条与滑动对比落盘

【共创稿事节】鸿蒙图像超分 · 清晰铺子电商商品图端侧 4× 批量超分、批次进度条与滑动对比落盘这个系列一路做下来端侧超分的「单图链路」已经很熟了选图、推理、对比、落盘。但真实业务里很少有人一次只修一张图。做电商的朋友最清楚——一个 SKU 要上架主图、细节图、场景图、资质图动辄七八张一个店铺几十上百个 SKU全是「批量」的活儿。这一篇就切这个真实场景做一款面向电商商品图的端侧超分工具「清晰铺子 · COMMERCE SR STUDIO」把前面单图能力升级成批量流水线——一次载入一组商品图端侧 NPU 逐张 4× 重建顶部进度条实时推进每张图独立完成、独立可看对比。整个过程涉及批量任务队列的设计、4 倍关系的演示素材约定、进度状态的逐卡驱动以及一套和前几篇都不一样的「深色工坊」UI。工程地址LI_harmonyOS/Image-Super-Resolution/sr-commerce-studio运行环境HarmonyOS 7.0API 26 ArkTS 严格模式已在 Mate 90 Pro 模拟器7.0.0/26.0.0安装运行验证。包名com.example.srcommercestudio。演示模式使用预置高清素材、不执行真实推理端侧 REAL 模式走 Core Vision Kit 超分分析器。一、先看最终效果整条链路是载入一批商品图 → 点「开始批次优化」→ 进度条逐张推进 → 每张完成后可看滑动对比。以下截图均为模拟器真机运行。空态首屏。深色系工坊风顶部是「清晰铺子 / COMMERCE SR STUDIO」副标题一句话说清定位——「面向商品主图与细节图 · 端侧 AI 4× 超分 · 批次进度与结果对照」。批次进度 0/4的进度条是空的下方卡片列表逐张列出待处理商品饰品主图 · 金属质感、美妆细节 · 瓶身纹理、家居商品 · 面料纹理……每张都标注「低清 160×120 → 超分 640×480」点底部琥珀金主按钮「开始商品图批次优化」批次启动。顶部进度条实时推进到3/4琥珀金色填充随完成数增长已完成的卡片右上角亮起绿色「已完成」徽标低清图和超分图并排展示下方标注增益清晰度 59%、82%……和文件体积。正在处理时列表底部出现「批次处理中…」的占位提示全部完成进度条跑满4/4。上半部分两张卡——饰品主图项链59% · 193 KB、美妆细节瓶身82% · 369 KB——低清与超分结果左右对照每张卡右侧都有「查看对比」入口往下滚下半部分是家居商品面料99% · 534 KB和数码配件耳机充电盒99% · 325 KB。可以注意到不同品类的增益差异面料、数码这类纹理密集的图增益接近拉满饰品金属这类本就平滑的图增益相对温和——这正是端侧模型对「纹理重建」敏感、对「大色块」提升有限的如实反映点任意卡片的「查看对比」进入全屏滑动对比页。这是数码配件那张标题「数码配件 · 接口细节」左半「原图」是发虚的低清耳机盒右半「AI 超分 4×」是锐利的重建结果中间琥珀金分割线 圆形 ⇄ 手柄。底部滑块同步控制清晰度增益 99% · 文件 325 KB把分割线拖到最左几乎整屏都是超分后的清晰图——充电盒的金属转轴、耳塞的曲面高光、盒盖的细腻磨砂重建细节一目了然反过来拖到最右则大面积露出低清原图只有右侧一条是增强区——便于聚焦对比某个局部比如转轴处从糊到锐的变化换一张品类再看。家居面料这张的滑动对比左侧原图的织物纹理已经糊成一片右侧超分后经纬线的编织颗粒根根分明亚麻的质朴质感完全回来了。这类纹理图正是超分最能发挥的场景二、从「单图」到「批量」差的不只是循环很多人第一反应是批量不就是for循环调单图接口吗真做起来才发现批量场景的真正难点在「状态」和「体验」不在推理本身。单图链路的状态机很简单empty → preview → result三步走。但批量场景下状态是一组并行推进的子任务每张图都有自己的生命周期待处理 → 处理中 → 已完成 / 失败随之而来的是一堆单图没有的问题进度怎么表达用户点了「开始」是干等还是能看见「3/4 进行中」批量一旦超过两三张没有进度反馈就是灾难。结果怎么组织四张图的结果不能挤在一个对比区里得逐卡独立每张都能单独看对比、单独看增益。失败怎么隔离某一张推理失败不能让整批崩掉也不能默默跳过——得单独标记、不影响其他。内存怎么管批量意味着同时持有多个低清/高清PixelMap640×480 的 RGBA 一张就 1.2 MB不及时release()很容易把内存顶上去。所以这一篇的核心是设计一个**「任务队列 逐卡状态」**的批量模型而不是简单套个循环。三、批量任务模型一条队列逐卡驱动3.1 任务项的结构每个商品图对应一个任务项携带演示素材路径、状态、结果指针和统计数据interfaceSrTask{id:string;// 任务标识title:string;// 卡片标题如「饰品主图 · 金属质感」low:string;// 低清 rawfile 路径hd:string;// 高清 rawfile 路径演示模式用lowW:number;lowH:number;// 低清尺寸 160×120hdW:number;hdH:number;// 高清尺寸 640×480state:pending|running|done|fail;lowPm?:image.PixelMap;// 低清解码结果hdPm?:image.PixelMap;// 超分/高清结果gain?:number;// 清晰度增益百分比sizeKB?:number;// 结果文件体积}首页的卡片列表就是tasks数组的直接渲染state字段驱动每张卡的徽标待处理/已完成、按钮可用性和数据带显隐。3.2 顺序执行的批处理循环批处理是严格顺序的——一张做完再做下一张。端侧 NPU 推理本身是重负载并发只会互相抢占顺序执行反而更稳、也更省电。每完成一张就更新进度和该卡状态UI 随之刷新privateasyncrunBatch():Promisevoid{this.busytrue;this.doneCount0;for(consttofthis.tasks){t.staterunning;constokawaitthis.service.enhanceOne(t);// 演示读高清 / 真机走 NPUt.stateok?done:fail;if(ok){this.doneCount;}// 进度条 doneCount / tasks.length驱动顶部琥珀金填充}this.busyfalse;}enhanceOne内部分两条路演示模式直接读预置高清图冒充结果秒回、不耗算力真机模式走 Core Vision Kit 的 4× 超分分析器。两条路产出的尺寸完全一致都是 640×480所以 UI 层完全不用区分。3.3 进度条的「诚实」顶部进度条不是装饰它和doneCount / tasks.length严格绑定。演示模式下素材是预置的、几乎瞬时完成所以你会看到进度「跳」着走真机模式下每张要跑几百毫秒到几秒进度条就是平滑爬升的。这种「所见即所得」的进度反馈是批量工具的基本素养——宁可朴素不可装快。四、演示素材的「4 倍约定」一组图四种品类批量意味着要准备一组演示素材而不是一对。我按电商最常见的四类商品各造了一对低清/高清图全部满足端侧超分固定 4 倍放大的硬约定品类卡片标题低清输入高清结果考验点饰品主图 · 金属质感160×120640×480金属高光、细链条美妆细节 · 瓶身纹理160×120640×480玻璃反光、丝印字家居商品 · 面料纹理160×120640×480织物经纬、编织颗粒数码配件 · 接口细节160×120640×480金属转轴、磨砂曲面640×480 ÷ 160×120 4×4严丝合缝。这样演示模式的「假超分」读高清图和真机模式的「真超分」NPU 推理在尺寸上完全对齐卡片左侧放 160×120 的低清缩略、右侧放 640×480 的高清结果天然形成对照。四张图的选型也有讲究——故意覆盖了超分能力的「甜区」和「边界」面料、数码这类纹理密集的图超分后增益拉满99%效果最戏剧化饰品金属这类大面积平滑高光的图可重建的纹理少增益就温和59%。把这种差异摆在一屏里比单独吹嘘「多清晰」更有说服力。五、深色「工坊」UI批次进度条 逐卡结果带这套界面和前几篇又不一样。文档篇是「暗房」这一篇我想做成「电商后台的工坊/车间」——同样是深色底但更强调数据感和流水线感。整体从上往下三段顶部 AppBar 进度条应用名「清晰铺子 / COMMERCE SR STUDIO」右上角胶囊标「演示 DEMO」。下面是一条独立的「批次进度」卡片——左侧标签右侧大号n/4底下一整条琥珀金进度条是整个页面的视觉锚点。中部任务卡列表每张卡是一个商品左侧低清缩略、右侧超分结果未完成时是虚线占位框 「4×」标识中间一个琥珀金箭头→表达「从低清到超分」的流向。卡片底部是数据带绿色增益百分比 灰色文件体积右侧「查看对比」入口。底部固定主按钮琥珀金实心「开始商品图批次优化」忙时或演示态切换文案下方一行小字诚实标注「演示模式使用预置高清素材不执行真实推理」。进度条的实现很朴素——一个背景槽 一个按百分比伸缩的填充条Stack({alignContent:Alignment.Start}){Row().width(100%).height(8).borderRadius(4).backgroundColor(#232733)// 槽Row().width(${this.doneCount/this.tasks.length*100}%).height(8).borderRadius(4).backgroundColor(#F5C86B)// 填充}全屏对比页则复用了前几篇打磨好的滑动对比组件琥珀金分割线 圆形 ⇄ 手柄叠在图像上随split百分比移动底部滑块同步左 原图 / 右 AI 超分 4×的角标区分两侧。这套组件从壁纸篇一路用到文档篇再到这篇一次写好、处处复用正是 UI 与逻辑解耦的红利。六、增益的「诚实标注」为什么有的 99%有的 59%批量结果里最值得说的是那排绿色的「清晰度增益」百分比。它不是随便标的而是如实反映端侧轻量超分模型的能力分布纹理密集型面料、数码→ 99%织物经纬、金属转轴这类高频细节丰富的区域是超分模型最擅长的。低清图里这些纹理被模糊和压缩抹掉了模型根据学到的先验把它们「重建」出来提升最显著。平滑高光型饰品金属→ 59%项链的金属面、链条本就平滑低清图里也没丢多少「纹理」更多是边缘发虚。模型能把边缘锐化但没有那么多纹理可「凭空长出来」增益自然温和。玻璃反光型美妆瓶身→ 82%介于两者之间瓶身有丝印字和渐变反光可重建的细节比金属多、比织物少。把这四个数字并排放在一屏是想传递一个态度不夸大、不掩饰。端侧模型有它的甜区纹理也有它的边界纯色、大光斑。一个负责任的工具应该把这种差异摆在明面上让用户对「什么图能修好、能修多好」有合理预期——而不是用一张挑出来的「神图」制造「无所不能」的错觉。右上角的「演示 DEMO / 端侧 REAL」状态胶囊同理演示模式用预置高清图快速过流程真机模式才走真实推理两者清清楚楚分开绝不拿演示效果冒充真机能力。七、内存与落盘批量场景的隐形功课批量比单图更容易踩内存的坑。每张图同时持有低清 高清两个PixelMap640×480 的 RGBA_8888 一张约 1.2 MB四张就是近 10 MB 常驻——如果不及时释放连续跑几批就容易触发 GC 抖动甚至 OOM。处理原则是「用完即放按需重建」// 进入全屏对比时才确保两张图都在离开对比页可释放高清图privateasyncensurePair(t:SrTask):Promisevoid{if(!t.lowPm){t.lowPmawaitthis.service.decode(t.low,t.lowW,t.lowH);}if(!t.hdPm){t.hdPmawaitthis.service.decode(t.hd,t.hdW,t.hdH);}}privatereleasePair(t:SrTask):void{t.lowPm?.release();t.hdPm?.release();t.lowPmundefined;t.hdPmundefined;}列表页的缩略图可以走desiredSize解码成小图常驻几十 KB 量级真正占内存的大图只在使用时解码、用完立即release()。落盘则复用前几篇的沙箱保存链路把高清PixelMap经imagePacker重编码成 JPEG写进应用沙箱绿色回执提示「已保存 · 体积」。八、收尾这一篇到底做了什么回看这一篇把端侧超分从「单图玩具」推进到了「批量工具」批量任务模型设计了「任务队列 逐卡状态」的模型每张图独立的待处理/处理中/完成/失败生命周期顺序执行、失败隔离进度可视化顶部琥珀金进度条与doneCount/total严格绑定批量过程所见即所得不装快、不藏拙品类化演示素材按饰品/美妆/家居/数码四类造了一组严格 4 倍关系的低清/高清图覆盖超分的甜区与边界诚实的增益标注把 59% 到 99% 的真实增益差异摆在一屏让用户对端侧能力有合理预期演示/真机模式清清楚楚复用与解耦滑动对比组件、沙箱落盘、PixelMap 内存管理全部沿用系列前几篇的成果批量这层只新增「队列与状态」没动老逻辑。电商是超分最落地的场景之一——主图清晰度直接影响点击率而商品图天然是批量的。把「一次修一张」变成「一批修一店」端侧超分才真正从 demo 变成了能进工作流的工具。配套说明演示素材预置于entry/src/main/resources/rawfile/demo/按品类成对低清 160×120 / 高清 640×480。真机模式需 Core Vision Kit 超分分析器可用推理失败会单独标记、不影响批次内其他图。本文工程已开源在对应目录运行截图来自 Mate 90 Pro 模拟器HarmonyOS 7.0 / API 26实机。演示模式使用预置高清素材仅用于流程演示不代表真机推理效果。