banber

Sleeping

App Files Files Community

waeef commited on Nov 28, 2025

Commit

ef373a5

verified ·

1 Parent(s): bef3e3d

Upload 5 files

Browse files

Files changed (5) hide show

Dockerfile +12 -0
index.html +716 -0
package.json +13 -0
server.js +370 -0
style.css +299 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,12 @@

+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+ENV PORT=7860
+EXPOSE 7860
+CMD ["npm", "start"]

index.html ADDED Viewed

	@@ -0,0 +1,716 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Banana Pro AI</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <!-- 登录界面 -->
+    <div id="login-overlay">
+        <div class="login-card glass-panel">
+            <h1 style="font-size: 2rem;">🍌</h1>
+            <h3 style="margin: 10px 0; color: #cbd5e1;">Banana Pro</h3>
+            <input type="password" id="pwd" placeholder="Password" onkeypress="if(event.key==='Enter')doLogin()">
+            <button class="btn-3d" onclick="doLogin()" style="width: 100%; padding: 10px;">Unlock</button>
+        </div>
+    </div>
+    <!-- 主应用 -->
+    <div class="app-container" id="app" style="filter: blur(10px); pointer-events: none;">
+        <header>
+            <div>
+                <h2>创意画板</h2>
+                <div style="font-size: 12px; color: var(--text-sub);" id="status-bar">Ready</div>
+            </div>
+        </header>
+        <!-- 历史画廊 -->
+        <div class="history-container">
+            <div class="grid-layout" id="gallery"></div>
+        </div>
+        <!-- 底部输入与预览组合区 -->
+        <div class="input-section glass-panel" id="drop-zone">
+            <!-- 上部分：预览条 -->
+            <div class="preview-bar" id="preview-bar"></div>
+            <!-- 下部分：操作栏 -->
+            <div class="control-bar">
+                <button class="upload-trigger" id="upload-btn" title="上传参考图">📷</button>
+                <textarea id="prompt" class="main-input" rows="1" placeholder="描述画面... (支持拖拽图片)"></textarea>
+                <button class="btn-3d send-btn" id="send-btn">
+                    <span>生成</span>
+                    <div class="loader"></div>
+                </button>
+            </div>
+        </div>
+        <input type="file" id="file-input" multiple accept="image/*" hidden>
+    </div>
+    <!-- 详情弹窗 -->
+    <div class="modal" id="modal">
+        <div class="modal-content glass-panel">
+            <button class="close-modal" onclick="closeModal()">×</button>
+            <div class="modal-img-area">
+                <img id="m-img" src="">
+            </div>
+            <div class="modal-footer">
+                <div class="input-refs" id="m-refs"></div>
+                <div class="prompt-display" id="m-prompt"></div>
+                <button class="btn-3d" id="m-reuse" style="width: 100%; padding: 12px;">
+                    🎨 复用参数与图片
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // ============================================
+        // 全局状态管理
+        // ============================================
+        const AppState = {
+            db: null,
+            currentImages: [],     // 当前上传的图片 Base64 数组
+            galleryData: [],       // 画廊数据缓存
+            currentModalItem: null // 当前弹窗显示的项目
+        };
+        const DB_NAME = 'BananaProDB_v3';
+        const DB_VERSION = 1;
+        const STORE_NAME = 'artworks';
+        // ============================================
+        // IndexedDB 模块（使用 Blob 存储避免 Base64 问题）
+        // ============================================
+        const Database = {
+            async init() {
+                return new Promise((resolve, reject) => {
+                    const request = indexedDB.open(DB_NAME, DB_VERSION);
+                    request.onerror = () => reject(request.error);
+                    request.onsuccess = () => {
+                        AppState.db = request.result;
+                        resolve();
+                    };
+                    request.onupgradeneeded = (event) => {
+                        const db = event.target.result;
+                        if (!db.objectStoreNames.contains(STORE_NAME)) {
+                            const store = db.createObjectStore(STORE_NAME, {
+                                keyPath: 'id',
+                                autoIncrement: true
+                            });
+                            store.createIndex('timestamp', 'timestamp', { unique: false });
+                        }
+                    };
+                });
+            },
+            async save(item) {
+                return new Promise((resolve, reject) => {
+                    const tx = AppState.db.transaction([STORE_NAME], 'readwrite');
+                    const store = tx.objectStore(STORE_NAME);
+                    // 直接存储完整对象，不做任何转换
+                    const record = {
+                        prompt: item.prompt,
+                        image: item.image,           // 完整的 data:image/... 字符串
+                        inputImages: item.inputImages || [],
+                        timestamp: Date.now()
+                    };
+                    const request = store.add(record);
+                    request.onsuccess = () => resolve(request.result);
+                    request.onerror = () => reject(request.error);
+                });
+            },
+            async getAll() {
+                return new Promise((resolve, reject) => {
+                    const tx = AppState.db.transaction([STORE_NAME], 'readonly');
+                    const store = tx.objectStore(STORE_NAME);
+                    const request = store.getAll();
+                    request.onsuccess = () => {
+                        // 按时间戳倒序
+                        const results = request.result.sort((a, b) => b.timestamp - a.timestamp);
+                        resolve(results);
+                    };
+                    request.onerror = () => reject(request.error);
+                });
+            },
+            async delete(id) {
+                return new Promise((resolve, reject) => {
+                    const tx = AppState.db.transaction([STORE_NAME], 'readwrite');
+                    const store = tx.objectStore(STORE_NAME);
+                    const request = store.delete(id);
+                    request.onsuccess = () => resolve();
+                    request.onerror = () => reject(request.error);
+                });
+            },
+            async getById(id) {
+                return new Promise((resolve, reject) => {
+                    const tx = AppState.db.transaction([STORE_NAME], 'readonly');
+                    const store = tx.objectStore(STORE_NAME);
+                    const request = store.get(id);
+                    request.onsuccess = () => resolve(request.result);
+                    request.onerror = () => reject(request.error);
+                });
+            }
+        };
+        // ============================================
+        // 图片处理模块
+        // ============================================
+        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();
+            },
+            // 移除指定索引的图片
+            removeAt(index) {
+                AppState.currentImages.splice(index, 1);
+                PreviewManager.render();
+            },
+            // 清空所有上传的图片
+            clear() {
+                AppState.currentImages = [];
+                PreviewManager.render();
+            },
+            // 设置图片（用于复用功能）
+            setImages(images) {
+                AppState.currentImages = images ? [...images] : [];
+                PreviewManager.render();
+            }
+        };
+        // ============================================
+        // 预览条管理模块
+        // ============================================
+        const PreviewManager = {
+            container: null,
+            uploadBtn: null,
+            statusBar: null,
+            init() {
+                this.container = document.getElementById('preview-bar');
+                this.uploadBtn = document.getElementById('upload-btn');
+                this.statusBar = document.getElementById('status-bar');
+            },
+            render() {
+                // 清空容器
+                this.container.innerHTML = '';
+                const images = AppState.currentImages;
+                if (images.length === 0) {
+                    this.container.classList.remove('visible');
+                    this.uploadBtn.classList.remove('active');
+                    this.statusBar.textContent = 'Ready';
+                    return;
+                }
+                this.container.classList.add('visible');
+                this.uploadBtn.classList.add('active');
+                this.statusBar.textContent = `已选择 ${images.length}/16 张图片`;
+                // 使用 DOM API 创建元素，避免 innerHTML 导致的编码问题
+                images.forEach((imgData, index) => {
+                    const wrapper = document.createElement('div');
+                    wrapper.className = 'thumb-wrapper';
+                    const img = document.createElement('img');
+                    img.src = imgData;  // 直接设置 src，不经过字符串拼接
+                    const removeBtn = document.createElement('div');
+                    removeBtn.className = 'thumb-remove';
+                    removeBtn.textContent = '×';
+                    removeBtn.onclick = (e) => {
+                        e.stopPropagation();
+                        ImageHandler.removeAt(index);
+                    };
+                    wrapper.appendChild(img);
+                    wrapper.appendChild(removeBtn);
+                    this.container.appendChild(wrapper);
+                });
+            }
+        };
+        // ============================================
+        // 画廊管理模块
+        // ============================================
+        const GalleryManager = {
+            container: null,
+            init() {
+                this.container = document.getElementById('gallery');
+            },
+            async load() {
+                try {
+                    AppState.galleryData = await Database.getAll();
+                    this.render();
+                } catch (err) {
+                    console.error('加载画廊失败:', err);
+                }
+            },
+            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);
+                });
+            },
+            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);
+                // 操作按钮
+                const actions = document.createElement('div');
+                actions.className = 'item-actions';
+                const downloadBtn = document.createElement('button');
+                downloadBtn.className = 'icon-btn';
+                downloadBtn.innerHTML = '⬇';
+                downloadBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    this.downloadImage(item);
+                };
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'icon-btn';
+                deleteBtn.style.background = 'rgba(239,68,68,0.8)';
+                deleteBtn.innerHTML = '🗑';
+                deleteBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    this.deleteItem(item.id);
+                };
+                actions.appendChild(downloadBtn);
+                actions.appendChild(deleteBtn);
+                el.appendChild(actions);
+                // 点击打开弹窗
+                el.onclick = () => ModalManager.open(item);
+                return el;
+            },
+            downloadImage(item) {
+                const link = document.createElement('a');
+                link.href = item.image;
+                link.download = `banana-pro-${item.id}-${Date.now()}.png`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            },
+            async deleteItem(id) {
+                if (!confirm('确定要删除这张图片吗？')) return;
+                try {
+                    await Database.delete(id);
+                    await this.load();
+                } catch (err) {
+                    console.error('删除失败:', err);
+                    alert('删除失败');
+                }
+            }
+        };
+        // ============================================
+        // 弹窗管理模块
+        // ============================================
+        const ModalManager = {
+            modal: null,
+            imgEl: null,
+            promptEl: null,
+            refsEl: null,
+            reuseBtn: null,
+            init() {
+                this.modal = document.getElementById('modal');
+                this.imgEl = document.getElementById('m-img');
+                this.promptEl = document.getElementById('m-prompt');
+                this.refsEl = document.getElementById('m-refs');
+                this.reuseBtn = document.getElementById('m-reuse');
+                // 点击背景关闭
+                this.modal.onclick = (e) => {
+                    if (e.target === this.modal) this.close();
+                };
+                // ESC 关闭
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') this.close();
+                });
+            },
+            open(item) {
+                AppState.currentModalItem = item;
+                // 设置主图 - 直接赋值
+                this.imgEl.src = item.image;
+                // 设置提示词
+                this.promptEl.textContent = item.prompt;
+                // 渲染参考图
+                this.refsEl.innerHTML = '';
+                if (item.inputImages && item.inputImages.length > 0) {
+                    item.inputImages.forEach(imgData => {
+                        const thumb = document.createElement('img');
+                        thumb.className = 'ref-thumb';
+                        thumb.src = imgData;  // 直接赋值
+                        thumb.onclick = () => window.open(imgData, '_blank');
+                        this.refsEl.appendChild(thumb);
+                    });
+                }
+                // 绑定复用按钮
+                this.reuseBtn.onclick = () => this.reuse();
+                this.modal.style.display = 'flex';
+            },
+            close() {
+                this.modal.style.display = 'none';
+                AppState.currentModalItem = null;
+            },
+            reuse() {
+                const item = AppState.currentModalItem;
+                if (!item) return;
+                // 复用提示词
+                const textarea = document.getElementById('prompt');
+                textarea.value = item.prompt;
+                textarea.style.height = 'auto';
+                textarea.style.height = textarea.scrollHeight + 'px';
+                // 复用参考图
+                if (item.inputImages && item.inputImages.length > 0) {
+                    ImageHandler.setImages(item.inputImages);
+                } else {
+                    ImageHandler.clear();
+                }
+                this.close();
+                textarea.focus();
+            }
+        };
+        // ============================================
+        // 生成请求模块
+        // ============================================
+        const Generator = {
+            sendBtn: null,
+            textarea: null,
+            init() {
+                this.sendBtn = document.getElementById('send-btn');
+                this.textarea = document.getElementById('prompt');
+                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);
+                }
+            }
+        };
+        // ============================================
+        // 认证模块
+        // ============================================
+        const Auth = {
+            async check() {
+                try {
+                    const res = await fetch('/api/check-auth');
+                    const data = await res.json();
+                    return data.authenticated;
+                } catch {
+                    return false;
+                }
+            },
+            async login(password) {
+                const res = await fetch('/api/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ password })
+                });
+                const data = await res.json();
+                return data.success;
+            },
+            unlock() {
+                document.getElementById('login-overlay').style.display = 'none';
+                const app = document.getElementById('app');
+                app.style.filter = 'none';
+                app.style.pointerEvents = 'all';
+            }
+        };
+        // ============================================
+        // 拖拽上传模块
+        // ============================================
+        const DragDrop = {
+            dropZone: null,
+            init() {
+                this.dropZone = document.getElementById('drop-zone');
+                // 阻止默认行为
+                ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(event => {
+                    this.dropZone.addEventListener(event, (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    });
+                });
+                // 拖入高亮
+                ['dragenter', 'dragover'].forEach(event => {
+                    this.dropZone.addEventListener(event, () => {
+                        this.dropZone.style.borderColor = 'var(--accent-color)';
+                        this.dropZone.style.background = 'rgba(59, 130, 246, 0.1)';
+                    });
+                });
+                // 拖出恢复
+                ['dragleave', 'drop'].forEach(event => {
+                    this.dropZone.addEventListener(event, () => {
+                        this.dropZone.style.borderColor = '';
+                        this.dropZone.style.background = '';
+                    });
+                });
+                // 放下处理
+                this.dropZone.addEventListener('drop', async (e) => {
+                    const files = e.dataTransfer.files;
+                    if (files.length > 0) {
+                        await ImageHandler.processFiles(files);
+                    }
+                });
+            }
+        };
+        // ============================================
+        // 文件选择模块
+        // ============================================
+        const FileSelector = {
+            input: null,
+            btn: null,
+            init() {
+                this.input = document.getElementById('file-input');
+                this.btn = document.getElementById('upload-btn');
+                this.btn.onclick = () => this.input.click();
+                this.input.onchange = async () => {
+                    if (this.input.files.length > 0) {
+                        await ImageHandler.processFiles(this.input.files);
+                    }
+                    this.input.value = ''; // 重置以便重复选择
+                };
+            }
+        };
+        // ============================================
+        // 全局函数（供 HTML onclick 调用）
+        // ============================================
+        async function doLogin() {
+            const pwd = document.getElementById('pwd').value;
+            if (!pwd) return;
+            const success = await Auth.login(pwd);
+            if (success) {
+                Auth.unlock();
+                await GalleryManager.load();
+            } else {
+                alert('密码错误');
+            }
+        }
+        function closeModal() {
+            ModalManager.close();
+        }
+        // ============================================
+        // 应用初始化
+        // ============================================
+        async function initApp() {
+            try {
+                // 初始化数据库
+                await Database.init();
+                // 初始化各模块
+                PreviewManager.init();
+                GalleryManager.init();
+                ModalManager.init();
+                Generator.init();
+                DragDrop.init();
+                FileSelector.init();
+                // 检查认证状态
+                const isAuth = await Auth.check();
+                if (isAuth) {
+                    Auth.unlock();
+                    await GalleryManager.load();
+                }
+                console.log('App initialized successfully');
+            } catch (err) {
+                console.error('App initialization failed:', err);
+            }
+        }
+        // 启动应用
+        document.addEventListener('DOMContentLoaded', initApp);
+    </script>
+</body>
+</html>

package.json ADDED Viewed

	@@ -0,0 +1,13 @@

+{
+  "name": "banana-pro-ai",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "cookie-parser": "^1.4.6",
+    "dotenv": "^16.3.1",
+    "express": "^4.18.2"
+  }
+}

server.js ADDED Viewed

	@@ -0,0 +1,370 @@

+/**
+ * server.js
+ * Banana Pro AI 生图平台 - 后端服务
+ * 支持多图上传的 ES6 模块化版本
+ */
+import express from 'express';
+import cookieParser from 'cookie-parser';
+import dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+// ============================================
+// 配置初始化模块
+// ============================================
+dotenv.config();
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const CONFIG = {
+    port: process.env.PORT || 3000,
+    apiKey: process.env.OPENAI_API_KEY || 'sk-123456',
+    apiUrl: process.env.OPENAI_API_URL || 'http://127.0.0.1:8000/v1/chat/completions',
+    sitePassword: process.env.SITE_PASSWORD || '123456',
+    modelName: process.env.MODEL_NAME || 'banana-pro',
+    maxImages: 16
+};
+// ============================================
+// Express 应用初始化
+// ============================================
+const app = express();
+app.use(express.json({ limit: '200mb' }));
+app.use(express.urlencoded({ extended: true, limit: '200mb' }));
+app.use(cookieParser());
+app.use(express.static(__dirname));
+// ============================================
+// 认证中间件
+// ============================================
+const authMiddleware = (req, res, next) => {
+    const token = req.cookies.auth_token;
+    if (token === CONFIG.sitePassword) {
+        next();
+    } else {
+        res.status(401).json({
+            success: false,
+            error: 'Unauthorized',
+            message: '请先登录'
+        });
+    }
+};
+// ============================================
+// 图片数据解析模块
+// ============================================
+const ImageParser = {
+    /**
+     * 从 assistant content 中提取 base64 图片数据
+     * 格式: ![Generated Image](data:image/png;base64,xxxxx)
+     */
+    extractBase64FromMarkdown(content) {
+        if (!content || typeof content !== 'string') {
+            return null;
+        }
+        // 匹配 Markdown 图片格式
+        const markdownPattern = /!\[.*?\]\((data:image\/[a-zA-Z]+;base64,[A-Za-z0-9+/=]+)\)/g;
+        const matches = content.match(markdownPattern);
+        if (matches && matches.length > 0) {
+            const dataUrlMatch = matches[0].match(/\((data:image\/[a-zA-Z]+;base64,[A-Za-z0-9+/=]+)\)/);
+            if (dataUrlMatch && dataUrlMatch[1]) {
+                return dataUrlMatch[1];
+            }
+        }
+        // 备用：直接匹配 data:image 格式
+        const directPattern = /(data:image\/[a-zA-Z]+;base64,[A-Za-z0-9+/=]+)/;
+        const directMatch = content.match(directPattern);
+        if (directMatch && directMatch[1]) {
+            return directMatch[1];
+        }
+        return null;
+    },
+    isValidBase64Image(base64Data) {
+        if (!base64Data) return false;
+        return base64Data.startsWith('data:image/');
+    }
+};
+// ============================================
+// 消息构建模块
+// ============================================
+const MessageBuilder = {
+    /**
+     * 构建包含图片的 OpenAI 格式消息
+     * @param {string} prompt - 文本提示词
+     * @param {Array<string>} images - base64 图片数组
+     * @returns {Array} - OpenAI messages 格式
+     */
+    buildMessages(prompt, images = []) {
+        // 如果没有图片，返回纯文本消息
+        if (!images || images.length === 0) {
+            return [
+                {
+                    role: 'user',
+                    content: prompt
+                }
+            ];
+        }
+        // 构��多模态消息内容
+        const contentParts = [];
+        // 添加所有图片
+        images.forEach((imageData, index) => {
+            // 提取 base64 数据和 MIME 类型
+            const matches = imageData.match(/^data:(image\/[a-zA-Z]+);base64,(.+)$/);
+            if (matches) {
+                contentParts.push({
+                    type: 'image_url',
+                    image_url: {
+                        url: imageData
+                    }
+                });
+            }
+        });
+        // 添加文本提示词
+        contentParts.push({
+            type: 'text',
+            text: prompt
+        });
+        return [
+            {
+                role: 'user',
+                content: contentParts
+            }
+        ];
+    }
+};
+// ============================================
+// API 请求模块
+// ============================================
+const APIService = {
+    /**
+     * 调用生图 API
+     * @param {string} prompt - 用户提示词
+     * @param {Array<string>} images - 上传的图片数组
+     */
+    async generateImage(prompt, images = []) {
+        const messages = MessageBuilder.buildMessages(prompt, images);
+        const payload = {
+            model: CONFIG.modelName,
+            messages: messages
+        };
+        console.log(`[${new Date().toISOString()}] 请求模型: ${CONFIG.modelName}`);
+        console.log(`[${new Date().toISOString()}] 提示词: ${prompt.substring(0, 100)}...`);
+        console.log(`[${new Date().toISOString()}] 携带图片数量: ${images.length}`);
+        const response = await fetch(CONFIG.apiUrl, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${CONFIG.apiKey}`
+            },
+            body: JSON.stringify(payload)
+        });
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`API 请求失败: ${response.status} - ${errorText}`);
+        }
+        return await response.json();
+    },
+    /**
+     * 从响应中提取图片
+     */
+    extractImageFromResponse(data) {
+        if (data.choices && data.choices[0] && data.choices[0].message) {
+            const content = data.choices[0].message.content;
+            console.log(`[${new Date().toISOString()}] 收到响应内容长度: ${content?.length || 0}`);
+            const imageData = ImageParser.extractBase64FromMarkdown(content);
+            if (imageData && ImageParser.isValidBase64Image(imageData)) {
+                console.log(`[${new Date().toISOString()}] 成功提取图片数据`);
+                return imageData;
+            }
+        }
+        if (data.data && data.data[0]) {
+            if (data.data[0].b64_json) {
+                return `data:image/png;base64,${data.data[0].b64_json}`;
+            }
+            if (data.data[0].url) {
+                return data.data[0].url;
+            }
+        }
+        throw new Error('无法从 API 响应中提取图片数据');
+    }
+};
+// ============================================
+// 路由
+// ============================================
+// 登录
+app.post('/api/login', (req, res) => {
+    const { password } = req.body;
+    if (!password) {
+        return res.status(400).json({
+            success: false,
+            message: '请输入密码'
+        });
+    }
+    if (password === CONFIG.sitePassword) {
+        res.cookie('auth_token', password, {
+            maxAge: 30 * 24 * 60 * 60 * 1000,
+            httpOnly: true,
+            sameSite: 'strict'
+        });
+        console.log(`[${new Date().toISOString()}] 用户登录成功`);
+        res.json({
+            success: true,
+            message: '登录成功'
+        });
+    } else {
+        res.status(403).json({
+            success: false,
+            message: '密码错误'
+        });
+    }
+});
+// 验证状态
+app.get('/api/check-auth', (req, res) => {
+    const token = req.cookies.auth_token;
+    res.json({ authenticated: token === CONFIG.sitePassword });
+});
+// 生图接口（支持多图上传）
+app.post('/api/generate', authMiddleware, async (req, res) => {
+    const { prompt, images } = req.body;
+    // 验证提示词
+    if (!prompt || typeof prompt !== 'string') {
+        return res.status(400).json({
+            success: false,
+            message: '请提供有效的提示词'
+        });
+    }
+    const trimmedPrompt = prompt.trim();
+    if (trimmedPrompt.length === 0) {
+        return res.status(400).json({
+            success: false,
+            message: '提示词不能为空'
+        });
+    }
+    if (trimmedPrompt.length > 32000) {
+        return res.status(400).json({
+            success: false,
+            message: '提示词过长，请限制在 32000 字符以内'
+        });
+    }
+    // 验证图片数量
+    const uploadedImages = images || [];
+    if (uploadedImages.length > CONFIG.maxImages) {
+        return res.status(400).json({
+            success: false,
+            message: `最多只能上传 ${CONFIG.maxImages} 张图片`
+        });
+    }
+    // 验证图片格式
+    for (let i = 0; i < uploadedImages.length; i++) {
+        if (!ImageParser.isValidBase64Image(uploadedImages[i])) {
+            return res.status(400).json({
+                success: false,
+                message: `第 ${i + 1} 张图片格式无效`
+            });
+        }
+    }
+    try {
+        console.log(`[${new Date().toISOString()}] 开始生成图片...`);
+        const apiResponse = await APIService.generateImage(trimmedPrompt, uploadedImages);
+        const imageData = APIService.extractImageFromResponse(apiResponse);
+        console.log(`[${new Date().toISOString()}] 图片生成成功`);
+        res.json({
+            success: true,
+            image: imageData,
+            prompt: trimmedPrompt,
+            inputImages: uploadedImages, // 返回用户上传的图片，用于历史记录
+            timestamp: new Date().toISOString()
+        });
+    } catch (error) {
+        console.error(`[${new Date().toISOString()}] 生成失败:`, error.message);
+        res.status(500).json({
+            success: false,
+            message: error.message || '图片生成失败，请稍后重试'
+        });
+    }
+});
+// 登出
+app.post('/api/logout', (req, res) => {
+    res.clearCookie('auth_token');
+    res.json({ success: true, message: '已退出登录' });
+});
+// 健康检查
+app.get('/api/health', (req, res) => {
+    res.json({
+        status: 'ok',
+        timestamp: new Date().toISOString(),
+        model: CONFIG.modelName,
+        maxImages: CONFIG.maxImages
+    });
+});
+// 错误处理
+app.use((err, req, res, next) => {
+    console.error(`[${new Date().toISOString()}] 服务器错误:`, err);
+    res.status(500).json({ success: false, message: '服务器内部错误' });
+});
+app.use((req, res) => {
+    res.status(404).json({ success: false, message: '接口不存在' });
+});
+// ============================================
+// 启动服务器
+// ============================================
+app.listen(CONFIG.port, () => {
+    console.log('==========================================');
+    console.log('🍌 Banana Pro AI Studio 服务已启动');
+    console.log('==========================================');
+    console.log(`📡 服务地址: http://localhost:${CONFIG.port}`);
+    console.log(`🤖 使用模型: ${CONFIG.modelName}`);
+    console.log(`🖼️  最大图片: ${CONFIG.maxImages} 张`);
+    console.log(`🔗 API 地址: ${CONFIG.apiUrl}`);
+    console.log('==========================================');
+});
+export default app;

style.css ADDED Viewed

	@@ -0,0 +1,299 @@

+/* style.css */
+:root {
+    --bg-color: #0f172a;
+    --panel-bg: rgba(30, 41, 59, 0.75);
+    --panel-border: rgba(148, 163, 184, 0.15);
+    --accent-color: #3b82f6;
+    --text-main: #f1f5f9;
+    --text-sub: #94a3b8;
+    --btn-shadow: #1e3a8a;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    background: var(--bg-color) radial-gradient(circle at 50% 0%, #1e293b 0%, var(--bg-color) 70%);
+    color: var(--text-main);
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+/* --- 通用组件 --- */
+.glass-panel {
+    background: var(--panel-bg);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--panel-border);
+}
+.btn-3d {
+    background: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-weight: 600;
+    box-shadow: 0 4px 0 var(--btn-shadow), 0 5px 10px rgba(0,0,0,0.2);
+    transition: transform 0.1s, box-shadow 0.1s;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.btn-3d:active { transform: translateY(4px); box-shadow: 0 0 0 var(--btn-shadow); }
+.btn-3d:disabled { background: #475569; box-shadow: none; transform: none; opacity: 0.7; }
+/* --- 布局 --- */
+.app-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+header {
+    padding: 15px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+header h2 { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.5px; }
+/* --- 历史记录区域 --- */
+.history-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px 20px;
+    padding-bottom: 180px; /* 给底部输入栏留空间 */
+}
+.grid-layout {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); /* 默认两列 */
+    gap: 16px;
+}
+.history-item {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--panel-border);
+    background: rgba(0,0,0,0.2);
+    cursor: pointer;
+}
+.history-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
+.history-item:hover img { transform: scale(1.05); }
+.item-badge {
+    position: absolute;
+    top: 8px; left: 8px;
+    background: rgba(59, 130, 246, 0.9);
+    font-size: 10px; padding: 2px 6px;
+    border-radius: 4px; z-index: 2;
+}
+.item-actions {
+    position: absolute;
+    bottom: 0; right: 0; left: 0;
+    padding: 10px;
+    background: linear-gradient(transparent, rgba(0,0,0,0.8));
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+.history-item:hover .item-actions { opacity: 1; }
+/* 移动端默认显示操作烂 */
+@media (hover: none) { .item-actions { opacity: 1; } }
+.icon-btn {
+    width: 32px; height: 32px;
+    border-radius: 8px;
+    background: rgba(255,255,255,0.15);
+    color: white;
+    border: none;
+    display: flex; align-items: center; justify-content: center;
+    backdrop-filter: blur(4px);
+}
+/* --- 输入区域 (新设计) --- */
+.input-section {
+    position: absolute; /* 浮动在底部 */
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: calc(100% - 40px);
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    border-radius: 20px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+    z-index: 100;
+}
+/* 1. 预览层 (位于输入框上方) */
+.preview-bar {
+    padding: 0;
+    max-height: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    background: rgba(15, 23, 42, 0.4);
+    display: flex;
+    gap: 8px;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+}
+.preview-bar.visible {
+    padding: 12px;
+    max-height: 100px; /* 展开 */
+    border-bottom: 1px solid var(--panel-border);
+}
+.thumb-wrapper {
+    position: relative;
+    width: 64px; height: 64px;
+    flex-shrink: 0;
+    border-radius: 8px;
+    border: 1px solid rgba(255,255,255,0.1);
+    overflow: hidden;
+}
+.thumb-wrapper img { width: 100%; height: 100%; object-fit: cover; }
+.thumb-remove {
+    position: absolute; top: 2px; right: 2px;
+    width: 16px; height: 16px;
+    background: rgba(239,68,68,0.9);
+    border-radius: 50%;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 12px; cursor: pointer;
+}
+/* 2. 控制层 (按钮+输入框) */
+.control-bar {
+    display: flex;
+    align-items: flex-end;
+    padding: 12px;
+    gap: 10px;
+}
+.upload-trigger {
+    width: 44px; height: 44px;
+    border-radius: 12px;
+    background: rgba(255,255,255,0.05);
+    border: 1px dashed rgba(255,255,255,0.3);
+    color: var(--text-sub);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 20px;
+    flex-shrink: 0;
+    transition: all 0.2s;
+}
+.upload-trigger:hover, .upload-trigger.active {
+    background: rgba(59, 130, 246, 0.2);
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+}
+.main-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: white;
+    font-size: 16px;
+    padding: 10px 5px;
+    resize: none;
+    max-height: 120px;
+    outline: none;
+    line-height: 1.5;
+}
+.main-input::placeholder { color: rgba(255,255,255,0.3); }
+.send-btn {
+    height: 44px;
+    padding: 0 20px;
+    font-size: 15px;
+    flex-shrink: 0;
+}
+/* 加载动画 */
+.loader {
+    width: 18px; height: 18px;
+    border: 2px solid rgba(255,255,255,0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    display: none;
+}
+.loading .loader { display: block; }
+.loading span { display: none; }
+@keyframes spin { to { transform: rotate(360deg); } }
+/* --- 弹窗 --- */
+.modal {
+    display: none;
+    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+    background: rgba(0,0,0,0.9);
+    z-index: 1000;
+    justify-content: center; align-items: center;
+    backdrop-filter: blur(5px);
+}
+.modal-content {
+    background: #1e293b;
+    width: 95%; max-width: 1000px; height: 90%;
+    border-radius: 16px;
+    display: flex; flex-direction: column;
+    position: relative;
+    border: 1px solid var(--panel-border);
+}
+.close-modal {
+    position: absolute; top: 15px; right: 15px;
+    width: 36px; height: 36px;
+    border-radius: 50%; background: rgba(0,0,0,0.5);
+    color: white; border: 1px solid rgba(255,255,255,0.2);
+    z-index: 10; font-size: 20px;
+}
+.modal-img-area { flex: 1; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden; border-radius: 16px 16px 0 0; }
+.modal-img-area img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.modal-footer { padding: 15px; background: #1e293b; border-top: 1px solid var(--panel-border); display: flex; flex-direction: column; gap: 10px; }
+.input-refs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
+.ref-thumb { width: 40px; height: 40px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; }
+.prompt-display { background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; color: #cbd5e1; font-size: 0.9rem; max-height: 80px; overflow-y: auto; }
+/* --- 手机响应式设计 --- */
+@media (max-width: 768px) {
+    .app-container { padding: 0; }
+    .history-container { padding: 10px; }
+    /* 历史记录一行一个 */
+    .grid-layout {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    /* 输入框贴底全宽 */
+    .input-section {
+        bottom: 0;
+        width: 100%;
+        max-width: 100%;
+        border-radius: 20px 20px 0 0;
+        border-bottom: none;
+    }
+    .history-container { padding-bottom: 160px; } /* 增加底部留白防止遮挡 */
+    /* 调整按钮点击区域 */
+    .send-btn { padding: 0 15px; min-width: 80px; }
+    .preview-bar.visible { max-height: 80px; }
+    .thumb-wrapper { width: 50px; height: 50px; }
+}
+/* 登录层 */
+#login-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; justify-content: center; align-items: center; background: #0f172a; }
+.login-card { width: 300px; padding: 30px; text-align: center; }
+.login-card input { width: 100%; padding: 12px; margin: 15px 0; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 8px; }