Redesign interface similar to Qwen3-Demo with cleaner layout and better functionality

app.py

@@ -9,11 +9,10 @@ import re
 
 # 配置
 BASE_URL = "https://api.stepfun.com/v1"
-# 从环境变量获取API密钥
 STEP_API_KEY = os.environ.get("STEP_API_KEY", "")
 
 def image_to_base64(image):
-    """将PIL图像转换为base64字符串"""
+    """将图像转换为base64字符串"""
     if image is None:
         return None
     
@@ -23,275 +22,269 @@ def image_to_base64(image):
         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
 
-def extract_cot_and_answer(text):
-    """从响应中提取CoT推理过程和最终答案"""
-    # 匹配<reasoning>标签内的内容
-    reasoning_pattern = re.compile(r'<reasoning>(.*?)</reasoning>', re.DOTALL)
+def process_message(message, history, system_prompt, temperature, max_tokens, top_p):
+    """处理消息并生成响应"""
+    print(f"[DEBUG] Processing message: {message[:100] if message else 'None'}...")
     
-    match = reasoning_pattern.search(text)
-    if match:
-        cot = match.group(1).strip()
-        # 移除reasoning标签及其内容，得到最终答案
-        answer = reasoning_pattern.sub('', text).strip()
-        return cot, answer
-    else:
-        # 如果没有reasoning标签，整个响应就是答案
-        return "", text
-
-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 and not image:
-        print("[DEBUG] No message or image provided")
-        yield history, "", ""
+    if not message:
+        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 or "[Image]", error_msg])
-        yield history, "", ""
+        history.append([message, "❌ API key not configured. Please add STEP_API_KEY in Settings."])
+        yield history
         return
     
-    print(f"[DEBUG] API Key exists: {bool(STEP_API_KEY)}")
-    
-    # 处理消息和图片
-    display_message = message or ""
+    # 检查是否有图片（通过检查消息中是否有图片标签）
+    image_pattern = r'<img[^>]+src="([^">]+)"'
+    image_match = re.search(image_pattern, message)
     image_content = None
+    text_content = message
     
-    if image:
+    if image_match:
+        # 提取图片路径
+        image_path = image_match.group(1)
+        text_content = re.sub(image_pattern, '', message).strip()
+        
+        # 转换图片为base64
         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")
+            if image_path.startswith('data:'):
+                # 已经是base64格式
+                image_content = image_path.split(',')[1]
+            else:
+                image_content = image_to_base64(image_path)
         except Exception as e:
             print(f"[DEBUG] Failed to process image: {e}")
     
-    # 添加用户消息到历史
-    history.append([display_message, ""])
-    yield history, "", ""
+    # 添加到历史
+    history.append([message, ""])
+    yield history
     
-    # 构造API消息
+    # 构建API消息
     messages = []
     
-    # 添加历史对话（只保留文本，不包含标记）
-    for h in history[:-1]:  # 不包含当前消息
-        if h[0]:  # 用户消息
-            # 移除[Image uploaded]标记
-            user_text = h[0].replace("[Image uploaded] ", "").replace("[Image uploaded]", "")
+    # 添加系统提示词
+    if system_prompt:
+        messages.append({"role": "system", "content": system_prompt})
+    
+    # 添加历史对话
+    for h in history[:-1]:
+        if h[0]:
+            # 用户消息 - 移除图片标签
+            user_text = re.sub(r'<img[^>]+>', '', h[0]).strip()
             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 h[1] and not h[1].startswith("❌"):
+            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 message:
-            current_content.append({"type": "text", "text": message})
+        if text_content:
+            current_content.append({"type": "text", "text": text_content})
         messages.append({"role": "user", "content": current_content})
     else:
-        # 纯文本
-        if message:
-            messages.append({"role": "user", "content": message})
+        messages.append({"role": "user", "content": text_content})
     
-    print(f"[DEBUG] Messages count: {len(messages)}")
+    print(f"[DEBUG] Sending {len(messages)} messages to API")
     
-    # 创建客户端
+    # 创建客户端并调用API
     try:
         client = OpenAI(api_key=STEP_API_KEY, base_url=BASE_URL)
-        print("[DEBUG] Client created successfully")
-    except Exception as e:
-        print(f"[DEBUG] Client initialization failed: {e}")
-        history[-1][1] = f"❌ Client initialization failed: {str(e)}"
-        yield history, "", ""
-        return
-    
-    # 调用API
-    try:
-        print("[DEBUG] Calling API...")
+        
         response = client.chat.completions.create(
             model="step-3",
             messages=messages,
-            temperature=0.7,
-            max_tokens=2000,
+            temperature=temperature,
+            max_tokens=max_tokens,
+            top_p=top_p,
             stream=True
         )
-        print("[DEBUG] API call successful, processing stream...")
         
-        # 处理流式响应
+        # 流式输出
         full_response = ""
-        current_cot = ""
-        current_answer = ""
-        chunk_count = 0
-        
         for chunk in response:
-            chunk_count += 1
             if chunk.choices and len(chunk.choices) > 0:
                 delta = chunk.choices[0].delta
                 if hasattr(delta, 'content') and delta.content:
                     full_response += delta.content
-                    
-                    # 实时提取CoT和答案
-                    current_cot, current_answer = extract_cot_and_answer(full_response)
-                    
-                    # 更新历史中的回复
-                    if current_cot and current_answer:
-                        # 如果有CoT，显示完整格式
-                        history[-1][1] = f"💭 **Reasoning Process:**\n\n{current_cot}\n\n---\n\n📝 **Answer:**\n\n{current_answer}"
-                    elif current_cot:
-                        # 只有CoT，还没有答案
-                        history[-1][1] = f"💭 **Reasoning Process:**\n\n{current_cot}\n\n---\n\n📝 **Answer:**\n\n*Generating...*"
-                    else:
-                        # 没有CoT，直接显示答案
-                        history[-1][1] = current_answer
-                    
-                    if chunk_count % 5 == 0:  # 每5个chunk更新一次，减少更新频率
-                        print(f"[DEBUG] Processed {chunk_count} chunks")
-                    yield history, current_cot, current_answer
+                    history[-1][1] = full_response
+                    yield history
         
         if not full_response:
-            print("[DEBUG] No response content received")
             history[-1][1] = "⚠️ No response received from API"
-            yield history, "", ""
-        else:
-            print(f"[DEBUG] Final response length: {len(full_response)} chars")
-            # 最终更新
-            yield history, current_cot, current_answer
-                    
+            yield history
+            
     except Exception as e:
-        print(f"[DEBUG] API request failed: {e}")
-        import traceback
-        traceback.print_exc()
-        history[-1][1] = f"❌ API request failed: {str(e)}"
-        yield history, "", ""
-
-def clear_all():
-    """Clear all components"""
-    return [], None, "", "", ""
+        print(f"[DEBUG] API error: {e}")
+        history[-1][1] = f"❌ Error: {str(e)}"
+        yield history
 
 # 创建Gradio界面
-with gr.Blocks(title="Step-3", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="Step-3 Chat", theme=gr.themes.Soft()) as demo:
     gr.Markdown("""
-    # 🤖 Step-3
-    Hello, I am Step-3! 
+    # 🤖 Step-3 Chat
+    
+    Welcome to Step-3, an advanced multimodal AI assistant by StepFun.
     """)
     
     with gr.Row():
-        with gr.Column(scale=2):
-            # 对话界面
+        with gr.Column(scale=3):
+            # 聊天界面
             chatbot = gr.Chatbot(
-                height=500,
+                height=600,
                 show_label=False,
                 elem_id="chatbot",
-                bubble_full_width=False
+                bubble_full_width=False,
+                avatar_images=None,
+                render_markdown=True
             )
             
+            # 输入区域
             with gr.Row():
-                with gr.Column(scale=6):
-                    # 文本输入框
+                with gr.Column(scale=10):
                     msg = gr.Textbox(
-                        placeholder="Type your message here...",
-                        show_label=False,
+                        label="Message",
+                        placeholder="Type your message here... (You can drag and drop images)",
                         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
+                        max_lines=10,
+                        show_label=False,
+                        elem_id="message-textbox"
                     )
-                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, min_width=100):
+                    submit_btn = gr.Button("Send", variant="primary")
+            
+            # 底部按钮
+            with gr.Row():
+                clear_btn = gr.Button("🗑️ Clear", scale=1)
+                undo_btn = gr.Button("↩️ Undo", scale=1)
+                retry_btn = gr.Button("🔄 Retry", scale=1)
         
         with gr.Column(scale=1):
-            # CoT推理过程展示
-            gr.Markdown("### 💭 Chain of Thought")
-            cot_display = gr.Textbox(
-                label="Reasoning Process",
-                lines=10,
-                max_lines=15,
-                show_label=False,
-                interactive=False,
-                show_copy_button=True
-            )
+            # 设置面板
+            with gr.Accordion("⚙️ Settings", open=True):
+                system_prompt = gr.Textbox(
+                    label="System Prompt",
+                    placeholder="You are a helpful assistant...",
+                    lines=3,
+                    value="You are Step-3, a helpful AI assistant created by StepFun."
+                )
+                
+                temperature = gr.Slider(
+                    minimum=0,
+                    maximum=2,
+                    value=0.7,
+                    step=0.1,
+                    label="Temperature"
+                )
+                
+                max_tokens = gr.Slider(
+                    minimum=1,
+                    maximum=4096,
+                    value=2048,
+                    step=1,
+                    label="Max Tokens"
+                )
+                
+                top_p = gr.Slider(
+                    minimum=0,
+                    maximum=1,
+                    value=0.95,
+                    step=0.01,
+                    label="Top P"
+                )
             
-            gr.Markdown("### 📝 Final Answer")
-            answer_display = gr.Textbox(
-                label="Answer",
-                lines=10,
-                max_lines=15,
-                show_label=False,
-                interactive=False,
-                show_copy_button=True
-            )
+            # 示例
+            with gr.Accordion("📝 Examples", open=False):
+                gr.Examples(
+                    examples=[
+                        ["What is machine learning?"],
+                        ["Write a Python function to calculate fibonacci numbers"],
+                        ["Explain quantum computing in simple terms"],
+                        ["What are the benefits of renewable energy?"],
+                        ["How does blockchain technology work?"]
+                    ],
+                    inputs=msg,
+                    label=""
+                )
     
     # 事件处理
-    def on_submit(message, history, image):
-        if message or image:
-            return "", history, None
-        return message, history, image
+    def user_submit(message, history):
+        return "", history
+    
+    def undo_last(history):
+        if history:
+            return history[:-1]
+        return history
+    
+    def retry_last(history):
+        if history and history[-1][0]:
+            last_message = history[-1][0]
+            return history[:-1], last_message
+        return history, ""
     
     # 提交消息
     msg.submit(
-        on_submit,
-        [msg, chatbot, image_input],
-        [msg, chatbot, image_input],
+        user_submit,
+        [msg, chatbot],
+        [msg, chatbot],
         queue=False
     ).then(
-        call_step_api_stream,
-        [msg, chatbot, image_input],
-        [chatbot, cot_display, answer_display]
+        process_message,
+        [msg, chatbot, system_prompt, temperature, max_tokens, top_p],
+        chatbot
     )
     
-    send_btn.click(
-        on_submit,
-        [msg, chatbot, image_input],
-        [msg, chatbot, image_input],
+    submit_btn.click(
+        user_submit,
+        [msg, chatbot],
+        [msg, chatbot],
         queue=False
     ).then(
-        call_step_api_stream,
-        [msg, chatbot, image_input],
-        [chatbot, cot_display, answer_display]
+        process_message,
+        [msg, chatbot, system_prompt, temperature, max_tokens, top_p],
+        chatbot
     )
     
+    # 清空对话
     clear_btn.click(
-        clear_all,
+        lambda: ([], ""),
         None,
-        [chatbot, image_input, msg, cot_display, answer_display]
+        [chatbot, msg]
+    )
+    
+    # 撤销最后一条
+    undo_btn.click(
+        undo_last,
+        chatbot,
+        chatbot
+    )
+    
+    # 重试最后一条
+    retry_btn.click(
+        retry_last,
+        chatbot,
+        [chatbot, msg]
+    ).then(
+        process_message,
+        [msg, chatbot, system_prompt, temperature, max_tokens, top_p],
+        chatbot
     )
     
     # 页脚
     gr.Markdown("""
     ---
-    <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 style="text-align: center; color: #666;">
+        <p>Powered by <a href="https://www.stepfun.com/" target="_blank" style="color: #0969da;">StepFun</a> | 
+        Model: Step-3 | 
+        <a href="https://github.com/stepfun-ai" target="_blank" style="color: #0969da;">GitHub</a></p>
     </div>
     """)
 
@@ -299,10 +292,12 @@ with gr.Blocks(title="Step-3", theme=gr.themes.Soft()) as demo:
 if __name__ == "__main__":
     print(f"[DEBUG] Starting app with API key: {'Set' if STEP_API_KEY else 'Not set'}")
     print(f"[DEBUG] Base URL: {BASE_URL}")
-    demo.queue(max_size=10)
+    
+    demo.queue(max_size=20)
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
         share=False,
-        debug=False
+        debug=False,
+        show_error=True
     )