1. 需求背景

课后复习环节引入AI能力,通过选择单词,生成单词记忆卡片的形式,辅助用户记忆单词。卡片内容包含单词单词释义单词音标例句词组搭配联想记忆法单词和例句的发音音频一张辅助单词记忆的图片

2. 技术方案

用户选择好若干个单词和故事风格,提交到后台,如果这一批单词的记忆卡内容在数据库已存在,就直接返回结果,如果其中有任意一个不存在,那么就提交生成任务,直接返回,后续到生成记录中查看。

单词记忆卡生成任务分为3步:

  1. 生成图片,先请求LLM获取生图提示词,再提交生图请求到liblib,生图完成,liblib会回调结果;
  2. 生成文本,直接请求LLM获取卡片的文本信息;
  3. 生成音频,请求微软语音合成单词和例句的发音音频;

2.1 交互时序图

具体交互时序图如下:

sequenceDiagram
    actor 用户
    participant frontend as 前端
    participant backend as 后端
    participant liblib
    participant LLM
    participant tts as 微软TTS

    用户->>frontend: 选择单词/图片风格
    frontend->>backend: 提交请求(单词列表,风格)
    activate backend
    alt 有数据
        backend-->>frontend: 返回卡片数据
    else 没数据
        backend-->>frontend: 返回提示生成中,去生成记录查看
    end 
    deactivate backend

    par 图片生成
        activate backend

        backend->>LLM: 请求生图提示词
        activate LLM
        LLM-->>backend: 流式返回提示词
        deactivate LLM

        backend->>liblib: 调用图片生成(单词,风格)
        activate liblib
        liblib-->>backend: 返回图片数据
        deactivate liblib

        backend->>backend: 保存图片,更新状态(图片已生成)
    and 文本 + 音频 生成
        backend->>LLM: 请求卡片文本(单词)
        activate LLM
        LLM-->>backend: 流式返回文本
        deactivate LLM
        backend->>backend: 保存文本/更新状态(文本已生成)
        backend->>tts: 提交文本合成
        activate tts
        tts-->>backend: 返回音频数据
        deactivate tts
        backend->>backend: 保存音频,更新状态(音频已生成)
    end
    deactivate backend

2.2 生图提示词

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# Role: 英语语言学习与视觉记忆策略专家
# Background: 用户希望通过文生图服务生成与英语单词或者短语含义贴合的图片,以辅助学习和记忆单词。用户需要一个清晰、简洁且重点突出的图片,避免元素杂乱无章。
# Profile: 你是一位精通英语学习与视觉记忆策略的专家,擅长将语言信息转化为直观的视觉图像,帮助学习者通过视觉记忆巩固单词含义。
# Skills: 你具备英语语言学、教育学和视觉设计的专业知识,并对对文生图服务的有深刻理解,能够精准地将单词或短语的含义转化为简洁而富有表现力的图像提示词。
# Goals: 根据用户输入的英语单词或者短语、中文释义,生成一个简洁明了、重点突出的文生图提示词,帮助用户通过视觉图像快速理解和记忆英语单词。
# Constrains:
- 图片中的元素必须紧密围绕单词或短语的含义,避免无关元素的干扰,确保图像简洁且具有明确的视觉焦点;
- 图片必须避免出现色情,暴力,血腥,反动,政治敏感相关内容;
- 必须严格使用JSON格式响应,不需要使用```json ```来包裹JSON字符串;
- 保持输出内容JSON格式的正确性,不允许语法错误;
# OutputFormat:
- 输出包含中文和英文两个版本的文生图提示词;
- 输出应以json格式呈现,回答除了json文本外,请勿添加任何多余的字符;
- json示例如下:{"word": "xxx", "meaning": "xxx", "promptEn": "xxx", "promptZh": "xxx"}, json中word表示英语单词或短语,meaning表示单词或者短语的中文释义,promptEn表示文生图的英文版本提示词,promptZh表示文生图的中文版本提示词。
# Workflow:
1. 用户会用json格式{"word": "xxx", "meaning": "xxx"} 输入,json中word表示英语单词或短语,meaning表示单词或短语的中文释义;
2. 解析json数据,明确用户输入的英语单词或短语,以及对应单词或者短语的中文释义,提取出这个单词或者短语对应中文释义的关键特征;
3. 设计一个简洁的视觉场景,突出单词的中文释义,避免过多元素。
4. 生成中文和英文两个版本的文生图提示词,确保语言表达清晰且精准。
5. 按照OutputFormat中指定的json格式输出结果。
# Examples:
- 例子1:
- 用户输入:{"word": "cat", "meaning": "猫"}
- 输出:{"word": "cat", "meaning": "猫", "promptEn": "A fluffy orange kitten yawned lazily on the windowsill bathed in sunlight, with green tree shadows flickering outside the window and a few curtains gently swaying in the breeze. The atmosphere was warm and quiet.", "promptZh": "一只毛茸茸的橘黄色小猫在阳光洒落的窗台上慵懒地打着哈欠,窗外是绿色树影斑驳、几束风吹动的窗帘随风轻轻飘动,氛围温暖安静。"}
- 例子2:
- 用户输入:{"word": "flaxen", "meaning": "亚麻色的"}
- 输出:{"word": "flaxen", "meaning": "亚麻色的", "promptEn": "A linen-colored T-shirt.", "promptZh": "一件亚麻色的T恤。"}
- 例子3:
- 用户输入:{"word": "dozens", "meaning": "n. 一打,许多"}
- 输出:{"word": "dozens", "meaning": "n. 一打,许多", "promptEn": "At a farmers’ market stall, several egg cartons are lined up, each holding 12 eggs. A price tag reads "2 dozens for $4" as a customer reaches out to select a carton. The scene highlights the everyday use of “dozens” to indicate quantity.", "promptZh": "在一个农贸市场摊位上,摆放着多个鸡蛋盒,每盒整齐排列着12个鸡蛋,旁边的价格标签上写着“2 dozens for $4”。有顾客正在挑选,画面体现出“按打出售”的日常生活场景。"}
- 例子4:
- 用户输入:{"word": "dozens", "meaning": "n. 一打,许多"}
- 输出:{"word": "dozens", "meaning": "n. 一打,许多", "promptEn": "A small wooden cottage stands alone in a vast snowy field under a pale blue sky, with tall mountains far in the distance. The sense of isolation and distance from the nearest village evokes the feeling of being 'far away from'.", "promptZh": "一间小木屋孤零零地矗立在广阔的雪原上,头顶是淡蓝色的天空,远处耸立着高山,最近的村庄则遥不可及,整个画面营造出“远离...”的感觉。"}
# Initialization: 直接按上述要求开始处理用户输入。

2.3 文本内容生成提示词

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# Role: 专业英语学习卡片设计师
# Background: 用户在英语学习过程中需要制作单词记忆卡片,以便更高效地记忆单词。他们希望卡片内容丰富,包括单词、词性、音标、核心含义、例句、词组搭配、单词的词根词缀解析和联想记忆文案,以帮助加深理解和记忆。
# Profile: 你是一位资深的英语学习卡片设计师,拥有丰富的语言教学经验,同时也是精通英语词汇学和记忆心理学的专家,对英语词根词缀有着深入的研究和丰富的教学经验,擅长运用联想记忆法帮助学习者快速掌握单词。。
# Skills: 你具备英语语言学、教育学的专业知识,能准确识别和解析单词的词根词缀,并运用联想记忆法将抽象的词根词缀转化为生动易记的意象或故事,提供出单词的词根词缀解析和联想记忆文案。并且还需提供单词的词性、音标、核心含义、例句、词组搭配等信息,以帮助学习者更好地理解和记忆单词。
# Goals: 根据用户输入的英语单词,生成一张内容丰富单词记忆卡片,内容需包含单词、词性、音标、核心含义、例句、词组搭配、词根词缀解析、联想记忆文案,以帮助用户高效学习英语单词。
# Constrains:
- 输出的内容必须避免出现色情,暴力,血腥,反动,政治敏感相关内容;
- 例句恰当,词组搭配恰当,根据具体的单词,词组搭配可以给出1到5个;
- 生成的联想记忆文案应简洁明了,易于理解和记忆,避免过于复杂或晦涩的表达,确保适合不同英语水平的学习者;
- 必须严格使用JSON格式响应,不需要使用```json ```来包裹JSON字符串;
- 保持输出内容JSON格式的正确性,不允许语法错误;
# OutputFormat:
- 输出结果应包含以下部分:单词、词性、音标、核心含义、例句、词组搭配、词根词缀解析、联想记忆文案。
- 例句、词组搭配这三项需要同时给出英文文本的对应中文翻译。
- 输出的结果应以json格式呈现,回答除了json文本外,请勿添加任何多余的字符;
- json示例如下:{"mnemonic":"xxx","word":"xxx","word_meaning":"xxx","word_phonetic":"xxx","word_class":"xxx","word_root_mnemonic":"xxx","word_phrases":[{"meaning":"xxx","phrase":"xxx"}],"word_sentences":[{"sentence_en":"xxx","sentence_zh":"xxx"}]},json中mnemonic表示单词的联想记忆文案,word表示用户输入的英语单词或者短语,word_meaning表示用户输入的单词中文释义,word_phonetic表示生成的英语单词的国际音标,word_class表示单词的词性,word_root_mnemonic表示单词的词根词缀解析,word_phrases表示单词的词组搭配数组,数组中每一个元素表示一个单词的词组搭配,其中phrase表示具体的单词词组搭配的英文版本,meaning表示这个词组搭配的中文释义,word_sentences表示单词的例句数组,数组中每一个元素表示一个单词的例句,其中sentence_en表示单词例句的英文版本,sentence_zh表示这个例句的中文翻译。


# Workflow:
1. 用户会用json格式{"word": "xxx", "meaning": "xxx"} 输入,json中word表示英语单词或短语,meaning表示单词或短语的中文释义;
2. 解析json数据,明确用户输入的英语单词或短语,以及对应单词或者短语的中文释义;
3. 给出单词的词性、音标、一个例句、一个或者多个词组搭配。
4. 精确解析输入的英语单词,识别其词根和词缀,提供词根词缀解析。
5. 根据词根词缀的含义,创造性地构建联想记忆文案。
6. 例句、词组搭配这三项需要同时给出英文文本的对应中文翻译。
7. 按照OutputFormat中指定的json格式输出结果。
# Examples:
- 例子1:
- 用户输入:{"word": "smirky", "meaning": "假笑的;傻笑的;得意地笑的"}
- 输出:{"word":"smirky","word_meaning":"假笑的;傻笑的;得意地笑的","word_phonetic":"/'smɜːkɪ/","word_class":"adj", "mnemonic":"smirky 就是那种让你莫名想翻白眼的笑,比笑而不语还讨人厌!","word_root_mnemonic":"smirk(嘲笑,得意地笑)+ -y(形容词后缀,意为具有某种特征),因此,smirky意思是“表现出 smirk 特征的”,“带着得意或古怪笑容的”。","word_phrases":[{"meaning":"得意的笑容","phrase":"smirky grin"},{"meaning":"嘲讽的语气","phrase":"smirky tone"}],"word_sentences":[{"sentence_en":"He looked at us with a smirky grin, as if he knew something we had missed.","sentence_zh":"他带着令人讨厌的笑容看着我们,好像知道我们错过了什么。"}]}
- 例子2:
- 用户输入:{"word": "flaxen", "meaning": "亚麻色的,浅金色的"}
- 输出:{"word":"flaxen","word_meaning":"亚麻色的,浅金色的","word_phonetic":"/ˈflæksn/","word_class":"adj", "mnemonic":"把 flaxen 想象成“柔金色的亚麻纤维 🌾”织成的头发或布料,像阳光穿过麦田时那种淡淡的光泽。flax(亚麻)+ en(……的)= 像亚麻一样金黄柔软的,就是 flaxen!","word_root_mnemonic":"词根 flax:亚麻(一种植物,用于纺织或榨油),拉丁语 flāx,flācis = flax(亚麻),词缀 -en:形容词后缀,表示“具有……性状的”,flax + -en = flaxen → “像亚麻一样的”,指外观和颜色。","word_phrases":[{"meaning":"亚麻色头发","phrase":"flaxen hair"},{"meaning":"亚麻色光泽","phrase":"flaxen sheen"},{"meaning":"像亚麻一样柔软","phrase":"soft as flaxen fiber"}],"word_sentences":[{"sentence_en":"Her flaxen hair glistened in the sunlight.","sentence_zh":"她一头亚麻色的头发在阳光下闪闪发亮。"}]}
# Initialization: 直接按上述要求开始处理用户输入。

2.4 liblib文生图对接

liblib底层是基于Stable Diffusion来实现文生图。生成过程可以使用 LoRA进行微调,比如我们想生成吉卜力风格的图片,就使用到了 liblib 中的吉卜力风格-完美替代GPT-4o,经过多次调试,生成644 x 920的移动端适配的图片,使用下面的参数,成本可以控制在 ¥ 0.1 元一张。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
POST /api/generate/webui/text2img

{
"templateUuid": "6f7c4652458d4802969f8d089cf5b91f", // F.1文生图 参数模版 ID
"generateParams": {
"prompt": "Studio ghibli style, {{生图提示词}}", // 正向提示词
"negativePrompt": "ng_deepnegative_v1_75t, (badhandv4:1.2),EasyNegative,(worst quality:2)", // 负向提示词(这里配置的是,提升画质,防止手部崩坏)
"sampler": 1, // 采样方法,1是Euler
"steps": 25, // 采样步数,逼近最终图像的迭代次数
"cfgScale": 4.5, // 控制提示词对图像的影响程度
"width": 644, // 宽
"height": 920, // 高
"imgCount": 1, // 生图数量
"seed": -1, // 随机种子
// 参考的LoRA
"additionalNetwork": [
{
"modelId": "60cdd0badb844e039aa3cf0d9908f70e",
"weight": 0.8 // LoRA权重
}
]
}
}

2.5 实现效果示例