我在浏览器中构建了一个 CAD 编辑器，然后教会了 LLM 如何使用它

我问我的应用：“这里有多少扇门和窗户？”

AI 回答了数量。然后它在没有提示的情况下补充了一句：

“注意：D3 只有 300 mm 宽。这可能是一个检测错误的门。需要我检查一下吗？”

它是对的。我的系统把一段几何图形变成了一扇 30 厘米宽的门。没有人注意到这一点。模型读取了数据，发现一扇比鞋盒还窄的门，并将其标记了出来。

那个时刻是对巨大工程挑战的回报。我必须解析 AutoCAD DWG 文件，从成千上万条随机线条中重建建筑模型，从零开始构建一个 2D 编辑器，并将其连接到 Claude。

以下是我的构建过程。

数据问题

DWG 文件并不包含墙体。它包含的是线条。这个项目中所有有趣的事情都发生在上述两句话之间的空白地带。

为了处理这些文件，我遵循了两个规则：

  • 将解析器作为子进程运行。如果那个有着 30 年历史的解析器崩溃了，也不会导致我的服务器宕机。
  • 永远不要信任文件。DWG 文件头经常在单位上撒谎。我会忽略文件头，直接查看实际数值来确定真实的比例。

提取流水线

我将杂乱无章的线条转化为了结构化模型：

  • 墙体是中心线。
  • 门窗吸附在承载墙上。
  • 房间是带有名称和面积的多边形。

我使用了一个简单的技巧来进行分类。我通过子字符串匹配来识别图层名称。如果图层名为 "WAND" 或 "MAUER"，系统就知道它是墙。如果图层没有名称，系统则会利用几何信息进行推测。

编辑器

我使用原始的 Canvas 2D 上下文构建了编辑器。为了保持流畅，我使用了三个图层：

  • 图层 1：静态网格和原始线条。
  • 图层 2：模型（墙、房间、门）。
  • 图层 3：活动光标和预览。

即使在有近 1,000 面墙的情况下，这也能将帧率保持在 60 FPS。

AI Copilot

我并不想要一个只会聊天的聊天机器人。我想要一个能干活的智能体（Agent）。我给了 Claude 十三个工具，用于读取和编辑模型。

为了保证安全性，我遵循了三条规则：

  • 统一的写入路径：AI 使用与手动 UI 完全相同的经过验证的代码。如果 UI 无法保存，AI 也无法保存。
  • 可恢复的错误：如果 AI 尝试将门放置在不合适的位置，工具会返回错误。AI 会读取该错误并尝试另一个位置。
  • 撤销机制：AI 的每一次操作都被封装进一个单一的事务（transaction）中。如果 AI 犯了错，按一下 Ctrl+Z 就能修复一切。

经验教训

  • 几何错误隐藏在你未测试过的形状中。矩形建筑很容易处理，但 L 形建筑会让一切崩溃。
  • 对你的工具进行模糊测试（Fuzzing）。LLM 本身就是一个模糊测试器。应对它的方式是建立严格的代码边界。
  • 难点不在于 AI，而在于数据基础。正因为几何数据足够扎实，AI 的集成工作只用了几天，而不是几周。

来源：https://dev.to/arif/i-built-a-cad-editor-in-the-browser-then-taught-an-llm-to-use-it-1l92