ProjectIntent Over Keywords: From Stitched Embeddings to a Production Fashion Agent · Module 18: The frontend · part 20 of 26
Part 20 · Module 18: The frontend

Module 18: The frontend

25 min read·
About 50 minutes · Needs: Module 12 (high-level design), Module 13 (the chat contract and sessions), Module 15 (clarification policy and quick replies) · Code: part3-styleme/frontend/src/api.ts, part3-styleme/frontend/src/lib/chatReducer.ts, part3-styleme/frontend/src/pages/ChatPage.tsx, part3-styleme/frontend/src/lib/group.ts, part3-styleme/frontend/src/ux.test.tsx

Where this fits

WHERE THIS FITS Intent Over Keywords this module PART 1: STITCHED VIDEO RAG three models, two spaces, RRF PART 2: UNIFIED VIDEO RAG one model, one space PART 3: STYLEME FastAPI, LangGraph, React QUALITY AND OPERATIONS evals, Docker, Cloud Run Frames ffmpeg, one per 5 s CLIP ViT-B/32 frames + text, 512 d Whisper base speech to text MiniLM 64-word chunks, 384 d Two collections p1_visual, p1_text Rank fusion RRF, k = 60 Gemini answer from transcript text API + Streamlit upload, ask, sources Windows ffmpeg, video + audio Embedding 2 Gemini, one vector One collection p2_unified, no fusion Notes + answer Gemini, cited times React web chat, photo, chips nginx one URL, /api proxy FastAPI /api/chat, limits Sessions in memory, cap of 3 Planner intent before retrieval Implementer batched embed, search Generator stylist reply, ids Grounding check no LLM, drops invented Gemini flash-lite, embedding 2 Qdrant styleme_products Catalogue ingest image + title vectors Langfuse optional traces Test video 26 questions, 4 kinds Video eval Part 1 vs Part 2 Agent evals intent, grounding Guards uploads, limits, secrets Containers compose profiles Cloud Run StyleMe only CI/CD GitHub Actions, WIF Original code v1, v2, fashion-agent
This module (blue): the React page the shopper uses, the nginx container that serves it on one URL, and the API it calls. Blue marks our own code in every figure.

Everything in Modules 13 to 17 happens on the server: the planner decides, the implementer searches, the generator writes and the grounding check cleans the reply. The shopper sees none of it unless a page shows it well. This module is the page: a React app that sends one message at a time to /api/chat, keeps the conversation readable, shows why each product is there, and survives a slow model, a reload and a server that answers with something unexpected.

The rest of this project is yours to keep

This project is bought on its own, once, and stays readable afterwards, including the parts added to it later.

Buy this project · ₹799See what is inside

Or open everything with a plan