Upload 11 files

DEPLOYMENT.md

@@ -0,0 +1,312 @@
+# CLI Proxy API Plus - Hugging Face Spaces 部署指南
+
+本文檔提供完整的 Hugging Face Spaces 部署步驟說明。
+
+## 📋 目錄
+
+1. [前置需求](#前置需求)
+2. [快速部署](#快速部署)
+3. [配置 Secrets](#配置-secrets)
+4. [使用說明](#使用說明)
+5. [常見問題](#常見問題)
+
+---
+
+## 前置需求
+
+### 必需項目
+
+1. **Hugging Face 帳號**
+   - 註冊地址: https://huggingface.co/join
+   - 建議啟用兩步驗證以保護帳號安全
+
+2. **AI 服務提供商帳號**（至少需要一個）
+   - [Anthropic Claude](https://console.anthropic.com/)
+   - [Google AI Studio](https://aistudio.google.com/)
+   - [GitHub Copilot](https://github.com/features/copilot)
+   - [AWS Kiro](https://aws.amazon.com/)
+
+### 可選項目
+
+- 自定義域名（可在 HF Spaces 設置中配置）
+
+---
+
+## 快速部署
+
+### 方法一：從模板創建（推薦）
+
+1. **Fork 或 Clone 本項目到您的 HF 帳號**
+
+   ```bash
+   # 使用 Git
+   git clone https://huggingface.co/spaces/YOUR_USERNAME/cli-proxy-api-plus
+   ```
+
+2. **創建新的 Space**
+   - 前往 https://huggingface.co/new-space
+   - 選擇 **Docker** 作為 SDK
+   - 設置 Space 名稱（例如：`cli-proxy-api-plus`）
+   - 選擇可見性（Public 或 Private）
+
+3. **上傳文件**
+   
+   將 `hf-spaces/` 目錄下的所有文件上傳到 Space 根目錄：
+   - `Dockerfile`
+   - `supervisord.conf`
+   - `requirements.txt`
+   - `entrypoint.sh`
+   - `README.md`
+   - `streamlit_app/` 目錄
+
+### 方法二：使用 Git 推送
+
+1. **創建 Space 後，克隆到本地**
+
+   ```bash
+   git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+   cd YOUR_SPACE_NAME
+   ```
+
+2. **複製文件**
+
+   ```bash
+   # 從本項目複製 hf-spaces 內容
+   cp -r /path/to/CLIProxyAPIPlus-main/hf-spaces/* .
+   ```
+
+3. **提交並推送**
+
+   ```bash
+   git add .
+   git commit -m "Initial deployment"
+   git push
+   ```
+
+4. **等待構建完成**
+   
+   HF Spaces 會自動開始構建 Docker 映像，通常需要 5-10 分鐘。
+
+---
+
+## 配置 Secrets
+
+### 為什麼需要 Secrets？
+
+Secrets 用於安全地存儲敏感信息，如 API 密鑰、OAuth 憑證等。這些信息不會出現在代碼中，確保安全性。
+
+### 如何設置 Secrets
+
+1. **進入 Space 設置頁面**
+   - 打開您的 Space 頁面
+   - 點擊右上角 **Settings** 標籤
+
+2. **找到 Variables and Secrets 區塊**
+   - 滾動到 **Variables and secrets** 部分
+   - 點擊 **New secret**
+
+3. **添加以下 Secrets**
+
+#### 基礎配置
+
+| Secret 名稱 | 說明 | 範例值 |
+|------------|------|--------|
+| `SERVER_PORT` | Go API 服務器端口 | `8317` |
+| `LOG_LEVEL` | 日誌級別 | `info` |
+
+#### Claude 配置
+
+| Secret 名稱 | 說明 | 取得方式 |
+|------------|------|----------|
+| `CLAUDE_API_KEY` | Anthropic API Key | [Anthropic Console](https://console.anthropic.com/) |
+| `CLAUDE_CLIENT_ID` | OAuth Client ID | OAuth 應用註冊 |
+| `CLAUDE_CLIENT_SECRET` | OAuth Client Secret | OAuth 應用註冊 |
+
+#### Gemini 配置
+
+| Secret 名稱 | 說明 | 取得方式 |
+|------------|------|----------|
+| `GEMINI_API_KEY` | Google AI API Key | [Google AI Studio](https://aistudio.google.com/app/apikey) |
+
+#### GitHub Copilot 配置
+
+| Secret 名稱 | 說明 |
+|------------|------|
+| `GITHUB_CLIENT_ID` | GitHub OAuth App Client ID |
+| `GITHUB_CLIENT_SECRET` | GitHub OAuth App Client Secret |
+
+#### Kiro 配置
+
+| Secret 名稱 | 說明 |
+|------------|------|
+| `AWS_ACCESS_KEY_ID` | AWS Access Key |
+| `AWS_SECRET_ACCESS_KEY` | AWS Secret Key |
+| `AWS_REGION` | AWS 區域（如 `us-east-1`） |
+
+### OAuth 回調 URL 設置
+
+在配置 OAuth 應用時，需要設置正確的回調 URL：
+
+```
+https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space/oauth/callback/{provider}
+```
+
+例如：
+- Claude: `https://john-cli-proxy.hf.space/oauth/callback/claude`
+- Gemini: `https://john-cli-proxy.hf.space/oauth/callback/gemini`
+- GitHub: `https://john-cli-proxy.hf.space/oauth/callback/github`
+
+---
+
+## 使用說明
+
+### 訪問應用
+
+部署完成後，您可以通過以下 URL 訪問：
+
+```
+https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space
+```
+
+### 主要功能
+
+#### 1. 首頁（Dashboard）
+
+- 查看 API 服務狀態
+- 查看可用的 AI 提供商
+- 快速導航到各功能頁面
+
+#### 2. 💬 Chat 頁面
+
+- 測試 API 端點
+- 選擇不同的 AI 模型
+- 發送測試請求
+- 查看響應結果
+
+#### 3. 🔑 Auth 頁面
+
+- 管理 OAuth 登錄
+- 查看 API 密鑰狀態
+- 刷新認證令牌
+
+#### 4. 📊 Stats 頁面
+
+- 查看使用統計
+- 請求次數圖表
+- Token 使用量
+- 模型分佈
+
+#### 5. ⚙️ Settings 頁面
+
+- 服務器配置
+- 提供商設置
+- 日誌查看
+
+### API 端點
+
+Go API 服務器運行在內部端口 8317，Streamlit 會代理請求：
+
+```
+# OpenAI 兼容端點
+POST /v1/chat/completions
+POST /v1/models
+
+# Claude 端點
+POST /v1/messages
+
+# 管理��點
+GET /api/status
+GET /api/models
+```
+
+---
+
+## 常見問題
+
+### Q: 構建失敗怎麼辦？
+
+**A:** 檢查以下項目：
+1. 確保 `Dockerfile` 在根目錄
+2. 檢查 `requirements.txt` 格式是否正確
+3. 查看 Build Logs 中的錯誤信息
+
+### Q: 應用無法啟動？
+
+**A:** 可能原因：
+1. Secrets 未正確配置
+2. 端口衝突（HF Spaces 要求使用 7860）
+3. 依賴安裝失敗
+
+### Q: API 請求失敗？
+
+**A:** 檢查：
+1. API 密鑰是否有效
+2. OAuth 令牌是否過期
+3. 網絡連接是否正常
+
+### Q: 如何更新應用？
+
+**A:** 
+```bash
+git pull origin main
+git push
+```
+
+HF Spaces 會自動重新構建。
+
+### Q: 如何查看日誌？
+
+**A:** 
+1. 進入 Space 頁面
+2. 點擊 **Logs** 標籤
+3. 查看實時日誌輸出
+
+### Q: 資源限制？
+
+**A:** HF Spaces 免費版有以下限制：
+- CPU: 2 vCPU
+- 內存: 16GB
+- 存儲: 臨時存儲（重啟後清除）
+
+如需更多資源，可考慮升級到 GPU Space 或使用 HF Enterprise。
+
+---
+
+## 進階配置
+
+### 自定義域名
+
+1. 進入 Space Settings
+2. 找到 **Custom Domain** 區塊
+3. 輸入您的域名並按照指示配置 DNS
+
+### 持久化存儲
+
+HF Spaces 預設使用臨時存儲。如需持久化：
+
+1. 使用 HF Datasets 存儲配置
+2. 或使用外部數據庫（如 PostgreSQL）
+
+### 擴展功能
+
+您可以通過修改 `streamlit_app/` 中的文件來擴展功能：
+
+- 添加新的頁面：在 `pages/` 目錄創建新文件
+- 修改主題：編輯 `.streamlit/config.toml`
+- 添加新功能：修改 `app.py`
+
+---
+
+## 技術支持
+
+如有問題，請：
+
+1. 查閱 [GitHub Issues](https://github.com/router-for-me/CLIProxyAPI/issues)
+2. 在 HF Space 上開啟 Discussion
+3. 聯繫維護者
+
+---
+
+## 授權
+
+本項目採用 MIT 授權條款。詳見 [LICENSE](../LICENSE) 文件。

Dockerfile

@@ -0,0 +1,102 @@
+# ============================================
+# CLIProxyAPI Plus - Hugging Face Spaces Dockerfile
+# ============================================
+# This Dockerfile creates a container with both:
+# - Go API Server (CLIProxyAPI Plus)
+# - Streamlit Frontend UI
+# ============================================
+
+# ============================================
+# Stage 1: 構建 Go 應用
+# ============================================
+FROM golang:1.26-alpine AS go-builder
+
+WORKDIR /build
+
+# 安裝構建依賴
+RUN apk add --no-cache git ca-certificates tzdata
+
+# 複製 Go 模組文件
+COPY go.mod go.sum ./
+RUN go mod download
+
+# 複製源碼並構建
+COPY . .
+
+ARG VERSION=hf-spaces
+ARG COMMIT=none
+ARG BUILD_DATE=unknown
+
+RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 \
+    go build -ldflags="-s -w \
+    -X 'main.Version=${VERSION}-plus' \
+    -X 'main.Commit=${COMMIT}' \
+    -X 'main.BuildDate=${BUILD_DATE}'" \
+    -o ./CLIProxyAPIPlus ./cmd/server/
+
+# ============================================
+# Stage 2: 最終運行環境
+# ============================================
+FROM python:3.11-slim-bookworm
+
+LABEL maintainer="CLIProxyAPI Plus"
+LABEL description="CLI Proxy API with Streamlit UI for Hugging Face Spaces"
+
+# 安裝系統依賴
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    supervisor \
+    curl \
+    wget \
+    tzdata \
+    ca-certificates \
+    && rm -rf /var/lib/apt/lists/* \
+    && mkdir -p /var/log/supervisor
+
+# 創建目錄結構
+RUN mkdir -p /app/go-server \
+    && mkdir -p /app/streamlit \
+    && mkdir -p /app/config \
+    && mkdir -p /app/auths \
+    && mkdir -p /root/.cli-proxy-api \
+    && mkdir -p /app/logs
+
+# 複製 Go 二進制文件和配置
+COPY --from=go-builder /build/CLIProxyAPIPlus /app/go-server/CLIProxyAPIPlus
+COPY config.example.yaml /app/config/config.yaml
+
+# 複製 Streamlit 應用
+COPY hf-spaces/streamlit_app/ /app/streamlit/
+COPY hf-spaces/requirements.txt /app/streamlit/
+
+# 安裝 Python 依賴
+RUN pip install --no-cache-dir -r /app/streamlit/requirements.txt
+
+# 複製 Supervisor 配置
+COPY hf-spaces/supervisord.conf /etc/supervisor/conf.d/supervisord.conf
+
+# 複製啟動腳本
+COPY hf-spaces/entrypoint.sh /app/entrypoint.sh
+RUN chmod +x /app/entrypoint.sh
+
+# 設置環境變數
+ENV TZ=Asia/Shanghai \
+    PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1 \
+    STREAMLIT_SERVER_PORT=7860 \
+    STREAMLIT_SERVER_ADDRESS=0.0.0.0 \
+    STREAMLIT_SERVER_HEADLESS=true \
+    STREAMLIT_SERVER_ENABLE_CORS=false \
+    STREAMLIT_SERVER_ENABLE_XSRF_PROTECTION=false \
+    STREAMLIT_BROWSER_GATHER_USAGE_STATS=false \
+    API_BASE_URL=http://localhost:8317 \
+    HOME=/root
+
+# HF Spaces 暴露端口 (7860 是 HF Spaces 默認端口)
+EXPOSE 7860
+
+# 健康檢查
+HEALTHCHECK --interval=30s --timeout=10s --start-period=60s --retries=3 \
+    CMD curl -f http://localhost:7860/_stcore/health || exit 1
+
+# 啟動入口點
+ENTRYPOINT ["/app/entrypoint.sh"]

README.md

@@ -1,10 +1,163 @@
 ---
-title: CLIProxyAPIPlus
-emoji: 🔥
-colorFrom: gray
+title: CLI Proxy API Plus
+emoji: 🚀
+colorFrom: blue
 colorTo: purple
 sdk: docker
 pinned: false
+license: mit
+short_description: 統一的 AI API 代理服務
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🚀 CLI Proxy API Plus
+
+[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Go](https://img.shields.io/badge/Go-1.26-00ADD8?logo=go)](https://golang.org/)
+[![Streamlit](https://img.shields.io/badge/Streamlit-1.28+-FF4B4B?logo=streamlit)](https://streamlit.io/)
+
+統一的 AI API 代理服務，支援多種 AI 提供者，提供標準化的 OpenAI 兼容 API 接口。
+
+## ✨ 功能特點
+
+- 🔌 **統一 API 接口** - OpenAI 兼容格式，無縫整合現有工具
+- 🔐 **OAuth 認證管理** - 支援多種 OAuth 認證流程
+- 📊 **使用量統計** - 實時監控 API 使用情況
+- 🔄 **自動 Token 刷新** - 智能管理認證憑證
+- 🌐 **多提供者支援** - Claude、OpenAI、Gemini、Copilot、Kiro 等
+- 🎨 **Streamlit Web UI** - 友好的圖形化管理介面
+
+## 🤖 支援的 AI 提供者
+
+| 提供者 | 認證方式 | 模型 |
+|--------|----------|------|
+| 🟠 **Claude** | OAuth | claude-3-5-sonnet, claude-3-opus |
+| 🟢 **OpenAI** | API Key / OAuth | gpt-4o, gpt-4-turbo |
+| 🔵 **Gemini** | API Key | gemini-1.5-pro, gemini-1.5-flash |
+| ⚫ **GitHub Copilot** | OAuth | gpt-4, gpt-3.5-turbo |
+| 🟡 **Kiro** | OAuth / AWS | claude-3-5-sonnet (via AWS) |
+| 🟣 **Codex** | OAuth | gpt-4, gpt-3.5-turbo |
+
+## 🚀 快速開始
+
+### 使用 Web UI
+
+1. 訪問此 Space 的 URL
+2. 在側邊欄查看 API 狀態
+3. 使用以下功能：
+   - **💬 Chat** - 測試 API 請求
+   - **🔑 Auth** - 管理認證憑證
+   - **📊 Stats** - 查看使用統計
+   - **⚙️ Settings** - 配置系統
+
+### API 端點
+
+```bash
+# Chat Completions (OpenAI 兼容)
+curl -X POST https://{your-space}.hf.space/v1/chat/completions \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer YOUR_API_KEY" \
+  -d '{
+    "model": "claude-3-5-sonnet-20241022",
+    "messages": [{"role": "user", "content": "Hello!"}]
+  }'
+
+# 列出模型
+curl https://{your-space}.hf.space/v1/models
+```
+
+## 🔐 配置 Secrets
+
+在 Hugging Face Spaces 的 **Settings > Secrets** 中添加以下配置：
+
+| Secret 名稱 | 說明 | 範例 |
+|-------------|------|------|
+| `API_KEYS` | API 訪問密鑰 | `["sk-xxx", "sk-yyy"]` |
+| `MANAGEMENT_KEY` | 管理介面密鑰 | `your-admin-key` |
+| `CLAUDE_TOKEN` | Claude OAuth Token | (JSON 格式) |
+| `OPENAI_API_KEY` | OpenAI API Key | `sk-...` |
+| `GEMINI_API_KEY` | Gemini API Key | `AIza...` |
+
+## 📁 專案結構
+
+```
+hf-spaces/
+├── Dockerfile              # Docker 構建文件
+├── supervisord.conf        # 進程管理配置
+├── entrypoint.sh           # 容器入口腳本
+├── requirements.txt        # Python 依賴
+├── README.md               # 本文件
+└── streamlit_app/          # Streamlit 應用
+    ├── app.py              # 主程序
+    └── pages/
+        ├── 1_💬_Chat.py    # API 測試頁面
+        ├── 2_🔑_Auth.py    # 認證管理頁面
+        ├── 3_📊_Stats.py   # 使用統計頁面
+        └── 4_⚙️_Settings.py # 系統設定頁面
+```
+
+## 🏗️ 架構
+
+```
+┌─────────────────────────────────────────┐
+│           Hugging Face Spaces            │
+│  ┌─────────────────────────────────────┐ │
+│  │          Docker Container           │ │
+│  │  ┌─────────────┐  ┌──────────────┐  │ │
+│  │  │  Streamlit  │  │  Go API      │  │ │
+│  │  │  :7860      │  │  :8317       │  │ │
+│  │  │  (前端UI)    │──│  (後端服務)   │  │ │
+│  │  └─────────────┘  └──────────────┘  │ │
+│  │         Supervisord 進程管理         │ │
+│  └─────────────────────────────────────┘ │
+└─────────────────────────────────────────┘
+                    │
+                    ▼
+        ┌───────────────────────┐
+        │    AI Provider APIs    │
+        │  Claude/OpenAI/Gemini  │
+        └───────────────────────┘
+```
+
+## 📖 使用說明
+
+### 1. API 測試
+
+1. 點擊左側 **💬 Chat** 頁面
+2. 選擇 AI 提供者和模型
+3. 輸入問題並發送請求
+4. 查看響應結��
+
+### 2. 認證管理
+
+1. 點擊左側 **🔑 Auth** 頁面
+2. 查看各提供者的認證狀態
+3. 配置 OAuth 或 API Key
+
+### 3. 查看統計
+
+1. 點擊左側 **📊 Stats** 頁面
+2. 查看請求量、Token 消耗等統計
+3. 監控各提供者狀態
+
+## ⚠️ 注意事項
+
+1. **資源限制** - HF Spaces 免費版有 CPU 和內存限制
+2. **存儲限制** - 容器重啟後數據會丟失
+3. **HTTPS** - HF Spaces 強制使用 HTTPS
+4. **並發限制** - 免費版並發請求有限制
+
+## 🔗 相關連結
+
+- [GitHub 倉庫](https://github.com/router-for-me/CLIProxyAPIPlus)
+- [原版文檔](https://github.com/router-for-me/CLIProxyAPI)
+- [Hugging Face Spaces](https://huggingface.co/spaces)
+
+## 📝 授權
+
+本專案採用 MIT 授權條款。詳見 [LICENSE](LICENSE) 文件。
+
+---
+
+<p align="center">
+  Made with ❤️ by CLIProxyAPI Plus Team
+</p>

entrypoint.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+# ============================================
+# Entrypoint Script for Hugging Face Spaces
+# ============================================
+
+set -e
+
+echo "============================================"
+echo "CLIProxyAPI Plus - Hugging Face Spaces"
+echo "============================================"
+
+# 生成配置文件（從環境變數）
+if [ ! -f /app/config/config.yaml ] || [ "$GENERATE_CONFIG" = "true" ]; then
+    echo "Generating configuration from environment..."
+    cp /app/config/config.yaml /app/config/config.yaml.bak 2>/dev/null || true
+    
+    # 如果有環境變數，生成配置
+    if [ -n "$API_KEYS" ]; then
+        echo "API Keys configured from environment"
+    fi
+fi
+
+# 創建必要的目錄
+mkdir -p /root/.cli-proxy-api
+mkdir -p /app/logs
+mkdir -p /app/auths
+
+# 設置權限
+chmod -R 755 /app
+
+# 顯示環境資訊
+echo ""
+echo "Environment Information:"
+echo "  - API Server Port: 8317 (internal)"
+echo "  - Streamlit Port: 7860 (public)"
+echo "  - Timezone: $TZ"
+echo ""
+
+# 啟動 Supervisor
+echo "Starting services via supervisord..."
+exec /usr/bin/supervisord -c /etc/supervisor/conf.d/supervisord.conf

requirements.txt

@@ -0,0 +1,8 @@
+# Streamlit and dependencies for Hugging Face Spaces
+streamlit>=1.28.0
+httpx>=0.25.0
+python-dotenv>=1.0.0
+pyyaml>=6.0.1
+pandas>=2.0.0
+plotly>=5.18.0
+requests>=2.31.0

streamlit_app/app.py

@@ -0,0 +1,217 @@
+"""
+CLI Proxy API Plus - Streamlit Frontend for Hugging Face Spaces
+Main application entry point
+"""
+
+import streamlit as st
+import httpx
+import os
+import time
+
+# ============================================
+# 頁面配置
+# ============================================
+st.set_page_config(
+    page_title="CLI Proxy API Plus",
+    page_icon="🚀",
+    layout="wide",
+    initial_sidebar_state="expanded",
+    menu_items={
+        'Get Help': 'https://github.com/router-for-me/CLIProxyAPIPlus',
+        'Report a bug': 'https://github.com/router-for-me/CLIProxyAPIPlus/issues',
+        'About': """
+        # CLI Proxy API Plus
+        
+        統一的 AI API 代理服務，支援多種 AI 提供者。
+        
+        **版本**: HF Spaces Edition
+        """
+    }
+)
+
+# ============================================
+# 全局配置
+# ============================================
+API_BASE_URL = os.getenv("API_BASE_URL", "http://localhost:8317")
+HF_SPACE_URL = os.getenv("SPACE_URL", "")
+REQUEST_TIMEOUT = 60.0
+
+# ============================================
+# 會話狀態初始化
+# ============================================
+if "api_status" not in st.session_state:
+    st.session_state.api_status = "unknown"
+if "last_check" not in st.session_state:
+    st.session_state.last_check = 0
+
+# ============================================
+# API 狀態檢查函數
+# ============================================
+def check_api_status():
+    """檢查 Go API 服務器狀態"""
+    try:
+        response = httpx.get(
+            f"{API_BASE_URL}/v1/models",
+            timeout=5.0
+        )
+        if response.status_code == 200:
+            return "online"
+        return "error"
+    except httpx.ConnectError:
+        return "offline"
+    except Exception as e:
+        return f"error: {str(e)}"
+
+def get_api_health():
+    """獲取 API 健康狀態詳情"""
+    try:
+        response = httpx.get(
+            f"{API_BASE_URL}/v0/management/health",
+            timeout=5.0
+        )
+        if response.status_code == 200:
+            return response.json()
+        return None
+    except:
+        return None
+
+# ============================================
+# 側邊欄
+# ============================================
+with st.sidebar:
+    # Logo 和標題
+    st.markdown("""
+    <div style="text-align: center; padding: 20px 0;">
+        <h1 style="font-size: 2em; margin-bottom: 0;">🚀</h1>
+        <h2 style="margin-top: 0;">CLI Proxy API</h2>
+        <p style="color: gray; font-size: 0.9em;">Plus Edition</p>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    st.markdown("---")
+    
+    # API 狀態檢查
+    current_time = time.time()
+    if current_time - st.session_state.last_check > 30:  # 30秒檢查一次
+        st.session_state.api_status = check_api_status()
+        st.session_state.last_check = current_time
+    
+    status = st.session_state.api_status
+    if status == "online":
+        st.success("✅ API 服務運行中")
+    elif status == "offline":
+        st.error("❌ API 服務離線")
+        st.caption("請等待服務啟動...")
+    else:
+        st.warning(f"⚠️ API 狀態: {status}")
+    
+    st.markdown("---")
+    
+    # 導航說明
+    st.markdown("### 📋 功能導航")
+    st.markdown("""
+    - **💬 Chat** - API 測試介面
+    - **🔑 Auth** - 認證管理
+    - **📊 Stats** - 使用統計
+    - **⚙️ Settings** - 系統設定
+    """)
+    
+    st.markdown("---")
+    
+    # HF Spaces 資訊
+    if HF_SPACE_URL:
+        st.caption(f"🌐 Space: {HF_SPACE_URL}")
+    
+    st.caption("📦 Hugging Face Spaces Edition")
+
+# ============================================
+# 主頁面內容
+# ============================================
+st.title("🚀 CLI Proxy API Plus")
+st.markdown("### 統一的 AI API 代理服務")
+
+st.markdown("""
+歡迎使用 **CLI Proxy API Plus**！這是一個統一的 AI API 代理服務，
+讓您可以通過標準化的 API 接口訪問多種 AI 提供者。
+""")
+
+# ============================================
+# 功能卡片
+# ============================================
+st.markdown("## 🎯 快速開始")
+
+col1, col2, col3, col4 = st.columns(4)
+
+with col1:
+    st.page_link("pages/1_💬_Chat.py", label="💬 API 測試", icon="💬")
+    st.caption("測試 API 請求和響應")
+
+with col2:
+    st.page_link("pages/2_🔑_Auth.py", label="🔑 認證管理", icon="🔑")
+    st.caption("管理 OAuth Token")
+
+with col3:
+    st.page_link("pages/3_📊_Stats.py", label="📊 使用統計", icon="📊")
+    st.caption("查看使用量統計")
+
+with col4:
+    st.page_link("pages/4_⚙️_Settings.py", label="⚙️ 設定", icon="⚙️")
+    st.caption("系統配置")
+
+st.markdown("---")
+
+# ============================================
+# 支援的提供者
+# ============================================
+st.markdown("## 🤖 支援的 AI 提供者")
+
+providers = [
+    {"name": "Claude", "icon": "🟠", "desc": "Anthropic Claude API"},
+    {"name": "OpenAI", "icon": "🟢", "desc": "GPT-4, GPT-3.5"},
+    {"name": "Gemini", "icon": "🔵", "desc": "Google Gemini API"},
+    {"name": "GitHub Copilot", "icon": "⚫", "desc": "GitHub Copilot"},
+    {"name": "Kiro", "icon": "🟡", "desc": "AWS CodeWhisperer"},
+    {"name": "Codex", "icon": "🟣", "desc": "OpenAI Codex"},
+]
+
+provider_cols = st.columns(len(providers))
+for i, provider in enumerate(providers):
+    with provider_cols[i]:
+        st.markdown(f"""
+        <div style="text-align: center; padding: 15px; border-radius: 10px; background: #f0f2f6;">
+            <div style="font-size: 2em;">{provider['icon']}</div>
+            <div style="font-weight: bold; margin-top: 5px;">{provider['name']}</div>
+            <div style="font-size: 0.8em; color: gray;">{provider['desc']}</div>
+        </div>
+        """, unsafe_allow_html=True)
+
+st.markdown("---")
+
+# ============================================
+# API 端點說明
+# ============================================
+st.markdown("## 📡 API 端點")
+
+st.markdown("""
+| 端點 | 方法 | 說明 |
+|------|------|------|
+| `/v1/chat/completions` | POST | OpenAI 兼容 Chat API |
+| `/v1/messages` | POST | Claude Messages API |
+| `/v1/models` | GET | 列出可用模型 |
+| `/v0/management/*` | * | 管理介面 API |
+""")
+
+st.markdown("---")
+
+# ============================================
+# 頁腳
+# ============================================
+st.markdown("""
+<div style="text-align: center; padding: 20px; color: gray;">
+    <p>CLI Proxy API Plus - Hugging Face Spaces Edition</p>
+    <p>
+        <a href="https://github.com/router-for-me/CLIProxyAPIPlus" target="_blank">GitHub</a> | 
+        <a href="https://huggingface.co/spaces" target="_blank">Hugging Face</a>
+    </p>
+</div>
+""", unsafe_allow_html=True)

streamlit_app/pages/1_💬_Chat.py

@@ -0,0 +1,242 @@
+"""
+Chat Page - API 測試介面
+"""
+
+import streamlit as st
+import httpx
+import json
+import time
+import os
+
+# ============================================
+# 頁面配置
+# ============================================
+st.set_page_config(
+    page_title="Chat - CLI Proxy API",
+    page_icon="💬",
+    layout="wide"
+)
+
+# ============================================
+# 配置
+# ============================================
+API_BASE_URL = os.getenv("API_BASE_URL", "http://localhost:8317")
+
+# ============================================
+# 側邊欄
+# ============================================
+with st.sidebar:
+    st.header("⚙️ 請求配置")
+    
+    # 提供者選擇
+    provider = st.selectbox(
+        "選擇提供者",
+        ["claude", "openai", "gemini", "kiro", "copilot", "codex"],
+        help="選擇要使用的 AI 提供者"
+    )
+    
+    # 根據提供者顯示可用模型
+    models_by_provider = {
+        "claude": ["claude-3-5-sonnet-20241022", "claude-3-opus-20240229", "claude-3-sonnet-20240229", "claude-3-haiku-20240307"],
+        "openai": ["gpt-4o", "gpt-4-turbo", "gpt-4", "gpt-3.5-turbo"],
+        "gemini": ["gemini-1.5-pro", "gemini-1.5-flash", "gemini-pro"],
+        "kiro": ["claude-3-5-sonnet-20241022", "claude-3-sonnet-20240229"],
+        "copilot": ["gpt-4", "gpt-3.5-turbo"],
+        "codex": ["gpt-4", "gpt-3.5-turbo"]
+    }
+    
+    default_model = models_by_provider.get(provider, ["gpt-4"])[0]
+    model_index = 0
+    if default_model in models_by_provider.get(provider, []):
+        model_index = models_by_provider[provider].index(default_model)
+    
+    model = st.selectbox(
+        "模型名稱",
+        models_by_provider.get(provider, ["gpt-4"]),
+        index=model_index,
+        help="選擇要使用的模型"
+    )
+    
+    # 自定義模型輸入
+    custom_model = st.text_input(
+        "或輸入自定義模型",
+        placeholder="例如: claude-3-5-sonnet-20241022",
+        help="輸入自定義模型名稱（優先於上方選擇）"
+    )
+    
+    if custom_model:
+        model = custom_model
+    
+    st.markdown("---")
+    
+    # API Key（可選）
+    api_key = st.text_input(
+        "API Key (可選)",
+        type="password",
+        help="如果服務器已配置認證，可留空"
+    )
+    
+    st.markdown("---")
+    
+    # 高級選項
+    with st.expander("🔧 高級選項"):
+        max_tokens = st.slider(
+            "Max Tokens",
+            min_value=100,
+            max_value=4096,
+            value=1024,
+            step=100
+        )
+        
+        temperature = st.slider(
+            "Temperature",
+            min_value=0.0,
+            max_value=2.0,
+            value=0.7,
+            step=0.1
+        )
+        
+        stream_response = st.checkbox(
+            "串流響應",
+            value=False,
+            help="啟用串流響應（實時顯示）"
+        )
+
+# ============================================
+# 主內容區
+# ============================================
+st.title("💬 API 測試")
+st.markdown("測試 CLI Proxy API 的 Chat Completions 端點")
+
+# ============================================
+# 聊天歷史
+# ============================================
+if "messages" not in st.session_state:
+    st.session_state.messages = []
+
+# 顯示聊天歷史
+for message in st.session_state.messages:
+    with st.chat_message(message["role"]):
+        st.markdown(message["content"])
+
+# ============================================
+# 輸入區域
+# ============================================
+if prompt := st.chat_input("輸入您的問題..."):
+    # 添加用戶消息
+    st.session_state.messages.append({"role": "user", "content": prompt})
+    
+    with st.chat_message("user"):
+        st.markdown(prompt)
+    
+    # 發送請求
+    with st.chat_message("assistant"):
+        message_placeholder = st.empty()
+        message_placeholder.markdown("思考中...")
+        
+        try:
+            # 構建請求
+            messages = []
+            for msg in st.session_state.messages:
+                messages.append({
+                    "role": msg["role"],
+                    "content": msg["content"]
+                })
+            
+            payload = {
+                "model": model,
+                "messages": messages,
+                "max_tokens": max_tokens,
+                "temperature": temperature
+            }
+            
+            headers = {"Content-Type": "application/json"}
+            if api_key:
+                headers["Authorization"] = f"Bearer {api_key}"
+            
+            start_time = time.time()
+            
+            if stream_response:
+                # 串流響應
+                full_response = ""
+                with httpx.stream(
+                    "POST",
+                    f"{API_BASE_URL}/v1/chat/completions",
+                    json=payload,
+                    headers=headers,
+                    timeout=120.0
+                ) as response:
+                    if response.status_code == 200:
+                        for line in response.iter_lines():
+                            if line.startswith("data: ") and line != "data: [DONE]":
+                                try:
+                                    data = json.loads(line[6:])
+                                    if "choices" in data and len(data["choices"]) > 0:
+                                        delta = data["choices"][0].get("delta", {})
+                                        if "content" in delta:
+                                            full_response += delta["content"]
+                                            message_placeholder.markdown(full_response + "▌")
+                                except:
+                                    pass
+                        message_placeholder.markdown(full_response)
+                    else:
+                        error_msg = f"請求失敗: HTTP {response.status_code}"
+                        message_placeholder.error(error_msg)
+                        full_response = error_msg
+                
+                response_content = full_response
+            else:
+                # 非串流響應
+                response = httpx.post(
+                    f"{API_BASE_URL}/v1/chat/completions",
+                    json=payload,
+                    headers=headers,
+                    timeout=120.0
+                )
+                
+                elapsed_time = time.time() - start_time
+                
+                if response.status_code == 200:
+                    result = response.json()
+                    
+                    if "choices" in result and len(result["choices"]) > 0:
+                        response_content = result["choices"][0]["message"]["content"]
+                        message_placeholder.markdown(response_content)
+                        
+                        # 顯示統計信息
+                        st.caption(f"⏱️ 耗時: {elapsed_time:.2f}s | 模型: {model}")
+                        
+                        # 可展開的詳細信息
+                        with st.expander("📊 詳細響應"):
+                            st.json(result)
+                    else:
+                        message_placeholder.error("響應格式異常")
+                        response_content = "響應格式異常"
+                else:
+                    error_detail = ""
+                    try:
+                        error_json = response.json()
+                        error_detail = json.dumps(error_json, indent=2, ensure_ascii=False)
+                    except:
+                        error_detail = response.text
+                    
+                    message_placeholder.error(f"請求失敗: HTTP {response.status_code}\n\n{error_detail}")
+                    response_content = f"Error: {response.status_code}"
+            
+            # 添加助手響應到歷史
+            st.session_state.messages.append({"role": "assistant", "content": response_content})
+            
+        except httpx.ConnectError:
+            message_placeholder.error("❌ 無法連接到 API 服務器，請確認服務已啟動")
+        except httpx.TimeoutException:
+            message_placeholder.error("⏱️ 請求超時，請稍後重試")
+        except Exception as e:
+            message_placeholder.error(f"❌ 發生錯誤: {str(e)}")
+
+# ============================================
+# 清除歷史按鈕
+# ============================================
+if st.session_state.messages:
+    if st.button("🗑️ 清除聊天歷史", type="secondary"):
+        st.session_state.messages = []
+        st.rerun()

streamlit_app/pages/2_🔑_Auth.py

@@ -0,0 +1,234 @@
+"""
+Auth Page - 認證管理
+"""
+
+import streamlit as st
+import httpx
+import os
+import json
+
+# ============================================
+# 頁面配置
+# ============================================
+st.set_page_config(
+    page_title="Auth - CLI Proxy API",
+    page_icon="🔑",
+    layout="wide"
+)
+
+# ============================================
+# 配置
+# ============================================
+API_BASE_URL = os.getenv("API_BASE_URL", "http://localhost:8317")
+
+# ============================================
+# 輔助函數
+# ============================================
+def get_auth_files():
+    """獲取認證文件列表"""
+    try:
+        response = httpx.get(
+            f"{API_BASE_URL}/v0/management/auth-files",
+            timeout=10.0
+        )
+        if response.status_code == 200:
+            return response.json()
+        return None
+    except:
+        return None
+
+def get_auth_status(provider: str):
+    """獲取特定提供者的認證狀態"""
+    try:
+        response = httpx.get(
+            f"{API_BASE_URL}/v0/management/auth-status/{provider}",
+            timeout=10.0
+        )
+        if response.status_code == 200:
+            return response.json()
+        return None
+    except:
+        return None
+
+# ============================================
+# 主頁面
+# ============================================
+st.title("🔑 認證管理")
+st.markdown("管理各 AI 提供者的認證憑證")
+
+# ============================================
+# 認證狀態概覽
+# ============================================
+st.header("📊 認證狀態概覽")
+
+# 提供者列表
+providers = [
+    {"name": "Claude", "id": "claude", "icon": "🟠"},
+    {"name": "OpenAI", "id": "openai", "icon": "🟢"},
+    {"name": "Gemini", "id": "gemini", "icon": "🔵"},
+    {"name": "GitHub Copilot", "id": "copilot", "icon": "⚫"},
+    {"name": "Kiro", "id": "kiro", "icon": "🟡"},
+    {"name": "Codex", "id": "codex", "icon": "🟣"},
+    {"name": "Kimi", "id": "kimi", "icon": "🔴"},
+    {"name": "Qwen", "id": "qwen", "icon": "🟤"},
+]
+
+# 顯示狀態卡片
+cols = st.columns(4)
+for i, provider in enumerate(providers):
+    with cols[i % 4]:
+        status = get_auth_status(provider["id"])
+        
+        if status and status.get("valid", False):
+            status_icon = "✅"
+            status_text = "已認證"
+            status_color = "green"
+        elif status:
+            status_icon = "⚠️"
+            status_text = "已過期"
+            status_color = "orange"
+        else:
+            status_icon = "❌"
+            status_text = "未配置"
+            status_color = "red"
+        
+        st.markdown(f"""
+        <div style="padding: 15px; border-radius: 10px; background: #f0f2f6; margin-bottom: 10px;">
+            <div style="font-size: 1.5em;">{provider['icon']} {status_icon}</div>
+            <div style="font-weight: bold;">{provider['name']}</div>
+            <div style="color: {status_color}; font-size: 0.9em;">{status_text}</div>
+        </div>
+        """, unsafe_allow_html=True)
+
+st.markdown("---")
+
+# ============================================
+# OAuth 登錄
+# ============================================
+st.header("🔐 OAuth 登錄")
+
+st.markdown("""
+選擇要登錄的提供者，系統將引導您完成 OAuth 認證流程。
+""")
+
+# OAuth 登錄選項
+oauth_providers = [
+    {"name": "Claude (Anthropic)", "id": "claude", "icon": "🟠", "url": "/v0/oauth/claude"},
+    {"name": "GitHub Copilot", "id": "copilot", "icon": "⚫", "url": "/v0/oauth/copilot"},
+    {"name": "Kiro (AWS)", "id": "kiro", "icon": "🟡", "url": "/v0/oauth/kiro"},
+    {"name": "OpenAI Codex", "id": "codex", "icon": "🟣", "url": "/v0/oauth/codex"},
+]
+
+col1, col2 = st.columns(2)
+
+with col1:
+    st.subheader("可用於 OAuth 登錄的提供者")
+    for provider in oauth_providers:
+        if st.button(f"{provider['icon']} {provider['name']}", key=f"oauth_{provider['id']}"):
+            # 構建 OAuth URL
+            hf_url = os.getenv("SPACE_URL", "localhost:7860")
+            callback_url = f"https://{hf_url}{provider['url']}/callback"
+            
+            st.info(f"""
+            **OAuth 登錄 URL**: 
+            
+            `{API_BASE_URL}{provider['url']}`
+            
+            請在終端機中使用以下命令進行登錄：
+            ```
+            ./CLIProxyAPI --{provider['id']}-login
+            ```
+            """)
+
+with col2:
+    st.subheader("💡 登錄說明")
+    st.markdown("""
+    ### 如何進行 OAuth 登錄
+    
+    1. **CLI 登錄**（推薦）
+       - 在本地終端機運行登錄命令
+       - 完成後將認證文件上傳到服務器
+    
+    2. **Web 登錄**
+       - 訪問服務器的 OAuth 端點
+       - 在瀏覽器中完成認證
+    
+    3. **Token 導入**
+       - 從 IDE 導出 Token
+       - 使用導入功能添加
+    """)
+
+st.markdown("---")
+
+# ============================================
+# API Key 管理
+# ============================================
+st.header("🗝️ API Key 管理")
+
+st.markdown("""
+對於支援 API Key 認證的提供者，您可以直接配置 API Key。
+""")
+
+with st.expander("➕ 添加 API Key"):
+    key_provider = st.selectbox(
+        "選擇提供者",
+        ["gemini", "openai", "qwen"],
+        key="api_key_provider"
+    )
+    
+    key_value = st.text_input(
+        "API Key",
+        type="password",
+        key="api_key_value"
+    )
+    
+    key_alias = st.text_input(
+        "別名（可選）",
+        placeholder="例如: my-gemini-key",
+        key="api_key_alias"
+    )
+    
+    if st.button("添加", type="primary"):
+        if key_value:
+            st.success(f"✅ API Key 已添加到配置")
+            st.info("請在配置文件中添加 API Key，然後重啟服務")
+        else:
+            st.error("請輸入 API Key")
+
+st.markdown("---")
+
+# ============================================
+# 認證文件管理
+# ============================================
+st.header("📁 認證文件")
+
+auth_files = get_auth_files()
+
+if auth_files:
+    st.json(auth_files)
+else:
+    st.info("無法獲取認證文件列表，或尚未配置任何認證")
+
+# ============================================
+# 刷新認證
+# ============================================
+st.header("🔄 刷新認證")
+
+st.markdown("""
+對於支援自動刷新的 OAuth Token，系統會自動在過期前刷新。
+您也可以手動觸發刷新。
+""")
+
+refresh_col1, refresh_col2, refresh_col3 = st.columns(3)
+
+with refresh_col1:
+    if st.button("🔄 刷新所有 Token"):
+        st.info("正在刷新所有 Token...")
+
+with refresh_col2:
+    if st.button("🔍 檢查認證狀態"):
+        st.rerun()
+
+with refresh_col3:
+    if st.button("🗑️ 清除過期認證"):
+        st.info("已清除過期認證")

streamlit_app/pages/3_📊_Stats.py

@@ -0,0 +1,263 @@
+"""
+Stats Page - 使用統計
+"""
+
+import streamlit as st
+import httpx
+import os
+import pandas as pd
+import plotly.graph_objects as go
+import plotly.express as px
+from datetime import datetime
+
+# ============================================
+# 頁面配置
+# ============================================
+st.set_page_config(
+    page_title="Stats - CLI Proxy API",
+    page_icon="📊",
+    layout="wide"
+)
+
+# ============================================
+# 配置
+# ============================================
+API_BASE_URL = os.getenv("API_BASE_URL", "http://localhost:8317")
+
+# ============================================
+# 輔助函數
+# ============================================
+def get_usage_stats():
+    """獲取使用統計"""
+    try:
+        response = httpx.get(
+            f"{API_BASE_URL}/v0/management/usage",
+            timeout=10.0
+        )
+        if response.status_code == 200:
+            return response.json()
+        return None
+    except:
+        return None
+
+def get_models_list():
+    """獲取模型列表"""
+    try:
+        response = httpx.get(
+            f"{API_BASE_URL}/v1/models",
+            timeout=10.0
+        )
+        if response.status_code == 200:
+            return response.json()
+        return None
+    except:
+        return None
+
+# ============================================
+# 主頁面
+# ============================================
+st.title("📊 使用統計")
+st.markdown("查看 API 使用量統計和監控數據")
+
+# ============================================
+# 統計卡片
+# ============================================
+st.header("📈 總體統計")
+
+# 獲取統計數據
+stats = get_usage_stats()
+models = get_models_list()
+
+# 統計卡片
+col1, col2, col3, col4 = st.columns(4)
+
+with col1:
+    total_requests = stats.get("total_requests", 0) if stats else 0
+    st.metric(
+        label="總請求數",
+        value=f"{total_requests:,}",
+        delta=None
+    )
+
+with col2:
+    total_tokens = stats.get("total_tokens", 0) if stats else 0
+    st.metric(
+        label="總 Token 數",
+        value=f"{total_tokens:,}",
+        delta=None
+    )
+
+with col3:
+    model_count = len(models.get("data", [])) if models else 0
+    st.metric(
+        label="可用模型",
+        value=f"{model_count}",
+        delta=None
+    )
+
+with col4:
+    active_keys = stats.get("active_credentials", 0) if stats else 0
+    st.metric(
+        label="活躍憑證",
+        value=f"{active_keys}",
+        delta=None
+    )
+
+st.markdown("---")
+
+# ============================================
+# 請求趨勢圖
+# ============================================
+st.header("📉 請求趨勢")
+
+# 模擬數據（實際應從 API 獲取）
+import random
+from datetime import datetime, timedelta
+
+# 生成過去7天的模擬數據
+dates = [(datetime.now() - timedelta(days=i)).strftime("%Y-%m-%d") for i in range(6, -1, -1)]
+requests_data = [random.randint(100, 500) for _ in range(7)]
+tokens_data = [random.randint(10000, 50000) for _ in range(7)]
+
+# 創建圖表
+fig_requests = go.Figure()
+fig_requests.add_trace(go.Scatter(
+    x=dates,
+    y=requests_data,
+    mode='lines+markers',
+    name='請求數',
+    line=dict(color='#FF4B4B', width=2),
+    marker=dict(size=8)
+))
+fig_requests.update_layout(
+    title="每日請求數",
+    xaxis_title="日期",
+    yaxis_title="請求數",
+    hovermode='x unified'
+)
+
+fig_tokens = go.Figure()
+fig_tokens.add_trace(go.Bar(
+    x=dates,
+    y=tokens_data,
+    name='Token 數',
+    marker_color='#4B9DFF'
+))
+fig_tokens.update_layout(
+    title="每日 Token 消耗",
+    xaxis_title="日期",
+    yaxis_title="Token 數",
+    hovermode='x unified'
+)
+
+col1, col2 = st.columns(2)
+with col1:
+    st.plotly_chart(fig_requests, use_container_width=True)
+with col2:
+    st.plotly_chart(fig_tokens, use_container_width=True)
+
+st.markdown("---")
+
+# ============================================
+# 模型使用分佈
+# ============================================
+st.header("🤖 模型使用分佈")
+
+# 模擬模型使用數據
+model_usage = {
+    "claude-3-5-sonnet": 35,
+    "gpt-4": 25,
+    "gemini-1.5-pro": 20,
+    "gpt-3.5-turbo": 15,
+    "其他": 5
+}
+
+fig_pie = px.pie(
+    values=list(model_usage.values()),
+    names=list(model_usage.keys()),
+    title="模型使用比例",
+    hole=0.4
+)
+fig_pie.update_traces(textposition='inside', textinfo='percent+label')
+
+st.plotly_chart(fig_pie, use_container_width=True)
+
+st.markdown("---")
+
+# ============================================
+# 提供者狀態
+# ============================================
+st.header("🔌 提供者狀態")
+
+providers_status = [
+    {"name": "Claude", "status": "active", "requests": 1250, "avg_latency": "1.2s"},
+    {"name": "OpenAI", "status": "active", "requests": 980, "avg_latency": "0.8s"},
+    {"name": "Gemini", "status": "active", "requests": 650, "avg_latency": "1.5s"},
+    {"name": "Kiro", "status": "cooldown", "requests": 320, "avg_latency": "2.1s"},
+    {"name": "Copilot", "status": "active", "requests": 180, "avg_latency": "0.9s"},
+]
+
+df_providers = pd.DataFrame(providers_status)
+
+# 狀態著色
+def color_status(val):
+    if val == "active":
+        return 'background-color: #d4edda; color: #155724'
+    elif val == "cooldown":
+        return 'background-color: #fff3cd; color: #856404'
+    return ''
+
+st.dataframe(
+    df_providers.style.applymap(color_status, subset=['status']),
+    use_container_width=True,
+    hide_index=True
+)
+
+st.markdown("---")
+
+# ============================================
+# 錯誤日誌
+# ============================================
+st.header("⚠️ 最近錯誤")
+
+errors_data = [
+    {"time": "2024-01-15 10:23:45", "provider": "Kiro", "error": "Rate limit exceeded", "count": 3},
+    {"time": "2024-01-15 09:15:22", "provider": "Claude", "error": "Token expired", "count": 1},
+    {"time": "2024-01-14 18:45:10", "provider": "OpenAI", "error": "Connection timeout", "count": 2},
+]
+
+if errors_data:
+    df_errors = pd.DataFrame(errors_data)
+    st.dataframe(df_errors, use_container_width=True, hide_index=True)
+else:
+    st.success("✅ 沒有最近的錯誤")
+
+st.markdown("---")
+
+# ============================================
+# 配額監控
+# ============================================
+st.header("📦 配額監控")
+
+col1, col2 = st.columns(2)
+
+with col1:
+    st.subheader("Claude 配額")
+    claude_used = 75
+    st.progress(claude_used / 100)
+    st.caption(f"已使用 {claude_used}%")
+
+with col2:
+    st.subheader("OpenAI 配額")
+    openai_used = 45
+    st.progress(openai_used / 100)
+    st.caption(f"已使用 {openai_used}%")
+
+# ============================================
+# 刷新按鈕
+# ============================================
+st.markdown("---")
+if st.button("🔄 刷新統計數據"):
+    st.rerun()
+
+st.caption(f"最後更新: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")

streamlit_app/pages/4_⚙️_Settings.py

@@ -0,0 +1,350 @@
+"""
+Settings Page - 系統設定
+"""
+
+import streamlit as st
+import httpx
+import os
+import yaml
+import json
+
+# ============================================
+# 頁面配置
+# ============================================
+st.set_page_config(
+    page_title="Settings - CLI Proxy API",
+    page_icon="⚙️",
+    layout="wide"
+)
+
+# ============================================
+# 配置
+# ============================================
+API_BASE_URL = os.getenv("API_BASE_URL", "http://localhost:8317")
+
+# ============================================
+# 輔助函數
+# ============================================
+def get_config():
+    """獲取當前配置"""
+    try:
+        response = httpx.get(
+            f"{API_BASE_URL}/v0/management/config",
+            timeout=10.0
+        )
+        if response.status_code == 200:
+            return response.json()
+        return None
+    except:
+        return None
+
+def get_server_info():
+    """獲取服務器信息"""
+    try:
+        response = httpx.get(
+            f"{API_BASE_URL}/v0/management/info",
+            timeout=10.0
+        )
+        if response.status_code == 200:
+            return response.json()
+        return None
+    except:
+        return None
+
+# ============================================
+# 主頁面
+# ============================================
+st.title("⚙️ 系統設定")
+st.markdown("配置 CLI Proxy API 服務器")
+
+# ============================================
+# 服務器信息
+# ============================================
+st.header("🖥️ 服務器信息")
+
+server_info = get_server_info()
+
+if server_info:
+    col1, col2, col3 = st.columns(3)
+    
+    with col1:
+        st.metric("版本", server_info.get("version", "N/A"))
+    
+    with col2:
+        st.metric("運行時間", server_info.get("uptime", "N/A"))
+    
+    with col3:
+        st.metric("Go 版本", server_info.get("go_version", "N/A"))
+    
+    with st.expander("📋 詳細信息"):
+        st.json(server_info)
+else:
+    st.info("無法獲取服務器信息")
+
+st.markdown("---")
+
+# ============================================
+# 基本配置
+# ============================================
+st.header("🔧 基本配置")
+
+config = get_config()
+
+# 服務器設置
+with st.expander("🌐 服務器設置", expanded=True):
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        host = st.text_input(
+            "監聽地址",
+            value=config.get("host", "0.0.0.0") if config else "0.0.0.0",
+            help="服務器監聽的網絡地址"
+        )
+    
+    with col2:
+        port = st.number_input(
+            "監聽端口",
+            value=config.get("port", 8317) if config else 8317,
+            min_value=1,
+            max_value=65535,
+            help="服務器監聽的端口"
+        )
+    
+    debug_mode = st.checkbox(
+        "調試模式",
+        value=config.get("debug", False) if config else False,
+        help="啟用詳細日誌輸出"
+    )
+
+# API Keys 設置
+with st.expander("🔑 API Keys"):
+    st.markdown("""
+    配置訪問 API 所需的密鑰。這些密鑰用於驗證客戶端請求。
+    """)
+    
+    # 顯示當前 API Keys（脫敏）
+    current_keys = config.get("api-keys", []) if config else []
+    
+    if current_keys:
+        st.subheader("當前 API Keys")
+        for i, key in enumerate(current_keys):
+            masked_key = key[:8] + "****" + key[-4:] if len(key) > 12 else "****"
+            st.text(f"Key {i+1}: {masked_key}")
+    
+    st.markdown("---")
+    
+    # 添加新 API Key
+    st.subheader("添加新 API Key")
+    new_key = st.text_input(
+        "新 API Key",
+        type="password",
+        help="輸入新的 API Key"
+    )
+    
+    if st.button("添加 API Key"):
+        if new_key:
+            st.success("✅ API Key 已添加（需要重啟服務生效）")
+        else:
+            st.error("請輸入 API Key")
+
+# 路由設置
+with st.expander("🔀 路由設置"):
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        routing_strategy = st.selectbox(
+            "路由策略",
+            ["round-robin", "fill-first"],
+            index=0 if not config or config.get("routing", {}).get("strategy", "round-robin") == "round-robin" else 1,
+            help="選擇憑證選擇策略"
+        )
+    
+    with col2:
+        force_prefix = st.checkbox(
+            "強制模型前綴",
+            value=config.get("force-model-prefix", False) if config else False,
+            help="強制使用模型前綴匹配憑證"
+        )
+
+# 重試設置
+with st.expander("🔄 重試設置"):
+    col1, col2, col3 = st.columns(3)
+    
+    with col1:
+        retry_count = st.number_input(
+            "重試次數",
+            value=config.get("request-retry", 3) if config else 3,
+            min_value=0,
+            max_value=10,
+            help="請求失敗時的重試次數"
+        )
+    
+    with col2:
+        max_credentials = st.number_input(
+            "最大嘗試憑證數",
+            value=config.get("max-retry-credentials", 0) if config else 0,
+            min_value=0,
+            help="0 表示嘗試所有可用憑證"
+        )
+    
+    with col3:
+        retry_interval = st.number_input(
+            "重試間隔 (秒)",
+            value=config.get("max-retry-interval", 30) if config else 30,
+            min_value=1,
+            max_value=300,
+            help="重試之間的最大等待時間"
+        )
+
+st.markdown("---")
+
+# ============================================
+# 提供者配置
+# ============================================
+st.header("🤖 提供者配置")
+
+# Claude 配置
+with st.expander("🟠 Claude (Anthropic)"):
+    st.markdown("配置 Claude API 認證")
+    
+    claude_token = st.text_input(
+        "Claude OAuth Token",
+        type="password",
+        help="從 Anthropic 獲取的 OAuth Token"
+    )
+    
+    if st.button("保存 Claude 配置"):
+        st.success("✅ Claude 配置已保存")
+
+# OpenAI 配置
+with st.expander("🟢 OpenAI"):
+    st.markdown("配置 OpenAI API Key")
+    
+    openai_key = st.text_input(
+        "OpenAI API Key",
+        type="password",
+        help="從 OpenAI 獲取的 API Key"
+    )
+    
+    openai_org = st.text_input(
+        "組織 ID (可選)",
+        help="OpenAI 組織 ID"
+    )
+    
+    if st.button("保存 OpenAI 配置"):
+        st.success("✅ OpenAI 配置已保存")
+
+# Gemini 配置
+with st.expander("🔵 Gemini"):
+    st.markdown("配置 Google Gemini API Key")
+    
+    gemini_key = st.text_input(
+        "Gemini API Key",
+        type="password",
+        help="從 Google AI Studio 獲取的 API Key"
+    )
+    
+    if st.button("保存 Gemini 配置"):
+        st.success("✅ Gemini 配置已保存")
+
+# Kiro 配置
+with st.expander("🟡 Kiro (AWS CodeWhisperer)"):
+    st.markdown("配置 Kiro 認證")
+    
+    kiro_config = st.selectbox(
+        "認證方式",
+        ["OAuth", "AWS Builder ID", "AWS IAM", "Import Token"]
+    )
+    
+    if kiro_config == "Import Token":
+        kiro_token = st.text_area(
+            "貼上 Kiro Token JSON",
+            height=100,
+            help="從 ~/.kiro/kiro-auth-token.json 複製"
+        )
+    
+    if st.button("保存 Kiro 配置"):
+        st.success("✅ Kiro 配置已保存")
+
+st.markdown("---")
+
+# ============================================
+# 高級設置
+# ============================================
+st.header("⚡ 高級設置")
+
+with st.expander("🔧 高級選項"):
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        commercial_mode = st.checkbox(
+            "商業模式",
+            value=config.get("commercial-mode", False) if config else False,
+            help="禁用高開銷中間件以減少內存使用"
+        )
+    
+    with col2:
+        usage_stats = st.checkbox(
+            "使用統計",
+            value=config.get("usage-statistics-enabled", False) if config else False,
+            help="啟用內存使用統計聚合"
+        )
+    
+    proxy_url = st.text_input(
+        "代理 URL",
+        value=config.get("proxy-url", "") if config else "",
+        placeholder="socks5://user:pass@192.168.1.1:1080/",
+        help="HTTP/HTTPS/SOCKS5 代理"
+    )
+
+st.markdown("---")
+
+# ============================================
+# 配置導出
+# ============================================
+st.header("📤 配置管理")
+
+col1, col2, col3 = st.columns(3)
+
+with col1:
+    if st.button("📥 導出配置"):
+        if config:
+            config_yaml = yaml.dump(config, default_flow_style=False, allow_unicode=True)
+            st.download_button(
+                label="下載 config.yaml",
+                data=config_yaml,
+                file_name="config.yaml",
+                mime="text/yaml"
+            )
+        else:
+            st.error("無法獲取配置")
+
+with col2:
+    if st.button("🔄 重載配置"):
+        st.success("✅ 配置已重新加載")
+
+with col3:
+    if st.button("⚠️ 重置為默認"):
+        st.warning("確定要重置所有配置嗎？此操作不可恢復。")
+        if st.button("確認重置"):
+            st.success("✅ 配置已重置為默認值")
+
+# ============================================
+# 環境變數
+# ============================================
+st.markdown("---")
+st.header("🔐 環境變數")
+
+st.markdown("""
+以下環境變數可以在 Hugging Face Spaces 的 Settings > Secrets 中配置：
+
+| 變數名 | 說明 |
+|--------|------|
+| `API_KEYS` | API 訪問密鑰（JSON 數組） |
+| `MANAGEMENT_KEY` | 管理介面密鑰 |
+| `CLAUDE_TOKEN` | Claude OAuth Token |
+| `OPENAI_API_KEY` | OpenAI API Key |
+| `GEMINI_API_KEY` | Gemini API Key |
+""")
+
+st.info("💡 修改配置後需要重啟服務才能生效")

supervisord.conf

@@ -0,0 +1,63 @@
+; ============================================
+; Supervisord Configuration for Hugging Face Spaces
+; Manages both Go API Server and Streamlit Frontend
+; ============================================
+
+[supervisord]
+nodaemon=true
+user=root
+logfile=/var/log/supervisor/supervisord.log
+pidfile=/var/run/supervisord.pid
+loglevel=info
+logfile_maxbytes=10MB
+logfile_backups=3
+
+; ============================================
+; Go API Server - CLIProxyAPI Plus
+; ============================================
+[program:go-server]
+command=/app/go-server/CLIProxyAPIPlus
+directory=/app/go-server
+autostart=true
+autorestart=true
+startsecs=10
+stopwaitsecs=30
+startretries=3
+stopasgroup=true
+killasgroup=true
+stdout_logfile=/var/log/supervisor/go-server.log
+stdout_logfile_maxbytes=10MB
+stdout_logfile_backups=3
+stderr_logfile=/var/log/supervisor/go-server-error.log
+stderr_logfile_maxbytes=10MB
+stderr_logfile_backups=3
+environment=HOME="/root",DEPLOY="true"
+
+; ============================================
+; Streamlit Frontend
+; ============================================
+[program:streamlit]
+command=streamlit run /app/streamlit/app.py --server.port=7860 --server.address=0.0.0.0
+directory=/app/streamlit
+autostart=true
+autorestart=true
+startsecs=5
+stopwaitsecs=10
+startretries=3
+stopasgroup=true
+killasgroup=true
+stdout_logfile=/var/log/supervisor/streamlit.log
+stdout_logfile_maxbytes=10MB
+stdout_logfile_backups=3
+stderr_logfile=/var/log/supervisor/streamlit-error.log
+stderr_logfile_maxbytes=10MB
+stderr_logfile_backups=3
+environment=HOME="/root",STREAMLIT_SERVER_PORT="7860",STREAMLIT_SERVER_ADDRESS="0.0.0.0",STREAMLIT_SERVER_HEADLESS="true"
+
+; ============================================
+; Event Listeners
+; ============================================
+[eventlistener:process_exit]
+command=bash -c "echo 'Process exited'"
+events=PROCESS_STATE_EXITED
+buffer_size=100