完全重写应用：使用更稳定的Gradio 3.50.2版本和简化的代码结构

app.py

@@ -1,178 +1,240 @@
 import os
 import io
 import base64
-from typing import List, Tuple, Optional
-
 import gradio as gr
 from PIL import Image
 from openai import OpenAI
 
-
+# 配置
 BASE_URL = "https://api.stepfun.com/v1"
-DEFAULT_MODEL = "step-3"  # 可改为 step-r1-v-mini
-DEFAULT_DETAIL = "high"   # high | low | auto
-
-
-def _get_api_key() -> Optional[str]:
-    # 优先读环境变量（在 HF Spaces 的 Settings -> Variables and secrets 中配置）
-    return os.environ.get("STEPFUN_API_KEY")
-
+DEFAULT_MODEL = "step-3"  # 可选: step-3, step-r1-v-mini
 
-def pil_image_to_data_uri(img: Image.Image) -> str:
+def get_api_key():
+    """获取API密钥"""
+    api_key = os.environ.get("STEPFUN_API_KEY")
+    if not api_key:
+        raise ValueError("请设置环境变量 STEPFUN_API_KEY")
+    return api_key
+
+def image_to_base64(image):
+    """将PIL图像转换为base64编码"""
+    if image is None:
+        return None
+    
+    # 转换为RGB格式
+    if image.mode != 'RGB':
+        image = image.convert('RGB')
+    
+    # 保存到字节流
     buffer = io.BytesIO()
-    # 统一编码为 JPEG，降低大小并确保浏览器/模型兼容
-    rgb_img = img.convert("RGB")
-    rgb_img.save(buffer, format="JPEG", quality=90)
-    b64 = base64.b64encode(buffer.getvalue()).decode("utf-8")
-    return f"data:image/jpeg;base64,{b64}"
-
-
-def build_messages(
-    chat_history: List[Tuple[str, str]],
-    user_text: str,
-    image: Optional[Image.Image],
-    system_prompt: Optional[str],
-    detail: str,
-) -> list:
-    messages: List[dict] = []
-
-    if system_prompt:
-        messages.append({"role": "system", "content": system_prompt})
-
-    # 将历史轮次压缩为仅文本内容（简单稳妥）
-    for user_turn, assistant_turn in chat_history:
-        if user_turn:
+    image.save(buffer, format='JPEG', quality=85)
+    
+    # 编码为base64
+    img_str = base64.b64encode(buffer.getvalue()).decode('utf-8')
+    return f"data:image/jpeg;base64,{img_str}"
+
+def chat_with_stepfun(message, image, history, model, system_prompt):
+    """
+    处理聊天请求
+    
+    Args:
+        message: 用户输入的文本
+        image: 用户上传的图片 (PIL Image)
+        history: 聊天历史
+        model: 选择的模型
+        system_prompt: 系统提示词
+    
+    Returns:
+        更新后的聊天历史
+    """
+    try:
+        # 获取API密钥
+        api_key = get_api_key()
+        client = OpenAI(api_key=api_key, base_url=BASE_URL)
+        
+        # 构建消息列表
+        messages = []
+        
+        # 添加系统提示
+        if system_prompt and system_prompt.strip():
             messages.append({
-                "role": "user",
-                "content": [{"type": "text", "text": user_turn}],
+                "role": "system",
+                "content": system_prompt
             })
-        if assistant_turn:
-            messages.append({
-                "role": "assistant",
-                "content": [{"type": "text", "text": assistant_turn}],
+        
+        # 添加历史对话
+        for user_msg, assistant_msg in history:
+            if user_msg:
+                messages.append({
+                    "role": "user",
+                    "content": user_msg
+                })
+            if assistant_msg:
+                messages.append({
+                    "role": "assistant",
+                    "content": assistant_msg
+                })
+        
+        # 构建当前用户消息
+        current_content = []
+        
+        # 添加图片
+        if image is not None:
+            img_base64 = image_to_base64(image)
+            current_content.append({
+                "type": "image_url",
+                "image_url": {
+                    "url": img_base64,
+                    "detail": "high"
+                }
             })
-
-    # 当前用户输入：可包含图片 + 文本
-    content: List[dict] = []
-    if image is not None:
-        data_uri = pil_image_to_data_uri(image)
-        content.append({
-            "type": "image_url",
-            "image_url": {"url": data_uri, "detail": detail},
+        
+        # 添加文本
+        if message and message.strip():
+            current_content.append({
+                "type": "text",
+                "text": message
+            })
+        
+        # 如果没有任何内容，返回
+        if not current_content:
+            return history
+        
+        # 添加当前消息
+        messages.append({
+            "role": "user",
+            "content": current_content
         })
-    if user_text:
-        content.append({"type": "text", "text": user_text})
-
-    if not content:
-        # 保底，避免空消息
-        content.append({"type": "text", "text": ""})
-
-    messages.append({"role": "user", "content": content})
-    return messages
-
-
-def stream_response(
-    user_text: str,
-    image: Optional[Image.Image],
-    model: str,
-    detail: str,
-    system_prompt: str,
-    chat_history: List[Tuple[str, str]],
-):
-    api_key = _get_api_key()
-    if not api_key:
-        error_text = "未检测到 STEPFUN_API_KEY，请在 Space 的 Settings -> Variables and secrets 中配置后重试。"
-        # 将错误作为助手消息显示
-        display_user = (user_text or "") + ("\n[已附带图片]" if image is not None else "")
-        new_history = chat_history + [(display_user, error_text)]
-        yield new_history, ""
-        return
-
-    client = OpenAI(api_key=api_key, base_url=BASE_URL)
-
-    # 将用户消息先追加到对话框
-    display_user = (user_text or "") + ("\n[已附带图片]" if image is not None else "")
-    chat_history = chat_history + [(display_user, "")]  # 预先占位一条助手回复
-    yield chat_history, ""
-
-    try:
-        messages = build_messages(chat_history[:-1], user_text=user_text, image=image, system_prompt=system_prompt, detail=detail)
-        stream = client.chat.completions.create(
-            model=model or DEFAULT_MODEL,
+        
+        # 调用API
+        response = client.chat.completions.create(
+            model=model,
             messages=messages,
-            stream=True,
+            stream=True
         )
-
-        assistant_acc = []
-        for chunk in stream:
-            delta = None
-            try:
-                delta = chunk.choices[0].delta
-            except Exception:
-                pass
-            if delta and getattr(delta, "content", None):
-                assistant_acc.append(delta.content)
-                # 实时更新最后一条消息
-                chat_history[-1] = (display_user, "".join(assistant_acc))
-                yield chat_history, ""
-
+        
+        # 处理流式响应
+        full_response = ""
+        for chunk in response:
+            if chunk.choices[0].delta.content:
+                full_response += chunk.choices[0].delta.content
+                # 实时更新界面
+                yield history + [(message, full_response)]
+        
+        # 返回最终结果
+        yield history + [(message, full_response)]
+        
     except Exception as e:
-        chat_history[-1] = (display_user, f"[调用失败] {type(e).__name__}: {e}")
-        yield chat_history, ""
-
-
-with gr.Blocks(title="StepFun - Step3 Multimodal Chat") as demo:
-    gr.Markdown("""
-    # StepFun Step-3 多模态对话（Hugging Face Space）
-    - 支持上传图片 + 文本提问，后端接口兼容 OpenAI Chat Completions。
-    - 在 Space 中运行时，请到 Settings -> Variables and secrets 配置 `STEPFUN_API_KEY`。
-    - 可在右上角切换到 **dev mode** 查看构建/运行日志。
-    """)
-
-    with gr.Row():
-        model = gr.Dropdown(
-            label="模型",
-            choices=["step-3", "step-r1-v-mini"],
-            value=DEFAULT_MODEL,
-            interactive=True,
+        error_msg = f"错误: {str(e)}"
+        yield history + [(message, error_msg)]
+
+def clear_chat():
+    """清空聊天记录"""
+    return None, None, []
+
+# 创建Gradio界面
+def create_interface():
+    with gr.Blocks(title="StepFun 多模态对话") as demo:
+        gr.Markdown("""
+        # 🚀 StepFun Step-3 多模态对话
+        
+        支持图片理解和文本对话，使用StepFun API。
+        
+        **使用说明：**
+        1. 在环境变量中设置 `STEPFUN_API_KEY`
+        2. 可选择上传图片进行视觉理解
+        3. 输入文本进行对话
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=3):
+                # 聊天界面
+                chatbot = gr.Chatbot(
+                    height=500,
+                    bubble_full_width=False,
+                    avatar_images=(None, None)
+                )
+                
+                with gr.Row():
+                    with gr.Column(scale=3):
+                        msg = gr.Textbox(
+                            label="输入消息",
+                            placeholder="输入你的问题...",
+                            lines=2
+                        )
+                    with gr.Column(scale=1):
+                        img = gr.Image(
+                            label="上传图片（可选）",
+                            type="pil"
+                        )
+                
+                with gr.Row():
+                    submit = gr.Button("发送", variant="primary")
+                    clear = gr.Button("清空对话")
+            
+            with gr.Column(scale=1):
+                # 设置面板
+                model = gr.Dropdown(
+                    label="选择模型",
+                    choices=["step-3", "step-r1-v-mini"],
+                    value="step-3"
+                )
+                
+                system_prompt = gr.Textbox(
+                    label="系统提示（可选）",
+                    placeholder="设置AI的角色或行为...",
+                    lines=3
+                )
+                
+                gr.Markdown("""
+                ### 说明
+                - **step-3**: 标准多模态模型
+                - **step-r1-v-mini**: 轻量级版本
+                
+                ### 提示
+                - 支持中英文对话
+                - 图片支持JPG/PNG格式
+                - 可以询问图片内容
+                """)
+        
+        # 事件绑定
+        submit.click(
+            fn=chat_with_stepfun,
+            inputs=[msg, img, chatbot, model, system_prompt],
+            outputs=[chatbot],
+            queue=True
+        ).then(
+            lambda: (None, None),
+            outputs=[msg, img]
         )
-        detail = gr.Dropdown(
-            label="图像细节",
-            choices=["high", "low", "auto"],
-            value=DEFAULT_DETAIL,
-            interactive=True,
+        
+        msg.submit(
+            fn=chat_with_stepfun,
+            inputs=[msg, img, chatbot, model, system_prompt],
+            outputs=[chatbot],
+            queue=True
+        ).then(
+            lambda: (None, None),
+            outputs=[msg, img]
         )
+        
+        clear.click(
+            fn=clear_chat,
+            outputs=[msg, img, chatbot]
+        )
+    
+    return demo
 
-    system_prompt = gr.Textbox(
-        label="系统提示（可选）",
-        placeholder="例如：你是一个美食专家，回答要简洁。",
-        lines=2,
-    )
-
-    chatbot = gr.Chatbot(height=420, show_label=False, type="tuples")
-
-    with gr.Row():
-        image = gr.Image(label="上传图片（可选）", type="pil")
-        user_text = gr.Textbox(label="你的问题", placeholder="描述你的问题……", lines=4)
-
-    with gr.Row():
-        submit = gr.Button("发送", variant="primary")
-        clear = gr.Button("清空对话")
-
-    # 清空
-    def _clear_chat():
-        return [], None, ""
-
-    clear.click(_clear_chat, outputs=[chatbot, image, user_text])
-
-    # 发送并流式生成
-    submit.click(
-        fn=stream_response,
-        inputs=[user_text, image, model, detail, system_prompt, chatbot],
-        outputs=[chatbot, user_text],
-    )
-
-
+# 主程序
 if __name__ == "__main__":
-    # 本地调试：python app.py
-    demo.launch(server_name="0.0.0.0", server_port=int(os.environ.get("PORT", 7860)), share=False)
+    demo = create_interface()
+    
+    # 获取端口
+    port = int(os.environ.get("PORT", 7860))
+    
+    # 启动应用
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=port,
+        share=False
+    )

requirements.txt

@@ -1,3 +1,3 @@
-openai==1.99.6
-gradio==4.36.1
-pillow==10.4.0
+gradio==3.50.2
+openai>=1.0.0
+Pillow>=9.0.0