端侧 AI 赋能鸿蒙版 Obsidian：轻规划基于 HarmonyOS 7.0 图像超分特性的体验突破与开发实战

文章目录

• • 
  • 引言：一位鸿蒙开发者的“第二大脑”探索手记
  • 图像超分带来的三大体验突破
  • 一、 鸿蒙版 Obsidian 的超分架构设计
  • • 图像超分带来的三大体验突破对比
  • 二、 实战：端侧 NPU 图像超分引擎封装
  • • 1. 超分引擎核心实现 (`ImageSuperResolutionUtil.ets`)
  • 三、 图像超分交互落地与胶囊 UI 设计
  • 四、 图像超分实战踩坑与解决方案
  • • 坑点 1：沙箱相对路径与 `file://` 协议解析引发的超分加载失败
    • 坑点 2：超分返回结果 `SRProcessResult` 类型兼容性避坑
    • 坑点 3：ArkUI 默认主题下按钮呈现“矩形直角”的外观坑
  • 五、 总结与展望

引言：一位鸿蒙开发者的“第二大脑”探索手记

最近，我在鸿蒙应用市场上架了一款叫做《轻规划》的应用。最开始，它的设计初衷非常纯粹——帮用户做好 4D 任务规划、目标拆解、习惯打卡与清单履约，让日常的每一项待办都能清晰落地。然而在使用和用户反馈中，我们渐渐发现：有了清晰的行事规划和待办清单，固然能让人不漏掉每一件小事，但总觉得还缺少了点什么。——没错，缺少了知识管理！

单纯做“规划”，容易让应用沦为没有思想深度的清单列表（Checklist）；而真正的效率跃迁，必须依靠知识的沉淀与复盘。在知识管理（PKM）领域，Obsidian 无疑是全球无数极客与知识工作者心中的“神级工具”。它采用纯文本 Markdown 语法，强调本地优先（Local-First）与私密存储，并通过强大的双向链接帮助用户构建交织互联的网状知识体系。遗憾的是，Obsidian 作为一款国外软件，至今未能原生适配 HarmonyOS。在鸿蒙生态中，知识工作者们急需一款既具备 Obsidian 极客灵魂、又能深度拥抱鸿蒙原生特性的替代品。

出于对“行事规划 + 知识管理 = 打造个人第二大脑”理念的执念，以及对鸿蒙原生生态建设的热情，我们做出了一个决定：在《轻规划》中，打造一个真正的鸿蒙原生版 Obsidian 平替！ 我们不仅 100% 兼容了 Obsidian 的 Markdown 沙箱仓、YAML 属性、Wiki 双链图谱以及Obsidian海量的插件，更希望借助鸿蒙系统级的强大能力，带来超越传统桌面软件的新体验。

但这么多年知识管理中，一直有十分棘手的痛点：我们在记录笔记时，存在收纳箱的白板草图、课堂板书、会议记录或文献截图，受限于拍照光线、焦距或剪贴板二次压缩，这些图片往往字迹模糊、细节难辨。如果按照传统做法上传云端 AI 处理，既违背了 Obsidian 本地私密的核心信仰，又受制于网络延迟与成本问题。

幸运的是，全新 HarmonyOS 7.0 带来的 CoreVision 端侧 AI 图像超分（Image Super Resolution） 特性，为我们带来了转机！所以决定在轻规划应用的脑图仓库中图片预览和markdown预览中增加超分图片功能。

超分前后对比图：

图像超分带来的三大体验突破

在轻规划集成 HarmonyOS 7.0 图像超分特性后，鸿蒙原生版 Obsidian 完成了三大维度的用户体验颠覆：

一、 鸿蒙版 Obsidian 的超分架构设计

在 轻规划 中，所有笔记与附件均存储于应用的本地沙箱 Vault 目录中。为了在不破坏 Markdown 干净文件结构的前提下实现毫秒级超分重绘，我们将端侧 AI 架构设计如下：

#mermaid-svg-TazthwbGvn71B8LF{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-TazthwbGvn71B8LF .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-TazthwbGvn71B8LF .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-TazthwbGvn71B8LF .error-icon{fill:#552222;}#mermaid-svg-TazthwbGvn71B8LF .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-TazthwbGvn71B8LF .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-TazthwbGvn71B8LF .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-TazthwbGvn71B8LF .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-TazthwbGvn71B8LF .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-TazthwbGvn71B8LF .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-TazthwbGvn71B8LF .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-TazthwbGvn71B8LF .marker{fill:#333333;stroke:#333333;}#mermaid-svg-TazthwbGvn71B8LF .marker.cross{stroke:#333333;}#mermaid-svg-TazthwbGvn71B8LF svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-TazthwbGvn71B8LF p{margin:0;}#mermaid-svg-TazthwbGvn71B8LF .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-TazthwbGvn71B8LF .cluster-label text{fill:#333;}#mermaid-svg-TazthwbGvn71B8LF .cluster-label span{color:#333;}#mermaid-svg-TazthwbGvn71B8LF .cluster-label span p{background-color:transparent;}#mermaid-svg-TazthwbGvn71B8LF .label text,#mermaid-svg-TazthwbGvn71B8LF span{fill:#333;color:#333;}#mermaid-svg-TazthwbGvn71B8LF .node rect,#mermaid-svg-TazthwbGvn71B8LF .node circle,#mermaid-svg-TazthwbGvn71B8LF .node ellipse,#mermaid-svg-TazthwbGvn71B8LF .node polygon,#mermaid-svg-TazthwbGvn71B8LF .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-TazthwbGvn71B8LF .rough-node .label text,#mermaid-svg-TazthwbGvn71B8LF .node .label text,#mermaid-svg-TazthwbGvn71B8LF .image-shape .label,#mermaid-svg-TazthwbGvn71B8LF .icon-shape .label{text-anchor:middle;}#mermaid-svg-TazthwbGvn71B8LF .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-TazthwbGvn71B8LF .rough-node .label,#mermaid-svg-TazthwbGvn71B8LF .node .label,#mermaid-svg-TazthwbGvn71B8LF .image-shape .label,#mermaid-svg-TazthwbGvn71B8LF .icon-shape .label{text-align:center;}#mermaid-svg-TazthwbGvn71B8LF .node.clickable{cursor:pointer;}#mermaid-svg-TazthwbGvn71B8LF .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-TazthwbGvn71B8LF .arrowheadPath{fill:#333333;}#mermaid-svg-TazthwbGvn71B8LF .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-TazthwbGvn71B8LF .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-TazthwbGvn71B8LF .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-TazthwbGvn71B8LF .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-TazthwbGvn71B8LF .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-TazthwbGvn71B8LF .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-TazthwbGvn71B8LF .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-TazthwbGvn71B8LF .cluster text{fill:#333;}#mermaid-svg-TazthwbGvn71B8LF .cluster span{color:#333;}#mermaid-svg-TazthwbGvn71B8LF div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-TazthwbGvn71B8LF .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-TazthwbGvn71B8LF rect.text{fill:none;stroke-width:0;}#mermaid-svg-TazthwbGvn71B8LF .icon-shape,#mermaid-svg-TazthwbGvn71B8LF .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-TazthwbGvn71B8LF .icon-shape p,#mermaid-svg-TazthwbGvn71B8LF .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-TazthwbGvn71B8LF .icon-shape .label rect,#mermaid-svg-TazthwbGvn71B8LF .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-TazthwbGvn71B8LF .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-TazthwbGvn71B8LF .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-TazthwbGvn71B8LF :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

点击图片

请求图像超清

1. 沙箱路径校验

2. PixelMap 加载

NPU 硬件加速

无缝覆盖渲染

Markdown 笔记 / attachments 附件目录

全屏大图 preview / ImageDetailView 路由页

端侧 AI 工具类: ImageSuperResolutionUtil

VaultManager 沙箱路径解析 file://

HarmonyOS 7.0 CoreVision: imageSuperResolution.ImageSRAnalyzer

端侧 NPU 算法重建与高清 PixelMap 输出

图像超分带来的三大体验突破对比

二、 实战：端侧 NPU 图像超分引擎封装

在 轻规划 中，ImageSuperResolutionUtil 作为端侧 AI 超分的核心单例工具，负责完成分析器初始化、硬件兼容性校验、PixelMap 重建与资源释放。

1. 超分引擎核心实现 (ImageSuperResolutionUtil.ets)

import { image } from '@kit.ImageKit';
import { promptAction } from '@kit.ArkUI';
// 导入 HarmonyOS 7.0 CoreVision 图像超分 API
import imageSuperResolution from '@ohos.multimedia.imageSuperResolution';

export interface SRProcessResult {
pixelMap: image.PixelMap | null;
beforeWidth: number;
beforeHeight: number;
afterWidth: number;
afterHeight: number;
durationMs: number;
supported: boolean;
message: string;
}

export class ImageSuperResolutionUtil {
private static instance: ImageSuperResolutionUtil | null = null;
private analyzer: imageSuperResolution.ImageSRAnalyzer | null = null;
private isInitializing: boolean = false;

public static getInstance(): ImageSuperResolutionUtil {
if (!ImageSuperResolutionUtil.instance) {
ImageSuperResolutionUtil.instance = new ImageSuperResolutionUtil();
}
return ImageSuperResolutionUtil.instance;
}

/**
* 初始化 HarmonyOS 7.0 端侧 AI 超分分析器
*/
public async init(): Promise<boolean> {
if (this.analyzer) return true;
if (this.isInitializing) return false;

this.isInitializing = true;
try {
// 创建端侧图像超分分析器实例
this.analyzer = await imageSuperResolution.createImageSRAnalyzer();
this.isInitializing = false;
return true;
} catch (err) {
this.isInitializing = false;
console.error(`[轻规划 AI] 超分分析器初始化失败: ${JSON.stringify(err)}`);
return false;
}
}

/**
* 执行端侧图像超分像素重建
*/
public async processSuperResolutionDetail(inputPixelMap: image.PixelMap): Promise<SRProcessResult> {
const startTime = Date.now();
const result: SRProcessResult = {
pixelMap: null,
beforeWidth: 0,
beforeHeight: 0,
afterWidth: 0,
afterHeight: 0,
durationMs: 0,
supported: true,
message: ''
};

if (!inputPixelMap) {
result.message = '无效的输入 PixelMap';
return result;
}

const imageInfo = await inputPixelMap.getImageInfo();
result.beforeWidth = imageInfo.size.width;
result.beforeHeight = imageInfo.size.height;

if (!this.analyzer) {
const initialized = await this.init();
if (!initialized || !this.analyzer) {
result.supported = false;
result.message = '当前设备 NPU 超分引擎初始化失败';
return result;
}
}

try {
// 配置 2X 超分与高质量纹理重建
const config: imageSuperResolution.SRConfig = {
scale: imageSuperResolution.ScaleType.SCALE_2X,
quality: imageSuperResolution.QualityLevel.HIGH
};

// 调用端侧 NPU 硬件执行算法重绘
const outputPixelMap = await this.analyzer.process(inputPixelMap, config);
const outputInfo = await outputPixelMap.getImageInfo();

result.pixelMap = outputPixelMap;
result.afterWidth = outputInfo.size.width;
result.afterHeight = outputInfo.size.height;
result.durationMs = Date.now() – startTime;
result.message = 'AI 超清重建完成';
return result;
} catch (error) {
console.error(`[轻规划 AI] NPU 超分执行异常: ${JSON.stringify(error)}`);
result.message = `超分处理异常: ${error.message || '系统限制'}`;
return result;
}
}

/**
* 销毁并释放 NPU 硬件资源
*/
public async destroy() {
if (this.analyzer) {
try {
await this.analyzer.destroy();
} catch (e) {
console.warn(`[轻规划 AI] 释放超分资源异常: ${JSON.stringify(e)}`);
}
this.analyzer = null;
}
}
}

三、 图像超分交互落地与胶囊 UI 设计

在 轻规划 中，用户在全屏预览沙箱附件或 Markdown 内嵌图片时，只需点击底部胶囊工具栏中的 ✨ AI 超清 按钮，即可无缝触发超分重绘：

// ImageDetailView.ets 底部胶囊工具栏
Row({ space: 10 }) {
Button('- 缩小')
.type(ButtonType.Capsule)
.fontSize(11)
.fontColor('#E5E7EB')
.backgroundColor('rgba(255, 255, 255, 0.16)')
.height(32)
.onClick(() => { if (this.scaleValue > 0.6) this.scaleValue -= 0.3; })

Text(`${Math.round(this.scaleValue * this.pinchValue * 100)}%`)
.fontSize(12)
.fontWeight(FontWeight.Bold)
.fontColor('#FACC15')

Button('+ 放大')
.type(ButtonType.Capsule)
.fontSize(11)
.fontColor('#E5E7EB')
.backgroundColor('rgba(255, 255, 255, 0.16)')
.height(32)
.onClick(() => { if (this.scaleValue < 4.5) this.scaleValue += 0.3; })

Button('重置 100%')
.type(ButtonType.Capsule)
.fontSize(11)
.fontColor('#A855F7')
.backgroundColor('rgba(168, 85, 247, 0.2)')
.height(32)
.onClick(() => this.resetZoom())

// ✨ AI 超清 胶囊按钮 (ButtonType.Capsule 保证绝对圆角)
Button() {
Row({ space: 4 }) {
Text('✨').fontSize(11)
Text(this.isSRProcessing ? 'AI 超清中…' : 'AI 超清')
.fontSize(11)
.fontWeight(FontWeight.Bold)
.fontColor('#FACC15')
}
}
.type(ButtonType.Capsule)
.height(32)
.padding({ left: 10, right: 10 })
.backgroundColor('rgba(250, 204, 21, 0.16)')
.border({ width: 1, color: 'rgba(250, 204, 21, 0.35)' })
.onClick(() => this.triggerSuperResolution())
}

四、 图像超分实战踩坑与解决方案

在 鸿蒙原生版 Obsidian（轻规划）中落地图像超分的过程中，我们遇到了三个核心坑点，以下是踩坑分析与解决方案：

坑点 1：沙箱相对路径与 file:// 协议解析引发的超分加载失败

坑点描述： Obsidian 规范中，Markdown 附件图片通常以相对文件名存储（例如 attachments/architecture.png 或 architecture.png）。直接将相对路径字符串传给 ImageSRAnalyzer 或 ImageSource 时，系统无法识别路径，导致超分引擎返回“无效图片路径”或直接 crash。

解决方案： 必须构建绝对沙箱 URI 解析逻辑。首先通过 VaultManager.getInstance().getAttachmentsDir() 获取应用沙箱绝对路径 /data/storage/el2/base/haps/entry/files/Vault/attachments；若传入的路径不包含 file:// 前缀或非绝对路径，自动补全协议头：

let fullPath = attName;
if (!attName.startsWith('file://') && !attName.startsWith('/')) {
fullPath = `file://${VaultManager.getInstance().getAttachmentsDir()}/${attName}`;
}

补全为标准的 file:///data/storage/… 格式后，再通过 fileIo.openSync 提取文件句柄或加载为 PixelMap，超分引擎便能 100% 成功读取沙箱文件。

坑点 2：超分返回结果 SRProcessResult 类型兼容性避坑

坑点描述： 在不同版本的 HarmonyOS SDK 升级过程中，SRProcessResult 接口定义的返回字段有所调整。直接在 ArkTS 代码中访问 result.success 触发了编译报错：Property 'success' does not exist on type 'SRProcessResult'。

解决方案： 在 ArkTS 强类型约束下，不能依赖未在 interface 中定义的 success 属性。应当将逻辑修正为对 result.pixelMap 是否非空进行判断：

const result = await ImageSuperResolutionUtil.getInstance().processImageUriDetail(this.imageUrl);

// ✅ 正确判定方式：校验生成的 PixelMap 是否非空
if (result.pixelMap) {
this.srPixelMap = result.pixelMap;
promptAction.showToast({ message: '✨ AI 超清完成！图片细节与清晰度已大幅提升' });
} else {
promptAction.showToast({ message: result.message || '超清处理未完成' });
}

坑点 3：ArkUI 默认主题下按钮呈现“矩形直角”的外观坑

坑点描述： 开发初期，我们使用了 .type(ButtonType.Normal) 并设置了 .borderRadius(14)，但在某些设备主题下，系统依然将按钮渲染为带有直角的矩形框，影响胶囊美感。

解决方案： 在 ArkUI 框架中，将 Button 的 type 显式设置为 ButtonType.Capsule（用于扁平胶囊按钮）或 ButtonType.Circle（用于圆形图标按钮）。ButtonType.Capsule 会切断系统默认主题的矩形阴影，强制将两端切为完美的半圆弧度，呈现出最纯粹的极客胶囊效果。

五、 总结与展望

作为一款 鸿蒙原生版 Obsidian 平替，轻规划 借力 HarmonyOS 7.0 端侧 AI 图像超分 特性，真正做到了“行事规划 + 知识管理 = 第二大脑”与“本地优先（Local-First）+ 端侧智能（On-Device AI）”的双重融合。

在零云端依赖、零隐私泄露的前提下，轻规划 让用户的每一张白板截图、手写板书都能在指尖实现超清重绘与精准辨识。未来，我们将继续在鸿蒙生态中探索端侧 AI 与知识管理系统的深度结合，为用户打造更加智能、纯粹的第二大脑！