Update app.py

app.py

@@ -1,18 +1,50 @@
-from run import create_agent, run_agent_with_streaming
+import base64
 import gradio as gr
+import json
+import mimetypes # Used in MiniMax template for base64 encoding, though not directly in my code for now
 import os
-import threading
+import requests # MiniMax template uses requests for its API calls
 import time
-import base64
 import re # For regex to extract code blocks
-
+import threading # For running agent asynchronously
+
+# Import modelscope_studio components
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro # pro.Chatbot etc.
+from modelscope_studio.components.pro.chatbot import (
+    ChatbotActionConfig, ChatbotBotConfig, ChatbotMarkdownConfig,
+    ChatbotPromptsConfig, ChatbotUserConfig, ChatbotWelcomeConfig
+)
+
+# Your existing smolagents imports
+from run import create_agent, run_agent_with_streaming
 from dotenv import load_dotenv
 
 load_dotenv()
 CONFIG_FILE = ".user_config.env"
 
-# --- Constants and Helper Functions for Code Playground ---
-# This is a simplified version of SystemPrompt, adapt as needed for your smolagents.CodeAgent
+# --- Constants and Helper Functions from MiniMaxAI template ---
+# (Adapt paths and values as per your project structure)
+
+# Dummy EXAMPLES and DEFAULT_PROMPTS for the Code Playground (replace with your actual data)
+EXAMPLES = {
+    "UI Components": [
+        {"title": "Simple Button", "description": "Generate a simple HTML button with hover effect."},
+        {"title": "Responsive Nav Bar", "description": "Create a responsive navigation bar using HTML and CSS."},
+    ],
+    "Games & Visualizations": [
+        {"title": "Maze Generator and Pathfinding Visualizer", "description": "Create a maze generator and pathfinding visualizer. Randomly generate a maze and visualize A* algorithm solving it step by step. Use canvas and animations. Make it visually appealing."},
+        {"title": "Particle Explosion Effect", "description": "Implement a particle explosion effect when the user clicks anywhere on the page."},
+    ],
+    "Interactive Apps": [
+        {"title": "Typing Speed Game", "description": "Build a typing speed test web app. Randomly show a sentence, and track the user's typing speed in WPM (words per minute). Provide live feedback with colors and accuracy."},
+        {"title": "Simple Calculator", "description": "Generate a basic four-function calculator with a user-friendly interface."},
+    ],
+}
+
+# The SYSTEM_PROMPT for code generation, now as a constant
 SYSTEM_PROMPT_CODE_GEN = """
 You are an expert web developer. Your task is to write a complete, single HTML file
 (including all necessary CSS and JavaScript within <style> and <script> tags, or as data URIs for images if any)
@@ -26,13 +58,15 @@ that directly solves the user's request.
 - Provide a brief reasoning *before* the code block, explaining your approach.
 """
 
-def save_env_vars_to_file(env_vars):
-    print("[DEBUG] Saving user config to file")
-    with open(CONFIG_FILE, "w") as f:
-        for key, value in env_vars.items():
-            f.write(f"{key}={value}\n")
+# Dummy DEFAULT_PROMPTS for the Chatbot (if your chatbot uses them)
+DEFAULT_PROMPTS = [
+    {"description": "What is the capital of France?"},
+    {"description": "Explain quantum entanglement in simple terms."},
+    {"description": "Write a short story about a brave knight."},
+]
 
-# --- Helper for Code Playground ---
+
+# --- Helper Functions from MiniMaxAI Template (adapted for your app) ---
 def remove_code_block(text):
     """
     Extracts the content of the first Markdown code block (```html ... ``` or ``` ... ```)
@@ -112,10 +146,216 @@ def send_to_sandbox(code):
     print("[DEBUG] Generated iframe for sandbox.")
     return iframe_html
 
+def select_example(example_state):
+    """Function to set the input textbox value from an example card."""
+    # Assuming example_state is a dictionary with a 'description' key
+    return gr.update(value=example_state.get("description", ""))
+
+
+# --- Your existing save_env_vars_to_file (from your original code) ---
+def save_env_vars_to_file(env_vars):
+    print("[DEBUG] Saving user config to file")
+    with open(CONFIG_FILE, "w") as f:
+        for key, value in env_vars.items():
+            f.write(f"{key}={value}\n")
+
+# --- CSS from MiniMaxAI template ---
+CUSTOM_CSS = """
+/* Add styles for the main container */
+.ant-tabs-content {
+  height: calc(100vh - 200px);
+  overflow: hidden;
+}
+.ant-tabs-tabpane {
+  height: 100%;
+  overflow-y: auto;
+}
+/* Modify existing styles */
+.output-empty,.output-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 680px;
+  position: relative;
+}
+.output-html {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 680px;
+}
+.output-html > iframe {
+  flex: 1;
+}
+.right_content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: unset;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+/* Add styles for the code playground container */
+.code-playground-container {
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+.code-playground-container::-webkit-scrollbar {
+  width: 6px;
+}
+.code-playground-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+.code-playground-container::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 3px;
+}
+.code-playground-container::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+.render_header {
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  background: #f5f5f5;
+  border-bottom: 1px solid #e8e8e8;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+.header_btn {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 8px;
+  display: inline-block;
+}
+.header_btn:nth-child(1) {
+  background: #ff5f56;
+}
+.header_btn:nth-child(2) {
+  background: #ffbd2e;
+}
+.header_btn:nth-child(3) {
+  background: #27c93f;
+}
+.output-html > iframe {
+  flex: 1;
+  border: none;
+  background: #fff;
+}
+.reasoning-box {
+  max-height: 300px;
+  overflow-y: auto;
+  border-radius: 4px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  width: 100%;
+  scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.reasoning-box .ms-markdown { /* Targeting markdown within the box for modelscope */
+  padding: 0 12px;
+} 
+.reasoning-box::-webkit-scrollbar {
+  width: 6px;
+}
+.reasoning-box::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+.reasoning-box::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 3px;
+}
+.reasoning-box::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+.markdown-container {
+  max-height: 300px;
+  overflow-y: auto;
+  border-radius: 4px;
+  font-family: -apple-system, BlinkMacMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  width: 100%;
+  scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column-reverse;
+}
+/* Example card styles */
+.example-card {
+  flex: 1 1 calc(50% - 20px);
+  max-width: calc(50% - 20px);
+  margin: 6px;
+  transition: all 0.3s;
+  cursor: pointer;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+.example-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  border-color: #d9d9d9;
+}
+.example-card .ant-card-meta-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #262626;
+}
+.example-card .ant-card-meta-description {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.5;
+}
+/* Example tabs styles */
+.example-tabs .ant-tabs-nav {
+  margin-bottom: 16px;
+}
+.example-tabs .ant-tabs-tab {
+  padding: 8px 16px;
+  font-size: 15px;
+}
+.example-tabs .ant-tabs-tab-active {
+  font-weight: 500;
+}
+/* Empty state styles */
+/* Corrected to match the target's `.right_content` for empty state */
+.right_content .output-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 620px; /* Adjusted to match original */
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+/* Add styles for the example cards container */
+.example-tabs .ant-tabs-content {
+  padding: 0 8px;
+}
+.example-tabs .ant-flex {
+  margin: 0 -8px;
+  width: calc(100% + 16px);
+}
+"""
 
 # --- Main Gradio Interface Launch Function ---
 def launch_interface():
-    # --- Chatbot Tab Logic ---
+    # --- Chatbot Tab Logic (Your existing logic, using gr.gr components) ---
     def setup_agent_streaming(question, model_id, hf_token, openai_api_key, serpapi_key, api_endpoint, use_custom_endpoint,
                               custom_api_endpoint, custom_api_key, search_provider, search_api_key, custom_search_url):
         print("[DEBUG] Setting up agent with input question:", question)
@@ -164,7 +404,6 @@ def launch_interface():
                 return f"<p><span style='color:#f59e0b;font-weight:bold;'>[STEP]</span> {text.strip()}</p>"
             elif text.strip():
                 # Wrap regular steps in details tag for collapsing
-                # Ensure each line is its own <pre> or paragraph if preferred, for distinct updates
                 return f"<details><summary><span style='color:#f59e0b;'>Step</span></summary>\n<pre>{text.strip()}</pre>\n</details>"
             return ""
 
@@ -196,31 +435,32 @@ def launch_interface():
                 # Join only the new content, or the entire buffer for cumulative display
                 current_html_output = "".join(output_html_buffer)
                 yield current_html_output, final_answer_text
-                last_buffer_length = len(output_html_buffer)
+                last_buffer_length = len(current_html_output)
             time.sleep(0.05) # Smaller delay for more responsive updates
 
         # Ensure final state is yielded
         final_html_output = "".join(output_html_buffer)
         yield final_html_output, final_answer_text
 
-    # --- Code Playground Tab Logic ---
+    # --- Code Playground Tab Logic (Using modelscope_studio components) ---
     def generate_code_streaming(query, model_id, hf_token, openai_api_key, serpapi_key, api_endpoint, use_custom_endpoint,
                                  custom_api_endpoint, custom_api_key):
         print(f"[DEBUG] Starting code generation with query: {query}")
 
         if query.strip() == "":
-            # Reset outputs
-            yield gr.update(value="", visible=True), gr.update(value=""), gr.update(value=""), gr.update(selected="empty", visible=True), gr.update(selected="reasoning", visible=False), gr.update(value="Enter your request to generate code")
+            # Reset outputs and show empty state
+            # Yield for reasoning_output (Markdown), code_output_raw (Code), sandbox_output (HTML)
+            # code_output_tabs_container (antd.Tabs, for active_key and visibility)
+            # loading_state_group (gr.Group, for visibility)
+            # loading_tip (gr.State, for value and visibility)
+            yield gr.update(value=""), gr.update(value=""), gr.update(value=""), \
+                  gr.update(selected="empty", visible=False), gr.update(visible=True), \
+                  gr.update(value="Enter your request to generate code", visible=False)
             return
 
         endpoint = custom_api_endpoint if use_custom_endpoint else api_endpoint
         api_key = custom_api_key if use_custom_endpoint else openai_api_key
 
-        # Create a CodeAgent specifically for this task
-        # Note: We're reusing the create_agent function, but it needs to be aware
-        # of the different system prompt for code generation.
-        # A more robust solution might have a dedicated `create_code_agent` if prompts vary.
-        # For now, we'll assume SYSTEM_PROMPT_CODE_GEN is handled by the model or passed implicitly.
         agent = create_agent(
             model_id=model_id,
             hf_token=hf_token,
@@ -229,147 +469,109 @@ def launch_interface():
             api_endpoint=api_endpoint,
             custom_api_endpoint=endpoint,
             custom_api_key=api_key,
-            # search_provider and search_api_key are not relevant for code generation agent
             search_provider="none", # Explicitly set to none if not used
             search_api_key=None,
             custom_search_url=None
         )
         
-# Override the agent's system prompt for code generation
-        # Based on the error, smolagents uses prompt_templates for system prompts.
-        # The specific key might vary, but 'user_agent' or 'managed_agent' are common.
-        # Assuming the CodeAgent also has a 'system_prompt' in its prompt_templates
-        # or we can modify the one for its internal 'managed_agent' if applicable.
-
-        # A common pattern for smolagents' CodeAgent might be to modify the 'user_agent'
-        # or 'managed_agent' template that it uses internally.
-        # Let's try modifying the 'managed_agent' task and prepending the system prompt.
-        # If this doesn't fully capture the 'system' role, you might need to inspect
-        # the exact structure of `agent.prompt_templates` in a debugger.
-
-        # Safely try to modify the prompt template used by the CodeAgent.
-        # The exact key for the system prompt might vary (e.g., 'system', 'default', 'user_agent').
-        # A common structure is `agent.prompt_templates["user_agent"]["system_prompt"]`
-        # or it might be directly injected in the `task` for agents that don't have a separate system role.
-        
-        # Let's assume the `CodeAgent` itself uses a "default" or similar template
-        # that allows injecting a system prompt, or that its primary instruction
-        # can be adjusted via its 'task' definition.
-        
-        # A more direct way to ensure the system prompt is used by LiteLLMModel
-        # within smolagents is to pass it during agent creation, or if the agent
-        # has an exposed way to set a 'system' message.
-        
-        # Given the error implies direct modification of `prompt_templates`,
-        # let's try to find a suitable place.
-        # Based on smolagents examples, `user_agent` or `managed_agent` templates are often customized.
-        # The `CodeAgent` itself doesn't typically expose a direct `system_prompt` property
-        # that it forwards to the LLM; instead, it uses the prompt templates.
-
-        # The error specifically points to `self.prompt_templates["system_prompt"]`.
-        # This implies there *is* a key "system_prompt" within prompt_templates.
-        # Let's apply SYSTEM_PROMPT_CODE_GEN to this specific key.
-        if hasattr(agent, 'prompt_templates') and "system_prompt" in agent.prompt_templates:
-            # If the agent explicitly exposes a "system_prompt" template key
-            agent.prompt_templates["system_prompt"] = SYSTEM_PROMPT_CODE_GEN
-            print("[DEBUG] Set agent.prompt_templates['system_prompt'] for code generation.")
-        elif hasattr(agent, 'prompt_templates') and 'user_agent' in agent.prompt_templates:
-            # If it's a ToolCallingAgent (which CodeAgent inherits from)
-            # and it has a 'user_agent' template, we can modify its system message.
-            # This is a common pattern for defining the agent's core persona.
-            agent.prompt_templates['user_agent']['system_message'] = SYSTEM_PROMPT_CODE_GEN
-            print("[DEBUG] Set agent.prompt_templates['user_agent']['system_message'] for code generation.")
+        # Corrected: Set the system prompt using prompt_templates as per the error message.
+        if hasattr(agent, 'prompt_templates'):
+            if "system_prompt" in agent.prompt_templates:
+                agent.prompt_templates["system_prompt"] = SYSTEM_PROMPT_CODE_GEN
+                print("[DEBUG] Set agent.prompt_templates['system_prompt'] for code generation.")
+            elif 'user_agent' in agent.prompt_templates and 'system_message' in agent.prompt_templates['user_agent']:
+                agent.prompt_templates['user_agent']['system_message'] = SYSTEM_PROMPT_CODE_GEN
+                print("[DEBUG] Set agent.prompt_templates['user_agent']['system_message'] for code generation.")
+            else:
+                print("[WARNING] Could not set system prompt for CodeAgent using known patterns. "
+                      "Agent might not follow code generation instructions optimally.")
+                # Fallback: Prepend to the question if no proper system prompt mechanism
+                query = SYSTEM_PROMPT_CODE_GEN + "\n\n" + query
         else:
-            print("[WARNING] Could not set system prompt for CodeAgent using known patterns. "
-                  "Agent might not follow code generation instructions optimally.")
-            # Fallback: Prepend to the question for basic instruction if no proper system prompt mechanism
-            # This is not ideal but ensures the instruction is conveyed.
+            print("[WARNING] Agent has no 'prompt_templates' attribute. Cannot set system prompt.")
             query = SYSTEM_PROMPT_CODE_GEN + "\n\n" + query
 
 
-        reasoning_buffer = []
-        code_buffer = []
-        is_complete = False
-        
-        def code_gen_stream_callback(text):
-            # This callback needs to differentiate between reasoning and code.
-            # Smolagents typically logs reasoning and then the final output.
-            # We'll assume anything before a detected code block is reasoning,
-            # and the code block itself is the code.
-            
-            # This is a heuristic. A better approach would be if smolagents
-            # could tag its output more clearly (e.g., [REASONING] or [CODE]).
-            
-            # For now, we'll append everything to reasoning_buffer
-            # and then try to extract the final code at the end.
-            reasoning_buffer.append(text)
+        reasoning_text_buffer = [] # Buffer for the raw text of reasoning/code combined
+        final_generated_code_content = "" # Store the final extracted code
+        is_agent_run_complete = False # Flag for the async agent run completion
+
+        # Callback for the run_agent_with_streaming
+        def code_gen_stream_callback(text_chunk):
+            nonlocal reasoning_text_buffer
+            reasoning_text_buffer.append(text_chunk)
             
-            # Yield updates for the reasoning output
-            yield gr.update(value="".join(reasoning_buffer), visible=True), \
-                  gr.update(value=""), \
-                  gr.update(value=""), \
-                  gr.update(selected="loading"), \
-                  gr.update(selected="reasoning", visible=True), \
-                  gr.update(value="Thinking and coding...")
-            time.sleep(0.01) # Very small sleep for fine-grained updates
-
-        # Run agent in a separate thread
-        agent_thread = threading.Thread(target=lambda: run_agent_with_streaming(agent, query, code_gen_stream_callback))
+        # Function to run the agent asynchronously
+        def run_agent_async_for_codegen():
+            nonlocal is_agent_run_complete, final_generated_code_content
+            try:
+                # The run_agent_with_streaming returns the final answer
+                final_answer_from_agent = run_agent_with_streaming(agent, query, code_gen_stream_callback)
+                # Ensure the final answer from agent.run is captured
+                final_generated_code_content = final_answer_from_agent
+            except Exception as e:
+                reasoning_text_buffer.append(f"[ERROR] {str(e)}\n")
+            finally:
+                is_agent_run_complete = True
+
+        # Start agent in background thread
+        agent_thread = threading.Thread(target=run_agent_async_for_codegen)
         agent_thread.start()
 
-        # Initial yield to show loading state
-        yield gr.update(value="", visible=True), gr.update(value=""), gr.update(value=""), gr.update(selected="loading", visible=True), gr.update(selected="reasoning", visible=True), gr.update(value="Thinking and coding...")
-
-        # Stream reasoning process
-        last_reasoning_len = 0
-        while agent_thread.is_alive() or not is_complete: # is_complete will be set by run_agent_async's finally
-            current_reasoning_output = "".join(reasoning_buffer)
-            if len(current_reasoning_output) > last_reasoning_len:
-                yield gr.update(value="".join(reasoning_buffer), visible=True), \
-                      gr.update(value=""), \
-                      gr.update(value=""), \
-                      gr.update(selected="loading"), \
-                      gr.update(selected="reasoning", visible=True), \
-                      gr.update(value="Generating code...")
-                last_reasoning_len = len(current_reasoning_output)
-            time.sleep(0.05) # Adjust for streaming granularity
-
-
-        # After thread finishes, get the final answer (which contains both reasoning and code)
-        # Note: This requires run_agent_with_streaming to return the final answer.
-        # Currently, it returns it, but the thread doesn't easily expose it back to the generator.
-        # A more robust way is to pass a queue between the thread and the generator.
-        # For simplicity, we'll assume the last content in reasoning_buffer
-        # will contain the full output, and we'll parse it.
+        # --- Initial yield to show loading state ---
+        # Hide empty, show loading, show reasoning tab initially
+        yield gr.update(value="", visible=True), gr.update(value="", visible=False), gr.update(value="", visible=False), \
+              gr.update(selected="reasoning", visible=True), gr.update(visible=True), \
+              gr.update(value="Thinking and coding...", visible=True)
         
-        full_agent_output = "".join(reasoning_buffer) # Contains everything from the agent
+        # --- Streaming loop for Gradio UI ---
+        last_buffer_len = 0
+        while not is_agent_run_complete or agent_thread.is_alive() or len(reasoning_text_buffer) > last_buffer_len:
+            current_full_output = "".join(reasoning_text_buffer)
+            if len(current_full_output) > last_buffer_len:
+                # Update reasoning output with accumulated text
+                yield gr.update(value=current_full_output, visible=True), \
+                      gr.update(value="", visible=False), \
+                      gr.update(value="", visible=False), \
+                      gr.update(selected="reasoning"), \
+                      gr.update(visible=False), \
+                      gr.update(value="Generating code...", visible=True) # Update loading status
+                last_buffer_len = len(current_full_output)
+            time.sleep(0.05) # Small delay for UI updates
+
+        # After the agent run completes and all buffered text is processed:
+        # Use the actual final answer from the agent's run method if available, otherwise buffer.
+        # This is important if the final_answer_from_agent is more concise than the full buffer.
+        final_output_for_parsing = final_generated_code_content if final_generated_code_content else "".join(reasoning_text_buffer)
         
-        # Extract code and reasoning
-        generated_code_raw = remove_code_block(full_agent_output)
+        generated_code_extracted = remove_code_block(final_output_for_parsing)
         
-        # Heuristic: Remove the extracted code block from the full output to get just reasoning
-        reasoning_only = full_agent_output.replace(f"```{generated_code_raw}```", "").strip()
-        reasoning_only = reasoning_only.replace(f"```html\n{generated_code_raw}\n```", "").strip()
-        reasoning_only = reasoning_only.replace(f"```HTML\n{generated_code_raw}\n```", "").strip()
-
-
-        # Render the code in sandbox
-        html_to_render = send_to_sandbox(generated_code_raw) if generated_code_raw else "<div>No code generated or code extraction failed.</div>"
+        # Try to refine reasoning if code was extracted
+        reasoning_only_display = final_output_for_parsing
+        if generated_code_extracted:
+            # Simple heuristic to remove code block from reasoning for display
+            reasoning_only_display = reasoning_only_display.replace(f"```{generated_code_extracted}```", "").strip()
+            reasoning_only_display = reasoning_only_display.replace(f"```html\n{generated_code_extracted}\n```", "").strip()
+            reasoning_only_display = reasoning_only_display.replace(f"```HTML\n{generated_code_extracted}\n```", "").strip()
+        
+        html_to_render = send_to_sandbox(generated_code_extracted) if generated_code_extracted else "<div>No valid HTML code was generated or extracted.</div>"
 
-        # Final yield to set all outputs
-        yield gr.update(value=full_agent_output, visible=True), \
-              gr.update(value=generated_code_raw, visible=True), \
+        # Final yield to show the code and rendered output
+        yield gr.update(value=reasoning_only_display, visible=True), \
+              gr.update(value=generated_code_extracted, visible=True), \
               gr.update(value=html_to_render, visible=True), \
               gr.update(selected="render", visible=True), \
-              gr.update(selected="code", visible=True), \
-              gr.update(value="Done")
+              gr.update(visible=True), \
+              gr.update(value="Done", visible=False) # Hide loading status
 
-    # --- Gradio UI Layout ---
-    with gr.Blocks(title="SmolAgent - Intelligent AI with Web Tools", theme="CultriX/gradio-theme") as demo:
+    # --- Gradio UI Layout (Combining your original with MiniMaxAI template) ---
+    # Use gr.Blocks, ms.Application, antdx.XProvider, ms.AutoLoading for modelscope theming
+    with gr.Blocks(css=CUSTOM_CSS) as demo, ms.Application(), antdx.XProvider(), ms.AutoLoading():
         gr.Markdown("# SmolAgent - Intelligent AI with Web Tools")
 
-        with gr.Tabs(): # Use gr.Tabs for multiple sections
+        with gr.Tabs() as main_tabs: # Main tabs for Chatbot and Code Playground
             with gr.TabItem("Chatbot"):
+                # Your existing chatbot tab using standard gr components
                 with gr.Row():
                     with gr.Column(scale=1):
                         question = gr.Textbox(label="Your Question", lines=3, placeholder="Enter your question or task for the AI agent...")
@@ -429,90 +631,97 @@ def launch_interface():
                 )
 
             with gr.TabItem("Code Playground (WebDev)"):
-                with gr.Row():
-                    with gr.Column(scale=1):
-                        code_query = gr.Textbox(label="Your Request", lines=3, placeholder="Describe the web application you want to generate...")
-                        model_id_code = gr.Textbox(label="Model ID", value="gpt-4o-mini", placeholder="e.g., gpt-4, claude-3-opus-20240229")
-                        
-                        with gr.Accordion("API Configuration (Code Gen)", open=False):
-                            hf_token_code = gr.Textbox(label="Hugging Face Token (Optional)", type="password", value=os.getenv("HF_TOKEN", ""), placeholder="Your Hugging Face token if using HF models")
-                            openai_api_key_code = gr.Textbox(label="OpenAI API Key (Optional)", type="password", value=os.getenv("OPENAI_API_KEY", ""), placeholder="Your OpenAI API key")
-                            api_endpoint_code = gr.Textbox(label="Default API Endpoint", value=os.getenv("API_ENDPOINT", "https://api.openai.com/v1"), placeholder="e.g., https://api.openai.com/v1")
-                            with gr.Group():
-                                use_custom_endpoint_code = gr.Checkbox(label="Use Custom API Endpoint")
-                                custom_api_endpoint_code = gr.Textbox(label="Custom API URL", visible=False, placeholder="URL for your custom API endpoint")
-                                custom_api_key_code = gr.Textbox(label="Custom API Key (Optional)", type="password", visible=False, placeholder="API key for the custom endpoint")
-
-                        generate_code_btn = gr.Button("Generate Code", variant="primary")
-
-                    with gr.Column(scale=2):
-                        with gr.Tabs(selected="empty") as code_output_tabs_container: # This will control empty/loading/render
-                            with gr.TabItem("🤔 Thinking Process", elem_id="reasoning_tab"):
-                                # This will display the streamed reasoning process
-                                reasoning_output = gr.HTML(label="Thinking Process")
-                            with gr.TabItem("💻 Generated Code", elem_id="code_tab"):
-                                # This will display the raw generated code block
-                                code_output_raw = gr.Code(label="Generated Code", language="html", interactive=False)
-                            with gr.TabItem("Output", elem_id="sandbox_tab"): # The actual iframe container
-                                sandbox_output = gr.HTML(label="Rendered Output") # This will hold the iframe
-
-                        # These are for controlling the visibility/state like the target app
-                        # We use gr.State to hold tips and other internal states if needed
-                        loading_status = gr.Textbox(label="Status", value="Ready", visible=False) # A hidden component to show "Thinking...", "Generating code..."
-
-                        # Placeholders for empty/loading states - controlled by js or updates
-                        with gr.Group(visible=True) as empty_state_group:
-                            gr.Markdown(
-                                """
-                                <div style="text-align: center; padding: 20px;">
-                                    <h3>Enter your request to generate code</h3>
-                                    <p>Describe the web component or application you want the AI to create.</p>
-                                </div>
-                                """
+                # This section uses modelscope_studio.components.antd/antdx/ms
+                with antd.Row(gutter=[32, 12], elem_classes="code-playground-container"):
+                    with antd.Col(span=24, md=12):
+                        with antd.Flex(vertical=True, gap="middle"):
+                            code_query = antd.Input.Textarea(
+                                size="large",
+                                allow_clear=True,
+                                auto_size=dict(minRows=2, maxRows=6),
+                                placeholder="Please enter what kind of application you want or choose an example below and click the button"
                             )
-                        with gr.Group(visible=False) as loading_state_group:
-                            gr.Markdown(
-                                """
-                                <div style="text-align: center; padding: 20px;">
-                                    <div class="gr-progres-bar-container" style="display: flex; justify-content: center; align-items: center; min-height: 150px;">
-                                        <div class="gr-progress-bar" style="width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite;"></div>
-                                        <style>
-                                            @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-                                        </style>
-                                    </div>
-                                    <p style="font-weight: bold; margin-top: 10px;">Thinking and coding...</p>
-                                </div>
-                                """
-                            )
-
+                            generate_code_btn = antd.Button("Generate Code", type="primary", size="large")
+                            
+                            # Output tabs for Reasoning and Generated Code
+                            with antd.Tabs(active_key="reasoning", visible=False) as output_tabs_code_gen: # Matches target's output_tabs
+                                with antd.Tabs.Item(key="reasoning", label="🤔 Thinking Process"):
+                                    reasoning_output = ms.Markdown(elem_classes="reasoning-box") # Use ms.Markdown
+                                with antd.Tabs.Item(key="code", label="💻 Generated Code"):
+                                    # Gradio's gr.Code is suitable here, as modelscope doesn't have a direct equivalent for code display
+                                    code_output_raw = gr.Code(label="Generated Code", language="html", interactive=False, lines=20) 
+                            
+                            antd.Divider("Examples")
+                            # Examples with categories
+                            with antd.Tabs(elem_classes="example-tabs") as example_tabs:
+                                for category, examples_list in EXAMPLES.items(): # Renamed 'examples' to 'examples_list' to avoid conflict
+                                    with antd.Tabs.Item(key=category, label=category):
+                                        with antd.Flex(gap="small", wrap=True):
+                                            for example in examples_list:
+                                                with antd.Card(
+                                                        elem_classes="example-card",
+                                                        hoverable=True
+                                                ) as example_card:
+                                                    antd.Card.Meta(
+                                                        title=example['title'],
+                                                        description=example['description'])
+                                                # Use gr.State to pass the example data, and then select_example
+                                                example_card.click(
+                                                    fn=select_example,
+                                                    inputs=[gr.State(example)],
+                                                    outputs=[code_query]
+                                                )
+
+                    with antd.Col(span=24, md=12):
+                        # This column will contain the output display: empty, loading, or rendered HTML
+                        with antd.Card(title="Output", elem_style=dict(height="100%"), styles=dict(body=dict(height="100%")), elem_id="output-container"):
+                            # This internal Tabs component will control the main right panel's state (empty/loading/render)
+                            with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab: # Matches target's state_tab
+                                with antd.Tabs.Item(key="empty"):
+                                    empty = antd.Empty(
+                                        description="Enter your request to generate code",
+                                        elem_classes="output-empty" # Matches target's CSS class
+                                    )
+                                with antd.Tabs.Item(key="loading"):
+                                    # The Spin component from antd
+                                    with antd.Spin(True, tip="Thinking and coding...", size="large", elem_classes="output-loading") as loading_spinner: # Matches target's loading
+                                        ms.Div() # Placeholder for content inside spin
+                                with antd.Tabs.Item(key="render"):
+                                    sandbox_output = gr.HTML(elem_classes="output-html") # Matches target's sandbox
+                
+                # --- Interactions for Code Playground ---
+                # `loading_tip` is now a gr.State and used for JS triggers and Python updates.
+                loading_tip = gr.State("Ready")
 
-                # --- Code Playground Interactions ---
+                # Initial setup when code_query is submitted or button clicked
                 generate_code_btn.click(
+                    fn=lambda: (
+                        gr.update(selected="loading"), # Switch to loading tab in the right panel
+                        gr.update(visible=False),     # Hide the empty state component
+                        gr.update(visible=True),      # Show the loading state component
+                        gr.update(value="Thinking and coding...", visible=True), # Update loading tip text
+                        gr.update(value="", visible=True), # Clear reasoning output, make it visible
+                        gr.update(value="", visible=False), # Clear raw code output, hide it
+                        gr.update(value="", visible=False)  # Clear sandbox output, hide it
+                    ),
+                    outputs=[state_tab, empty_state_group, loading_spinner, loading_tip, reasoning_output, code_output_raw, sandbox_output],
+                    queue=False # This pre-processing step should not be queued
+                ).then(
                     fn=generate_code_streaming,
                     inputs=[
-                        code_query, model_id_code, hf_token_code, openai_api_key_code, serpapi_key_chatbot,
+                        code_query, model_id_code, hf_token_code, openai_api_key_code, serpapi_key_chatbot, # Re-using chatbot's serpapi
                         api_endpoint_code, use_custom_endpoint_code, custom_api_endpoint_code, custom_api_key_code
                     ],
-                    outputs=[reasoning_output, code_output_raw, sandbox_output, code_output_tabs_container, code_output_tabs_container, loading_status],
-                    show_progress="hidden" # We'll manage progress indicators manually
-                ).success( # On successful completion, hide loading, show tabs
-                    fn=lambda: (gr.update(visible=False), gr.update(visible=True)),
-                    outputs=[empty_state_group, code_output_tabs_container]
-                ).then( # On any status (even during streaming), hide empty state
-                    fn=lambda: gr.update(visible=False),
-                    outputs=[empty_state_group]
-                )
-                
-                # JavaScript to switch tabs and show loading/empty states
-                # This needs to be carefully orchestrated with the Python yields.
-                # A common pattern is to have a hidden state component that triggers JS.
-                code_query.submit(
-                    fn=lambda: (gr.update(visible=True), gr.update(selected="loading")),
-                    outputs=[loading_state_group, code_output_tabs_container]
+                    outputs=[reasoning_output, code_output_raw, sandbox_output, state_tab, output_tabs_code_gen, loading_tip],
+                    show_progress="hidden" # Manage progress via loading_tip and state_tab
+                ).then(
+                    fn=lambda: (gr.update(visible=False)), # Hide the loading spinner after the process completes
+                    outputs=[loading_spinner]
                 )
 
-                # Use a JS function to ensure scrolling to the bottom for streaming outputs
-                # This needs to be triggered on updates to the streaming output component
+                # Auto-scroll functionality from MiniMaxAI template
+                # This needs to target ms.Markdown components.
+                # Note: `elem_classes` for ms.Markdown might be different from raw Gradio.
                 reasoning_output.change(
                     fn=None,
                     inputs=[],
@@ -520,17 +729,48 @@ def launch_interface():
                     js="""
                     function() {
                         setTimeout(() => {
-                            const elem = document.querySelector('#reasoning_tab .markdown-container, #reasoning_tab .gr-html-container');
-                            if (elem) {
-                                elem.scrollTop = elem.scrollHeight;
+                            const reasoningBox = document.querySelector('.reasoning-box');
+                            if (reasoningBox) {
+                                reasoningBox.scrollTop = reasoningBox.scrollHeight;
+                            }
+                        }, 100);
+                    }
+                    """
+                )
+                code_output_raw.change( # This is gr.Code, might need different selector
+                    fn=None,
+                    inputs=[],
+                    outputs=[],
+                    js="""
+                    function() {
+                        setTimeout(() => {
+                            // Gradio's gr.Code output is often within a <textarea> or <pre> inside a div
+                            const codeBox = document.querySelector('.markdown-container pre, .markdown-container textarea');
+                            if (codeBox) {
+                                codeBox.scrollTop = codeBox.scrollHeight;
                             }
                         }, 100);
                     }
                     """
                 )
+                
+                # Handling tab changes to ensure correct visibility as in MiniMaxAI
+                def on_output_tabs_change(tab_key):
+                    # This function is not directly used in the current streaming yield flow
+                    # but is provided in the original template for programmatic tab changes.
+                    # In our streaming, we set `selected` directly in the yields.
+                    return gr.update(active_key=tab_key)
+
+                # The original MiniMaxAI app had a `output_tabs.change` event.
+                # In our setup, `output_tabs_code_gen` (the Reasoning/Code tabs)
+                # visibility and selected tab are controlled directly by the `generate_code_streaming`
+                # function's yields. `state_tab` (empty/loading/render) is the main outer control.
+                # If you need specific behavior when a user manually switches 'Thinking Process' vs 'Generated Code'
+                # after the process starts, you'd enable this.
+                # output_tabs_code_gen.change(fn=on_output_tabs_change, inputs=output_tabs_code_gen, outputs=[output_tabs_code_gen])
 
     print("[DEBUG] Launching updated Gradio interface")
-    demo.launch()
+    demo.queue(default_concurrency_limit=50).launch(ssr_mode=False) # Keep queue and ssr_mode if relevant to your setup
 
 if __name__ == "__main__":
     launch_interface()