Update app.py

app.py

@@ -225,153 +225,9 @@ def generate_response_stream(
 def create_demo():
     """Create the Gradio interface"""
     
-    # Custom CSS
-    custom_css = """
-    :root {
-        --primary: #667eea;
-        --secondary: #764ba2;
-    }
-    
-    .deepseek-header {
-        text-align: center;
-        margin-bottom: 20px;
-        padding: 30px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 16px;
-        color: white;
-    }
-    
-    .deepseek-header h1 {
-        font-size: 2.8em;
-        font-weight: 800;
-        margin: 0;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
-    }
-    
-    .deepseek-header p {
-        font-size: 1.2em;
-        opacity: 0.95;
-        margin: 10px 0 0 0;
-    }
-    
-    .model-info {
-        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-        padding: 20px;
-        border-radius: 12px;
-        margin-bottom: 20px;
-        border: 1px solid #e0e0e0;
-    }
-    
-    .benchmark-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 12px;
-        margin: 15px 0;
-    }
-    
-    .benchmark-item {
-        background: white;
-        padding: 12px;
-        border-radius: 8px;
-        text-align: center;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        transition: transform 0.2s;
-    }
-    
-    .benchmark-item:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-    }
-    
-    .benchmark-item .value {
-        font-size: 1.5em;
-        font-weight: 700;
-        color: #667eea;
-    }
-    
-    .benchmark-item .label {
-        font-size: 0.85em;
-        color: #666;
-        margin-top: 4px;
-    }
-    
-    .chat-container {
-        border: 1px solid #e0e0e0;
-        border-radius: 12px;
-        overflow: hidden;
-    }
-    
-    .thinking-box {
-        background: #f8f9fa;
-        border-left: 4px solid #667eea;
-        padding: 15px;
-        margin: 10px 0;
-        border-radius: 8px;
-        font-style: italic;
-        color: #555;
-    }
-    
-    .thinking-box::before {
-        content: "🧠 Thinking Process";
-        display: block;
-        font-weight: 600;
-        color: #667eea;
-        margin-bottom: 8px;
-    }
-    
-    .response-box {
-        background: white;
-        padding: 15px;
-        border-radius: 8px;
-        line-height: 1.6;
-    }
-    
-    .status-bar {
-        padding: 10px;
-        background: #f5f5f5;
-        border-radius: 8px;
-        font-family: monospace;
-        font-size: 0.9em;
-    }
-    
-    .mode-indicator {
-        display: inline-block;
-        padding: 4px 12px;
-        border-radius: 20px;
-        font-size: 0.85em;
-        font-weight: 600;
-        margin-right: 8px;
-    }
-    
-    .mode-non-think {
-        background: #e3f2fd;
-        color: #1976d2;
-    }
-    
-    .mode-think-high {
-        background: #f3e5f5;
-        color: #7b1fa2;
-    }
-    
-    .mode-think-max {
-        background: #fce4ec;
-        color: #c62828;
-    }
-    
-    .api-key-warning {
-        background: #fff3cd;
-        border: 1px solid #ffc107;
-        color: #856404;
-        padding: 15px;
-        border-radius: 8px;
-        margin: 10px 0;
-    }
-    """
-    
+    # Use gr.Blocks without theme and css (moved to launch)
     with gr.Blocks(
         title="DeepSeek-V4 Pro - API Demo",
-        theme=gr.themes.Soft(),
-        css=custom_css,
         analytics_enabled=False
     ) as demo:
         
@@ -518,21 +374,16 @@ def create_demo():
             
             # Right - Chat Interface
             with gr.Column(scale=2):
-                # Chatbot
+                # Chatbot - Gradio 6.0 compatible
                 chatbot = gr.Chatbot(
                     label="💬 Chat with DeepSeek-V4 Pro",
                     height=550,
-                    show_copy_button=True,
                     bubble_full_width=False,
-                    avatar_images=(
-                        "https://api.dicebear.com/7.x/bottts/svg?seed=user&backgroundColor=667eea",
-                        "https://api.dicebear.com/7.x/bottts/svg?seed=assistant&backgroundColor=764ba2"
-                    ),
-                    layout="panel"
+                    type="messages"
                 )
                 
                 # Thinking process display
-                with gr.Accordion("🧠 Thinking Process", open=True, visible=True):
+                with gr.Accordion("🧠 Thinking Process", open=True):
                     thinking_display = gr.Markdown(
                         value="*The model's reasoning will appear here...*",
                         elem_classes="thinking-box"
@@ -558,7 +409,6 @@ def create_demo():
                 # Control buttons
                 with gr.Row():
                     clear_btn = gr.Button("🗑️ Clear Chat", size="sm")
-                    stop_btn = gr.Button("⏹️ Stop", size="sm", variant="stop", visible=False)
                     retry_btn = gr.Button("🔄 Retry", size="sm", variant="secondary")
                 
                 # Status bar
@@ -591,7 +441,7 @@ def create_demo():
         
         def process_message(
             message: str,
-            history: List[Tuple[str, str]],
+            history: list,
             thinking_mode: str,
             show_thinking: bool,
             system_prompt: str,
@@ -602,35 +452,61 @@ def create_demo():
         ):
             """Process message with streaming or non-streaming mode"""
             if not message.strip():
-                return message, history, "", "Please enter a message."
+                yield message, history, "", "Please enter a message."
+                return
             
             # Check API key
             if not os.environ.get('DEEPSEEK_API_KEY'):
-                return (
-                    message,
-                    history + [(message, "⚠️ **API Key Missing**\n\nPlease set your `DEEPSEEK_API_KEY` environment variable.\nGet one at: https://platform.deepseek.com/api_keys")],
-                    "",
-                    "❌ API Key not configured"
-                )
+                error_msg = "⚠️ **API Key Missing**\n\nPlease set your `DEEPSEEK_API_KEY` environment variable.\nGet one at: https://platform.deepseek.com/api_keys"
+                if history is None:
+                    history = []
+                history.append({"role": "user", "content": message})
+                history.append({"role": "assistant", "content": error_msg})
+                yield "", history, "", "❌ API Key not configured"
+                return
             
             if stream_output:
                 # Use streaming
+                # Convert history format for internal use
+                internal_history = []
+                if history:
+                    for i in range(0, len(history), 2):
+                        if i + 1 < len(history):
+                            internal_history.append((history[i]["content"], history[i+1]["content"]))
+                
                 for msg, hist, content, thinking, status in generate_response_stream(
-                    message, history, thinking_mode, max_tokens,
+                    message, internal_history, thinking_mode, max_tokens,
                     temperature, top_p, system_prompt, show_thinking
                 ):
-                    yield msg, hist, thinking, status
+                    # Convert hist back to Gradio format
+                    gr_history = []
+                    for user_msg, assistant_msg in hist:
+                        gr_history.append({"role": "user", "content": user_msg})
+                        gr_history.append({"role": "assistant", "content": assistant_msg})
+                    yield msg, gr_history, thinking, status
             else:
                 # Use non-streaming
+                internal_history = []
+                if history:
+                    for i in range(0, len(history), 2):
+                        if i + 1 < len(history):
+                            internal_history.append((history[i]["content"], history[i+1]["content"]))
+                
                 result = generate_response(
-                    message, history, thinking_mode, max_tokens,
+                    message, internal_history, thinking_mode, max_tokens,
                     temperature, top_p, system_prompt, show_thinking
                 )
                 msg, hist, content, thinking, status = result
-                yield msg, hist, thinking, status
+                
+                gr_history = []
+                for user_msg, assistant_msg in hist:
+                    gr_history.append({"role": "user", "content": user_msg})
+                    gr_history.append({"role": "assistant", "content": assistant_msg})
+                
+                yield msg, gr_history, thinking, status
         
         # Wire up send button
-        send_event = send_btn.click(
+        send_btn.click(
             fn=process_message,
             inputs=[
                 message_input, chatbot, thinking_mode, show_thinking,
@@ -641,7 +517,7 @@ def create_demo():
         )
         
         # Wire up Enter key
-        enter_event = message_input.submit(
+        message_input.submit(
             fn=process_message,
             inputs=[
                 message_input, chatbot, thinking_mode, show_thinking,
@@ -666,32 +542,30 @@ def create_demo():
         
         # Retry last message
         def retry_last(history):
-            if not history:
-                return history, "No message to retry."
-            last_message = history[-1][0]
-            history = history[:-1]
-            return history, last_message
+            if not history or len(history) < 2:
+                return history, ""
+            # Remove last assistant message, keep last user message
+            last_user_msg = history[-2]["content"] if len(history) >= 2 else ""
+            new_history = history[:-2] if len(history) >= 2 else []
+            return new_history, last_user_msg
         
         retry_btn.click(
             fn=retry_last,
             inputs=[chatbot],
             outputs=[chatbot, message_input]
         )
-        
-        # Mode change indicator
-        def update_mode_indicator(mode):
-            mode_classes = {
-                "Non-think": "mode-non-think",
-                "Think High": "mode-think-high",
-                "Think Max": "mode-think-max"
-            }
-            class_name = mode_classes.get(mode, "")
-            return f'<span class="mode-indicator {class_name}">{mode}</span>'
     
     return demo
 
 # ==================== Main ====================
 if __name__ == "__main__":
+    # Try to load .env file
+    try:
+        from dotenv import load_dotenv
+        load_dotenv()
+    except ImportError:
+        pass
+    
     # Check environment
     api_key = os.environ.get('DEEPSEEK_API_KEY')
     if not api_key:
@@ -706,11 +580,101 @@ if __name__ == "__main__":
         print('   echo DEEPSEEK_API_KEY=your-key-here > .env')
         print("\n" + "=" * 60 + "\n")
     
-    # Create and launch demo
+    # Create demo
     demo = create_demo()
+    
+    # Custom CSS
+    custom_css = """
+    :root {
+        --primary: #667eea;
+        --secondary: #764ba2;
+    }
+    
+    .deepseek-header {
+        text-align: center;
+        margin-bottom: 20px;
+        padding: 30px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 16px;
+        color: white;
+    }
+    
+    .deepseek-header h1 {
+        font-size: 2.8em;
+        font-weight: 800;
+        margin: 0;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+    }
+    
+    .deepseek-header p {
+        font-size: 1.2em;
+        opacity: 0.95;
+        margin: 10px 0 0 0;
+    }
+    
+    .model-info {
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        padding: 20px;
+        border-radius: 12px;
+        margin-bottom: 20px;
+        border: 1px solid #e0e0e0;
+    }
+    
+    .benchmark-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 12px;
+        margin: 15px 0;
+    }
+    
+    .benchmark-item {
+        background: white;
+        padding: 12px;
+        border-radius: 8px;
+        text-align: center;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        transition: transform 0.2s;
+    }
+    
+    .benchmark-item:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    }
+    
+    .benchmark-item .value {
+        font-size: 1.5em;
+        font-weight: 700;
+        color: #667eea;
+    }
+    
+    .benchmark-item .label {
+        font-size: 0.85em;
+        color: #666;
+        margin-top: 4px;
+    }
+    
+    .thinking-box {
+        background: #f8f9fa;
+        border-left: 4px solid #667eea;
+        padding: 15px;
+        margin: 10px 0;
+        border-radius: 8px;
+        font-style: italic;
+        color: #555;
+    }
+    
+    .status-bar {
+        padding: 10px;
+        background: #f5f5f5;
+        border-radius: 8px;
+        font-family: monospace;
+        font-size: 0.9em;
+    }
+    """
+    
+    # Launch with Gradio 6.0 compatible parameters
     demo.queue(
         max_size=50,
-        concurrency_count=10,
         default_concurrency_limit=10
     ).launch(
         server_name="0.0.0.0",
@@ -718,5 +682,6 @@ if __name__ == "__main__":
         share=False,
         debug=False,
         show_error=True,
-        favicon_path=None
+        theme=gr.themes.Soft(),
+        css=custom_css
     )