Spaces:

duqing26
/

gradient-wallpaper-lab

Sleeping

App Files Files Community

duqing2026 commited on Jan 28

Commit

18a44b2

1 Parent(s): 4f7a43e

feat: add color presets and text overlay features

Browse files

Files changed (2) hide show

README.md +4 -2
templates/index.html +318 -148

README.md CHANGED Viewed

@@ -10,7 +10,7 @@ short_description: 4K 高清渐变壁纸生成器
 app_port: 7860
 ---
-# 🎨 渐变壁纸实验室 (Gradient Wallpaper Lab)
 一个专注于生成 **4K 高清、噪点质感、弥散风格** 渐变壁纸的在线工具。
@@ -19,8 +19,9 @@ app_port: 7860
 ## ✨ 核心特性
 *   **🌌 弥散渐变**: 基于算法生成自然融合的有机流体渐变。
 *   **🌫 质感噪点**: 可调节的颗粒感（Grain），打造胶片/磨砂质感。
-*   **🎨 智能配色**: 一键随机生成和谐的配色方案，支持手动微调。
 *   **📱 多端适配**: 预设 9:19 (手机) 和 16:9 (4K 桌面) 尺寸。
 *   **🔒 隐私安全**: 所有渲染均在本地浏览器完成，图片不上传服务器。
@@ -64,6 +65,7 @@ docker run -p 7860:7860 wallpaper-lab
 *   **小红书/Instagram 引流**: 生成高颜值壁纸发布，评论区引导使用工具。
 *   **壁纸社群**: 提供“每日壁纸”订阅，使用本工具批量生成素材。
 *   **设计素材**: 生成的 4K 渐变图可作为 PPT 背景、UI 设计底图出售。
 ## 🤝 贡献

 app_port: 7860
 ---
+# 🎨 渐变壁纸实验室 (Gradient Wallpaper Lab) Pro
 一个专注于生成 **4K 高清、噪点质感、弥散风格** 渐变壁纸的在线工具。
 ## ✨ 核心特性
 *   **🌌 弥散渐变**: 基于算法生成自然融合的有机流体渐变。
+*   **🎨 色彩主题**: 内置「赛博霓虹」、「日落大道」、「森之呼吸」等多种设计师精选配色。
 *   **🌫 质感噪点**: 可调节的颗粒感（Grain），打造胶片/磨砂质感。
+*   **✒️ 文字叠加**: 支持添加个性化文字/金句，制作专属手机锁屏或社交媒体配图。
 *   **📱 多端适配**: 预设 9:19 (手机) 和 16:9 (4K 桌面) 尺寸。
 *   **🔒 隐私安全**: 所有渲染均在本地浏览器完成，图片不上传服务器。
 *   **小红书/Instagram 引流**: 生成高颜值壁纸发布，评论区引导使用工具。
 *   **壁纸社群**: 提供“每日壁纸”订阅，使用本工具批量生成素材。
 *   **设计素材**: 生成的 4K 渐变图可作为 PPT 背景、UI 设计底图出售。
+*   **定制服务**: 为个人或品牌生成专属配色的背景图。
 ## 🤝 贡献

templates/index.html CHANGED Viewed

@@ -5,113 +5,179 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>渐变壁纸实验室 (Gradient Wallpaper Lab)</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
     <style>
         body { font-family: 'Inter', sans-serif; }
         .canvas-container {
-            box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.25);
         }
     </style>
 </head>
-<body class="bg-gray-900 text-white min-h-screen flex flex-col">
     <!-- Header -->
-    <header class="p-6 border-b border-gray-800 bg-gray-900/50 backdrop-blur fixed w-full z-10 top-0">
         <div class="max-w-7xl mx-auto flex justify-between items-center">
             <div class="flex items-center gap-3">
-                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500"></div>
                 <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300">
-                    渐变壁纸实验室
                 </h1>
             </div>
-            <a href="https://huggingface.co/spaces/duqing26/gradient-wallpaper-lab" target="_blank" class="text-sm text-gray-400 hover:text-white transition">
-                By duqing26
-            </a>
         </div>
     </header>
     <!-- Main Content -->
-    <main class="flex-grow flex flex-col md:flex-row pt-24 pb-12 px-6 gap-8 max-w-7xl mx-auto w-full h-full items-start">
         <!-- Controls Sidebar -->
-        <aside class="w-full md:w-80 flex-shrink-0 space-y-6 bg-gray-800/50 p-6 rounded-2xl border border-gray-700 backdrop-blur-sm">
-            <div>
-                <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">调色板</h3>
-                <div class="flex gap-2 mb-4">
-                    <button onclick="generatePalette()" class="flex-1 bg-white text-gray-900 py-2 rounded-lg font-medium hover:bg-gray-200 transition flex items-center justify-center gap-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                        </svg>
-                        随机颜色
-                    </button>
-                </div>
-                <div id="color-inputs" class="grid grid-cols-5 gap-2">
-                    <!-- Color inputs will be injected here -->
-                </div>
-            </div>
-            <div>
-                <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">参数调整</h3>
-                <div class="space-y-4">
-                    <div>
-                        <label class="flex justify-between text-sm mb-1">
-                            <span>噪点强度 (Grain)</span>
-                            <span id="grain-val" class="text-gray-400">15%</span>
-                        </label>
-                        <input type="range" id="grain" min="0" max="50" value="15" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
                     </div>
-                    <div>
-                        <label class="flex justify-between text-sm mb-1">
-                            <span>模糊程度 (Blur)</span>
-                            <span id="blur-val" class="text-gray-400">100px</span>
-                        </label>
-                        <input type="range" id="blur" min="0" max="200" value="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
                     </div>
-                    <div>
-                         <label class="flex justify-between text-sm mb-1">
-                            <span>形状复杂度</span>
-                            <span id="complexity-val" class="text-gray-400">中</span>
                         </label>
-                        <input type="range" id="complexity" min="3" max="8" value="5" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500">
                     </div>
                 </div>
-            </div>
-            <div class="pt-4 border-t border-gray-700">
-                <button onclick="downloadImage('mobile')" class="w-full mb-3 bg-gray-700 hover:bg-gray-600 text-white py-3 rounded-xl font-medium transition flex items-center justify-center gap-2">
-                    <svg 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="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
-                    </svg>
-                    下载手机壁纸 (9:19)
-                </button>
-                <button onclick="downloadImage('desktop')" class="w-full bg-gray-700 hover:bg-gray-600 text-white py-3 rounded-xl font-medium transition flex items-center justify-center gap-2">
-                     <svg 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="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-                    </svg>
-                    下载桌面壁纸 (16:9)
-                </button>
             </div>
-            <div class="bg-indigo-900/30 p-4 rounded-xl border border-indigo-500/30 text-xs text-indigo-200">
-                💡 提示：所有渲染均在本地浏览器完成，生成 4K 高清原图。
             </div>
         </aside>
         <!-- Preview Area -->
-        <div class="flex-grow flex items-center justify-center w-full h-full min-h-[500px] bg-gray-800/30 rounded-3xl border border-gray-700/50 p-8 relative overflow-hidden group">
             <!-- Hidden Canvas for Rendering -->
             <canvas id="renderCanvas" style="display: none;"></canvas>
-            <!-- Preview Image -->
-            <img id="previewImage" class="canvas-container rounded-2xl w-auto h-full max-h-[70vh] object-cover transition-all duration-700 opacity-0" alt="Preview">
-            <div id="loading" class="absolute inset-0 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm z-20 hidden">
-                <div class="animate-spin rounded-full h-12 w-12 border-4 border-purple-500 border-t-transparent"></div>
             </div>
         </div>
@@ -121,15 +187,29 @@
         const canvas = document.getElementById('renderCanvas');
         const ctx = canvas.getContext('2d');
         const previewImg = document.getElementById('previewImage');
         // State
         let currentColors = [];
         let currentMode = 'mobile'; // 'mobile' or 'desktop'
         // Config
         const SIZES = {
-            mobile: { width: 1440, height: 3040 }, // High Res Mobile
-            desktop: { width: 3840, height: 2160 } // 4K Desktop
         };
         // Init
@@ -137,32 +217,58 @@
             generatePalette();
             render();
             setupListeners();
         });
         function setupListeners() {
-            document.getElementById('grain').addEventListener('input', (e) => {
-                document.getElementById('grain-val').innerText = e.target.value + '%';
-                render();
             });
-            document.getElementById('blur').addEventListener('input', (e) => {
-                document.getElementById('blur-val').innerText = e.target.value + 'px';
-                render();
             });
-             document.getElementById('complexity').addEventListener('input', (e) => {
-                document.getElementById('complexity-val').innerText = e.target.value > 6 ? '高' : (e.target.value > 4 ? '中' : '低');
                 render();
             });
         }
         function generatePalette() {
             currentColors = [];
             const hueBase = Math.random() * 360;
-            // Generate 5 harmonious colors
             for (let i = 0; i < 5; i++) {
-                const hue = (hueBase + (Math.random() * 60 - 30)) % 360;
-                const sat = 60 + Math.random() * 40;
-                const light = 40 + Math.random() * 40;
                 currentColors.push(`hsl(${hue}, ${sat}%, ${light}%)`);
             }
             updateColorInputs();
@@ -174,12 +280,21 @@
             container.innerHTML = '';
             currentColors.forEach((color, index) => {
                 const div = document.createElement('div');
-                div.className = 'w-full aspect-square rounded-full border-2 border-white/20 cursor-pointer hover:scale-110 transition relative overflow-hidden';
                 div.style.backgroundColor = color;
                 const input = document.createElement('input');
                 input.type = 'color';
-                input.value = hslToHex(color);
                 input.className = 'absolute inset-0 w-full h-full opacity-0 cursor-pointer';
                 input.addEventListener('input', (e) => {
                     currentColors[index] = e.target.value;
@@ -196,115 +311,170 @@
             const size = SIZES[currentMode];
             canvas.width = size.width;
             canvas.height = size.height;
             // 1. Fill Background
             ctx.fillStyle = currentColors[0];
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
             // 2. Draw Blobs
             const complexity = parseInt(document.getElementById('complexity').value);
-            const blurAmount = parseInt(document.getElementById('blur').value);
-            // Use globalCompositeOperation for better blending
-            ctx.globalCompositeOperation = 'screen'; // or 'overlay', 'soft-light'
-            for (let i = 0; i < complexity; i++) {
-                const color = currentColors[(i + 1) % currentColors.length];
-                ctx.fillStyle = color;
-                const x = Math.random() * canvas.width;
-                const y = Math.random() * canvas.height;
-                const r = (Math.random() * 0.4 + 0.3) * canvas.width; // Radius relative to width
-                ctx.beginPath();
-                ctx.arc(x, y, r, 0, Math.PI * 2);
-                ctx.fill();
             }
-            // Reset composite
-            ctx.globalCompositeOperation = 'source-over';
-            // 3. Apply Blur (Simulated via stacking or CSS? CSS won't affect download)
-            // Canvas API filter is supported in modern browsers
-            // But for compatibility and speed with noise, we might need a trick.
-            // Since ctx.filter = 'blur()' is expensive on 4K, let's try drawing scaled up or using simple gradients?
-            // Actually, for "Gradient Mesh" look, we just need very large blurred circles.
-            // The circles above are already drawn. Now let's apply a massive blur if supported,
-            // or just rely on the large soft gradients (radial).
-            // Let's re-draw with radial gradients instead of solid circles + blur for performance & quality
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            // Base background
-            ctx.fillStyle = currentColors[0];
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            for (let i = 0; i < complexity; i++) {
-                const color = currentColors[(i + 1) % currentColors.length];
-                const x = Math.random() * canvas.width;
-                const y = Math.random() * canvas.height;
-                const r = (Math.random() * 0.6 + 0.2) * Math.max(canvas.width, canvas.height);
                 const g = ctx.createRadialGradient(x, y, 0, x, y, r);
-                // Convert color to RGBA for transparency
                 g.addColorStop(0, color);
-                g.addColorStop(1, 'rgba(0,0,0,0)'); // Fade out
                 ctx.fillStyle = g;
-                ctx.globalCompositeOperation = 'screen'; // Blend mode
                 ctx.beginPath();
                 ctx.arc(x, y, r, 0, Math.PI * 2);
                 ctx.fill();
-            }
-            // 4. Add Grain/Noise
             const grainAmount = parseInt(document.getElementById('grain').value);
             if (grainAmount > 0) {
-                addNoise(ctx, canvas.width, canvas.height, grainAmount / 100);
             }
             // Update Preview
             previewImg.src = canvas.toDataURL('image/jpeg', 0.8);
-            previewImg.onload = () => {
-                previewImg.classList.remove('opacity-0');
-            };
         }
         function addNoise(ctx, w, h, opacity) {
             const imageData = ctx.getImageData(0, 0, w, h);
             const data = imageData.data;
             const len = data.length;
-            // Simple random noise
             for (let i = 0; i < len; i += 4) {
-                const noise = (Math.random() - 0.5) * 255 * opacity;
-                data[i] = data[i] + noise;     // R
-                data[i+1] = data[i+1] + noise; // G
-                data[i+2] = data[i+2] + noise; // B
             }
             ctx.putImageData(imageData, 0, 0);
         }
         async function downloadImage(mode) {
-            currentMode = mode;
             const btn = event.currentTarget;
-            const originalText = btn.innerHTML;
-            btn.innerHTML = `<svg 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> 生成中...`;
             btn.disabled = true;
-            // Wait a tick for UI update
             setTimeout(() => {
-                render(); // Re-render with new size
                 const link = document.createElement('a');
-                link.download = `gradient-wallpaper-${Date.now()}.png`;
-                link.href = canvas.toDataURL('image/png');
                 link.click();
-                btn.innerHTML = originalText;
                 btn.disabled = false;
             }, 100);
         }
         // Helper: HSL to Hex
         function hslToHex(hsl) {

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>渐变壁纸实验室 (Gradient Wallpaper Lab)</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Playfair+Display:wght@700&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet">
     <style>
         body { font-family: 'Inter', sans-serif; }
         .canvas-container {
+            box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #1f2937;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #4b5563;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #6b7280;
         }
     </style>
 </head>
+<body class="bg-gray-950 text-white min-h-screen flex flex-col overflow-hidden">
     <!-- Header -->
+    <header class="p-4 border-b border-gray-800 bg-gray-900/80 backdrop-blur fixed w-full z-20 top-0">
         <div class="max-w-7xl mx-auto flex justify-between items-center">
             <div class="flex items-center gap-3">
+                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-pink-500 via-purple-500 to-indigo-500 shadow-lg shadow-purple-500/20"></div>
                 <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-300">
+                    渐变壁纸实验室 <span class="text-xs text-gray-500 font-normal ml-2 border border-gray-700 px-1.5 py-0.5 rounded">Pro</span>
                 </h1>
             </div>
+            <div class="flex items-center gap-4">
+                 <a href="https://huggingface.co/spaces/duqing26/gradient-wallpaper-lab" target="_blank" class="text-xs text-gray-400 hover:text-white transition flex items-center gap-1">
+                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
+                    By duqing26
+                </a>
+            </div>
         </div>
     </header>
     <!-- Main Content -->
+    <main class="flex-grow flex flex-col md:flex-row pt-20 pb-0 h-screen max-w-full mx-auto w-full">
         <!-- Controls Sidebar -->
+        <aside class="w-full md:w-96 flex-shrink-0 bg-gray-900/90 border-r border-gray-800 backdrop-blur-sm flex flex-col h-full z-10">
+            <div class="p-6 overflow-y-auto flex-grow space-y-8 custom-scrollbar">
+                <!-- Palettes -->
+                <div>
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider">色彩主题</h3>
+                        <button onclick="generatePalette()" class="text-xs bg-gray-800 hover:bg-gray-700 text-purple-400 px-2 py-1 rounded transition flex items-center gap-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
+                            随机生成
+                        </button>
+                    </div>
+                    <div class="grid grid-cols-2 gap-2 mb-4">
+                        <button onclick="applyPreset('neon')" class="h-10 rounded-lg bg-gradient-to-r from-[#f72585] via-[#7209b7] to-[#4361ee] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">赛博霓虹</span></button>
+                        <button onclick="applyPreset('sunset')" class="h-10 rounded-lg bg-gradient-to-r from-[#ffbe0b] via-[#fb5607] to-[#8338ec] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">日落大道</span></button>
+                        <button onclick="applyPreset('nature')" class="h-10 rounded-lg bg-gradient-to-r from-[#2d6a4f] via-[#52b788] to-[#95d5b2] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">森之呼吸</span></button>
+                        <button onclick="applyPreset('pastel')" class="h-10 rounded-lg bg-gradient-to-r from-[#cdb4db] via-[#ffafcc] to-[#a2d2ff] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">棉花糖</span></button>
+                        <button onclick="applyPreset('ocean')" class="h-10 rounded-lg bg-gradient-to-r from-[#03045e] via-[#0077b6] to-[#00b4d8] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">深海迷航</span></button>
+                        <button onclick="applyPreset('dark')" class="h-10 rounded-lg bg-gradient-to-r from-[#000000] via-[#14213d] to-[#e5e5e5] hover:opacity-90 transition relative group overflow-hidden"><span class="absolute inset-0 flex items-center justify-center bg-black/20 text-xs font-medium opacity-0 group-hover:opacity-100 transition">极简黑白</span></button>
                     </div>
+                    <div id="color-inputs" class="flex gap-2 justify-between">
+                        <!-- Color inputs injected here -->
                     </div>
+                </div>
+                <!-- Parameters -->
+                <div>
+                    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">画面质感</h3>
+                    <div class="space-y-5">
+                        <div class="group">
+                            <label class="flex justify-between text-xs mb-2 text-gray-300">
+                                <span>噪点强度 (Grain)</span>
+                                <span id="grain-val" class="text-purple-400 font-mono">15%</span>
+                            </label>
+                            <input type="range" id="grain" min="0" max="40" value="15" class="w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500 group-hover:bg-gray-600 transition">
+                        </div>
+                        <div class="group">
+                            <label class="flex justify-between text-xs mb-2 text-gray-300">
+                                <span>模糊程度 (Blur)</span>
+                                <span id="blur-val" class="text-purple-400 font-mono">100px</span>
+                            </label>
+                            <input type="range" id="blur" min="0" max="200" value="100" class="w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500 group-hover:bg-gray-600 transition">
+                        </div>
+                        <div class="group">
+                             <label class="flex justify-between text-xs mb-2 text-gray-300">
+                                <span>形状复杂度</span>
+                                <span id="complexity-val" class="text-purple-400 font-mono">中</span>
+                            </label>
+                            <input type="range" id="complexity" min="3" max="10" value="6" class="w-full h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500 group-hover:bg-gray-600 transition">
+                        </div>
+                    </div>
+                </div>
+                <!-- Text Overlay -->
+                <div class="pt-4 border-t border-gray-800">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider">文字叠加</h3>
+                        <label class="relative inline-flex items-center cursor-pointer">
+                            <input type="checkbox" id="show-text" class="sr-only peer">
+                            <div class="w-9 h-5 bg-gray-700 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-purple-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-purple-600"></div>
                         </label>
+                    </div>
+                    <div id="text-controls" class="space-y-4 opacity-50 pointer-events-none transition-opacity duration-200">
+                        <input type="text" id="overlay-text" value="Stay Creative" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-purple-500 transition placeholder-gray-500" placeholder="输入文字...">
+                        <div class="grid grid-cols-2 gap-2">
+                             <select id="font-family" class="bg-gray-800 border border-gray-700 rounded-lg px-2 py-2 text-xs text-white focus:outline-none">
+                                <option value="'Inter', sans-serif">Modern (Sans)</option>
+                                <option value="'Playfair Display', serif">Elegant (Serif)</option>
+                                <option value="'JetBrains Mono', monospace">Coding (Mono)</option>
+                            </select>
+                            <input type="number" id="font-size" value="120" min="10" max="500" class="bg-gray-800 border border-gray-700 rounded-lg px-2 py-2 text-xs text-white focus:outline-none" title="Font Size">
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <input type="color" id="text-color" value="#ffffff" class="h-8 w-8 rounded cursor-pointer bg-transparent border-0 p-0">
+                            <label class="text-xs text-gray-400">文字颜色</label>
+                        </div>
                     </div>
                 </div>
             </div>
+            <!-- Download Buttons -->
+            <div class="p-6 border-t border-gray-800 bg-gray-900 z-20">
+                <div class="grid grid-cols-2 gap-3">
+                    <button onclick="downloadImage('mobile')" class="bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-xl font-medium transition flex flex-col items-center justify-center gap-1 border border-gray-700 hover:border-gray-600 group">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 group-hover:text-white transition" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                        </svg>
+                        <span class="text-xs text-gray-300">手机壁纸 (9:19)</span>
+                    </button>
+                    <button onclick="downloadImage('desktop')" class="bg-gray-800 hover:bg-gray-700 text-white py-3 rounded-xl font-medium transition flex flex-col items-center justify-center gap-1 border border-gray-700 hover:border-gray-600 group">
+                         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 group-hover:text-white transition" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                        </svg>
+                        <span class="text-xs text-gray-300">桌面壁纸 (16:9)</span>
+                    </button>
+                </div>
+                <div class="mt-3 text-center">
+                    <p class="text-[10px] text-gray-600">Generated locally in 4K resolution</p>
+                </div>
             </div>
         </aside>
         <!-- Preview Area -->
+        <div class="flex-grow bg-black relative flex items-center justify-center overflow-hidden p-8">
+            <div class="absolute inset-0 opacity-20 pointer-events-none" style="background-image: radial-gradient(#333 1px, transparent 1px); background-size: 20px 20px;"></div>
             <!-- Hidden Canvas for Rendering -->
             <canvas id="renderCanvas" style="display: none;"></canvas>
+            <!-- Preview Image Wrapper -->
+            <div class="relative shadow-2xl rounded-2xl overflow-hidden transition-all duration-500 ease-in-out border border-gray-800" id="preview-container">
+                <img id="previewImage" class="block w-full h-full object-cover bg-gray-900" alt="Preview">
+                <!-- Loading Overlay -->
+                <div id="loading" class="absolute inset-0 flex flex-col items-center justify-center bg-gray-900/60 backdrop-blur-sm z-20 hidden transition-opacity">
+                    <div class="animate-spin rounded-full h-10 w-10 border-4 border-purple-500 border-t-transparent mb-3"></div>
+                    <span class="text-xs font-semibold tracking-wider text-purple-200">RENDERING 4K...</span>
+                </div>
             </div>
         </div>
         const canvas = document.getElementById('renderCanvas');
         const ctx = canvas.getContext('2d');
         const previewImg = document.getElementById('previewImage');
+        const previewContainer = document.getElementById('preview-container');
         // State
         let currentColors = [];
         let currentMode = 'mobile'; // 'mobile' or 'desktop'
+        // Presets
+        const PRESETS = {
+            neon: ['#f72585', '#7209b7', '#3a0ca3', '#4361ee', '#4cc9f0'],
+            sunset: ['#ffbe0b', '#fb5607', '#ff006e', #8338ec', '#3a86ff'], // Corrected hex syntax below
+            nature: ['#2d6a4f', '#40916c', '#52b788', '#74c69d', '#95d5b2'],
+            pastel: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'],
+            ocean: ['#03045e', '#0077b6', '#00b4d8', '#90e0ef', '#caf0f8'],
+            dark: ['#000000', '#14213d', '#2c3e50', '#4a4e69', '#9a8c98']
+        };
+        // Fix preset syntax error in object above if any
+        PRESETS.sunset = ['#ffbe0b', '#fb5607', '#ff006e', '#8338ec', '#3a86ff'];
         // Config
         const SIZES = {
+            mobile: { width: 1440, height: 3040, displayClass: 'h-[80vh] w-auto aspect-[9/19]' },
+            desktop: { width: 3840, height: 2160, displayClass: 'w-[80vw] h-auto aspect-[16/9]' }
         };
         // Init
             generatePalette();
             render();
             setupListeners();
+            updatePreviewStyle();
         });
         function setupListeners() {
+            ['grain', 'blur', 'complexity'].forEach(id => {
+                document.getElementById(id).addEventListener('input', (e) => {
+                    updateLabels();
+                    render();
+                });
             });
+            // Text Controls
+            const textInputs = ['overlay-text', 'font-family', 'font-size', 'text-color'];
+            textInputs.forEach(id => {
+                document.getElementById(id).addEventListener('input', render);
             });
+            document.getElementById('show-text').addEventListener('change', (e) => {
+                const controls = document.getElementById('text-controls');
+                if (e.target.checked) {
+                    controls.classList.remove('opacity-50', 'pointer-events-none');
+                } else {
+                    controls.classList.add('opacity-50', 'pointer-events-none');
+                }
                 render();
             });
         }
+        function updateLabels() {
+            document.getElementById('grain-val').innerText = document.getElementById('grain').value + '%';
+            document.getElementById('blur-val').innerText = document.getElementById('blur').value + 'px';
+            const c = document.getElementById('complexity').value;
+            document.getElementById('complexity-val').innerText = c > 7 ? '高' : (c > 4 ? '中' : '低');
+        }
+        function updatePreviewStyle() {
+            previewImg.className = SIZES[currentMode].displayClass + ' object-cover rounded-xl shadow-2xl';
+        }
+        function applyPreset(name) {
+            currentColors = [...PRESETS[name]];
+            updateColorInputs();
+            render();
+        }
         function generatePalette() {
             currentColors = [];
             const hueBase = Math.random() * 360;
             for (let i = 0; i < 5; i++) {
+                const hue = (hueBase + (Math.random() * 90 - 45)) % 360;
+                const sat = 50 + Math.random() * 50;
+                const light = 30 + Math.random() * 50;
                 currentColors.push(`hsl(${hue}, ${sat}%, ${light}%)`);
             }
             updateColorInputs();
             container.innerHTML = '';
             currentColors.forEach((color, index) => {
                 const div = document.createElement('div');
+                div.className = 'w-full h-8 rounded-md border border-white/10 cursor-pointer hover:scale-105 transition relative overflow-hidden';
+                // Handle HSL to Hex for input value if needed, or just set style
+                // If it's already hex (from preset), fine. If HSL (from random), fine for style but input needs hex.
+                // We'll standardise to Hex for simplicity in input value
+                let hexColor = color;
+                if (color.startsWith('hsl')) {
+                    hexColor = hslToHex(color);
+                }
                 div.style.backgroundColor = color;
                 const input = document.createElement('input');
                 input.type = 'color';
+                input.value = hexColor;
                 input.className = 'absolute inset-0 w-full h-full opacity-0 cursor-pointer';
                 input.addEventListener('input', (e) => {
                     currentColors[index] = e.target.value;
             const size = SIZES[currentMode];
             canvas.width = size.width;
             canvas.height = size.height;
+            const w = canvas.width;
+            const h = canvas.height;
             // 1. Fill Background
             ctx.fillStyle = currentColors[0];
+            ctx.fillRect(0, 0, w, h);
             // 2. Draw Blobs
             const complexity = parseInt(document.getElementById('complexity').value);
+            ctx.globalCompositeOperation = 'screen'; // Blend mode
+            // Deterministic seeding for consistency during tweaking?
+            // For now random is fine, but maybe we want "Seed" later.
+            // To prevent flickering when changing grain, we should probably seed random.
+            // But let's keep it dynamic for now as users might want to click "Render" to re-roll positions.
+            // Actually, we should probably save positions unless "Generate" is clicked?
+            // For simplicity in this v2, we'll re-roll positions on render which happens on input change.
+            // Wait, that means sliding "Grain" will make blobs dance. That's annoying.
+            // Let's implement a simple seeded random or cached positions.
+            if (!window.blobPositions || window.blobPositions.length !== complexity) {
+                regenerateBlobPositions(complexity);
             }
+            window.blobPositions.forEach((pos, i) => {
+                const color = currentColors[(i + 1) % currentColors.length] || currentColors[1];
+                const x = pos.x * w;
+                const y = pos.y * h;
+                const r = pos.r * Math.max(w, h);
                 const g = ctx.createRadialGradient(x, y, 0, x, y, r);
                 g.addColorStop(0, color);
+                g.addColorStop(1, 'rgba(0,0,0,0)');
                 ctx.fillStyle = g;
                 ctx.beginPath();
                 ctx.arc(x, y, r, 0, Math.PI * 2);
                 ctx.fill();
+            });
+            ctx.globalCompositeOperation = 'source-over';
+            // 3. Add Grain
             const grainAmount = parseInt(document.getElementById('grain').value);
             if (grainAmount > 0) {
+                addNoise(ctx, w, h, grainAmount / 100);
+            }
+            // 4. Add Text Overlay
+            if (document.getElementById('show-text').checked) {
+                const text = document.getElementById('overlay-text').value;
+                if (text) {
+                    const fontFamily = document.getElementById('font-family').value;
+                    const fontSizeBase = parseInt(document.getElementById('font-size').value);
+                    const textColor = document.getElementById('text-color').value;
+                    // Scale font size based on resolution
+                    const scaleFactor = w / 1440; // Reference width
+                    const fontSize = fontSizeBase * scaleFactor;
+                    ctx.font = `${fontSize}px ${fontFamily.split(',')[0]}`; // Hack for canvas font string
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    // Shadow
+                    ctx.shadowColor = 'rgba(0,0,0,0.3)';
+                    ctx.shadowBlur = 20 * scaleFactor;
+                    ctx.shadowOffsetX = 0;
+                    ctx.shadowOffsetY = 10 * scaleFactor;
+                    ctx.fillStyle = textColor;
+                    ctx.fillText(text, w / 2, h / 2);
+                    // Reset shadow
+                    ctx.shadowColor = 'transparent';
+                    ctx.shadowBlur = 0;
+                }
             }
             // Update Preview
             previewImg.src = canvas.toDataURL('image/jpeg', 0.8);
+        }
+        function regenerateBlobPositions(count) {
+            window.blobPositions = [];
+            for (let i = 0; i < count; i++) {
+                window.blobPositions.push({
+                    x: Math.random(),
+                    y: Math.random(),
+                    r: Math.random() * 0.6 + 0.3
+                });
+            }
         }
         function addNoise(ctx, w, h, opacity) {
+            // Optimization: Create a smaller noise pattern and tile it?
+            // For 4K, pixel-by-pixel noise in JS is slow (blocking main thread).
+            // Let's use a faster approach: generate small noise canvas and drawImage tile it, or draw random pixels.
+            // Or better: getImageData is slow.
+            // Let's try drawing tiny rectangles? No, too many draw calls.
+            // Let's stick to pixel manipulation but optimize or accept lag?
+            // Current approach is fine for "generating", maybe add loading state.
             const imageData = ctx.getImageData(0, 0, w, h);
             const data = imageData.data;
             const len = data.length;
             for (let i = 0; i < len; i += 4) {
+                // Optimization: Math.random() is somewhat slow.
+                // Use a simple LCG or just accept it.
+                if (Math.random() > 0.5) { // 50% density
+                    const noise = (Math.random() - 0.5) * 255 * opacity;
+                    data[i] = data[i] + noise;
+                    data[i+1] = data[i+1] + noise;
+                    data[i+2] = data[i+2] + noise;
+                }
             }
             ctx.putImageData(imageData, 0, 0);
         }
         async function downloadImage(mode) {
             const btn = event.currentTarget;
+            const originalHTML = btn.innerHTML;
+            // Show loading
+            document.getElementById('loading').classList.remove('hidden');
             btn.disabled = true;
+            btn.innerHTML = `<span class="text-xs">Generating...</span>`;
+            // Wait for UI to update
             setTimeout(() => {
+                // Switch mode temporarily
+                const prevMode = currentMode;
+                currentMode = mode;
+                // Re-render at target resolution
+                render();
+                // Download
                 const link = document.createElement('a');
+                link.download = `wallpaper-${mode}-${Date.now()}.png`;
+                link.href = canvas.toDataURL('image/png'); // High quality
                 link.click();
+                // Restore
+                currentMode = prevMode;
+                render(); // Render back to preview size if we want optimization (but here we just use high res scaled down in preview)
+                // Hide loading
+                document.getElementById('loading').classList.add('hidden');
+                btn.innerHTML = originalHTML;
                 btn.disabled = false;
             }, 100);
         }
+        // Listen for Palette Regen specifically to reset positions?
+        // Actually generatePalette calls render, which checks blobPositions.
+        // We might want new positions on new palette?
+        const originalGenPalette = generatePalette;
+        generatePalette = function() {
+            regenerateBlobPositions(parseInt(document.getElementById('complexity').value));
+            originalGenPalette();
+        }
         // Helper: HSL to Hex
         function hslToHex(hsl) {