ブラウザでCADエディタを構築し、LLMにその使い方を教えた
アプリにこう尋ねてみた。「ドアと窓はいくつありますか？」
AIは個数を答えた。そして、何も指示していないのにこう付け加えた。
「注意：D3の幅はわずか300mmです。これは誤検知されたドアである可能性があります。確認しますか？」
それは正しかった。私のシステムは、ある幾何学的な図形を30cmのドアに変えてしまっていたのだ。人間は誰も気づかなかった。モデルはデータを読み取り、靴箱よりも細いドアを見つけ、それをフラグ立てした。
その瞬間、膨大なエンジニアリングの挑戦が報われた。AutoCADのDWGファイルを解析し、数千ものバラバラな線から建物のモデルを再構築し、2Dエディタをゼロから構築して、Claudeに接続しなければならなかった。
構築のプロセスを以下に記す。
データの問題
DWGファイルには「壁」は含まれていない。含まれているのは「線」だ。このプロジェクトにおける興味深いことのすべては、この2つの文章の間に存在する。
これらのファイルを扱うために、2つのルールに従った：
- パーサーをサブプロセスとして実行する。30年前のパーサーがクラッシュしても、サーバーが停止しないようにするためだ。
- ファイルを決して信用しない。DWGのヘッダーは単位について嘘をつくことがよくある。ヘッダーは無視し、実際の数値を見て真のスケールを特定する。
抽出パイプライン
バラバラな線の集まりを、構造化されたモデルに変換した：
- 壁は中心線。
- ドアと窓は、ホストとなる壁にスナップする。
- 部屋は名前と面積を持つポリゴン。
分類には簡単なトリックを用いた。レイヤー名に対して部分一致（substring matching）を用いた。レイヤー名が「WAND」や「MAUER」であれば、システムはそれが壁であることを認識する。レイヤー名がない場合は、幾何学的な形状から推測する。
エディタ
生のCanvas 2Dコンテキストを使用してエディタを構築した。高速性を維持するために、3つのレイヤーを使用した：
- レイヤー1：静的なグリッドと元の線。
- レイヤー2：モデル（壁、部屋、ドア）。
- レイヤー3：アクティブなカーソルとプレビュー。
これにより、1,000個近い壁があってもフレームレートを60 FPSに保つことができた。
AIコパイロット
ただ喋るだけのチャットボットではなく、実際に動くエージェントが欲しかった。Claudeに、モデルを読み取り編集するための13個のツールを与えた。
安全性を保つために、3つのルールに従った：
- 単一の書き込みパス：AIは、手動UIと全く同じ検証済みコードを使用する。UIで保存できないものは、AIでも保存できない。
- 回復可能なエラー：AIが適合しない場所にドアを配置しようとすると、ツールがエラーを返す。AIはそのエラーを読み取り、別の場所を試みる。
- Undo（元に戻す）の仕組み：AIのすべての操作は、単一のトランザクションにまとめられる。AIがミスをしても、Ctrl+Zを一度押すだけですべてが修正される。
教訓
- 幾何学的なバグは、テストしていない形状に潜んでいる。長方形の建物は簡単だが、L字型の建物はすべてを壊してしまう。
- ツールをファジング（Fuzz）せよ。LLMはファザー（fuzzer）である。厳格なコードの境界線でそれに対処せよ。
- 難しいのはAIではない。データの基盤だ。幾何学的なデータが堅牢であったため、AIの統合は数週間ではなく数日で済んだ。
Source: https://dev.to/arif/i-built-a-cad-editor-in-the-browser-then-taught-an-llm-to-use-it-1l92