Wardrobe VCA - Cloud Edition ☁️👗

這是一個基於 Web 的智慧衣櫃應用程式，結合 Google Gemini AI 進行自動衣服分析與 OOTD 穿搭生成。 專案設計為 Serverless 架構，可以直接部署在 GitHub Pages 上，並使用 Supabase 作為後端資料庫。

✨ 功能特色

• 📸 一秒入庫：拍照或上傳圖片，前端自動壓縮，秒速上傳。
• 🤖 AI 自動分析：使用 Google Gemini 1.5 Flash 模型，自動辨識衣服類型、顏色、風格與場合。
• 💃 OOTD 穿搭顧問：輸入場合與天氣，AI 幫你從衣櫃挑選最佳穿搭。
• ☁️ 雲端同步：資料儲存在 Supabase，手機、電腦隨時同步。
• 🎨 精美介面：Obsidian & Gold 黑金主題，質感滿分。

🚀 快速開始 (Setup Guide)

如果您想自己架設這個專案，請依照以下步驟操作。不需要寫程式，只要會複製貼上即可！

1. 準備工作

• 一個 Google 帳號 (用於申請 Gemini API Key)。
• 一個 Supabase 帳號 (用於免費資料庫)。
• 一個 GitHub 帳號 (用於託管網頁)。

2. 取得 Google Gemini API Key

1. 前往 Google AI Studio。
2. 點擊 Create API key。
3. 複製您的 API Key (以 AIza 開頭的字串)，先記在記事本上。

3. 設定 Supabase 後端

這是最重要的一步，但我們已經準備好懶人包了！

1. 前往 Supabase 建立一個新專案 (New Project)。
2. 進入專案後，點擊左側選單的 SQL Editor (圖示像終端機 >_)。
3. 複製本專案中 db_schema.sql 檔案的所有內容。
4. 貼上到 SQL Editor 中，點擊右下角的 RUN 按鈕。
   • 這會自動幫您建立資料表、設定權限、開啟儲存空間。
5. 點擊左側選單的 Project Settings (齒輪圖示) -> API。
6. 複製以下兩個資訊：
   • Project URL (例如 https://xyz.supabase.co)
   • anon public key (以 ey 開頭的長字串)

4. 啟動網頁

1. 下載本專案的程式碼 (Clone 或 Download ZIP)。
2. 直接用瀏覽器打開 index.html。
3. 點擊右上角的 設定 (Settings) 按鈕。
4. 填入剛剛取得的：
   • Gemini API Key
   • Supabase Project URL
   • Supabase Anon Key
5. 點擊 儲存，開始使用！

🌐 如何部署到 GitHub Pages (讓朋友也能用)

1. 將本專案上傳到您的 GitHub Repository。
2. 進入 Repo 的 Settings -> Pages。
3. 在 Build and deployment 下的 Branch 選擇 main (或 master) 以及 / (root)。
4. 點擊 Save。
5. 等待幾分鐘，GitHub 會給您一個網址 (例如 https://yourname.github.io/vca/)。
6. 用手機打開這個網址，設定好 Key，就能當作 App 使用了！

🛠️ 技術棧

• Frontend: HTML5, Tailwind CSS, Vanilla JS
• Backend (BaaS): Supabase (PostgreSQL, Storage, Auth)
• AI Model: Google Gemini 1.5 Flash (via REST API)

---

Created with ❤️ by Antigravity