图文并茂笔记引擎：结构化插图生成 + 图片标注 + AI图示辅助表达机制 HarmonyOS 5.0.0 或以上

本文链接：https://blog.csdn.net/2501_92048894/article/details/148044976

系列：AI驱动的学习型笔记系统（14/60）
阅读目标：实现一个支持图文融合的笔记引擎，能自动插入 AI 生成的解释性图示、用户上传图的智能标注、并实现图→文→题一体化输出。

🎯 一、系统能力设计目标

学习需求	系统实现机制
概念抽象，单纯文字难理解	自动生成流程图/结构图/示意图/坐标图等插图
插入的图太“死板”，无法解释	支持图中添加标注 + AI文字讲解图意
图与文脱节，逻辑顺序不好	图文结构融合，支持“先图后文”“图内嵌讲解”“图+题组合”

🧱 二、插图结构与标注数据设计

interface Illustration {
  id: string
  type: '流程图' | '结构图' | '示意图' | '曲线图'
  imageUrl: string
  altText: string
  generatedFromBlockId?: string
  annotations?: IllustrationNote[]
}

interface IllustrationNote {
  point: [number, number]
  label: string
  explanation?: string
}

📌 支持图中锚点标注、气泡解释、多语言图注。

✨ 三、AI 结构化插图生成流程

输入：笔记段落或知识点 → 输出：可理解图像（PNG/SVG）

示例 prompt：

请根据以下内容生成一张示意图，用于帮助学生理解该原理。

段落：
“牛顿第二定律指出，加速度与合外力成正比，与质量成反比。”

要求：
- 展示三个箭头：力、质量、加速度
- 图中用 F=ma 表达关系
- 保持结构简洁、教学风格

调用流程：

function generateIllustration(blockContent: string): Illustration {
  const prompt = buildDiagramPrompt(blockContent)
  const image = callAIDraw(prompt)
  return {
    id: genId(),
    type: '示意图',
    imageUrl: image.url,
    altText: prompt,
    generatedFromBlockId: getCurrentBlockId()
  }
}

🧠 四、用户上传图的智能标注功能

上传后自动识别图中结构 + 可添加标注锚点

function annotateImage(imageFile): IllustrationNote[] {
  const detectedPoints = callVisionModel(imageFile)
  return detectedPoints.map(p => ({
    point: p.coords,
    label: p.label,
    explanation: callAI(`请解释图中“${p.label}”表示什么`)
  }))
}

📌 实现“图中每个关键点都有讲解” → 鼠标悬停即显解释

🔗 五、图文融合渲染设计建议

展示结构	推荐方式
图 → 文结构	上方插图，下方解释该图内容
文中嵌图	在段落中间插入图，并与上下文融合
图 + 题联动	图下方自动生成 1~2 道理解题（配合第7篇测验系统）
图组模式	若同一主题生成多张图，则可使用左右滑动卡片方式展示

📋 六、AI图转问机制（图→题）

例如：

输入图为“光的折射路径图”
输出：

单选：图中光线由空气进入水时会发生什么变化？
判断：图示中光线始终保持方向不变（√ / ×）

function generateQuizFromIllustration(illustration: Illustration): QuizItem[] {
  return callAI(`
请基于以下图像内容生成 1~2 道测验题，题目需可由图本身推理出答案。
图内容：${illustration.altText}
`)
}

📦 七、图管理与导出支持

功能	说明
插图管理器	显示所有生成 / 上传图，支持分类、排序、搜索
图→讲义集成	插图自动同步至讲义系统（见第8篇），用于 PDF/Word 导出
图→视频生成	图文融合后自动生成讲解脚本 + 音频（见第35篇）

✅ 八、小结

模块能力	实现说明
AI图示生成能力	自动从段落内容生成结构图、示意图等，辅以简洁教学风格图像
插图智能标注与解释	支持识别图中结构 + 添加解释锚点，实现“图可交互”与“图中解释”
图文融合与渲染结构设计	多种图文嵌入方式，适配学习逻辑；支持“图+题”、“图+讲义”等融合方案
图向题转化机制	自动从图生成理解类题目，延伸为测验练习路径