Upload 10 files

index.html

@@ -258,41 +258,66 @@
         }
     };
     
-    // ============================================
-    // 图片处理模块
-    // ============================================
-    const ImageHandler = {
-        // 文件转 Base64
-        fileToBase64(file) {
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.onload = () => resolve(reader.result);
-                reader.onerror = () => reject(reader.error);
-                reader.readAsDataURL(file);
-            });
-        },
-        
-        // 处理上传的文件
-        async processFiles(files) {
-            const maxImages = 16;
-            const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'));
-            
-            for (const file of imageFiles) {
-                if (AppState.currentImages.length >= maxImages) {
-                    alert(`最多只能上传 ${maxImages} 张图片`);
-                    break;
-                }
-                
-                try {
-                    const base64 = await this.fileToBase64(file);
-                    AppState.currentImages.push(base64);
-                } catch (err) {
-                    console.error('图片读取失败:', err);
-                }
-            }
-            
-            PreviewManager.render();
-        },
+    // ============================================
+    // 图片处理模块
+    // ============================================
+    const ImageHandler = {
+        // 文件转 Base64
+        fileToBase64(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = () => reject(reader.error);
+                reader.readAsDataURL(file);
+            });
+        },
+
+        // 压缩图片（手机端优化）
+        async compressImage(base64Data, maxWidth = 1280) {
+            return new Promise((resolve) => {
+                const img = new Image();
+                img.onload = () => {
+                    if (img.width <= maxWidth && base64Data.length < 500000) {
+                        resolve(base64Data);
+                        return;
+                    }
+
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+                    const scale = Math.min(1, maxWidth / img.width);
+                    canvas.width = img.width * scale;
+                    canvas.height = img.height * scale;
+                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+                    resolve(canvas.toDataURL('image/jpeg', 0.8));
+                };
+                img.onerror = () => resolve(base64Data);
+                img.src = base64Data;
+            });
+        },
+
+        // 处理上传的文件
+        async processFiles(files) {
+            const maxImages = 16;
+            const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'));
+
+            for (const file of imageFiles) {
+                if (AppState.currentImages.length >= maxImages) {
+                    alert(`最多只能上传 ${maxImages} 张图片`);
+                    break;
+                }
+
+                try {
+                    let base64 = await this.fileToBase64(file);
+                    base64 = await this.compressImage(base64);
+                    AppState.currentImages.push(base64);
+                } catch (err) {
+                    console.error('图片读取失败:', err);
+                }
+            }
+
+            PreviewManager.render();
+        },
         
         // 移除指定索引的图片
         removeAt(index) {
@@ -386,55 +411,59 @@
             }
         },
         
-        render() {
-            this.container.innerHTML = '';
-            
-            if (AppState.galleryData.length === 0) {
-                this.container.innerHTML = `
-                    <div style="grid-column: 1/-1; text-align: center; color: var(--text-sub); padding: 60px 20px;">
-                        <div style="font-size: 48px; margin-bottom: 10px;">🎨</div>
-                        <div>暂无作品，开始创作吧！</div>
-                    </div>
-                `;
-                return;
-            }
-            
-            AppState.galleryData.forEach(item => {
-                const card = this.createCard(item);
-                this.container.appendChild(card);
-            });
-        },
+        render() {
+            this.container.innerHTML = '';
+
+            if (AppState.galleryData.length === 0) {
+                this.container.innerHTML = `
+                    <div style="grid-column: 1/-1; text-align: center; color: var(--text-sub); padding: 60px 20px;">
+                        <div style="font-size: 48px; margin-bottom: 10px;">🎨</div>
+                        <div>暂无作品，开��创作吧！</div>
+                    </div>
+                `;
+                return;
+            }
+
+            const fragment = document.createDocumentFragment();
+            AppState.galleryData.forEach(item => {
+                const card = this.createCard(item);
+                fragment.appendChild(card);
+            });
+            this.container.appendChild(fragment);
+        },
         
-        createCard(item) {
-            const el = document.createElement('div');
-            el.className = 'history-item';
-            el.dataset.id = item.id;
-            
-            // 参考图标记
-            if (item.inputImages && item.inputImages.length > 0) {
-                const badge = document.createElement('div');
-                badge.className = 'item-badge';
-                badge.textContent = `📎 ${item.inputImages.length}`;
-                el.appendChild(badge);
-            }
-            
-            // 主图片 - 使用 DOM API 设置 src
-            const img = document.createElement('img');
-            img.loading = 'lazy';
-            img.src = item.image;  // 关键：直接赋值，不用模板字符串
-            img.onerror = () => {
-                console.error('图片加载失败, ID:', item.id);
-                img.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23333" width="100" height="100"/><text fill="%23666" x="50%" y="50%" text-anchor="middle" dy=".3em">Error</text></svg>';
-            };
-            el.appendChild(img);
-            
+        createCard(item) {
+            const el = document.createElement('div');
+            el.className = 'history-item';
+            el.dataset.id = item.id;
+
+            // 参考图标记
+            if (item.inputImages && item.inputImages.length > 0) {
+                const badge = document.createElement('div');
+                badge.className = 'item-badge';
+                badge.textContent = `📎 ${item.inputImages.length}`;
+                el.appendChild(badge);
+            }
+
+            // 主图片 - 使用 DOM API 设置 src
+            const img = document.createElement('img');
+            img.loading = 'lazy';
+            img.decoding = 'async';
+            img.src = item.image;
+            img.alt = `作品 ${item.id}`;
+            img.onerror = () => {
+                console.error('图片加载失败, ID:', item.id);
+                img.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23333" width="100" height="100"/><text fill="%23666" x="50%" y="50%" text-anchor="middle" dy=".3em">Error</text></svg>';
+            };
+            el.appendChild(img);
+
             // 操作按钮
             const actions = document.createElement('div');
             actions.className = 'item-actions';
 
             const shareBtn = document.createElement('button');
             shareBtn.className = 'icon-btn share-btn';
-            shareBtn.innerHTML = '🌐';
+            shareBtn.textContent = '🌐';
             shareBtn.title = '发布到公共画廊';
             shareBtn.setAttribute('aria-label', '发布到公共画廊');
             shareBtn.onclick = (e) => {
@@ -444,7 +473,8 @@
 
             const downloadBtn = document.createElement('button');
             downloadBtn.className = 'icon-btn';
-            downloadBtn.innerHTML = '⬇';
+            downloadBtn.textContent = '⬇';
+            downloadBtn.title = '下载图片';
             downloadBtn.onclick = (e) => {
                 e.stopPropagation();
                 this.downloadImage(item);
@@ -453,7 +483,8 @@
             const deleteBtn = document.createElement('button');
             deleteBtn.className = 'icon-btn';
             deleteBtn.style.background = 'rgba(239,68,68,0.8)';
-            deleteBtn.innerHTML = '🗑';
+            deleteBtn.textContent = '🗑';
+            deleteBtn.title = '删除图片';
             deleteBtn.onclick = (e) => {
                 e.stopPropagation();
                 this.deleteItem(item.id);
@@ -464,11 +495,11 @@
             actions.appendChild(deleteBtn);
             el.appendChild(actions);
 
-            // 点击打开弹窗
-            el.onclick = () => ModalManager.open(item);
-            
-            return el;
-        },
+            // 点击打开弹窗
+            el.onclick = () => ModalManager.open(item);
+
+            return el;
+        },
         
         downloadImage(item) {
             const link = document.createElement('a');
@@ -586,7 +617,10 @@
         defaultHint: DEFAULT_PUBLIC_HINT,
         hintTimer: null,
         syncTimer: null,
-        syncInterval: 10000,
+        syncInterval: 0,
+        loadTimeout: null,
+        lastFetchTime: 0,
+        minFetchInterval: 5000,
 
         init() {
             this.container = document.getElementById('public-gallery');
@@ -602,12 +636,15 @@
                 this.refreshBtn.onclick = () => this.fetch();
             }
 
-            this.startRealtimeSync();
+            this.initialFetch();
+        },
+
+        async initialFetch() {
+            await this.fetch();
         },
 
         startRealtimeSync() {
-            this.fetch();
-            this.syncTimer = setInterval(() => this.fetch(), this.syncInterval);
+            // 实时同步已禁用 - 改为手动刷新提高性能
         },
 
         stopRealtimeSync() {
@@ -658,13 +695,39 @@
                 this.refreshBtn.classList.toggle('spinning', loading);
                 this.refreshBtn.disabled = loading;
             }
+            // 防止加载超时 - 30秒后强制停止
+            if (loading) {
+                clearTimeout(this.loadTimeout);
+                this.loadTimeout = setTimeout(() => {
+                    if (this.isLoading) {
+                        this.setLoading(false);
+                        this.setHint('加载超时，请稍后重试', 'error');
+                    }
+                }, 30000);
+            } else {
+                clearTimeout(this.loadTimeout);
+            }
         },
 
         async fetch() {
             if (!this.container) return;
+
+            // 防止过于频繁的请求
+            const now = Date.now();
+            if (now - this.lastFetchTime < this.minFetchInterval) {
+                return;
+            }
+            this.lastFetchTime = now;
+
             this.setLoading(true);
             try {
-                const res = await fetch('/api/public-gallery');
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 15000);
+
+                const res = await fetch('/api/public-gallery', {
+                    signal: controller.signal
+                });
+                clearTimeout(timeoutId);
                 const data = await res.json();
 
                 if (!res.ok || !data.success) {
@@ -676,8 +739,14 @@
                 this.setHint(this.defaultHint);
             } catch (error) {
                 console.error('公共画廊加载失败:', error);
-                this.setHint('公共画廊加载失败，请稍后重试', 'error');
-                this.showEmpty('无法加载公共画廊，请稍后重试');
+                if (error.name === 'AbortError') {
+                    this.setHint('加载超时，请检查网络', 'error');
+                } else {
+                    this.setHint('加载失败，请稍后重试', 'error');
+                }
+                if (AppState.publicGalleryData.length === 0) {
+                    this.showEmpty('无法加载公共画廊，请稍后重试');
+                }
             } finally {
                 this.setLoading(false);
             }
@@ -702,19 +771,24 @@
             }
 
             this.container.innerHTML = '';
+            const fragment = document.createDocumentFragment();
             AppState.publicGalleryData.forEach(item => {
                 const card = this.createCard(item);
-                this.container.appendChild(card);
+                fragment.appendChild(card);
             });
+            this.container.appendChild(fragment);
         },
 
         createCard(item) {
             const card = document.createElement('div');
             card.className = 'public-card';
+            card.dataset.id = item.id;
 
             const img = document.createElement('img');
             img.loading = 'lazy';
+            img.decoding = 'async';
             img.src = item.image;
+            img.alt = item.prompt || '创意作品';
             card.appendChild(img);
 
             const info = document.createElement('div');
@@ -723,6 +797,7 @@
             const promptText = document.createElement('p');
             promptText.className = 'public-card-prompt';
             promptText.textContent = item.prompt || '未提供提示词';
+            promptText.title = item.prompt;
             info.appendChild(promptText);
 
             const footer = document.createElement('div');
@@ -735,7 +810,7 @@
             if (this.canDelete(item.id)) {
                 const deleteBtn = document.createElement('button');
                 deleteBtn.className = 'icon-btn small public-delete-btn';
-                deleteBtn.innerHTML = '🗑';
+                deleteBtn.textContent = '🗑';
                 deleteBtn.title = '删除这张作品';
                 deleteBtn.onclick = (e) => {
                     e.stopPropagation();
@@ -858,91 +933,128 @@
     const Generator = {
         sendBtn: null,
         textarea: null,
+        statusBar: null,
+        isGenerating: false,
+        generateTimeout: null,
 
         init() {
             this.sendBtn = document.getElementById('send-btn');
             this.textarea = document.getElementById('prompt');
+            this.statusBar = document.getElementById('status-bar');
 
-            this.sendBtn.onclick = () => this.generate();
-            
-            // 输入框自动高度
-            this.textarea.addEventListener('input', () => {
-                this.textarea.style.height = 'auto';
-                this.textarea.style.height = this.textarea.scrollHeight + 'px';
-            });
-            
-            // 回车发送（Shift+Enter 换行）
-            this.textarea.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    this.generate();
-                }
-            });
-        },
-        
-        setLoading(loading) {
-            if (loading) {
-                this.sendBtn.classList.add('loading');
-                this.sendBtn.disabled = true;
-            } else {
-                this.sendBtn.classList.remove('loading');
-                this.sendBtn.disabled = false;
-            }
-        },
-        
-        async generate() {
-            const prompt = this.textarea.value.trim();
-            if (!prompt) {
-                alert('请输入提示词');
-                return;
-            }
-            
-            this.setLoading(true);
-            
-            try {
-                const response = await fetch('/api/generate', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({
-                        prompt: prompt,
-                        images: AppState.currentImages
-                    })
-                });
-                
-                const data = await response.json();
-                
-                if (!response.ok || !data.success) {
-                    throw new Error(data.message || '生成失败');
-                }
-                
-                // 验证返回的图片数据
-                if (!data.image || !data.image.startsWith('data:image')) {
-                    throw new Error('返回的图片数据无效');
-                }
-                
-                // 保存到数据库
-                await Database.save({
-                    prompt: prompt,
-                    image: data.image,
-                    inputImages: [...AppState.currentImages]
-                });
-                
-                // 刷新画廊
-                await GalleryManager.load();
-                
-                // 清空输入
-                this.textarea.value = '';
-                this.textarea.style.height = 'auto';
-                ImageHandler.clear();
-                
-            } catch (err) {
-                console.error('生成失败:', err);
-                alert('生成失败: ' + err.message);
-            } finally {
-                this.setLoading(false);
-            }
-        }
-    };
+            this.sendBtn.onclick = () => this.generate();
+
+            // 输入框自动高度
+            this.textarea.addEventListener('input', () => {
+                this.textarea.style.height = 'auto';
+                this.textarea.style.height = this.textarea.scrollHeight + 'px';
+            });
+
+            // 回车发送（Shift+Enter 换行）
+            this.textarea.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    this.generate();
+                }
+            });
+        },
+
+        setLoading(loading) {
+            this.isGenerating = loading;
+            if (loading) {
+                this.sendBtn.classList.add('loading');
+                this.sendBtn.disabled = true;
+                this.statusBar.textContent = '⏳ 生成中...';
+
+                // 防止生成超时 - 3分钟后强制停止
+                clearTimeout(this.generateTimeout);
+                this.generateTimeout = setTimeout(() => {
+                    if (this.isGenerating) {
+                        this.setLoading(false);
+                        this.statusBar.textContent = '生成超时，请重试';
+                        alert('生成超时，请检查网络后重试');
+                    }
+                }, 180000);
+            } else {
+                this.sendBtn.classList.remove('loading');
+                this.sendBtn.disabled = false;
+                this.statusBar.textContent = 'Ready';
+                clearTimeout(this.generateTimeout);
+            }
+        },
+
+        async generate() {
+            if (this.isGenerating) return;
+
+            const prompt = this.textarea.value.trim();
+            if (!prompt) {
+                alert('请输入提示词');
+                return;
+            }
+
+            this.setLoading(true);
+
+            try {
+                const controller = new AbortController();
+                const timeoutId = setTimeout(() => controller.abort(), 120000);
+
+                const response = await fetch('/api/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        prompt: prompt,
+                        images: AppState.currentImages
+                    }),
+                    signal: controller.signal
+                });
+                clearTimeout(timeoutId);
+
+                const data = await response.json();
+
+                if (!response.ok || !data.success) {
+                    throw new Error(data.message || '生成失败');
+                }
+
+                // 验证返回的图片数据
+                if (!data.image || !data.image.startsWith('data:image')) {
+                    throw new Error('返回的图片数据无效');
+                }
+
+                // 保存到数据库
+                await Database.save({
+                    prompt: prompt,
+                    image: data.image,
+                    inputImages: [...AppState.currentImages]
+                });
+
+                // 刷新画廊
+                await GalleryManager.load();
+
+                // 清空输入
+                this.textarea.value = '';
+                this.textarea.style.height = 'auto';
+                ImageHandler.clear();
+                this.statusBar.textContent = '✅ 生成成功';
+
+            } catch (err) {
+                console.error('生成失败:', err);
+                if (err.name === 'AbortError') {
+                    this.statusBar.textContent = '⚠️ 生成超时';
+                    alert('生成超时，请检查网络后重试');
+                } else {
+                    this.statusBar.textContent = '❌ 生成失败';
+                    alert('生成失败: ' + err.message);
+                }
+            } finally {
+                this.setLoading(false);
+                setTimeout(() => {
+                    if (this.statusBar.textContent !== 'Ready') {
+                        this.statusBar.textContent = 'Ready';
+                    }
+                }, 3000);
+            }
+        }
+    };
     
     // ============================================
     // 认证模块
@@ -1102,8 +1214,12 @@
         }
     }
     
-    // 启动应用
-    document.addEventListener('DOMContentLoaded', initApp);
-    </script>
+    // 启动应用
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initApp);
+    } else {
+        initApp();
+    }
+    </script>
 </body>
 </html>

style.css

@@ -47,6 +47,14 @@ body {
     border: 1px solid var(--panel-border);
     position: relative;
     transition: all var(--transition-normal);
+    will-change: transform;
+}
+
+@media (max-width: 768px) {
+    .glass-panel {
+        backdrop-filter: blur(10px) saturate(120%);
+        -webkit-backdrop-filter: blur(10px) saturate(120%);
+    }
 }
 
 .glass-panel::before {
@@ -289,6 +297,13 @@ body.has-preview header {
     transition: all var(--transition-normal);
     box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
     animation: scaleIn 0.5s ease-out backwards;
+    will-change: transform, box-shadow;
+}
+
+@media (max-width: 768px) {
+    .public-card {
+        animation: fadeIn 0.3s ease-out backwards;
+    }
 }
 
 .public-card img {
@@ -404,6 +419,13 @@ body.has-preview header {
     animation: spin 0.8s linear infinite;
 }
 
+@media (max-width: 768px) {
+    .icon-btn.spinning {
+        animation: spin 1s linear infinite;
+        opacity: 0.8;
+    }
+}
+
 .history-item {
     position: relative;
     aspect-ratio: 16 / 9;
@@ -751,17 +773,27 @@ body.has-preview header {
     border: 2px solid rgba(255,255,255,0.2);
     border-top-color: white;
     border-radius: 50%;
-    animation: spin 0.8s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite;
+    animation: spin 0.8s linear infinite;
     display: none;
+    will-change: transform;
 }
 
 .loading .loader { display: block; }
 .loading span { display: none; }
 
 @keyframes spin { 
+    from { transform: rotate(0deg); }
     to { transform: rotate(360deg); } 
 }
 
+@media (prefers-reduced-motion: reduce) {
+    .loader,
+    .icon-btn.spinning {
+        animation: none;
+        opacity: 0.7;
+    }
+}
+
 /* --- Enhanced Modal --- */
 .modal {
     display: none;
@@ -1019,55 +1051,88 @@ body.has-preview header {
 
 /* --- Mobile Responsive Design --- */
 @media (max-width: 768px) {
-    .public-gallery-section {
-        padding: 20px;
-        margin-top: 30px;
-        border-radius: 18px;
-    }
-
-    .section-title h3 {
-        font-size: 1.1rem;
-    }
-
-    .section-subtitle {
-        font-size: 0.85rem;
-    }
-
-    .public-grid {
-        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-        gap: 14px;
-        margin-top: 16px;
-    }
-
-    .public-card {
-        border-radius: 14px;
-    }
-
-    .public-card-prompt {
-        font-size: 0.8rem;
-        -webkit-line-clamp: 2;
-    }
-
-    .public-card-footer {
-        font-size: 0.7rem;
-    }
-
-    .icon-btn.small {
-        width: 32px;
-        height: 32px;
-        font-size: 12px;
-    }
-
-    .public-gallery-empty {
-        padding: 40px 20px;
-        border-radius: 16px;
-        font-size: 0.95rem;
-    }
-
-    .public-gallery-empty > div:first-child {
-        font-size: 36px;
-        margin-bottom: 12px;
-    }
+     .public-gallery-section {
+         padding: 20px;
+         margin-top: 30px;
+         border-radius: 18px;
+         backdrop-filter: blur(10px) saturate(120%);
+         -webkit-backdrop-filter: blur(10px) saturate(120%);
+     }
+
+     .section-title h3 {
+         font-size: 1.1rem;
+     }
+
+     .section-subtitle {
+         font-size: 0.85rem;
+     }
+
+     .public-grid {
+         grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+         gap: 14px;
+         margin-top: 16px;
+     }
+
+     .public-card {
+         border-radius: 14px;
+         transition: none;
+         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+     }
+
+     .public-card:hover {
+         transform: none;
+         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+     }
+
+     .public-card-prompt {
+         font-size: 0.8rem;
+         -webkit-line-clamp: 2;
+     }
+
+     .public-card-footer {
+         font-size: 0.7rem;
+     }
+
+     .icon-btn.small {
+         width: 32px;
+         height: 32px;
+         font-size: 12px;
+     }
+
+     .public-gallery-empty {
+         padding: 40px 20px;
+         border-radius: 16px;
+         font-size: 0.95rem;
+     }
+
+     .public-gallery-empty > div:first-child {
+         font-size: 36px;
+         margin-bottom: 12px;
+     }
+
+     .history-item {
+         animation: fadeIn 0.3s ease-out backwards;
+     }
+
+     .history-item:nth-child(1) { animation-delay: 0s; }
+     .history-item:nth-child(2) { animation-delay: 0s; }
+     .history-item:nth-child(3) { animation-delay: 0s; }
+     .history-item:nth-child(4) { animation-delay: 0s; }
+     .history-item:nth-child(5) { animation-delay: 0s; }
+     .history-item:nth-child(6) { animation-delay: 0s; }
+
+     .history-item:hover {
+         transform: none;
+         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+     }
+
+     .btn-3d {
+         transition: none;
+     }
+
+     .btn-3d:hover {
+         transform: none;
+     }
 }
 
 @media (max-width: 600px) {