Dify可通过OCR识别、情境生成、语音标注、HTML封装四步全自动制作交互式单词卡：上传英文单词图片→多模态模型精准提取词义→LLM生成含例句与发音标记的HTML→正则提取并输出可执行页面。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让AI根据用户上传的单词表，自动生成带真实语境、发音提示和记忆锚点的练习内容，而不是简单罗列释义——Dify能用工作流把OCR识别、情境生成、语音标注、HTML封装四步串成全自动流水线。
准备单词源文件并上传到工作流入口
打开Dify工作流编辑器，新建一个「对话流」类型应用。在起始节点点击「添加组件」→选择「文件输入」，将该节点命名为「上传单词图片」。此节点必须启用「支持多文件」和「允许图片格式（jpg/png）」，否则后续OCR无法触发。上传时若选中PDF或TXT，整个流程会在第二步直接中断，【必须传图片】。
这一步操作起来很简单，直接把手机拍的单词手写笔记或扫描件拖进框里就行。
用多模态模型做OCR识别并清洗文本
从「上传单词图片」节点拖出连线，接入「大语言模型」组件，选择Gemini 2.5 Flash Preview（或多模态能力更强的Qwen-VL）。在系统提示词栏输入：
“你是一个精准OCR解析器。仅输出图片中清晰可辨的英文单词及其对应中文释义，每行格式为‘apple 苹果’，删除所有标点、序号、空行、注释。不解释、不补充、不翻译例句。”
关键设置：必须勾选「启用视觉输入」，否则模型会把图片当空白处理；在「输入变量」中绑定{{#file_input.text#}}，这是上一节点输出的原始OCR结果。如果漏掉这个绑定，模型收到的是空字符串，后续所有步骤都无效。
测试时发现，手写体倾斜超过15度或背景有格线，识别率会骤降。建议用户上传前先用手机备忘录拍照+自动增强对比度。
生成带情境与语音标记的HTML单词卡
将OCR节点输出接入第二个LLM节点，选用代码能力强的模型（如Claude-3.5-Sonnet或Gemini 2.5 Flash Preview 05-20）。系统提示词写明：
“你是一个前端工程师兼英语教师。根据输入的单词列表，生成单页HTML，要求：①每个单词用
用户提示词填入：{{#ocr_node.text#}}。注意此处不能用{{#ocr_node.output#}}——后者可能包含模型幻觉产生的冗余字符，而.text是原始输出流，更干净。
生成的HTML必须含Web Speech API调用逻辑，否则点击按钮无反应。Dify默认不拦截JS执行，但若部署在HTTPS受限环境，需额外配置CSP白名单。
提取HTML代码并输出为可执行页面
方法一：用「参数提取器」组件
接在HTML生成节点后，正则表达式填入，勾选「返回首个匹配项」。这能精准切出完整HTML结构，避免模型在开头加“以下是生成的代码：”这类干扰文本。
方法二：用「代码执行」组件运行Python脚本
输入代码：
import re<br>text = inputs['html_text']<br>match = re.search(r'', text)<br>print(match.group(0) if match else text)
输入变量绑定{{#html_gen_node.text#}}。此法容错性更强，即使模型输出混杂Markdown也能兜底。
最后将提取器输出连接至「响应输出」节点，选择「返回文本」模式。此时用户上传图片→等待8秒→获得一个点击即可朗读的交互式单词页。
