Skip to content

ui-description.md

Latest commit

 

History

History
118 lines (78 loc) · 2.79 KB

ui-description.md

File metadata and controls

118 lines (78 loc) · 2.79 KB
Raw

UI description for the open-ended task described in summary.md.

Status update (implemented)

This UI is now implemented as a React + Vite app in ui/ (not Streamlit). The previous Streamlit UI (app.py, pages/, shared/) was discarded.

Integration branch: ui/react-integration

Runtime architecture

  • Frontend: ui/ (React, Vite, React Router)
  • UI API adapter: ui_api.py (FastAPI)
  • Scrapers + merger reused from existing Python code:
    • scrapers/electronic4you.py
    • scrapers/etec.py
    • matching/merger.py

API endpoints used by frontend

  • GET /api/health
  • GET /api/products
  • GET /api/search/suggestions?q=...
  • POST /api/pipeline/run
  • GET /api/pipeline/results?query=...&specs=...

Main page (Search)

Implemented behavior:

  1. Center search box for product name/model/brand.
  2. Real-time source-DB suggestions shown below the input.
  3. Suggestions do not run full pipeline.
  4. Optional priority feature text input (e.g., OLED, USB-C).
  5. Search action navigates to results page and triggers pipeline run there.

Notes:

  • Suggestions are fetched with debounce via /api/search/suggestions.

All products page

Implemented behavior:

  1. Grid listing of source products (3 columns on desktop, responsive down to 1 column).
  2. Product cards show concise key data (name, description, price, category, top features).

Sidebar

Implemented behavior:

  1. Collapsible left sidebar.
  2. Category filtering.
  3. Sorting options: name asc/desc, price asc/desc.

Notes:

  • Categories are derived from live source products returned by /api/products.

Output page

Implemented behavior:

  1. Similar grid layout to all-products page, but using pipeline outputs.
  2. Feature/specification filter input that filters current output data only (no rerun).
  3. Top search box for new search that triggers a new pipeline run.
  4. "Run All Pipeline" action to run pipeline for all source products.
  5. Coverage and result stats shown as badges.

Pipeline trigger semantics

  • New search (q) + optional specs => POST /api/pipeline/run with run_all=false.
  • Run all => POST /api/pipeline/run with run_all=true.
  • Display => GET /api/pipeline/results.

How to run

From repository root:

  1. Start backend API adapter:
source hack_venv/bin/activate
uvicorn ui_api:app --reload --host 0.0.0.0 --port 8000
  1. Start frontend:
cd ui
npm install
npm run dev -- --host 0.0.0.0 --port 5173
  1. Open:
  • http://127.0.0.1:5173

Optional frontend env:

cp ui/.env.example ui/.env

VITE_API_URL defaults to http://localhost:8000.

Corrections captured

  1. UI framework is React/Vite now (not Streamlit).
  2. Zip source is integrated under ui/; zip file itself is gitignored.
  3. The read-only hackathon platform in webapp/ was not modified.