易学探索助手-个人记录(十三)
近期完成了生成配图和生成PPT两大功能
一:古文智能配图
思路
我希望用户上传一段古文后,系统能够识别其是否具备故事性,并自动生成相关图像以辅助理解。这项功能背后的技术逻辑:
-
利用阿里 DashScope 的图像生成模型(
wanx2.1-t2i-turbo
) -
提交“故事型配图”的 prompt,由大模型判断是否可生成
-
若不可生成,返回 "false",避免误导
后端实现(Java + DashScope SDK)
String prompt = "给这一段古文故事配图,\n" + question + "\n如果该段古文不是故事型,不适合画图,请返回空";
ImageSynthesisParam param = ImageSynthesisParam.builder().apiKey("你的APIKEY").model("wanx2.1-t2i-turbo").prompt(prompt).n(1).size("1024*1024").build();
后端根据图像生成结果判断是否是有效图像,并返回图像 URL 或 false
字符串:
if (actualPrompt.length() < 5) {response.put("imageUrl","false");
} else {response.put("imageUrl",url);
}
前端效果(Vue3 + ElementPlus)
在前端 UI 中我们做了状态判断:
-
图像生成中:显示旋转加载图标
-
返回
false
:显示“该古籍不适合生成配图” -
成功生成:渲染图片并支持导出
<div v-if="graphIsLoading">图像生成中,请稍候…</div>
<img v-else-if="graph !== 'false'" :src="graph" />
<div v-else-if="graphErrorReason">该古籍不适合生成配图</div>
二:一键生成 PPT 展示文稿
应用场景
为了支持教学汇报、科研展示,我们整合了 Docmee 的在线生成能力,用户可直接通过可视化操作完成:
-
从古文原文、句读、翻译等结构化内容出发
-
自动生成高质量 PPT(包含封面、大纲、内容页)
-
管理历史文档、自定义模板
技术核心
我们通过 iframe 嵌入 Docmee UI 并与其交互:
docmeeUI = new window.DocmeeUI({pptId: null,token: token.value,container: containerRef.value,page: currentPage.value,...
})
通过监听 onMessage
回调处理关键交互逻辑,如:
-
beforeGenerate
:用户点击生成按钮前的校验 -
beforeCreateCustomTemplate
:判断用户是否有足够次数生成模板 -
beforeDownload
:动态设置文件名 -
invalid-token
:Token 失效自动续期
if (message.type === 'beforeGenerate') {if (message.data.subtype === 'ppt') {docmeeUI.sendMessage({ type: 'success', content: '继续生成PPT' })return true}
}
交互细节
我们还设计了一个浮动内容面板,供用户快速查看原文、句读与三种翻译(白话版、大众版、学术版),让内容与生成 PPT 的过程无缝衔接。