Initial commit: Certificate Master

.gitignore

@@ -0,0 +1,8 @@
+__pycache__/
+*.py[cod]
+*$py.class
+.DS_Store
+.env
+venv/
+.idea/
+.vscode/

Dockerfile

@@ -0,0 +1,24 @@
+FROM python:3.9-slim
+
+# Install Chinese fonts for Pillow to use as fallback
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    fonts-wqy-zenhei \
+    fonts-noto-cjk \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a user to avoid running as root (good practice for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,73 @@
+---
+title: Certificate Master
+emoji: 🎓
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+pinned: false
+license: mit
+short_description: 批量证书生成大师 - 可视化拖拽设计
+app_port: 7860
+---
+
+# 🎓 证书批量生成大师 (Certificate Master)
+
+一个强大且易用的在线批量证书/奖状生成工具。专为教育机构、社群运营、课程讲师设计，帮助你快速为学员生成个性化的证书图片。
+
+## ✨ 核心功能
+
+*   **🎨 可视化设计**: 上传背景图，通过拖拽自由排版文字位置。
+*   **📝 数据批量导入**: 支持 JSON 格式批量导入学员名单、日期、编号等数据。
+*   **✒️ 字体自定义**: 支持上传自定义字体文件（ttf/otf），完美还原设计稿。
+*   **👁️ 实时预览**: 所见即所得，实时查看生成效果。
+*   **📦 批量导出**: 一键生成所有证书并打包为 ZIP 下载。
+*   **🔒 隐私安全**: 核心生成逻辑在服务器内存中完成，不保存任何用户数据。
+
+## 🚀 快速开始
+
+### 本地运行
+
+1.  克隆仓库：
+    ```bash
+    git clone https://github.com/your-username/certificate-master.git
+    cd certificate-master
+    ```
+
+2.  安装依赖：
+    ```bash
+    pip install -r requirements.txt
+    ```
+
+3.  启动服务：
+    ```bash
+    python app.py
+    ```
+
+4.  打开浏览器访问：`http://localhost:7860`
+
+### Docker 部署
+
+```bash
+docker build -t certificate-master .
+docker run -p 7860:7860 certificate-master
+```
+
+## 🛠️ 使用指南
+
+1.  **准备素材**: 准备一张空白的证书背景图（推荐 JPG/PNG）。
+2.  **上传背景**: 在左侧面板上传背景图。
+3.  **添加字段**: 点击“添加文本字段”，在画布上拖拽调整位置。
+4.  **配置数据**: 在数据录入区输入 JSON 列表，例如 `[{"name": "张三"}, {"name": "李四"}]`。
+5.  **关联变量**: 在字段设置中，将内容模板设为 `{name}` 即可自动替换。
+6.  **调整样式**: 设置字体大小、颜色、对齐方式。
+7.  **生成下载**: 点击右上角按钮，等待生成并下载 ZIP 包。
+
+## 💻 技术栈
+
+*   **Frontend**: Vue 3 + Tailwind CSS (无需构建，CDN引入)
+*   **Backend**: Flask + Pillow (Python图像处理)
+*   **Deployment**: Docker
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 PR！

app.py

@@ -0,0 +1,143 @@
+import os
+import json
+import io
+import zipfile
+from flask import Flask, render_template, request, send_file, jsonify
+from PIL import Image, ImageDraw, ImageFont, ImageColor
+
+app = Flask(__name__)
+
+# Default font paths to try if no font is uploaded
+DEFAULT_FONTS = [
+    "/usr/share/fonts/truetype/wqy/wqy-zenhei.ttc",
+    "/usr/share/fonts/truetype/noto/NotoSansCJK-Regular.ttc",
+    "/System/Library/Fonts/PingFang.ttc",  # MacOS
+    "simhei.ttf", # Windows/Local
+    "arial.ttf"   # Fallback English
+]
+
+def load_font(font_file, size):
+    """Load a font from a file object or default system paths."""
+    if font_file:
+        return ImageFont.truetype(font_file, size)
+    
+    for font_path in DEFAULT_FONTS:
+        try:
+            return ImageFont.truetype(font_path, size)
+        except OSError:
+            continue
+    
+    # Absolute fallback
+    return ImageFont.load_default()
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/generate', methods=['POST'])
+def generate_certificates():
+    try:
+        # 1. Get Resources
+        if 'background' not in request.files:
+            return jsonify({"error": "No background image provided"}), 400
+        
+        bg_file = request.files['background']
+        font_file = request.files.get('font')
+        
+        # 2. Get Data & Config
+        # config: [{"id": "name", "x": 100, "y": 100, "size": 40, "color": "#000000", "align": "left", "template": "{name}"}]
+        config_str = request.form.get('config', '[]')
+        # data: [{"name": "Alice", "date": "2023-01-01"}, ...]
+        data_str = request.form.get('data', '[]')
+        
+        try:
+            config = json.loads(config_str)
+            data_list = json.loads(data_str)
+        except json.JSONDecodeError:
+            return jsonify({"error": "Invalid JSON in config or data"}), 400
+
+        if not data_list:
+            return jsonify({"error": "No data rows provided"}), 400
+
+        # 3. Prepare ZIP
+        zip_buffer = io.BytesIO()
+        with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
+            
+            # Load background once to get dimensions/mode
+            bg_image = Image.open(bg_file).convert("RGB")
+            
+            # Load font bytes once if provided, so we can reuse them
+            font_bytes = None
+            if font_file:
+                font_bytes = io.BytesIO(font_file.read())
+            
+            for idx, row in enumerate(data_list):
+                # Create a fresh copy for each certificate
+                cert_img = bg_image.copy()
+                draw = ImageDraw.Draw(cert_img)
+                
+                for field in config:
+                    # Parse Config
+                    text_template = field.get('template', '')
+                    x = int(field.get('x', 0))
+                    y = int(field.get('y', 0))
+                    size = int(field.get('size', 30))
+                    color = field.get('color', '#000000')
+                    align = field.get('align', 'left') # left, center, right
+                    
+                    # Format Text
+                    try:
+                        text = text_template.format(**row)
+                    except KeyError as e:
+                        text = text_template # Fallback if key missing
+                    
+                    # Load Font (We create a new font obj for each size, but reusing bytes if possible)
+                    if font_bytes:
+                        font_bytes.seek(0)
+                        font = ImageFont.truetype(font_bytes, size)
+                    else:
+                        font = load_font(None, size)
+                    
+                    # Calculate Anchor/Position
+                    # Pillow's text method supports 'anchor' in newer versions, but let's do manual calc for compatibility if needed
+                    # 'la' (Left Ascender) is default. 'mm' is middle middle. 'ma' is middle ascender.
+                    # Simple alignment handling:
+                    
+                    anchor = 'la' # default left-top-ish (ascender)
+                    if align == 'center':
+                        anchor = 'ma' # middle ascender (top-centered)
+                    elif align == 'right':
+                        anchor = 'ra' # right ascender
+                        
+                    # Draw
+                    draw.text((x, y), text, fill=color, font=font, anchor=anchor)
+                
+                # Save individual file to ZIP
+                img_buffer = io.BytesIO()
+                cert_img.save(img_buffer, format="PNG")
+                
+                # Naming: Use first field or index
+                filename = f"certificate_{idx+1}.png"
+                if len(config) > 0 and config[0]['id'] in row:
+                     # Try to use the value of the first configured field as filename safe string
+                     safe_name = "".join([c for c in str(row[config[0]['id']]) if c.isalnum() or c in (' ', '-', '_')]).strip()
+                     if safe_name:
+                         filename = f"{safe_name}.png"
+                
+                zip_file.writestr(filename, img_buffer.getvalue())
+
+        zip_buffer.seek(0)
+        return send_file(
+            zip_buffer,
+            mimetype='application/zip',
+            as_attachment=True,
+            download_name='certificates.zip'
+        )
+
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,3 @@
+Flask>=3.0.0
+Pillow>=10.0.0
+gunicorn>=21.2.0

templates/index.html

@@ -0,0 +1,517 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>证书批量生成大师 | Certificate Master</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        .canvas-container {
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            background-image: 
+                linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
+                linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
+                linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
+                linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
+            background-size: 20px 20px;
+            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+        }
+        .draggable-field {
+            position: absolute;
+            cursor: move;
+            user-select: none;
+            border: 1px dashed transparent;
+            white-space: nowrap;
+        }
+        .draggable-field:hover, .draggable-field.active {
+            border-color: #3b82f6;
+            background-color: rgba(59, 130, 246, 0.1);
+        }
+        .draggable-field.active::after {
+            content: '';
+            position: absolute;
+            top: -4px; left: -4px; right: -4px; bottom: -4px;
+            border: 1px solid #2563eb;
+            pointer-events: none;
+        }
+        /* Hide scrollbar for clean UI */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f1f1f1; 
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #c1c1c1; 
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #a8a8a8; 
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800 h-screen flex flex-col">
+
+    <div id="app" class="flex flex-col h-full">
+        <!-- Header -->
+        <header class="bg-white border-b border-gray-200 px-6 py-3 flex justify-between items-center flex-shrink-0 z-10">
+            <div class="flex items-center gap-3">
+                <div class="bg-blue-600 text-white p-2 rounded-lg">
+                    <i class="fas fa-certificate text-xl"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold text-gray-900">Certificate Master</h1>
+                    <p class="text-xs text-gray-500">批量证书生成大师</p>
+                </div>
+            </div>
+            <div class="flex gap-3">
+                 <button @click="generateCertificates" :disabled="isGenerating || !bgImage" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg shadow-sm transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
+                    <i class="fas fa-download" :class="{'fa-spin': isGenerating}"></i>
+                    <span v-if="isGenerating">生成中...</span>
+                    <span v-else>生成并下载 ZIP</span>
+                </button>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <div class="flex-1 flex overflow-hidden">
+            
+            <!-- Left Sidebar: Controls -->
+            <div class="w-80 bg-white border-r border-gray-200 flex flex-col overflow-y-auto flex-shrink-0">
+                
+                <!-- 1. Uploads -->
+                <div class="p-5 border-b border-gray-100">
+                    <h2 class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-4">1. 资源素材</h2>
+                    
+                    <!-- BG Upload -->
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">背景图片 (必须)</label>
+                        <div class="relative border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:bg-gray-50 transition-colors cursor-pointer" @click="$refs.bgInput.click()">
+                            <input type="file" ref="bgInput" class="hidden" accept="image/*" @change="handleBgUpload">
+                            <div v-if="bgFile" class="text-sm text-green-600 truncate">
+                                <i class="fas fa-check-circle mr-1"></i> {{ bgFile.name }}
+                            </div>
+                            <div v-else class="text-gray-400 text-sm">
+                                <i class="fas fa-image text-2xl mb-2 block"></i>
+                                点击上传背景图
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Font Upload -->
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">字体文件 (可选)</label>
+                        <div class="relative border border-gray-300 rounded-lg p-3 flex items-center gap-3 hover:bg-gray-50 cursor-pointer" @click="$refs.fontInput.click()">
+                            <input type="file" ref="fontInput" class="hidden" accept=".ttf,.otf,.woff" @change="handleFontUpload">
+                            <div class="bg-gray-100 p-2 rounded text-gray-500">
+                                <i class="fas fa-font"></i>
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <div class="text-sm font-medium text-gray-900 truncate">
+                                    {{ fontFile ? fontFile.name : '使用系统默认字体' }}
+                                </div>
+                                <div class="text-xs text-gray-500">支持 ttf, otf</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 2. Data Input -->
+                <div class="p-5 border-b border-gray-100 flex-1">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="text-sm font-bold text-gray-400 uppercase tracking-wider">2. 数据录入</h2>
+                        <button @click="loadDemoData" class="text-xs text-blue-600 hover:text-blue-800 underline">加载示例</button>
+                    </div>
+                    
+                    <div class="mb-2">
+                        <label class="block text-xs text-gray-500 mb-1">输入 JSON 数据 (每行一个对象的列表，或直接 JSON)</label>
+                        <textarea v-model="dataInput" class="w-full h-40 p-3 text-xs font-mono border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none resize-none" placeholder='[
+  {"name": "张三", "date": "2023-10-01"},
+  {"name": "李四", "date": "2023-10-02"}
+]'></textarea>
+                    </div>
+                    <div class="text-xs text-gray-400">
+                        <i class="fas fa-info-circle mr-1"></i> 当前共 {{ parsedData.length }} 条记录
+                    </div>
+                </div>
+
+                <!-- 3. Add Fields -->
+                <div class="p-5 bg-gray-50 mt-auto">
+                    <button @click="addField" class="w-full py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-gray-700 font-medium hover:bg-gray-50 hover:text-blue-600 transition-all">
+                        <i class="fas fa-plus mr-2"></i> 添加文本字段
+                    </button>
+                </div>
+            </div>
+
+            <!-- Center: Canvas Area -->
+            <div class="flex-1 bg-gray-100 flex items-center justify-center p-10 overflow-auto relative" @mousedown.self="activeFieldId = null">
+                
+                <div v-if="bgImage" class="canvas-container shadow-2xl transition-all duration-300" 
+                     :style="{ width: displayWidth + 'px', height: displayHeight + 'px' }"
+                     ref="canvasContainer">
+                    
+                    <!-- Background Image -->
+                    <img :src="bgImage" class="w-full h-full object-contain pointer-events-none select-none" alt="Certificate Background">
+
+                    <!-- Draggable Fields -->
+                    <div v-for="field in fields" :key="field.id"
+                         class="draggable-field"
+                         :class="{ 'active': activeFieldId === field.id }"
+                         :style="getFieldStyle(field)"
+                         @mousedown="startDrag($event, field)"
+                         @click.stop="activeFieldId = field.id">
+                         {{ getPreviewText(field) }}
+                    </div>
+
+                </div>
+
+                <div v-else class="text-center text-gray-400">
+                    <div class="text-6xl mb-4 text-gray-300">
+                        <i class="fas fa-image"></i>
+                    </div>
+                    <p class="text-lg">请先在左侧上传背景图片</p>
+                </div>
+
+                <!-- Zoom Controls -->
+                <div v-if="bgImage" class="absolute bottom-6 right-6 bg-white rounded-lg shadow-lg flex items-center p-1 border border-gray-200">
+                    <button @click="zoomOut" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded"><i class="fas fa-minus"></i></button>
+                    <span class="text-xs font-mono w-12 text-center">{{ Math.round(scale * 100) }}%</span>
+                    <button @click="zoomIn" class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded"><i class="fas fa-plus"></i></button>
+                </div>
+            </div>
+
+            <!-- Right Sidebar: Field Settings -->
+            <div v-if="activeField" class="w-72 bg-white border-l border-gray-200 flex flex-col flex-shrink-0 transition-all">
+                <div class="p-4 border-b border-gray-200 flex justify-between items-center bg-gray-50">
+                    <h3 class="font-bold text-gray-700">字段设置</h3>
+                    <button @click="removeField(activeField.id)" class="text-red-500 hover:text-red-700 text-sm">
+                        <i class="fas fa-trash-alt"></i> 删除
+                    </button>
+                </div>
+
+                <div class="p-4 space-y-4 overflow-y-auto flex-1">
+                    
+                    <!-- Template -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-500 mb-1">内容模板 (支持 {key})</label>
+                        <input type="text" v-model="activeField.template" class="w-full p-2 border border-gray-300 rounded text-sm focus:border-blue-500 outline-none">
+                        <div class="text-xs text-gray-400 mt-1">
+                            可用变量: <span v-for="key in dataKeys" :key="key" class="inline-block bg-gray-100 px-1 rounded mr-1 cursor-pointer hover:text-blue-600" @click="activeField.template += '{' + key + '}'">{{ key }}</span>
+                        </div>
+                    </div>
+
+                    <!-- Font Size -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-500 mb-1">字体大小 (px)</label>
+                        <div class="flex items-center gap-2">
+                            <input type="range" v-model.number="activeField.size" min="10" max="200" class="flex-1">
+                            <input type="number" v-model.number="activeField.size" class="w-16 p-1 border border-gray-300 rounded text-sm text-center">
+                        </div>
+                    </div>
+
+                    <!-- Color -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-500 mb-1">颜色</label>
+                        <div class="flex gap-2">
+                            <input type="color" v-model="activeField.color" class="h-8 w-8 rounded cursor-pointer border-0 p-0">
+                            <input type="text" v-model="activeField.color" class="flex-1 p-1 border border-gray-300 rounded text-sm">
+                        </div>
+                    </div>
+
+                    <!-- Alignment -->
+                    <div>
+                        <label class="block text-xs font-medium text-gray-500 mb-1">对齐方式</label>
+                        <div class="flex border border-gray-300 rounded overflow-hidden">
+                            <button @click="activeField.align = 'left'" class="flex-1 py-1.5 text-sm hover:bg-gray-50" :class="{'bg-blue-50 text-blue-600': activeField.align === 'left'}"><i class="fas fa-align-left"></i></button>
+                            <button @click="activeField.align = 'center'" class="flex-1 py-1.5 text-sm hover:bg-gray-50 border-l border-r border-gray-300" :class="{'bg-blue-50 text-blue-600': activeField.align === 'center'}"><i class="fas fa-align-center"></i></button>
+                            <button @click="activeField.align = 'right'" class="flex-1 py-1.5 text-sm hover:bg-gray-50" :class="{'bg-blue-50 text-blue-600': activeField.align === 'right'}"><i class="fas fa-align-right"></i></button>
+                        </div>
+                    </div>
+
+                    <!-- Position (Fine tuning) -->
+                    <div class="grid grid-cols-2 gap-2">
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">X 坐标</label>
+                            <input type="number" v-model.number="activeField.x" class="w-full p-2 border border-gray-300 rounded text-sm">
+                        </div>
+                        <div>
+                            <label class="block text-xs font-medium text-gray-500 mb-1">Y 坐标</label>
+                            <input type="number" v-model.number="activeField.y" class="w-full p-2 border border-gray-300 rounded text-sm">
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            
+            <!-- Empty State for Right Sidebar -->
+            <div v-else class="w-72 bg-white border-l border-gray-200 flex items-center justify-center text-gray-400 text-sm flex-shrink-0">
+                <p>点击画布上的文字进行编辑</p>
+            </div>
+
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, computed, onMounted, watch } = Vue;
+
+        createApp({
+            setup() {
+                // State
+                const bgImage = ref(null); // Blob URL
+                const bgFile = ref(null);
+                const bgDimensions = ref({ width: 0, height: 0 });
+                
+                const fontFile = ref(null);
+                const customFontFamily = ref('Inter'); // Default
+
+                const fields = ref([]);
+                const activeFieldId = ref(null);
+                
+                const dataInput = ref(JSON.stringify([
+                    { name: "张三", course: "Python 进阶课程", date: "2023年10月15日", id: "CERT-001" },
+                    { name: "Alice", course: "Advanced Python", date: "Oct 15, 2023", id: "CERT-002" }
+                ], null, 2));
+
+                const scale = ref(0.5); // Viewport scale
+                const isGenerating = ref(false);
+
+                // Computed
+                const parsedData = computed(() => {
+                    try {
+                        const d = JSON.parse(dataInput.value);
+                        return Array.isArray(d) ? d : [];
+                    } catch (e) {
+                        return [];
+                    }
+                });
+
+                const dataKeys = computed(() => {
+                    if (parsedData.value.length > 0) {
+                        return Object.keys(parsedData.value[0]);
+                    }
+                    return ['name', 'date', 'id'];
+                });
+
+                const activeField = computed(() => {
+                    return fields.value.find(f => f.id === activeFieldId.value);
+                });
+
+                const displayWidth = computed(() => bgDimensions.value.width * scale.value);
+                const displayHeight = computed(() => bgDimensions.value.height * scale.value);
+
+                // Methods
+                const handleBgUpload = (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+                    
+                    bgFile.value = file;
+                    const url = URL.createObjectURL(file);
+                    bgImage.value = url;
+                    
+                    const img = new Image();
+                    img.onload = () => {
+                        bgDimensions.value = { width: img.width, height: img.height };
+                        // Auto fit scale
+                        const containerH = window.innerHeight - 100; // rough calc
+                        const containerW = window.innerWidth - 600;
+                        const scaleW = containerW / img.width;
+                        const scaleH = containerH / img.height;
+                        scale.value = Math.min(Math.min(scaleW, scaleH), 1) * 0.9;
+                    };
+                    img.src = url;
+                };
+
+                const handleFontUpload = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+                    
+                    fontFile.value = file;
+                    
+                    // Load font into browser for preview
+                    const fontName = 'CustomFont-' + Date.now();
+                    const fontData = await file.arrayBuffer();
+                    const fontFace = new FontFace(fontName, fontData);
+                    
+                    try {
+                        await fontFace.load();
+                        document.fonts.add(fontFace);
+                        customFontFamily.value = fontName;
+                        console.log('Font loaded:', fontName);
+                    } catch (e) {
+                        console.error('Failed to load font preview', e);
+                        alert('字体预览加载失败，但生成时仍会生效');
+                    }
+                };
+
+                const addField = () => {
+                    if (!bgImage.value) {
+                        alert("请先上传背景图片");
+                        return;
+                    }
+                    
+                    const id = Date.now().toString();
+                    fields.value.push({
+                        id,
+                        x: bgDimensions.value.width / 2,
+                        y: bgDimensions.value.height / 2,
+                        size: 60,
+                        color: '#000000',
+                        align: 'center',
+                        template: '{name}'
+                    });
+                    activeFieldId.value = id;
+                };
+
+                const removeField = (id) => {
+                    fields.value = fields.value.filter(f => f.id !== id);
+                    if (activeFieldId.value === id) activeFieldId.value = null;
+                };
+
+                const getPreviewText = (field) => {
+                    const row = parsedData.value[0] || {};
+                    let text = field.template;
+                    for (const [key, value] of Object.entries(row)) {
+                        text = text.replace(new RegExp(`\\{${key}\\}`, 'g'), value);
+                    }
+                    return text;
+                };
+
+                const getFieldStyle = (field) => {
+                    const s = scale.value;
+                    let transform = 'translate(-50%, -50%)'; // Default for center?
+                    // Adjust transform based on align to match Pillow's anchor logic loosely
+                    // Actually, let's keep it simple: Position is the anchor point.
+                    
+                    if (field.align === 'left') transform = 'translate(0, -50%)'; // Anchor Left-Center (Vertical center usually for text block in CSS? No, font baseline is tricky)
+                    // CSS Text positioning: top-left of the box.
+                    // Pillow default anchor 'la' = Left Ascender.
+                    // Let's assume CSS 'top' aligns with Pillow 'y'.
+                    
+                    // To simplify: CSS top/left is set to the point (field.x * s, field.y * s).
+                    // We use transform to handle alignment relative to that point.
+                    
+                    let xOffset = '0%';
+                    if (field.align === 'center') xOffset = '-50%';
+                    if (field.align === 'right') xOffset = '-100%';
+
+                    // Pillow 'ascender' is roughly the top of the text. 
+                    // CSS 'top' is top of the box. So it should match fairly well.
+                    
+                    return {
+                        left: (field.x * s) + 'px',
+                        top: (field.y * s) + 'px',
+                        fontSize: (field.size * s) + 'px',
+                        color: field.color,
+                        fontFamily: customFontFamily.value,
+                        transform: `translate(${xOffset}, 0%)`, // We don't vertically center, we align top (Pillow default is usually top-ish)
+                        // Wait, Pillow 'la' is Left Ascender. Ascender is top.
+                        // So no vertical translation needed if we assume Y is top.
+                        textAlign: field.align
+                    };
+                };
+
+                const loadDemoData = () => {
+                    dataInput.value = JSON.stringify([
+                        { name: "王小明", date: "2024-01-01", id: "NO.001" },
+                        { name: "李华", date: "2024-01-02", id: "NO.002" },
+                        { name: "张伟", date: "2024-01-03", id: "NO.003" }
+                    ], null, 2);
+                };
+
+                const zoomIn = () => scale.value *= 1.1;
+                const zoomOut = () => scale.value *= 0.9;
+
+                // Dragging Logic
+                const startDrag = (event, field) => {
+                    activeFieldId.value = field.id;
+                    
+                    const startX = event.clientX;
+                    const startY = event.clientY;
+                    const startFieldX = field.x;
+                    const startFieldY = field.y;
+                    
+                    const onMouseMove = (e) => {
+                        const dx = (e.clientX - startX) / scale.value;
+                        const dy = (e.clientY - startY) / scale.value;
+                        
+                        field.x = Math.round(startFieldX + dx);
+                        field.y = Math.round(startFieldY + dy);
+                    };
+                    
+                    const onMouseUp = () => {
+                        document.removeEventListener('mousemove', onMouseMove);
+                        document.removeEventListener('mouseup', onMouseUp);
+                    };
+                    
+                    document.addEventListener('mousemove', onMouseMove);
+                    document.addEventListener('mouseup', onMouseUp);
+                };
+
+                const generateCertificates = async () => {
+                    if (!bgFile.value) return;
+                    isGenerating.value = true;
+                    
+                    const formData = new FormData();
+                    formData.append('background', bgFile.value);
+                    if (fontFile.value) {
+                        formData.append('font', fontFile.value);
+                    }
+                    formData.append('config', JSON.stringify(fields.value));
+                    formData.append('data', dataInput.value);
+                    
+                    try {
+                        const res = await fetch('/api/generate', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        
+                        if (!res.ok) {
+                            const err = await res.json();
+                            alert('生成失败: ' + (err.error || res.statusText));
+                            return;
+                        }
+                        
+                        // Download Blob
+                        const blob = await res.blob();
+                        const url = window.URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = 'certificates.zip';
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                        window.URL.revokeObjectURL(url);
+                        
+                    } catch (e) {
+                        alert('网络错误: ' + e.message);
+                    } finally {
+                        isGenerating.value = false;
+                    }
+                };
+
+                return {
+                    bgImage, bgFile, bgDimensions,
+                    fontFile, customFontFamily,
+                    fields, activeField, activeFieldId,
+                    dataInput, parsedData, dataKeys,
+                    scale, displayWidth, displayHeight,
+                    isGenerating,
+                    handleBgUpload, handleFontUpload,
+                    addField, removeField,
+                    getPreviewText, getFieldStyle,
+                    startDrag,
+                    zoomIn, zoomOut,
+                    generateCertificates, loadDemoData
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>