一图读懂PenEcho的AI请求流从手写笔迹到结构化命令的8个阶段【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penechoPenEcho 是一个支持手写、公式、图表与空间推理的 AI 协作画布。本文带你用一张图八个阶段看懂 PenEcho 的AI 请求流是如何工作的你刚停笔的几秒里手写的Hello是如何被裁剪成图像、打包进请求、经过服务端校验、交给模型推理最终以结构化命令变回画布上可编辑的内容的。全程无需写代码普通用户也能一次看懂 ️先看全景图一次请求经过哪些角色在拆解细节前先建立整体印象。PenEcho 的 AI 请求流发生在三个角色之间浏览器画布负责采集笔迹和打包图像、本地 Node.js 服务端负责校验与安全、模型执行器API 或本地 CLI。如上图所示请求从画布出发经本地服务路由到内置 Agent 或你配置的模型结果再回流到画布上。下面按时间顺序拆解这 8 个阶段完整规范见 docs/architecture.md。阶段1-2停笔不是结束而是请求的起点阶段 1 —— 输入被记录成脏区域。你每一笔书写都会更新一个脏的逻辑包围盒并留下热点轨迹。画布并不会立刻发起请求而是安静地记下这里刚被改过。阶段 2 —— 延迟后生成请求底图atlas。配置好的停笔延迟默认几秒结束后客户端会取消过期的旧请求围绕你最新的墨迹生成一张白底图像——就像给刚写的字拍一张裁剪得当的照片只包含最新笔画周围的内容。浏览、缩放等界面操作不会触发这个计时器。图像打包逻辑位于 public/app.js。 设计要点延迟合并让你连续书写时只发一次请求既省 token 又省等待。阶段3请求包里到底装了什么请求并不是只有一张图。它会携带一整套上下文信封全局几何信息当前视口在画布坐标系中的位置与缩放latestInput 矩形最新输入的权威区域告诉模型重点看这里8×8 热点网格把最新区域划成 64 格按从旧到新排序标注你落笔的顺序模型据此读懂你的编辑意图聚焦放大框focus inset对关键区域的一次放大特写推理档位选择本次请求使用多强的思考深度插件字段只有你启用的插件才会出现在请求里。这样模型看到的不是一张乱糟糟的截图而是带坐标系、带注意力指引的结构化证据。阶段4-5服务端的双重把关阶段 4 —— 几何与载荷的严格校验。请求到达 server.js 后服务端会校验所有几何坐标、图像边界、动作与触发方式的配对、推理档位、插件布尔值与载荷上限。任何一项不合法都会被拒之门外——这是防止异常请求浪费模型资源的第一道闸门。阶段 5 —— 推理级别的精确映射。发送前一刻服务端通过 src/providers/reasoning-effort.js 把统一的 PenEcho 档位none 到 max映射成各家模型的原生参数Kimi 用 low/high/maxAnthropic 用 effort 等级MiniMax 用 thinking 模式……同一份中等强度意图在不同提供商那里都能被正确执行且请求追踪会同时保留两侧取值方便核对。阶段6流式响应与实时进度条阶段 6 —— 模型连接与 SSE 流式接收。画布以 NDJSON 方式请求顶栏的状态指示器会如实展示每个阶段打包画布 → 提交请求 → 服务端接收 → 图像准备 → 模型连接/等待 → 接收响应 → 校验完成。上游采用标准 SSE 流式解析Waiting 在收到响应头的那一刻就结束因此长时生成不再看起来像假死。请求进行到一半时右上角还会变成一个 Stop 按钮可随时中止。下面的截图展示了 PenEcho Agent 面板中这类分阶段进度的真实样子——每一步工具调用创建组件、读取源码、应用补丁、验证结果都清晰可见阶段7结构化命令的校验与草稿层阶段 7 —— 双向过滤 未确认草稿。模型返回的不是自由文本而是一批结构化命令文本、公式、绘图、动画场景等。服务端先过滤掉属于已禁用插件的命令客户端再次校验每一条命令然后把它们渲染到一个未确认草稿层带虚线边框、可移动、可缩放等待你的决定。绘图命令的独立校验与渲染规则在 public/draw.js 中实现AI 提供的任何 JavaScript 都不会被执行——安全边界非常明确。阶段8一键确认落回画布阶段 8 —— 确认即提交拒绝即无痕。点击接受静态结果被写入稀疏瓦片或动画 JSON 进入持久动画层并生成独立的撤销记录点击拒绝草稿被整体移除已确认内容毫发无损。继续书写也不会打断草稿——新的 AI 结果只会追加到草稿批次里不会误伤你正在思考的半成品。延伸同一套思想也用于 MCP 请求这套结构化、可校验、带进度的请求流同样延伸到了 MCP 集成场景AI 客户端通过本地 MCP 服务获取裁剪后的书写指引再执行如组件呈现等操作每一步都有明确的往返契约而无论请求走云端还是本地两条 MCP 通道Cloud MCP 与 Local MCP都是可选项你可以按需启用总结8个阶段速览表#阶段一句话概括1输入记录笔迹标记脏区域与热点轨迹2底图生成停笔延迟后围绕最新墨迹裁剪白底图像3请求打包几何latestInput8×8热点网格聚焦框4服务端校验几何、边界、载荷逐项把关5推理映射统一档位 → 各提供商原生参数6流式执行SSE 流式接收进度实时可见7命令校验双向过滤渲染为未确认草稿8确认提交接受写入瓦片拒绝无痕移除如果你想继续深挖细节建议从 docs/architecture.md 的 AI Request Flow 章节和 src/server/canvas-agent/ 目录的运行时实现读起。【免费下载链接】penechoThink with AI beyond the chat box. A shared canvas for handwriting, equations, diagrams, and spatial reasoning.项目地址: https://gitcode.com/gh_mirrors/pe/penecho创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考