docs/UI_REDESIGN.md

UI Guide

Muc Tieu UI

UI can giong mot cong cu coaching thuc dung, khong phai landing page marketing. Man hinh phan tich la luong chinh:

chon video -> phan tich -> xem ket qua tung rep

Cac Trang

• Home: gioi thieu ngan va CTA vao bai tap.
• Exercise catalog: hien cac bai tap dang ho tro.
• Push-up analysis: video mau, upload video hoc vien, nut phan tich, ket qua.

Trang Phan Tich Hit Dat

Trang nay gom:

• Video mau.
• Video hoc vien upload.
• Nut Phan tich.
• Progress label khi dang xu ly.
• Summary tong quan.
• Metrics: diem, so rep, rep tot, rep can chu y.
• Card tung rep.

Card Tung Rep

Moi rep card hien:

• Rep N.
• Trang thai: Tot, Can chu y, hoac Co loi.
• Diem rep.
• Primary error, vi du Nho mong qua cao.
• Anh hoc vien da ve landmark va arrow neu co loi.
• Anh mau tu template.
• Feedback tu VLM neu co.
• Feedback rule-based luon co.

Phan Biet Feedback

• primary_error: rule-based label, khong phai VLM.
• Feedback rule-based: cau huong dan deterministic tu ERROR_GUIDANCE.
• Feedback tu VLM: cau feedback sinh tu vision model cho rep co rule-based error, co the vang mat neu API loi/thieu key.

Arrow

Arrow duoc ve len anh hoc vien, khong ve len anh mau. Target arrow lay tu landmark rule-based:

• not_deep_enough: vung nguc/vai.
• hip_sag: hong.
• body_not_straight: hong.
• hip_pike: hong.
• head_misaligned: dau/co.

Label arrow dung tieng Viet co dau, vi du:

• Ngực chưa đủ thấp
• Hông bị võng xuống
• Hông lệch khỏi trục
• Cổ cúi quá mức
• Hông quá cao

Mot so video test co san badge ✓/X nam trong frame nguon. Pipeline se xoa cac badge nguon nay truoc khi ve landmark va arrow de tranh truong hop anh vua co mui ten loi sai vua co dau ✓ tap on.

Style

• Nen sang, text toi, card trang.
• Mau chinh xanh la cho CTA.
• Mau xanh duong cho VLM/info.
• Mau do cho loi/arrow.
• Card gon, uu tien scan nhanh.

Luu Y Khi Sua UI

• Khong doi llm_feedback thanh vlm_feedback trong UI rieng le neu chua refactor state/payload dong bo.
• Khong an feedback rule-based, vi day la nguon giai thich deterministic.
• Khong doi arrow ve VLM coordinates.
• Kiem tra mobile va desktop sau khi sua card layout.