Spaces:

duqing026
/

launch-kit-gen

Sleeping

App Files Files Community

duqing2026 commited on Jan 30

Commit

ace086b

0 Parent(s):

Initial commit: Launch Kit Gen MVP

Browse files

Files changed (5) hide show

Dockerfile +10 -0
README.md +51 -0
app.py +15 -0
requirements.txt +2 -0
templates/index.html +560 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,10 @@

+FROM python:3.9-slim
+WORKDIR /app
+COPY requirements.txt requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md ADDED Viewed

	@@ -0,0 +1,51 @@

+---
+title: Launch Kit Gen
+emoji: 🚀
+colorFrom: indigo
+colorTo: purple
+sdk: docker
+pinned: false
+short_description: 发布物料生成器
+app_port: 7860
+---
+# 独立开发发布物料生成器 (Launch Kit Gen)
+专为独立开发者、创客和产品经理设计的一站式发布物料生成工具。
+## 核心功能
+*   **一键生成多平台物料**：只需输入产品信息和上传 Logo，即可自动生成 Product Hunt、Twitter/X、Instagram Story 等平台的标准尺寸宣传图。
+*   **实时预览**：所见即所得，实时查看不同尺寸下的显示效果。
+*   **多风格主题**：
+    *   **极简 (Minimal)**：干净利落，适合工具类产品。
+    *   **创投 (Startup)**：经典的渐变风格，适合 SaaS 产品。
+    *   **醒目 (Bold)**：高对比度，适合潮流或 C 端应用。
+*   **本地隐私优先**：所有图片生成均在浏览器端完成，无需上传服务器，保护你的设计素材安全。
+*   **高清导出**：基于 Canvas 技术，支持高清 PNG 导出。
+## 使用场景
+*   **Product Hunt Launch**：快速准备 Gallery Image (1270x760) 和 Thumbnail (240x240)。
+*   **Social Media Announcement**：生成 Twitter Card (1200x675) 和 Instagram Story (1080x1920)。
+*   **Landing Page Assets**：生成统一风格的 Hero 图片。
+## 技术栈
+*   **Frontend**: Vue 3, Tailwind CSS, html2canvas
+*   **Backend**: Flask (Python) - 用于静态托管
+*   **Deployment**: Docker
+## 运行方式
+```bash
+# 构建 Docker 镜像
+docker build -t launch-kit-gen .
+# 运行容器
+docker run -p 7860:7860 launch-kit-gen
+```
+## 贡献
+欢迎提交 Issue 和 PR！让我们一起帮助独立开发者更高效地发布产品。

app.py ADDED Viewed

	@@ -0,0 +1,15 @@

+import os
+from flask import Flask, render_template, send_from_directory
+app = Flask(__name__)
+@app.route('/')
+def index():
+    return render_template('index.html')
+@app.route('/static/<path:path>')
+def send_static(path):
+    return send_from_directory('static', path)
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ flask
2	+ gunicorn

templates/index.html ADDED Viewed

	@@ -0,0 +1,560 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>独立开发发布物料生成器 | Launch Kit Gen</title>
+    <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://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;800&family=Noto+Sans+SC:wght@400;700;900&display=swap');
+        body {
+            font-family: 'Inter', 'Noto Sans SC', sans-serif;
+            background-color: #f3f4f6;
+        }
+        .preview-container {
+            transform-origin: top left;
+            overflow: hidden;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        /* 隐藏滚动条但允许滚动 */
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+        .no-scrollbar {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+        .glass {
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+        }
+    </style>
+</head>
+<body>
+    <div id="app" class="flex h-screen overflow-hidden">
+        <!-- Sidebar Controls -->
+        <div class="w-96 bg-white border-r border-gray-200 flex flex-col h-full z-10 shadow-lg">
+            <div class="p-6 border-b border-gray-100">
+                <h1 class="text-2xl font-black text-gray-900 flex items-center gap-2">
+                    <i class="fa-solid fa-rocket text-indigo-600"></i> Launch Kit
+                </h1>
+                <p class="text-sm text-gray-500 mt-1">独立开发发布物料一键生成</p>
+            </div>
+            <div class="flex-1 overflow-y-auto p-6 space-y-6 no-scrollbar">
+                <!-- Branding Section -->
+                <div class="space-y-4">
+                    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider">品牌信息</h3>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">产品名称</label>
+                        <input type="text" v-model="config.productName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="例如: SuperTool">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">主要标语 (Slogan)</label>
+                        <textarea v-model="config.tagline" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="一句话介绍产品的核心价值"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">次要描述 (Sub-text)</label>
+                        <textarea v-model="config.subtext" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="更多细节描述..."></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">上传 Logo</label>
+                        <div class="flex items-center gap-3">
+                            <div v-if="config.logo" class="w-10 h-10 rounded-lg border border-gray-200 p-1 bg-white flex items-center justify-center overflow-hidden relative group cursor-pointer" @click="triggerFileInput">
+                                <img :src="config.logo" class="max-w-full max-h-full object-contain">
+                                <div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                                    <i class="fa-solid fa-pen text-white text-xs"></i>
+                                </div>
+                            </div>
+                            <label class="flex-1 cursor-pointer bg-gray-50 border border-dashed border-gray-300 rounded-lg px-4 py-2 text-center hover:bg-gray-100 transition-colors">
+                                <span class="text-sm text-gray-600"><i class="fa-solid fa-cloud-arrow-up mr-1"></i> 选择图片</span>
+                                <input type="file" @change="handleLogoUpload" accept="image/*" class="hidden" ref="fileInput">
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <hr class="border-gray-100">
+                <!-- Style Section -->
+                <div class="space-y-4">
+                    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider">设计风格</h3>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">主题模板</label>
+                        <div class="grid grid-cols-3 gap-2">
+                            <button
+                                v-for="theme in themes"
+                                :key="theme.id"
+                                @click="config.theme = theme.id"
+                                :class="['px-3 py-2 rounded-lg text-xs font-medium border transition-all', config.theme === theme.id ? 'border-indigo-600 bg-indigo-50 text-indigo-700 ring-1 ring-indigo-600' : 'border-gray-200 bg-white text-gray-600 hover:border-gray-300']"
+                            >
+                                {{ theme.name }}
+                            </button>
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">品牌主色</label>
+                        <div class="flex gap-2 flex-wrap">
+                            <button
+                                v-for="color in presetColors"
+                                :key="color"
+                                @click="config.color = color"
+                                class="w-8 h-8 rounded-full border border-gray-200 transition-transform hover:scale-110 focus:ring-2 focus:ring-offset-1 focus:ring-indigo-500"
+                                :style="{ backgroundColor: color }"
+                                :class="{'ring-2 ring-offset-1 ring-gray-400': config.color === color}"
+                            ></button>
+                            <input type="color" v-model="config.color" class="w-8 h-8 p-0 border-0 rounded-full overflow-hidden cursor-pointer">
+                        </div>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">背景模式</label>
+                        <select v-model="config.bgMode" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm">
+                            <option value="solid">纯色 (Solid)</option>
+                            <option value="gradient">渐变 (Gradient)</option>
+                            <option value="mesh">网格 (Mesh)</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="p-6 border-t border-gray-200 bg-gray-50">
+                <button
+                    @click="downloadAll"
+                    :disabled="isGenerating"
+                    class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-xl shadow-lg shadow-indigo-200 transition-all flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed"
+                >
+                    <i v-if="isGenerating" class="fa-solid fa-circle-notch fa-spin"></i>
+                    <i v-else class="fa-solid fa-download"></i>
+                    {{ isGenerating ? '生成中...' : '下载所有物料' }}
+                </button>
+            </div>
+        </div>
+        <!-- Main Preview Area -->
+        <div class="flex-1 bg-gray-100 overflow-y-auto p-8 relative">
+            <div class="max-w-6xl mx-auto space-y-12 pb-20">
+                <!-- 1. Product Hunt Gallery (1270x760) -->
+                <div class="space-y-2">
+                    <div class="flex justify-between items-end">
+                        <h2 class="text-lg font-bold text-gray-700">Product Hunt Gallery / Website Hero</h2>
+                        <span class="text-xs font-mono text-gray-400">1270 x 760</span>
+                    </div>
+                    <div class="w-full bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden relative group">
+                        <!-- Wrapper to maintain aspect ratio and scale content -->
+                        <div class="relative w-full" style="padding-bottom: 59.84%;"> <!-- 760/1270 * 100 -->
+                            <div class="absolute inset-0 flex items-center justify-center bg-gray-50">
+                                <!-- The actual scalable content -->
+                                <div :id="'preview-ph-gallery'" class="preview-target relative overflow-hidden flex flex-col items-center justify-center text-center p-16"
+                                     :style="containerStyle(1270, 760)">
+                                     <!-- Background Elements -->
+                                     <div class="absolute inset-0 z-0" :style="backgroundStyle"></div>
+                                     <div v-if="config.bgMode === 'mesh'" class="absolute inset-0 z-0 opacity-30" style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 40px 40px;"></div>
+                                     <!-- Content -->
+                                     <div class="relative z-10 max-w-4xl flex flex-col items-center">
+                                         <div v-if="config.logo" class="mb-8 p-4 bg-white rounded-2xl shadow-xl">
+                                             <img :src="config.logo" class="h-32 w-32 object-contain">
+                                         </div>
+                                         <div v-else class="mb-8 h-32 w-32 bg-white/20 rounded-2xl flex items-center justify-center backdrop-blur-sm border border-white/30">
+                                            <i class="fa-solid fa-image text-4xl text-white/50"></i>
+                                         </div>
+                                         <h1 class="text-7xl font-black mb-6 leading-tight" :style="{ color: textColor.title }">
+                                             {{ config.productName || 'Product Name' }}
+                                         </h1>
+                                         <p class="text-4xl font-bold mb-8 opacity-90 max-w-3xl" :style="{ color: textColor.tagline }">
+                                             {{ config.tagline || 'Your amazing product tagline goes here.' }}
+                                         </p>
+                                         <!-- Mockup UI Element for visual interest -->
+                                         <div class="mt-8 w-full max-w-2xl h-64 bg-white/90 rounded-t-xl shadow-2xl border border-white/50 backdrop-blur-md p-4 flex flex-col gap-4 opacity-90 transform translate-y-4">
+                                            <div class="flex gap-2">
+                                                <div class="w-3 h-3 rounded-full bg-red-400"></div>
+                                                <div class="w-3 h-3 rounded-full bg-yellow-400"></div>
+                                                <div class="w-3 h-3 rounded-full bg-green-400"></div>
+                                            </div>
+                                            <div class="flex-1 bg-gray-50 rounded border border-dashed border-gray-200 flex items-center justify-center">
+                                                <span class="text-gray-400 font-mono text-xl">App Preview UI</span>
+                                            </div>
+                                         </div>
+                                     </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Scaling script for this specific preview -->
+                        <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <button @click="downloadSingle('preview-ph-gallery', 'ph-gallery')" class="bg-white/90 hover:bg-white text-gray-700 p-2 rounded shadow-sm text-sm font-medium border border-gray-200">
+                                <i class="fa-solid fa-download"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- 2. Twitter / OG Card (1200x675) -->
+                <div class="space-y-2">
+                    <div class="flex justify-between items-end">
+                        <h2 class="text-lg font-bold text-gray-700">Twitter / X Card</h2>
+                        <span class="text-xs font-mono text-gray-400">1200 x 675</span>
+                    </div>
+                    <div class="w-full bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden relative group">
+                        <div class="relative w-full" style="padding-bottom: 56.25%;">
+                            <div class="absolute inset-0 flex items-center justify-center bg-gray-50">
+                                <div :id="'preview-twitter'" class="preview-target relative overflow-hidden flex flex-row items-center p-16"
+                                     :style="containerStyle(1200, 675)">
+                                     <div class="absolute inset-0 z-0" :style="backgroundStyle"></div>
+                                     <!-- Layout Variation: Left Align -->
+                                     <div class="relative z-10 flex-1 pr-12">
+                                         <div class="flex items-center gap-4 mb-6">
+                                             <div v-if="config.logo" class="h-16 w-16 bg-white rounded-xl shadow-lg p-2 flex items-center justify-center">
+                                                 <img :src="config.logo" class="max-h-full max-w-full">
+                                             </div>
+                                             <h2 class="text-3xl font-bold opacity-80" :style="{ color: textColor.tagline }">{{ config.productName || 'Product' }}</h2>
+                                         </div>
+                                         <h1 class="text-6xl font-black mb-6 leading-tight" :style="{ color: textColor.title }">
+                                             {{ config.tagline || 'Catchy Headline For Social Media.' }}
+                                         </h1>
+                                         <p class="text-2xl font-medium opacity-70" :style="{ color: textColor.tagline }">
+                                             {{ config.subtext || 'Short description that makes people want to click immediately.' }}
+                                         </p>
+                                     </div>
+                                     <!-- Right Graphic -->
+                                     <div class="relative z-10 w-1/3 h-full flex items-center justify-center">
+                                         <div class="w-64 h-64 bg-white/20 backdrop-blur-md rounded-full border border-white/30 shadow-2xl flex items-center justify-center relative">
+                                            <div class="absolute inset-0 rounded-full border-4 border-dashed border-white/20 animate-spin-slow" style="animation-duration: 20s"></div>
+                                            <i class="fa-solid fa-bolt text-8xl text-white/80"></i>
+                                         </div>
+                                     </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <button @click="downloadSingle('preview-twitter', 'twitter-card')" class="bg-white/90 hover:bg-white text-gray-700 p-2 rounded shadow-sm text-sm font-medium border border-gray-200">
+                                <i class="fa-solid fa-download"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Grid for smaller items -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                    <!-- 3. Product Hunt Thumbnail (240x240) -->
+                    <div class="space-y-2">
+                        <div class="flex justify-between items-end">
+                            <h2 class="text-lg font-bold text-gray-700">PH Thumbnail</h2>
+                            <span class="text-xs font-mono text-gray-400">240 x 240</span>
+                        </div>
+                        <div class="w-full bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden relative group p-8 flex justify-center">
+                             <!-- Fixed display size for this one since it's small -->
+                            <div :id="'preview-ph-thumb'" class="preview-target relative overflow-hidden flex items-center justify-center"
+                                 :style="[containerStyle(240, 240, 1), { width: '240px', height: '240px' }]"> <!-- Force 1:1 scale for display -->
+                                 <div class="absolute inset-0 z-0" :style="backgroundStyle"></div>
+                                 <div class="relative z-10 flex flex-col items-center justify-center p-4">
+                                     <div v-if="config.logo" class="h-32 w-32 bg-white rounded-2xl shadow-lg p-4 flex items-center justify-center mb-2">
+                                         <img :src="config.logo" class="max-h-full max-w-full object-contain">
+                                     </div>
+                                     <div v-else class="h-32 w-32 bg-white/20 rounded-2xl border-2 border-white/50 flex items-center justify-center mb-2">
+                                         <span class="text-4xl font-black text-white">P</span>
+                                     </div>
+                                 </div>
+                            </div>
+                            <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <button @click="downloadSingle('preview-ph-thumb', 'ph-thumbnail')" class="bg-white/90 hover:bg-white text-gray-700 p-2 rounded shadow-sm text-sm font-medium border border-gray-200">
+                                    <i class="fa-solid fa-download"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- 4. Instagram Story (1080x1920) -->
+                    <div class="space-y-2">
+                        <div class="flex justify-between items-end">
+                            <h2 class="text-lg font-bold text-gray-700">Mobile Story</h2>
+                            <span class="text-xs font-mono text-gray-400">1080 x 1920</span>
+                        </div>
+                        <div class="w-full bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden relative group flex justify-center bg-gray-50 py-4">
+                            <!-- Scaled down view -->
+                            <div class="relative shadow-xl rounded-2xl overflow-hidden" style="width: 270px; height: 480px;"> <!-- 1:4 scale of 1080x1920 -->
+                                <div class="absolute inset-0 bg-white">
+                                    <div :id="'preview-story'" class="preview-target relative overflow-hidden flex flex-col p-12"
+                                         :style="containerStyle(1080, 1920)">
+                                         <div class="absolute inset-0 z-0" :style="backgroundStyle"></div>
+                                         <!-- Top -->
+                                         <div class="relative z-10 pt-20 flex flex-col items-center text-center">
+                                             <div class="inline-block px-4 py-2 bg-white/20 backdrop-blur rounded-full text-white font-bold text-xl mb-8 border border-white/20">
+                                                 NEW LAUNCH
+                                             </div>
+                                             <h1 class="text-8xl font-black mb-6 leading-tight" :style="{ color: textColor.title }">
+                                                 {{ config.productName || 'Product' }}
+                                             </h1>
+                                         </div>
+                                         <!-- Middle Visual -->
+                                         <div class="relative z-10 flex-1 flex items-center justify-center my-12">
+                                              <div class="w-full aspect-square bg-white/10 rounded-3xl border border-white/20 shadow-2xl flex items-center justify-center p-8 backdrop-blur-md relative overflow-hidden">
+                                                  <!-- Abstract Shapes -->
+                                                  <div class="absolute -top-20 -right-20 w-60 h-60 bg-blue-500 rounded-full blur-3xl opacity-30 mix-blend-overlay"></div>
+                                                  <div class="absolute -bottom-20 -left-20 w-60 h-60 bg-purple-500 rounded-full blur-3xl opacity-30 mix-blend-overlay"></div>
+                                                  <img v-if="config.logo" :src="config.logo" class="relative z-10 max-w-full max-h-full drop-shadow-2xl">
+                                                  <i v-else class="fa-solid fa-cube text-9xl text-white/80"></i>
+                                              </div>
+                                         </div>
+                                         <!-- Bottom -->
+                                         <div class="relative z-10 pb-20 text-center">
+                                             <h2 class="text-5xl font-bold mb-6 leading-snug" :style="{ color: textColor.tagline }">
+                                                 {{ config.tagline || 'We are live now!' }}
+                                             </h2>
+                                             <div class="bg-white text-black font-bold text-3xl py-6 rounded-xl shadow-lg mt-8 flex items-center justify-center gap-4">
+                                                 Link in Bio <i class="fa-solid fa-arrow-up rotate-45"></i>
+                                             </div>
+                                         </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                <button @click="downloadSingle('preview-story', 'mobile-story')" class="bg-white/90 hover:bg-white text-gray-700 p-2 rounded shadow-sm text-sm font-medium border border-gray-200">
+                                    <i class="fa-solid fa-download"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        const { createApp, ref, computed, onMounted } = Vue;
+        createApp({
+            setup() {
+                const isGenerating = ref(false);
+                const fileInput = ref(null);
+                const config = ref({
+                    productName: '',
+                    tagline: '',
+                    subtext: '',
+                    logo: null,
+                    theme: 'startup',
+                    color: '#6366f1',
+                    bgMode: 'gradient'
+                });
+                const themes = [
+                    { id: 'minimal', name: '极简 (Minimal)' },
+                    { id: 'startup', name: '创投 (Startup)' },
+                    { id: 'bold', name: '醒目 (Bold)' }
+                ];
+                const presetColors = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#111827'];
+                // Handle Logo Upload
+                const triggerFileInput = () => fileInput.value.click();
+                const handleLogoUpload = (e) => {
+                    const file = e.target.files[0];
+                    if (file) {
+                        const reader = new FileReader();
+                        reader.onload = (e) => config.value.logo = e.target.result;
+                        reader.readAsDataURL(file);
+                    }
+                };
+                // Dynamic Styles
+                const backgroundStyle = computed(() => {
+                    const c = config.value.color;
+                    const mode = config.value.bgMode;
+                    const theme = config.value.theme;
+                    if (theme === 'minimal') {
+                        return { backgroundColor: '#ffffff' };
+                    }
+                    if (theme === 'bold') {
+                        return { backgroundColor: c };
+                    }
+                    // Startup Theme Logic
+                    if (mode === 'solid') return { backgroundColor: c };
+                    if (mode === 'gradient') {
+                        return {
+                            background: `linear-gradient(135deg, ${c} 0%, #ffffff 100%)`
+                        };
+                    }
+                    if (mode === 'mesh') {
+                        return {
+                            backgroundColor: '#ffffff',
+                            backgroundImage: `radial-gradient(at 0% 0%, ${c}22 0px, transparent 50%), radial-gradient(at 100% 100%, ${c}44 0px, transparent 50%)`
+                        };
+                    }
+                    return { backgroundColor: c };
+                });
+                const textColor = computed(() => {
+                    const theme = config.value.theme;
+                    if (theme === 'minimal') {
+                        return { title: '#111827', tagline: '#4b5563' };
+                    }
+                    if (theme === 'bold') {
+                        return { title: '#ffffff', tagline: 'rgba(255,255,255,0.9)' };
+                    }
+                    // Startup
+                    return { title: '#1f2937', tagline: '#4b5563' };
+                });
+                // Helper to scale preview containers to fit real pixel dimensions into display areas
+                // We use transform: scale() to fit the massive 1270px etc into the UI,
+                // but when downloading we capture the full resolution.
+                const containerStyle = (w, h, displayScale = null) => {
+                    // Logic: The container in DOM is displayed smaller, but we define it as WxH pixels
+                    // Then we scale it down with CSS transform to fit the parent.
+                    // Actually, a simpler way for html2canvas is:
+                    // Render it at full size, but use CSS transform: scale() on the container to make it look small in UI.
+                    // However, calculating exact scale for responsive UI is tricky.
+                    // Strategy: The parent has a fixed aspect ratio or width.
+                    // We set the child to absolute width/height and scale it.
+                    // For this MVP, to keep it simple and robust:
+                    // We will rely on the "transform: scale" approach relative to parent width.
+                    // But here we return the raw dimensions.
+                    // The scaling is handled by a resize observer or hardcoded for specific previews.
+                    // Simplified: We just set width/height. The parent container handles the view.
+                    // To make it fit in the UI, we add a transform.
+                    let scale = 1;
+                    if (!displayScale) {
+                        // Estimate scale based on width.
+                        // Gallery: 1270px. UI width approx 800px?
+                        // Let's make it responsive via a tiny inline script or simple calc
+                        // Ideally we use a wrapper with container queries, but here:
+                        if (w > 1000) scale = 0.6;
+                        if (w < 500) scale = 1;
+                    } else {
+                        scale = displayScale;
+                    }
+                    return {
+                        width: `${w}px`,
+                        height: `${h}px`,
+                        // Transform origin top left to fit in the wrapper
+                        transform: `scale(${1})`, // We will actually control scale via parent or just let it overflow hidden?
+                        // Better approach: Use a "zoom" CSS property or transform on a wrapper.
+                        // For this demo, I will use a specific technique:
+                        // The parent `relative` div has padding-bottom for aspect ratio.
+                        // This child is absolute inset 0.
+                        // BUT, we want high res export.
+                        // So we actually render the High Res div, and scale it down to fit the parent.
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: `translate(-50%, -50%) scale(${ getScale(w) })`,
+                    };
+                };
+                const getScale = (targetWidth) => {
+                    // Quick hack for responsive scaling based on typical screen size
+                    // Real implementation would use ResizeObserver.
+                    if (targetWidth === 1270) return 0.5; // fits in ~635px
+                    if (targetWidth === 1200) return 0.5;
+                    if (targetWidth === 1080) return 0.25; // fits in 270px width
+                    return 1;
+                };
+                // Action: Download Single
+                const downloadSingle = async (elementId, filename) => {
+                    const el = document.getElementById(elementId);
+                    if (!el) return;
+                    // Temporarily remove scale transform for full res capture?
+                    // html2canvas captures what is rendered. If it's scaled down, it might be blurry or small.
+                    // TRICK: We clone the node, append to body (hidden), scale up, capture, remove.
+                    isGenerating.value = true;
+                    try {
+                        const canvas = await html2canvas(el, {
+                            scale: 1, // Capture at 1:1 of the defined width/height (which are high res)
+                            useCORS: true,
+                            backgroundColor: null,
+                            // We need to ensure the transform scale doesn't affect the output resolution
+                            // If the element has transform: scale(0.5), html2canvas might respect that.
+                            // We use onclone to reset transform.
+                            onclone: (clonedDoc) => {
+                                const clonedEl = clonedDoc.getElementById(elementId);
+                                clonedEl.style.transform = 'translate(0,0) scale(1)';
+                                clonedEl.style.top = '0';
+                                clonedEl.style.left = '0';
+                                clonedEl.style.position = 'static';
+                            }
+                        });
+                        const link = document.createElement('a');
+                        link.download = `${filename}-${Date.now()}.png`;
+                        link.href = canvas.toDataURL();
+                        link.click();
+                    } catch (e) {
+                        console.error(e);
+                        alert('生成失败，请重试');
+                    } finally {
+                        isGenerating.value = false;
+                    }
+                };
+                const downloadAll = async () => {
+                    if (confirm('即将依次下载4张图片，浏览器可能会拦截弹窗，请允许。')) {
+                        await downloadSingle('preview-ph-gallery', 'product-hunt-gallery');
+                        await downloadSingle('preview-twitter', 'twitter-card');
+                        await downloadSingle('preview-ph-thumb', 'ph-thumbnail');
+                        await downloadSingle('preview-story', 'instagram-story');
+                    }
+                };
+                return {
+                    config,
+                    themes,
+                    presetColors,
+                    fileInput,
+                    triggerFileInput,
+                    handleLogoUpload,
+                    backgroundStyle,
+                    textColor,
+                    containerStyle,
+                    downloadSingle,
+                    downloadAll,
+                    isGenerating
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>