Saya Membangun Editor CAD di Browser, Lalu Mengajari LLM Cara Menggunakannya

Saya bertanya pada aplikasi saya: "Ada berapa banyak pintu dan jendela?"

AI menjawab dengan jumlahnya. Kemudian ia menambahkan sesuatu tanpa diminta:

"Catatan: D3 lebarnya hanya 300 mm. Ini kemungkinan pintu yang salah terdeteksi. Ingin saya memeriksanya?"

Ternyata benar. Sistem saya telah mengubah sebuah geometri menjadi pintu berukuran 30 cm. Tidak ada manusia yang menyadarinya. Model tersebut membaca datanya, melihat pintu yang lebih sempit dari kotak sepatu, dan menandainya.

Momen itu adalah hasil dari tantangan teknik yang masif. Saya harus membedah (parse) file AutoCAD DWG, merekonstruksi model bangunan dari ribuan garis acak, membangun editor 2D dari nol, dan menghubungkannya ke Claude.

Berikut adalah cara saya membangunnya.

Masalah Data

Sebuah file DWG tidak berisi dinding. Ia berisi garis-garis. Segala sesuatu yang menarik dalam proyek ini terjadi di antara kedua kalimat tersebut.

Saya mengikuti dua aturan untuk menangani file-file ini:

  • Jalankan parser sebagai subprocess. Jika parser berusia 30 tahun itu crash, ia tidak akan mematikan server saya.
  • Jangan pernah percaya pada file tersebut. Header DWG sering kali berbohong tentang unit. Saya mengabaikan header dan melihat angka sebenarnya untuk menemukan skala yang tepat.

Pipeline Ekstraksi

Saya mengubah kumpulan garis yang berantakan menjadi model yang terstruktur:

  • Dinding adalah garis tengah (centerlines).
  • Pintu dan jendela menempel (snap) pada dinding induknya.
  • Ruangan adalah poligon dengan nama dan luas.

Saya menggunakan trik sederhana untuk klasifikasi. Saya menggunakan pencocokan substring untuk nama layer. Jika sebuah layer bertuliskan "WAND" atau "MAUER," sistem tahu itu adalah dinding. Jika sebuah layer tidak memiliki nama, sistem menggunakan geometri untuk menebaknya.

Editor

Saya membangun editor menggunakan konteks Canvas 2D mentah. Agar tetap cepat, saya menggunakan tiga layer:

  • Layer 1: Grid statis dan garis asli.
  • Layer 2: Model (dinding, ruangan, pintu).
  • Layer 3: Kursor aktif dan pratinjau.

Ini menjaga frame rate tetap di 60 FPS bahkan dengan hampir 1.000 dinding.

AI Copilot

Saya tidak menginginkan chatbot yang hanya bisa bicara. Saya menginginkan agen yang bisa bekerja. Saya memberikan Claude tiga belas alat untuk membaca dan mengedit model tersebut.

Agar tetap aman, saya mengikuti tiga aturan:

  • Satu jalur penulisan: AI menggunakan kode tervalidasi yang persis sama dengan UI manual. Jika UI tidak dapat menyimpannya, AI juga tidak dapat menyimpannya.
  • Error yang dapat dipulihkan: Jika AI mencoba menempatkan pintu di tempat yang tidak pas, alat tersebut akan mengembalikan error. AI membaca error tersebut dan mencoba titik lain.
  • Fitur undo: Setiap tindakan AI digabungkan ke dalam satu transaksi tunggal. Jika AI membuat kesalahan, satu tekanan Ctrl+Z akan memperbaiki semuanya.

Pelajaran yang Dipetik

  • Bug geometri bersembunyi di bentuk-bentuk yang tidak Anda uji. Bangunan persegi panjang itu mudah. Bangunan berbentuk L merusak segalanya.
  • Lakukan fuzzing pada alat Anda. LLM adalah sebuah fuzzer. Hadapi ia dengan batasan kode yang ketat.
  • Bagian tersulit bukanlah AI-nya. Melainkan fondasi datanya. Karena geometrinya solid, integrasi AI hanya memakan waktu beberapa hari, bukan berminggu-minggu.

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