# Hugging Face Spaces 部署指南

## 快速部署步驟

### 1. 建立新的Hugging Face Space

1. 前往 https://huggingface.co/spaces
2. 點擊 "Create new Space"
3. 設定如下：
   - **Space name**: `travel-list-app` (或您喜歡的名稱)
   - **License**: MIT
   - **SDK**: Gradio
   - **Hardware**: CPU basic (免費)
   - **Visibility**: Public

### 2. 上傳檔案

將以下檔案上傳到您的Space：

```
📁 必要檔案清單：
├── app.py                    # Gradio入口檔案
├── requirements.txt          # Python依賴
├── README.md                # 專案說明
└── src/
    ├── main.py              # Flask主程式
    ├── models/
    │   └── travel.py        # 資料模型
    ├── routes/
    │   └── travel.py        # API路由
    ├── static/              # 前端檔案
    │   ├── index.html
    │   └── assets/
    └── database/
        └── app.db           # SQLite資料庫檔案
```

### 3. 使用Git上傳 (推薦)

```bash
# 1. 複製您的Space repository
git clone https://huggingface.co/spaces/YOUR_USERNAME/SPACE_NAME
cd SPACE_NAME

# 2. 複製專案檔案
cp -r /path/to/travel_list_backend/* .

# 3. 提交並推送
git add .
git commit -m "Deploy travel list app"
git push
```

### 4. 檢查部署

- 上傳完成後，Hugging Face會自動開始建置
- 在Space的 "Logs" 標籤查看建置進度
- 建置成功後，應用程式將在Space URL上可用

## 檔案說明

### app.py
- Hugging Face Spaces的入口檔案
- 使用Gradio包裝Flask應用程式
- 在背景執行Flask服務

### requirements.txt
- 包含所有必要的Python依賴
- 包括Flask、SQLAlchemy、CORS、Gradio等

### src/main.py
- Flask應用程式的主要入口
- 設定路由、資料庫、CORS等

### src/models/travel.py
- 定義TravelList和TravelItem資料模型
- 使用SQLAlchemy ORM

### src/routes/travel.py
- 定義所有API端點
- 處理CRUD操作

### src/static/
- 包含建置好的React前端檔案
- 由Flask直接提供服務

## 常見問題

### Q: 部署後無法存取？
A: 檢查Logs標籤是否有錯誤訊息，確保所有檔案都已正確上傳。

### Q: 資料庫錯誤？
A: 確保database/app.db檔案已上傳，或讓應用程式自動建立。

### Q: 前端無法載入？
A: 確保static/目錄包含所有建置檔案，特別是index.html。

### Q: API呼叫失敗？
A: 檢查CORS設定，確保前端使用相對路徑呼叫API。

## 測試清單

部署後請測試以下功能：

- [ ] 首頁正常載入
- [ ] 可以建立新清單
- [ ] 可以使用代碼進入清單
- [ ] 可以新增旅遊項目
- [ ] 核取方塊功能正常
- [ ] 完成項目移到底部
- [ ] 編輯和刪除功能正常
- [ ] 多個瀏覽器標籤同步更新

## 支援

如有問題，請檢查：
1. Hugging Face Space的Logs標籤
2. 瀏覽器開發者工具的Console
3. 確保所有檔案都已正確上傳