优化升级

README.md

@@ -16,6 +16,8 @@ short_description: '爆款视频封面大师'
 ## 功能特点
 
 - **多尺寸支持**：16:9 (视频), 4:3, 1:1, 9:16 (Shorts/抖音)
+- **随机灵感**：一键生成不同风格的封面配置，激发创意
+- **丰富字体**：集成多款免费商用中文字体（快乐体、马善政、站酷黄油等）
 - **爆款样式**：内置“震惊红”、“搞钱黄”、“科技蓝”等高点击配色
 - **拖拽编辑**：所有元素（标题、副标题、贴纸、人物）均支持自由拖拽
 - **隐私安全**：所有图片处理均在浏览器本地完成，不上传服务器

app.py

@@ -11,6 +11,10 @@ app.jinja_env.variable_end_string = ']]'
 def index():
     return render_template('index.html')
 
+@app.route('/health')
+def health():
+    return 'OK', 200
+
 @app.route('/static/<path:path>')
 def send_static(path):
     return send_from_directory('static', path)

templates/index.html

@@ -7,9 +7,16 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&display=swap" rel="stylesheet">
+    <!-- 引入更多中文字体 -->
+    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;700;900&family=Noto+Serif+SC:wght@700;900&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
     <style>
         body { font-family: 'Noto Sans SC', sans-serif; }
+        .font-sans { font-family: 'Noto Sans SC', sans-serif; }
+        .font-serif { font-family: 'Noto Serif SC', serif; }
+        .font-kuai-le { font-family: 'ZCOOL KuaiLe', cursive; }
+        .font-ma-shan-zheng { font-family: 'Ma Shan Zheng', cursive; }
+        .font-huang-you { font-family: 'ZCOOL QingKe HuangYou', sans-serif; }
+
         .canvas-container {
             box-shadow: 0 10px 30px -10px rgba(0,0,0,0.3);
             overflow: hidden;
@@ -48,14 +55,21 @@
                 <h1 class="text-xl font-bold text-gray-800">爆款视频封面大师</h1>
             </div>
             <div class="flex gap-3">
+                <button @click="randomTemplate" class="px-4 py-2 text-sm bg-purple-100 text-purple-700 hover:bg-purple-200 rounded-lg transition flex items-center gap-1">
+                    <span class="text-lg">🎲</span> 随机灵感
+                </button>
                 <button @click="resetConfig" class="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition">
                     重置画布
                 </button>
-                <button @click="downloadImage" class="px-6 py-2 bg-black text-white rounded-lg font-bold hover:bg-gray-800 transition flex items-center gap-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button @click="downloadImage" :disabled="isDownloading" class="px-6 py-2 bg-black text-white rounded-lg font-bold hover:bg-gray-800 transition flex items-center gap-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed">
+                    <svg v-if="!isDownloading" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                     </svg>
-                    导出封面
+                    <svg v-else class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    {{ isDownloading ? '生成中...' : '导出封面' }}
                 </button>
             </div>
         </header>
@@ -103,6 +117,17 @@
                     <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">主标题 (拖拽移动)</h3>
                     <textarea v-model="config.mainTitle.text" rows="2" class="w-full border border-gray-300 rounded-lg p-2 text-lg font-bold mb-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="输入爆款标题..."></textarea>
                     
+                    <div class="mb-3">
+                        <label class="text-xs text-gray-500 block mb-1">字体风格</label>
+                        <select v-model="config.mainTitle.fontFamily" class="w-full border border-gray-300 rounded-lg p-2 text-sm">
+                            <option value="font-sans">无衬线黑体 (现代)</option>
+                            <option value="font-serif">衬线宋体 (文艺)</option>
+                            <option value="font-kuai-le">快乐体 (可爱)</option>
+                            <option value="font-ma-shan-zheng">马善政毛笔 (国潮)</option>
+                            <option value="font-huang-you">站酷黄油 (醒目)</option>
+                        </select>
+                    </div>
+
                     <div class="grid grid-cols-2 gap-4">
                         <div>
                             <label class="text-xs text-gray-500 block mb-1">字号 {{ config.mainTitle.size }}px</label>
@@ -237,8 +262,8 @@
                     </div>
 
                     <!-- Main Title -->
-                    <div class="draggable-item absolute z-20 whitespace-pre-wrap font-black leading-tight"
-                         :class="{ 'active': activeElement === 'mainTitle' }"
+                    <div class="draggable-item absolute z-20 whitespace-pre-wrap font-black leading-tight text-center"
+                         :class="[{ 'active': activeElement === 'mainTitle' }, config.mainTitle.fontFamily]"
                          @mousedown="startDrag($event, 'mainTitle')"
                          :style="{
                              left: config.mainTitle.x + 'px',
@@ -531,6 +556,78 @@
                     document.removeEventListener('mouseup', stopDrag);
                 };
 
+                return {
+                    config,
+                    ratios,
+                    presets,
+                    canvasStyle,
+                    activeElement,
+                    handleBgUpload,
+                    handleFgUpload,
+                    addSticker,
+                    removeSticker,
+                    applyTitleStyle,
+                    resetConfig,
+                    downloadImage,
+                    startDrag,
+                    randomTemplate,
+                    isDownloading
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>
+                    const rect = e.target.getBoundingClientRect();
+                    // Just store the starting mouse position
+                    dragOffset.startX = clientX;
+                    dragOffset.startY = clientY;
+                    dragOffset.initialObjX = currentX;
+                    dragOffset.initialObjY = currentY;
+
+                    document.addEventListener('mousemove', onDrag);
+                    document.addEventListener('mouseup', stopDrag);
+                };
+
+                const onDrag = (e) => {
+                    if (!isDragging) return;
+                    e.preventDefault();
+
+                    // Calculate scale factor from the transform
+                    const element = document.getElementById('canvas');
+                    // Parse scale from style string or computed style
+                    const transform = element.style.transform;
+                    const match = transform.match(/scale\(([^)]+)\)/);
+                    const scale = match ? parseFloat(match[1]) : 1;
+
+                    const dx = (e.clientX - dragOffset.startX) / scale;
+                    const dy = (e.clientY - dragOffset.startY) / scale;
+
+                    let newX = dragOffset.initialObjX + dx;
+                    let newY = dragOffset.initialObjY + dy;
+
+                    if (currentDragTarget === 'mainTitle') {
+                        config.mainTitle.x = newX;
+                        config.mainTitle.y = newY;
+                    } else if (currentDragTarget === 'subTitle') {
+                        config.subTitle.x = newX;
+                        config.subTitle.y = newY;
+                    } else if (currentDragTarget === 'fg') {
+                        config.fgPos.x = newX;
+                        config.fgPos.y = newY;
+                    } else if (currentDragTarget.startsWith('sticker')) {
+                        config.stickers[stickerIndex].x = newX;
+                        config.stickers[stickerIndex].y = newY;
+                    }
+                };
+
+                const stopDrag = () => {
+                    isDragging = false;
+                    currentDragTarget = null;
+                    document.removeEventListener('mousemove', onDrag);
+                    document.removeEventListener('mouseup', stopDrag);
+                };
+
                 return {
                     config,
                     ratios,