Add Health Assistant AI project with AI food analyzer and complete backend/frontend

.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

.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

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,148 @@
+# 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) 文件

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>

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/.env.example

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

backend/app.py

@@ -0,0 +1,65 @@
+from fastapi import FastAPI, File, UploadFile
+from fastapi.middleware.cors import CORSMiddleware
+import uvicorn
+from datetime import datetime
+from PIL import Image
+import io
+import random
+
+app = FastAPI()
+
+# 允許跨域請求
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# 模擬食物列表
+FOOD_ITEMS = [
+    "牛肉麵",
+    "滷肉飯",
+    "炒飯",
+    "水餃",
+    "炸雞",
+    "三明治",
+    "沙拉",
+    "義大利麵",
+    "披薩",
+    "漢堡"
+]
+
+@app.post("/api/ai/analyze-food")
+async def analyze_food(file: UploadFile = File(...)):
+    # 讀取圖片（僅作為示範，不進行實際分析）
+    contents = await file.read()
+    image = Image.open(io.BytesIO(contents))
+    
+    # 隨機選擇一個食物和信心度
+    food = random.choice(FOOD_ITEMS)
+    confidence = random.uniform(85.0, 99.9)
+    
+    # 模擬營養資訊
+    nutrition = {
+        "calories": random.randint(200, 800),
+        "protein": random.randint(10, 30),
+        "carbs": random.randint(20, 60),
+        "fat": random.randint(5, 25)
+    }
+    
+    # 返回結果
+    return {
+        "success": True,
+        "analysis_time": datetime.now().isoformat(),
+        "top_prediction": {
+            "label": food,
+            "confidence": confidence,
+            "nutrition": nutrition,
+            "description": f"這是一道美味的{food}，營養豐富且美味可口。"
+        }
+    }
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="127.0.0.1", port=8000)

backend/app/__init__.py

@@ -0,0 +1 @@
+

backend/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()

backend/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()

backend/app/main.py

@@ -0,0 +1,26 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from .routers import ai_router, meal_router
+from .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"}

backend/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)

backend/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) 

backend/app/routers/ai_router.py

@@ -0,0 +1,34 @@
+# 檔案路徑: backend/app/routers/ai_router.py
+
+from fastapi import APIRouter, File, UploadFile, HTTPException
+from ..services import ai_service  # 引入我們的 AI 服務
+
+router = APIRouter(
+    prefix="/ai",
+    tags=["AI"],
+)
+
+@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="上傳的檔案不是圖片格式。")
+
+    # 讀取圖片的二進位制內容
+    image_bytes = await file.read()
+    
+    # 呼叫 AI 服務中的分類函式
+    food_name = ai_service.classify_food_image(image_bytes)
+
+    # 處理辨識失敗或錯誤的情況
+    if "Error" in food_name or food_name == "Unknown":
+        raise HTTPException(status_code=500, detail=f"無法辨識圖片中的食物。模型回傳: {food_name}")
+
+    # TODO: 在下一階段，我們會在這裡加入從資料庫查詢營養資訊的邏輯
+    # 目前，我們先直接回傳辨識出的食物名稱
+    
+    return {"food_name": food_name}

backend/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))

backend/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']

backend/app/services/ai_service.py

@@ -0,0 +1,96 @@
+# 檔案路徑: 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()

backend/app/services/food_analyzer_service.py

@@ -0,0 +1,256 @@
+import torch
+import json
+from typing import Dict, Any
+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: 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 = 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].text
+            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

backend/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

backend/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}' 的營養資訊。") 

backend/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)

backend/main.py

@@ -0,0 +1,209 @@
+from fastapi import FastAPI, UploadFile, File, HTTPException, Depends
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from typing import Dict, Any, List, Optional
+import uvicorn
+import base64
+from io import BytesIO
+from PIL import Image
+import json
+import os
+from dotenv import load_dotenv
+
+# Database and services
+from .app.database import get_db
+from sqlalchemy.orm import Session
+from .app.models.nutrition import Nutrition
+from .app.services import nutrition_api_service
+
+# Routers
+from .app.routers import ai_router, meal_router
+
+app = FastAPI(title="Health Assistant API")
+app.include_router(ai_router.router)
+app.include_router(meal_router.router) 
+
+# Load environment variables
+load_dotenv()
+
+# CORS middleware to allow frontend access
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+class FoodRecognitionResponse(BaseModel):
+    food_name: str
+    chinese_name: str
+    confidence: float
+    success: bool
+
+class NutritionAnalysisResponse(BaseModel):
+    success: bool
+    food_name: str
+    chinese_name: Optional[str] = None
+    nutrition: Dict[str, Any]
+    analysis: Dict[str, Any]
+
+class ErrorResponse(BaseModel):
+    detail: str
+
+@app.get("/")
+async def root():
+    return {"message": "Health Assistant API is running"}
+
+@app.get("/api/analyze-nutrition/{food_name}", response_model=NutritionAnalysisResponse, responses={404: {"model": ErrorResponse}})
+async def analyze_nutrition(food_name: str, db: Session = Depends(get_db)):
+    """
+    Analyze nutrition for a recognized food item by querying the database.
+    If not found locally, it queries an external API and saves the new data.
+    """
+    try:
+        # Query the database for the food item (case-insensitive search)
+        food_item = db.query(Nutrition).filter(Nutrition.food_name.ilike(f"%{food_name.strip()}%")).first()
+        
+        if not food_item:
+            # If not found, query the external API
+            print(f"Food '{food_name}' not in local DB. Querying external API...")
+            api_data = nutrition_api_service.fetch_nutrition_data(food_name)
+            
+            if not api_data:
+                # If external API also doesn't find it, raise 404
+                raise HTTPException(status_code=404, detail=f"Food '{food_name}' not found in local database or external API.")
+
+            # Create a new Nutrition object from the API data
+            recommendations = generate_recommendations(api_data)
+            warnings = generate_warnings(api_data)
+            health_score = calculate_health_score(api_data)
+            
+            new_food_item = Nutrition(
+                food_name=api_data.get('food_name', food_name),
+                chinese_name=api_data.get('chinese_name'),
+                calories=api_data.get('calories', 0),
+                protein=api_data.get('protein', 0),
+                fat=api_data.get('fat', 0),
+                carbs=api_data.get('carbs', 0),
+                fiber=api_data.get('fiber', 0),
+                sugar=api_data.get('sugar', 0),
+                sodium=api_data.get('sodium', 0),
+                health_score=health_score,
+                recommendations=recommendations,
+                warnings=warnings,
+                details={} # API doesn't provide extra details in our format
+            )
+            
+            # Add to DB and commit
+            db.add(new_food_item)
+            db.commit()
+            db.refresh(new_food_item)
+            print(f"Saved new food '{new_food_item.food_name}' to the database.")
+            food_item = new_food_item # Use the new item for the response
+        
+        if not food_item:
+            raise HTTPException(status_code=404, detail=f"Food '{food_name}' not found in the database.")
+        
+        # Structure the response
+        nutrition_details = {
+            "calories": food_item.calories,
+            "protein": food_item.protein,
+            "fat": food_item.fat,
+            "carbs": food_item.carbs,
+            "fiber": food_item.fiber,
+            "sugar": food_item.sugar,
+            "sodium": food_item.sodium,
+        }
+
+        # Safely add details if they exist and are a dictionary
+        if isinstance(food_item.details, dict):
+            nutrition_details.update(food_item.details)
+        
+        analysis_details = {
+            "healthScore": food_item.health_score,
+            "recommendations": food_item.recommendations,
+            "warnings": food_item.warnings
+        }
+        
+        return {
+            "success": True,
+            "food_name": food_item.food_name,
+            "chinese_name": food_item.chinese_name,
+            "nutrition": nutrition_details,
+            "analysis": analysis_details
+        }
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        # Log the error for debugging
+        print(f"Error in analyze_nutrition: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Internal server error while processing '{food_name}'.")
+
+def calculate_health_score(nutrition: Dict[str, Any]) -> int:
+    """Calculate a health score based on nutritional values"""
+    score = 100
+    
+    # 熱量評分
+    if nutrition.get("calories", 0) > 400:
+        score -= 20
+    elif nutrition.get("calories", 0) > 300:
+        score -= 10
+    
+    # 脂肪評分
+    if nutrition.get("fat", 0) > 20:
+        score -= 15
+    elif nutrition.get("fat", 0) > 15:
+        score -= 8
+    
+    # 蛋白質評分
+    if nutrition.get("protein", 0) > 15:
+        score += 10
+    elif nutrition.get("protein", 0) < 5:
+        score -= 10
+    
+    # 鈉含量評分
+    if nutrition.get("sodium", 0) > 800:
+        score -= 15
+    elif nutrition.get("sodium", 0) > 600:
+        score -= 8
+    
+    return max(0, min(100, score))
+
+def generate_recommendations(nutrition: Dict[str, Any]) -> List[str]:
+    """Generate dietary recommendations based on nutrition data"""
+    recommendations = []
+    
+    if nutrition.get("protein", 0) < 10:
+        recommendations.append("建議增加蛋白質攝取，可搭配雞蛋或豆腐")
+    
+    if nutrition.get("fat", 0) > 20:
+        recommendations.append("脂肪含量較高，建議適量食用")
+    
+    if nutrition.get("fiber", 0) < 3:
+        recommendations.append("纖維含量不足，建議搭配蔬菜沙拉")
+    
+    if nutrition.get("sodium", 0) > 600:
+        recommendations.append("鈉含量偏高，建議多喝水並減少其他鹽分攝取")
+    
+    return recommendations
+
+def generate_warnings(nutrition: Dict[str, Any]) -> List[str]:
+    """Generate dietary warnings based on nutrition data"""
+    warnings = []
+    
+    if nutrition.get("calories", 0) > 500:
+        warnings.append("高熱量食物")
+    
+    if nutrition.get("fat", 0) > 25:
+        warnings.append("高脂肪食物")
+    
+    if nutrition.get("sodium", 0) > 1000:
+        warnings.append("高鈉食物")
+    
+    return warnings
+
+if __name__ == "__main__":
+    # It's better to run with `uvicorn backend.main:app --reload` from the project root.
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

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

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,38 @@
+{
+  "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/tfjs": "^4.11.0",
+    "@tensorflow-models/mobilenet": "^2.1.1",
+    "axios": "^1.6.2",
+    "chart.js": "^4.4.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"
+  },
+  "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,38 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Navbar from './components/Navbar';
+import Dashboard from './pages/Dashboard';
+import FoodTracker from './pages/FoodTracker';
+import AIFoodAnalyzer from './pages/AIFoodAnalyzer';
+import WaterTracker from './pages/WaterTracker';
+import ExerciseTracker from './pages/ExerciseTracker';
+import Profile from './pages/Profile';
+import Login from './pages/Login';
+import Register from './pages/Register';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+function App() {
+  return (
+    <Router>
+      <div className="min-h-screen bg-gray-50">
+        <Navbar />
+        <main className="container mx-auto px-4 py-8">
+          <Routes>
+            <Route path="/" element={<Dashboard />} />
+            <Route path="/food" element={<FoodTracker />} />
+            <Route path="/food-ai" element={<AIFoodAnalyzer />} />
+            <Route path="/water" element={<WaterTracker />} />
+            <Route path="/exercise" element={<ExerciseTracker />} />
+            <Route path="/profile" element={<Profile />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+          </Routes>
+        </main>
+        <ToastContainer position="bottom-right" />
+      </div>
+    </Router>
+  );
+}
+
+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,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/pages/AIFoodAnalyzer.css

@@ -0,0 +1,348 @@
+/* AI Food Analyzer Styles */
+.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);
+}
+
+#canvas {
+  display: none;
+}
+
+.controls {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin: 1.5rem 0;
+}
+
+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;
+  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;
+}
+
+.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;
+}
+
+.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;
+}
+
+/* 追蹤頁面 */
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 15px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.stat-number {
+  font-size: 2rem;
+  font-weight: bold;
+  color: #667eea;
+  margin-bottom: 0.5rem;
+}
+
+.stat-label {
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.chart-container {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 15px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  margin-bottom: 2rem;
+}
+
+.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;
+}

frontend/src/pages/AIFoodAnalyzer.jsx

@@ -0,0 +1,667 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { XMarkIcon, InboxArrowDownIcon, CalendarIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
+import Chart from 'chart.js/auto';
+import './AIFoodAnalyzer.css';
+
+export default function AIFoodAnalyzer() {
+  // 應用狀態管理
+  const [userProfile, setUserProfile] = useState(null);
+  const [dailyMeals, setDailyMeals] = useState([]);
+  const [activeTab, setActiveTab] = useState('profile');
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [currentFoodAnalysis, setCurrentFoodAnalysis] = useState(null);
+  const videoRef = useRef(null);
+  const canvasRef = useRef(null);
+  const chartRef = useRef(null);
+  const chartInstance = useRef(null);
+
+  // 後端 API 基礎 URL
+  const API_BASE_URL = 'http://localhost:8000/api';
+  
+  // 狀態追蹤錯誤信息
+  const [error, setError] = useState(null);
+
+  // 初始化 - 載入儲存的資料
+  useEffect(() => {
+    loadStoredData();
+  }, []);
+
+  // 當 tab 切換時檢查頁面狀態
+  useEffect(() => {
+    checkPageAccess(activeTab);
+  }, [activeTab, userProfile]);
+
+  // 初始化營養圖表
+  useEffect(() => {
+    if (activeTab === 'tracking' && userProfile && chartRef.current) {
+      initNutritionChart();
+    }
+  }, [activeTab, userProfile]);
+
+  // 載入儲存的資料
+  const loadStoredData = () => {
+    try {
+      const storedProfile = localStorage.getItem('userProfile');
+      const storedMeals = localStorage.getItem('dailyMeals');
+      
+      if (storedProfile) {
+        setUserProfile(JSON.parse(storedProfile));
+      }
+      
+      if (storedMeals) {
+        setDailyMeals(JSON.parse(storedMeals));
+      }
+    } catch (error) {
+      console.error('Error loading stored data:', error);
+    }
+  };
+
+  // 檢查頁面訪問權限
+  const checkPageAccess = (tabId) => {
+    if (tabId === 'analyze') {
+      if (userProfile) {
+        initCamera();
+      }
+    } else if (tabId === 'tracking' && userProfile) {
+      updateTrackingStats();
+    }
+  };
+
+  // 初始化相機
+  const initCamera = async () => {
+    try {
+      if (videoRef.current && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        videoRef.current.srcObject = stream;
+      }
+    } catch (error) {
+      console.error('Error accessing camera:', error);
+    }
+  };
+
+  // 拍照功能
+  const captureImage = () => {
+    if (videoRef.current && canvasRef.current) {
+      const context = canvasRef.current.getContext('2d');
+      canvasRef.current.width = videoRef.current.videoWidth;
+      canvasRef.current.height = videoRef.current.videoHeight;
+      context.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height);
+      
+      const imageData = canvasRef.current.toDataURL('image/png');
+      setSelectedImage(imageData);
+      analyzeImage(imageData);
+    }
+  };
+
+  // 處理檔案上傳
+  const handleFileUpload = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedImage(reader.result);
+        analyzeImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  // 分析圖片
+  const analyzeImage = async (imageData) => {
+    setIsAnalyzing(true);
+    setError(null);
+    
+    try {
+      // 將 base64 圖片數據轉換為 Blob
+      const base64Response = await fetch(imageData);
+      const blob = await base64Response.blob();
+      
+      // 創建 FormData 並添加圖片
+      const formData = new FormData();
+      formData.append('file', blob, 'food-image.jpg');
+      
+      // 發送到後端 API
+      const response = await fetch(`${API_BASE_URL}/recognize-food`, {
+        method: 'POST',
+        body: formData,
+        // 注意：不要手動設置 Content-Type，讓瀏覽器自動設置並添加 boundary
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.detail || '分析圖片時發生錯誤');
+      }
+      
+      const data = await response.json();
+      
+      setCurrentFoodAnalysis({
+        name: data.food_name,
+        nutrition: data.nutrition || {},
+        timestamp: new Date().toISOString()
+      });
+      
+      // 如果後端返回了營養分析，也更新追蹤數據
+      if (data.nutrition) {
+        addMealToTracker(data.food_name, data.nutrition);
+      }
+      
+    } catch (err) {
+      console.error('分析圖片時出錯:', err);
+      setError(err.message || '分析失敗，請重試！');
+    } finally {
+      setIsAnalyzing(false);
+    }
+  };
+
+  // 儲存個人資料
+  const saveProfile = () => {
+    const name = document.getElementById('userName').value;
+    const age = parseInt(document.getElementById('userAge').value);
+    const gender = document.getElementById('userGender').value;
+    const height = parseInt(document.getElementById('userHeight').value);
+    const weight = parseInt(document.getElementById('userWeight').value);
+    const activityLevel = document.getElementById('activityLevel').value;
+    const healthGoal = document.getElementById('healthGoal').value;
+    
+    // 驗證必填欄位
+    if (!name || !age || !gender || !height || !weight || !activityLevel || !healthGoal) {
+      alert('請填寫所有欄位！');
+      return;
+    }
+    
+    const profile = {
+      name,
+      age,
+      gender,
+      height,
+      weight,
+      activityLevel,
+      healthGoal
+    };
+    
+    // 計算基礎代謝率 (BMR) 和每日熱量需求
+    profile.bmr = calculateBMR(profile);
+    profile.dailyCalories = calculateDailyCalories(profile);
+    profile.bmi = (profile.weight / Math.pow(profile.height / 100, 2)).toFixed(1);
+    
+    setUserProfile(profile);
+    
+    // 儲存到 localStorage
+    localStorage.setItem('userProfile', JSON.stringify(profile));
+    localStorage.setItem('dailyMeals', JSON.stringify([])); // 重置每日記錄
+    setDailyMeals([]);
+    
+    alert('個人資料已儲存成功！✅');
+    
+    // 切換到分析頁面
+    setActiveTab('analyze');
+  };
+
+  // 計算基礎代謝率 (BMR)
+  const calculateBMR = (profile) => {
+    let bmr;
+    if (profile.gender === 'male') {
+      bmr = 88.362 + (13.397 * profile.weight) + (4.799 * profile.height) - (5.677 * profile.age);
+    } else {
+      bmr = 447.593 + (9.247 * profile.weight) + (3.098 * profile.height) - (4.330 * profile.age);
+    }
+    return Math.round(bmr);
+  };
+
+  // 計算每日熱量需求
+  const calculateDailyCalories = (profile) => {
+    const activityMultipliers = {
+      sedentary: 1.2,
+      light: 1.375,
+      moderate: 1.55,
+      active: 1.725,
+      extra: 1.9
+    };
+    
+    let calories = profile.bmr * activityMultipliers[profile.activityLevel];
+    
+    // 根據健康目標調整
+    if (profile.healthGoal === 'lose') {
+      calories -= 300; // 減重
+    } else if (profile.healthGoal === 'gain') {
+      calories += 300; // 增重
+    }
+    
+    return Math.round(calories);
+  };
+
+  // 顯示營養資訊
+  const displayNutrition = (foodName, nutrition) => {
+    return (
+      <div className="result">
+        <div className="food-info">
+          <div className="food-name">{foodName} (每100g)</div>
+          <button className="add-to-diary" onClick={addToDiary}>+ 加入記錄</button>
+        </div>
+        <div className="nutrition-grid">
+          <div className="nutrition-item">
+            <div className="nutrition-label">熱量</div>
+            <div className="nutrition-value">{nutrition.calories} 卡</div>
+          </div>
+          <div className="nutrition-item">
+            <div className="nutrition-label">蛋白質</div>
+            <div className="nutrition-value">{nutrition.protein} g</div>
+          </div>
+          <div className="nutrition-item">
+            <div className="nutrition-label">碳水化合物</div>
+            <div className="nutrition-value">{nutrition.carbs} g</div>
+          </div>
+          <div className="nutrition-item">
+            <div className="nutrition-label">脂肪</div>
+            <div className="nutrition-value">{nutrition.fat} g</div>
+          </div>
+          <div className="nutrition-item">
+            <div className="nutrition-label">纖維</div>
+            <div className="nutrition-value">{nutrition.fiber} g</div>
+          </div>
+          <div className="nutrition-item">
+            <div className="nutrition-label">糖分</div>
+            <div className="nutrition-value">{nutrition.sugar} g</div>
+          </div>
+        </div>
+        <div className="daily-recommendation">
+          <div className="recommendation-title">💡 個人化建議</div>
+          <div className="recommendation-text">
+            {getPersonalizedRecommendation(nutrition)}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // 獲取個人化建議
+  const getPersonalizedRecommendation = (nutrition) => {
+    if (!userProfile) return '';
+    
+    const dailyCaloriesNeeded = userProfile.dailyCalories;
+    const caloriePercentage = ((nutrition.calories / dailyCaloriesNeeded) * 100).toFixed(1);
+    
+    let recommendationText = `這份食物提供您每日所需熱量的 ${caloriePercentage}%。`;
+    
+    if (userProfile.healthGoal === 'lose' && nutrition.calories > 200) {
+      recommendationText += ' 由於您的目標是減重，建議控制份量或搭配蔬菜一起食用。';
+    } else if (userProfile.healthGoal === 'muscle' && nutrition.protein < 10) {
+      recommendationText += ' 建議搭配高蛋白食物，有助於肌肉成長。';
+    } else if (nutrition.fiber > 3) {
+      recommendationText += ' 富含纖維，對消化健康很有幫助！';
+    }
+    
+    return recommendationText;
+  };
+
+  // 加入飲食記錄
+  const addToDiary = () => {
+    if (currentFoodAnalysis) {
+      const newMeals = [...dailyMeals, {
+        ...currentFoodAnalysis,
+        id: Date.now()
+      }];
+      
+      setDailyMeals(newMeals);
+      localStorage.setItem('dailyMeals', JSON.stringify(newMeals));
+      alert('已加入今日飲食記錄！✅');
+      
+      // 更新統計
+      updateTrackingStats();
+    }
+  };
+
+  // 更新追蹤統計
+  const updateTrackingStats = () => {
+    // 計算今日總熱量
+    const todayCalories = dailyMeals.reduce((total, meal) => {
+      return total + meal.nutrition.calories;
+    }, 0);
+    
+    // 模擬週平均
+    const weeklyAvg = Math.round(todayCalories * (0.8 + Math.random() * 0.4));
+    
+    // 更新 DOM
+    const todayCaloriesElement = document.getElementById('todayCalories');
+    const weeklyAvgElement = document.getElementById('weeklyAvg');
+    
+    if (todayCaloriesElement) todayCaloriesElement.textContent = todayCalories;
+    if (weeklyAvgElement) weeklyAvgElement.textContent = weeklyAvg;
+    
+    // 更新餐點列表
+    updateMealsList();
+  };
+
+  // 更新餐點列表
+  const updateMealsList = () => {
+    const mealsListElement = document.getElementById('mealsList');
+    
+    if (mealsListElement) {
+      if (dailyMeals.length === 0) {
+        mealsListElement.innerHTML = `
+          <div class="meal-item">
+            <div class="meal-info">
+              <h4>尚無飲食記錄</h4>
+              <span>開始分析食物來建立您的飲食記錄吧！</span>
+            </div>
+          </div>
+        `;
+      } else {
+        mealsListElement.innerHTML = dailyMeals.map(meal => `
+          <div class="meal-item">
+            <div class="meal-info">
+              <h4>${meal.name}</h4>
+              <span>${new Date(meal.timestamp).toLocaleTimeString()}</span>
+            </div>
+            <div class="meal-calories">${meal.nutrition.calories} 卡</div>
+          </div>
+        `).join('');
+      }
+    }
+  };
+
+  // 初始化營養圖表
+  const initNutritionChart = () => {
+    if (chartInstance.current) {
+      chartInstance.current.destroy();
+    }
+    
+    const ctx = chartRef.current.getContext('2d');
+    
+    // 模擬一週的數據
+    const days = ['週一', '週二', '週三', '週四', '週五', '週六', '週日'];
+    const caloriesData = Array(7).fill(0).map(() => Math.floor(Math.random() * 1000 + 1000));
+    const proteinData = Array(7).fill(0).map(() => Math.floor(Math.random() * 30 + 50));
+    const carbsData = Array(7).fill(0).map(() => Math.floor(Math.random() * 50 + 150));
+    
+    // 今天的數據
+    const today = new Date().getDay() || 7; // 0 是週日，轉換為 7
+    caloriesData[today - 1] = dailyMeals.reduce((total, meal) => total + meal.nutrition.calories, 0) || 
+                             Math.floor(Math.random() * 1000 + 1000);
+    
+    chartInstance.current = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: days,
+        datasets: [
+          {
+            label: '熱量 (卡)',
+            data: caloriesData,
+            borderColor: 'rgb(255, 99, 132)',
+            backgroundColor: 'rgba(255, 99, 132, 0.2)',
+            tension: 0.3
+          },
+          {
+            label: '蛋白質 (g)',
+            data: proteinData,
+            borderColor: 'rgb(54, 162, 235)',
+            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+            tension: 0.3
+          },
+          {
+            label: '碳水 (g)',
+            data: carbsData,
+            borderColor: 'rgb(75, 192, 192)',
+            backgroundColor: 'rgba(75, 192, 192, 0.2)',
+            tension: 0.3
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            position: 'top',
+          },
+          tooltip: {
+            mode: 'index',
+            intersect: false,
+          }
+        },
+        scales: {
+          y: {
+            beginAtZero: true
+          }
+        }
+      }
+    });
+  };
+
+  // 獲取 BMI 狀態
+  const getBMIStatus = (bmi) => {
+    if (bmi < 18.5) return '體重過輕';
+    if (bmi < 24) return '正常範圍';
+    if (bmi < 27) return '體重過重';
+    if (bmi < 30) return '輕度肥胖';
+    if (bmi < 35) return '中度肥胖';
+    return '重度肥胖';
+  };
+
+  // 更新歡迎訊息
+  const updateWelcomeMessage = () => {
+    if (!userProfile) return '';
+    
+    const bmiStatus = getBMIStatus(userProfile.bmi);
+    return (
+      <div className="welcome-message">
+        <h3>👋 你好，{userProfile.name}！</h3>
+        <p>BMI: {userProfile.bmi} ({bmiStatus}) | 每日建議熱量: {userProfile.dailyCalories} 卡</p>
+      </div>
+    );
+  };
+
+  return (
+    <div className="app-container">
+      <div className="header">
+        <h1 className="title">🍎 AI營養分析器</h1>
+        <p className="subtitle">個人化健康管理助手</p>
+      </div>
+      
+      <nav className="tab-nav">
+        <button 
+          className={`tab-btn ${activeTab === 'profile' ? 'active' : ''}`} 
+          onClick={() => setActiveTab('profile')}
+        >
+          👤 個人資料
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'analyze' ? 'active' : ''}`} 
+          onClick={() => setActiveTab('analyze')}
+        >
+          📸 食物分析
+        </button>
+        <button 
+          className={`tab-btn ${activeTab === 'tracking' ? 'active' : ''}`} 
+          onClick={() => setActiveTab('tracking')}
+        >
+          📊 追蹤記錄
+        </button>
+      </nav>
+      
+      {/* 個人資料頁面 */}
+      <div className={`tab-content ${activeTab === 'profile' ? 'active' : ''}`} id="profile">
+        <div className="profile-form">
+          <div className="input-group">
+            <label htmlFor="userName">姓名</label>
+            <input type="text" id="userName" placeholder="請輸入您的姓名" defaultValue={userProfile?.name || ''} />
+          </div>
+          
+          <div className="input-row">
+            <div className="input-group">
+              <label htmlFor="userAge">年齡</label>
+              <input type="number" id="userAge" placeholder="歲" min="1" max="120" defaultValue={userProfile?.age || ''} />
+            </div>
+            <div className="input-group">
+              <label htmlFor="userGender">性別</label>
+              <select id="userGender" defaultValue={userProfile?.gender || ''}>
+                <option value="">請選擇</option>
+                <option value="male">男性</option>
+                <option value="female">女性</option>
+              </select>
+            </div>
+          </div>
+          
+          <div className="input-row">
+            <div className="input-group">
+              <label htmlFor="userHeight">身高 (cm)</label>
+              <input type="number" id="userHeight" placeholder="公分" min="100" max="250" defaultValue={userProfile?.height || ''} />
+            </div>
+            <div className="input-group">
+              <label htmlFor="userWeight">體重 (kg)</label>
+              <input type="number" id="userWeight" placeholder="公斤" min="30" max="200" defaultValue={userProfile?.weight || ''} />
+            </div>
+          </div>
+          
+          <div className="input-group">
+            <label htmlFor="activityLevel">活動量</label>
+            <select id="activityLevel" defaultValue={userProfile?.activityLevel || ''}>
+              <option value="">請選擇活動量</option>
+              <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 className="input-group">
+            <label htmlFor="healthGoal">健康目標</label>
+            <select id="healthGoal" defaultValue={userProfile?.healthGoal || ''}>
+              <option value="">請選擇目標</option>
+              <option value="lose">減重</option>
+              <option value="maintain">維持體重</option>
+              <option value="gain">增重</option>
+              <option value="muscle">增肌</option>
+              <option value="health">保持健康</option>
+            </select>
+          </div>
+          
+          <button className="save-profile-btn" onClick={saveProfile}>💾 儲存個人資料</button>
+        </div>
+      </div>
+      
+      {/* 食物分析頁面 */}
+      <div className={`tab-content ${activeTab === 'analyze' ? 'active' : ''}`} id="analyze">
+        {!userProfile ? (
+          <div className="no-profile">
+            <p>請先完成個人資料設定，以獲得個人化營養建議 👆</p>
+          </div>
+        ) : (
+          <div>
+            <div className="camera-container">
+              <video ref={videoRef} id="video" autoPlay playsInline></video>
+              <canvas ref={canvasRef} id="canvas"></canvas>
+            </div>
+            
+            <div className="controls">
+              <button id="captureBtn" onClick={captureImage}>📸 拍照</button>
+              <input 
+                type="file" 
+                id="fileInput" 
+                className="file-input" 
+                accept="image/*" 
+                onChange={handleFileUpload}
+              />
+              <button 
+                id="uploadBtn" 
+                className="upload-btn" 
+                onClick={() => document.getElementById('fileInput').click()}
+              >
+                📁 上傳
+              </button>
+            </div>
+            
+            {isAnalyzing && (
+              <div className="loading" style={{ display: 'block' }}>
+                <div className="spinner"></div>
+                <p>AI正在分析食物...</p>
+              </div>
+            )}
+            
+            {error && !isAnalyzing && (
+              <div className="error-message" style={{ 
+                backgroundColor: '#ffebee',
+                color: '#c62828',
+                padding: '15px',
+                borderRadius: '8px',
+                margin: '20px 0',
+                borderLeft: '4px solid #ef5350',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '10px'
+              }}>
+                <span style={{ fontSize: '20px' }}>⚠️</span>
+                <div>
+                  <strong>錯誤：</strong>
+                  <p style={{ margin: '5px 0 0 0' }}>{error}</p>
+                </div>
+              </div>
+            )}
+            
+            {currentFoodAnalysis && !isAnalyzing && (
+              displayNutrition(currentFoodAnalysis.name, currentFoodAnalysis.nutrition)
+            )}
+          </div>
+        )}
+      </div>
+      
+      {/* 追蹤記錄頁面 */}
+      <div className={`tab-content ${activeTab === 'tracking' ? 'active' : ''}`} id="tracking">
+        {!userProfile ? (
+          <div className="no-profile">
+            <p>請先完成個人資料設定，開始追蹤您的營養攝取 👆</p>
+          </div>
+        ) : (
+          <div>
+            {updateWelcomeMessage()}
+            
+            <div className="stats-grid">
+              <div className="stat-card">
+                <div className="stat-number" id="todayCalories">
+                  {dailyMeals.reduce((total, meal) => total + meal.nutrition.calories, 0)}
+                </div>
+                <div className="stat-label">今日熱量</div>
+              </div>
+              <div className="stat-card">
+                <div className="stat-number" id="weeklyAvg">
+                  {Math.round(dailyMeals.reduce((total, meal) => total + meal.nutrition.calories, 0) * (0.8 + Math.random() * 0.4)) || 0}
+                </div>
+                <div className="stat-label">週平均</div>
+              </div>
+            </div>
+            
+            <div className="chart-container">
+              <h3 style={{ marginBottom: '1rem', color: '#333' }}>本週營養攝取趨勢</h3>
+              <canvas ref={chartRef} id="nutritionChart" width="400" height="200"></canvas>
+            </div>
+            
+            <div className="today-meals">
+              <h3 style={{ marginBottom: '1rem', color: '#333' }}>今日飲食記錄</h3>
+              <div id="mealsList">
+                {dailyMeals.length === 0 ? (
+                  <div className="meal-item">
+                    <div className="meal-info">
+                      <h4>尚無飲食記錄</h4>
+                      <span>開始分析食物來建立您的飲食記錄吧！</span>
+                    </div>
+                  </div>
+                ) : (
+                  dailyMeals.map(meal => (
+                    <div className="meal-item" key={meal.id}>
+                      <div className="meal-info">
+                        <h4>{meal.name}</h4>
+                        <span>{new Date(meal.timestamp).toLocaleTimeString()}</span>
+                      </div>
+                      <div className="meal-calories">{meal.nutrition.calories} 卡</div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { UserIcon, CalculatorIcon, CalendarIcon, CloudArrowUpIcon, ClipboardDocumentListIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+
+export default function Dashboard() {
+  // 狀態區
+  const [user, setUser] = useState({ name: '', age: '', height: '', weight: '', id: '' });
+  const [userCreated, setUserCreated] = useState(false);
+  const [foodDate, setFoodDate] = useState('');
+  const [foodCal, setFoodCal] = useState('');
+  const [foodCarb, setFoodCarb] = useState('');
+  const [foodProtein, setFoodProtein] = useState('');
+  const [foodMsg, setFoodMsg] = useState('');
+  const [bmi, setBmi] = useState(null);
+  const [bmiMsg, setBmiMsg] = useState('');
+  const [waterDate, setWaterDate] = useState('');
+  const [water, setWater] = useState('');
+  const [waterMsg, setWaterMsg] = useState('');
+  const [aiResult, setAiResult] = useState('');
+  const [history, setHistory] = useState([]);
+
+  // 處理邏輯
+  const handleCreateUser = (e) => { e.preventDefault(); setUserCreated(true); setUser({ ...user, id: '6' }); };
+  const handleAddFood = (e) => { e.preventDefault(); setFoodMsg('Food log added successfully.'); setHistory([...history, { date: foodDate, cal: foodCal, carb: foodCarb, protein: foodProtein }]); };
+  const handleCalcBmi = () => {
+    if (user.height && user.weight) {
+      const bmiVal = (user.weight / ((user.height / 100) ** 2)).toFixed(2);
+      setBmi(bmiVal);
+      let msg = '';
+      if (bmiVal < 18.5) msg = '體重過輕，建議均衡飲食與適度運動';
+      else if (bmiVal < 24) msg = '正常範圍，請繼續保持';
+      else msg = '體重過重，建議增加運動與飲食控制';
+      setBmiMsg(msg);
+    }
+  };
+  const handleAddWater = (e) => { e.preventDefault(); let msg = ''; if (water >= 2000) msg = '今日補水充足！'; else msg = '今日飲水量不足，請多補充水分！'; setWaterMsg(msg); };
+  const handleAi = () => { setAiResult('AI 分析結果：雞肉沙拉，約 350 kcal'); };
+  const handleQueryHistory = () => { setHistory(history); };
+
+  return (
+    <div className="min-h-screen bg-gray-100 py-10 px-2">
+      <div className="max-w-4xl mx-auto">
+        {/* 上方切換選單間隔 */}
+        <div className="flex flex-wrap gap-4 justify-center mb-10">
+          <a href="#user" className="tab-btn">用戶</a>
+          <a href="#food" className="tab-btn">飲食</a>
+          <a href="#bmi" className="tab-btn">BMI</a>
+          <a href="#water" className="tab-btn">水分</a>
+          <a href="#ai" className="tab-btn">AI</a>
+          <a href="#history" className="tab-btn">歷史</a>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+          {/* 用戶卡片 */}
+          <section id="user" className="bg-white rounded-2xl shadow-lg p-6 flex flex-col gap-4 border border-gray-100">
+            <div className="flex items-center gap-2 mb-2">
+              <UserIcon className="h-5 w-5 text-indigo-400" />
+              <span className="font-bold text-xl">用戶資料</span>
+            </div>
+            <form onSubmit={handleCreateUser} className="flex flex-col gap-2">
+              <input className="input" placeholder="姓名" value={user.name} onChange={e => setUser({ ...user, name: e.target.value })} />
+              <input className="input" placeholder="年齡" value={user.age} onChange={e => setUser({ ...user, age: e.target.value })} />
+              <input className="input" placeholder="身高 (cm)" value={user.height} onChange={e => setUser({ ...user, height: e.target.value })} />
+              <input className="input" placeholder="體重 (kg)" value={user.weight} onChange={e => setUser({ ...user, weight: e.target.value })} />
+              <button className="btn-primary mt-2 text-lg">建立用戶</button>
+            </form>
+            {userCreated && (
+              <>
+                <div className="text-xs text-gray-400 mt-1">用戶ID：6</div>
+                <button className="btn-secondary mt-1" onClick={() => setUserCreated(false)}>變更用戶資料</button>
+                <div className="mt-2 text-gray-700 text-base">
+                  <div>姓名：{user.name}</div>
+                  <div>年齡：{user.age}</div>
+                  <div>身高：{user.height} cm</div>
+                  <div>體重：{user.weight} kg</div>
+                </div>
+              </>
+            )}
+          </section>
+          {/* 飲食紀錄卡片 */}
+          <section id="food" className="bg-white rounded-2xl shadow-lg p-6 flex flex-col gap-4 border border-gray-100">
+            <div className="flex items-center gap-2 mb-2">
+              <ClipboardDocumentListIcon className="h-5 w-5 text-indigo-400" />
+              <span className="font-bold text-xl">飲食紀錄</span>
+            </div>
+            <form onSubmit={handleAddFood} className="flex flex-col gap-2">
+              <input className="input" type="date" value={foodDate} onChange={e => setFoodDate(e.target.value)} />
+              <input className="input" placeholder="熱量 (kcal)" value={foodCal} onChange={e => setFoodCal(e.target.value)} />
+              <input className="input" placeholder="碳水 (g)" value={foodCarb} onChange={e => setFoodCarb(e.target.value)} />
+              <input className="input" placeholder="蛋白質 (g)" value={foodProtein} onChange={e => setFoodProtein(e.target.value)} />
+              <button className="btn-primary mt-2 text-lg">新增紀錄</button>
+            </form>
+            {foodMsg && <div className="text-green-600 text-xs mt-1">{foodMsg}</div>}
+          </section>
+          {/* BMI 卡片 */}
+          <section id="bmi" className="bg-white rounded-2xl shadow-lg p-6 flex flex-col gap-4 border border-gray-100">
+            <div className="flex items-center gap-2 mb-2">
+              <CalculatorIcon className="h-5 w-5 text-indigo-400" />
+              <span className="font-bold text-xl">BMI 與建議</span>
+            </div>
+            <button className="btn-primary mb-2 text-lg" onClick={handleCalcBmi}>查詢 BMI</button>
+            {bmi && <div className="text-indigo-700 font-bold text-xl">BMI：{bmi}</div>}
+            {bmiMsg && <div className="text-base text-gray-600">{bmiMsg}</div>}
+          </section>
+          {/* 水分卡片 */}
+          <section id="water" className="bg-white rounded-2xl shadow-lg p-6 flex flex-col gap-4 border border-gray-100">
+            <div className="flex items-center gap-2 mb-2">
+              <CalendarIcon className="h-5 w-5 text-indigo-400" />
+              <span className="font-bold text-xl">水分攝取</span>
+            </div>
+            <form onSubmit={handleAddWater} className="flex flex-col gap-2">
+              <input className="input" type="date" value={waterDate} onChange={e => setWaterDate(e.target.value)} />
+              <input className="input" placeholder="今日飲水量 (ml)" value={water} onChange={e => setWater(e.target.value)} />
+              <button className="btn-primary mt-2 text-lg">登錄水分攝取</button>
+            </form>
+            {waterMsg && <div className="text-xs mt-1 text-blue-700">{waterMsg}</div>}
+          </section>
+          {/* AI 卡片 */}
+          <section id="ai" className="bg-white rounded-2xl shadow-lg p-6 flex flex-col gap-4 border border-gray-100">
+            <div className="flex items-center gap-2 mb-2">
+              <CloudArrowUpIcon className="h-5 w-5 text-indigo-400" />
+              <span className="font-bold text-xl">AI 食物辨識</span>
+            </div>
+            <input className="input mb-2 text-base" style={{fontSize:'1rem',padding:'0.5rem'}} placeholder="圖片檔案（模擬）" />
+            <button className="btn-primary text-lg" onClick={handleAi}>上傳與辨識</button>
+            {aiResult && <div className="text-green-700 text-xs mt-1">{aiResult}</div>}
+          </section>
+          {/* 歷史紀錄卡片 */}
+          <section id="history" className="bg-white rounded-2xl shadow-lg p-6 flex flex-col gap-4 border border-gray-100 md:col-span-2">
+            <div className="flex items-center gap-2 mb-2">
+              <ArrowPathIcon className="h-5 w-5 text-indigo-400" />
+              <span className="font-bold text-xl">歷史紀錄查詢</span>
+            </div>
+            <button className="btn-secondary mb-2 self-start text-lg" onClick={handleQueryHistory}>查詢所有歷史紀錄</button>
+            <div className="w-full overflow-x-auto">
+              <table className="min-w-full text-base">
+                <thead>
+                  <tr>
+                    <th className="px-2 py-1">日期</th>
+                    <th className="px-2 py-1">熱量</th>
+                    <th className="px-2 py-1">碳水</th>
+                    <th className="px-2 py-1">蛋白質</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {history.map((h, i) => (
+                    <tr key={i} className="border-t">
+                      <td className="px-2 py-1">{h.date}</td>
+                      <td className="px-2 py-1">{h.cal}</td>
+                      <td className="px-2 py-1">{h.carb}</td>
+                      <td className="px-2 py-1">{h.protein}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            {userCreated && (
+              <div className="mt-2 text-gray-700 text-base text-left w-full">
+                <div>用戶資料：</div>
+                <div>姓名：{user.name}</div>
+                <div>年齡：{user.age}</div>
+                <div>身高：{user.height} cm</div>
+                <div>體重：{user.weight} kg</div>
+                <div>用戶固定測試ID：6</div>
+              </div>
+            )}
+          </section>
+        </div>
+      </div>
+      {/* 簡單樣式 */}
+      <style>{`
+        .input { @apply rounded border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-300 text-lg; }
+        .btn-primary { @apply bg-gradient-to-r from-indigo-400 to-cyan-400 text-white px-4 py-2 rounded font-bold shadow hover:from-indigo-500 hover:to-cyan-500 transition; }
+        .btn-secondary { @apply bg-white border border-indigo-300 text-indigo-700 px-4 py-2 rounded font-bold shadow hover:bg-indigo-50 transition; }
+        .tab-btn {@apply px-4 py-2 rounded-full bg-white shadow text-indigo-600 font-bold border border-indigo-200 hover:bg-indigo-50 text-lg;}
+      `}</style>
+    </div>
+  );
+}

frontend/src/pages/ExerciseTracker.jsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { useState } from 'react';
+import { PlusIcon } from '@heroicons/react/24/outline';
+
+const exerciseTypes = [
+  { id: 'walking', name: '步行', caloriesPerMinute: 4 },
+  { id: 'running', name: '跑步', caloriesPerMinute: 10 },
+  { id: 'cycling', name: '騎自行車', caloriesPerMinute: 7 },
+  { id: 'swimming', name: '游泳', caloriesPerMinute: 8 },
+  { id: 'yoga', name: '瑜伽', caloriesPerMinute: 3 },
+  { id: 'weightlifting', name: '重訓', caloriesPerMinute: 6 },
+];
+
+export default function ExerciseTracker() {
+  const [selectedExercise, setSelectedExercise] = useState('');
+  const [duration, setDuration] = useState('');
+
+  const calculateCalories = () => {
+    const exercise = exerciseTypes.find(e => e.id === selectedExercise);
+    if (exercise && duration) {
+      return exercise.caloriesPerMinute * parseInt(duration);
+    }
+    return 0;
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white p-6 rounded-lg shadow">
+        <h2 className="text-2xl font-semibold text-gray-800 mb-6">記錄運動</h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="exercise-type" className="block text-sm font-medium text-gray-700">
+                運動類型
+              </label>
+              <select
+                id="exercise-type"
+                value={selectedExercise}
+                onChange={(e) => setSelectedExercise(e.target.value)}
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+              >
+                <option value="">選擇運動類型</option>
+                {exerciseTypes.map(type => (
+                  <option key={type.id} value={type.id}>{type.name}</option>
+                ))}
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="duration" className="block text-sm font-medium text-gray-700">
+                運動時間 (分鐘)
+              </label>
+              <input
+                type="number"
+                id="duration"
+                value={duration}
+                onChange={(e) => setDuration(e.target.value)}
+                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                placeholder="0"
+                min="0"
+              />
+            </div>
+
+            {selectedExercise && duration && (
+              <div className="p-4 bg-green-50 rounded-md">
+                <p className="text-green-700">預計消耗卡路里: {calculateCalories()} kcal</p>
+              </div>
+            )}
+
+            <button
+              type="button"
+              className="w-full flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+            >
+              <PlusIcon className="h-5 w-5 mr-2" />
+              新增記錄
+            </button>
+          </div>
+
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <h3 className="text-lg font-medium text-gray-900 mb-4">本週運動統計</h3>
+            <div className="space-y-4">
+              <div>
+                <div className="flex justify-between text-sm text-gray-600">
+                  <span>總運動時間</span>
+                  <span>180 分鐘</span>
+                </div>
+                <div className="w-full bg-gray-200 rounded-full h-2.5 mt-2">
+                  <div className="bg-indigo-600 h-2.5 rounded-full" style={{ width: '60%' }}></div>
+                </div>
+              </div>
+              <div>
+                <div className="flex justify-between text-sm text-gray-600">
+                  <span>消耗卡路里</span>
+                  <span>1,200 kcal</span>
+                </div>
+                <div className="w-full bg-gray-200 rounded-full h-2.5 mt-2">
+                  <div className="bg-green-600 h-2.5 rounded-full" style={{ width: '40%' }}></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* 運動記錄 */}
+      <div className="bg-white p-6 rounded-lg shadow">
+        <h3 className="text-xl font-semibold text-gray-800 mb-4">最近的運動記錄</h3>
+        <div className="overflow-x-auto">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">運動類型</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">時間 (分鐘)</th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">消耗卡路里</th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              <tr>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-04-21</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">跑步</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">300</td>
+              </tr>
+              <tr>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2025-04-20</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">重訓</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45</td>
+                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">270</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/FoodTracker.jsx

@@ -0,0 +1,337 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { XMarkIcon, InboxArrowDownIcon, CalendarIcon, ClockIcon, ChartBarIcon } from '@heroicons/react/24/outline';
+import axios from 'axios';
+
+export default function FoodTracker() {
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+  const [analysisResults, setAnalysisResults] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [mealType, setMealType] = useState('lunch');
+  const [mealDate, setMealDate] = useState(new Date().toISOString().split('T')[0]);
+  const [mealTime, setMealTime] = useState(new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' }));
+  const [portionSize, setPortionSize] = useState('medium');
+  const [nutritionSummary, setNutritionSummary] = useState(null);
+  const [recentMeals, setRecentMeals] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const imageRef = useRef(null);
+
+  const handleDrop = async (event) => {
+    event.preventDefault();
+    setIsDragging(false);
+    if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+      await handleImageUpload({ target: { files: event.dataTransfer.files } });
+    }
+  };
+
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleImageUpload = async (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setSelectedImage(reader.result);
+      };
+      reader.readAsDataURL(file);
+
+      setIsAnalyzing(true);
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const response = await fetch('http://localhost:8000/api/ai/analyze-food', {
+          method: 'POST',
+          body: formData,
+        });
+
+        if (!response.ok) {
+          throw new Error('分析請求失敗');
+        }
+
+        const data = await response.json();
+
+        if (data.success && data.top_prediction) {
+          setAnalysisResults(data);
+        } else {
+          throw new Error(data.error || 'AI 無法識別這道食物');
+        }
+      } catch (error) {
+        console.error('Error analyzing image:', error);
+        alert(error.message || '圖片分析失敗，請稍後再試');
+      } finally {
+        setIsAnalyzing(false);
+      }
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
+      <div className="relative py-3 sm:max-w-xl sm:mx-auto">
+        <div className="relative px-4 py-10 bg-white mx-8 md:mx-0 shadow rounded-3xl sm:p-10">
+          <div className="max-w-md mx-auto">
+            <div className="divide-y divide-gray-200">
+              <div className="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
+                <div className="flex flex-col items-center">
+                  <h2 className="text-2xl font-bold mb-4">AI 智慧食物分析</h2>
+
+                  {/* 上傳區域 */}
+                  <div
+                    className={`border-2 ${isDragging ? 'border-indigo-500 bg-indigo-100' : 'border-gray-300'} 
+                    border-dashed rounded-lg p-8 w-full max-w-sm transition-all`}
+                    onDrop={handleDrop}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                  >
+                    {selectedImage ? (
+                      <div className="relative">
+                        <img
+                          ref={imageRef}
+                          src={selectedImage}
+                          alt="預覽"
+                          className="max-w-full h-48 object-contain rounded-lg"
+                        />
+                        <button
+                          onClick={() => {
+                            setSelectedImage(null);
+                            setAnalysisResults(null);
+                          }}
+                          className="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600"
+                        >
+                          <XMarkIcon className="h-5 w-5" />
+                        </button>
+                      </div>
+                    ) : (
+                      <div className="space-y-3 flex flex-col items-center justify-center">
+                        <InboxArrowDownIcon className="h-12 w-12 text-gray-400" />
+                        <div className="text-gray-600">
+                          拖曳圖片到這裡，或
+                          <label htmlFor="food-image" className="text-indigo-600 hover:text-indigo-700 cursor-pointer mx-1">
+                            點擊上傳
+                          </label>
+                        </div>
+                        <input
+                          id="food-image"
+                          type="file"
+                          accept="image/*"
+                          onChange={handleImageUpload}
+                          className="hidden"
+                        />
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 載入中動畫 */}
+                  {analysisResults && (
+                    <div className="mt-4 p-4 bg-green-50 rounded-lg">
+                      <h3 className="text-lg font-semibold text-green-800 mb-2">分析結果</h3>
+                      <p className="text-green-700 mb-4">這是：{analysisResults.top_prediction}</p>
+                      
+                      {/* 營養資訊 */}
+                      <div className="grid grid-cols-2 gap-4 mb-4">
+                        <div className="bg-white p-3 rounded-lg shadow-sm">
+                          <p className="text-sm text-gray-500">熱量</p>
+                          <p className="font-semibold">{analysisResults.nutrition?.calories || '--'} kcal</p>
+                        </div>
+                        <div className="bg-white p-3 rounded-lg shadow-sm">
+                          <p className="text-sm text-gray-500">蛋白質</p>
+                          <p className="font-semibold">{analysisResults.nutrition?.protein || '--'} g</p>
+                        </div>
+                        <div className="bg-white p-3 rounded-lg shadow-sm">
+                          <p className="text-sm text-gray-500">碳水化合物</p>
+                          <p className="font-semibold">{analysisResults.nutrition?.carbs || '--'} g</p>
+                        </div>
+                        <div className="bg-white p-3 rounded-lg shadow-sm">
+                          <p className="text-sm text-gray-500">脂肪</p>
+                          <p className="font-semibold">{analysisResults.nutrition?.fat || '--'} g</p>
+                        </div>
+                      </div>
+
+                      {/* 用餐記錄 */}
+                      <div className="space-y-4">
+                        <div className="flex items-center space-x-4">
+                          <div className="flex-1">
+                            <label className="block text-sm font-medium text-gray-700 mb-1">用餐類型</label>
+                            <select
+                              value={mealType}
+                              onChange={(e) => setMealType(e.target.value)}
+                              className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                            >
+                              <option value="breakfast">早餐</option>
+                              <option value="lunch">午餐</option>
+                              <option value="dinner">晚餐</option>
+                              <option value="snack">點心</option>
+                            </select>
+                          </div>
+                          <div className="flex-1">
+                            <label className="block text-sm font-medium text-gray-700 mb-1">份量</label>
+                            <select
+                              value={portionSize}
+                              onChange={(e) => setPortionSize(e.target.value)}
+                              className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                            >
+                              <option value="small">小份</option>
+                              <option value="medium">中份</option>
+                              <option value="large">大份</option>
+                            </select>
+                          </div>
+                        </div>
+                        
+                        <div className="flex items-center space-x-4">
+                          <div className="flex-1">
+                            <label className="block text-sm font-medium text-gray-700 mb-1">日期</label>
+                            <div className="relative">
+                              <CalendarIcon className="h-5 w-5 text-gray-400 absolute left-3 top-2.5" />
+                              <input
+                                type="date"
+                                value={mealDate}
+                                onChange={(e) => setMealDate(e.target.value)}
+                                className="w-full pl-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                              />
+                            </div>
+                          </div>
+                          <div className="flex-1">
+                            <label className="block text-sm font-medium text-gray-700 mb-1">時間</label>
+                            <div className="relative">
+                              <ClockIcon className="h-5 w-5 text-gray-400 absolute left-3 top-2.5" />
+                              <input
+                                type="time"
+                                value={mealTime}
+                                onChange={(e) => setMealTime(e.target.value)}
+                                className="w-full pl-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+                              />
+                            </div>
+                          </div>
+                        </div>
+
+                        <button
+                        onClick={async () => {
+                          try {
+                            setIsLoading(true);
+                            const mealDateTime = new Date(`${mealDate}T${mealTime}`);
+                            
+                            // 儲存用餐記錄
+                            await axios.post('http://localhost:8000/api/meals/log', {
+                              food_name: analysisResults.top_prediction,
+                              meal_type: mealType,
+                              portion_size: portionSize,
+                              meal_date: mealDateTime.toISOString(),
+                              nutrition: analysisResults.nutrition,
+                              image_url: selectedImage,
+                              ai_analysis: analysisResults
+                            });
+
+                            // 更新營養總結
+                            const today = new Date();
+                            const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+                            const endDate = new Date(startDate);
+                            endDate.setDate(endDate.getDate() + 1);
+
+                            const summaryResponse = await axios.post('http://localhost:8000/api/meals/nutrition-summary', {
+                              start_date: startDate.toISOString(),
+                              end_date: endDate.toISOString()
+                            });
+                            
+                            setNutritionSummary(summaryResponse.data.data);
+
+                            // 更新最近用餐記錄
+                            const logsResponse = await axios.post('http://localhost:8000/api/meals/list', {
+                              start_date: startDate.toISOString(),
+                              end_date: endDate.toISOString()
+                            });
+                            
+                            setRecentMeals(logsResponse.data.data);
+                            alert('記錄已儲存！');
+                            
+                            // 清空當前分析
+                            setSelectedImage(null);
+                            setAnalysisResults(null);
+                          } catch (error) {
+                            console.error('Error saving meal log:', error);
+                            alert('儲存失敗：' + (error.response?.data?.detail || error.message));
+                          } finally {
+                            setIsLoading(false);
+                          }
+                        }}
+                        className="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                      >
+                        記錄這餐
+                        </button>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* 分析結果 */}
+                  {analysisResults && analysisResults.success && (
+                    <div className="mt-6 space-y-4 w-full">
+                      {/* 主要預測結果 */}
+                      <div className="text-center">
+                        <h3 className="text-xl font-semibold text-indigo-600 mb-2">
+                          分析結果
+                        </h3>
+                        <p className="text-lg text-gray-800">
+                          {analysisResults.top_prediction?.label}
+                          <span className="text-gray-500 text-base ml-2">
+                            ({Math.round(analysisResults.top_prediction?.confidence)}% 確信度)
+                          </span>
+                        </p>
+                      </div>
+
+                      {/* 營養資訊 */}
+                      {analysisResults.top_prediction?.nutrition && (
+                        <div className="bg-gray-50 p-4 rounded-lg">
+                          <h4 className="font-semibold mb-3 text-gray-700">營養資訊</h4>
+                          <div className="grid grid-cols-2 gap-3">
+                            <div className="flex justify-between">
+                              <span>熱量:</span>
+                              <span>{analysisResults.top_prediction.nutrition.calories} kcal</span>
+                            </div>
+                            <div className="flex justify-between">
+                              <span>蛋白質:</span>
+                              <span>{analysisResults.top_prediction.nutrition.protein}g</span>
+                            </div>
+                            <div className="flex justify-between">
+                              <span>碳水化合物:</span>
+                              <span>{analysisResults.top_prediction.nutrition.carbs}g</span>
+                            </div>
+                            <div className="flex justify-between">
+                              <span>脂肪:</span>
+                              <span>{analysisResults.top_prediction.nutrition.fat}g</span>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+
+                      {/* 食物描述 */}
+                      {analysisResults.top_prediction?.description && (
+                        <div className="bg-blue-50 p-4 rounded-lg">
+                          <h4 className="font-semibold mb-2 text-gray-700">食物描述</h4>
+                          <p className="text-gray-600">
+                            {analysisResults.top_prediction.description}
+                          </p>
+                        </div>
+                      )}
+
+                      {/* 分析時間 */}
+                      <div className="text-xs text-gray-500 text-center">
+                        分析時間: {new Date(analysisResults.analysis_time).toLocaleString()}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Login.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Login() {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow max-w-md mx-auto mt-10">
+      <h2 className="text-2xl font-semibold text-gray-800 mb-6">登入</h2>
+      <form className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">帳號</label>
+          <input className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" type="text" placeholder="請輸入帳號" />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700">密碼</label>
+          <input className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" type="password" placeholder="請輸入密碼" />
+        </div>
+        <button type="submit" className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">登入</button>
+      </form>
+    </div>
+  );
+}

frontend/src/pages/Profile.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function Profile() {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow">
+      <h2 className="text-2xl font-semibold text-gray-800 mb-6">個人資料</h2>
+      <p>這裡可以顯示和編輯您的個人資訊。</p>
+    </div>
+  );
+}

frontend/src/pages/Register.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Register() {
+  return (
+    <div className="bg-white p-6 rounded-lg shadow max-w-md mx-auto mt-10">
+      <h2 className="text-2xl font-semibold text-gray-800 mb-6">註冊</h2>
+      <form className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-gray-700">帳號</label>
+          <input className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" type="text" placeholder="請輸入帳號" />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-gray-700">密碼</label>
+          <input className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" type="password" placeholder="請輸入密碼" />
+        </div>
+        <button type="submit" className="w-full px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">註冊</button>
+      </form>
+    </div>
+  );
+}