改造为多轮对话聊天机器人界面，添加StepFun logo

app.py

@@ -27,211 +27,221 @@ def image_to_base64(image):
     
     return None
 
-def call_step_api(image, prompt, model, temperature=0.7, max_tokens=2000):
-    """调用Step API进行分析，支持纯文本和图像+文本"""
+def call_step_api_stream(message, history, model, temperature, max_tokens, image=None):
+    """调用Step API进行流式对话"""
     
-    if not prompt:
-        yield "", "❌ 请输入提示词"
+    if not message and not image:
+        yield history
         return
     
     if not STEP_API_KEY:
-        yield "", "❌ API密钥未配置。请在 Hugging Face Space 的 Settings 中添加 STEP_API_KEY 环境变量。"
+        history.append([message or "图片", "❌ API密钥未配置。请在 Settings 中添加 STEP_API_KEY。"])
+        yield history
         return
     
-    # 构造消息内容 - 参考官方示例
+    # 构造消息历史
+    messages = []
+    
+    # 添加历史对话
+    for h in history:
+        if h[0]:  # 用户消息
+            messages.append({"role": "user", "content": h[0]})
+        if h[1]:  # 助手回复
+            messages.append({"role": "assistant", "content": h[1]})
+    
+    # 构造当前消息
     if image is not None:
         # 有图片的情况
         try:
             base64_image = image_to_base64(image)
             if base64_image is None:
-                yield "", "❌ 图片处理失败"
+                history.append([message or "图片", "❌ 图片处理失败"])
+                yield history
                 return
             
-            # 按照官方示例的格式构造消息
-            messages = [
-                {"role": "user", "content": [
-                    {"type": "image_url", "image_url": {"url": f"data:image/jpg;base64,{base64_image}", "detail": "high"}},
-                    {"type": "text", "text": prompt}
-                ]}
+            current_content = [
+                {"type": "image_url", "image_url": {"url": f"data:image/jpg;base64,{base64_image}", "detail": "high"}}
             ]
+            if message:
+                current_content.append({"type": "text", "text": message})
+            
+            messages.append({"role": "user", "content": current_content})
+            display_message = f"[图片] {message}" if message else "[图片]"
         except Exception as e:
-            yield "", f"❌ 图片处理错误: {str(e)}"
+            history.append([message or "图片", f"❌ 图片处理错误: {str(e)}"])
+            yield history
             return
     else:
-        # 纯文本的情况
-        messages = [
-            {"role": "user", "content": prompt}
-        ]
+        # 纯文本
+        messages.append({"role": "user", "content": message})
+        display_message = message
+    
+    # 添加到历史记录
+    history.append([display_message, ""])
     
-    # 创建OpenAI客户端 - 完全按照官方示例
+    # 创建客户端
     try:
         client = OpenAI(api_key=STEP_API_KEY, base_url=BASE_URL)
     except Exception as e:
-        yield "", f"❌ 客户端初始化失败: {str(e)}"
+        history[-1][1] = f"❌ 客户端初始化失败: {str(e)}"
+        yield history
         return
     
-    # 记录开始时间
-    start_time = time.time()
-    
+    # 调用API
     try:
-        # 调用API - 按照官方示例
         response = client.chat.completions.create(
             model=model,
             messages=messages,
+            temperature=temperature,
+            max_tokens=max_tokens,
             stream=True
         )
-    except Exception as e:
-        yield "", f"❌ API请求失败: {str(e)}"
-        return
-    
-    # 处理流式响应
-    full_response = ""
-    reasoning_content = ""
-    final_answer = ""
-    is_reasoning = False
-    reasoning_started = False
-    
-    try:
+        
+        # 处理流式响应
+        full_response = ""
         for chunk in response:
-            # 按照官方示例处理chunk
             if chunk.choices and len(chunk.choices) > 0:
                 delta = chunk.choices[0].delta
-                
                 if hasattr(delta, 'content') and delta.content:
-                    content = delta.content
-                    full_response += content
-                    
-                    # 检测reasoning标记
-                    if "<reasoning>" in content:
-                        is_reasoning = True
-                        reasoning_started = True
-                        # 处理标记前后的内容
-                        parts = content.split("<reasoning>")
-                        if parts[0]:
-                            final_answer += parts[0]
-                        if len(parts) > 1:
-                            reasoning_content += parts[1]
-                    elif "</reasoning>" in content:
-                        # 处理结束标记
-                        parts = content.split("</reasoning>")
-                        if parts[0]:
-                            reasoning_content += parts[0]
-                        is_reasoning = False
-                        if len(parts) > 1:
-                            final_answer += parts[1]
-                    elif is_reasoning:
-                        reasoning_content += content
-                    else:
-                        final_answer += content
+                    full_response += delta.content
+                    history[-1][1] = full_response
+                    yield history
                     
-                    # 实时输出
-                    yield reasoning_content, final_answer
-    
     except Exception as e:
-        yield reasoning_content, final_answer + f"\n\n❌ 流处理错误: {str(e)}"
-        return
-    
-    # 添加生成时间
-    elapsed_time = time.time() - start_time
-    time_info = f"\n\n⏱️ 生成用时: {elapsed_time:.2f}秒"
-    final_answer += time_info
-    
-    yield reasoning_content, final_answer
+        history[-1][1] = f"❌ API请求失败: {str(e)}"
+        yield history
+
+def user_input(message, history, image):
+    """处理用户输入"""
+    if message or image:
+        return "", history, None
+    return message, history, image
+
+def clear_history():
+    """清空对话历史"""
+    return [], None, ""
 
 # 创建Gradio界面
 with gr.Blocks(title="Step-3", theme=gr.themes.Soft()) as demo:
     gr.Markdown("""
     # 🤖 Step-3
+    Hello, I am Step-3! 
     """)
     
     with gr.Row():
-        with gr.Column(scale=1):
-            # 输入区域
-            image_input = gr.Image(
-                label="上传图片（可选）",
-                type="pil",
-                height=300
+        with gr.Column(scale=3):
+            # 对话界面
+            chatbot = gr.Chatbot(
+                height=500,
+                show_label=False,
+                elem_id="chatbot",
+                bubble_full_width=False,
+                avatar_images=(None, "🤖")
             )
             
-            prompt_input = gr.Textbox(
-                label="提示词",
-                placeholder="输入你的问题或描述...",
-                lines=3,
-                value=""
-            )
+            with gr.Row():
+                with gr.Column(scale=8):
+                    msg = gr.Textbox(
+                        label="输入消息",
+                        placeholder="输入你的问题...",
+                        lines=1,
+                        max_lines=5,
+                        show_label=False,
+                        elem_id="msg",
+                        container=False
+                    )
+                with gr.Column(scale=1, min_width=100):
+                    submit_btn = gr.Button("发送", variant="primary")
+                with gr.Column(scale=1, min_width=100):
+                    clear_btn = gr.Button("清空对话")
             
-            with gr.Accordion("高级设置", open=False):
-                model_select = gr.Dropdown(
-                    choices=MODELS,
-                    value=MODELS[0],
-                    label="选择模型"
-                )
-                
-                temperature_slider = gr.Slider(
-                    minimum=0,
-                    maximum=1,
-                    value=0.7,
-                    step=0.1,
-                    label="Temperature"
+            # 图片上传
+            with gr.Row():
+                image_input = gr.Image(
+                    label="上传图片（可选）",
+                    type="pil",
+                    height=150,
+                    scale=1
                 )
-                
-                max_tokens_slider = gr.Slider(
-                    minimum=100,
-                    maximum=4000,
-                    value=2000,
-                    step=100,
-                    label="最大输出长度"
-                )
-            
-            submit_btn = gr.Button("🚀 开始分析", variant="primary")
-            clear_btn = gr.Button("🗑️ 清空", variant="secondary")
         
         with gr.Column(scale=1):
-            # 推理过程展示
-            with gr.Accordion("💭 推理过程 (CoT)", open=True):
-                reasoning_output = gr.Textbox(
-                    label="思考过程",
-                    lines=10,
-                    max_lines=15,
-                    show_copy_button=True,
-                    interactive=False
-                )
+            # 设置面板
+            gr.Markdown("### ⚙️ 设置")
+            
+            model_select = gr.Dropdown(
+                choices=MODELS,
+                value=MODELS[0],
+                label="模型选择",
+                interactive=True
+            )
             
-            # 最终答案展示
-            answer_output = gr.Textbox(
-                label="📝 分析结果",
-                lines=15,
-                max_lines=25,
-                show_copy_button=True,
-                interactive=False
+            temperature_slider = gr.Slider(
+                minimum=0,
+                maximum=1,
+                value=0.7,
+                step=0.1,
+                label="Temperature",
+                interactive=True
             )
+            
+            max_tokens_slider = gr.Slider(
+                minimum=100,
+                maximum=4000,
+                value=2000,
+                step=100,
+                label="最大输出长度",
+                interactive=True
+            )
+            
+            gr.Markdown("""
+            ### 📝 使用说明
+            - 支持多轮对话
+            - 可上传图片进行分析
+            - 支持纯文本对话
+            - 历史记录会保留上下文
+            """)
+    
+    # 事件处理
+    msg.submit(
+        user_input,
+        [msg, chatbot, image_input],
+        [msg, chatbot, image_input],
+        queue=False
+    ).then(
+        call_step_api_stream,
+        [msg, chatbot, model_select, temperature_slider, max_tokens_slider, image_input],
+        chatbot
+    )
     
-    # 事件处理 - 流式输出到两个文本框
     submit_btn.click(
-        fn=call_step_api,
-        inputs=[
-            image_input,
-            prompt_input,
-            model_select,
-            temperature_slider,
-            max_tokens_slider
-        ],
-        outputs=[reasoning_output, answer_output],
-        show_progress=True
+        user_input,
+        [msg, chatbot, image_input],
+        [msg, chatbot, image_input],
+        queue=False
+    ).then(
+        call_step_api_stream,
+        [msg, chatbot, model_select, temperature_slider, max_tokens_slider, image_input],
+        chatbot
     )
     
     clear_btn.click(
-        fn=lambda: (None, "", "", ""),
-        inputs=[],
-        outputs=[image_input, prompt_input, reasoning_output, answer_output]
+        clear_history,
+        None,
+        [chatbot, image_input, msg],
+        queue=False
     )
     
     # 页脚
     gr.Markdown("""
     ---
-    Powered by [Step-3](https://www.stepfun.com/)
+    <div style="text-align: center;">
+        <img src="https://huggingface.co/stepfun-ai/step3/resolve/main/figures/stepfun-logo.png" alt="StepFun Logo" style="height: 40px; margin: 10px;">
+        <br>
+        Powered by <a href="https://www.stepfun.com/" target="_blank">StepFun</a>
+    </div>
     """)
 
 # 启动应用
 if __name__ == "__main__":
+    demo.queue()
     demo.launch()