增加图片功能

app.py

@@ -837,8 +837,8 @@ class Gradio_Events:
 
     @staticmethod
     def handle_image_upload(files, state_value):
-        """处理图片上传"""
-        logger.info(f"handle_image_upload called with files: {files}")
+        """处理图片上传 - 支持拖拽和粘贴功能"""
+        logger.info(f"handle_image_upload called with files: {files}, type: {type(files)}")
         
         if not files:
             # 没有文件时重置为默认状态
@@ -851,48 +851,79 @@ class Gradio_Events:
         
         # 显示上传中状态
         logger.info("Upload in progress...")
-        # 这里可以添加一个临时的loading状态，但由于返回限制，我们直接进行处理
         
         try:
             # 处理上传的文件
             uploaded_images = []
             image_file_paths = []
             
+            # 确保files是列表格式
+            if not isinstance(files, list):
+                files = [files] if files else []
+            
             for i, file_info in enumerate(files):
                 logger.info(f"Processing file {i}: {file_info}, type: {type(file_info)}")
                 
+                file_path = None
+                
                 if isinstance(file_info, dict):
-                    # 如果是文件信息字典
+                    # 如果是文件信息字典（Gradio上传格式）
                     file_path = file_info.get('name') or file_info.get('path')
                     logger.info(f"Extracted path from dict: {file_path}")
-                else:
+                elif isinstance(file_info, str):
                     # 如果直接是文件路径
                     file_path = file_info
                     logger.info(f"Direct file path: {file_path}")
+                elif hasattr(file_info, 'name') and hasattr(file_info, 'read'):
+                    # 如果是文件对象（拖拽/粘贴可能产生）
+                    logger.info(f"File object detected: {file_info.name if hasattr(file_info, 'name') else 'unnamed'}")
+                    # 对于文件对象，我们需要特殊处理
+                    try:
+                        if hasattr(file_info, 'name'):
+                            file_path = file_info.name
+                        else:
+                            # 创建临时文件名
+                            import tempfile
+                            with tempfile.NamedTemporaryFile(suffix='.png', delete=False) as tmp_file:
+                                if hasattr(file_info, 'read'):
+                                    tmp_file.write(file_info.read())
+                                file_path = tmp_file.name
+                                logger.info(f"Created temporary file: {file_path}")
+                    except Exception as file_error:
+                        logger.error(f"Error processing file object: {str(file_error)}")
+                        continue
+                else:
+                    logger.warning(f"Unknown file format: {type(file_info)}")
+                    continue
                 
                 if file_path:
-                    # 保存文件路径
-                    image_file_paths.append(file_path)
-                    logger.info(f"Added to image_file_paths: {file_path}")
-                    
-                    # 使用PIL加载图片
-                    image = Image.open(file_path)
-                    logger.info(f"Loaded image with size: {image.size}")
-                    
-                    # 可选：调整图片大小以节省带宽
-                    if max(image.size) > 1024:
-                        ratio = 1024 / max(image.size)
-                        new_size = tuple(int(dim * ratio) for dim in image.size)
-                        image = image.resize(new_size, Image.Resampling.LANCZOS)
-                        logger.info(f"Resized image to: {new_size}")
-                    
-                    uploaded_images.append(image)
+                    try:
+                        # 保存文件路径
+                        image_file_paths.append(file_path)
+                        logger.info(f"Added to image_file_paths: {file_path}")
+                        
+                        # 使用PIL加载图片
+                        image = Image.open(file_path)
+                        logger.info(f"Loaded image with size: {image.size}")
+                        
+                        # 可选：调整图片大小以节省带宽
+                        if max(image.size) > 1024:
+                            ratio = 1024 / max(image.size)
+                            new_size = tuple(int(dim * ratio) for dim in image.size)
+                            image = image.resize(new_size, Image.Resampling.LANCZOS)
+                            logger.info(f"Resized image to: {new_size}")
+                        
+                        uploaded_images.append(image)
+                        
+                    except Exception as img_error:
+                        logger.error(f"Error processing image {file_path}: {str(img_error)}")
+                        continue
             
             # 替换而不是追加图片（修复累积bug）
             state_value["uploaded_images"] = uploaded_images
             state_value["image_file_paths"] = image_file_paths
             
-            logger.info(f"Successfully uploaded {len(uploaded_images)} images")
+            logger.info(f"Successfully uploaded {len(uploaded_images)} images via drag/paste/upload")
             
             # 显示状态指示器，显示图片数量
             return (
@@ -962,11 +993,11 @@ css = """
   opacity: 0;
   transition: opacity 0.2s;
 }
-#chatbot .chatbot-chat .chatbot-chat-messages .chatbot-chat-message:last-child .chatbot-chat-message-footer {
+#chatbot .chatbot-chat .chatbot-chat-message:last-child .chatbot-chat-message-footer {
   visibility: visible;
   opacity: 1;
 }
-#chatbot .chatbot-chat .chatbot-chat-messages .chatbot-chat-message:hover .chatbot-chat-message-footer {
+#chatbot .chatbot-chat .chatbot-chat-message:hover .chatbot-chat-message-footer {
   visibility: visible;
   opacity: 1;
 }
@@ -1081,6 +1112,34 @@ css = """
   background: linear-gradient(135deg, #f6f9fc 0%, #f0f4f8 100%);
 }
 
+/* 拖拽区域样式 */
+.drop-zone {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.drop-zone.drag-over {
+  background: linear-gradient(135deg, #e6f7ff 0%, #d6f7ff 100%);
+  border: 2px dashed #1890ff;
+  border-radius: 8px;
+}
+
+.drop-zone.drag-over::before {
+  content: "释放以上传图片";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(24, 144, 255, 0.9);
+  color: white;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  z-index: 1000;
+  pointer-events: none;
+}
+
 /* 响应式图片展示 */
 @media (max-width: 768px) {
   .image-gallery img {
@@ -1103,6 +1162,237 @@ css = """
 .image-gallery img {
   animation: imageLoad 0.3s ease;
 }
+
+/* 粘贴提示样式 */
+.paste-hint {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: rgba(24, 144, 255, 0.9);
+  color: white;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  z-index: 1001;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+}
+
+.paste-hint.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+"""
+
+# 添加JavaScript代码来处理拖拽和粘贴
+drag_and_paste_js = """
+<script>
+(function() {
+    let isInitialized = false;
+    
+    function initializeDragAndPaste() {
+        if (isInitialized) return;
+        isInitialized = true;
+        
+        console.log('Initializing drag and paste functionality...');
+        
+        // 创建粘贴提示元素
+        const pasteHint = document.createElement('div');
+        pasteHint.className = 'paste-hint';
+        pasteHint.textContent = '检测到剪贴板中的图片，按 Ctrl+V 粘贴';
+        document.body.appendChild(pasteHint);
+        
+        // 获取聊天容器作为拖拽区域
+        const chatContainer = document.querySelector('#chatbot .chatbot-chat') || document.body;
+        
+        // 防止默认的拖拽行为
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            chatContainer.addEventListener(eventName, preventDefaults, false);
+            document.body.addEventListener(eventName, preventDefaults, false);
+        });
+        
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        
+        // 拖拽进入
+        ['dragenter', 'dragover'].forEach(eventName => {
+            chatContainer.addEventListener(eventName, highlight, false);
+        });
+        
+        // 拖拽离开
+        ['dragleave', 'drop'].forEach(eventName => {
+            chatContainer.addEventListener(eventName, unhighlight, false);
+        });
+        
+        function highlight(e) {
+            if (e.dataTransfer.types.includes('Files')) {
+                chatContainer.classList.add('drop-zone', 'drag-over');
+            }
+        }
+        
+        function unhighlight(e) {
+            chatContainer.classList.remove('drop-zone', 'drag-over');
+        }
+        
+        // 处理文件放置
+        chatContainer.addEventListener('drop', handleDrop, false);
+        
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            
+            if (files.length > 0) {
+                handleFileUpload(Array.from(files));
+            }
+        }
+        
+        // 处理粘贴事件
+        document.addEventListener('paste', handlePaste, false);
+        
+        function handlePaste(e) {
+            const items = e.clipboardData.items;
+            const imageFiles = [];
+            
+            for (let i = 0; i < items.length; i++) {
+                if (items[i].type.indexOf('image') === 0) {
+                    const file = items[i].getAsFile();
+                    if (file) {
+                        imageFiles.push(file);
+                    }
+                }
+            }
+            
+            if (imageFiles.length > 0) {
+                e.preventDefault();
+                handleFileUpload(imageFiles);
+                showPasteSuccess();
+            }
+        }
+        
+        // 显示粘贴成功提示
+        function showPasteSuccess() {
+            pasteHint.textContent = '图片粘贴成功！';
+            pasteHint.classList.add('show');
+            setTimeout(() => {
+                pasteHint.classList.remove('show');
+            }, 2000);
+        }
+        
+        // 处理文件上传
+        function handleFileUpload(files) {
+            console.log('Processing files:', files);
+            
+            // 过滤只保留图片文件
+            const imageFiles = files.filter(file => file.type.startsWith('image/'));
+            
+            if (imageFiles.length === 0) {
+                console.log('No image files found');
+                return;
+            }
+            
+            // 查找上传组件
+            const uploadInput = document.querySelector('input[type="file"][accept*="image"]');
+            if (!uploadInput) {
+                console.error('Upload input not found');
+                return;
+            }
+            
+            try {
+                // 创建新的文件列表
+                const dt = new DataTransfer();
+                imageFiles.forEach(file => {
+                    dt.items.add(file);
+                });
+                
+                // 设置文件到上传组件
+                uploadInput.files = dt.files;
+                
+                // 触发 change 事件
+                const changeEvent = new Event('change', { bubbles: true });
+                uploadInput.dispatchEvent(changeEvent);
+                
+                console.log(`Successfully uploaded ${imageFiles.length} image(s)`);
+                
+                // 显示成功提示
+                showUploadSuccess(imageFiles.length);
+                
+            } catch (error) {
+                console.error('Error uploading files:', error);
+            }
+        }
+        
+        // 显示上传成功提示
+        function showUploadSuccess(count) {
+            pasteHint.textContent = `成功上传 ${count} 张图片！`;
+            pasteHint.classList.add('show');
+            setTimeout(() => {
+                pasteHint.classList.remove('show');
+            }, 2000);
+        }
+        
+        // 监听剪贴板变化（可选功能）
+        document.addEventListener('keydown', function(e) {
+            if (e.ctrlKey && e.key === 'v') {
+                // 检查是否聚焦在输入框上
+                const activeElement = document.activeElement;
+                const isInInputArea = activeElement && (
+                    activeElement.tagName === 'TEXTAREA' || 
+                    activeElement.tagName === 'INPUT' ||
+                    activeElement.contentEditable === 'true'
+                );
+                
+                if (isInInputArea) {
+                    // 短暂显示提示
+                    setTimeout(() => {
+                        if (navigator.clipboard && navigator.clipboard.read) {
+                            navigator.clipboard.read().then(items => {
+                                const hasImage = items.some(item => 
+                                    item.types.some(type => type.startsWith('image/'))
+                                );
+                                if (hasImage) {
+                                    pasteHint.textContent = '检测到图片，正在处理...';
+                                    pasteHint.classList.add('show');
+                                    setTimeout(() => {
+                                        pasteHint.classList.remove('show');
+                                    }, 1500);
+                                }
+                            }).catch(() => {
+                                // 忽略权限错误
+                            });
+                        }
+                    }, 100);
+                }
+            }
+        });
+        
+        console.log('Drag and paste functionality initialized successfully');
+    }
+    
+    // 初始化函数
+    function init() {
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', initializeDragAndPaste);
+        } else {
+            initializeDragAndPaste();
+        }
+    }
+    
+    // 如果Gradio还没有完全加载，等待一下
+    if (window.gradio && window.gradio.mount) {
+        init();
+    } else {
+        // 等待Gradio加载
+        setTimeout(init, 1000);
+    }
+    
+    // 也监听window load事件作为备选
+    window.addEventListener('load', initializeDragAndPaste);
+    
+})();
+</script>
 """
 
 
@@ -1120,7 +1410,7 @@ def logo():
             ms.Span("dots.vlm1.inst")
 
 
-with gr.Blocks(css=css, fill_width=True) as demo:
+with gr.Blocks(css=css, fill_width=True, head=drag_and_paste_js) as demo:
     state = gr.State({
         "conversations_history": {},
         "conversations": [],
@@ -1524,8 +1814,8 @@ with gr.Blocks(css=css, fill_width=True) as demo:
                     }""") as suggestion:
                         with ms.Slot("children"):
                             with antdx.Sender(placeholder=get_text(
-                                    "Enter Prompt",
-                                    "输入"), ) as sender:
+                                    "Enter Prompt (Drag & Drop or Ctrl+V to paste images)",
+                                    "输入内容（可拖拽图片或 Ctrl+V 粘贴图片）"), ) as sender:
                                 with ms.Slot("actions"):
                                     # 停止生成按钮
                                     with antd.Button(