Skip to content

Polish UI flows and unify API handling #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
leoz9 merged 8 commits into from
Apr 10, 2026
Merged

Polish UI flows and unify API handling #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e3f5828
Improve city search with multilingual multi-source geocoding
leoz9 Mar 25, 2026
20e3849
Persist upload progress across route changes with UploadContext
leoz9 Mar 25, 2026
b50aed5
Fix outfit layout fit and keep shoes visible across seasons
leoz9 Mar 25, 2026
930ad5f
Keep recommendation running across pages and add shoe fallback
leoz9 Mar 25, 2026
79eabb5
Add clothing detail page and enable wardrobe item navigation
leoz9 Mar 26, 2026
2ed35e7
Polish frontend UI flows and unify API URL handling across pages.
leoz9 Apr 9, 2026
39c1a92
Add goal-aware recommendations with voice input support.
leoz9 Apr 10, 2026
3dc2aa4
Add wardrobe screenshots to frontend README.
leoz9 Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 14 additions & 7 deletions README.ja.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

# 👕 AI スマートワードローブ

[![GitHub Stars](https://img.shields.io/github/stars/leoz9/AIWardrobe?style=social)](https://github.com/leoz9/AIWardrobe/stargazers)
[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
[![Docker](https://img.shields.io/badge/Docker-Ready-blue?logo=docker)](https://ghcr.io/leoz9/aiwardrobe)
[![Python](https://img.shields.io/badge/Python-3.10+-3776AB?logo=python&logoColor=white)](https://python.org)
Expand Down Expand Up @@ -32,15 +33,21 @@
| **AI レコメンデーション** | Gemini や OpenAI 互換プロバイダーによるパーソナライズされたコーディネート生成 |
| **レスポンシブ UI** | Tailwind CSS によるモダンなインターフェースで、デスクトップ・タブレット・モバイルに対応 |

## 📸 スクリーンショット
## 📸 スクリーンショット（新 UI）

<div align="center">
<img src="docs/images/screenshot_landing.jpg" width="820" alt="ホーム/ランディング（新 UI）" />
</div>

<div align="center">
<table>
<tr>
<td align="center"><img src="docs/images/screenshot_input.jpg" width="200" /><br /><b>アイテム登録</b></td>
<td align="center"><img src="docs/images/screenshot_wardrobe.jpg" width="200" /><br /><b>ワードローブ</b></td>
<td align="center"><img src="docs/images/screenshot_recommendation.jpg" width="200" /><br /><b>AI レコメンド</b></td>
<td align="center"><img src="docs/images/screenshot_detail.jpg" width="200" /><br /><b>コーデ詳細</b></td>
<td align="center"><img src="docs/images/screenshot_input.jpg" width="280" /><br /><b>アイテム登録</b></td>
<td align="center"><img src="docs/images/screenshot_wardrobe.jpg" width="280" /><br /><b>ワードローブ</b></td>
</tr>
<tr>
<td align="center"><img src="docs/images/screenshot_recommendation.jpg" width="280" /><br /><b>AI レコメンド</b></td>
<td align="center"><img src="docs/images/screenshot_detail.jpg" width="280" /><br /><b>衣類詳細</b></td>
</tr>
</table>
</div>
Expand Down Expand Up @@ -152,11 +159,11 @@ http://localhost:8000 でアクセス &nbsp;|&nbsp; API ドキュメント http:

## ⭐ Star History

<a href="https://www.star-history.com/#leoz9/AIWardrobe&type=date">
<a href="https://www.star-history.com/#leoz9/AIWardrobe&type=Date">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date&theme=dark" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date" />
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date" />
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date" width="860" />
</picture>
</a>

Expand Down
21 changes: 14 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

# 👕 AI Smart Wardrobe

[![GitHub Stars](https://img.shields.io/github/stars/leoz9/AIWardrobe?style=social)](https://github.com/leoz9/AIWardrobe/stargazers)
[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
[![Docker](https://img.shields.io/badge/Docker-Ready-blue?logo=docker)](https://ghcr.io/leoz9/aiwardrobe)
[![Python](https://img.shields.io/badge/Python-3.10+-3776AB?logo=python&logoColor=white)](https://python.org)
Expand Down Expand Up @@ -32,15 +33,21 @@ Upload clothing photos, remove backgrounds automatically, classify garments with
| **AI Recommendations** | Supports Gemini and OpenAI-compatible providers for personalized outfit generation |
| **Responsive UI** | Optimized for desktop, tablet, and mobile with a modern Tailwind CSS interface |

## 📸 Screenshots
## 📸 Screenshots (New UI)

<div align="center">
<img src="docs/images/screenshot_landing.jpg" width="820" alt="Home / Landing (New UI)" />
</div>

<div align="center">
<table>
<tr>
<td align="center"><img src="docs/images/screenshot_input.jpg" width="200" /><br /><b>New Item Entry</b></td>
<td align="center"><img src="docs/images/screenshot_wardrobe.jpg" width="200" /><br /><b>Wardrobe View</b></td>
<td align="center"><img src="docs/images/screenshot_recommendation.jpg" width="200" /><br /><b>AI Recommendation</b></td>
<td align="center"><img src="docs/images/screenshot_detail.jpg" width="200" /><br /><b>Outfit Detail</b></td>
<td align="center"><img src="docs/images/screenshot_input.jpg" width="280" /><br /><b>New Item Entry</b></td>
<td align="center"><img src="docs/images/screenshot_wardrobe.jpg" width="280" /><br /><b>Wardrobe View</b></td>
</tr>
<tr>
<td align="center"><img src="docs/images/screenshot_recommendation.jpg" width="280" /><br /><b>AI Recommendation</b></td>
<td align="center"><img src="docs/images/screenshot_detail.jpg" width="280" /><br /><b>Clothes Detail</b></td>
</tr>
</table>
</div>
Expand Down Expand Up @@ -152,11 +159,11 @@ Data is persisted in `backend/data` and `backend/uploads`.

## ⭐ Star History

<a href="https://www.star-history.com/#leoz9/AIWardrobe&type=date">
<a href="https://www.star-history.com/#leoz9/AIWardrobe&type=Date">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date&theme=dark" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date" />
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date" />
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date" width="860" />
</picture>
</a>

Expand Down
21 changes: 14 additions & 7 deletions README.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

# 👕 AI 智能衣柜

[![GitHub Stars](https://img.shields.io/github/stars/leoz9/AIWardrobe?style=social)](https://github.com/leoz9/AIWardrobe/stargazers)
[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
[![Docker](https://img.shields.io/badge/Docker-Ready-blue?logo=docker)](https://ghcr.io/leoz9/aiwardrobe)
[![Python](https://img.shields.io/badge/Python-3.10+-3776AB?logo=python&logoColor=white)](https://python.org)
Expand Down Expand Up @@ -32,15 +33,21 @@
| **AI 推荐** | 支持 Gemini 和 OpenAI 风格接口，用于生成个性化穿搭方案 |
| **响应式界面** | 基于 Tailwind CSS，适配桌面、平板和手机 |

## 📸 界面截图
## 📸 界面截图（新版 UI）

<div align="center">
<img src="docs/images/screenshot_landing.jpg" width="820" alt="首页/落地页（新版 UI）" />
</div>

<div align="center">
<table>
<tr>
<td align="center"><img src="docs/images/screenshot_input.jpg" width="200" /><br /><b>录入新衣</b></td>
<td align="center"><img src="docs/images/screenshot_wardrobe.jpg" width="200" /><br /><b>我的衣橱</b></td>
<td align="center"><img src="docs/images/screenshot_recommendation.jpg" width="200" /><br /><b>AI 推荐</b></td>
<td align="center"><img src="docs/images/screenshot_detail.jpg" width="200" /><br /><b>穿搭详情</b></td>
<td align="center"><img src="docs/images/screenshot_input.jpg" width="280" /><br /><b>录入新衣</b></td>
<td align="center"><img src="docs/images/screenshot_wardrobe.jpg" width="280" /><br /><b>我的衣橱</b></td>
</tr>
<tr>
<td align="center"><img src="docs/images/screenshot_recommendation.jpg" width="280" /><br /><b>AI 推荐</b></td>
<td align="center"><img src="docs/images/screenshot_detail.jpg" width="280" /><br /><b>衣物详情</b></td>
</tr>
</table>
</div>
Expand Down Expand Up @@ -152,11 +159,11 @@ docker compose up --build -d

## ⭐ Star History

<a href="https://www.star-history.com/#leoz9/AIWardrobe&type=date">
<a href="https://www.star-history.com/#leoz9/AIWardrobe&type=Date">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date&theme=dark" />
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date" />
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date" />
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=leoz9/AIWardrobe&type=Date" width="860" />
</picture>
</a>

Expand Down
5 changes: 4 additions & 1 deletion backend/api/recommendation.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ class RecommendationResponse(BaseModel):
suggested_shoes: Optional[dict] = None
suggested_accessories: list[dict] = Field(default_factory=list)
purchase_suggestions: list[dict] = Field(default_factory=list)
goal_raw: Optional[str] = None
goal_normalized: Optional[str] = None


@router.get("/recommendation", response_model=RecommendationResponse)
Expand All @@ -39,6 +41,7 @@ async def get_outfit_recommendation(
default=None,
description="可选，临时指定星座（会覆盖设置中的星座）"
),
goal: Optional[str] = Query(default=None, description="可选，用户本次穿搭目标/场景"),
):
"""
获取AI穿搭推荐
Expand All @@ -64,6 +67,6 @@ async def get_outfit_recommendation(
raise HTTPException(status_code=500, detail="获取天气信息失败")

# 获取AI推荐
recommendation = await get_ai_recommendation(weather, zodiac_sign=zodiac_sign)
recommendation = await get_ai_recommendation(weather, zodiac_sign=zodiac_sign, goal=goal)

return recommendation
23 changes: 17 additions & 6 deletions backend/api/wardrobe.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
from domain.clothes import normalize_category_value
from storage.db import (
get_all_clothes,
get_clothes_by_category,
get_clothes_by_id,
delete_clothes,
update_clothes
Expand All @@ -24,10 +25,21 @@ async def get_wardrobe():
"""
all_clothes = await get_all_clothes()

tops = [c for c in all_clothes if normalize_category_value(c.category) == "top"]
bottoms = [c for c in all_clothes if normalize_category_value(c.category) == "bottom"]
shoes = [c for c in all_clothes if normalize_category_value(c.category) == "shoes"]
accessories = [c for c in all_clothes if normalize_category_value(c.category) == "accessory"]
tops: list[ClothesItem] = []
bottoms: list[ClothesItem] = []
shoes: list[ClothesItem] = []
accessories: list[ClothesItem] = []

for clothes in all_clothes:
category = normalize_category_value(clothes.category)
if category == "top":
tops.append(clothes)
elif category == "bottom":
bottoms.append(clothes)
elif category == "shoes":
shoes.append(clothes)
elif category == "accessory":
accessories.append(clothes)

return WardrobeResponse(
tops=tops,
Expand All @@ -52,8 +64,7 @@ async def get_wardrobe_category(category: str):
detail="类别必须是 top, bottom, shoes 或 accessory"
)

all_clothes = await get_all_clothes()
return [item for item in all_clothes if normalize_category_value(item.category) == category]
return await get_clothes_by_category(category)


@router.get("/clothes/{clothes_id}", response_model=ClothesItem)
Expand Down
Loading
Loading