ผมสร้างโปรแกรมแก้ไข CAD บนเบราว์เซอร์ แล้วสอนให้ LLM ใช้งานมัน

ผมถามแอปของผมว่า: "มีประตูและหน้าต่างกี่บาน?"

AI ตอบกลับมาเป็นจำนวนนับ จากนั้นมันก็เพิ่มข้อความที่ผมไม่ได้สั่งมาด้วย:

"หมายเหตุ: D3 กว้างเพียง 300 มม. นี่น่าจะเป็นประตูที่ตรวจจับผิดพลาด ต้องการให้ผมตรวจสอบไหม?"

มันพูดถูก ระบบของผมได้เปลี่ยนรูปทรงเรขาคณิตชิ้นหนึ่งให้กลายเป็นประตูขนาด 30 ซม. ซึ่งไม่มีมนุษย์คนไหนสังเกตเห็นเลย โมเดลอ่านข้อมูล เห็นประตูที่แคบกว่ากล่องรองเท้า และแจ้งเตือนมันทันที

ช่วงเวลานั้นคือผลตอบแทนของความท้าทายทางวิศวกรรมอันมหาศาล ผมต้องทำการ parse ไฟล์ AutoCAD DWG, สร้างโมเดลอาคารขึ้นมาใหม่จากเส้นสุ่มๆ นับพันเส้น, สร้างโปรแกรมแก้ไขแบบ 2D ขึ้นมาใหม่ทั้งหมด และเชื่อมต่อมันเข้ากับ Claude

นี่คือวิธีที่ผมสร้างมันขึ้นมา

ปัญหาเรื่องข้อมูล

ไฟล์ DWG ไม่ได้ประกอบด้วยผนัง แต่มันประกอบด้วยเส้น ทุกสิ่งที่น่าสนใจในโปรเจกต์นี้เกิดขึ้นในช่องว่างระหว่างสองประโยคนี้

ผมใช้กฎสองข้อในการจัดการกับไฟล์เหล่านี้:

  • รัน parser เป็น subprocess หาก parser อายุ 30 ปีตัวนั้นค้าง มันจะไม่ทำให้เซิร์ฟเวอร์ของผมล่มไปด้วย
  • อย่าเชื่อใจไฟล์ DWG headers มักจะให้ข้อมูลหน่วยวัดที่ผิดพลาด ผมจึงเลือกที่จะข้าม header ไป แล้วดูที่ตัวเลขจริงเพื่อหามาตราส่วนที่ถูกต้อง

กระบวนการสกัดข้อมูล (The Extraction Pipeline)

ผมเปลี่ยนกลุ่มเส้นที่ยุ่งเหยิงให้กลายเป็นโมเดลที่มีโครงสร้าง:

  • ผนังคือเส้นกึ่งกลาง (centerlines)
  • ประตูและหน้าต่างจะถูกวางให้ตรงกับผนังหลัก (host walls)
  • ห้องคือรูปหลายเหลี่ยม (polygons) ที่มีชื่อและพื้นที่

ผมใช้เทคนิคง่ายๆ ในการจำแนกประเภท โดยใช้การจับคู่ substring สำหรับชื่อ layer หาก layer ระบุว่า "WAND" หรือ "MAUER" ระบบจะรู้ทันทีว่าเป็นผนัง หาก layer ไม่มีชื่อ ระบบจะใช้รูปทรงเรขาคณิตในการคาดเดาแทน

โปรแกรมแก้ไข (The Editor)

ผมสร้างโปรแกรมแก้ไขโดยใช้ raw Canvas 2D context เพื่อให้ทำงานได้รวดเร็ว ผมจึงแบ่งออกเป็นสามเลเยอร์:

  • เลเยอร์ 1: ตาราง (grid) แบบคงที่และเส้นต้นฉบับ
  • เลเยอร์ 2: โมเดล (ผนัง, ห้อง, ประตู)
  • เลเยอร์ 3: เคอร์เซอร์ที่กำลังใช้งานและตัวอย่างการแสดงผล (previews)

วิธีนี้ช่วยรักษาเฟรมเรตไว้ที่ 60 FPS แม้จะมีผนังเกือบ 1,000 ผนังก็ตาม

AI Copilot

ผมไม่ได้ต้องการแค่แชทบอทที่เอาไว้คุย แต่ผมต้องการเอเจนต์ (agent) ที่ทำงานได้จริง ผมจึงมอบเครื่องมือ 13 อย่างให้ Claude เพื่อใช้ในการอ่านและแก้ไขโมเดล

เพื่อความปลอดภัย ผมใช้กฎสามข้อ:

  • เส้นทางการเขียนข้อมูลเพียงทางเดียว (One write path): AI จะใช้โค้ดที่ผ่านการตรวจสอบแล้วชุดเดียวกับที่ UI ปกติใช้ หาก UI บันทึกไม่ได้ AI ก็บันทึกไม่ได้เช่นกัน
  • ข้อผิดพลาดที่กู้คืนได้ (Recoverable errors): หาก AI พยายามวางประตูในจุดที่ไม่เหมาะสม เครื่องมือจะส่งข้อความแจ้งข้อผิดพลาดกลับมา AI จะอ่านข้อผิดพลาดนั้นแล้วลองวางในจุดอื่นแทน
  • ระบบย้อนกลับ (An undo story): ทุกการกระทำของ AI จะถูกรวมไว้ใน transaction เดียวกัน หาก 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