drum-sample-extractor / docs /REFERENCE_IMAGE_UI_ALIGNMENT.md
ChatGPT
feat: align ui with reference sample extractor layout
f026127
|
Raw
History Blame Contribute Delete
2.19 kB
# Reference Image UI Alignment
This pass aligns the automatic card-flow web app with the supplied reference screenshot.
## Implemented
- Top application bar now follows the reference structure:
- compact waveform logo
- `Sample Extractor` title
- beta pill
- centered file picker/current filename
- right-aligned export actions
- Main canvas is now split into:
- large waveform area on the left
- persistent settings panel on the right
- grouped sample board below the waveform
- compact bottom selection/action bar
- The waveform panel includes:
- zoom controls
- current file/progress status
- time display
- transport row
- progress-tinted waveform rendering already provided by the previous real-progress pass
- Sample results now visually match the card/column model:
- columns by detected type
- per-column count and draw button
- compact cards with mini-waveform, label, metadata, and small action strip
- Everyday controls are visible in the right panel, while expert pipeline controls are collapsed under `Expert pipeline controls`.
- Existing automatic behavior is preserved:
- drop/upload starts processing immediately
- browser-side waveform renders immediately
- progressive sample cards appear while processing
- dismiss, draw another, trim, extend, and save-edit actions remain available
## Intentional differences from the reference
- The screenshot's exact icons are approximated with Unicode/text controls to avoid adding an icon dependency.
- `Export Selected` currently exports the generated pack because backend-level selected-card export is not yet implemented as a distinct artifact path.
- Selection is currently all visible cards by default; the next iteration should add true per-card checkboxes and export only selected representatives.
- The right panel remains visible by default because the reference shows it open.
## Validation targets
- No document-level scrolling on desktop sizes.
- Waveform and sample board fill the viewport.
- Advanced controls are available but not part of the primary visual path.
- All previous backend APIs and semantic editing features remain reachable through the tools drawer.