● internal

Floorplan Studio

Browser-based architectural floor plan editor with DXF import, multi-floor alignment, and AI-driven structural search.

pythonreactcanvaspostgresqlpgvectordxfai

Floorplan Studio is a browser-based architectural floor plan editor built to work with real home-scan data. DXF files exported from RealityCapture are imported, parsed, and aligned across floors inside a blueprint-style rendering environment. Rather than wrapping a document editor or embedding a CAD library, the editor is built directly on an HTML canvas with an imperative rendering loop, which keeps pan and zoom responsive regardless of how complex the floor plan gets.

The project started from a concrete problem: home-scan output is a collection of per-floor DXF exports with no shared coordinate frame. The editor handles the alignment step, overlays floors in a stacked view with independent opacity, and renders cabinets, structural beams, electrical runs, and annotation symbols as discrete layers that can be toggled without re-parsing the source files.

Access is gated behind Authentik OIDC, so there is no public demo. The architecture matches any DXF-backed CAD tool that needs an AI-assisted annotation layer without requiring a commercial CAD platform or a round-trip to an external API.

Architecture

The backend is a Python FastAPI service backed by PostgreSQL. DXF geometry is parsed server-side, normalized to a common coordinate space, and stored in the database. A pgvector extension column holds semantic embeddings over a corpus of building-code annotations and structural notes, which powers the AI search panel described below.

The frontend is React with TypeScript. All floor plan rendering happens on an imperative HTML canvas rather than in the DOM. Pan and zoom are handled by a pointer-events loop that updates a transform matrix and repaints only the visible viewport, keeping frame times low even on large multi-floor scans. Cabinets, beams, electrical runs, and annotation markers are rendered as independent layers so toggling a category does not require rebuilding the scene graph.

The AI search panel lets the editor surface relevant building-code constraints or structural notes for the selected region. A query embedding is computed server-side and compared against the pgvector index with a cosine similarity search. Results are ranked and returned with the source annotation, so the reference appears in context without leaving the canvas.

The DXF import pipeline runs as a background job when a file is uploaded. It parses entity types from the DXF spec, filters to the layers the editor cares about (walls, openings, fixtures, annotations), and writes geometry into the PostGIS-compatible column layout used by the renderer. The alignment step between floors is a manual affine transform applied once per floor import and stored as a transform matrix on the floor record.

The service is deployed as a Docker container behind Traefik with Authentik forward auth. The 127 commits in the project cover the DXF parser, the canvas renderer, the pgvector search integration, and the multi-floor alignment workflow. Languages by share: HTML and canvas code at 77%, TypeScript at 10%, Python at 7%.