Bra Auto Measure

A single-page browser tool that reads a bra technical sketch and drafts its 18 points of measure (POMs) for a technical designer to check.

Everything runs locally in the browser — the detection pass, the drafting, the Excel and PDF export. There is no server, no API key, and no upload step: a sketch never leaves the machine it was opened on.

Try it →

This repository is the public mirror of the app. The sketch fixtures, ground truth, measurement library, and internal design docs stay in the private working repo — see What isn't here.

How it works

The app is auto-first. A fresh sketch always boots into Auto Mode, and the whole design bets on making that first pass good enough to correct rather than redo.

1 · Detect. Offline computer vision segments the ink, finds how many garment views are on the sheet and which is front / back / inside, then locates the landmarks a pattern maker would point at — band, chest, cradle seams, cup edges, strap joins, apex. OpenCV compiled to WebAssembly does the heavy lifting when it finishes loading; a dependency-free fallback keeps detection deterministic when it hasn't.

2 · Anchors. Those landmarks become draggable pins, stored in normalized [0,1] image space so they survive pan, zoom, resize, and save. A pin in the wrong place is one drag away from right — and that correction is the whole point, because it is far cheaper than redrawing a line.

3 · Generate. The 18 POM lines are drafted from the anchor positions and applied. Where the evidence isn't good enough for a reliable line, the row is marked review-only rather than guessed — a wrong number that looks confident is worse than a blank one. The app then hands off to Manual Mode so the designer can fix what auto couldn't.

From there: a measurements panel with a graded size run, three tech-pack pages (main page, construction callouts, BOM), and export to .xlsx / PDF / clipboard PNG — all still offline.

Manual Mode also includes a browser-local Personal Sketch Library. Save a multi-path detail such as a back wing as one reusable Template, or apply an editable layered Line Treatment such as Binding along any existing straight or curved path. Templates and Treatments remain sketch elements rather than POMs, and the library can be moved between browsers with JSON export/import. An applied Treatment can be scaled from 25–400% without resizing its host path; Smart Hit catches any visible Treatment rail, while Smart Align helps move lines and Template groups onto nearby path points and axes. Paths may be prepared in the Scratch Area outside the sketch and saved from their selection.

Board Text Notes default to transparent, borderless black text with red leader arrows. Select a note to switch between Text only and Box, set text and leader colours independently, or drag the midpoint handle on its right edge to change wrap width; height follows the wrapped text automatically.

Press Cmd/Ctrl+K anywhere to search every stable command. Use Cmd/Ctrl+1…5 to switch Board, Main Page, Construction, BOM, and Preview & Export; existing Board drawing shortcuts stay scoped to the Board.

Run it locally

npm run serve

Then open the printed URL. There is no build step to run first — app.js is committed.

If you edit anything under src/:

npm run build   # regenerate app.js  (required — see Code layout)
npm run check   # read-only validation; fails if you forgot the build

Tests

These pass in this repository:

npm run check              # build freshness, syntax, wiring, shared-scope gates
npm run pipeline-tests     # detection pipeline stages
npm run junction-tests     # skeleton topology / junction detection
npm run export-xlsx        # Excel export, byte-level
npm run export-hidden      # hidden-POM export behaviour
npm run suggestions-tests  # library-value suggestion layer
npm run autosave-check     # crash-safe autosave and restore
npm run curve-polyline-tests # multi-anchor curve sampling accuracy
npm run keyboard-shortcuts-check # command palette and five-page keyboard access
npm run board-shape-check    # Board Graphics, Edit Path, Cut Path, ownership
npm run board-toolbar-check  # Board toolbar states and responsive layout
npm run mainpage-check     # tech-pack MAIN PAGE sheet
npm run construction-check # construction annotation page
npm run bom-check          # BOM page
npm run preview-check      # preview & export tab
npm run line-presets-check # line looks, Treatments, and measurement isolation
npm run shape-stamps-check # Templates: grouped reusable path geometry
npm run personal-library-check # Templates + Treatment scale + Smart Hit/Align + local persistence
npm run notes-check       # Text Notes, leaders, transparent/Box modes, resize, save/open

The suites that score detection accuracy against real sketches — golden, accuracy, contract, invariants, smoke, board-interaction-check, and the per-POM limitation guards — need the sketch fixtures, which aren't published here. They run in the private repo.

Code layout

index.html holds the layout and CSS. app.js holds all the logic — and it is generated, not written: npm run build concatenates ~150 single-concern files from src/ in the order declared in scripts/source-parts.mjs, inlining the rule JSON. Edit src/* and rebuild; never edit app.js directly, or your change is overwritten on the next build. It is the only generated file.

This is the beginning of the README. Read the rest at the original. Read the full README ↗