Support multiple image upload with File component, remove paste and camera features

app.py

@@ -27,44 +27,58 @@ def image_to_base64(image):
     
     return None
 
-def process_message(message, history, image, system_prompt, temperature, max_tokens, top_p):
-    """处理消息并生成响应，支持可选的图片输入"""
+def process_message(message, history, images, system_prompt, temperature, max_tokens, top_p):
+    """处理消息并生成响应，支持可选的多图片输入"""
     print(f"[DEBUG] Processing message: {message[:100] if message else 'None'}...")
-    print(f"[DEBUG] Has image: {image is not None}")
+    print(f"[DEBUG] Has images: {images is not None and len(images) > 0 if images else False}")
     
-    if not message and not image:
-        print("[DEBUG] No message or image provided, skipping")
+    if not message and not images:
+        print("[DEBUG] No message or images provided, skipping")
         yield history
         return
     
     if not STEP_API_KEY:
         print("[DEBUG] No API key configured")
         error_msg = "❌ API key not configured. Please add STEP_API_KEY in Settings."
-        display_msg = f"[Image] {message}" if image and message else "[Image]" if image else message
+        if images and message:
+            display_msg = f"[{len(images)} Images] {message}"
+        elif images:
+            display_msg = f"[{len(images)} Images]"
+        else:
+            display_msg = message
         history.append([display_msg, error_msg])
         yield history
         return
     
-    # 处理图片
-    image_content = None
-    text_content = message or ""
-    
-    if image:
-        # 转换图片为base64
-        try:
-            image_content = image_to_base64(image)
-            print(f"[DEBUG] Image processed successfully")
-        except Exception as e:
-            print(f"[DEBUG] Failed to process image: {e}")
-            history.append([message or "[Image]", f"❌ Failed to process image: {str(e)}"])
-            yield history
-            return
+    # 处理多张图片
+    image_contents = []
+    if images:
+        for img_path in images:
+            try:
+                # 获取文件路径
+                if hasattr(img_path, 'name'):
+                    img_file = img_path.name
+                else:
+                    img_file = img_path
+                
+                # 转换图片为base64
+                with Image.open(img_file) as img:
+                    image_content = image_to_base64(img)
+                    if image_content:
+                        image_contents.append(image_content)
+                        print(f"[DEBUG] Image {len(image_contents)} processed successfully")
+            except Exception as e:
+                print(f"[DEBUG] Failed to process image: {e}")
+                history.append([message or f"[{len(images)} Images]", f"❌ Failed to process image: {str(e)}"])
+                yield history
+                return
     
     # 构造显示消息
-    if image and message:
-        display_message = f"🖼️ [Image] {message}"
-    elif image:
-        display_message = "🖼️ [Image]"
+    text_content = message or ""
+    if image_contents and message:
+        display_message = f"🖼️ [{len(image_contents)} Image{'s' if len(image_contents) > 1 else ''}] {message}"
+    elif image_contents:
+        display_message = f"🖼️ [{len(image_contents)} Image{'s' if len(image_contents) > 1 else ''}]"
     else:
         display_message = message
     
@@ -90,10 +104,15 @@ def process_message(message, history, image, system_prompt, temperature, max_tok
             messages.append({"role": "assistant", "content": h[1]})
     
     # 添加当前消息
-    if image_content:
-        current_content = [
-            {"type": "image_url", "image_url": {"url": f"data:image/jpg;base64,{image_content}", "detail": "high"}}
-        ]
+    if image_contents:
+        current_content = []
+        # 添加所有图片
+        for img_base64 in image_contents:
+            current_content.append({
+                "type": "image_url", 
+                "image_url": {"url": f"data:image/jpg;base64,{img_base64}", "detail": "high"}
+            })
+        # 添加文本
         if text_content:
             current_content.append({"type": "text", "text": text_content})
         messages.append({"role": "user", "content": current_content})
@@ -266,9 +285,10 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
                         elem_id="message-textbox"
                     )
                 with gr.Column(scale=2):
-                    image_input = gr.Image(
-                        label="Image",
-                        type="filepath",
+                    image_input = gr.File(
+                        label="Images",
+                        file_count="multiple",
+                        file_types=["image"],
                         height=100,
                         interactive=True,
                         show_label=True,
@@ -320,22 +340,22 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
 
     
     # 事件处理函���
-    def user_submit(message, history, image):
+    def user_submit(message, history, images):
         """用户提交消息时的处理"""
         print(f"[DEBUG] user_submit called with message: {message[:50] if message else 'None'}...")
-        print(f"[DEBUG] user_submit called with image: {image is not None}")
-        if message or image:
+        print(f"[DEBUG] user_submit called with images: {len(images) if images else 0} files")
+        if message or images:
             # 清空输入，保存消息和图片用于后续处理
-            return gr.update(value=""), history, gr.update(value=None), message, image
-        return gr.update(value=message), history, gr.update(value=image), message, image
+            return gr.update(value=""), history, gr.update(value=None), message, images
+        return gr.update(value=message), history, gr.update(value=images), message, images
     
-    def bot_response(history, saved_message, saved_image, system_prompt, temperature, max_tokens, top_p):
+    def bot_response(history, saved_message, saved_images, system_prompt, temperature, max_tokens, top_p):
         """生成机器人响应"""
         print(f"[DEBUG] bot_response called with saved_message: {saved_message[:50] if saved_message else 'None'}...")
-        print(f"[DEBUG] bot_response called with saved_image: {saved_image is not None}")
-        if saved_message or saved_image:
+        print(f"[DEBUG] bot_response called with saved_images: {len(saved_images) if saved_images else 0} files")
+        if saved_message or saved_images:
             # 使用生成器处理消息
-            for updated_history in process_message(saved_message, history, saved_image, system_prompt, temperature, max_tokens, top_p):
+            for updated_history in process_message(saved_message, history, saved_images, system_prompt, temperature, max_tokens, top_p):
                 yield updated_history
         else:
             yield history
@@ -354,17 +374,17 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
     
     # 创建隐藏的组件来存储消息和图片
     saved_msg = gr.State("")
-    saved_img = gr.State(None)
+    saved_imgs = gr.State([])
     
     # 提交消息 - Enter键
     msg.submit(
         user_submit,
         [msg, chatbot, image_input],
-        [msg, chatbot, image_input, saved_msg, saved_img],
+        [msg, chatbot, image_input, saved_msg, saved_imgs],
         queue=False
     ).then(
         bot_response,
-        [chatbot, saved_msg, saved_img, system_prompt, temperature, max_tokens, top_p],
+        [chatbot, saved_msg, saved_imgs, system_prompt, temperature, max_tokens, top_p],
         chatbot
     )
     
@@ -372,11 +392,11 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
     submit_btn.click(
         user_submit,
         [msg, chatbot, image_input],
-        [msg, chatbot, image_input, saved_msg, saved_img],
+        [msg, chatbot, image_input, saved_msg, saved_imgs],
         queue=False
     ).then(
         bot_response,
-        [chatbot, saved_msg, saved_img, system_prompt, temperature, max_tokens, top_p],
+        [chatbot, saved_msg, saved_imgs, system_prompt, temperature, max_tokens, top_p],
         chatbot
     )
     
@@ -401,7 +421,7 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft(), css=css) as demo:
         [chatbot, saved_msg]
     ).then(
         bot_response,
-        [chatbot, saved_msg, saved_img, system_prompt, temperature, max_tokens, top_p],
+        [chatbot, saved_msg, saved_imgs, system_prompt, temperature, max_tokens, top_p],
         chatbot
     )