Upload 13 files (#12)

- Upload 13 files (ca29530d9fe01f4b3bd43d8e66bdf1b7398c2e83)

README.md

@@ -1,10 +1,151 @@
----
-title: Banber
-emoji: 📈
-colorFrom: blue
-colorTo: purple
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Banana Pro AI - 创意画板
+
+一个基于 Node.js + Express 的 AI 图片生成平台，支持多图上传、社区画廊分享等功能。
+
+## 🚀 快速开始
+
+### 方法1: 使用启动脚本（推荐）
+
+```bash
+./start.sh
+```
+
+这会同时启动主应用和模拟API服务器。
+
+### 方法2: 手动启动
+
+1. 启动模拟API服务器：
+```bash
+node mock-api.js
+```
+
+2. 在新终端启动主应用：
+```bash
+OPENAI_API_URL=http://127.0.0.1:8000/v1/chat/completions node server.js
+```
+
+3. 访问 http://localhost:3000
+
+## 🔐 登录信息
+
+- **密码**: `123456`
+
+## 🎨 功能特性
+
+- ✅ **AI图片生成**: 支持文本提示词生成图片
+- ✅ **多图上传**: 可上传最多16张参考图片
+- ✅ **拖拽上传**: 支持拖拽文件到输入区域
+- ✅ **个人画廊**: 本地存储历史作品
+- ✅ **社区画廊**: 分享作品到公共画廊
+- ✅ **响应式设计**: 支持移动端和桌面端
+- ✅ **图片下载**: 支持下载生成的图片
+- ✅ **参数复用**: 可复用历史作品的参数和图片
+
+## 📁 项目结构
+
+```
+banana-pro-ai/
+├── index.html          # 前端主页面
+├── style.css           # 样式文件
+├── server.js           # 后端服务器
+├── mock-api.js         # 模拟API服务器
+├── start.sh            # 启动脚本
+├── .env                # 环境配置
+├── data/               # 数据目录
+│   └── public-gallery.json  # 公共画廊数据
+└── package.json        # 项目配置
+```
+
+## ⚙️ 配置说明
+
+### 环境变量 (.env)
+
+```env
+# API Configuration
+OPENAI_API_KEY=sk-123456
+OPENAI_API_URL=http://127.0.0.1:8000/v1/chat/completions
+MODEL_NAME=banana-pro
+
+# Site Configuration  
+SITE_PASSWORD=123456
+PORT=3000
+
+# Gallery Configuration
+PUBLIC_GALLERY_LIMIT=80
+```
+
+## 🛠️ 开发说明
+
+### 模拟API
+
+项目包含一个模拟API服务器 (`mock-api.js`)，用于演示和测试：
+
+- 生成彩色SVG图片作为响应
+- 模拟2-5秒的处理延迟
+- 兼容OpenAI API格式
+
+### 真实API配置
+
+要使用真实的图片生成API，请修改 `.env` 文件：
+
+```env
+OPENAI_API_KEY=your_actual_api_key
+OPENAI_API_URL=https://your-api-provider.com/v1/chat/completions
+```
+
+### API响应格式
+
+API应返回OpenAI兼容格式：
+
+```json
+{
+  "choices": [{
+    "message": {
+      "content": "![Generated Image](data:image/png;base64,...)"
+    }
+  }]
+}
+```
+
+## 🐛 故障排除
+
+### 常见问题
+
+1. **生图失败: 无法从 API 响应中提取图片数据**
+   - 检查API地址配置是否正确
+   - 确认API密钥有效
+   - 查看服务器日志了解详细错误
+
+2. **社区创意画廊加载很慢**
+   - 检查网络连接
+   - 查看浏览器控制台错误信息
+   - 确认服务器正常运行
+
+3. **端口占用**
+   ```bash
+   # 查看端口占用
+   lsof -i :3000
+   lsof -i :8000
+   
+   # 停止相关进程
+   pkill -f "node server.js"
+   pkill -f "node mock-api.js"
+   ```
+
+## 📱 移动端优化
+
+- 单列布局，便于触摸操作
+- 减少动画复杂度，提升性能
+- 图片自动压缩，减少网络负载
+- 响应式设计，适配各种屏幕
+
+## 🔄 版本历史
+
+- v1.0.0: 初始版本，支持基础生图功能
+- v1.1.0: 添加多图上传、社区画廊
+- v1.2.0: 移动端优化、性能改进
+- v1.3.0: 错误处理改进、模拟API
+
+## 📄 许可证
+
+MIT License

data/public-gallery.json

@@ -1 +1,23 @@
-[]
+[
+  {
+    "id": "demo-1",
+    "prompt": "一只可爱的橙色小猫坐在阳光下的窗台上，背景是模糊的花园景色",
+    "image": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect fill='%23FFE4B5' width='400' height='300'/%3E%3Ccircle cx='200' cy='150' r='30' fill='%23FF8C00'/%3E%3Ccircle cx='190' cy='140' r='3' fill='%23000'/%3E%3Ccircle cx='210' cy='140' r='3' fill='%23000'/%3E%3Cpath d='M 190 160 Q 200 170 210 160' stroke='%23000' fill='none'/%3E%3Ctext x='200' y='250' text-anchor='middle' fill='%23666' font-family='Arial' font-size='14'%3E示例图片 1%3C/text%3E%3C/svg%3E",
+    "inputImages": [],
+    "timestamp": "2024-12-01T10:00:00.000Z"
+  },
+  {
+    "id": "demo-2", 
+    "prompt": "未来科技城市的夜景，霓虹灯闪烁，飞行汽车在空中穿梭",
+    "image": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect fill='%23001a33' width='400' height='300'/%3E%3Crect x='50' y='100' width='30' height='150' fill='%23444'/%3E%3Crect x='120' y='50' width='40' height='200' fill='%23555'/%3E%3Crect x='200' y='80' width='35' height='170' fill='%23444'/%3E%3Crect x='280' y='60' width='45' height='190' fill='%23555'/%3E%3Ccircle cx='100' cy='50' r='3' fill='%23ff0'/%3E%3Ccircle cx='150' cy='30' r='2' fill='%23f0f'/%3E%3Ccircle cx='250' cy='40' r='3' fill='%230ff'/%3E%3Ccircle cx='320' cy='25' r='2' fill='%23ff0'/%3E%3Ctext x='200' y='250' text-anchor='middle' fill='%23666' font-family='Arial' font-size='14'%3E示例图片 2%3C/text%3E%3C/svg%3E",
+    "inputImages": [],
+    "timestamp": "2024-12-01T14:30:00.000Z"
+  },
+  {
+    "id": "demo-3",
+    "prompt": "中国传统山水画风格的山峦，云雾缭绕，古松挺立",
+    "image": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300'%3E%3Crect fill='%23f5f5dc' width='400' height='300'/%3E%3Cpath d='M 0 200 Q 100 150 200 180 T 400 160 L 400 300 L 0 300 Z' fill='%238B7355'/%3E%3Cpath d='M 50 100 Q 80 80 120 100' stroke='%23654321' fill='none' stroke-width='3'/%3E%3Ccircle cx='100' cy='70' r='20' fill='%23fff' opacity='0.7'/%3E%3Ccircle cx='300' cy='50' r='15' fill='%23fff' opacity='0.6'/%3E%3Ctext x='200' y='250' text-anchor='middle' fill='%23666' font-family='Arial' font-size='14'%3E示例图片 3%3C/text%3E%3C/svg%3E",
+    "inputImages": [],
+    "timestamp": "2024-12-01T18:45:00.000Z"
+  }
+]

index.html

@@ -739,13 +739,17 @@
                 this.setHint(this.defaultHint);
             } catch (error) {
                 console.error('公共画廊加载失败:', error);
+                
+                let errorMessage = '加载失败，请稍后重试';
                 if (error.name === 'AbortError') {
+                    errorMessage = '加载超时，请检查网络';
                     this.setHint('加载超时，请检查网络', 'error');
                 } else {
-                    this.setHint('加载失败，请稍后重试', 'error');
+                    this.setHint(errorMessage, 'error');
                 }
+                
                 if (AppState.publicGalleryData.length === 0) {
-                    this.showEmpty('无法加载公共画廊，请稍后重试');
+                    this.showEmpty(errorMessage);
                 }
             } finally {
                 this.setLoading(false);
@@ -1038,12 +1042,24 @@
 
             } catch (err) {
                 console.error('生成失败:', err);
+                
+                let errorMessage = '生成失败，请重试';
+                if (err.message.includes('API认证失败')) {
+                    errorMessage = 'API认证失败，请联系管理员检查API配置';
+                } else if (err.message.includes('无法连接到API服务器')) {
+                    errorMessage = '无法连接到API服务器，请检查网络连接';
+                } else if (err.message.includes('API请求超时')) {
+                    errorMessage = 'API请求超时，请稍后重试';
+                } else if (err.message) {
+                    errorMessage = err.message;
+                }
+                
                 if (err.name === 'AbortError') {
                     this.statusBar.textContent = '⚠️ 生成超时';
                     alert('生成超时，请检查网络后重试');
                 } else {
                     this.statusBar.textContent = '❌ 生成失败';
-                    alert('生成失败: ' + err.message);
+                    alert(errorMessage);
                 }
             } finally {
                 this.setLoading(false);

mock-api.js

@@ -0,0 +1,93 @@
+/**
+ * mock-api.js
+ * 模拟图片生成API服务器，用于测试和演示
+ */
+
+import express from 'express';
+import { randomBytes } from 'crypto';
+
+const app = express();
+const port = 8000;
+
+app.use(express.json());
+
+// 生成简单的SVG图片作为响应
+function generateMockImage(prompt) {
+    const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD'];
+    const color = colors[Math.floor(Math.random() * colors.length)];
+    const seed = randomBytes(4).toString('hex');
+    
+    const svg = `
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+    <defs>
+        <linearGradient id="grad${seed}" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:${color};stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#FFF;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <rect width="512" height="512" fill="url(#grad${seed})"/>
+    <circle cx="256" cy="256" r="100" fill="${color}" opacity="0.8"/>
+    <text x="256" y="280" text-anchor="middle" fill="white" font-family="Arial" font-size="16" font-weight="bold">
+        AI Generated
+    </text>
+    <text x="256" y="300" text-anchor="middle" fill="white" font-family="Arial" font-size="12">
+        ${prompt.substring(0, 20)}${prompt.length > 20 ? '...' : ''}
+    </text>
+</svg>`;
+
+    return `data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}`;
+}
+
+// OpenAI兼容的聊天完成端点
+app.post('/v1/chat/completions', (req, res) => {
+    const { messages, model } = req.body;
+    
+    console.log(`[Mock API] 收到生成请求:`, {
+        model,
+        messageCount: messages?.length,
+        lastMessage: messages?.[messages.length - 1]?.content?.substring(0, 100) + '...'
+    });
+
+    const userPrompt = messages?.[messages.length - 1]?.content || '';
+    
+    // 模拟处理延迟
+    setTimeout(() => {
+        const mockImage = generateMockImage(userPrompt);
+        
+        const response = {
+            id: `chatcmpl-${randomBytes(8).toString('hex')}`,
+            object: 'chat.completion',
+            created: Math.floor(Date.now() / 1000),
+            model: model || 'banana-pro',
+            choices: [{
+                index: 0,
+                message: {
+                    role: 'assistant',
+                    content: `![Generated Image](${mockImage})`
+                },
+                finish_reason: 'stop'
+            }],
+            usage: {
+                prompt_tokens: 50,
+                completion_tokens: 10,
+                total_tokens: 60
+            }
+        };
+
+        res.json(response);
+    }, 2000 + Math.random() * 3000); // 2-5秒随机延迟
+});
+
+// 健康检查
+app.get('/health', (req, res) => {
+    res.json({ status: 'ok', message: 'Mock API is running' });
+});
+
+app.listen(port, () => {
+    console.log('==========================================');
+    console.log('🤖 Mock API 服务器已启动');
+    console.log('==========================================');
+    console.log(`📡 服务地址: http://localhost:${port}`);
+    console.log('🎨 模拟图片生成功能');
+    console.log('==========================================');
+});

server.js

@@ -35,6 +35,10 @@ const CONFIG = {
     maxPublicGalleryItems: parsePositiveInt(process.env.PUBLIC_GALLERY_LIMIT, 80)
 };
 
+// 调试输出环境变量
+console.log(`[DEBUG] 环境变量 OPENAI_API_URL:`, process.env.OPENAI_API_URL);
+console.log(`[DEBUG] 最终 CONFIG.apiUrl:`, CONFIG.apiUrl);
+
 const DATA_DIR = path.join(__dirname, 'data');
 const PUBLIC_GALLERY_FILE = path.join(DATA_DIR, 'public-gallery.json');
 
@@ -199,29 +203,45 @@ const APIService = {
      * 从响应中提取图片
      */
     extractImageFromResponse(data) {
+        console.log(`[${new Date().toISOString()}] API响应类型:`, typeof data);
+        console.log(`[${new Date().toISOString()}] API响应结构:`, Object.keys(data || {}));
+
+        // 检查错误响应
+        if (data.error) {
+            throw new Error(`API返回错误: ${data.error}`);
+        }
+
         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}`);
+            console.log(`[${new Date().toISOString()}] 响应内容预览:`, content?.substring(0, 200) + (content?.length > 200 ? '...' : ''));
 
             const imageData = ImageParser.extractBase64FromMarkdown(content);
 
             if (imageData && ImageParser.isValidBase64Image(imageData)) {
-                console.log(`[${new Date().toISOString()}] 成功提取图片数据`);
+                console.log(`[${new Date().toISOString()}] 成功提取图片数据，长度: ${imageData.length}`);
                 return imageData;
+            } else {
+                console.log(`[${new Date().toISOString()}] 未能从内容中提取有效图片数据`);
             }
         }
 
+        // 检查 DALL-E 格式
         if (data.data && data.data[0]) {
             if (data.data[0].b64_json) {
+                console.log(`[${new Date().toISOString()}] 使用 DALL-E b64_json 格式`);
                 return `data:image/png;base64,${data.data[0].b64_json}`;
             }
             if (data.data[0].url) {
+                console.log(`[${new Date().toISOString()}] 使用 DALL-E URL 格式`);
                 return data.data[0].url;
             }
         }
 
-        throw new Error('无法从 API 响应中提取图片数据');
+        // 如果到这里还没有找到图片，输出完整的响应用于调试
+        console.log(`[${new Date().toISOString()}] 完整API响应:`, JSON.stringify(data, null, 2));
+        throw new Error('无法从 API 响应中提取图片数据。请检查API配置和模型响应格式。');
     }
 };
 
@@ -386,6 +406,8 @@ app.post('/api/generate', authMiddleware, async (req, res) => {
 
     try {
         console.log(`[${new Date().toISOString()}] 开始生成图片...`);
+        console.log(`[${new Date().toISOString()}] API地址: ${CONFIG.apiUrl}`);
+        console.log(`[${new Date().toISOString()}] API密钥: ${CONFIG.apiKey.substring(0, 10)}...`);
 
         const apiResponse = await APIService.generateImage(trimmedPrompt, uploadedImages);
         const imageData = APIService.extractImageFromResponse(apiResponse);
@@ -402,10 +424,21 @@ app.post('/api/generate', authMiddleware, async (req, res) => {
 
     } catch (error) {
         console.error(`[${new Date().toISOString()}] 生成失败:`, error.message);
+        console.error(`[${new Date().toISOString()}] 错误堆栈:`, error.stack);
+
+        // 根据错误类型提供更具体的错误信息
+        let errorMessage = error.message;
+        if (error.message.includes('API返回错误: 未授权') || error.message.includes('401') || error.message.includes('Unauthorized')) {
+            errorMessage = 'API认证失败，请检查API密钥配置';
+        } else if (error.message.includes('ECONNREFUSED') || error.message.includes('ENOTFOUND')) {
+            errorMessage = '无法连接到API服务器，请检查网络连接和API地址配置';
+        } else if (error.message.includes('timeout')) {
+            errorMessage = 'API请求超时，请稍后重试';
+        }
 
         res.status(500).json({
             success: false,
-            message: error.message || '图片生成失败，请稍后重试'
+            message: errorMessage || '图片生成失败，请稍后重试'
         });
     }
 });
@@ -413,14 +446,19 @@ app.post('/api/generate', authMiddleware, async (req, res) => {
 // 公共画廊 - 获取列表
 app.get('/api/public-gallery', async (req, res) => {
     try {
+        console.log(`[${new Date().toISOString()}] 开始加载公共画廊...`);
         const items = await PublicGalleryStore.getAll();
         const sanitized = items.map(({ deleteToken, ...rest }) => rest);
+        
+        console.log(`[${new Date().toISOString()}] 公共画廊加载完成，项目数: ${sanitized.length}`);
+        
         res.json({
             success: true,
             items: sanitized
         });
     } catch (error) {
         console.error(`[${new Date().toISOString()}] 加载公��画廊失败:`, error);
+        console.error(`[${new Date().toISOString()}] 错误详情:`, error.stack);
         res.status(500).json({
             success: false,
             message: '无法加载公共画廊，请稍后重试'

start.sh

@@ -0,0 +1,50 @@
+#!/bin/bash
+
+# Banana Pro AI 启动脚本
+# 同时启动主应用和模拟API服务器
+
+echo "🍌 启动 Banana Pro AI 应用..."
+
+# 检查是否已有进程在运行
+if pgrep -f "node server.js" > /dev/null; then
+    echo "⚠️  检测到主应用已在运行，先停止..."
+    pkill -f "node server.js"
+    sleep 2
+fi
+
+if pgrep -f "node mock-api.js" > /dev/null; then
+    echo "⚠️  检测到模拟API已在运行，先停止..."
+    pkill -f "node mock-api.js"
+    sleep 2
+fi
+
+# 启动模拟API服务器
+echo "🤖 启动模拟API服务器 (端口8000)..."
+OPENAI_API_URL=http://127.0.0.1:8000/v1/chat/completions node mock-api.js &
+API_PID=$!
+
+# 等待API服务器启动
+sleep 3
+
+# 启动主应用
+echo "🍌 启动主应用服务器 (端口3000)..."
+OPENAI_API_URL=http://127.0.0.1:8000/v1/chat/completions node server.js &
+MAIN_PID=$!
+
+echo ""
+echo "=========================================="
+echo "✅ Banana Pro AI 已成功启动！"
+echo "=========================================="
+echo "🎨 Web应用地址: http://localhost:3000"
+echo "🤖 模拟API地址: http://localhost:8000"
+echo "🔑 登录密码: 123456"
+echo ""
+echo "💡 提示:"
+echo "   - 模拟API会生成彩色SVG图片作为演示"
+echo "   - 社区画廊已包含示例作品"
+echo "   - 按 Ctrl+C 停止所有服务"
+echo "=========================================="
+
+# 等待用户中断
+trap "echo '🛑 正在停止服务...'; kill $API_PID $MAIN_PID 2>/dev/null; exit" INT
+wait

test-system.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+echo "🍌 测试 Banana Pro AI 系统..."
+
+# 检查端口
+echo "📡 检查端口状态..."
+if ! lsof -i :3000 > /dev/null 2>&1; then
+    echo "❌ 端口3000未被占用"
+else
+    echo "✅ 端口3000已被占用"
+fi
+
+if ! lsof -i :8000 > /dev/null 2>&1; then
+    echo "❌ 端口8000未被占用"
+else
+    echo "✅ 端口8000已被占用"
+fi
+
+# 测试API
+echo ""
+echo "🔍 测试API连接..."
+
+echo "测试主应用健康检查..."
+if curl -s http://localhost:3000/api/health > /dev/null 2>&1; then
+    echo "✅ 主应用API正常"
+else
+    echo "❌ 主应用API无法访问"
+fi
+
+echo "测试模拟API健康检查..."
+if curl -s http://localhost:8000/health > /dev/null 2>&1; then
+    echo "✅ 模拟API正常"
+else
+    echo "❌ 模拟API无法访问"
+fi
+
+echo ""
+echo "📊 当前运行的Node进程："
+ps aux | grep -E "(node.*server|node.*mock)" | grep -v grep || echo "无相关进程"
+
+echo ""
+echo "🌐 测试完成！"