2026/8/24 13:52:21
FEATURED · 精选文章 
✨文末附开源仓库地址做 AI 应用落地的同学可以直接拉下来跑。⚠️ 本文为技术演示项目仅供学习和交流参考不建议直接用于生产环境。当 LLM 遇见视觉模型如何用 LangGraph 把它们串成一个完整的智能教育产品前言做 AI 智能体Agent最容易卡在哪不是模型调不通是多个模型按业务逻辑串起来还能稳定跑、状态在节点间流转还能不丢。工作流编排、条件路由、状态管理、流式输出——这些事线性链LangChain 那种搞不定得上状态图。最近在关注 LangGraph 工作流编排的落地实践把这套问题在真实场景里跑了一遍意图分类 → 条件路由 → 批改分支 / 解题分支 → SSE 流式输出一个状态图串起 4 个模型拍照上传自动批改评分或解题。把状态丢失、意图被覆盖、SSE 格式错误这些坑都沉淀进这套可运行 Demo 里了文末附开源仓库地址做 AI 智能体落地的同学可以直接拉下来跑。项目目标为教育场景打造一套智能批改与解题系统用户拍照上传试卷或题目系统自动完成作业批改评分或题目解答。技术挑战如何用 LangGraph 编排多个 AI 模型协同工作如何处理视觉理解 文本推理的混合任务如何实现 SSE 流式输出让用户实时看到处理进度系统架构整体设计核心流程整个系统的核心是一个LangGraph 状态图工作流意图分类用户输入文本qwen-plus-latest 判断是批改作业还是拍照解题条件路由根据意图分流到不同分支批改分支图片 OCR 识别 → 逐题批改 → 提取分数公式 → 计算总分 → 汇总输出解题分支视觉模型识别题目 → 逐步解答 → 规范化排版输出SSE 流式输出每个节点执行时实时推送进度到前端使用演示Step 1拍照解题 — 上传题目用户输入题目描述并上传题目图片系统自动识别意图为解题如图用户输入这四道题答案是什么并上传试卷图片系统识别为解题意图。Step 2拍照解题 — AI 解答视觉模型识别题目内容并逐步解答数学公式以标准 LaTeX 格式渲染显示如图系统自动识别 4 道数学题圆柱体积计算、体积比、直线截距方程、命题判断逐题给出完整解答过程LaTeX 公式正确渲染。Step 3作业批改 — 上传试卷用户选择批改作业并上传参考答案和学生试卷图片系统自动识别意图为批改如图用户上传包含参考答案和学生作答的试卷图片系统进入批改流程。Step 4作业批改 — 批改结果系统完成 OCR 识别、逐题批改、分数提取与计算输出完整的批改报告如图系统输出每道题的批改结果和得分并汇总总分。Step 5统计看板数据可视化所有批改和解题记录自动沉淀为统计数据看板展示核心指标和趋势图表如图统计看板展示 4 个核心指标卡片总批改次数、总解题次数、今日使用量、活跃用户折线图展示近 7 天使用趋势环形图展示功能使用分布柱状图展示平均分分布。技术选型思考为什么选 LangGraph状态图模型用节点和边描述工作流比线性链更灵活条件路由根据中间结果动态决定下一步完美适配批改/解题分支状态累积每个节点更新状态字典最终获取完整结果异步支持原生支持astream方便对接 SSE为什么前端用 Vue 3Composition API复杂状态管理更清晰聊天消息、会话列表、统计图表生态成熟Element Plus 组件库开箱即用图表支持ECharts 集成方便统计看板数据可视化为什么用阿里云百炼模型齐全视觉模型qwen3-vl-plus、文本模型qwen3-max、思考模型qwen-flash一站式配齐OpenAI 兼容统一 API 格式降低集成成本国内访问无需翻墙延迟低核心代码实现1. LangGraph 工作流构建fromlanggraph.graphimportStateGraph,START,ENDdefbuild_workflow():builderStateGraph(GraphState)# 添加节点builder.add_node(classify_intent,classify_intent)builder.add_node(check_grading_images,check_grading_images)builder.add_node(check_solving_images,check_solving_images)builder.add_node(image_ocr,image_ocr)builder.add_node(grade_homework,grade_homework)builder.add_node(solve_problems,solve_problems)builder.add_node(normalize_output,normalize_output)# 设置边builder.add_edge(START,classify_intent)# 条件路由根据意图分流builder.add_conditional_edges(classify_intent,route_by_intent,{check_grading_images:check_grading_images,check_solving_images:check_solving_images,empty_intent_hint:empty_intent_hint,})# 批改流程OCR → 批改 → 提取分数 → 计算 → 汇总builder.add_edge(image_ocr,grade_homework)builder.add_edge(grade_homework,extract_formulas)builder.add_edge(extract_formulas,calculate_scores)builder.add_edge(calculate_scores,summarize_grading)builder.add_edge(summarize_grading,END)# 解题流程解题 → 规范化 → 输出builder.add_edge(solve_problems,normalize_output)builder.add_edge(normalize_output,END)returnbuilder.compile()2. SSE 流式输出每个工作流节点执行时通过 SSE 实时推送进度到前端asyncdefevent_generator():yieldfevent: start\ndata:{json.dumps({message:开始处理})}\n\ncomplete_statedict(initial_state)asyncforstepinworkflow.astream(initial_state):fornode_name,node_outputinstep.items():complete_state.update(node_output)progress_msgstep_messages.get(node_name,处理中...)yieldfevent: progress\ndata:{json.dumps({step:node_name,message:progress_msg})}\n\nfinal_outputcomplete_state.get(final_output,)yieldfevent: done\ndata:{json.dumps({content:final_output})}\n\n3. 前端 SSE 解析letlastEventfor(constlineoflines){if(line.startsWith(event:)){lastEventline.slice(6).trim()}elseif(line.startsWith(data:)){constdataJSON.parse(line.slice(5).trim())if(lastEventprogress)onProgress(data.step,data.message)elseif(lastEventdone)onDone(data.content)elseif(lastEventerror)onError(data.error)}}4. LaTeX 数学公式渲染AI 解题结果包含大量数学公式前端使用 KaTeX 渲染// 内联公式: $...$md.renderer.rules.inline_math(tokens,idx){returnkatex.renderToString(tokens[idx].content,{throwOnError:false})}// 块级公式: $$...$$md.renderer.rules.block_math(tokens,idx){returndiv classmath-block${katex.renderToString(tokens[idx].content,{displayMode:true,throwOnError:false})}/div}5. JSON 文件持久化存储数据持久化采用轻量级 JSON 文件方案服务重启后数据不丢失def_load_json(filename:str,defaultNone):filepathDATA_DIR/filenameiffilepath.exists():withopen(filepath,r,encodingutf-8)asf:returnjson.load(f)returndefaultdef_save_json(filename:str,data):withopen(DATA_DIR/filename,w,encodingutf-8)asf:json.dump(data,f,ensure_asciiFalse,indent2)踩坑记录1. SSE 响应格式错误问题AttributeError: dict object has no attribute encode原因event_generator()中 yield 的是 Python dict 对象但 Starlette 的StreamingResponse期望字符串解决# 错误yield{event:progress,data:json.dumps(...)}# 正确 — 标准 SSE 字符串格式yieldfevent: progress\ndata:{json.dumps(...)}\n\n2. LangGraph 状态丢失问题历史记录和统计数据为空intent字段在check_images节点被覆盖为no_images原因LangGraph 的astream返回每个节点的增量更新后续节点的状态会覆盖前面的字段解决在分类节点完成后立即保存原始意图不被后续节点覆盖original_intentasyncforstepinworkflow.astream(initial_state):fornode_name,node_outputinstep.items():complete_state.update(node_output)ifnode_nameclassify_intent:original_intentnode_output.get(intent,)# 使用原始意图判断是否保存历史记录intentoriginal_intentorcomplete_state.get(intent,)3. KaTeX 公式渲染问题AI 返回的数学公式$...$和$$...$$直接显示为纯文本原因markdown-it 默认不支持 LaTeX 数学公式解决安装katexmarkdown-it-katex自定义 inline_math 和 block_math 渲染规则工程化实践1. 配置管理# API Key 从系统环境变量读取DASHSCOPE_API_KEYos.getenv(DASHSCOPE_API_KEY,)# 模型配置集中管理MODEL_VISIONqwen3-vl-plus# 视觉理解MODEL_TEXTqwen3-max# 文本推理MODEL_THINKINGqwen-flash# 思考模式MODEL_CLASSIFIERqwen-plus-latest# 意图分类2. 前后端一体化部署# FastAPI 挂载前端静态文件frontend_distPath(__file__).parent.parent/frontend/distiffrontend_dist.exists():app.mount(/assets,StaticFiles(directoryfrontend_dist/assets))app.get(/{full_path:path})asyncdefserve_frontend(full_path:str):returnFileResponse(frontend_dist/index.html)3. 前端功能模块智能对话SSE 流式输出 Markdown/LaTeX 渲染 图片上传(Base64)历史记录按类型/日期筛选支持详情查看统计看板ECharts 图表趋势折线图、分布环形图、分数柱状图用户管理多角色admin/teacher/studentToken 认证数据导出支持 JSON/CSV/Excel 格式导出性能数据任务耗时说明意图分类~1sqwen-plus-latest图片 OCR~5sqwen3-vl-plus 视觉模型作业批改~8sqwen3-max 文本推理分数计算~3sqwen-flash 思考模式题目解答~10sqwen3-vl-plus 思考模式输出规范化~5sqwen-flash 思考模式完整流程解题任务含图片识别解答规范化总耗时约 15-20 秒。总结这个项目让我对 AI 应用落地有了更深的理解工作流编排是核心LangGraph 的状态图模型比线性链更适合复杂业务场景状态管理要谨慎多节点工作流中关键字段容易被后续节点覆盖需要保护机制SSE 提升体验流式输出让用户实时感知处理进度避免长时间等待的焦虑公式渲染很重要教育场景中数学公式的正确显示直接影响用户体验工程化决定成败配置管理、持久化存储、前后端一体化这些决定了系统能否真正可用如果你也在做 AI 应用开发希望这些经验对你有帮助。源码仓库已开源完整源码已开源至 Gitee含可运行 Demo 核心代码注释 踩坑修复方案项目地址Gitee - SmartGrader-AI ⭐ 欢迎 Star仓库包含LangGraph 状态图工作流节点 边 条件路由SSE 流式输出 前端解析原始意图保护机制防状态覆盖KaTeX 数学公式渲染多模型协同视觉 文本推理 思考模式Vue3 前端 FastAPI 后端 JSON 持久化本 Demo 仅做技术复盘与学习演示基于 LangGraph 工作流编排工程实践经验提炼后续还会持续迭代补充更多场景优化。
【AI项目】用 LangGraph 构建智能批改与解题系统：条件路由、SSE流式输出Agent工作流实践
✨文末附开源仓库地址做 AI 应用落地的同学可以直接拉下来跑。⚠️ 本文为技术演示项目仅供学习和交流参考不建议直接用于生产环境。当 LLM 遇见视觉模型如何用 LangGraph 把它们串成一个完整的智能教育产品前言做 AI 智能体Agent最容易卡在哪不是模型调不通是多个模型按业务逻辑串起来还能稳定跑、状态在节点间流转还能不丢。工作流编排、条件路由、状态管理、流式输出——这些事线性链LangChain 那种搞不定得上状态图。最近在关注 LangGraph 工作流编排的落地实践把这套问题在真实场景里跑了一遍意图分类 → 条件路由 → 批改分支 / 解题分支 → SSE 流式输出一个状态图串起 4 个模型拍照上传自动批改评分或解题。把状态丢失、意图被覆盖、SSE 格式错误这些坑都沉淀进这套可运行 Demo 里了文末附开源仓库地址做 AI 智能体落地的同学可以直接拉下来跑。项目目标为教育场景打造一套智能批改与解题系统用户拍照上传试卷或题目系统自动完成作业批改评分或题目解答。技术挑战如何用 LangGraph 编排多个 AI 模型协同工作如何处理视觉理解 文本推理的混合任务如何实现 SSE 流式输出让用户实时看到处理进度系统架构整体设计核心流程整个系统的核心是一个LangGraph 状态图工作流意图分类用户输入文本qwen-plus-latest 判断是批改作业还是拍照解题条件路由根据意图分流到不同分支批改分支图片 OCR 识别 → 逐题批改 → 提取分数公式 → 计算总分 → 汇总输出解题分支视觉模型识别题目 → 逐步解答 → 规范化排版输出SSE 流式输出每个节点执行时实时推送进度到前端使用演示Step 1拍照解题 — 上传题目用户输入题目描述并上传题目图片系统自动识别意图为解题如图用户输入这四道题答案是什么并上传试卷图片系统识别为解题意图。Step 2拍照解题 — AI 解答视觉模型识别题目内容并逐步解答数学公式以标准 LaTeX 格式渲染显示如图系统自动识别 4 道数学题圆柱体积计算、体积比、直线截距方程、命题判断逐题给出完整解答过程LaTeX 公式正确渲染。Step 3作业批改 — 上传试卷用户选择批改作业并上传参考答案和学生试卷图片系统自动识别意图为批改如图用户上传包含参考答案和学生作答的试卷图片系统进入批改流程。Step 4作业批改 — 批改结果系统完成 OCR 识别、逐题批改、分数提取与计算输出完整的批改报告如图系统输出每道题的批改结果和得分并汇总总分。Step 5统计看板数据可视化所有批改和解题记录自动沉淀为统计数据看板展示核心指标和趋势图表如图统计看板展示 4 个核心指标卡片总批改次数、总解题次数、今日使用量、活跃用户折线图展示近 7 天使用趋势环形图展示功能使用分布柱状图展示平均分分布。技术选型思考为什么选 LangGraph状态图模型用节点和边描述工作流比线性链更灵活条件路由根据中间结果动态决定下一步完美适配批改/解题分支状态累积每个节点更新状态字典最终获取完整结果异步支持原生支持astream方便对接 SSE为什么前端用 Vue 3Composition API复杂状态管理更清晰聊天消息、会话列表、统计图表生态成熟Element Plus 组件库开箱即用图表支持ECharts 集成方便统计看板数据可视化为什么用阿里云百炼模型齐全视觉模型qwen3-vl-plus、文本模型qwen3-max、思考模型qwen-flash一站式配齐OpenAI 兼容统一 API 格式降低集成成本国内访问无需翻墙延迟低核心代码实现1. LangGraph 工作流构建fromlanggraph.graphimportStateGraph,START,ENDdefbuild_workflow():builderStateGraph(GraphState)# 添加节点builder.add_node(classify_intent,classify_intent)builder.add_node(check_grading_images,check_grading_images)builder.add_node(check_solving_images,check_solving_images)builder.add_node(image_ocr,image_ocr)builder.add_node(grade_homework,grade_homework)builder.add_node(solve_problems,solve_problems)builder.add_node(normalize_output,normalize_output)# 设置边builder.add_edge(START,classify_intent)# 条件路由根据意图分流builder.add_conditional_edges(classify_intent,route_by_intent,{check_grading_images:check_grading_images,check_solving_images:check_solving_images,empty_intent_hint:empty_intent_hint,})# 批改流程OCR → 批改 → 提取分数 → 计算 → 汇总builder.add_edge(image_ocr,grade_homework)builder.add_edge(grade_homework,extract_formulas)builder.add_edge(extract_formulas,calculate_scores)builder.add_edge(calculate_scores,summarize_grading)builder.add_edge(summarize_grading,END)# 解题流程解题 → 规范化 → 输出builder.add_edge(solve_problems,normalize_output)builder.add_edge(normalize_output,END)returnbuilder.compile()2. SSE 流式输出每个工作流节点执行时通过 SSE 实时推送进度到前端asyncdefevent_generator():yieldfevent: start\ndata:{json.dumps({message:开始处理})}\n\ncomplete_statedict(initial_state)asyncforstepinworkflow.astream(initial_state):fornode_name,node_outputinstep.items():complete_state.update(node_output)progress_msgstep_messages.get(node_name,处理中...)yieldfevent: progress\ndata:{json.dumps({step:node_name,message:progress_msg})}\n\nfinal_outputcomplete_state.get(final_output,)yieldfevent: done\ndata:{json.dumps({content:final_output})}\n\n3. 前端 SSE 解析letlastEventfor(constlineoflines){if(line.startsWith(event:)){lastEventline.slice(6).trim()}elseif(line.startsWith(data:)){constdataJSON.parse(line.slice(5).trim())if(lastEventprogress)onProgress(data.step,data.message)elseif(lastEventdone)onDone(data.content)elseif(lastEventerror)onError(data.error)}}4. LaTeX 数学公式渲染AI 解题结果包含大量数学公式前端使用 KaTeX 渲染// 内联公式: $...$md.renderer.rules.inline_math(tokens,idx){returnkatex.renderToString(tokens[idx].content,{throwOnError:false})}// 块级公式: $$...$$md.renderer.rules.block_math(tokens,idx){returndiv classmath-block${katex.renderToString(tokens[idx].content,{displayMode:true,throwOnError:false})}/div}5. JSON 文件持久化存储数据持久化采用轻量级 JSON 文件方案服务重启后数据不丢失def_load_json(filename:str,defaultNone):filepathDATA_DIR/filenameiffilepath.exists():withopen(filepath,r,encodingutf-8)asf:returnjson.load(f)returndefaultdef_save_json(filename:str,data):withopen(DATA_DIR/filename,w,encodingutf-8)asf:json.dump(data,f,ensure_asciiFalse,indent2)踩坑记录1. SSE 响应格式错误问题AttributeError: dict object has no attribute encode原因event_generator()中 yield 的是 Python dict 对象但 Starlette 的StreamingResponse期望字符串解决# 错误yield{event:progress,data:json.dumps(...)}# 正确 — 标准 SSE 字符串格式yieldfevent: progress\ndata:{json.dumps(...)}\n\n2. LangGraph 状态丢失问题历史记录和统计数据为空intent字段在check_images节点被覆盖为no_images原因LangGraph 的astream返回每个节点的增量更新后续节点的状态会覆盖前面的字段解决在分类节点完成后立即保存原始意图不被后续节点覆盖original_intentasyncforstepinworkflow.astream(initial_state):fornode_name,node_outputinstep.items():complete_state.update(node_output)ifnode_nameclassify_intent:original_intentnode_output.get(intent,)# 使用原始意图判断是否保存历史记录intentoriginal_intentorcomplete_state.get(intent,)3. KaTeX 公式渲染问题AI 返回的数学公式$...$和$$...$$直接显示为纯文本原因markdown-it 默认不支持 LaTeX 数学公式解决安装katexmarkdown-it-katex自定义 inline_math 和 block_math 渲染规则工程化实践1. 配置管理# API Key 从系统环境变量读取DASHSCOPE_API_KEYos.getenv(DASHSCOPE_API_KEY,)# 模型配置集中管理MODEL_VISIONqwen3-vl-plus# 视觉理解MODEL_TEXTqwen3-max# 文本推理MODEL_THINKINGqwen-flash# 思考模式MODEL_CLASSIFIERqwen-plus-latest# 意图分类2. 前后端一体化部署# FastAPI 挂载前端静态文件frontend_distPath(__file__).parent.parent/frontend/distiffrontend_dist.exists():app.mount(/assets,StaticFiles(directoryfrontend_dist/assets))app.get(/{full_path:path})asyncdefserve_frontend(full_path:str):returnFileResponse(frontend_dist/index.html)3. 前端功能模块智能对话SSE 流式输出 Markdown/LaTeX 渲染 图片上传(Base64)历史记录按类型/日期筛选支持详情查看统计看板ECharts 图表趋势折线图、分布环形图、分数柱状图用户管理多角色admin/teacher/studentToken 认证数据导出支持 JSON/CSV/Excel 格式导出性能数据任务耗时说明意图分类~1sqwen-plus-latest图片 OCR~5sqwen3-vl-plus 视觉模型作业批改~8sqwen3-max 文本推理分数计算~3sqwen-flash 思考模式题目解答~10sqwen3-vl-plus 思考模式输出规范化~5sqwen-flash 思考模式完整流程解题任务含图片识别解答规范化总耗时约 15-20 秒。总结这个项目让我对 AI 应用落地有了更深的理解工作流编排是核心LangGraph 的状态图模型比线性链更适合复杂业务场景状态管理要谨慎多节点工作流中关键字段容易被后续节点覆盖需要保护机制SSE 提升体验流式输出让用户实时感知处理进度避免长时间等待的焦虑公式渲染很重要教育场景中数学公式的正确显示直接影响用户体验工程化决定成败配置管理、持久化存储、前后端一体化这些决定了系统能否真正可用如果你也在做 AI 应用开发希望这些经验对你有帮助。源码仓库已开源完整源码已开源至 Gitee含可运行 Demo 核心代码注释 踩坑修复方案项目地址Gitee - SmartGrader-AI ⭐ 欢迎 Star仓库包含LangGraph 状态图工作流节点 边 条件路由SSE 流式输出 前端解析原始意图保护机制防状态覆盖KaTeX 数学公式渲染多模型协同视觉 文本推理 思考模式Vue3 前端 FastAPI 后端 JSON 持久化本 Demo 仅做技术复盘与学习演示基于 LangGraph 工作流编排工程实践经验提炼后续还会持续迭代补充更多场景优化。 
![[通信与计算]通信原理:通信系统模型概述](http://pic.xiahunao.cn/yaotu/[通信与计算]通信原理:通信系统模型概述)
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
