Spaces:

samlax12
/

image

Sleeping

App Files Files Community

samlax12 commited on May 27, 2025

Commit

7c9ffd6

verified ·

1 Parent(s): 8811a49

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +613 -578

templates/index.html CHANGED Viewed

@@ -1,579 +1,614 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI图像工作室</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            color: #333;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 2rem;
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 3rem;
-            color: white;
-        }
-        .header h1 {
-            font-size: 3rem;
-            margin-bottom: 0.5rem;
-            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-        }
-        .header p {
-            font-size: 1.2rem;
-            opacity: 0.9;
-        }
-        .tabs {
-            display: flex;
-            justify-content: center;
-            margin-bottom: 2rem;
-            gap: 1rem;
-        }
-        .tab {
-            padding: 1rem 2rem;
-            background: rgba(255, 255, 255, 0.2);
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50px;
-            color: white;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 600;
-            backdrop-filter: blur(10px);
-        }
-        .tab:hover {
-            background: rgba(255, 255, 255, 0.3);
-            transform: translateY(-2px);
-        }
-        .tab.active {
-            background: white;
-            color: #667eea;
-        }
-        .content {
-            background: white;
-            border-radius: 20px;
-            padding: 2rem;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-        }
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-        label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-weight: 600;
-            color: #555;
-        }
-        textarea {
-            width: 100%;
-            min-height: 120px;
-            padding: 1rem;
-            border: 2px solid #e0e0e0;
-            border-radius: 10px;
-            font-size: 1rem;
-            transition: border-color 0.3s ease;
-            resize: vertical;
-        }
-        textarea:focus {
-            outline: none;
-            border-color: #667eea;
-        }
-        select {
-            width: 100%;
-            padding: 0.75rem;
-            border: 2px solid #e0e0e0;
-            border-radius: 10px;
-            font-size: 1rem;
-            background: white;
-            cursor: pointer;
-        }
-        .options-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 1rem;
-        }
-        .file-upload {
-            position: relative;
-            display: inline-block;
-            cursor: pointer;
-            width: 100%;
-        }
-        .file-upload input[type="file"] {
-            position: absolute;
-            opacity: 0;
-            width: 100%;
-            height: 100%;
-            cursor: pointer;
-        }
-        .file-upload-label {
-            display: block;
-            padding: 2rem;
-            border: 3px dashed #667eea;
-            border-radius: 10px;
-            text-align: center;
-            background: #f8f9ff;
-            transition: all 0.3s ease;
-        }
-        .file-upload:hover .file-upload-label {
-            background: #eef0ff;
-            border-color: #764ba2;
-        }
-        .generate-btn {
-            width: 100%;
-            padding: 1.25rem;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border: none;
-            border-radius: 10px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            margin-top: 1rem;
-        }
-        .generate-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
-        }
-        .generate-btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none;
-        }
-        .result-section {
-            margin-top: 3rem;
-            text-align: center;
-        }
-        .result-image {
-            max-width: 100%;
-            border-radius: 10px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-            margin-top: 1rem;
-        }
-        .loading {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #667eea;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-right: 10px;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .error-message {
-            background: #fee;
-            color: #c33;
-            padding: 1rem;
-            border-radius: 10px;
-            margin-top: 1rem;
-        }
-        .success-message {
-            background: #efe;
-            color: #3c3;
-            padding: 1rem;
-            border-radius: 10px;
-            margin-top: 1rem;
-        }
-        .hidden {
-            display: none;
-        }
-        .image-preview {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1rem;
-            margin-top: 1rem;
-        }
-        .preview-item {
-            position: relative;
-            width: 150px;
-            height: 150px;
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-        }
-        .preview-item img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .preview-item .remove {
-            position: absolute;
-            top: 5px;
-            right: 5px;
-            background: rgba(255, 255, 255, 0.9);
-            color: #c33;
-            border: none;
-            border-radius: 50%;
-            width: 30px;
-            height: 30px;
-            cursor: pointer;
-            font-weight: bold;
-        }
-        .usage-info {
-            margin-top: 1rem;
-            padding: 1rem;
-            background: #f0f4ff;
-            border-radius: 10px;
-            font-size: 0.9rem;
-            color: #666;
-        }
-        .download-btn {
-            margin-top: 1rem;
-            padding: 0.75rem 1.5rem;
-            background: #4CAF50;
-            color: white;
-            border: none;
-            border-radius: 10px;
-            font-size: 1rem;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-        .download-btn:hover {
-            background: #45a049;
-            transform: translateY(-2px);
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <header class="header">
-            <h1>🎨 AI 图像工作室</h1>
-            <p>使用人工智能的力量创造惊艳图像</p>
-        </header>
-        <div class="tabs">
-            <div class="tab active" onclick="switchTab('generate')">生成图像</div>
-            <div class="tab" onclick="switchTab('edit')">编辑图像</div>
-        </div>
-        <div class="content">
-            <!-- Generate Tab -->
-            <div id="generate-tab" class="tab-content">
-                <form id="generate-form">
-                    <div class="form-group">
-                        <label for="prompt">描述您想要的图像</label>
-                        <textarea id="prompt" name="prompt" placeholder="夕阳下的宁静风景，山峦倒映在晶莹剔透的湖面上，水彩画风格..." required></textarea>
-                    </div>
-                    <div class="options-grid">
-                        <div class="form-group">
-                            <label for="size">图像尺寸</label>
-                            <select id="size" name="size">
-                                <option value="1024x1024">正方形 (1024x1024)</option>
-                                <option value="1792x1024">横向 (1792x1024)</option>
-                                <option value="1024x1792">纵向 (1024x1792)</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="quality">图像质量</label>
-                            <select id="quality" name="quality">
-                                <option value="standard">标准</option>
-                                <option value="hd">高清 (费用更高)</option>
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label for="style">风格</label>
-                            <select id="style" name="style">
-                                <option value="vivid">生动</option>
-                                <option value="natural">自然</option>
-                            </select>
-                        </div>
-                    </div>
-                    <button type="submit" class="generate-btn">
-                        <span class="btn-text">生成图像</span>
-                    </button>
-                </form>
-            </div>
-            <!-- Edit Tab -->
-            <div id="edit-tab" class="tab-content hidden">
-                <form id="edit-form">
-                    <div class="form-group">
-                        <label>上传图像（最多16张）</label>
-                        <div class="file-upload">
-                            <input type="file" id="images" name="images" multiple accept="image/*" required>
-                            <label for="images" class="file-upload-label">
-                                <div>📁 点击或拖拽图像到这里</div>
-                                <small>支持 PNG、JPG、WEBP 格式（每个文件最大 25MB）</small>
-                            </label>
-                        </div>
-                        <div id="image-preview" class="image-preview"></div>
-                    </div>
-                    <div class="form-group">
-                        <label for="edit-prompt">描述如何组合/编辑这些图像</label>
-                        <textarea id="edit-prompt" name="prompt" placeholder="将这些图像制作成复古相册风格的精美拼贴画..." required></textarea>
-                    </div>
-                    <div class="form-group">
-                        <label for="edit-size">输出尺寸</label>
-                        <select id="edit-size" name="size">
-                            <option value="256x256">小尺寸 (256x256)</option>
-                            <option value="512x512">中尺寸 (512x512)</option>
-                            <option value="1024x1024">大尺寸 (1024x1024)</option>
-                        </select>
-                    </div>
-                    <button type="submit" class="generate-btn">
-                        <span class="btn-text">编辑图像</span>
-                    </button>
-                </form>
-            </div>
-            <div id="result-section" class="result-section hidden">
-                <h2>您生成的图像</h2>
-                <img id="result-image" class="result-image" alt="生成的图像">
-                <div id="usage-info" class="usage-info hidden"></div>
-                <button id="download-btn" class="download-btn" onclick="downloadImage()">下载图像</button>
-            </div>
-            <div id="message" class="hidden"></div>
-        </div>
-    </div>
-    <script>
-        let currentTab = 'generate';
-        let generatedImageData = null;
-        let selectedFiles = [];
-        function switchTab(tab) {
-            currentTab = tab;
-            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-            document.querySelectorAll('.tab-content').forEach(t => t.classList.add('hidden'));
-            event.target.classList.add('active');
-            document.getElementById(`${tab}-tab`).classList.remove('hidden');
-            // Hide result when switching tabs
-            document.getElementById('result-section').classList.add('hidden');
-        }
-        // Generate form submission
-        document.getElementById('generate-form').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const btn = e.target.querySelector('.generate-btn');
-            const btnText = btn.querySelector('.btn-text');
-            // Disable button and show loading
-            btn.disabled = true;
-            btnText.innerHTML = '<span class="loading"></span>生成中...';
-            // Hide previous results
-            showMessage('');
-            document.getElementById('result-section').classList.add('hidden');
-            const formData = {
-                prompt: document.getElementById('prompt').value,
-                size: document.getElementById('size').value,
-                quality: document.getElementById('quality').value,
-                style: document.getElementById('style').value
-            };
-            try {
-                const response = await fetch('/generate', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(formData)
-                });
-                const data = await response.json();
-                if (data.success) {
-                    generatedImageData = data.image;
-                    document.getElementById('result-image').src = data.image;
-                    document.getElementById('result-section').classList.remove('hidden');
-                    if (data.usage) {
-                        const usageInfo = document.getElementById('usage-info');
-                        usageInfo.innerHTML = `使用的令牌数: ${data.usage.total_tokens || '未知'}`;
-                        usageInfo.classList.remove('hidden');
-                    }
-                    showMessage('图像生成成功！', 'success');
-                } else {
-                    showMessage(data.error || '发生错误', 'error');
-                }
-            } catch (error) {
-                showMessage('网络错误: ' + error.message, 'error');
-            } finally {
-                btn.disabled = false;
-                btnText.innerHTML = '生成图像';
-            }
-        });
-        // Edit form submission
-        document.getElementById('edit-form').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const btn = e.target.querySelector('.generate-btn');
-            const btnText = btn.querySelector('.btn-text');
-            if (selectedFiles.length === 0) {
-                showMessage('请至少选择一张图像', 'error');
-                return;
-            }
-            // Disable button and show loading
-            btn.disabled = true;
-            btnText.innerHTML = '<span class="loading"></span>处理中...';
-            // Hide previous results
-            showMessage('');
-            document.getElementById('result-section').classList.add('hidden');
-            const formData = new FormData();
-            selectedFiles.forEach(file => {
-                formData.append('images', file);
-            });
-            formData.append('prompt', document.getElementById('edit-prompt').value);
-            formData.append('size', document.getElementById('edit-size').value);
-            try {
-                const response = await fetch('/edit', {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                if (data.success) {
-                    generatedImageData = data.image;
-                    document.getElementById('result-image').src = data.image;
-                    document.getElementById('result-section').classList.remove('hidden');
-                    if (data.usage) {
-                        const usageInfo = document.getElementById('usage-info');
-                        usageInfo.innerHTML = `使用的令牌数: ${data.usage.total_tokens || '未知'}`;
-                        usageInfo.classList.remove('hidden');
-                    }
-                    showMessage('图像编辑成功！', 'success');
-                } else {
-                    showMessage(data.error || '发生错误', 'error');
-                }
-            } catch (error) {
-                showMessage('网络错误: ' + error.message, 'error');
-            } finally {
-                btn.disabled = false;
-                btnText.innerHTML = '编辑图像';
-            }
-        });
-        // File upload handling
-        document.getElementById('images').addEventListener('change', (e) => {
-            const files = Array.from(e.target.files);
-            selectedFiles = files.slice(0, 16); // Limit to 16 files
-            const preview = document.getElementById('image-preview');
-            preview.innerHTML = '';
-            selectedFiles.forEach((file, index) => {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    const div = document.createElement('div');
-                    div.className = 'preview-item';
-                    div.innerHTML = `
-                        <img src="${e.target.result}" alt="Preview">
-                        <button class="remove" onclick="removeImage(${index})">×</button>
-                    `;
-                    preview.appendChild(div);
-                };
-                reader.readAsDataURL(file);
-            });
-        });
-        function removeImage(index) {
-            selectedFiles.splice(index, 1);
-            // Update file input
-            const dt = new DataTransfer();
-            selectedFiles.forEach(file => dt.items.add(file));
-            document.getElementById('images').files = dt.files;
-            // Trigger change event to update preview
-            document.getElementById('images').dispatchEvent(new Event('change'));
-        }
-        function showMessage(message, type = '') {
-            const messageEl = document.getElementById('message');
-            if (!message) {
-                messageEl.classList.add('hidden');
-                return;
-            }
-            messageEl.textContent = message;
-            messageEl.className = type === 'error' ? 'error-message' :
-                                 type === 'success' ? 'success-message' : '';
-        }
-        function downloadImage() {
-            if (!generatedImageData) return;
-            const link = document.createElement('a');
-            link.href = generatedImageData;
-            link.download = `ai-generated-${Date.now()}.png`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-    </script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI图像工作室</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 3rem;
+            color: white;
+        }
+        .header h1 {
+            font-size: 3rem;
+            margin-bottom: 0.5rem;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        .header p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .tabs {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 2rem;
+            gap: 1rem;
+        }
+        .tab {
+            padding: 1rem 2rem;
+            background: rgba(255, 255, 255, 0.2);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50px;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 600;
+            backdrop-filter: blur(10px);
+        }
+        .tab:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+        }
+        .tab.active {
+            background: white;
+            color: #667eea;
+        }
+        .content {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            color: #555;
+        }
+        textarea {
+            width: 100%;
+            min-height: 120px;
+            padding: 1rem;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
+            font-size: 1rem;
+            transition: border-color 0.3s ease;
+            resize: vertical;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        select {
+            width: 100%;
+            padding: 0.75rem;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
+            font-size: 1rem;
+            background: white;
+            cursor: pointer;
+        }
+        .options-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+        .file-upload {
+            position: relative;
+            display: inline-block;
+            cursor: pointer;
+            width: 100%;
+        }
+        .file-upload input[type="file"] {
+            position: absolute;
+            opacity: 0;
+            width: 100%;
+            height: 100%;
+            cursor: pointer;
+        }
+        .file-upload-label {
+            display: block;
+            padding: 2rem;
+            border: 3px dashed #667eea;
+            border-radius: 10px;
+            text-align: center;
+            background: #f8f9ff;
+            transition: all 0.3s ease;
+        }
+        .file-upload:hover .file-upload-label {
+            background: #eef0ff;
+            border-color: #764ba2;
+        }
+        .generate-btn {
+            width: 100%;
+            padding: 1.25rem;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-top: 1rem;
+        }
+        .generate-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
+        }
+        .generate-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .result-section {
+            margin-top: 3rem;
+            text-align: center;
+        }
+        .result-image {
+            max-width: 100%;
+            border-radius: 10px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+            margin-top: 1rem;
+        }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #667eea;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .error-message {
+            background: #fee;
+            color: #c33;
+            padding: 1rem;
+            border-radius: 10px;
+            margin-top: 1rem;
+        }
+        .success-message {
+            background: #efe;
+            color: #3c3;
+            padding: 1rem;
+            border-radius: 10px;
+            margin-top: 1rem;
+        }
+        .hidden {
+            display: none;
+        }
+        .image-preview {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+        .preview-item {
+            position: relative;
+            width: 150px;
+            height: 150px;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+        .preview-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .preview-item .remove {
+            position: absolute;
+            top: 5px;
+            right: 5px;
+            background: rgba(255, 255, 255, 0.9);
+            color: #c33;
+            border: none;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .usage-info {
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #f0f4ff;
+            border-radius: 10px;
+            font-size: 0.9rem;
+            color: #666;
+        }
+        .download-btn {
+            margin-top: 1rem;
+            padding: 0.75rem 1.5rem;
+            background: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 10px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .download-btn:hover {
+            background: #45a049;
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header class="header">
+            <h1>🎨 AI 图像工作室</h1>
+            <p>使用人工智能的力量创造惊艳图像</p>
+        </header>
+        <div class="tabs">
+            <div class="tab active" onclick="switchTab('generate')">生成图像</div>
+            <div class="tab" onclick="switchTab('edit')">编辑图像</div>
+        </div>
+        <div class="content">
+            <!-- Generate Tab -->
+            <div id="generate-tab" class="tab-content">
+                <form id="generate-form">
+                    <div class="form-group">
+                        <label for="prompt">描述您想要的图像</label>
+                        <textarea id="prompt" name="prompt" placeholder="夕阳下的宁静风景，山峦倒映在晶莹剔透的湖面上，水彩画风格..." required></textarea>
+                    </div>
+                    <div class="options-grid">
+                        <div class="form-group">
+                            <label for="size">图像尺寸</label>
+                            <select id="size" name="size">
+                                <option value="1024x1024">正方形 (1024x1024)</option>
+                                <option value="1792x1024">横向 (1792x1024)</option>
+                                <option value="1024x1792">纵向 (1024x1792)</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="quality">图像质量</label>
+                            <select id="quality" name="quality">
+                                <option value="standard">标准</option>
+                                <option value="hd">高清 (费用更高)</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="style">风格</label>
+                            <select id="style" name="style">
+                                <option value="vivid">生动</option>
+                                <option value="natural">自然</option>
+                            </select>
+                        </div>
+                    </div>
+                    <button type="submit" class="generate-btn">
+                        <span class="btn-text">生成图像</span>
+                    </button>
+                </form>
+            </div>
+            <!-- Edit Tab -->
+            <div id="edit-tab" class="tab-content hidden">
+                <form id="edit-form">
+                    <div class="form-group">
+                        <label>上传图像（仅支持1张）</label>
+                        <div class="file-upload">
+                            <input type="file" id="image" name="image" accept="image/*" required>
+                            <label for="image" class="file-upload-label">
+                                <div>📁 点击或拖拽图像到这里</div>
+                                <small>支持 PNG 格式（正方形，最大 4MB）</small>
+                            </label>
+                        </div>
+                        <div id="image-preview" class="image-preview"></div>
+                    </div>
+                    <div class="form-group">
+                        <label>上传蒙版（可选）</label>
+                        <div class="file-upload">
+                            <input type="file" id="mask" name="mask" accept="image/png">
+                            <label for="mask" class="file-upload-label">
+                                <div>🎭 上传蒙版图像（可选）</div>
+                                <small>PNG 格式，透明区域表示要编辑的部分</small>
+                            </label>
+                        </div>
+                        <div id="mask-preview" class="image-preview"></div>
+                    </div>
+                    <div class="form-group">
+                        <label for="edit-prompt">描述您想要的编辑效果</label>
+                        <textarea id="edit-prompt" name="prompt" placeholder="在透明区域添加一只可爱的猫咪..." required></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label for="edit-size">输出尺寸</label>
+                        <select id="edit-size" name="size">
+                            <option value="256x256">小尺寸 (256x256)</option>
+                            <option value="512x512">中尺寸 (512x512)</option>
+                            <option value="1024x1024">大尺寸 (1024x1024)</option>
+                        </select>
+                    </div>
+                    <button type="submit" class="generate-btn">
+                        <span class="btn-text">编辑图像</span>
+                    </button>
+                </form>
+            </div>
+            <div id="result-section" class="result-section hidden">
+                <h2>您生成的图像</h2>
+                <img id="result-image" class="result-image" alt="生成的图像">
+                <div id="usage-info" class="usage-info hidden"></div>
+                <button id="download-btn" class="download-btn" onclick="downloadImage()">下载图像</button>
+            </div>
+            <div id="message" class="hidden"></div>
+        </div>
+    </div>
+    <script>
+        let currentTab = 'generate';
+        let generatedImageData = null;
+        let selectedImage = null;
+        let selectedMask = null;
+        function switchTab(tab) {
+            currentTab = tab;
+            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('.tab-content').forEach(t => t.classList.add('hidden'));
+            event.target.classList.add('active');
+            document.getElementById(`${tab}-tab`).classList.remove('hidden');
+            // Hide result when switching tabs
+            document.getElementById('result-section').classList.add('hidden');
+        }
+        // Generate form submission
+        document.getElementById('generate-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const btn = e.target.querySelector('.generate-btn');
+            const btnText = btn.querySelector('.btn-text');
+            // Disable button and show loading
+            btn.disabled = true;
+            btnText.innerHTML = '<span class="loading"></span>生成中...';
+            // Hide previous results
+            showMessage('');
+            document.getElementById('result-section').classList.add('hidden');
+            const formData = {
+                prompt: document.getElementById('prompt').value,
+                size: document.getElementById('size').value,
+                quality: document.getElementById('quality').value,
+                style: document.getElementById('style').value
+            };
+            try {
+                const response = await fetch('/generate', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(formData)
+                });
+                const data = await response.json();
+                if (data.success) {
+                    generatedImageData = data.image;
+                    document.getElementById('result-image').src = data.image;
+                    document.getElementById('result-section').classList.remove('hidden');
+                    if (data.usage) {
+                        const usageInfo = document.getElementById('usage-info');
+                        usageInfo.innerHTML = `使用的令牌数: ${data.usage.total_tokens || '未知'}`;
+                        usageInfo.classList.remove('hidden');
+                    }
+                    showMessage('图像生成成功！', 'success');
+                } else {
+                    showMessage(data.error || '发生错误', 'error');
+                }
+            } catch (error) {
+                showMessage('网络错误: ' + error.message, 'error');
+            } finally {
+                btn.disabled = false;
+                btnText.innerHTML = '生成图像';
+            }
+        });
+        // Edit form submission
+        document.getElementById('edit-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const btn = e.target.querySelector('.generate-btn');
+            const btnText = btn.querySelector('.btn-text');
+            if (!selectedImage) {
+                showMessage('请选择一张图像', 'error');
+                return;
+            }
+            // Disable button and show loading
+            btn.disabled = true;
+            btnText.innerHTML = '<span class="loading"></span>处理中...';
+            // Hide previous results
+            showMessage('');
+            document.getElementById('result-section').classList.add('hidden');
+            const formData = new FormData();
+            formData.append('image', selectedImage);
+            if (selectedMask) {
+                formData.append('mask', selectedMask);
+            }
+            formData.append('prompt', document.getElementById('edit-prompt').value);
+            formData.append('size', document.getElementById('edit-size').value);
+            try {
+                const response = await fetch('/edit', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.success) {
+                    generatedImageData = data.image;
+                    document.getElementById('result-image').src = data.image;
+                    document.getElementById('result-section').classList.remove('hidden');
+                    if (data.usage) {
+                        const usageInfo = document.getElementById('usage-info');
+                        usageInfo.innerHTML = `使用的令牌数: ${data.usage.total_tokens || '未知'}`;
+                        usageInfo.classList.remove('hidden');
+                    }
+                    showMessage('图像编辑成功！', 'success');
+                } else {
+                    showMessage(data.error || '发生错误', 'error');
+                }
+            } catch (error) {
+                showMessage('网络错误: ' + error.message, 'error');
+            } finally {
+                btn.disabled = false;
+                btnText.innerHTML = '编辑图像';
+            }
+        });
+        // Image upload handling
+        document.getElementById('image').addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                selectedImage = file;
+                const preview = document.getElementById('image-preview');
+                preview.innerHTML = '';
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const div = document.createElement('div');
+                    div.className = 'preview-item';
+                    div.innerHTML = `
+                        <img src="${e.target.result}" alt="Preview">
+                        <button class="remove" onclick="removeImage()">×</button>
+                    `;
+                    preview.appendChild(div);
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+        // Mask upload handling
+        document.getElementById('mask').addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                selectedMask = file;
+                const preview = document.getElementById('mask-preview');
+                preview.innerHTML = '';
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const div = document.createElement('div');
+                    div.className = 'preview-item';
+                    div.innerHTML = `
+                        <img src="${e.target.result}" alt="Mask Preview">
+                        <button class="remove" onclick="removeMask()">×</button>
+                    `;
+                    preview.appendChild(div);
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+        function removeImage() {
+            selectedImage = null;
+            document.getElementById('image').value = '';
+            document.getElementById('image-preview').innerHTML = '';
+        }
+        function removeMask() {
+            selectedMask = null;
+            document.getElementById('mask').value = '';
+            document.getElementById('mask-preview').innerHTML = '';
+        }
+        function showMessage(message, type = '') {
+            const messageEl = document.getElementById('message');
+            if (!message) {
+                messageEl.classList.add('hidden');
+                return;
+            }
+            messageEl.textContent = message;
+            messageEl.className = type === 'error' ? 'error-message' :
+                                 type === 'success' ? 'success-message' : '';
+        }
+        function downloadImage() {
+            if (!generatedImageData) return;
+            const link = document.createElement('a');
+            link.href = generatedImageData;
+            link.download = `ai-generated-${Date.now()}.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+    </script>
+</body>
 </html>