Construí un editor CAD en el navegador y luego le enseñé a un LLM a usarlo

Le pregunté a mi aplicación: "¿Cuántas puertas y ventanas hay?"

La IA respondió con los recuentos. Luego añadió algo sin que se lo pidiera:

"Nota: D3 solo tiene 300 mm de ancho. Es probable que sea una puerta mal detectada. ¿Quieres que la revise?"

Tenía razón. Mi sistema había convertido una pieza de geometría en una puerta de 30 cm. Ningún humano lo había notado. El modelo leyó los datos, vio una puerta más estrecha que una caja de zapatos y la señaló.

Ese momento fue la recompensa tras un desafío de ingeniería masivo. Tuve que analizar archivos AutoCAD DWG, reconstruir modelos de edificios a partir de miles de líneas aleatorias, construir un editor 2D desde cero y conectarlo a Claude.

Aquí explico cómo lo construí.

El problema de los datos Un archivo DWG no contiene paredes. Contiene líneas. Todo lo interesante en este proyecto ocurre en el espacio entre esas dos frases.

Seguí dos reglas para manejar estos archivos:

  • Ejecutar el parser como un subproceso. Si el parser de hace 30 años falla, no mata mi servidor.
  • Nunca confiar en el archivo. Los encabezados DWG suelen mentir sobre las unidades. Ignoro el encabezado y observo los números reales para encontrar la escala verdadera.

El pipeline de extracción Convertí una sopa de líneas en un modelo estructurado:

  • Las paredes son líneas centrales.
  • Las puertas y ventanas se acoplan a las paredes anfitrionas.
  • Las habitaciones son polígonos con nombres y áreas.

Utilicé un truco sencillo para la clasificación. Usé coincidencia de subcadenas para los nombres de las capas. Si una capa dice "WAND" o "MAUER", el sistema sabe que es una pared. Si una capa no tiene nombre, el sistema usa la geometría para adivinar.

El editor Construí el editor usando un contexto Canvas 2D puro. Para mantenerlo rápido, utilicé tres capas:

  • Capa 1: La cuadrícula estática y las líneas originales.
  • Capa 2: El modelo (paredes, habitaciones, puertas).
  • Capa 3: El cursor activo y las vistas previas.

Esto mantuvo la tasa de fotogramas a 60 FPS incluso con casi 1,000 paredes.

El copiloto de IA No quería un chatbot que solo hablara. Quería un agente que trabajara. Le di a Claude trece herramientas para leer y editar el modelo.

Para mantener la seguridad, seguí tres reglas:

  • Una única ruta de escritura: La IA utiliza exactamente el mismo código validado que la interfaz de usuario manual. Si la interfaz de usuario no puede guardarlo, la IA tampoco podrá.
  • Errores recuperables: Si la IA intenta colocar una puerta donde no cabe, la herramienta devuelve un error. La IA lee ese error e intenta un lugar diferente.
  • Una historia de deshacer: Cada acción de la IA se integra en una única transacción. Si la IA comete un error, una pulsación de Ctrl+Z lo arregla todo.

Las lecciones

  • Los errores de geometría se esconden en las formas que no pruebas. Los edificios rectangulares son fáciles. Los edificios en forma de L rompen todo.
  • Pon a prueba tus herramientas con fuzzing. El LLM es un fuzzer. Recíbelo con límites de código estrictos.
  • La parte difícil no es la IA. Son los cimientos de los datos. Debido a que la geometría era sólida, la integración de la IA tomó días en lugar de semanas.

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