news 2026/7/31 10:56:28

如何在自己的 AI 助教里加入几何画板和 AI 作图?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
如何在自己的 AI 助教里加入几何画板和 AI 作图?

很多 AI 助教已经能解释几何题,却仍然卡在一个关键环节:它会说“作一条辅助线”,但不能在用户眼前真正作出这条线。

通用图片生成也不是完整答案。它可以画出“像几何图”的图,却很难保证点在线上、两线垂直、圆经过指定点,更无法让用户继续拖动和修改。

一个可落地的 AI 几何体验需要三层能力:

  1. AI 理解用户的题目和修改意图;
  2. 几何引擎执行结构化构造;
  3. 编辑器让用户检查、调整、保存和导出。

大角几何 SDK 的编辑器 AI 对话把这三层连接在同一个界面里。

一、用户体验应该是什么样?

学生在 AI 助教中输入:

画一个三角形 ABC,D 是 BC 的中点,连接 AD,并把 AD 标成蓝色。

理想流程不是返回一段作图步骤,也不是给出一张静态图片,而是:

  1. 画板里创建三角形 ABC;
  2. 构造 BC 的中点 D;
  3. 连接 AD 并设置样式;
  4. 用户可以拖动 A、B、C 检查关系;
  5. 用户继续说“再作过 D 的垂线”,AI 在当前内容上修改;
  6. 最终内容被保存到用户的题目或教案中。

这才是 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 对话文档,先用一个简单三角形构造验证请求、流式返回和保存链路。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/31 10:56:13

S7-1200 PLC第三方调试助手:Snap7与Python实战通信指南

1. 项目概述:为什么我们需要第三方调试助手?在工业自动化领域,西门子S7-1200 PLC因其出色的性能、友好的编程环境和相对亲民的价格,成为了中小型项目中的“明星选手”。无论是产线控制、设备监控还是数据采集,你都能看…

作者头像 李华
网站建设 2026/7/31 10:54:07

Python实现B站视频下载:解锁大会员4K与充电专属内容的完整指南

Python实现B站视频下载:解锁大会员4K与充电专属内容的完整指南 【免费下载链接】bilibili-downloader B站视频下载,支持下载大会员清晰度4K,持续更新中 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-downloader 你是否想要…

作者头像 李华
网站建设 2026/7/31 10:52:35

中国车牌生成器终极指南:快速生成合规车牌图片的完整教程

中国车牌生成器终极指南:快速生成合规车牌图片的完整教程 【免费下载链接】chinese_license_plate_generator 中国车牌生成器 项目地址: https://gitcode.com/gh_mirrors/ch/chinese_license_plate_generator 你是否正在开发车牌识别系统,却苦于找…

作者头像 李华
网站建设 2026/7/31 10:52:19

ChatGPT API限速重置机制解析与应对策略

这次我们来看一个关于 ChatGPT Work 和限速重置的话题。如果你正在使用 ChatGPT 的各种 API 服务,或者遇到过调用频率限制的问题,这篇文章会直接告诉你当前的情况、限速规则的变化趋势,以及如何应对即将到来的重置。 从现有信息来看&#xf…

作者头像 李华
网站建设 2026/7/31 10:51:28

SpringBoot项目Maven打包与跨平台部署实战指南

1. 项目概述:从代码到服务的最后一公里 做SpringBoot开发的朋友,肯定都经历过本地调试一切顺利,但一到部署上线就状况百出的阶段。这感觉就像精心组装了一辆赛车,在自家后院跑得飞快,但真要上赛道了,却发现…

作者头像 李华