resolve merge conflict, keep minimal FastAPI version

.coveragerc

@@ -0,0 +1,38 @@
+[run]
+source = .
+omit = 
+    */tests/*
+    */venv/*
+    */.venv/*
+    */env/*
+    */.env/*
+    */site-packages/*
+    */__pycache__/*
+
+[report]
+# Lines to exclude from coverage consideration
+exclude_lines =
+    # Don't complain about debug-only code
+    pragma: no cover
+    def __repr__
+    if self\.debug
+    
+    # Don't complain if tests don't hit defensive assertion code
+    raise AssertionError
+    raise NotImplementedError
+    
+    # Don't complain if non-runnable code isn't run:
+    if 0:
+    if __name__ == .__main__.
+    pass
+precision = 2
+show_missing = True
+
+[html]
+directory = htmlcov
+
+[paths]
+source =
+    .
+    */backend/*
+    */app/*

.coveragerc.new

@@ -0,0 +1,23 @@
+[run]
+source = .
+omit =
+    */tests/*
+    */venv/*
+    */.venv/*
+    */env/*
+    */.env/*
+    */site-packages/*
+
+[report]
+exclude_lines =
+    pragma: no cover
+    def __repr__
+    if self\.debug
+    raise AssertionError
+    raise NotImplementedError
+    if 0:
+    if __name__ == ['"].*?['"]
+    @(abc\\.)?abstractmethod
+
+[html]
+directory = htmlcov

.env

@@ -0,0 +1,13 @@
+# 資料庫設定
+DATABASE_URL=sqlite:///./data/health_assistant.db
+
+# Redis 設定
+REDIS_HOST=localhost
+REDIS_PORT=6379
+REDIS_DB=0
+
+# API 設定
+API_HOST=localhost
+API_PORT=8000
+
+USDA_API_KEY="0bZCszzPSbc5r6RXfm0aHKtWGX2V0SX1hLiMmXwi"

.env.example

@@ -0,0 +1,2 @@
+COMPUTER_VISION_ENDPOINT=your_azure_endpoint
+COMPUTER_VISION_KEY=your_azure_key

.gitattributes

@@ -0,0 +1,2 @@
+*.py linguist-language=Python
+app/main.py linguist-detectable=true 

.github/workflows/python-ci.yml

@@ -0,0 +1,49 @@
+name: Python CI
+
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: ['3.9', '3.10', '3.11']
+
+    steps:
+    - uses: actions/checkout@v3
+    
+    - name: Set up Python ${{ matrix.python-version }}
+      uses: actions/setup-python@v4
+      with:
+        python-version: ${{ matrix.python-version }}
+    
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install -r requirements.txt
+        pip install pytest pytest-cov
+    
+    - name: Run tests with coverage
+      run: |
+        python -m pytest tests/ --cov=backend --cov-report=xml
+      env:
+        CLAUDE_API_KEY: ${{ secrets.CLAUDE_API_KEY }}
+    
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v3
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        file: ./coverage.xml
+        fail_ci_if_error: false
+
+    - name: Upload coverage report
+      uses: actions/upload-artifact@v3
+      with:
+        name: coverage-report
+        path: htmlcov/
+        if-no-files-found: error
+        retention-days: 5

.gitignore

@@ -0,0 +1,91 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# Virtual Environment
+venv/
+env/
+ENV/
+.env
+.venv
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+
+# Testing
+.coverage
+htmlcov/
+.pytest_cache/
+
+# Logs
+*.log
+
+# Environment variables
+.env
+
+# Local development
+*.db
+*.sqlite3
+
+# Frontend
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build
+dist/
+build/
+
+# macOS
+.DS_Store
+
+# Windows
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+
+# Project specific
+backend/.env
+frontend/.env
+
+# Coverage reports
+coverage/
+.coverage.*
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# VS Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# MyPy
+.mypy_cache/
+.dmypy.json
+dmypy.json

Dockerfile

@@ -8,4 +8,4 @@ RUN pip install --no-cache-dir -r requirements.txt
 
 COPY . .
 
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"] 
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

MANIFEST.in

@@ -0,0 +1,8 @@
+include README.md
+include requirements.txt
+include .coveragerc
+include pytest.ini
+recursive-include backend/app/templates *
+recursive-include tests *
+recursive-exclude * __pycache__
+recursive-exclude * *.py[co]

README.md

@@ -0,0 +1,159 @@
+---
+title: Health Assistant AI
+emoji: 🏥
+colorFrom: blue
+colorTo: green
+sdk: gradio
+sdk_version: 4.44.0
+app_file: app.py
+pinned: false
+---
+
+# Health Assistant AI
+
+一個整合飲食追蹤、運動記錄和AI圖像辨識的健康生活助手應用。
+
+## 主要功能
+
+- 🍽️ 飲食記錄（支援AI圖像辨識）
+- 💧 飲水追蹤
+- 🏃‍♂️ 運動記錄
+- 📊 營養分析儀表板
+- 🤖 AI驅動的個人化建議
+
+## 技術堆疊
+
+### 前端
+- React
+- TailwindCSS
+- Chart.js
+
+### 後端
+- Python FastAPI
+- SQLAlchemy
+- PostgreSQL
+- TensorFlow/PyTorch
+- Pydantic
+- HuggingFace Transformers
+- Anthropic Claude API
+
+## 安裝說明
+
+1. 克隆專案
+```bash
+git clone https://github.com/yourusername/health_assistant.git
+cd health_assistant
+```
+
+2. 設置 Python 虛擬環境並安裝依賴：
+```bash
+python -m venv venv
+source venv/bin/activate  # Linux/Mac
+# 或
+.\venv\Scripts\activate  # Windows
+
+pip install -e .  # 以開發模式安裝
+```
+
+3. 安裝前端依賴：
+```bash
+cd frontend
+npm install
+```
+
+## 開發說明
+
+### 後端開發
+```bash
+# 啟動後端開發服務器
+uvicorn backend.main:app --reload
+```
+
+### 前端開發
+```bash
+cd frontend
+npm run dev
+```
+
+## 測試
+
+### 運行測試
+
+運行所有測試：
+```bash
+pytest
+```
+
+運行特定測試文件：
+```bash
+pytest tests/test_api/test_main.py      # 運行 API 測試
+pytest tests/test_services/             # 運行服務層測試
+pytest -k "test_function_name"          # 運行特定測試函數
+```
+
+### 測試覆蓋率報告
+
+生成測試覆蓋率報告：
+```bash
+pytest --cov=backend --cov-report=html
+```
+
+這將在 `htmlcov` 目錄下生成 HTML 格式的覆蓋率報告。
+
+### 代碼風格檢查
+
+使用 black 和 isort 進行代碼格式化：
+```bash
+black .
+isort .
+```
+
+### 類型檢查
+
+運行 mypy 進行靜態類型檢查：
+```bash
+mypy .
+```
+
+## 持續整合 (CI)
+
+項目使用 GitHub Actions 進行持續整合。每次推送代碼或創建 Pull Request 時，會自動運行以下檢查：
+
+- 在 Python 3.9, 3.10, 3.11 上運行測試
+- 生成測試覆蓋率報告
+- 上傳覆蓋率到 Codecov
+
+### 本地運行 CI 檢查
+
+在提交代碼前，可以本地運行 CI 檢查：
+```bash
+# 運行測試和覆蓋率
+pytest --cov=backend
+
+# 檢查代碼風格
+black --check .
+isort --check-only .
+
+# 運行類型檢查
+mypy .
+```
+
+## 測試覆蓋率要求
+
+- 所有新代碼應該有對應的測試
+- 目標是達到至少 80% 的代碼覆蓋率
+- 關鍵業務邏輯應該有完整的測試覆蓋
+- 測試應該包含成功和失敗案例
+- 使用 `# pragma: no cover` 時需提供正當理由
+
+## 貢獻指南
+
+1. Fork 項目
+2. 創建特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 開啟 Pull Request
+
+## 許可證
+
+MIT License - 詳見 [LICENSE](LICENSE) 文件

__init__.py

@@ -0,0 +1 @@
+

app/__init__.py

@@ -0,0 +1 @@
+

app/database.py

@@ -0,0 +1,31 @@
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+import os
+
+# 確保資料庫目錄存在
+DB_DIR = os.path.join(os.path.dirname(os.path.dirname(__file__)), "data")
+os.makedirs(DB_DIR, exist_ok=True)
+
+# 資料庫 URL
+SQLALCHEMY_DATABASE_URL = f"sqlite:///{os.path.join(DB_DIR, 'health_assistant.db')}"
+
+# 創建資料庫引擎
+engine = create_engine(
+    SQLALCHEMY_DATABASE_URL,
+    connect_args={"check_same_thread": False}  # SQLite 特定配置
+)
+
+# 創建 SessionLocal 類
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+# 創建 Base 類
+Base = declarative_base()
+
+# 獲取資料庫會話的依賴項
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

app/init_db.py

@@ -0,0 +1,70 @@
+from .database import Base, engine, SessionLocal
+from .models.meal_log import MealLog
+from .models.nutrition import Nutrition
+import json
+
+def init_db():
+    """初始化資料庫並填入初始營養數據"""
+    print("Creating database tables...")
+    # 根據模型建立所有表格
+    Base.metadata.create_all(bind=engine)
+    print("Database tables created successfully!")
+
+    # 檢查是否已有資料，避免重複新增
+    db = SessionLocal()
+    if db.query(Nutrition).count() == 0:
+        print("Populating nutrition table with initial data...")
+        
+        # 從 main.py 移植過來的模擬資料
+        mock_nutrition_data = [
+            {
+                "food_name": "hamburger", "chinese_name": "漢堡", "calories": 540, "protein": 25, "fat": 31, "carbs": 40,
+                "fiber": 3, "sugar": 6, "sodium": 1040, "health_score": 45,
+                "recommendations": ["脂肪和鈉含量過高，建議減少食用頻率。"],
+                "warnings": ["高熱量", "高脂肪", "高鈉"]
+            },
+            {
+                "food_name": "pizza", "chinese_name": "披薩", "calories": 266, "protein": 11, "fat": 10, "carbs": 33,
+                "fiber": 2, "sugar": 4, "sodium": 598, "health_score": 65,
+                "recommendations": ["可搭配沙拉以增加纖維攝取。"],
+                "warnings": ["高鈉"]
+            },
+            {
+                "food_name": "sushi", "chinese_name": "壽司", "calories": 200, "protein": 12, "fat": 8, "carbs": 20,
+                "fiber": 1, "sugar": 2, "sodium": 380, "health_score": 85,
+                "recommendations": ["優質的蛋白質和碳水化合物來源。"],
+                "warnings": []
+            },
+            {
+                "food_name": "fried rice", "chinese_name": "炒飯", "calories": 238, "protein": 8, "fat": 12, "carbs": 26,
+                "fiber": 2, "sugar": 3, "sodium": 680, "health_score": 60,
+                "recommendations": ["注意油脂和鈉含量。"],
+                "warnings": ["高鈉"]
+            },
+            {
+                "food_name": "chicken wings", "chinese_name": "雞翅", "calories": 203, "protein": 18, "fat": 14, "carbs": 0,
+                "fiber": 0, "sugar": 0, "sodium": 380, "health_score": 70,
+                "recommendations": ["蛋白質的良好來源。"],
+                "warnings": []
+            },
+            {
+                "food_name": "salad", "chinese_name": "沙拉", "calories": 33, "protein": 3, "fat": 0.2, "carbs": 6,
+                "fiber": 3, "sugar": 3, "sodium": 65, "health_score": 95,
+                "recommendations": ["低熱量高纖維，是健康的選擇。"],
+                "warnings": []
+            }
+        ]
+
+        for food_data in mock_nutrition_data:
+            db_item = Nutrition(**food_data)
+            db.add(db_item)
+        
+        db.commit()
+        print(f"{len(mock_nutrition_data)} items populated.")
+    else:
+        print("Nutrition table already contains data. Skipping population.")
+    
+    db.close()
+
+if __name__ == "__main__":
+    init_db()

app/main.py

@@ -0,0 +1,39 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from app.routers import ai_router, meal_router
+from app.database import engine, Base
+
+# 創建資料庫表
+Base.metadata.create_all(bind=engine)
+
+app = FastAPI(title="Health Assistant API")
+
+# 配置 CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173"],  # React 開發伺服器的位址
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 註冊路由
+app.include_router(ai_router.router)
+app.include_router(meal_router.router)
+
+@app.get("/")
+async def root():
+    return {"message": "Health Assistant API is running"}
+
+@app.get("/health")
+async def health_check():
+    """健康檢查端點"""
+    return {
+        "status": "healthy",
+        "routers": ["ai_router", "meal_router"],
+        "endpoints": [
+            "/ai/analyze-food-image/",
+            "/ai/analyze-food-image-with-weight/",
+            "/ai/health"
+        ]
+    }

app/models/meal_log.py

@@ -0,0 +1,19 @@
+from sqlalchemy import Column, Integer, String, Float, DateTime, JSON
+from ..database import Base
+
+class MealLog(Base):
+    __tablename__ = "meal_logs"
+
+    id = Column(Integer, primary_key=True, index=True)
+    food_name = Column(String, index=True)
+    meal_type = Column(String)  # breakfast, lunch, dinner, snack
+    portion_size = Column(String)  # small, medium, large
+    calories = Column(Float)
+    protein = Column(Float)
+    carbs = Column(Float)
+    fat = Column(Float)
+    fiber = Column(Float)
+    meal_date = Column(DateTime, index=True)
+    image_url = Column(String)
+    ai_analysis = Column(JSON)  # 儲存完整的 AI 分析結果
+    created_at = Column(DateTime)

app/models/nutrition.py

@@ -0,0 +1,22 @@
+# backend/app/models/nutrition.py
+from sqlalchemy import Column, Integer, String, Float, JSON
+from ..database import Base
+
+class Nutrition(Base):
+    __tablename__ = "nutrition"
+
+    id = Column(Integer, primary_key=True, index=True)
+    food_name = Column(String, unique=True, index=True, nullable=False)
+    chinese_name = Column(String)
+    calories = Column(Float)
+    protein = Column(Float)
+    fat = Column(Float)
+    carbs = Column(Float)
+    fiber = Column(Float)
+    sugar = Column(Float)
+    sodium = Column(Float)
+    # For more complex data like vitamins, minerals, etc.
+    details = Column(JSON)
+    health_score = Column(Integer)
+    recommendations = Column(JSON)
+    warnings = Column(JSON) 

app/routers/__init__.py

@@ -0,0 +1 @@
+ 

app/routers/ai_router.py

@@ -0,0 +1,72 @@
+# 檔案路徑: app/routers/ai_router.py
+
+from fastapi import APIRouter, File, UploadFile, HTTPException
+from pydantic import BaseModel
+from typing import Dict, Any, List, Optional
+
+router = APIRouter(
+    prefix="/ai",
+    tags=["AI"],
+)
+
+# 新增 Pydantic 模型定義
+class WeightEstimationResponse(BaseModel):
+    food_type: str
+    estimated_weight: float
+    weight_confidence: float
+    weight_error_range: List[float]
+    nutrition: Dict[str, Any]
+    reference_object: Optional[str] = None
+    note: str
+
+class FoodAnalysisResponse(BaseModel):
+    food_name: str
+    nutrition_info: Dict[str, Any]
+
+@router.post("/analyze-food-image/")
+async def analyze_food_image_endpoint(file: UploadFile = File(...)):
+    """
+    這個端點接收使用者上傳的食物圖片，使用 AI 模型進行辨識，
+    並返回辨識出的食物名稱。
+    """
+    # 檢查上傳的檔案是否為圖片格式
+    if not file.content_type or not file.content_type.startswith("image/"):
+        raise HTTPException(status_code=400, detail="上傳的檔案不是圖片格式。")
+
+    # 暫時返回測試回應
+    return {"food_name": "測試食物", "nutrition_info": {"calories": 100}}
+
+@router.post("/analyze-food-image-with-weight/", response_model=WeightEstimationResponse)
+async def analyze_food_image_with_weight_endpoint(file: UploadFile = File(...)):
+    """
+    整合食物辨識、重量估算與營養分析的端點。
+    包含信心度與誤差範圍，支援參考物偵測。
+    """
+    # 檢查上傳的檔案是否為圖片格式
+    if not file.content_type or not file.content_type.startswith("image/"):
+        raise HTTPException(status_code=400, detail="上傳的檔案不是圖片格式。")
+
+    # 暫時返回測試回應
+    return WeightEstimationResponse(
+        food_type="測試食物",
+        estimated_weight=150.0,
+        weight_confidence=0.85,
+        weight_error_range=[130.0, 170.0],
+        nutrition={"calories": 100, "protein": 5, "fat": 2, "carbs": 15},
+        reference_object="硬幣",
+        note="測試重量估算結果"
+    )
+
+@router.get("/health")
+async def health_check():
+    """
+    健康檢查端點，確認 AI 服務是否正常運作
+    """
+    return {
+        "status": "healthy",
+        "services": {
+            "food_classification": "available",
+            "weight_estimation": "available",
+            "nutrition_api": "available"
+        }
+    }

app/routers/meal_router.py

@@ -0,0 +1,103 @@
+from fastapi import APIRouter, Depends, HTTPException
+from sqlalchemy.orm import Session
+from typing import List, Dict, Any, Optional
+from datetime import datetime
+from ..services.meal_service import MealService
+from ..database import get_db
+from pydantic import BaseModel
+
+router = APIRouter(prefix="/api/meals", tags=["Meals"])
+
+class MealCreate(BaseModel):
+    food_name: str
+    meal_type: str
+    portion_size: str
+    meal_date: datetime
+    nutrition: Dict[str, float]
+    image_url: Optional[str] = None
+    ai_analysis: Optional[Dict[str, Any]] = None
+
+class DateRange(BaseModel):
+    start_date: datetime
+    end_date: datetime
+    meal_type: Optional[str] = None
+
+@router.post("/log")
+async def create_meal_log(
+    meal: MealCreate,
+    db: Session = Depends(get_db)
+) -> Dict[str, Any]:
+    """創建新的用餐記錄"""
+    meal_service = MealService(db)
+    try:
+        meal_log = meal_service.create_meal_log(
+            food_name=meal.food_name,
+            meal_type=meal.meal_type,
+            portion_size=meal.portion_size,
+            nutrition=meal.nutrition,
+            meal_date=meal.meal_date,
+            image_url=meal.image_url,
+            ai_analysis=meal.ai_analysis
+        )
+        return {
+            "success": True,
+            "message": "用餐記錄已創建",
+            "data": {
+                "id": meal_log.id,
+                "food_name": meal_log.food_name,
+                "meal_type": meal_log.meal_type,
+                "meal_date": meal_log.meal_date
+            }
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.post("/list")
+async def get_meal_logs(
+    date_range: DateRange,
+    db: Session = Depends(get_db)
+) -> Dict[str, Any]:
+    """獲取用餐記錄列表"""
+    meal_service = MealService(db)
+    try:
+        logs = meal_service.get_meal_logs(
+            start_date=date_range.start_date,
+            end_date=date_range.end_date,
+            meal_type=date_range.meal_type
+        )
+        return {
+            "success": True,
+            "data": [{
+                "id": log.id,
+                "food_name": log.food_name,
+                "meal_type": log.meal_type,
+                "portion_size": log.portion_size,
+                "calories": log.calories,
+                "protein": log.protein,
+                "carbs": log.carbs,
+                "fat": log.fat,
+                "meal_date": log.meal_date,
+                "image_url": log.image_url
+            } for log in logs]
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.post("/nutrition-summary")
+async def get_nutrition_summary(
+    date_range: DateRange,
+    db: Session = Depends(get_db)
+) -> Dict[str, Any]:
+    """獲取營養攝入總結"""
+    meal_service = MealService(db)
+    try:
+        summary = meal_service.get_nutrition_summary(
+            start_date=date_range.start_date,
+            end_date=date_range.end_date
+        )
+        return {
+            "success": True,
+            "data": summary
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))

app/services/__init__.py

@@ -0,0 +1,5 @@
+# This file makes the services directory a Python package
+# Import the HybridFoodAnalyzer class to make it available when importing from app.services
+from .food_analyzer_service import HybridFoodAnalyzer
+
+__all__ = ['HybridFoodAnalyzer']

app/services/ai_service.py

@@ -0,0 +1,95 @@
+# 檔案路徑: backend/app/services/ai_service.py
+
+from transformers.pipelines import pipeline
+from PIL import Image
+import io
+import logging
+
+# 設置日誌
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# 全局變量
+image_classifier = None
+
+def load_model():
+    """載入模型的函數"""
+    global image_classifier
+    
+    try:
+        logger.info("正在載入食物辨識模型...")
+        # 載入模型 - 移除不支持的參數
+        image_classifier = pipeline(
+            "image-classification", 
+            model="juliensimon/autotrain-food101-1471154053",
+            device=-1  # 使用CPU
+        )
+        logger.info("模型載入成功！")
+        return True
+    except Exception as e:
+        logger.error(f"模型載入失敗: {str(e)}")
+        image_classifier = None
+        return False
+
+def classify_food_image(image_bytes: bytes) -> str:
+    """
+    接收圖片的二進位制數據，進行分類並返回可能性最高的食物名稱。
+    """
+    global image_classifier
+    
+    # 如果模型未載入，嘗試重新載入
+    if image_classifier is None:
+        logger.warning("模型未載入，嘗試重新載入...")
+        if not load_model():
+            return "Error: Model not loaded"
+    
+    if image_classifier is None:
+        return "Error: Model could not be loaded"
+
+    try:
+        # 驗證圖片數據
+        if not image_bytes:
+            return "Error: Empty image data"
+        
+        # 從記憶體中的 bytes 打開圖片
+        image = Image.open(io.BytesIO(image_bytes))
+        
+        # 確保圖片是RGB格式
+        if image.mode != 'RGB':
+            image = image.convert('RGB')
+        
+        logger.info(f"處理圖片，尺寸: {image.size}")
+        
+        # 使用模型管線進行分類
+        pipeline_output = image_classifier(image)
+        
+        logger.info(f"模型輸出: {pipeline_output}")
+        
+        # 處理輸出結果
+        if not pipeline_output:
+            return "Unknown"
+        
+        # pipeline_output 通常是一個列表
+        if isinstance(pipeline_output, list) and len(pipeline_output) > 0:
+            result = pipeline_output[0]
+            if isinstance(result, dict) and 'label' in result:
+                label = result['label']
+                confidence = result.get('score', 0)
+                
+                logger.info(f"辨識結果: {label}, 信心度: {confidence:.2f}")
+                
+            # 標籤可能包含底線，我們將其替換為空格，並讓首字母大寫
+                formatted_label = str(label).replace('_', ' ').title()
+                return formatted_label
+            
+        return "Unknown"
+        
+    except Exception as e:
+        logger.error(f"圖片分類過程中發生錯誤: {str(e)}")
+        return f"Error: {str(e)}"
+
+# 在模塊載入時嘗試載入模型
+logger.info("初始化 AI 服務...")
+load_model()
+
+__all__ = ["classify_food_image"]

app/services/food_analyzer_service.py

@@ -0,0 +1,256 @@
+import torch
+import json
+from typing import Dict, Any, Optional
+from PIL import Image
+from io import BytesIO
+import base64
+import os
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+class HybridFoodAnalyzer:
+    def __init__(self, claude_api_key: Optional[str] = None):
+        """
+        Initialize the HybridFoodAnalyzer with HuggingFace model and Claude API.
+        
+        Args:
+            claude_api_key: Optional API key for Claude. If not provided, will try to get from environment variable CLAUDE_API_KEY.
+        """
+        # Initialize HuggingFace model
+        from transformers import AutoImageProcessor, AutoModelForImageClassification
+        
+        print("Loading HuggingFace food recognition model...")
+        self.processor = AutoImageProcessor.from_pretrained("nateraw/food")
+        self.model = AutoModelForImageClassification.from_pretrained("nateraw/food")
+        self.model.eval()  # Set model to evaluation mode
+        
+        # Initialize Claude API
+        print("Initializing Claude API...")
+        import anthropic
+        self.claude_api_key = claude_api_key or os.getenv('CLAUDE_API_KEY')
+        if not self.claude_api_key:
+            raise ValueError("Claude API key is required. Please set CLAUDE_API_KEY environment variable or pass it as an argument.")
+            
+        self.claude_client = anthropic.Anthropic(api_key=self.claude_api_key)
+    
+    def recognize_food(self, image: Image.Image) -> Dict[str, Any]:
+        """
+        Recognize food from an image using HuggingFace model.
+        
+        Args:
+            image: PIL Image object containing the food image
+            
+        Returns:
+            Dictionary containing food name and confidence score
+        """
+        try:
+            print("Processing image for food recognition...")
+            inputs = self.processor(images=image, return_tensors="pt")
+            
+            with torch.no_grad():
+                outputs = self.model(**inputs)
+                predictions = torch.nn.functional.softmax(outputs.logits, dim=-1)
+            
+            predicted_class_id = int(predictions.argmax().item())
+            confidence = predictions[0][predicted_class_id].item()
+            food_name = self.model.config.id2label[predicted_class_id]
+            
+            # Map common food names to Chinese
+            food_name_mapping = {
+                "hamburger": "漢堡",
+                "pizza": "披薩",
+                "sushi": "壽司",
+                "fried rice": "炒飯",
+                "chicken wings": "雞翅",
+                "salad": "沙拉",
+                "apple": "蘋果",
+                "banana": "香蕉",
+                "orange": "橙子",
+                "noodles": "麵條"
+            }
+            
+            chinese_name = food_name_mapping.get(food_name.lower(), food_name)
+            
+            return {
+                "food_name": food_name,
+                "chinese_name": chinese_name,
+                "confidence": confidence,
+                "success": True
+            }
+            
+        except Exception as e:
+            print(f"Error in food recognition: {str(e)}")
+            return {
+                "success": False,
+                "error": str(e)
+            }
+    
+    def analyze_nutrition(self, food_name: str) -> Dict[str, Any]:
+        """
+        Analyze nutrition information for a given food using Claude API.
+        
+        Args:
+            food_name: Name of the food to analyze
+            
+        Returns:
+            Dictionary containing nutrition information
+        """
+        try:
+            print(f"Analyzing nutrition for {food_name}...")
+            prompt = f"""
+            請分析 {food_name} 的營養成分（每100g），並以JSON格式回覆：
+            {{
+                "calories": 數值,
+                "protein": 數值,
+                "fat": 數值,
+                "carbs": 數值,
+                "fiber": 數值,
+                "sugar": 數值,
+                "sodium": 數值
+            }}
+            """
+            
+            message = self.claude_client.messages.create(
+                model="claude-3-sonnet-20240229",
+                max_tokens=500,
+                messages=[{"role": "user", "content": prompt}]
+            )
+            
+            # Extract and parse the JSON response
+            response_text = message.content[0].get("text", "") if isinstance(message.content[0], dict) else str(message.content[0])
+            try:
+                nutrition_data = json.loads(response_text.strip())
+                return {
+                    "success": True,
+                    "nutrition": nutrition_data
+                }
+            except json.JSONDecodeError as e:
+                print(f"Error parsing Claude response: {e}")
+                return {
+                    "success": False,
+                    "error": f"Failed to parse nutrition data: {e}",
+                    "raw_response": response_text
+                }
+                
+        except Exception as e:
+            print(f"Error in nutrition analysis: {str(e)}")
+            return {
+                "success": False,
+                "error": str(e)
+            }
+
+    def process_image(self, image_data: bytes) -> Dict[str, Any]:
+        """
+        Process an image to recognize food and analyze its nutrition.
+        
+        Args:
+            image_data: Binary image data
+            
+        Returns:
+            Dictionary containing recognition and analysis results
+        """
+        try:
+            # Convert bytes to PIL Image
+            image = Image.open(BytesIO(image_data))
+            
+            # Step 1: Recognize food
+            recognition_result = self.recognize_food(image)
+            if not recognition_result.get("success"):
+                return recognition_result
+            
+            # Step 2: Analyze nutrition
+            nutrition_result = self.analyze_nutrition(recognition_result["food_name"])
+            if not nutrition_result.get("success"):
+                return nutrition_result
+            
+            # Calculate health score
+            nutrition = nutrition_result["nutrition"]
+            health_score = self.calculate_health_score(nutrition)
+            
+            # Generate recommendations and warnings
+            recommendations = self.generate_recommendations(nutrition)
+            warnings = self.generate_warnings(nutrition)
+            
+            return {
+                "success": True,
+                "food_name": recognition_result["food_name"],
+                "chinese_name": recognition_result["chinese_name"],
+                "confidence": recognition_result["confidence"],
+                "nutrition": nutrition,
+                "analysis": {
+                    "healthScore": health_score,
+                    "recommendations": recommendations,
+                    "warnings": warnings
+                }
+            }
+            
+        except Exception as e:
+            return {
+                "success": False,
+                "error": f"Failed to process image: {str(e)}"
+            }
+    
+    def calculate_health_score(self, nutrition: Dict[str, float]) -> int:
+        """Calculate a health score based on nutritional values"""
+        score = 100
+        
+        # 熱量評分
+        if nutrition["calories"] > 400:
+            score -= 20
+        elif nutrition["calories"] > 300:
+            score -= 10
+        
+        # 脂肪評分
+        if nutrition["fat"] > 20:
+            score -= 15
+        elif nutrition["fat"] > 15:
+            score -= 8
+        
+        # 蛋白質評分
+        if nutrition["protein"] > 15:
+            score += 10
+        elif nutrition["protein"] < 5:
+            score -= 10
+        
+        # 鈉含量評分
+        if "sodium" in nutrition and nutrition["sodium"] > 800:
+            score -= 15
+        elif "sodium" in nutrition and nutrition["sodium"] > 600:
+            score -= 8
+        
+        return max(0, min(100, score))
+    
+    def generate_recommendations(self, nutrition: Dict[str, float]) -> list:
+        """Generate dietary recommendations based on nutrition data"""
+        recommendations = []
+        
+        if nutrition["protein"] < 10:
+            recommendations.append("建議增加蛋白質攝取，可搭配雞蛋或豆腐")
+        
+        if nutrition["fat"] > 20:
+            recommendations.append("脂肪含量較高，建議適量食用")
+        
+        if "fiber" in nutrition and nutrition["fiber"] < 3:
+            recommendations.append("纖維含量不足，建議搭配蔬菜沙拉")
+        
+        if "sodium" in nutrition and nutrition["sodium"] > 600:
+            recommendations.append("鈉含量偏高，建議多喝水並減少其他鹽分攝取")
+        
+        return recommendations
+    
+    def generate_warnings(self, nutrition: Dict[str, float]) -> list:
+        """Generate dietary warnings based on nutrition data"""
+        warnings = []
+        
+        if nutrition["calories"] > 500:
+            warnings.append("高熱量食物")
+        
+        if nutrition["fat"] > 25:
+            warnings.append("高脂肪食物")
+        
+        if "sodium" in nutrition and nutrition["sodium"] > 1000:
+            warnings.append("高鈉食物")
+        
+        return warnings

app/services/meal_service.py

@@ -0,0 +1,89 @@
+from datetime import datetime
+from typing import List, Dict, Any, Optional
+from sqlalchemy.orm import Session
+from ..models.meal_log import MealLog
+
+class MealService:
+    def __init__(self, db: Session):
+        self.db = db
+
+    def create_meal_log(
+        self,
+        food_name: str,
+        meal_type: str,
+        portion_size: str,
+        nutrition: Dict[str, float],
+        meal_date: datetime,
+        image_url: Optional[str] = None,
+        ai_analysis: Optional[Dict[str, Any]] = None
+    ) -> MealLog:
+        """創建新的用餐記錄"""
+        meal_log = MealLog(
+            food_name=food_name,
+            meal_type=meal_type,
+            portion_size=portion_size,
+            calories=nutrition.get('calories', 0),
+            protein=nutrition.get('protein', 0),
+            carbs=nutrition.get('carbs', 0),
+            fat=nutrition.get('fat', 0),
+            fiber=nutrition.get('fiber', 0),
+            meal_date=meal_date,
+            image_url=image_url,
+            ai_analysis=ai_analysis,
+            created_at=datetime.utcnow()
+        )
+        
+        self.db.add(meal_log)
+        self.db.commit()
+        self.db.refresh(meal_log)
+        return meal_log
+
+    def get_meal_logs(
+        self,
+        start_date: Optional[datetime] = None,
+        end_date: Optional[datetime] = None,
+        meal_type: Optional[str] = None
+    ) -> List[MealLog]:
+        """獲取用餐記錄"""
+        query = self.db.query(MealLog)
+        
+        if start_date:
+            query = query.filter(MealLog.meal_date >= start_date)
+        if end_date:
+            query = query.filter(MealLog.meal_date <= end_date)
+        if meal_type:
+            query = query.filter(MealLog.meal_type == meal_type)
+            
+        return query.order_by(MealLog.meal_date.desc()).all()
+
+    def get_nutrition_summary(
+        self,
+        start_date: datetime,
+        end_date: datetime
+    ) -> Dict[str, float]:
+        """獲取指定時間範圍內的營養攝入總結"""
+        meals = self.get_meal_logs(start_date, end_date)
+        
+        summary = {
+            'total_calories': 0,
+            'total_protein': 0,
+            'total_carbs': 0,
+            'total_fat': 0,
+            'total_fiber': 0
+        }
+        
+        for meal in meals:
+            # 根據份量大小調整營養值
+            multiplier = {
+                'small': 0.7,
+                'medium': 1.0,
+                'large': 1.3
+            }.get(meal.portion_size, 1.0)
+            
+            summary['total_calories'] += meal.calories * multiplier
+            summary['total_protein'] += meal.protein * multiplier
+            summary['total_carbs'] += meal.carbs * multiplier
+            summary['total_fat'] += meal.fat * multiplier
+            summary['total_fiber'] += meal.fiber * multiplier
+            
+        return summary

app/services/nutrition_api_service.py

@@ -0,0 +1,101 @@
+# backend/app/services/nutrition_api_service.py
+import os
+import requests
+from dotenv import load_dotenv
+import logging
+
+# 設置日誌
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# 載入環境變數
+load_dotenv()
+
+# 從環境變數中獲取 API 金鑰
+USDA_API_KEY = os.getenv("USDA_API_KEY", "DEMO_KEY")
+USDA_API_URL = "https://api.nal.usda.gov/fdc/v1/foods/search"
+
+# 我們關心的主要營養素及其在 USDA API 中的名稱或編號
+# 我們可以透過 nutrient.nutrientNumber 或 nutrient.name 來匹配
+NUTRIENT_MAP = {
+    'calories': 'Energy',
+    'protein': 'Protein',
+    'fat': 'Total lipid (fat)',
+    'carbs': 'Carbohydrate, by difference',
+    'fiber': 'Fiber, total dietary',
+    'sugar': 'Total sugars',
+    'sodium': 'Sodium, Na'
+}
+
+def fetch_nutrition_data(food_name: str):
+    """
+    從 USDA FoodData Central API 獲取食物的營養資訊。
+
+    :param food_name: 要查詢的食物名稱 (例如 "Donuts")。
+    :return: 包含營養資訊的字典，如果找不到則返回 None。
+    """
+    if not USDA_API_KEY:
+        logger.error("USDA_API_KEY 未設定，無法查詢營養資訊。")
+        return None
+
+    params = {
+        'query': food_name,
+        'api_key': USDA_API_KEY,
+        'dataType': 'Branded',  # 優先搜尋品牌食品，結果通常更符合預期
+        'pageSize': 1  # 我們只需要最相關的一筆結果
+    }
+
+    try:
+        logger.info(f"正在向 USDA API 查詢食物：{food_name}")
+        response = requests.get(USDA_API_URL, params=params)
+        response.raise_for_status()  # 如果請求失敗 (例如 4xx 或 5xx)，則會拋出異常
+
+        data = response.json()
+
+        # 檢查是否有找到食物
+        if data.get('foods') and len(data['foods']) > 0:
+            food_data = data['foods'][0]  # 取第一個最相關的結果
+            logger.info(f"從 API 成功獲取到食物 '{food_data.get('description')}' 的資料")
+            
+            nutrition_info = {
+                "food_name": food_data.get('description', food_name).capitalize(),
+                "chinese_name": None,  # USDA API 不提供中文名
+            }
+
+            # 遍歷我們需要的營養素
+            extracted_nutrients = {key: 0.0 for key in NUTRIENT_MAP.keys()} # 初始化
+            
+            for nutrient in food_data.get('foodNutrients', []):
+                for key, name in NUTRIENT_MAP.items():
+                    if nutrient.get('nutrientName').strip().lower() == name.strip().lower():
+                        # 將值存入我們的格式
+                        extracted_nutrients[key] = float(nutrient.get('value', 0.0))
+                        break # 找到後就跳出內層迴圈
+
+            nutrition_info.update(extracted_nutrients)
+            
+            # 由於 USDA 不直接提供健康建議，我們先回傳原始數據
+            # 後續可以在 main.py 中根據這些數據生成我們自己的建議
+            return nutrition_info
+
+        else:
+            logger.warning(f"在 USDA API 中找不到食物：{food_name}")
+            return None
+
+    except requests.exceptions.RequestException as e:
+        logger.error(f"請求 USDA API 時發生錯誤: {e}")
+        return None
+    except Exception as e:
+        logger.error(f"處理 API 回應時發生未知錯誤: {e}")
+        return None
+
+if __name__ == '__main__':
+    # 測試此模組的功能
+    test_food = "donuts"
+    nutrition = fetch_nutrition_data(test_food)
+    if nutrition:
+        import json
+        print(f"成功獲取 '{test_food}' 的營養資訊:")
+        print(json.dumps(nutrition, indent=2))
+    else:
+        print(f"無法獲取 '{test_food}' 的營養資訊。") 

app/services/weight_estimation_service.py

@@ -0,0 +1,296 @@
+# 檔案路徑: backend/app/services/weight_estimation_service.py
+
+import logging
+import numpy as np
+from PIL import Image
+import io
+from typing import Dict, Any, List, Optional, Tuple
+import torch
+
+# 設置日誌
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# 食物密度表 (g/cm³) - 常見食物的平均密度
+FOOD_DENSITY_TABLE = {
+    "rice": 0.8,           # 米飯
+    "fried_rice": 0.7,     # 炒飯
+    "noodles": 0.6,        # 麵條
+    "bread": 0.3,          # 麵包
+    "meat": 1.0,           # 肉類
+    "fish": 1.1,           # 魚類
+    "vegetables": 0.4,     # 蔬菜
+    "fruits": 0.8,         # 水果
+    "soup": 1.0,           # 湯類
+    "default": 0.8         # 預設密度
+}
+
+# 參考物尺寸表 (cm)
+REFERENCE_OBJECTS = {
+    "plate": {"diameter": 24.0},      # 標準餐盤直徑
+    "bowl": {"diameter": 15.0},       # 標準碗直徑
+    "spoon": {"length": 15.0},        # 湯匙長度
+    "fork": {"length": 20.0},         # 叉子長度
+    "default": {"diameter": 24.0}     # 預設參考物
+}
+
+class WeightEstimationService:
+    def __init__(self):
+        """初始化重量估算服務"""
+        self.sam_model = None
+        self.dpt_model = None
+        self.detection_model = None
+        self._load_models()
+    
+    def _load_models(self):
+        """載入所需的 AI 模型"""
+        try:
+            # 載入 SAM 分割模型
+            from transformers import SamModel, SamProcessor
+            logger.info("正在載入 SAM 分割模型...")
+            self.sam_model = SamModel.from_pretrained("facebook/sam-vit-base")
+            self.sam_processor = SamProcessor.from_pretrained("facebook/sam-vit-base")
+            
+            # 載入 DPT 深度估計模型
+            from transformers import pipeline
+            logger.info("正在載入 DPT 深度估計模型...")
+            self.dpt_model = pipeline("depth-estimation", model="Intel/dpt-large")
+            
+            # 載入物件偵測模型（用於偵測參考物）
+            logger.info("正在載入物件偵測模型...")
+            self.detection_model = pipeline("object-detection", model="ultralytics/yolov5")
+            
+            logger.info("所有模型載入完成！")
+            
+        except Exception as e:
+            logger.error(f"模型載入失敗: {str(e)}")
+            raise
+    
+    def detect_reference_objects(self, image: Image.Image) -> Optional[Dict[str, Any]]:
+        """偵測圖片中的參考物（餐盤、餐具等）"""
+        try:
+            # 使用 YOLOv5 偵測物件
+            results = self.detection_model(image)
+            
+            reference_objects = []
+            for result in results:
+                label = result["label"].lower()
+                confidence = result["score"]
+                
+                # 檢查是否為參考物
+                if any(ref in label for ref in ["plate", "bowl", "spoon", "fork", "knife"]):
+                    reference_objects.append({
+                        "type": label,
+                        "confidence": confidence,
+                        "bbox": result["box"]
+                    })
+            
+            if reference_objects:
+                # 選擇信心度最高的參考物
+                best_ref = max(reference_objects, key=lambda x: x["confidence"])
+                return best_ref
+            
+            return None
+            
+        except Exception as e:
+            logger.warning(f"參考物偵測失敗: {str(e)}")
+            return None
+    
+    def segment_food(self, image: Image.Image) -> np.ndarray:
+        """使用 SAM 分割食物區域"""
+        try:
+            # 使用 SAM 進行分割
+            inputs = self.sam_processor(image, return_tensors="pt")
+            
+            with torch.no_grad():
+                outputs = self.sam_model(**inputs)
+            
+            # 取得分割遮罩
+            masks = self.sam_processor.image_processor.post_process_masks(
+                outputs.pred_masks.sigmoid(), 
+                inputs["original_sizes"], 
+                inputs["reshaped_input_sizes"]
+            )[0]
+            
+            # 選擇最大的遮罩作為食物區域
+            mask = masks[0].numpy()  # 簡化處理，選擇第一個遮罩
+            
+            return mask
+            
+        except Exception as e:
+            logger.error(f"食物分割失敗: {str(e)}")
+            # 回傳一個簡單的遮罩（整個圖片）
+            return np.ones((image.height, image.width), dtype=bool)
+    
+    def estimate_depth(self, image: Image.Image) -> np.ndarray:
+        """使用 DPT 進行深度估計"""
+        try:
+            # 使用 DPT 進行深度估計
+            depth_result = self.dpt_model(image)
+            depth_map = depth_result["depth"]
+            
+            return np.array(depth_map)
+            
+        except Exception as e:
+            logger.error(f"深度估計失��: {str(e)}")
+            # 回傳一個預設的深度圖
+            return np.ones((image.height, image.width))
+    
+    def calculate_volume_and_weight(self, 
+                                  mask: np.ndarray, 
+                                  depth_map: np.ndarray, 
+                                  food_type: str,
+                                  reference_object: Optional[Dict[str, Any]] = None) -> Tuple[float, float, float]:
+        """計算體積和重量"""
+        try:
+            # 計算食物區域的像素數量
+            food_pixels = np.sum(mask)
+            
+            # 計算食物區域的平均深度
+            food_depth = np.mean(depth_map[mask])
+            
+            # 估算體積（相對體積）
+            relative_volume = food_pixels * food_depth
+            
+            # 如果有參考物，進行尺寸校正
+            if reference_object:
+                ref_type = reference_object["type"]
+                if ref_type in REFERENCE_OBJECTS:
+                    ref_size = REFERENCE_OBJECTS[ref_type]
+                    # 根據參考物尺寸校正體積
+                    if "diameter" in ref_size:
+                        # 圓形參考物（如餐盤）
+                        pixel_to_cm_ratio = ref_size["diameter"] / np.sqrt(food_pixels / np.pi)
+                    else:
+                        # 線性參考物（如餐具）
+                        pixel_to_cm_ratio = ref_size["length"] / np.sqrt(food_pixels)
+                    
+                    # 校正體積
+                    actual_volume = relative_volume * (pixel_to_cm_ratio ** 3)
+                    confidence = 0.85  # 有參考物時信心度較高
+                    error_range = 0.15  # ±15% 誤差
+                else:
+                    actual_volume = relative_volume * 0.1  # 預設校正係數
+                    confidence = 0.6
+                    error_range = 0.3
+            else:
+                # 無參考物，使用預設值
+                actual_volume = relative_volume * 0.1  # 預設校正係數
+                confidence = 0.5  # 無參考物時信心度較低
+                error_range = 0.4  # ±40% 誤差
+            
+            # 根據食物類型取得密度
+            density = FOOD_DENSITY_TABLE.get(food_type.lower(), FOOD_DENSITY_TABLE["default"])
+            
+            # 計算重量 (g)
+            weight = actual_volume * density
+            
+            return weight, confidence, error_range
+            
+        except Exception as e:
+            logger.error(f"體積重量計算失敗: {str(e)}")
+            return 150.0, 0.3, 0.5  # 預設值
+    
+    def get_food_density(self, food_name: str) -> float:
+        """根據食物名稱取得密度"""
+        food_name_lower = food_name.lower()
+        
+        # 簡單的關鍵字匹配
+        if any(keyword in food_name_lower for keyword in ["rice", "飯"]):
+            return FOOD_DENSITY_TABLE["rice"]
+        elif any(keyword in food_name_lower for keyword in ["noodle", "麵"]):
+            return FOOD_DENSITY_TABLE["noodles"]
+        elif any(keyword in food_name_lower for keyword in ["meat", "肉"]):
+            return FOOD_DENSITY_TABLE["meat"]
+        elif any(keyword in food_name_lower for keyword in ["vegetable", "菜"]):
+            return FOOD_DENSITY_TABLE["vegetables"]
+        else:
+            return FOOD_DENSITY_TABLE["default"]
+
+# 全域服務實例
+weight_service = WeightEstimationService()
+
+async def estimate_food_weight(image_bytes: bytes) -> Dict[str, Any]:
+    """
+    整合食物辨識、重量估算與營養分析的主函數
+    """
+    try:
+        # 將 bytes 轉換為 PIL Image
+        image = Image.open(io.BytesIO(image_bytes))
+        
+        # 1. 食物辨識（使用現有的 AI 服務）
+        from .ai_service import classify_food_image
+        food_name = classify_food_image(image_bytes)
+        
+        # 2. 偵測參考物
+        reference_object = weight_service.detect_reference_objects(image)
+        
+        # 3. 食物分割
+        food_mask = weight_service.segment_food(image)
+        
+        # 4. 深度估計
+        depth_map = weight_service.estimate_depth(image)
+        
+        # 5. 計算體積和重量
+        weight, confidence, error_range = weight_service.calculate_volume_and_weight(
+            food_mask, depth_map, food_name, reference_object
+        )
+        
+        # 6. 查詢營養資訊
+        from .nutrition_api_service import fetch_nutrition_data
+        nutrition_info = fetch_nutrition_data(food_name)
+        
+        if nutrition_info is None:
+            nutrition_info = {
+                "calories": 150,
+                "protein": 5,
+                "carbs": 25,
+                "fat": 3,
+                "fiber": 2
+            }
+        
+        # 7. 根據重量調整營養素
+        weight_ratio = weight / 100  # 假設營養資訊是每100g的數據
+        adjusted_nutrition = {
+            key: value * weight_ratio 
+            for key, value in nutrition_info.items()
+        }
+        
+        # 8. 計算誤差範圍
+        error_min = weight * (1 - error_range)
+        error_max = weight * (1 + error_range)
+        
+        # 9. 生成備註
+        if reference_object:
+            note = f"檢測到參考物：{reference_object['type']}，準確度較高"
+        else:
+            note = "未檢測到參考物，重量為估算值，僅供參考"
+        
+        return {
+            "food_type": food_name,
+            "estimated_weight": round(weight, 1),
+            "weight_confidence": round(confidence, 2),
+            "weight_error_range": [round(error_min, 1), round(error_max, 1)],
+            "nutrition": adjusted_nutrition,
+            "reference_object": reference_object["type"] if reference_object else None,
+            "note": note
+        }
+        
+    except Exception as e:
+        logger.error(f"重量估算失敗: {str(e)}")
+        # 回傳預設結果
+        return {
+            "food_type": "Unknown",
+            "estimated_weight": 150.0,
+            "weight_confidence": 0.3,
+            "weight_error_range": [100.0, 200.0],
+            "nutrition": {
+                "calories": 150,
+                "protein": 5,
+                "carbs": 25,
+                "fat": 3,
+                "fiber": 2
+            },
+            "reference_object": None,
+            "note": "分析失敗，顯示預設值"
+        } 

backend/.env

@@ -0,0 +1,13 @@
+# 資料庫設定
+DATABASE_URL=sqlite:///./data/health_assistant.db
+
+# Redis 設定
+REDIS_HOST=localhost
+REDIS_PORT=6379
+REDIS_DB=0
+
+# API 設定
+API_HOST=localhost
+API_PORT=8000
+
+USDA_API_KEY="0bZCszzPSbc5r6RXfm0aHKtWGX2V0SX1hLiMmXwi"

backend/requirements.txt

@@ -0,0 +1,8 @@
+fastapi
+uvicorn
+transformers
+torch
+pillow
+opencv-python
+python-multipart
+requests 

backend/setup.py

@@ -0,0 +1,47 @@
+import os
+import sys
+from pathlib import Path
+
+def setup_project():
+    """設置專案目錄結構和必要檔案"""
+    # 獲取專案根目錄
+    project_root = Path(__file__).parent
+    
+    # 創建必要的目錄
+    directories = [
+        'data',  # 資料庫目錄
+        'logs',  # 日誌目錄
+        'uploads'  # 上傳檔案目錄
+    ]
+    
+    for directory in directories:
+        dir_path = project_root / directory
+        dir_path.mkdir(exist_ok=True)
+        print(f"Created directory: {dir_path}")
+    
+    # 創建 .env 檔案（如果不存在）
+    env_file = project_root / '.env'
+    if not env_file.exists():
+        with open(env_file, 'w', encoding='utf-8') as f:
+            f.write("""# 資料庫設定
+DATABASE_URL=sqlite:///./data/health_assistant.db
+
+# Redis 設定
+REDIS_HOST=localhost
+REDIS_PORT=6379
+REDIS_DB=0
+
+# API 設定
+API_HOST=localhost
+API_PORT=8000
+""")
+        print(f"Created .env file: {env_file}")
+    
+    print("\nProject setup completed successfully!")
+    print("\nNext steps:")
+    print("1. Install required packages: pip install -r requirements.txt")
+    print("2. Start the Redis server")
+    print("3. Run the application: uvicorn app.main:app --reload")
+
+if __name__ == "__main__":
+    setup_project()

conftest.py

@@ -0,0 +1,7 @@
+import os
+import sys
+from pathlib import Path
+
+# Add the backend directory to the Python path
+sys.path.insert(0, str(Path(__file__).parent / "backend"))
+sys.path.insert(0, str(Path(__file__).parent))

coverage.ini

@@ -0,0 +1,22 @@
+[run]
+source = .
+omit =
+    */tests/*
+    */venv/*
+    */.venv/*
+    */env/*
+    */.env/*
+    */site-packages/*
+
+[report]
+exclude_lines =
+    pragma: no cover
+    def __repr__
+    if self\.debug
+    raise AssertionError
+    raise NotImplementedError
+    if 0:
+    if __name__ == .__main__.
+
+[html]
+directory = htmlcov

database.py

@@ -0,0 +1,28 @@
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+import os
+
+
+DB_DIR = "/tmp/data"
+os.makedirs(DB_DIR, exist_ok=True)
+
+SQLALCHEMY_DATABASE_URL = f"sqlite:///{os.path.join(DB_DIR, 'health_assistant.db')}"
+
+
+
+# 創建資料庫引擎
+engine = create_engine(
+    SQLALCHEMY_DATABASE_URL,
+    connect_args={"check_same_thread": False}
+)
+
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+Base = declarative_base()
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

deploy.ps1

@@ -0,0 +1,38 @@
+# 部署腳本 - 確保代碼推送到 GitHub 和 Hugging Face Spaces
+
+Write-Host "🚀 開始部署流程..." -ForegroundColor Green
+
+# 檢查是否有未提交的更改
+$status = git status --porcelain
+if ($status) {
+    Write-Host "📝 發現未提交的更改，正在添加..." -ForegroundColor Yellow
+    git add .
+    
+    Write-Host "💾 提交更改..." -ForegroundColor Yellow
+    $timestamp = Get-Date -Format "yyyy-MM-dd HH:mm:ss"
+    git commit -m "Auto-deploy: $timestamp"
+} else {
+    Write-Host "✅ 沒有未提交的更改" -ForegroundColor Green
+}
+
+# 推送到 GitHub
+Write-Host "📤 推送到 GitHub..." -ForegroundColor Yellow
+git push origin main
+
+if ($LASTEXITCODE -eq 0) {
+    Write-Host "✅ GitHub 推送成功！" -ForegroundColor Green
+    Write-Host ""
+    Write-Host "🔗 GitHub 倉庫: https://github.com/ting1234555/health_assistant" -ForegroundColor Cyan
+    Write-Host "🔗 Hugging Face Space: https://huggingface.co/spaces/yuting111222/health-assistant" -ForegroundColor Cyan
+    Write-Host ""
+    Write-Host "📋 下一步操作：" -ForegroundColor Yellow
+    Write-Host "1. 訪問 Hugging Face Spaces 設定頁面" -ForegroundColor White
+    Write-Host "2. 點擊 'Factory rebuild' 按鈕" -ForegroundColor White
+    Write-Host "3. 等待重建完成（1-5分鐘）" -ForegroundColor White
+    Write-Host "4. 檢查 /docs 頁面確認 API 端點" -ForegroundColor White
+    Write-Host ""
+    Write-Host "🎯 部署完成！" -ForegroundColor Green
+} else {
+    Write-Host "❌ GitHub 推送失敗！" -ForegroundColor Red
+    exit 1
+} 

deploy.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+
+# 部署腳本 - 確保代碼推送到 GitHub 和 Hugging Face Spaces
+
+echo "🚀 開始部署流程..."
+
+# 檢查是否有未提交的更改
+if [ -n "$(git status --porcelain)" ]; then
+    echo "📝 發現未提交的更改，正在添加..."
+    git add .
+    
+    echo "💾 提交更改..."
+    git commit -m "Auto-deploy: $(date)"
+else
+    echo "✅ 沒有未提交的更改"
+fi
+
+# 推送到 GitHub
+echo "📤 推送到 GitHub..."
+git push origin main
+
+if [ $? -eq 0 ]; then
+    echo "✅ GitHub 推送成功！"
+    echo ""
+    echo "🔗 GitHub 倉庫: https://github.com/ting1234555/health_assistant"
+    echo "🔗 Hugging Face Space: https://huggingface.co/spaces/yuting111222/health-assistant"
+    echo ""
+    echo "📋 下一步操作："
+    echo "1. 訪問 Hugging Face Spaces 設定頁面"
+    echo "2. 點擊 'Factory rebuild' 按鈕"
+    echo "3. 等待重建完成（1-5分鐘）"
+    echo "4. 檢查 /docs 頁面確認 API 端點"
+    echo ""
+    echo "🎯 部署完成！"
+else
+    echo "❌ GitHub 推送失敗！"
+    exit 1
+fi 

env_example.txt

@@ -0,0 +1,8 @@
+# USDA API Key for nutrition data (get from https://fdc.nal.usda.gov/api-key-signup.html)
+USDA_API_KEY=your_usda_api_key_here
+
+# Database configuration (optional, defaults to SQLite)
+DATABASE_URL=sqlite:///tmp/data/health_assistant.db
+
+# Hugging Face Spaces configuration
+HF_SPACE_ID=your_space_id 

food_analyzer.py

@@ -0,0 +1,339 @@
+from fastapi import FastAPI, UploadFile, File, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from PIL import Image
+import io
+import base64
+from transformers import pipeline
+import requests
+import json
+from typing import Dict, Any
+from pydantic import BaseModel
+import uvicorn
+
+app = FastAPI(title="Health Assistant AI - Food Recognition API")
+
+# CORS設定
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # 生產環境請設定具體的域名
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 初始化Hugging Face模型
+try:
+    # 使用nateraw/food專門的食物分類模型
+    food_classifier = pipeline(
+        "image-classification",
+        model="nateraw/food",
+        device=-1  # 使用CPU，如果有GPU可以設為0
+    )
+    print("nateraw/food 食物辨識模型載入成功")
+except Exception as e:
+    print(f"模型載入失敗: {e}")
+    food_classifier = None
+
+# 食物營養資料庫（擴展版，涵蓋nateraw/food模型常見的食物類型）
+NUTRITION_DATABASE = {
+    # 水果類
+    "apple": {"name": "蘋果", "calories_per_100g": 52, "protein": 0.3, "carbs": 14, "fat": 0.2, "fiber": 2.4, "sugar": 10.4, "vitamin_c": 4.6},
+    "banana": {"name": "香蕉", "calories_per_100g": 89, "protein": 1.1, "carbs": 23, "fat": 0.3, "fiber": 2.6, "sugar": 12.2, "potassium": 358},
+    "orange": {"name": "橘子", "calories_per_100g": 47, "protein": 0.9, "carbs": 12, "fat": 0.1, "fiber": 2.4, "sugar": 9.4, "vitamin_c": 53.2},
+    "strawberry": {"name": "草莓", "calories_per_100g": 32, "protein": 0.7, "carbs": 7.7, "fat": 0.3, "fiber": 2, "sugar": 4.9, "vitamin_c": 58.8},
+    "grape": {"name": "葡萄", "calories_per_100g": 62, "protein": 0.6, "carbs": 16.8, "fat": 0.2, "fiber": 0.9, "sugar": 16.1},
+    
+    # 主食類
+    "bread": {"name": "麵包", "calories_per_100g": 265, "protein": 9, "carbs": 49, "fat": 3.2, "fiber": 2.7, "sodium": 491},
+    "rice": {"name": "米飯", "calories_per_100g": 130, "protein": 2.7, "carbs": 28, "fat": 0.3, "fiber": 0.4},
+    "pasta": {"name": "義大利麵", "calories_per_100g": 131, "protein": 5, "carbs": 25, "fat": 1.1, "fiber": 1.8},
+    "noodles": {"name": "麵條", "calories_per_100g": 138, "protein": 4.5, "carbs": 25, "fat": 2.2, "fiber": 1.2},
+    "pizza": {"name": "披薩", "calories_per_100g": 266, "protein": 11, "carbs": 33, "fat": 10, "sodium": 598},
+    
+    # 肉類
+    "chicken": {"name": "雞肉", "calories_per_100g": 165, "protein": 31, "carbs": 0, "fat": 3.6, "iron": 0.9},
+    "beef": {"name": "牛肉", "calories_per_100g": 250, "protein": 26, "carbs": 0, "fat": 15, "iron": 2.6, "zinc": 4.8},
+    "pork": {"name": "豬肉", "calories_per_100g": 242, "protein": 27, "carbs": 0, "fat": 14, "thiamine": 0.7},
+    "fish": {"name": "魚肉", "calories_per_100g": 206, "protein": 22, "carbs": 0, "fat": 12, "omega_3": "豐富"},
+    
+    # 蔬菜類
+    "broccoli": {"name": "花椰菜", "calories_per_100g": 34, "protein": 2.8, "carbs": 7, "fat": 0.4, "fiber": 2.6, "vitamin_c": 89.2},
+    "carrot": {"name": "胡蘿蔔", "calories_per_100g": 41, "protein": 0.9, "carbs": 10, "fat": 0.2, "fiber": 2.8, "vitamin_a": 835},
+    "tomato": {"name": "番茄", "calories_per_100g": 18, "protein": 0.9, "carbs": 3.9, "fat": 0.2, "fiber": 1.2, "vitamin_c": 13.7},
+    "lettuce": {"name": "萵苣", "calories_per_100g": 15, "protein": 1.4, "carbs": 2.9, "fat": 0.2, "fiber": 1.3, "folate": 38},
+    
+    # 飲品類
+    "coffee": {"name": "咖啡", "calories_per_100g": 2, "protein": 0.3, "carbs": 0, "fat": 0, "caffeine": 95},
+    "tea": {"name": "茶", "calories_per_100g": 1, "protein": 0, "carbs": 0.3, "fat": 0, "antioxidants": "豐富"},
+    "milk": {"name": "牛奶", "calories_per_100g": 42, "protein": 3.4, "carbs": 5, "fat": 1, "calcium": 113},
+    "juice": {"name": "果汁", "calories_per_100g": 45, "protein": 0.7, "carbs": 11, "fat": 0.2, "vitamin_c": "因果汁種類而異"},
+    
+    # 甜點類
+    "cake": {"name": "蛋糕", "calories_per_100g": 257, "protein": 4, "carbs": 46, "fat": 6, "sugar": 35},
+    "cookie": {"name": "餅乾", "calories_per_100g": 502, "protein": 5.9, "carbs": 64, "fat": 25, "sugar": 39},
+    "ice_cream": {"name": "冰淇淋", "calories_per_100g": 207, "protein": 3.5, "carbs": 24, "fat": 11, "sugar": 21},
+    "chocolate": {"name": "巧克力", "calories_per_100g": 546, "protein": 4.9, "carbs": 61, "fat": 31, "sugar": 48},
+    
+    # 其他常見食物
+    "egg": {"name": "雞蛋", "calories_per_100g": 155, "protein": 13, "carbs": 1.1, "fat": 11, "choline": 294},
+    "cheese": {"name": "起司", "calories_per_100g": 113, "protein": 7, "carbs": 1, "fat": 9, "calcium": 200},
+    "yogurt": {"name": "優格", "calories_per_100g": 59, "protein": 10, "carbs": 3.6, "fat": 0.4, "probiotics": "豐富"},
+    "nuts": {"name": "堅果", "calories_per_100g": 607, "protein": 15, "carbs": 7, "fat": 54, "vitamin_e": 26},
+    "salad": {"name": "沙拉", "calories_per_100g": 20, "protein": 1.5, "carbs": 4, "fat": 0.2, "fiber": 2, "vitamins": "多種維生素"}
+}
+
+# 回應模型
+class FoodAnalysisResponse(BaseModel):
+    success: bool
+    food_name: str
+    confidence: float
+    nutrition_info: Dict[str, Any]
+    ai_suggestions: list
+    message: str
+
+class HealthResponse(BaseModel):
+    status: str
+    message: str
+
+def get_nutrition_info(food_name: str) -> Dict[str, Any]:
+    """根據食物名稱獲取營養資訊"""
+    # 將食物名稱轉為小寫並清理
+    food_key = food_name.lower().strip()
+    
+    # 移除常見的修飾詞和格式化字符
+    food_key = food_key.replace("_", " ").replace("-", " ")
+    
+    # 直接匹配
+    if food_key in NUTRITION_DATABASE:
+        return NUTRITION_DATABASE[food_key]
+    
+    # 模糊匹配 - 檢查是否包含關鍵字
+    for key, value in NUTRITION_DATABASE.items():
+        if key in food_key or food_key in key:
+            return value
+        # 也檢查中文名稱
+        if value["name"] in food_name:
+            return value
+    
+    # 更智能的匹配 - 處理複合詞
+    food_words = food_key.split()
+    for word in food_words:
+        for key, value in NUTRITION_DATABASE.items():
+            if word == key or word in key:
+                return value
+    
+    # 特殊情況處理
+    special_mappings = {
+        "french fries": "potato",
+        "hamburger": "beef",
+        "sandwich": "bread", 
+        "soda": "juice",
+        "water": {"name": "水", "calories_per_100g": 0, "protein": 0, "carbs": 0, "fat": 0},
+        "soup": {"name": "湯", "calories_per_100g": 50, "protein": 2, "carbs": 8, "fat": 1, "sodium": 400}
+    }
+    
+    for special_key, mapping in special_mappings.items():
+        if special_key in food_key:
+            if isinstance(mapping, str):
+                return NUTRITION_DATABASE.get(mapping, {"name": food_name, "message": "營養資料不完整"})
+            else:
+                return mapping
+    
+    # 如果沒有找到，返回預設值
+    return {
+        "name": food_name,
+        "calories_per_100g": "未知",
+        "protein": "未知",
+        "carbs": "未知", 
+        "fat": "未知",
+        "message": f"抱歉，暫時沒有「{food_name}」的詳細營養資料，建議查詢專業營養資料庫"
+    }
+
+def generate_ai_suggestions(food_name: str, nutrition_info: Dict) -> list:
+    """根據食物和營養資訊生成AI建議"""
+    suggestions = []
+    food_name_lower = food_name.lower()
+    
+    # 檢查是否有完整的營養資訊
+    if isinstance(nutrition_info.get("calories_per_100g"), (int, float)):
+        calories = nutrition_info["calories_per_100g"]
+        
+        # 熱量相關建議
+        if calories > 400:
+            suggestions.append("⚠️ 這是高熱量食物，建議控制份量，搭配運動")
+        elif calories > 200:
+            suggestions.append("🍽️ 中等熱量食物，適量食用，建議搭配蔬菜")
+        elif calories < 50:
+            suggestions.append("✅ 低熱量食物，適合減重期間食用")
+        
+        # 營養素相關建議
+        protein = nutrition_info.get("protein", 0)
+        if isinstance(protein, (int, float)) and protein > 20:
+            suggestions.append("💪 高蛋白食物，有助於肌肉發展和修復")
+        
+        fiber = nutrition_info.get("fiber", 0)
+        if isinstance(fiber, (int, float)) and fiber > 3:
+            suggestions.append("🌿 富含纖維，有助於消化健康和增加飽足感")
+        
+        sugar = nutrition_info.get("sugar", 0)
+        if isinstance(sugar, (int, float)) and sugar > 20:
+            suggestions.append("🍯 含糖量較高，建議適量食用，避免血糖快速上升")
+        
+        # 特殊營養素
+        if nutrition_info.get("vitamin_c", 0) > 30:
+            suggestions.append("🍊 富含維生素C，有助於增強免疫力和抗氧化")
+        
+        if nutrition_info.get("calcium", 0) > 100:
+            suggestions.append("🦴 富含鈣質，有助於骨骼和牙齒健康")
+        
+        if nutrition_info.get("omega_3"):
+            suggestions.append("🐟 含有Omega-3脂肪酸，對心血管健康有益")
+    
+    # 根據食物類型給出特定建議
+    if any(fruit in food_name_lower for fruit in ["apple", "banana", "orange", "strawberry", "grape"]):
+        suggestions.append("🍎 建議在餐前或運動前食用，提供天然糖分和維生素")
+    
+    elif any(meat in food_name_lower for meat in ["chicken", "beef", "pork", "fish"]):
+        suggestions.append("🥩 建議搭配蔬菜食用，選擇健康的烹調方式（烤、蒸、煮）")
+    
+    elif any(sweet in food_name_lower for sweet in ["cake", "cookie", "ice_cream", "chocolate"]):
+        suggestions.append("🍰 甜點建議偶爾享用，可在運動後適量食用")
+        suggestions.append("💡 可以考慮與朋友分享，減少單次攝取量")
+    
+    elif any(drink in food_name_lower for drink in ["coffee", "tea"]):
+        suggestions.append("☕ 建議控制咖啡因攝取量，避免影響睡眠")
+    
+    elif "salad" in food_name_lower:
+        suggestions.append("🥗 很棒的選擇！可以添加堅果或橄欖油增加健康脂肪")
+    
+    # 通用健康建議
+    if not suggestions:
+        suggestions.extend([
+            "🍽️ 建議均衡飲食，搭配多樣化的食物",
+            "💧 記得多喝水，保持身體水分充足",
+            "🏃‍♂️ 搭配適量運動，維持健康生活型態"
+        ])
+    else:
+        # 添加一些通用的健康提醒
+        suggestions.append("💧 記得多喝水，幫助營養吸收")
+        if len(suggestions) < 4:
+            suggestions.append("⚖️ 注意食物份量，適量攝取是健康飲食的關鍵")
+    
+    return suggestions[:5]  # 限制建議數量，避免過多
+
+@app.get("/", response_model=HealthResponse)
+async def root():
+    """API根路径"""
+    return HealthResponse(
+        status="success",
+        message="Health Assistant AI - Food Recognition API is running!"
+    )
+
+@app.get("/health", response_model=HealthResponse)
+async def health_check():
+    """健康檢查端點"""
+    model_status = "正常" if food_classifier else "模型載入失敗"
+    return HealthResponse(
+        status="success",
+        message=f"API運行正常，模型狀態: {model_status}"
+    )
+
+@app.post("/analyze-food", response_model=FoodAnalysisResponse)
+async def analyze_food(file: UploadFile = File(...)):
+    """分析上傳的食物圖片"""
+    try:
+        # 檢查模型是否載入成功
+        if not food_classifier:
+            raise HTTPException(status_code=500, detail="AI模型尚未載入，請稍後再試")
+        
+        # 檢查文件類型
+        if not file.content_type.startswith("image/"):
+            raise HTTPException(status_code=400, detail="請上傳圖片文件")
+        
+        # 讀取圖片
+        image_data = await file.read()
+        image = Image.open(io.BytesIO(image_data))
+        
+        # 確保圖片是RGB格式
+        if image.mode != "RGB":
+            image = image.convert("RGB")
+        
+        # 使用AI模型進行食物辨識
+        results = food_classifier(image)
+        
+        # 獲取最高信心度的結果
+        top_result = results[0]
+        food_name = top_result["label"]
+        confidence = top_result["score"]
+        
+        # 獲取營養資訊
+        nutrition_info = get_nutrition_info(food_name)
+        
+        # 生成AI建議
+        ai_suggestions = generate_ai_suggestions(food_name, nutrition_info)
+        
+        return FoodAnalysisResponse(
+            success=True,
+            food_name=food_name,
+            confidence=round(confidence * 100, 2),
+            nutrition_info=nutrition_info,
+            ai_suggestions=ai_suggestions,
+            message="食物分析完成"
+        )
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"分析失敗: {str(e)}")
+
+@app.post("/analyze-food-base64", response_model=FoodAnalysisResponse)
+async def analyze_food_base64(image_data: dict):
+    """分析base64編碼的食物圖片"""
+    try:
+        # 檢查模型是否載入成功
+        if not food_classifier:
+            raise HTTPException(status_code=500, detail="AI模型尚未載入，請稍後再試")
+        
+        # 解碼base64圖片
+        base64_string = image_data.get("image", "")
+        if not base64_string:
+            raise HTTPException(status_code=400, detail="缺少圖片資料")
+        
+        # 移除base64前綴（如果有的話）
+        if "," in base64_string:
+            base64_string = base64_string.split(",")[1]
+        
+        # 解碼圖片
+        image_bytes = base64.b64decode(base64_string)
+        image = Image.open(io.BytesIO(image_bytes))
+        
+        # 確保圖片是RGB格式
+        if image.mode != "RGB":
+            image = image.convert("RGB")
+        
+        # 使用AI模型進行食物辨識
+        results = food_classifier(image)
+        
+        # 獲取最高信心度的結果
+        top_result = results[0]
+        food_name = top_result["label"]
+        confidence = top_result["score"]
+        
+        # 獲取營養資訊
+        nutrition_info = get_nutrition_info(food_name)
+        
+        # 生成AI建議
+        ai_suggestions = generate_ai_suggestions(food_name, nutrition_info)
+        
+        return FoodAnalysisResponse(
+            success=True,
+            food_name=food_name,
+            confidence=round(confidence * 100, 2),
+            nutrition_info=nutrition_info,
+            ai_suggestions=ai_suggestions,
+            message="食物分析完成"
+        )
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"分析失敗: {str(e)}")
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=8000)

frontend/ai_food_analyzer.html

@@ -0,0 +1,1679 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI食物營養分析器 - 個人化版本</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        /* 全局樣式 */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        /* 追蹤紀錄專用樣式 */
+        .tracking-container {
+            padding: 1.5rem;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        /* 統計卡片網格 */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .stat-card {
+            background: white;
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            display: flex;
+            align-items: center;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .stat-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+        }
+
+        .stat-icon {
+            font-size: 2rem;
+            margin-right: 1rem;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #f5f7fa;
+        }
+
+        .stat-info {
+            flex: 1;
+        }
+
+        .stat-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #2c3e50;
+            margin-bottom: 0.25rem;
+        }
+
+        .stat-label {
+            font-size: 0.875rem;
+            color: #7f8c8d;
+        }
+
+        /* 圖表卡片 */
+        .chart-card {
+            background: white;
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+
+        .chart-card.full-width {
+            grid-column: 1 / -1;
+        }
+
+        .chart-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .chart-header h3 {
+            font-size: 1.25rem;
+            color: #2c3e50;
+            margin: 0;
+        }
+
+        /* 進度條樣式 */
+        .progress-bars {
+            display: grid;
+            gap: 1.25rem;
+        }
+
+        .progress-item {
+            margin-bottom: 1rem;
+        }
+
+        .progress-header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.5rem;
+            font-size: 0.875rem;
+        }
+
+        .progress-label {
+            font-weight: 600;
+            color: #2c3e50;
+        }
+
+        .progress-value {
+            color: #7f8c8d;
+        }
+
+        .progress-bar-container {
+            height: 8px;
+            background: #f0f2f5;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .progress-bar-fill {
+            height: 100%;
+            border-radius: 4px;
+            transition: width 0.5s ease;
+        }
+
+        /* 食物記錄 */
+        .meals-card {
+            background: white;
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+
+        .meals-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .meals-header h3 {
+            margin: 0;
+            font-size: 1.25rem;
+            color: #2c3e50;
+        }
+
+        .btn-small {
+            background: #3498db;
+            color: white;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 6px;
+            font-size: 0.875rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .btn-small:hover {
+            background: #2980b9;
+        }
+
+        .meals-list {
+            display: grid;
+            gap: 1rem;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 3rem 1rem;
+            color: #7f8c8d;
+        }
+
+        .empty-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            opacity: 0.7;
+        }
+
+        .empty-state p {
+            margin: 0.5rem 0;
+        }
+
+        .text-muted {
+            color: #bdc3c7;
+            font-size: 0.875rem;
+        }
+
+        /* 主體樣式 */
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 1rem;
+        }
+        
+        .app-container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+            max-width: 500px;
+            width: 100%;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+        
+        .header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        
+        .title {
+            color: #333;
+            font-size: 1.8rem;
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+        }
+        
+        .subtitle {
+            color: #666;
+            font-size: 0.9rem;
+        }
+        
+        .tab-nav {
+            display: flex;
+            background: rgba(102, 126, 234, 0.1);
+            border-radius: 15px;
+            margin-bottom: 2rem;
+            padding: 0.3rem;
+        }
+        
+        .tab-btn {
+            flex: 1;
+            padding: 0.8rem;
+            border: none;
+            background: transparent;
+            border-radius: 12px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s;
+            color: #666;
+        }
+        
+        .tab-btn.active {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+        }
+        
+        .tab-content {
+            display: none;
+        }
+        
+        .tab-content.active {
+            display: block;
+        }
+        
+        /* 個人資料表單 */
+        .profile-form {
+            display: grid;
+            gap: 1.5rem;
+        }
+        
+        .input-group {
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .input-group label {
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+        }
+        
+        .input-group input, .input-group select {
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
+            font-size: 1rem;
+            transition: border-color 0.3s;
+        }
+        
+        .input-group input:focus, .input-group select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        
+        .input-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+        
+        .save-profile-btn {
+            background: linear-gradient(45deg, #43cea2, #185a9d);
+            color: white;
+            border: none;
+            padding: 15px;
+            border-radius: 15px;
+            font-weight: bold;
+            cursor: pointer;
+            font-size: 1rem;
+            transition: transform 0.2s;
+        }
+        
+        .save-profile-btn:hover {
+            transform: translateY(-2px);
+        }
+        
+        /* 食物分析區域 */
+        .camera-container {
+            position: relative;
+            margin-bottom: 1.5rem;
+            text-align: center;
+        }
+        
+        #video {
+            width: 100%;
+            max-width: 300px;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            background-color: #000;
+        }
+        
+        #canvas {
+            display: none;
+        }
+        
+        .controls {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            margin: 1.5rem 0;
+            flex-wrap: wrap;
+        }
+        
+        button {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-weight: bold;
+            transition: transform 0.2s;
+            font-size: 0.9rem;
+        }
+        
+        button:hover {
+            transform: translateY(-2px);
+        }
+        
+        button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        
+        .upload-btn {
+            background: linear-gradient(45deg, #43cea2, #185a9d);
+        }
+        
+        .file-input {
+            display: none;
+        }
+        
+        .loading {
+            display: none;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin: 1rem 0;
+            text-align: center;
+        }
+        
+        .spinner {
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .result {
+            margin-top: 2rem;
+            padding: 1.5rem;
+            background: rgba(102, 126, 234, 0.1);
+            border-radius: 15px;
+            display: none;
+        }
+        
+        .food-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+        
+        .food-name {
+            font-size: 1.3rem;
+            font-weight: bold;
+            color: #333;
+        }
+        
+        .add-to-diary {
+            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 0.8rem;
+        }
+        
+        .nutrition-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 0.8rem;
+            margin-bottom: 1.5rem;
+        }
+        
+        .nutrition-item {
+            background: white;
+            padding: 0.8rem;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+        
+        .nutrition-label {
+            font-size: 0.9rem;
+            color: #666;
+            margin-bottom: 0.3rem;
+        }
+        
+        .nutrition-value {
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #333;
+        }
+        
+        .daily-recommendation {
+            background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(238, 90, 36, 0.1));
+            padding: 1rem;
+            border-radius: 10px;
+            border-left: 4px solid #ff6b6b;
+            margin-top: 1.5rem;
+        }
+        
+        .recommendation-title {
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 0.5rem;
+            font-size: 0.9rem;
+        }
+        
+        .recommendation-text {
+            font-size: 0.8rem;
+            color: #666;
+            line-height: 1.4;
+        }
+        
+        /* 健康指數樣式 */
+        .health-indices {
+            display: flex;
+            gap: 1rem;
+            margin: 1rem 0 1.5rem;
+        }
+        
+        .health-index {
+            flex: 1;
+            background: white;
+            padding: 0.8rem;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        .index-label {
+            font-size: 0.8rem;
+            color: #666;
+            margin-bottom: 0.5rem;
+        }
+        
+        .index-meter {
+            height: 6px;
+            background: #f0f0f0;
+            border-radius: 3px;
+            margin-bottom: 0.5rem;
+            overflow: hidden;
+        }
+        
+        .meter-fill {
+            height: 100%;
+            width: 0%;
+            border-radius: 3px;
+            transition: width 0.5s ease;
+        }
+        
+        #healthIndexFill {
+            background: linear-gradient(45deg, #43cea2, #185a9d);
+        }
+        
+        #glycemicIndexFill {
+            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
+        }
+        
+        .index-value {
+            font-size: 0.8rem;
+            font-weight: bold;
+            color: #333;
+            text-align: right;
+        }
+        
+        .food-description {
+            background: rgba(102, 126, 234, 0.1);
+            padding: 1rem;
+            border-radius: 10px;
+            font-size: 0.9rem;
+            color: #555;
+            line-height: 1.5;
+            margin-bottom: 1rem;
+        }
+        
+        .benefits-tags {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin-bottom: 1.5rem;
+        }
+        
+        .benefit-tag {
+            background: rgba(67, 206, 162, 0.1);
+            color: #43cea2;
+            padding: 0.3rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 500;
+            display: inline-block;
+        }
+        
+        .nutrition-section-title {
+            color: #333;
+            font-size: 1rem;
+            margin: 1.5rem 0 0.8rem;
+        }
+        
+        .nutrition-details {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 1rem;
+            margin-top: 1.5rem;
+        }
+        
+        .nutrition-section {
+            background: white;
+            padding: 1rem;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        /* 統計卡片樣式修正 */
+        .water-card {
+            background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
+        }
+        
+        .water-card .stat-number {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        
+        .water-controls {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+            justify-content: center;
+        }
+        
+        .water-btn {
+            background: rgba(255, 255, 255, 0.7);
+            border: none;
+            border-radius: 5px;
+            padding: 3px 8px;
+            font-size: 0.75rem;
+            color: #0288d1;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .water-btn:hover {
+            background: #0288d1;
+            color: white;
+        }
+        
+        .stat-number {
+            font-size: 2rem;
+            font-weight: bold;
+            color: #667eea;
+            margin-bottom: 0.5rem;
+        }
+        
+        /* 圖表容器 */
+        .chart-container {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+        }
+        
+        .chart-tabs {
+            display: flex;
+            background: #f5f5f5;
+            border-radius: 20px;
+            padding: 0.3rem;
+        }
+        
+        .chart-tab {
+            background: transparent;
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 15px;
+            font-size: 0.8rem;
+            color: #666;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        
+        .chart-tab.active {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+        }
+        
+        .chart-view {
+            display: none;
+            height: 250px;
+        }
+        
+        .chart-view.active {
+            display: block;
+        }
+        
+        /* 目標達成進度樣式 */
+        .goals-container {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+        }
+        
+            .goal-items {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.2rem;
+        }
+        
+        .goal-item {
+            background: #f8f9fa;
+            padding: 1rem;
+            border-radius: 10px;
+        }
+        
+        .goal-info {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.8rem;
+        }
+        
+        .goal-label {
+            font-weight: 500;
+            color: #333;
+        }
+        
+        .goal-value {
+            color: #666;
+            font-size: 0.9rem;
+        }
+        
+        .goal-progress {
+            height: 8px;
+            background: #e9ecef;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        
+        .progress-bar {
+            height: 100%;
+            width: 0%;
+            border-radius: 4px;
+            transition: width 0.5s ease;
+        }
+        
+        #caloriesProgressBar {
+            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
+        }
+        
+        #proteinProgressBar {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+        }
+        
+        #waterProgressBar {
+            background: linear-gradient(45deg, #4facfe, #00f2fe);
+        }
+        
+        #fiberProgressBar {
+            background: linear-gradient(45deg, #43cea2, #185a9d);
+        }
+        
+        .today-meals {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .meal-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .meal-item:last-child {
+            border-bottom: none;
+        }
+        
+        .meal-info h4 {
+            color: #333;
+            margin-bottom: 0.3rem;
+        }
+        
+        .meal-info span {
+            color: #666;
+            font-size: 0.8rem;
+        }
+        
+        .meal-calories {
+            font-weight: bold;
+            color: #667eea;
+        }
+        
+        .welcome-message {
+            background: linear-gradient(45deg, rgba(67, 206, 162, 0.1), rgba(24, 90, 157, 0.1));
+            padding: 1rem;
+            border-radius: 10px;
+            margin-bottom: 2rem;
+            border-left: 4px solid #43cea2;
+        }
+        
+        .no-profile {
+            text-align: center;
+            color: #666;
+            padding: 2rem;
+        }
+        
+        /* 每日總結樣式 */
+        .daily-summary {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            margin-bottom: 2rem;
+        }
+        
+        .daily-summary h3 {
+            color: #333;
+            margin-bottom: 1.2rem;
+            font-size: 1.2rem;
+        }
+        
+        .nutrition-balance {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1.5rem;
+            padding-bottom: 1.5rem;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .balance-chart {
+            flex: 0 0 150px;
+        }
+        
+        .balance-stats {
+            flex: 1;
+            padding-left: 1.5rem;
+        }
+        
+        .balance-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.8rem;
+        }
+        
+        .balance-label {
+            flex: 1;
+            color: #666;
+            font-size: 0.9rem;
+        }
+        
+        .balance-value {
+            font-weight: bold;
+            color: #333;
+            margin-right: 1rem;
+        }
+        
+        .balance-percent {
+            background: #f0f0f0;
+            padding: 0.2rem 0.5rem;
+            border-radius: 10px;
+            font-size: 0.8rem;
+            color: #666;
+            min-width: 45px;
+            text-align: center;
+        }
+        
+        .nutrition-score {
+            display: flex;
+            align-items: center;
+        }
+        
+        .score-circle {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 1.5rem;
+            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
+        }
+        
+        .score-number {
+            color: white;
+            font-size: 2rem;
+            font-weight: bold;
+        }
+        
+        .score-details {
+            flex: 1;
+        }
+        
+        .score-details h4 {
+            color: #333;
+            margin-bottom: 0.3rem;
+            font-size: 1.1rem;
+        }
+        
+        .score-details p {
+            color: #666;
+            font-size: 0.85rem;
+            line-height: 1.4;
+        }
+        
+        .summary-icon {
+            font-size: 1.5rem;
+            margin-right: 0.5rem;
+        }
+        
+        .summary-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+        
+        .summary-title {
+            font-size: 1rem;
+            color: #333;
+            margin-bottom: 0.2rem;
+        }
+        
+        .summary-value {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #667eea;
+        }
+        
+        .water-input {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        
+        /* 響應式設計 */
+        @media (max-width: 768px) {
+            .chart-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+
+            .meals-header {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 1rem;
+            }
+
+            .btn-small {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .nutrition-balance {
+                flex-direction: column;
+                text-align: center;
+            }
+            .nutrition-details {
+                grid-template-columns: 1fr;
+            }
+
+            .balance-stats {
+                padding-left: 0;
+                padding-top: 1rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .tracking-container {
+                padding: 1rem;
+            }
+
+            .chart-card, .meals-card, .goals-container {
+                padding: 1rem;
+            }
+
+            .nutrition-details {
+                grid-template-columns: 1fr;
+            }
+
+            .goal-items {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <div class="header">
+            <h1 class="title">🍎 AI食物營養分析器</h1>
+            <p class="subtitle">智能分析您的飲食營養</p>
+        </div>
+        
+        <div class="tab-nav">
+            <button class="tab-btn active" data-tab="analyzer" onclick="switchTab('analyzer')">分析食物</button>
+            <button class="tab-btn" data-tab="profile" onclick="switchTab('profile')">個人資料</button>
+            <button class="tab-btn" data-tab="tracking" onclick="switchTab('tracking')">營養追蹤</button>
+        </div>
+
+        <!-- 食物分析頁面 -->
+        <div id="analyzer" class="tab-content active">
+             <div id="profileCheck" class="no-profile" style="display: none;">
+                <p>請先到「個人資料」頁面完成設定，以獲得個人化營養建議和追蹤功能 👆</p>
+            </div>
+            <div id="analyzerContent">
+                <div class="camera-container">
+                    <video id="video" autoplay playsinline></video>
+                    <canvas id="canvas"></canvas>
+                </div>
+
+                <div class="controls">
+                    <button onclick="startCamera()">📷 開啟相機</button>
+                    <button onclick="capturePhoto()">📸 拍照分析</button>
+                    <button class="upload-btn" onclick="document.getElementById('fileInput').click()">📁 上傳圖片</button>
+                    <input type="file" id="fileInput" class="file-input" accept="image/*" onchange="handleFileUpload(event)">
+                </div>
+
+                <div class="loading" id="loading">
+                    <div class="spinner"></div>
+                    <p>AI正在分析食物中...</p>
+                </div>
+
+                <div class="result" id="result">
+                    <div class="food-info">
+                        <h3 class="food-name" id="foodName">識別的食物</h3>
+                        <button class="add-to-diary" onclick="addToFoodDiary()">加入飲食記錄</button>
+                    </div>
+
+                    <div class="health-indices">
+                        <div class="health-index">
+                            <div class="index-label">健康指數</div>
+                            <div class="index-meter">
+                                <div class="meter-fill" id="healthIndexFill"></div>
+                            </div>
+                            <div class="index-value" id="healthIndexValue">--/100</div>
+                        </div>
+                        <div class="health-index">
+                            <div class="index-label">升糖指數</div>
+                            <div class="index-meter">
+                                <div class="meter-fill" id="glycemicIndexFill"></div>
+                            </div>
+                            <div class="index-value" id="glycemicIndexValue">--/100</div>
+                        </div>
+                    </div>
+
+                    <p class="food-description" id="foodDescription">這裡會顯示食物的詳細描述和營養價值。</p>
+
+                    <div class="benefits-tags" id="benefitsTags"></div>
+
+                    <div class="nutrition-details">
+                        <div class="nutrition-section">
+                            <h4 class="nutrition-section-title">基本營養素</h4>
+                            <div class="nutrition-grid" id="nutritionGrid"></div>
+                        </div>
+                        <div class="nutrition-section">
+                            <h4 class="nutrition-section-title">維生素</h4>
+                            <div class="nutrition-grid" id="vitaminsGrid"></div>
+                        </div>
+                        <div class="nutrition-section">
+                            <h4 class="nutrition-section-title">礦物質</h4>
+                            <div class="nutrition-grid" id="mineralsGrid"></div>
+                        </div>
+                    </div>
+
+                    <div class="daily-recommendation" id="recommendation"></div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 個人資料頁面 -->
+        <div id="profile" class="tab-content">
+            <div class="profile-form">
+                <div class="input-group">
+                    <label for="userName">姓名</label>
+                    <input type="text" id="userName" placeholder="請輸入您的姓名">
+                </div>
+                
+                <div class="input-row">
+                    <div class="input-group">
+                        <label for="userAge">年齡</label>
+                        <input type="number" id="userAge" placeholder="歲" min="1" max="120">
+                    </div>
+                    <div class="input-group">
+                        <label for="userGender">性別</label>
+                        <select id="userGender">
+                            <option value="">請選擇</option>
+                            <option value="male">男性</option>
+                            <option value="female">女性</option>
+                        </select>
+                    </div>
+                </div>
+                
+                <div class="input-row">
+                    <div class="input-group">
+                        <label for="userHeight">身高 (cm)</label>
+                        <input type="number" id="userHeight" placeholder="公分" min="100" max="250">
+                    </div>
+                    <div class="input-group">
+                        <label for="userWeight">體重 (kg)</label>
+                        <input type="number" id="userWeight" placeholder="公斤" min="30" max="200">
+                    </div>
+                </div>
+                
+                <div class="input-group">
+                    <label for="activityLevel">活動量</label>
+                    <select id="activityLevel">
+                        <option value="sedentary">久坐少動 (辦公室工作)</option>
+                        <option value="light">輕度活動 (每週運動1-3次)</option>
+                        <option value="moderate">中度活動 (每週運動3-5次)</option>
+                        <option value="active">高度活動 (每週運動6-7次)</option>
+                        <option value="extra">超高活動 (體力勞動+運動)</option>
+                    </select>
+                </div>
+                
+                <div class="input-group">
+                    <label for="healthGoal">健康目標</label>
+                    <select id="healthGoal">
+                        <option value="lose">減重</option>
+                        <option value="maintain">維持體重</option>
+                        <option value="gain">增重</option>
+                        <option value="muscle">增肌</option>
+                        <option value="health">保持健康</option>
+                    </select>
+                </div>
+                
+                <button class="save-profile-btn" onclick="saveUserProfile()">💾 儲存資料</button>
+            </div>
+        </div>
+        
+        <!-- 營養追蹤頁面 -->
+        <div id="tracking" class="tab-content">
+            <div id="trackingCheck" class="no-profile" style="display: none;">
+                 <p>請先到「個人資料」頁面完成設定，以獲得個人化營養建議和追蹤功能 👆</p>
+            </div>
+            <div class="tracking-container" id="trackingContent">
+                <div class="welcome-message" id="welcomeMessage"></div>
+                
+                <div class="stats-grid" id="statsGrid">
+                        <div class="stat-card">
+                        <div class="stat-icon">🔥</div>
+                        <div class="stat-info">
+                            <div class="stat-value" id="todayCalories">0</div>
+                            <div class="stat-label">今日攝取熱量</div>
+                            </div>
+                        </div>
+                        <div class="stat-card">
+                        <div class="stat-icon">🎯</div>
+                            <div class="stat-info">
+                            <div class="stat-value" id="calorieGoalText">0</div>
+                            <div class="stat-label">每日目標熱量</div>
+                            </div>
+                        </div>
+                    </div>
+
+                <div class="goals-container" id="goalsContainer">
+                        <h3>今日目標進度</h3>
+                    <div class="goal-items" id="goalItems"></div>
+                            </div>
+                            
+                    <div class="meals-card">
+                        <div class="meals-header">
+                            <h3>今日食物記錄</h3>
+                        <button class="btn-small" onclick="switchTab('analyzer')">+ 新增餐點</button>
+                        </div>
+                    <div id="mealsList" class="meals-list"></div>
+                    </div>
+
+                    <div class="chart-card full-width">
+                        <div class="chart-header">
+                        <h3>本週熱量趨勢</h3>
+                        </div>
+                        <div class="chart-container">
+                        <canvas id="weeklyChart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+// =================================================================================
+// Application State and Data
+// =================================================================================
+const appState = {
+    userProfile: null,
+    foodDiary: [],
+    currentAnalysis: null,
+    charts: {}
+};
+
+const API_BASE_URL = 'http://127.0.0.1:8000'; // Backend server address
+
+// =================================================================================
+// Initialization
+// =================================================================================
+document.addEventListener('DOMContentLoaded', initializeApp);
+
+function initializeApp() {
+    loadUserProfile();
+    loadFoodDiary();
+    switchTab('analyzer'); // Start on analyzer tab
+}
+
+// =================================================================================
+// Tab & UI Management
+// =================================================================================
+        function switchTab(tabId) {
+    // Hide all tab contents
+    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+    // Deactivate all tab buttons
+    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+
+    // Activate the selected tab and button
+            document.getElementById(tabId).classList.add('active');
+    document.querySelector(`.tab-btn[data-tab="${tabId}"]`).classList.add('active');
+
+    // Conditional UI updates based on tab and profile status
+    const hasProfile = !!appState.userProfile;
+    
+    document.getElementById('profileCheck').style.display = !hasProfile && tabId === 'analyzer' ? 'block' : 'none';
+    document.getElementById('analyzerContent').style.display = hasProfile && tabId === 'analyzer' ? 'block' : 'none';
+    
+    document.getElementById('trackingCheck').style.display = !hasProfile && tabId === 'tracking' ? 'block' : 'none';
+    document.getElementById('trackingContent').style.display = hasProfile && tabId === 'tracking' ? 'block' : 'none';
+    
+                if (hasProfile) {
+        if (tabId === 'profile') {
+            populateProfileForm();
+        } else if (tabId === 'tracking') {
+            updateTrackingPage();
+        }
+    }
+}
+
+function showLoading(isLoading) {
+    document.getElementById('loading').style.display = isLoading ? 'flex' : 'none';
+}
+
+function showNotification(message, type = 'info') {
+    alert(`[${type.toUpperCase()}] ${message}`);
+}
+
+
+// =================================================================================
+// Profile Management
+// =================================================================================
+function saveUserProfile() {
+            const profile = {
+                name: document.getElementById('userName').value,
+                age: parseInt(document.getElementById('userAge').value),
+                gender: document.getElementById('userGender').value,
+                height: parseInt(document.getElementById('userHeight').value),
+                weight: parseInt(document.getElementById('userWeight').value),
+                activityLevel: document.getElementById('activityLevel').value,
+                healthGoal: document.getElementById('healthGoal').value
+            };
+            
+    if (Object.values(profile).some(v => !v)) {
+        return showNotification('請填寫所有欄位！', 'error');
+    }
+
+    // Calculate BMR and daily calorie needs
+    const bmr = calculateBMR(profile);
+    profile.dailyCalories = calculateDailyCalories(bmr, profile.activityLevel, profile.healthGoal);
+    profile.proteinGoal = Math.round(profile.dailyCalories * 0.25 / 4); // 25% from protein
+    profile.fiberGoal = 25; // g
+    profile.waterGoal = 2000; // ml
+
+    appState.userProfile = profile;
+            localStorage.setItem('userProfile', JSON.stringify(profile));
+    
+    showNotification('個人資料已儲存！', 'success');
+    switchTab('analyzer'); // Switch to analyzer after saving
+}
+
+function loadUserProfile() {
+    const storedProfile = localStorage.getItem('userProfile');
+    if (storedProfile) {
+        appState.userProfile = JSON.parse(storedProfile);
+    }
+}
+
+function populateProfileForm() {
+    if (!appState.userProfile) return;
+    for (const key in appState.userProfile) {
+        const element = document.getElementById(key);
+        if (element) {
+            element.value = appState.userProfile[key];
+        }
+    }
+}
+
+function calculateBMR({ gender, weight, height, age }) {
+    if (gender === 'male') {
+        return 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
+    }
+    return 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
+}
+
+function calculateDailyCalories(bmr, activityLevel, healthGoal) {
+    const activityMultipliers = { sedentary: 1.2, light: 1.375, moderate: 1.55, active: 1.725, extra: 1.9 };
+    let calories = bmr * (activityMultipliers[activityLevel] || 1.2);
+    const goalAdjustments = { lose: -300, gain: 300, muscle: 200 };
+    calories += goalAdjustments[healthGoal] || 0;
+    return Math.round(calories);
+}
+
+// =================================================================================
+// Camera and Image Analysis
+// =================================================================================
+async function startCamera() {
+    try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        const video = document.getElementById('video');
+        video.srcObject = stream;
+        video.style.display = 'block';
+    } catch (err) {
+        showNotification('無法開啟相機，請檢查權限。', 'error');
+    }
+}
+
+function capturePhoto() {
+    const video = document.getElementById('video');
+    const canvas = document.getElementById('canvas');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const context = canvas.getContext('2d');
+    context.drawImage(video, 0, 0, canvas.width, canvas.height);
+    
+    canvas.toBlob(blob => {
+        if (blob) {
+            processImage(blob);
+        } else {
+            showNotification('無法擷取圖片，請再試一次', 'error');
+        }
+    }, 'image/jpeg');
+}
+
+function handleFileUpload(event) {
+    const file = event.target.files[0];
+    if (file) {
+        processImage(file);
+        // 重置文件輸入，允許重複上傳相同文件
+        event.target.value = '';
+    }
+}
+
+async function processImage(imageSource) {
+    showLoading(true);
+    document.getElementById('result').style.display = 'none';
+
+    const formData = new FormData();
+    formData.append('file', imageSource);
+
+    try {
+        // 調用 AI 端點獲取食物名稱
+        const aiResponse = await fetch(`${API_BASE_URL}/ai/analyze-food-image/`, {
+            method: 'POST',
+            body: formData,
+        });
+
+        if (!aiResponse.ok) {
+            const errorData = await aiResponse.json();
+            throw new Error(errorData.detail || `AI辨識失敗 (狀態碼: ${aiResponse.status})`);
+        }
+
+        const aiData = await aiResponse.json();
+        const foodName = aiData.food_name;
+
+        if (!foodName || foodName === "Unknown") {
+            throw new Error('AI無法辨識出食物名稱。');
+        }
+
+        // 創建基本分析結果（基於 AI 辨識結果）
+        // 由於營養端點可能不存在，我們先創建一個基本版本
+        appState.currentAnalysis = {
+            foodName: foodName,
+            description: `AI 辨識結果：${foodName}`,
+            healthIndex: 75, // 默認值
+            glycemicIndex: 50, // 默認值
+            benefits: [`含有 ${foodName} 的營養成分`],
+            nutrition: {
+                calories: 150, // 默認估計值
+                protein: 8,
+                carbs: 20,
+                fat: 5,
+                fiber: 3,
+                sugar: 2
+            },
+            vitamins: {
+                'Vitamin C': 15,
+                'Vitamin A': 10
+            },
+            minerals: {
+                'Iron': 2,
+                'Calcium': 50
+            }
+        };
+
+        // 嘗試獲取詳細營養信息（可選）
+        try {
+            const nutritionResponse = await fetch(`${API_BASE_URL}/api/analyze-nutrition/${encodeURIComponent(foodName)}`);
+            
+            if (nutritionResponse.ok) {
+                const nutritionData = await nutritionResponse.json();
+                if (nutritionData.success) {
+                    // 如果營養端點存在且成功，合併數據
+                    appState.currentAnalysis = {
+                        foodName: foodName,
+                        ...nutritionData
+                    };
+                }
+            }
+        } catch (nutritionError) {
+            console.log('營養信息端點不可用，使用基本信息');
+        }
+        
+        displayAnalysisResults(appState.currentAnalysis);
+
+    } catch (error) {
+        showNotification(`分析失敗: ${error.message}`, 'error');
+    } finally {
+        showLoading(false);
+    }
+}
+
+function displayAnalysisResults(analysis) {
+    console.log('顯示分析結果:', analysis); // 調試用
+    
+    // 顯示結果區域
+    document.getElementById('result').style.display = 'block';
+    
+    // 基本信息
+    document.getElementById('foodName').textContent = analysis.foodName;
+    document.getElementById('foodDescription').textContent = analysis.description || `這是 ${analysis.foodName}`;
+
+    // 健康指數
+    const healthIndex = analysis.healthIndex || 75;
+    const glycemicIndex = analysis.glycemicIndex || 50;
+    
+    document.getElementById('healthIndexValue').textContent = `${healthIndex}/100`;
+    document.getElementById('healthIndexFill').style.width = `${healthIndex}%`;
+    document.getElementById('glycemicIndexValue').textContent = `${glycemicIndex}/100`;
+    document.getElementById('glycemicIndexFill').style.width = `${glycemicIndex}%`;
+    
+    // 營養益處
+    const benefitsContainer = document.getElementById('benefitsTags');
+    benefitsContainer.innerHTML = '';
+
+    if (analysis.benefits && Array.isArray(analysis.benefits)) {
+        analysis.benefits.forEach(tag => {
+            const tagEl = document.createElement('span');
+            tagEl.className = 'benefit-tag';
+            tagEl.textContent = tag;
+            benefitsContainer.appendChild(tagEl);
+        });
+    } else {
+        const tagEl = document.createElement('span');
+        tagEl.className = 'benefit-tag';
+        tagEl.textContent = `${analysis.foodName} 的營養價值`;
+        benefitsContainer.appendChild(tagEl);
+    }
+
+    // 營養信息
+    const nutrition = analysis.nutrition || {};
+    const nutritionData = {
+        calories: nutrition.calories || 150,
+        protein: nutrition.protein || 8,
+        carbs: nutrition.carbs || 20,
+        fat: nutrition.fat || 5,
+        fiber: nutrition.fiber || 3,
+        sugar: nutrition.sugar || 2
+    };
+
+    const labels = { 
+        calories: '熱量', 
+        protein: '蛋白質', 
+        carbs: '碳水化合物', 
+        fat: '脂肪', 
+        fiber: '纖維', 
+        sugar: '糖分' 
+    };
+    const units = {
+        calories: '卡',
+        protein: 'g',
+        carbs: 'g', 
+        fat: 'g',
+        fiber: 'g',
+        sugar: 'g'
+    };
+
+    // 填充營養網格
+    const nutritionGrid = document.getElementById('nutritionGrid');
+    nutritionGrid.innerHTML = '';
+    
+    for (const [key, value] of Object.entries(nutritionData)) {
+        const itemDiv = document.createElement('div');
+        itemDiv.className = 'nutrition-item';
+        itemDiv.innerHTML = `
+            <div class="nutrition-label">${labels[key]}</div>
+            <div class="nutrition-value">${value} ${units[key]}</div>
+        `;
+        nutritionGrid.appendChild(itemDiv);
+    }
+
+    // 維生素和礦物質
+    const vitaminsGrid = document.getElementById('vitaminsGrid');
+    const mineralsGrid = document.getElementById('mineralsGrid');
+    
+    vitaminsGrid.innerHTML = '';
+    mineralsGrid.innerHTML = '';
+    
+    if (analysis.vitamins) {
+        for (const [key, value] of Object.entries(analysis.vitamins)) {
+            const itemDiv = document.createElement('div');
+            itemDiv.className = 'nutrition-item';
+            itemDiv.innerHTML = `
+                <div class="nutrition-label">${key}</div>
+                <div class="nutrition-value">${value} mg</div>
+            `;
+            vitaminsGrid.appendChild(itemDiv);
+        }
+    }
+    
+    if (analysis.minerals) {
+        for (const [key, value] of Object.entries(analysis.minerals)) {
+            const itemDiv = document.createElement('div');
+            itemDiv.className = 'nutrition-item';
+            itemDiv.innerHTML = `
+                <div class="nutrition-label">${key}</div>
+                <div class="nutrition-value">${value} mg</div>
+            `;
+            mineralsGrid.appendChild(itemDiv);
+        }
+    }
+    
+    // 個人化建議
+    if (appState.userProfile) {
+        const recoEl = document.getElementById('recommendation');
+        const caloriePercentage = ((nutritionData.calories / appState.userProfile.dailyCalories) * 100).toFixed(0);
+        recoEl.innerHTML = `
+            <div class="recommendation-title">💡 個人化建議</div>
+            <div class="recommendation-text">這份食物約佔您每日熱量建議的 ${caloriePercentage}%。</div>
+        `;
+    }
+}
+
+// =================================================================================
+// Food Diary
+// =================================================================================
+function addToFoodDiary() {
+    if (!appState.currentAnalysis) {
+        return showNotification('沒有可加入的分析結果。', 'error');
+    }
+    const meal = {
+        ...appState.currentAnalysis,
+        id: Date.now(),
+                        timestamp: new Date().toISOString()
+                    };
+    appState.foodDiary.push(meal);
+    saveFoodDiary();
+    showNotification(`${meal.foodName} 已加入記錄！`, 'success');
+    updateTrackingPage(); // Refresh tracking page data
+}
+
+function loadFoodDiary() {
+    const today = new Date().toISOString().slice(0, 10);
+    const storedDiary = localStorage.getItem(`foodDiary_${today}`);
+    appState.foodDiary = storedDiary ? JSON.parse(storedDiary) : [];
+}
+
+function saveFoodDiary() {
+    const today = new Date().toISOString().slice(0, 10);
+    localStorage.setItem(`foodDiary_${today}`, JSON.stringify(appState.foodDiary));
+}
+
+// =================================================================================
+// Tracking Page
+// =================================================================================
+function updateTrackingPage() {
+    if (!appState.userProfile) return;
+    
+    updateWelcomeMessage();
+    updateTodayStats();
+    updateGoalsProgress();
+    updateMealsList();
+    renderWeeklyChart();
+}
+
+function updateWelcomeMessage() {
+    document.getElementById('welcomeMessage').innerHTML = `<h3>👋 你好, ${appState.userProfile.name}!</h3><p>這是您今天的營養總覽。</p>`;
+}
+
+function updateTodayStats() {
+    const todayTotals = appState.foodDiary.reduce((totals, meal) => {
+        totals.calories += meal.nutrition.calories || 0;
+        totals.protein += meal.nutrition.protein || 0;
+        totals.fiber += meal.nutrition.fiber || 0;
+        return totals;
+    }, { calories: 0, protein: 0, fiber: 0 });
+
+    document.getElementById('todayCalories').textContent = Math.round(todayTotals.calories);
+    document.getElementById('calorieGoalText').textContent = appState.userProfile.dailyCalories;
+}
+
+function updateGoalsProgress() {
+    const goals = {
+        calories: { label: '熱量', unit: '卡', goal: appState.userProfile.dailyCalories, key: 'calories' },
+        protein: { label: '蛋白質', unit: 'g', goal: appState.userProfile.proteinGoal, key: 'protein' },
+        fiber: { label: '纖維', unit: 'g', goal: appState.userProfile.fiberGoal, key: 'fiber' }
+    };
+
+    const todayTotals = appState.foodDiary.reduce((totals, meal) => {
+        totals.calories += meal.nutrition.calories || 0;
+        totals.protein += meal.nutrition.protein || 0;
+        totals.fiber += meal.nutrition.fiber || 0;
+        return totals;
+    }, { calories: 0, protein: 0, fiber: 0 });
+
+    const container = document.getElementById('goalItems');
+    container.innerHTML = '';
+
+    for (const g in goals) {
+        const { label, unit, goal, key } = goals[g];
+        const current = Math.round(todayTotals[key]);
+        const progress = goal > 0 ? Math.min(100, (current / goal) * 100) : 0;
+        
+        const item = document.createElement('div');
+        item.className = 'progress-item';
+        item.innerHTML = `
+            <div class="progress-header">
+                <span class="progress-label">${label}</span>
+                <span class="progress-value">${current} / ${goal} ${unit}</span>
+            </div>
+            <div class="progress-bar-container">
+                <div class="progress-bar-fill" style="width: ${progress}%; background-color: #${g === 'calories' ? 'ff9a9e' : g === 'protein' ? '667eea' : '43cea2'};"></div>
+            </div>`;
+        container.appendChild(item);
+    }
+        }
+        
+        function updateMealsList() {
+    const listEl = document.getElementById('mealsList');
+    if (appState.foodDiary.length === 0) {
+        listEl.innerHTML = `<div class="empty-state">
+            <div class="empty-icon">🍽️</div><p>今天尚未記錄任何食物</p>
+            </div>`;
+        return;
+    }
+    listEl.innerHTML = appState.foodDiary.map(meal => `
+                    <div class="meal-item">
+                        <div class="meal-info">
+                            <h4>${meal.foodName}</h4>
+                <span>${new Date(meal.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
+                        </div>
+            <div class="meal-calories">${Math.round(meal.nutrition.calories)} 卡</div>
+                    </div>
+                `).join('');
+}
+
+
+function renderWeeklyChart() {
+    const ctx = document.getElementById('weeklyChart').getContext('2d');
+    if (appState.charts.weekly) {
+        appState.charts.weekly.destroy();
+    }
+    
+    // Mock data for past 6 days + today's actual data
+    const labels = ['二', '三', '四', '五', '六', '日', '一'].slice(-7); // Last 7 days ending today
+    const data = Array(6).fill(0).map(() => Math.random() * (2200 - 1500) + 1500);
+    const todayCalories = appState.foodDiary.reduce((sum, meal) => sum + meal.nutrition.calories, 0);
+    data.push(todayCalories);
+    
+    appState.charts.weekly = new Chart(ctx, {
+                type: 'line',
+                data: {
+            labels,
+                        datasets: [{
+                label: '每日熱量 (卡)',
+                data,
+                borderColor: '#667eea',
+                backgroundColor: 'rgba(102, 126, 234, 0.1)',
+                fill: true,
+                tension: 0.3
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+            scales: { y: { beginAtZero: true } },
+            plugins: { legend: { display: false } }
+        }
+    });
+        }
+    </script>
+</body>
+</html>

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>健康助手</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "health-assistant",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "@tensorflow-models/mobilenet": "^2.1.1",
+    "@tensorflow/tfjs": "^4.11.0",
+    "axios": "^1.6.2",
+    "chart.js": "^4.4.0",
+    "lucide-react": "^0.525.0",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "react-toastify": "^9.1.3",
+    "recharts": "^3.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.31",
+    "tailwindcss": "^3.3.5",
+    "vite": "^5.0.0"
+  }
+}

frontend/src/App.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import AIFoodAnalyzer from './pages/AIFoodAnalyzer';
+import './index.css';
+
+function App() {
+  return <AIFoodAnalyzer />;
+}
+
+export default App;

frontend/src/components/Navbar.jsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { Fragment } from 'react';
+import { Link } from 'react-router-dom';
+import { Disclosure, Menu, Transition } from '@headlessui/react';
+import { Bars3Icon, XMarkIcon, UserCircleIcon } from '@heroicons/react/24/outline';
+
+const navigation = [
+  { name: '儀表板', href: '/', current: true },
+  { name: '飲食追蹤', href: '/food', current: false },
+  { name: 'AI食物分析', href: '/food-ai', current: false },
+  { name: '飲水紀錄', href: '/water', current: false },
+  { name: '運動紀錄', href: '/exercise', current: false },
+];
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function Navbar() {
+  return (
+    <Disclosure as="nav" className="bg-white shadow-lg">
+      {({ open }) => (
+        <>
+          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div className="flex h-16 justify-between">
+              <div className="flex">
+                <div className="flex flex-shrink-0 items-center">
+                  <span className="text-2xl font-bold text-indigo-600">健康助手</span>
+                </div>
+                <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                  {navigation.map((item) => (
+                    <Link
+                      key={item.name}
+                      to={item.href}
+                      className={classNames(
+                        item.current
+                          ? 'border-indigo-500 text-gray-900'
+                          : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
+                        'inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium'
+                      )}
+                    >
+                      {item.name}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+              
+              <div className="hidden sm:ml-6 sm:flex sm:items-center">
+                <Menu as="div" className="relative ml-3">
+                  <div>
+                    <Menu.Button className="flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                      <UserCircleIcon className="h-8 w-8 text-gray-400" aria-hidden="true" />
+                    </Menu.Button>
+                  </div>
+                  <Transition
+                    as={Fragment}
+                    enter="transition ease-out duration-200"
+                    enterFrom="transform opacity-0 scale-95"
+                    enterTo="transform opacity-100 scale-100"
+                    leave="transition ease-in duration-75"
+                    leaveFrom="transform opacity-100 scale-100"
+                    leaveTo="transform opacity-0 scale-95"
+                  >
+                    <Menu.Items className="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                      <Menu.Item>
+                        {({ active }) => (
+                          <Link
+                            to="/profile"
+                            className={classNames(
+                              active ? 'bg-gray-100' : '',
+                              'block px-4 py-2 text-sm text-gray-700'
+                            )}
+                          >
+                            個人資料
+                          </Link>
+                        )}
+                      </Menu.Item>
+                      <Menu.Item>
+                        {({ active }) => (
+                          <a
+                            href="#"
+                            className={classNames(
+                              active ? 'bg-gray-100' : '',
+                              'block px-4 py-2 text-sm text-gray-700'
+                            )}
+                          >
+                            登出
+                          </a>
+                        )}
+                      </Menu.Item>
+                    </Menu.Items>
+                  </Transition>
+                </Menu>
+              </div>
+
+              <div className="-mr-2 flex items-center sm:hidden">
+                <Disclosure.Button className="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
+                  {open ? (
+                    <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+            </div>
+          </div>
+
+          <Disclosure.Panel className="sm:hidden">
+            <div className="space-y-1 pb-3 pt-2">
+              {navigation.map((item) => (
+                <Link
+                  key={item.name}
+                  to={item.href}
+                  className={classNames(
+                    item.current
+                      ? 'bg-indigo-50 border-indigo-500 text-indigo-700'
+                      : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700',
+                    'block border-l-4 py-2 pl-3 pr-4 text-base font-medium'
+                  )}
+                >
+                  {item.name}
+                </Link>
+              ))}
+            </div>
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 全局 reset 與字型 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+}
+
+#root {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}