Spaces:

samlax12
/

image

Sleeping

File size: 21,059 Bytes

<!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>