mAP Viewer

Interactive single-page app for exploring object detection metrics by editing predictions and ground-truth boxes on a single image.

Tech Stack

• React + TypeScript + Vite
• Modular app structure for domain/state/features/components

Project Structure

• src/domain/: metric and matching logic (pure computation)
• src/state/: app state, selectors, derived snapshots
• src/features/annotation/: box annotation interactions
• src/features/metrics/: summary cards, controls, inspector
• src/features/visualizations/: pluggable charts/views
• src/components/: shared UI primitives

Local Development

If you use npm:

npm install
npm run dev

If you use bun:

bun install
bun run dev

Build

npm run build

Equivalent bun command:

bun run build

Preview Production Build

npm run preview

Test Script

Domain unit tests run through Vitest:

npm run test

Built-In Sandbox Fixture

The app currently boots with a bundled single-image sample and typed GT/prediction fixtures from src/features/annotation/data/sampleScene.ts.

Mobile + Accessibility Notes

• Annotation interactions support pointer/touch drag and resize.
• Metric updates are announced via polite live regions in summary cards.
• Prediction vs GT boxes use both color and line style cues for better distinction.

GitHub Pages Deployment

The repository includes .github/workflows/deploy-pages.yml to build and deploy the app to GitHub Pages on every push to main.

One-time GitHub setup

1. In repository settings, open Pages.
2. Set Source to GitHub Actions.

Build artifact path

• The workflow uploads the dist/ folder generated by bun run build.

Base path configuration

• vite.config.ts reads BASE_PATH from environment variables.
• Workflow default is BASE_PATH=/mAP-viewer/ for project pages.
• If repository name changes, update BASE_PATH in .github/workflows/deploy-pages.yml.

Troubleshooting

• If assets 404 on the deployed site, verify the BASE_PATH value matches /<repo-name>/.
• If deployment job is blocked, verify Pages source is set to GitHub Actions.