Upload 13 files

index.html

@@ -440,7 +440,11 @@
         }
         const stored = localStorage.getItem(IMAGE_RESPONSE_STORAGE_KEY);
         const fallback = Device.isMobile ? 'url' : 'base64';
-        return normalizeResponseMode(paramMode || stored, fallback);
+        const resolved = normalizeResponseMode(paramMode || stored, fallback);
+        if (Device.isMobile && !paramMode && resolved === 'base64') {
+            return fallback;
+        }
+        return resolved;
     };
 
     const RESPONSE_MODE = resolveResponseMode();
@@ -869,10 +873,11 @@
             const fullUrl = this.getFullImageUrl(item);
             if (Device.isMobile) {
                 if (item.displayUrl) return item.displayUrl;
-                const source = item.image || fullUrl;
+                const source = resolveAssetUrl(item.image) || fullUrl;
                 if (source && source.startsWith('data:image')) {
                     if (source.length > 1200000) {
-                        return item.thumb || fullUrl || PLACEHOLDER_IMAGE;
+                        const thumbSrc = resolveAssetUrl(item.thumb || item.thumbUrl);
+                        return thumbSrc || fullUrl || PLACEHOLDER_IMAGE;
                     }
                     const objectUrl = this.dataUrlToObjectUrl(source);
                     if (objectUrl) {
@@ -881,7 +886,7 @@
                     }
                 }
             }
-            return item.image || fullUrl || '';
+            return resolveAssetUrl(item.image) || fullUrl || '';
         },
 
         revokeDisplayUrl(item) {
@@ -1571,7 +1576,8 @@
             img.loading = isPriority ? 'eager' : 'lazy';
             img.decoding = 'async';
             img.fetchPriority = isPriority ? 'high' : 'low';
-            const displaySrc = item.thumb || ImageHandler.getDisplayImage(item) || ImageHandler.getFullImageUrl(item) || item.imageUrl;
+            const thumbSrc = resolveAssetUrl(item.thumb || item.thumbUrl);
+            const displaySrc = thumbSrc || ImageHandler.getDisplayImage(item) || ImageHandler.getFullImageUrl(item) || resolveAssetUrl(item.imageUrl);
             LazyImageLoader.observe(img, displaySrc);
             img.alt = `作品 ${item.id}`;
             img.onload = () => {
@@ -1681,7 +1687,8 @@
             if (!this.container || !item) return;
             const img = this.container.querySelector(`[data-id="${item.id}"] img`);
             if (!img) return;
-            const nextSrc = item.thumb || ImageHandler.getDisplayImage(item) || ImageHandler.getFullImageUrl(item) || item.imageUrl;
+            const thumbSrc = resolveAssetUrl(item.thumb || item.thumbUrl);
+            const nextSrc = thumbSrc || ImageHandler.getDisplayImage(item) || ImageHandler.getFullImageUrl(item) || resolveAssetUrl(item.imageUrl);
             if (nextSrc) {
                 img.src = nextSrc;
                 img.removeAttribute('data-src');
@@ -1698,7 +1705,7 @@
             }
             const candidates = Array.isArray(items) ? items : this.getVisibleItems();
             const queue = candidates.filter((item) => {
-                if (item.thumb) return false;
+                if (item.thumb || item.thumbUrl) return false;
                 const source = item.image || item.imageUrl;
                 if (!source || typeof source !== 'string') return false;
                 return source.startsWith('data:image')
@@ -1721,7 +1728,7 @@
                     }
                     return;
                 }
-                const source = item.image || item.imageUrl;
+                const source = resolveAssetUrl(item.image || item.imageUrl);
                 const thumb = await ImageHandler.createThumbnail(source, maxWidth, quality);
                 if (thumb && thumb !== source) {
                     item.thumb = thumb;
@@ -1832,7 +1839,8 @@
 
             // 设置主图 - 直接赋�??
             const fullUrl = ImageHandler.getFullImageUrl(item);
-            const initialSrc = item.thumb || ImageHandler.getDisplayImage(item) || fullUrl || '';
+            const thumbSrc = resolveAssetUrl(item.thumb || item.thumbUrl);
+            const initialSrc = thumbSrc || ImageHandler.getDisplayImage(item) || fullUrl || '';
             this.imgEl.src = initialSrc;
             this.imgEl.onerror = () => {
                 if (fullUrl && this.imgEl.src !== fullUrl) {
@@ -2446,7 +2454,7 @@
             }
             const candidates = Array.isArray(items) ? items : this.getVisibleItems();
             const queue = candidates.filter((item) => {
-                if (item.thumb) return false;
+                if (item.thumb || item.thumbUrl) return false;
                 const source = item.image || item.imageUrl;
                 if (!source || typeof source !== 'string') return false;
                 return source.startsWith('data:image')
@@ -2469,7 +2477,7 @@
                     }
                     return;
                 }
-                const source = item.image || item.imageUrl;
+                const source = resolveAssetUrl(item.image || item.imageUrl);
                 const thumb = await ImageHandler.createThumbnail(source, maxWidth, quality);
                 if (thumb && thumb !== source) {
                     item.thumb = thumb;
@@ -2502,7 +2510,8 @@
             img.loading = 'lazy';
             img.decoding = 'async';
             img.fetchPriority = 'low';
-            const imageSrc = item.thumb || ImageHandler.getDisplayImage(item) || ImageHandler.getFullImageUrl(item) || item.imageUrl;
+            const thumbSrc = resolveAssetUrl(item.thumb || item.thumbUrl);
+            const imageSrc = thumbSrc || ImageHandler.getDisplayImage(item) || ImageHandler.getFullImageUrl(item) || resolveAssetUrl(item.imageUrl);
             LazyImageLoader.observe(img, imageSrc);
             img.alt = item.prompt || '创意作品';
             card.appendChild(img);
@@ -2582,7 +2591,8 @@
             if (!this.container || !item) return;
             const img = this.container.querySelector(`[data-id="${item.id}"] img`);
             if (!img) return;
-            const nextSrc = item.thumb || ImageHandler.getDisplayImage(item) || ImageHandler.getFullImageUrl(item) || item.imageUrl;
+            const thumbSrc = resolveAssetUrl(item.thumb || item.thumbUrl);
+            const nextSrc = thumbSrc || ImageHandler.getDisplayImage(item) || ImageHandler.getFullImageUrl(item) || resolveAssetUrl(item.imageUrl);
             if (nextSrc) {
                 img.src = nextSrc;
                 img.removeAttribute('data-src');
@@ -3076,8 +3086,9 @@
                 const imageUrl = rawImageUrl || (previewImage && !previewImage.startsWith('data:image') ? previewImage : null);
                 const thumbWidth = 768;
                 const thumbQuality = 0.76;
-                let thumb = null;
-                if (!Device.isMobile) {
+                const serverThumb = typeof data.thumbUrl === 'string' ? data.thumbUrl : null;
+                let thumb = serverThumb;
+                if (!thumb && !Device.isMobile) {
                     thumb = await ImageHandler.createThumbnail(previewImage, thumbWidth, thumbQuality);
                 }
 

package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "cookie-parser": "^1.4.6",
     "dotenv": "^16.3.1",
-    "express": "^4.18.2"
+    "express": "^4.18.2",
+    "sharp": "^0.33.5"
   }
 }

server.js

@@ -10,7 +10,20 @@ import dotenv from 'dotenv';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import fs from 'fs/promises';
-import crypto from 'crypto';
+import crypto from 'crypto';
+
+let sharpPromise = null;
+const loadSharp = async () => {
+    if (!sharpPromise) {
+        sharpPromise = import('sharp')
+            .then((mod) => mod.default || mod)
+            .catch((error) => {
+                console.warn('[WARN] sharp not available, thumbnail generation disabled:', error.message);
+                return null;
+            });
+    }
+    return sharpPromise;
+};
 
 // ============================================
 // 配置初始化模块
@@ -56,6 +69,9 @@ const DATA_DIR = path.join(__dirname, 'data');
 const PUBLIC_GALLERY_FILE = path.join(DATA_DIR, 'public-gallery.json');
 const STATS_FILE = path.join(DATA_DIR, 'usage-stats.json');
 const GENERATED_DIR = path.join(DATA_DIR, 'generated');
+const THUMB_DIR = path.join(GENERATED_DIR, 'thumbs');
+const THUMB_WIDTH = parsePositiveInt(process.env.THUMB_WIDTH, 1024);
+const THUMB_QUALITY = parsePositiveInt(process.env.THUMB_QUALITY, 82);
 
 // ============================================
 // Express 应用初始化
@@ -67,6 +83,7 @@ app.use(express.urlencoded({ extended: true, limit: '200mb' }));
 app.use(cookieParser());
 app.use(express.static(__dirname));
 app.use('/generated', express.static(GENERATED_DIR));
+app.use('/generated/thumbs', express.static(THUMB_DIR));
 
 // ============================================
 // 认证中间件
@@ -356,6 +373,65 @@ const GeneratedImageStore = {
         await fs.mkdir(GENERATED_DIR, { recursive: true });
     },
 
+    async ensureThumbDir() {
+        await fs.mkdir(THUMB_DIR, { recursive: true });
+    },
+
+    buildThumbName(filename) {
+        const baseName = path.basename(filename, path.extname(filename));
+        return `${baseName}-thumb.jpg`;
+    },
+
+    async createThumbnailFromBuffer(buffer, filename) {
+        const sharp = await loadSharp();
+        if (!sharp) return null;
+        const thumbName = this.buildThumbName(filename);
+        const thumbPath = path.join(THUMB_DIR, thumbName);
+        try {
+            await this.ensureThumbDir();
+            await sharp(buffer)
+                .rotate()
+                .resize({ width: THUMB_WIDTH })
+                .jpeg({ quality: THUMB_QUALITY })
+                .toFile(thumbPath);
+            return `/generated/thumbs/${thumbName}`;
+        } catch (error) {
+            console.error(`[${new Date().toISOString()}] Generate thumbnail failed:`, error);
+            return null;
+        }
+    },
+
+    async ensureThumbnailFromUrl(imageUrl) {
+        if (!imageUrl || typeof imageUrl !== 'string') return null;
+        if (!imageUrl.startsWith('/generated/')) return null;
+        const filename = path.basename(imageUrl);
+        const filePath = path.join(GENERATED_DIR, filename);
+        const thumbName = this.buildThumbName(filename);
+        const thumbPath = path.join(THUMB_DIR, thumbName);
+        try {
+            await fs.access(thumbPath);
+            return `/generated/thumbs/${thumbName}`;
+        } catch {
+            // continue to generate
+        }
+
+        const sharp = await loadSharp();
+        if (!sharp) return null;
+        try {
+            await fs.access(filePath);
+            await this.ensureThumbDir();
+            await sharp(filePath)
+                .rotate()
+                .resize({ width: THUMB_WIDTH })
+                .jpeg({ quality: THUMB_QUALITY })
+                .toFile(thumbPath);
+            return `/generated/thumbs/${thumbName}`;
+        } catch (error) {
+            console.error(`[${new Date().toISOString()}] Ensure thumbnail failed:`, error);
+            return null;
+        }
+    },
+
     async saveDataUrl(dataUrl) {
         if (!dataUrl || typeof dataUrl !== 'string') return null;
         const match = dataUrl.match(/^data:(image\/[a-zA-Z0-9.+-]+);base64,(.+)$/);
@@ -369,12 +445,15 @@ const GeneratedImageStore = {
         const filePath = path.join(GENERATED_DIR, filename);
 
         await this.ensureDir();
-        await fs.writeFile(filePath, Buffer.from(base64Data, 'base64'));
+        const buffer = Buffer.from(base64Data, 'base64');
+        await fs.writeFile(filePath, buffer);
+        const thumbUrl = await this.createThumbnailFromBuffer(buffer, filename);
 
         return {
             id: filename,
             url: `/generated/${filename}`,
-            mimeType
+            mimeType,
+            thumbUrl
         };
     },
 
@@ -720,23 +799,31 @@ app.post('/api/generate', authMiddleware, async (req, res) => {
         const wantsBase64 = returnBase64 !== false;
         let imageUrl = null;
         let imageId = null;
+        let thumbUrl = null;
 
         if (typeof imageData === 'string' && imageData.startsWith('data:image/')) {
-            if (wantsUrl) {
-                try {
-                    const saved = await GeneratedImageStore.saveDataUrl(imageData);
-                    if (saved) {
-                        imageUrl = saved.url;
-                        imageId = saved.id;
-                    }
-                } catch (saveError) {
-                    console.error(`[${new Date().toISOString()}] Save generated image failed:`, saveError);
+            try {
+                const saved = await GeneratedImageStore.saveDataUrl(imageData);
+                if (saved) {
+                    imageUrl = saved.url;
+                    imageId = saved.id;
+                    thumbUrl = saved.thumbUrl || null;
                 }
+            } catch (saveError) {
+                console.error(`[${new Date().toISOString()}] Save generated image failed:`, saveError);
             }
         } else if (typeof imageData === 'string') {
             imageUrl = imageData;
         }
 
+        if (!thumbUrl && imageUrl) {
+            try {
+                thumbUrl = await GeneratedImageStore.ensureThumbnailFromUrl(imageUrl);
+            } catch (thumbError) {
+                console.error(`[${new Date().toISOString()}] Ensure thumbnail failed:`, thumbError);
+            }
+        }
+
         console.log(`[${new Date().toISOString()}] Image generated`);
 
         recordOnce(true);
@@ -748,6 +835,7 @@ app.post('/api/generate', authMiddleware, async (req, res) => {
             success: true,
             imageUrl,
             imageId,
+            thumbUrl,
             prompt: trimmedPrompt,
             inputImages: uploadedImages,
             timestamp: new Date().toISOString()
@@ -800,9 +888,11 @@ app.get('/api/public-gallery', async (req, res) => {
                     if (saved) {
                         item.imageUrl = saved.url;
                         item.imageId = saved.id;
+                        item.thumbUrl = saved.thumbUrl || null;
                         delete item.image;
                         rest.imageUrl = saved.url;
                         rest.imageId = saved.id;
+                        rest.thumbUrl = saved.thumbUrl || null;
                         delete rest.image;
                         updated = true;
                     }
@@ -811,6 +901,19 @@ app.get('/api/public-gallery', async (req, res) => {
                 }
             }
 
+            if (!rest.thumbUrl && rest.imageUrl) {
+                try {
+                    const ensuredThumb = await GeneratedImageStore.ensureThumbnailFromUrl(rest.imageUrl);
+                    if (ensuredThumb) {
+                        item.thumbUrl = ensuredThumb;
+                        rest.thumbUrl = ensuredThumb;
+                        updated = true;
+                    }
+                } catch (error) {
+                    console.error(`[${new Date().toISOString()}] Public gallery ensure thumbnail failed:`, error);
+                }
+            }
+
             if (lite) {
                 if (Array.isArray(rest.inputImages)) {
                     rest.inputCount = rest.inputImages.length;
@@ -867,6 +970,7 @@ app.post('/api/public-gallery', authMiddleware, async (req, res) => {
     let finalImage = null;
     let finalImageUrl = null;
     let finalImageId = null;
+    let finalThumbUrl = null;
 
     if (image && typeof image === 'string' && ImageParser.isValidBase64Image(image)) {
         finalImage = image;
@@ -888,12 +992,21 @@ app.post('/api/public-gallery', authMiddleware, async (req, res) => {
             if (saved) {
                 finalImageUrl = saved.url;
                 finalImageId = saved.id;
+                finalThumbUrl = saved.thumbUrl || null;
                 finalImage = null;
             }
         } catch (error) {
             console.error(`[${new Date().toISOString()}] Public gallery save image failed:`, error);
         }
     }
+
+    if (!finalThumbUrl && finalImageUrl) {
+        try {
+            finalThumbUrl = await GeneratedImageStore.ensureThumbnailFromUrl(finalImageUrl);
+        } catch (error) {
+            console.error(`[${new Date().toISOString()}] Public gallery ensure thumbnail failed:`, error);
+        }
+    }
 
     const sanitizedRefs = Array.isArray(inputImages)
         ? inputImages
@@ -907,6 +1020,7 @@ app.post('/api/public-gallery', authMiddleware, async (req, res) => {
         image: finalImage,
         imageUrl: finalImageUrl,
         imageId: finalImageId,
+        thumbUrl: finalThumbUrl,
         inputImages: sanitizedRefs,
         timestamp: new Date().toISOString(),
         deleteToken: generateDeleteToken()