tilltheend/unwrap-clothes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Build single-page web UI in static/index.html #4

New issue
Closed
opened 2026-09-10 23:01:10 +02:00 by tilltheend · 1 comment
tilltheend commented 2026-09-10 23:01:10 +02:00
Owner
Copy link

Parent

Parent Map: #1 (Garment Photo Cleaner Web App [Map])

Blocked by

Blocked by: "Implement FastAPI backend and /api/clean endpoint in app.py"

Question

How should the single-page web UI in static/index.html be structured and styled (drag-and-drop file upload, thumbnail preview, preset selector buttons for warm beige / bright white, editable prompt, processing indicator, side-by-side before/after comparison, cost display, and download button) without any frontend build tools?

## Parent Parent Map: #1 (Garment Photo Cleaner Web App [Map]) ## Blocked by Blocked by: "Implement FastAPI backend and /api/clean endpoint in app.py" ## Question How should the single-page web UI in `static/index.html` be structured and styled (drag-and-drop file upload, thumbnail preview, preset selector buttons for warm beige / bright white, editable prompt, processing indicator, side-by-side before/after comparison, cost display, and download button) without any frontend build tools?
tilltheend added the
wayfinder:prototype
 label 2026-09-10 23:01:11 +02:00
tilltheend self-assigned this 2026-09-10 23:26:59 +02:00
tilltheend commented 2026-09-10 23:32:52 +02:00
Author
Owner
Copy link

Resolution

Created the complete single-page web interface in static/index.html with zero build dependencies or npm requirements.

Key features and design decisions

  1. Zero-build static client: Pure HTML, embedded modern CSS in <style>, and vanilla JS in <script> hosted directly by FastAPI at / and /static/index.html.
  2. Interactive upload: Drag-and-drop file target with dragover visual highlights, fallback file picker, client-side thumbnail rendering using FileReader, and instant dimension calculation via Image natural dimensions.
  3. Studio prompt controls: Pre-filled textarea with tested warm beige catalog prompt, preset toggle buttons for Warm Beige and Bright White, OpenRouter model input defaulting to meta/muse-image, optional API key input with env fallback indication, and restore resolution checkbox.
  4. Resilient form submission: Sends multipart payload to POST /api/clean, handles in-flight states with disabled submission, spinner animation, elapsed timer, and inline error banner extraction for 400/502 errors.
  5. Before-and-after view: Side-by-side catalog comparison displaying generation cost, dimensions before and after, Lanczos restoration badges, and a direct download button saving <filename>_clean.jpg.
  6. Automated verification: DOM element presence, attributes, and script functionality tested in tests/test_ui.py.
## Resolution Created the complete single-page web interface in `static/index.html` with zero build dependencies or npm requirements. ### Key features and design decisions 1. **Zero-build static client**: Pure HTML, embedded modern CSS in `<style>`, and vanilla JS in `<script>` hosted directly by FastAPI at `/` and `/static/index.html`. 2. **Interactive upload**: Drag-and-drop file target with dragover visual highlights, fallback file picker, client-side thumbnail rendering using `FileReader`, and instant dimension calculation via Image natural dimensions. 3. **Studio prompt controls**: Pre-filled textarea with tested warm beige catalog prompt, preset toggle buttons for Warm Beige and Bright White, OpenRouter model input defaulting to `meta/muse-image`, optional API key input with env fallback indication, and restore resolution checkbox. 4. **Resilient form submission**: Sends multipart payload to `POST /api/clean`, handles in-flight states with disabled submission, spinner animation, elapsed timer, and inline error banner extraction for 400/502 errors. 5. **Before-and-after view**: Side-by-side catalog comparison displaying generation cost, dimensions before and after, Lanczos restoration badges, and a direct download button saving `<filename>_clean.jpg`. 6. **Automated verification**: DOM element presence, attributes, and script functionality tested in `tests/test_ui.py`.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
needs-info

Waiting on reporter for more information

  
needs-triage

Maintainer needs to evaluate this issue

  
ready-for-agent

Fully specified, ready for an AFK agent

  
ready-for-human

Requires human implementation

  
wayfinder:grilling

Wayfinder grilling ticket

  
wayfinder:map

Wayfinder canonical map

  
wayfinder:prototype

Wayfinder prototype ticket

  
wayfinder:research

Wayfinder research ticket

  
wayfinder:task

Wayfinder task ticket

  
wontfix

Will not be actioned

No labels
needs-info
needs-triage
ready-for-agent
ready-for-human
wayfinder:grilling
wayfinder:map
wayfinder:prototype
wayfinder:research
wayfinder:task
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
tilltheend
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: tilltheend/unwrap-clothes#4
No description provided.
Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?