Add Flask web application with Docker support

- Add Flask application (app.py)
- Add HTML template for main page
- Add requirements.txt with Flask dependency
- Add Dockerfile for containerization
- Update README with project information

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Dockerfile

@@ -0,0 +1,14 @@
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,32 @@
 ---
-title: Lsw Html Creator
-emoji: 📚
-colorFrom: red
-colorTo: red
+title: LSW HTML Creator
+emoji: 📝
+colorFrom: purple
+colorTo: blue
 sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 龍顏文學獎 HTML 建立器
+
+這是一個專為龍顏文學獎設計的 HTML 靜態頁面生成器，具有以下功能：
+
+1. **HTML 模板編輯器** - 提供可自訂的 HTML 模板
+2. **變數替換系統** - 支援 Jinja2 模板語法的變數替換
+3. **Google Sheets 整合** - 自動同步歷年得獎紀錄
+4. **一鍵生成** - 點擊按鈕即可下載完整的靜態 HTML 檔案
+
+## 環境變數設定
+
+在 Hugging Face Spaces 設定中加入以下環境變數：
+
+- `GOOGLE_CREDENTIALS`: Google Service Account 的 JSON 憑證（字串格式）
+- `SHEET_ID`: Google Sheets 的 ID
+- `SHEET_RANGE`: 要讀取的範圍（預設為 "Sheet1!A:Z"）
+
+## 使用方式
+
+1. 在模板區域編輯 HTML 模板，使用 `{{ 變數名 }}` 語法
+2. 在變數區域輸入 JSON 格式的變數值
+3. 歷年得獎紀錄會自動從 Google Sheets 載入
+4. 點擊「生成 HTML 檔案」按鈕下載結果

app.py

@@ -0,0 +1,98 @@
+from fastapi import FastAPI, Request, Form
+from fastapi.responses import HTMLResponse, Response
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from typing import Dict, List, Optional
+import httpx
+import json
+from googleapiclient.discovery import build
+from google.oauth2 import service_account
+import os
+from datetime import datetime
+
+app = FastAPI()
+
+templates = Jinja2Templates(directory="templates")
+
+GOOGLE_SHEETS_SCOPES = ['https://www.googleapis.com/auth/spreadsheets.readonly']
+GOOGLE_CREDENTIALS = os.getenv("GOOGLE_CREDENTIALS", "{}")
+SHEET_ID = os.getenv("SHEET_ID", "")
+SHEET_RANGE = os.getenv("SHEET_RANGE", "Sheet1!A:Z")
+
+def get_sheets_data():
+    """Fetch data from Google Sheets"""
+    try:
+        if not GOOGLE_CREDENTIALS or GOOGLE_CREDENTIALS == "{}":
+            return []
+        
+        creds_dict = json.loads(GOOGLE_CREDENTIALS)
+        creds = service_account.Credentials.from_service_account_info(
+            creds_dict, scopes=GOOGLE_SHEETS_SCOPES
+        )
+        
+        service = build('sheets', 'v4', credentials=creds)
+        sheet = service.spreadsheets()
+        
+        result = sheet.values().get(
+            spreadsheetId=SHEET_ID,
+            range=SHEET_RANGE
+        ).execute()
+        
+        values = result.get('values', [])
+        if not values:
+            return []
+        
+        headers = values[0]
+        data = []
+        for row in values[1:]:
+            record = {}
+            for i, header in enumerate(headers):
+                record[header] = row[i] if i < len(row) else ""
+            data.append(record)
+        
+        return data
+    except Exception as e:
+        print(f"Error fetching Google Sheets data: {e}")
+        return []
+
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    awards_data = get_sheets_data()
+    return templates.TemplateResponse(
+        "index.html",
+        {
+            "request": request,
+            "awards_data": awards_data
+        }
+    )
+
+@app.post("/generate-html")
+async def generate_html(
+    template_content: str = Form(...),
+    variables: str = Form("{}")
+):
+    try:
+        variables_dict = json.loads(variables)
+        awards_data = get_sheets_data()
+        
+        variables_dict['awards_data'] = awards_data
+        variables_dict['current_year'] = datetime.now().year
+        
+        from jinja2 import Template
+        template = Template(template_content)
+        generated_html = template.render(**variables_dict)
+        
+        return Response(
+            content=generated_html,
+            media_type="text/html",
+            headers={
+                "Content-Disposition": f"attachment; filename=generated_{datetime.now().strftime('%Y%m%d_%H%M%S')}.html"
+            }
+        )
+    except Exception as e:
+        return {"error": str(e)}
+
+@app.get("/api/awards")
+async def get_awards():
+    """API endpoint to fetch awards data"""
+    return {"awards": get_sheets_data()}

requirements.txt

@@ -0,0 +1,9 @@
+fastapi
+uvicorn[standard]
+jinja2
+httpx
+google-auth
+google-auth-oauthlib
+google-auth-httplib2
+google-api-python-client
+python-multipart

templates/index.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>龍顏文學獎 HTML 建立器</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Microsoft JhengHei', Arial, sans-serif;
+            background-color: #f5f5f5;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 30px;
+            text-align: center;
+            font-size: 2.5em;
+        }
+        .section {
+            margin-bottom: 30px;
+            padding: 20px;
+            background-color: #f9f9f9;
+            border-radius: 8px;
+            border: 1px solid #e0e0e0;
+        }
+        .section h2 {
+            color: #555;
+            margin-bottom: 15px;
+            font-size: 1.5em;
+        }
+        .template-area {
+            width: 100%;
+            min-height: 400px;
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            background-color: #fafafa;
+            resize: vertical;
+        }
+        .variables-area {
+            width: 100%;
+            min-height: 200px;
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            background-color: #fafafa;
+            resize: vertical;
+        }
+        .awards-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 10px;
+        }
+        .awards-table th,
+        .awards-table td {
+            padding: 10px;
+            border: 1px solid #ddd;
+            text-align: left;
+        }
+        .awards-table th {
+            background-color: #f0f0f0;
+            font-weight: bold;
+        }
+        .generate-btn {
+            background-color: #4CAF50;
+            color: white;
+            padding: 15px 40px;
+            font-size: 18px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            display: block;
+            margin: 30px auto;
+            transition: background-color 0.3s;
+        }
+        .generate-btn:hover {
+            background-color: #45a049;
+        }
+        .info-box {
+            background-color: #e8f4f8;
+            border-left: 4px solid #2196F3;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+        .template-help {
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #f0f8ff;
+            border-radius: 5px;
+            font-size: 0.9em;
+            color: #666;
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            color: #666;
+            margin: 20px 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>龍顏文學獎 HTML 建立器</h1>
+        
+        <div class="info-box">
+            <p><strong>使用說明：</strong></p>
+            <ul style="margin-left: 20px; margin-top: 10px;">
+                <li>在模板區域輸入 HTML 模板，使用 {{ 變數名 }} 來標記變數</li>
+                <li>在變數區域輸入 JSON 格式的變數值</li>
+                <li>歷年得獎紀錄會自動從 Google Sheets 同步</li>
+                <li>點擊生成按鈕即可下載完整的 HTML 檔案</li>
+            </ul>
+        </div>
+
+        <form id="htmlGeneratorForm" action="/generate-html" method="post">
+            <div class="section">
+                <h2>HTML 模板</h2>
+                <div class="template-help">
+                    <strong>可用變數：</strong>
+                    <code>{{ title }}</code>, <code>{{ subtitle }}</code>, <code>{{ content }}</code>, 
+                    <code>{{ current_year }}</code>, <code>{{ awards_data }}</code>
+                </div>
+                <textarea name="template_content" class="template-area" placeholder="輸入 HTML 模板..."><!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+    <style>
+        body {
+            font-family: 'Microsoft JhengHei', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f5f5f5;
+        }
+        .hero {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 60px 20px;
+            text-align: center;
+        }
+        .hero h1 {
+            font-size: 3em;
+            margin-bottom: 20px;
+        }
+        .content {
+            max-width: 1200px;
+            margin: 40px auto;
+            padding: 0 20px;
+        }
+        .awards-section {
+            background: white;
+            padding: 40px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .award-item {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+        }
+        .award-item:last-child {
+            border-bottom: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="hero">
+        <h1>{{ title }}</h1>
+        <p>{{ subtitle }}</p>
+    </div>
+    
+    <div class="content">
+        <div class="awards-section">
+            <h2>歷年得獎紀錄</h2>
+            {% for award in awards_data %}
+            <div class="award-item">
+                <h3>{{ award.年份 }} - {{ award.獎項 }}</h3>
+                <p><strong>得獎者：</strong>{{ award.得獎者 }}</p>
+                <p><strong>作品：</strong>{{ award.作品名稱 }}</p>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</body>
+</html></textarea>
+            </div>
+
+            <div class="section">
+                <h2>變數設定</h2>
+                <textarea name="variables" class="variables-area" placeholder='輸入 JSON 格式的變數，例如：{"title": "龍顏文學獎", "subtitle": "2024年度頒獎典禮"}'>
+{
+    "title": "龍顏文學獎",
+    "subtitle": "致力於推廣優秀文學創作",
+    "content": "歡迎來到龍顏文學獎官方網站"
+}</textarea>
+            </div>
+
+            <div class="section">
+                <h2>歷年得獎紀錄（自動同步）</h2>
+                <div class="loading" id="awardsLoading">載入中...</div>
+                {% if awards_data %}
+                <table class="awards-table">
+                    <thead>
+                        <tr>
+                            {% for key in awards_data[0].keys() %}
+                            <th>{{ key }}</th>
+                            {% endfor %}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for award in awards_data %}
+                        <tr>
+                            {% for value in award.values() %}
+                            <td>{{ value }}</td>
+                            {% endfor %}
+                        </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+                {% else %}
+                <p style="color: #666;">尚未設定 Google Sheets 或無資料</p>
+                {% endif %}
+            </div>
+
+            <button type="submit" class="generate-btn">生成 HTML 檔案</button>
+        </form>
+    </div>
+
+    <script>
+        document.getElementById('htmlGeneratorForm').addEventListener('submit', function(e) {
+            const variables = document.querySelector('[name="variables"]').value;
+            try {
+                JSON.parse(variables);
+            } catch (error) {
+                e.preventDefault();
+                alert('變數格式錯誤！請輸入有效的 JSON 格式');
+                return false;
+            }
+        });
+    </script>
+</body>
+</html>