Revert to stable Gradio 4.19.2 and redesign interface without MultimodalTextbox

README.md

@@ -4,7 +4,7 @@ emoji: 🤖
 colorFrom: purple
 colorTo: blue
 sdk: gradio
-sdk_version: 4.36.0
+sdk_version: 4.19.2
 app_file: app.py
 pinned: false
 license: mit

app.py

@@ -22,6 +22,10 @@ def image_to_base64(image):
         image.save(buffered, format="PNG")
         img_str = base64.b64encode(buffered.getvalue()).decode('utf-8')
         return img_str
+    elif isinstance(image, str) and os.path.exists(image):
+        # 如果是文件路径
+        with open(image, "rb") as image_file:
+            return base64.b64encode(image_file.read()).decode('utf-8')
     
     return None
 
@@ -40,59 +44,36 @@ def extract_cot_and_answer(text):
         # 如果没有reasoning标签，整个响应就是答案
         return "", text
 
-def format_message_with_image(message_text, image_path=None):
-    """格式化包含图片的消息"""
-    if image_path:
-        # 创建包含图片和文本的消息
-        return f'<img src="{image_path}" style="max-width: 200px; max-height: 200px; border-radius: 8px; margin-bottom: 10px;"><br>{message_text}'
-    return message_text
-
-def call_step_api_stream(message, history):
-    """调用Step API进行流式对话，支持多模态输入"""
-    print(f"[DEBUG] Starting API call - Message type: {type(message)}")
+def call_step_api_stream(message, history, image=None):
+    """调用Step API进行流式对话"""
+    print(f"[DEBUG] Starting API call - Message: {message}, Has Image: {image is not None}")
     
-    if not message:
-        print("[DEBUG] No message provided")
+    if not message and not image:
+        print("[DEBUG] No message or image provided")
         yield history, "", ""
         return
     
     if not STEP_API_KEY:
         print("[DEBUG] API key not configured")
         error_msg = "❌ API key not configured. Please add STEP_API_KEY in Settings."
-        history.append([message if isinstance(message, str) else "Message", error_msg])
+        history.append([message or "[Image]", error_msg])
         yield history, "", ""
         return
     
     print(f"[DEBUG] API Key exists: {bool(STEP_API_KEY)}")
     
-    # 处理多模态输入
-    text_content = ""
+    # 处理消息和图片
+    display_message = message or ""
     image_content = None
-    display_message = ""
     
-    # Gradio MultimodalTextbox 返回一个字典
-    if isinstance(message, dict):
-        text_content = message.get("text", "")
-        files = message.get("files", [])
-        
-        # 处理图片文件
-        if files and len(files) > 0:
-            image_path = files[0]  # 取第一张图片
-            try:
-                img = Image.open(image_path)
-                image_content = image_to_base64(img)
-                # 创建显示消息，包含图片缩略图
-                display_message = format_message_with_image(text_content, image_path)
+    if image:
+        try:
+            image_content = image_to_base64(image)
+            if image_content:
+                display_message = f"[Image uploaded] {message}" if message else "[Image uploaded]"
                 print(f"[DEBUG] Image processed successfully")
-            except Exception as e:
-                print(f"[DEBUG] Failed to process image: {e}")
-                display_message = text_content
-        else:
-            display_message = text_content
-    else:
-        # 纯文本消息
-        text_content = str(message)
-        display_message = text_content
+        except Exception as e:
+            print(f"[DEBUG] Failed to process image: {e}")
     
     # 添加用户消息到历史
     history.append([display_message, ""])
@@ -101,14 +82,22 @@ def call_step_api_stream(message, history):
     # 构造API消息
     messages = []
     
-    # 添加历史对话（只提取文本部分，不包含HTML）
+    # 添加历史对话（只保留文本，不包含标记）
     for h in history[:-1]:  # 不包含当前消息
         if h[0]:  # 用户消息
-            # 从HTML中提取纯文本
-            user_text = re.sub(r'<[^>]+>', '', h[0]) if '<' in h[0] else h[0]
-            messages.append({"role": "user", "content": user_text})
-        if h[1]:  # 助手回复
-            messages.append({"role": "assistant", "content": h[1]})
+            # 移除[Image uploaded]标记
+            user_text = h[0].replace("[Image uploaded] ", "").replace("[Image uploaded]", "")
+            if user_text:
+                messages.append({"role": "user", "content": user_text})
+        if h[1] and not h[1].startswith("❌"):  # 助手回复（排除错误消息）
+            # 提取纯文本内容
+            assistant_text = h[1]
+            # 如果包含格式化的CoT和Answer，提取完整内容
+            if "**Reasoning Process:**" in assistant_text:
+                # 移除格式化标记，保留原始内容
+                assistant_text = re.sub(r'\*\*.*?\*\*', '', assistant_text)
+                assistant_text = assistant_text.replace("💭", "").replace("📝", "").replace("---", "").strip()
+            messages.append({"role": "assistant", "content": assistant_text})
     
     # 构造当前消息
     if image_content:
@@ -116,12 +105,13 @@ def call_step_api_stream(message, history):
         current_content = [
             {"type": "image_url", "image_url": {"url": f"data:image/jpg;base64,{image_content}", "detail": "high"}}
         ]
-        if text_content:
-            current_content.append({"type": "text", "text": text_content})
+        if message:
+            current_content.append({"type": "text", "text": message})
         messages.append({"role": "user", "content": current_content})
     else:
         # 纯文本
-        messages.append({"role": "user", "content": text_content})
+        if message:
+            messages.append({"role": "user", "content": message})
     
     print(f"[DEBUG] Messages count: {len(messages)}")
     
@@ -174,7 +164,8 @@ def call_step_api_stream(message, history):
                         # 没有CoT，直接显示答案
                         history[-1][1] = current_answer
                     
-                    print(f"[DEBUG] Chunk {chunk_count}: processed")
+                    if chunk_count % 5 == 0:  # 每5个chunk更新一次，减少更新频率
+                        print(f"[DEBUG] Processed {chunk_count} chunks")
                     yield history, current_cot, current_answer
         
         if not full_response:
@@ -183,6 +174,8 @@ def call_step_api_stream(message, history):
             yield history, "", ""
         else:
             print(f"[DEBUG] Final response length: {len(full_response)} chars")
+            # 最终更新
+            yield history, current_cot, current_answer
                     
     except Exception as e:
         print(f"[DEBUG] API request failed: {e}")
@@ -191,9 +184,9 @@ def call_step_api_stream(message, history):
         history[-1][1] = f"❌ API request failed: {str(e)}"
         yield history, "", ""
 
-def clear_history():
-    """Clear conversation history"""
-    return [], None
+def clear_all():
+    """Clear all components"""
+    return [], None, "", "", ""
 
 # 创建Gradio界面
 with gr.Blocks(title="Step-3", theme=gr.themes.Soft()) as demo:
@@ -206,23 +199,34 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft()) as demo:
         with gr.Column(scale=2):
             # 对话界面
             chatbot = gr.Chatbot(
-                height=600,
+                height=500,
                 show_label=False,
                 elem_id="chatbot",
-                bubble_full_width=False,
-                render_markdown=True
+                bubble_full_width=False
             )
             
             with gr.Row():
-                # 多模态输入框 - 支持文本和图片
-                msg = gr.MultimodalTextbox(
-                    placeholder="Type your message here... (You can paste images directly)",
-                    show_label=False,
-                    file_types=["image"],
-                    container=False,
-                    submit_btn="Send"
-                )
-                clear_btn = gr.Button("Clear", scale=0)
+                with gr.Column(scale=6):
+                    # 文本输入框
+                    msg = gr.Textbox(
+                        placeholder="Type your message here...",
+                        show_label=False,
+                        lines=2,
+                        max_lines=4,
+                        container=False,
+                        elem_id="msg"
+                    )
+                with gr.Column(scale=2):
+                    # 图片上传
+                    image_input = gr.Image(
+                        label="Upload Image",
+                        type="filepath",
+                        height=80,
+                        scale=1
+                    )
+                with gr.Column(scale=1):
+                    send_btn = gr.Button("Send", variant="primary", scale=1)
+                    clear_btn = gr.Button("Clear", scale=1)
         
         with gr.Column(scale=1):
             # CoT推理过程展示
@@ -247,16 +251,38 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft()) as demo:
             )
     
     # 事件处理
+    def on_submit(message, history, image):
+        if message or image:
+            return "", history, None
+        return message, history, image
+    
+    # 提交消息
     msg.submit(
+        on_submit,
+        [msg, chatbot, image_input],
+        [msg, chatbot, image_input],
+        queue=False
+    ).then(
+        call_step_api_stream,
+        [msg, chatbot, image_input],
+        [chatbot, cot_display, answer_display]
+    )
+    
+    send_btn.click(
+        on_submit,
+        [msg, chatbot, image_input],
+        [msg, chatbot, image_input],
+        queue=False
+    ).then(
         call_step_api_stream,
-        [msg, chatbot],
+        [msg, chatbot, image_input],
         [chatbot, cot_display, answer_display]
     )
     
     clear_btn.click(
-        clear_history,
+        clear_all,
         None,
-        [chatbot, msg]
+        [chatbot, image_input, msg, cot_display, answer_display]
     )
     
     # 页脚

requirements.txt

@@ -1,3 +1,3 @@
-gradio==4.36.0
+gradio==4.19.2
 openai==1.12.0
 Pillow==10.2.0