很多 AI 助教已经能解释几何题,却仍然卡在一个关键环节:它会说“作一条辅助线”,但不能在用户眼前真正作出这条线。
通用图片生成也不是完整答案。它可以画出“像几何图”的图,却很难保证点在线上、两线垂直、圆经过指定点,更无法让用户继续拖动和修改。
一个可落地的 AI 几何体验需要三层能力:
- AI 理解用户的题目和修改意图;
- 几何引擎执行结构化构造;
- 编辑器让用户检查、调整、保存和导出。
大角几何 SDK 的编辑器 AI 对话把这三层连接在同一个界面里。
一、用户体验应该是什么样?
学生在 AI 助教中输入:
画一个三角形 ABC,D 是 BC 的中点,连接 AD,并把 AD 标成蓝色。理想流程不是返回一段作图步骤,也不是给出一张静态图片,而是:
- 画板里创建三角形 ABC;
- 构造 BC 的中点 D;
- 连接 AD 并设置样式;
- 用户可以拖动 A、B、C 检查关系;
- 用户继续说“再作过 D 的垂线”,AI 在当前内容上修改;
- 最终内容被保存到用户的题目或教案中。
这才是 AI 助教中的“几何作图能力”,而不是一次性的配图生成。
二、整体架构
AI 对话采用宿主托管的桥接流程:
用户输入 ↓ 内嵌大角几何编辑器 ↓ aiRequest 你的 Web 页面 ↓ 你的业务后端(用户鉴权、额度与日志) ↓ 大角几何内嵌模式 AI 生图接口 ↓ SSE 流 你的 Web 页面 ↓ consumeStream 编辑器更新对话和几何内容这套设计的重要之处是:服务端 token 不进入浏览器,用户权限和套餐仍由你的系统控制。
三、在编辑器中开启 AI 面板
npminstall@dajiaoai/algeo-sdk@2创建编辑器时显示 AI 面板:
import{createEditor}from'@dajiaoai/algeo-sdk';consteditor=awaitcreateEditor(container,{auth:{appId:'YOUR_APP_ID'},ui:{navbar:true,toolboxPanel:true,aiChatPanel:true,},});四、监听请求并交给自己的后端
用户在内嵌面板中发送消息时,编辑器触发aiRequest:
editor.on('aiRequest',async({payload,signal})=>{constresponse=awaitfetch('/api/algeo-ai/chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload),signal,});if(!response.ok||!response.body){thrownewError('AI 几何服务调用失败');}awaiteditor.ai.consumeStream({stream:response.body,signal,});});通常不需要在前端手动解析或重组payload。把它发送给宿主后端,由后端原样转发即可。
signal用于取消请求。用户停止生成或离开页面时,应让取消信号沿请求链路传递,避免后端继续执行无用任务。
五、后端只做业务控制和安全转发
以下是简化后的 Node.js 伪代码,实际实现要按项目使用的 Web 框架调整:
app.post('/api/algeo-ai/chat',async(req,res)=>{awaitassertSignedIn(req.user);awaitassertUserHasQuota(req.user);constupstream=awaitfetch('https://api.dajiaoai.com/api/v1/embedded/ai/run',{method:'POST',headers:{'Content-Type':'application/json',Authorization:`Bearer${process.env.DAJIAOAI_API_TOKEN}`,},body:JSON.stringify(req.body),signal:req.signal,},);// 将上游状态和 SSE 响应流透传给前端proxyStream(upstream,res);});这里有三条安全底线:
appId可以出现在前端;服务端 token 不可以。- 后端必须根据当前登录态判断用户,不接受前端自报的用户身份。
- 额度、套餐、频率限制和审计日志应在转发前执行。
六、把题目或图片预填进 AI 对话
可以设置 AI 草稿。比如用户在题库中点击“用 AI 画图”,宿主可以把当前题目和图片预先放入输入框:
awaiteditor.ai.setDraft({text:`请根据当前题目生成几何图:${question.stem}`,images:question.imageUrls,openPanel:true,focus:true,});七、AI 生成后为什么仍需要人工编辑?
几何内容的“正确”和“适合使用”不是一回事。
AI 可能完成了正确构造,但教学人员仍需要判断:
- 辅助线是否太多;
- 标签是否遮挡;
- 颜色是否符合讲义风格;
- 是否需要拆成多个画板;
- 图形是否突出当前知识点。
内嵌编辑器让 AI 和人工共享同一份结构化内容。AI 负责快速起稿,人负责教学判断和最终确认。
八、保存、审核和复用
生成完成后,可以通过编辑器保存事件或document.getContent()获取完整内容,将其和业务对象关联:
AI 生成草稿 ↓ 用户人工修改 ↓ 保存到题目 / 教案 / 用户项目 ↓ 审核与版本记录 ↓ 发布互动内容或导出图片不要只保存最终 PNG。图片适合展示,结构化内容才支持继续修改、拖动和生成不同版本。
九、产品设计中的三个边界
不要让 AI 输出直接自动发布
尤其是题库和教案场景,应保留人工检查和审核状态。
不要把 AI 作图等同于自动解题
SDK 和 AI 接口提供构造与编辑能力。完整解题还涉及条件理解、证明、答案判定和教学解释。
不要把密钥控制交给前端
浏览器只负责产生请求和消费流。业务鉴权、额度和服务端凭证必须留在后端。
常见问题
可以不显示 AI 面板,只用自己的聊天框吗?
可以根据产品架构使用 REPL 或其他开放能力控制画板。本文介绍的是 SDK 当前提供的内嵌 AI 对话流程,它能减少对话状态和几何编辑器之间的割裂。
AI 能读取当前画板继续修改吗?
编辑器 AI 对话围绕当前内容和对话上下文工作,适合连续生成和修改。具体上下文由 SDK 与后端协议处理,普通接入不需要手工拼接全部字段。
能否限制学生使用 AI?
可以在 UI 中隐藏 AI 面板,并在宿主后端根据角色、套餐和场景拒绝请求。前后端都应控制,但后端权限判断是最终依据。
结语
AI 助教补齐几何能力,关键不是多接一个图片模型,而是给 AI 一个可执行、可检查、可继续编辑的几何环境。
当自然语言、几何引擎和宿主业务系统连接起来,AI 才能从“解释要怎么画”前进到“真正画出来,并让用户继续完成工作”。
下一步:查看 编辑器 AI 对话文档,先用一个简单三角形构造验证请求、流式返回和保存链路。