Update app.py

app.py

@@ -5,7 +5,6 @@ import mimetypes
 import os
 import requests
 import time
-import modelscope_studio.components.legacy as legacy
 import modelscope_studio.components.antd as antd
 import modelscope_studio.components.antdx as antdx
 import modelscope_studio.components.base as ms
@@ -16,7 +15,6 @@ from modelscope_studio.components.pro.chatbot import (
 from config import DEFAULT_PROMPTS, EXAMPLES, SystemPrompt
 import re
 
-
 MODEL_VERSION = os.environ['MODEL_VERSION']
 API_URL = os.environ['API_URL']
 API_KEY = os.environ['API_KEY']
@@ -42,8 +40,9 @@ def clear():
 def retry(chatbot_value, e: gr.EventData):
     index = e._data["payload"][0]["index"]
     chatbot_value = chatbot_value[:index]
-    
-    yield gr.update(loading=True), gr.update(value=chatbot_value), gr.update(disabled=True)
+
+    yield gr.update(loading=True), gr.update(value=chatbot_value), gr.update(
+        disabled=True)
     for chunk in submit(None, chatbot_value):
         yield chunk
 
@@ -52,7 +51,8 @@ def cancel(chatbot_value):
     chatbot_value[-1]["loading"] = False
     chatbot_value[-1]["status"] = "done"
     chatbot_value[-1]["footer"] = "Chat completion paused"
-    return gr.update(value=chatbot_value), gr.update(loading=False), gr.update(disabled=False)
+    return gr.update(value=chatbot_value), gr.update(loading=False), gr.update(
+        disabled=False)
 
 
 def add_name_for_message(message):
@@ -109,7 +109,7 @@ def format_history(history):
             'role': 'system',
             'content': SYSTEM_PROMPT,
         })
-    
+
     for item in history:
         if item["role"] == "user":
             messages.append({
@@ -120,7 +120,7 @@ def format_history(history):
             # Extract reasoning content and main content
             reasoning_content = ""
             main_content = ""
-            
+
             if isinstance(item["content"], list):
                 for content_item in item["content"]:
                     if content_item.get("type") == "tool":
@@ -129,13 +129,16 @@ def format_history(history):
                         main_content = content_item.get("content", "")
             else:
                 main_content = item["content"]
-            
+
             messages.append({
-                'role': 'assistant',
-                'content': convert_content(main_content),
-                'reasoning_content': convert_content(reasoning_content),
+                'role':
+                'assistant',
+                'content':
+                convert_content(main_content),
+                'reasoning_content':
+                convert_content(reasoning_content),
             })
-    
+
     return messages
 
 
@@ -145,25 +148,25 @@ def submit(sender_value, chatbot_value):
             "role": "user",
             "content": sender_value,
         })
-    
+
     api_messages = format_history(chatbot_value)
-    
+
     for message in api_messages:
         add_name_for_message(message)
-    
+
     chatbot_value.append({
         "role": "assistant",
         "content": [],
         "loading": True,
         "status": "pending"
     })
-    
+
     yield {
         sender: gr.update(value=None, loading=True),
         clear_btn: gr.update(disabled=True),
         chatbot: gr.update(value=chatbot_value)
     }
-    
+
     try:
         data = {
             'model': MODEL_VERSION,
@@ -173,7 +176,7 @@ def submit(sender_value, chatbot_value):
             'temperature': MODEL_CONTROL_DEFAULTS['temperature'],
             'top_p': MODEL_CONTROL_DEFAULTS['top_p'],
         }
-        
+
         r = requests.post(
             API_URL,
             headers={
@@ -183,11 +186,11 @@ def submit(sender_value, chatbot_value):
             data=json.dumps(data),
             stream=True,
         )
-        
+
         thought_done = False
         start_time = time.time()
         message_content = chatbot_value[-1]["content"]
-        
+
         # Reasoning content (tool type)
         message_content.append({
             "type": "tool",
@@ -196,83 +199,97 @@ def submit(sender_value, chatbot_value):
                 "title": "🤔 Thinking..."
             }
         })
-        
+
         # Main content (text type)
         message_content.append({
             "type": "text",
             "content": "",
         })
-        
+
         reasoning_start_time = None
         reasoning_duration = None
-        
+
         for row in r.iter_lines():
             if row.startswith(b'data:'):
                 data = json.loads(row[5:])
                 if 'choices' not in data:
                     raise gr.Error('request failed')
                 choice = data['choices'][0]
-                
+
                 if 'delta' in choice:
                     delta = choice['delta']
                     reasoning_content = delta.get('reasoning_content', '')
                     content = delta.get('content', '')
-                    
+
                     chatbot_value[-1]["loading"] = False
-                    
+
                     # Handle reasoning content
                     if reasoning_content:
                         if reasoning_start_time is None:
                             reasoning_start_time = time.time()
                         message_content[-2]["content"] += reasoning_content
-                    
+
                     # Handle main content
                     if content:
                         message_content[-1]["content"] += content
-                        
+
                         if not thought_done:
                             thought_done = True
                             if reasoning_start_time is not None:
-                                reasoning_duration = time.time() - reasoning_start_time
-                                thought_cost_time = "{:.2f}".format(reasoning_duration)
+                                reasoning_duration = time.time(
+                                ) - reasoning_start_time
+                                thought_cost_time = "{:.2f}".format(
+                                    reasoning_duration)
                             else:
                                 reasoning_duration = 0.0
                                 thought_cost_time = "0.00"
-                            message_content[-2]["options"] = {"title": f"End of Thought ({thought_cost_time}s)"}
+                            message_content[-2]["options"] = {
+                                "title":
+                                f"End of Thought ({thought_cost_time}s)",
+                                "status": "done"
+                            }
 
                     yield {chatbot: gr.update(value=chatbot_value)}
-                    
+
                 elif 'message' in choice:
                     message_data = choice['message']
-                    reasoning_content = message_data.get('reasoning_content', '')
+                    reasoning_content = message_data.get(
+                        'reasoning_content', '')
                     main_content = message_data.get('content', '')
-                    
+
                     message_content[-2]["content"] = reasoning_content
                     message_content[-1]["content"] = main_content
-                    
+
                     if reasoning_content and main_content:
                         if reasoning_duration is None:
                             if reasoning_start_time is not None:
-                                reasoning_duration = time.time() - reasoning_start_time
-                                thought_cost_time = "{:.2f}".format(reasoning_duration)
+                                reasoning_duration = time.time(
+                                ) - reasoning_start_time
+                                thought_cost_time = "{:.2f}".format(
+                                    reasoning_duration)
                             else:
                                 reasoning_duration = 0.0
                                 thought_cost_time = "0.00"
                         else:
-                            thought_cost_time = "{:.2f}".format(reasoning_duration)
-                        message_content[-2]["options"] = {"title": f"End of Thought ({thought_cost_time}s)"}
-                    
+                            thought_cost_time = "{:.2f}".format(
+                                reasoning_duration)
+                        message_content[-2]["options"] = {
+                            "title": f"End of Thought ({thought_cost_time}s)",
+                            "status": "done"
+                        }
+
                     chatbot_value[-1]["loading"] = False
                     yield {chatbot: gr.update(value=chatbot_value)}
 
-        chatbot_value[-1]["footer"] = "{:.2f}s".format(time.time() - start_time)
+        chatbot_value[-1]["footer"] = "{:.2f}s".format(time.time() -
+                                                       start_time)
         chatbot_value[-1]["status"] = "done"
         yield {
             clear_btn: gr.update(disabled=False),
             sender: gr.update(loading=False),
             chatbot: gr.update(value=chatbot_value),
         }
-        
+
     except Exception as e:
         chatbot_value[-1]["loading"] = False
         chatbot_value[-1]["status"] = "done"
@@ -292,22 +309,24 @@ def remove_code_block(text):
         r'```\n([\s\S]+?)\n```',  # Match code blocks without language markers
         r'```([\s\S]+?)```'  # Match code blocks without line breaks
     ]
-    
+
     for pattern in patterns:
         match = re.search(pattern, text, re.DOTALL)
         if match:
             extracted = match.group(1).strip()
             print("Successfully extracted code block:", extracted)
             return extracted
-    
+
     # If no code block is found, check if the entire text is HTML
-    if text.strip().startswith('<!DOCTYPE html>') or text.strip().startswith('<html'):
+    if text.strip().startswith('<!DOCTYPE html>') or text.strip().startswith(
+            '<html'):
         print("Text appears to be raw HTML, using as is")
         return text.strip()
-    
+
     print("No code block found in text:", text)
     return text.strip()
 
+
 def send_to_sandbox(code):
     # Add a wrapper to inject necessary permissions
     wrapped_code = f"""
@@ -351,17 +370,20 @@ def send_to_sandbox(code):
     </body>
     </html>
     """
-    encoded_html = base64.b64encode(wrapped_code.encode('utf-8')).decode('utf-8')
+    encoded_html = base64.b64encode(
+        wrapped_code.encode('utf-8')).decode('utf-8')
     data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
     iframe = f'<iframe src="{data_uri}" width="100%" height="920px" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-presentation" allow="display-capture"></iframe>'
     print("Generated iframe:", iframe)
     return iframe
 
+
 def select_example(example):
     if isinstance(example, dict):
         return example.get("description", "")
     return ""
 
+
 def generate_code(query: str):
     if not query:
         return {
@@ -372,7 +394,7 @@ def generate_code(query: str):
             output_tabs: gr.update(active_key="reasoning", visible=False),
             loading: gr.update(tip="Thinking...")
         }
-    
+
     print("Starting code generation with query:", query)
     messages = [{
         'role': 'system',
@@ -381,10 +403,10 @@ def generate_code(query: str):
         'role': 'user',
         'content': query
     }]
-    
+
     max_retries = 3
     retry_count = 0
-    
+
     while retry_count < max_retries:
         try:
             data = {
@@ -395,8 +417,10 @@ def generate_code(query: str):
                 'temperature': MODEL_CONTROL_DEFAULTS['temperature'],
                 'top_p': MODEL_CONTROL_DEFAULTS['top_p'],
             }
-            
-            print(f"Attempt {retry_count + 1}: Sending request to API with data:", json.dumps(data, indent=2))
+
+            print(
+                f"Attempt {retry_count + 1}: Sending request to API with data:",
+                json.dumps(data, indent=2))
             r = requests.post(
                 API_URL,
                 headers={
@@ -407,76 +431,101 @@ def generate_code(query: str):
                 stream=True,
                 timeout=60  # Set 60 seconds timeout
             )
-            
+
             content = ""
             reasoning_content = ""
             loading_text = "Thinking..."
-            
+
             for row in r.iter_lines():
                 if row.startswith(b'data:'):
                     data = json.loads(row[5:])
-                    print("Received data from API:", json.dumps(data, indent=2))
+                    print("Received data from API:", json.dumps(data,
+                                                                indent=2))
                     if 'choices' not in data:
                         raise gr.Error('request failed')
                     choice = data['choices'][0]
-                    
+
                     if 'delta' in choice:
                         delta = choice['delta']
                         content += delta.get('content', '')
                         reasoning_content += delta.get('reasoning_content', '')
-                        
+
                         # Update loading text based on content
                         if content and not loading_text == "Generating code...":
                             loading_text = "Generating code..."
                             yield {
-                                code_output: gr.update(value=content),
-                                reasoning_output: gr.update(value=reasoning_content + "\n"),
-                                sandbox: gr.update(value=None),
-                                state_tab: gr.update(active_key="loading"),
-                                output_tabs: gr.update(active_key="reasoning", visible=True),
-                                loading: gr.update(tip=loading_text)
+                                code_output:
+                                gr.update(value=content),
+                                reasoning_output:
+                                gr.update(value=reasoning_content + "\n"),
+                                sandbox:
+                                gr.update(value=None),
+                                state_tab:
+                                gr.update(active_key="loading"),
+                                output_tabs:
+                                gr.update(active_key="reasoning",
+                                          visible=True),
+                                loading:
+                                gr.update(tip=loading_text)
                             }
                         else:
                             yield {
-                                code_output: gr.update(value=content),
-                                reasoning_output: gr.update(value=reasoning_content + "\n"),
-                                sandbox: gr.update(value=None),
-                                state_tab: gr.update(active_key="loading"),
-                                output_tabs: gr.update(active_key="reasoning", visible=True),
-                                loading: gr.update(tip=loading_text)
+                                code_output:
+                                gr.update(value=content),
+                                reasoning_output:
+                                gr.update(value=reasoning_content + "\n"),
+                                sandbox:
+                                gr.update(value=None),
+                                state_tab:
+                                gr.update(active_key="loading"),
+                                output_tabs:
+                                gr.update(active_key="reasoning",
+                                          visible=True),
+                                loading:
+                                gr.update(tip=loading_text)
                             }
                     elif 'message' in choice:
                         message_data = choice['message']
                         content = message_data.get('content', '')
-                        reasoning_content = message_data.get('reasoning_content', '')
+                        reasoning_content = message_data.get(
+                            'reasoning_content', '')
                         print("Final content:", content)
                         print("Final reasoning:", reasoning_content)
                         html_content = remove_code_block(content)
                         print("Extracted HTML:", html_content)
                         yield {
-                            code_output: gr.update(value=content),
-                            reasoning_output: gr.update(value=reasoning_content + "\n"),
-                            sandbox: gr.update(value=send_to_sandbox(html_content)),
-                            state_tab: gr.update(active_key="render"),
-                            output_tabs: gr.update(active_key="code", visible=True),
-                            loading: gr.update(tip="Done")
+                            code_output:
+                            gr.update(value=content),
+                            reasoning_output:
+                            gr.update(value=reasoning_content + "\n"),
+                            sandbox:
+                            gr.update(value=send_to_sandbox(html_content)),
+                            state_tab:
+                            gr.update(active_key="render"),
+                            output_tabs:
+                            gr.update(active_key="code", visible=True),
+                            loading:
+                            gr.update(tip="Done")
                         }
-            
+
             # If successful, break out of retry loop
             break
-            
-        except (requests.exceptions.Timeout, requests.exceptions.ConnectionError) as e:
+
+        except (requests.exceptions.Timeout,
+                requests.exceptions.ConnectionError) as e:
             retry_count += 1
             if retry_count == max_retries:
                 print(f"Failed after {max_retries} attempts:", str(e))
-                raise gr.Error(f"Request failed after {max_retries} attempts: {str(e)}")
+                raise gr.Error(
+                    f"Request failed after {max_retries} attempts: {str(e)}")
             print(f"Attempt {retry_count} failed, retrying...")
             time.sleep(1)  # Wait 1 second before retrying
-            
+
         except Exception as e:
             print("Error occurred:", str(e))
             raise gr.Error(str(e))
 
+
 css = """
 /* Add styles for the main container */
 .ant-tabs-content {
@@ -490,27 +539,25 @@ css = """
 }
 
 /* Modify existing styles */
-.output-loading {
+.output-empty,.output-loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
-  height: 100%;
-  min-height: unset;
+  min-height: 680px;
+  position: relative;
 }
 
 .output-html {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
-  min-height: unset;
-  background: #fff;
-  border-radius: 8px;
-  border: 1px solid #e8e8e8;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  overflow: hidden;
+  min-height: 680px;
+}
+
+.output-html > iframe {
+  flex: 1;
 }
 
 .right_content {
@@ -588,19 +635,16 @@ css = """
 }
 
 .reasoning-box {
-  height: 300px;
+  max-height: 300px;
   overflow-y: auto;
-  background-color: #f5f5f5;
   border-radius: 4px;
-  margin-bottom: 12px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 14px;
-  line-height: 1.2;
-  white-space: pre-wrap;
-  word-break: break-word;
+  line-height: 1.6;
   width: 100%;
-  box-sizing: border-box;
   scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 .reasoning-box .ms-markdown {
@@ -626,19 +670,16 @@ css = """
 }
 
 .markdown-container {
-  height: 300px;
+  max-height: 300px;
   overflow-y: auto;
-  background-color: #f5f5f5;
   border-radius: 4px;
-  margin-bottom: 12px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 14px;
   line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-word;
   width: 100%;
-  box-sizing: border-box;
   scroll-behavior: smooth;
+  display: flex;
+  flex-direction: column-reverse;
 }
 
 /* Example card styles */
@@ -710,6 +751,7 @@ css = """
 }
 """
 
+
 def scroll_to_bottom():
     return """
     function() {
@@ -726,13 +768,18 @@ def scroll_to_bottom():
     }
     """
 
-with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
+
+with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider(
+), ms.AutoLoading():
     with antd.Tabs() as tabs:
         with antd.Tabs.Item(key="chat", label="Chatbot"):
-            with antd.Flex(vertical=True, gap="middle"):
+            with antd.Flex(vertical=True,
+                           gap="middle",
+                           elem_style=dict(height="calc(100vh - 150px)")):
                 chatbot = pro.Chatbot(
-                    height="calc(100vh - 200px)",
-                    markdown_config=ChatbotMarkdownConfig(allow_tags=["think"]),
+                    elem_style=dict(flex=1, maxHeight=1200, height=0),
+                    markdown_config=ChatbotMarkdownConfig(
+                        allow_tags=["think"]),
                     welcome_config=ChatbotWelcomeConfig(
                         variant="borderless",
                         icon="./assets/minimax-logo.png",
@@ -748,20 +795,18 @@ with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
                                     "flex": 1,
                                 },
                             },
-                            items=DEFAULT_PROMPTS
-                        )
-                    ),
+                            items=DEFAULT_PROMPTS)),
                     user_config=ChatbotUserConfig(actions=["copy", "edit"]),
                     bot_config=ChatbotBotConfig(
                         header=MODEL_NAME,
                         avatar="./assets/minimax-logo.png",
-                        actions=["copy", "retry"]
-                    )
-                )
+                        actions=["copy", "retry"]))
 
                 with antdx.Sender() as sender:
                     with ms.Slot("prefix"):
-                        with antd.Button(value=None, color="default", variant="text") as clear_btn:
+                        with antd.Button(value=None,
+                                         color="default",
+                                         variant="text") as clear_btn:
                             with ms.Slot("icon"):
                                 antd.Icon("ClearOutlined")
 
@@ -769,93 +814,98 @@ with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
                 submit_event = sender.submit(
                     fn=submit,
                     inputs=[sender, chatbot],
-                    outputs=[sender, chatbot, clear_btn]
-                )
-                sender.cancel(
-                    fn=cancel,
-                    inputs=[chatbot],
-                    outputs=[chatbot, sender, clear_btn],
-                    cancels=[submit_event],
-                    queue=False
-                )
-                chatbot.retry(
-                    fn=retry,
-                    inputs=[chatbot],
-                    outputs=[sender, chatbot, clear_btn]
-                )
-                chatbot.welcome_prompt_select(fn=prompt_select, outputs=[sender])
+                    outputs=[sender, chatbot, clear_btn])
+                sender.cancel(fn=cancel,
+                              inputs=[chatbot],
+                              outputs=[chatbot, sender, clear_btn],
+                              cancels=[submit_event],
+                              queue=False)
+                chatbot.retry(fn=retry,
+                              inputs=[chatbot],
+                              outputs=[sender, chatbot, clear_btn])
+                chatbot.welcome_prompt_select(fn=prompt_select,
+                                              outputs=[sender])
 
         with antd.Tabs.Item(key="code", label="Code Playground (WebDev)"):
-            with antd.Row(gutter=[32, 12], elem_classes="code-playground-container"):
-                with antd.Col(span=12):
+            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_input = antd.InputTextarea(
+                        code_input = antd.Input.Textarea(
                             size="large",
                             allow_clear=True,
-                            placeholder="Please enter what kind of application you want or choose an example below and click the button"
+                            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"
                         )
-                        code_btn = antd.Button("Generate Code", type="primary", size="large")
-                        with antd.Tabs(active_key="reasoning", visible=False) as output_tabs:
-                            with antd.Tabs.Item(key="reasoning", label="🤔 Thinking Process"):
-                                reasoning_output = legacy.Markdown(
-                                    elem_classes="reasoning-box"
-                                )
-                            with antd.Tabs.Item(key="code", label="💻 Generated Code"):
-                                code_output = legacy.Markdown(elem_classes="markdown-container")
-                        
+                        code_btn = antd.Button("Generate Code",
+                                               type="primary",
+                                               size="large")
+                        with antd.Tabs(active_key="reasoning",
+                                       visible=False) as output_tabs:
+                            with antd.Tabs.Item(key="reasoning",
+                                                label="🤔 Thinking Process"):
+                                reasoning_output = ms.Markdown(
+                                    elem_classes="reasoning-box")
+                            with antd.Tabs.Item(key="code",
+                                                label="💻 Generated Code"):
+                                code_output = ms.Markdown(
+                                    elem_classes="markdown-container")
+
                         antd.Divider("Examples")
 
                         # Examples with categories
-                        with antd.Tabs(elem_classes="example-tabs") as example_tabs:
+                        with antd.Tabs(
+                                elem_classes="example-tabs") as example_tabs:
                             for category, examples in EXAMPLES.items():
-                                with antd.Tabs.Item(key=category, label=category):
+                                with antd.Tabs.Item(key=category,
+                                                    label=category):
                                     with antd.Flex(gap="small", wrap=True):
                                         for example in examples:
                                             with antd.Card(
-                                                elem_classes="example-card",
-                                                hoverable=True
+                                                    elem_classes="example-card",
+                                                    hoverable=True
                                             ) as example_card:
                                                 antd.Card.Meta(
                                                     title=example['title'],
-                                                    description=example['description']
-                                                )
+                                                    description=example[
+                                                        'description'])
 
                                             example_card.click(
                                                 fn=select_example,
                                                 inputs=[gr.State(example)],
-                                                outputs=[code_input]
-                                            )
-                
-                with antd.Col(span=12):
-                    with ms.Div(elem_classes="right_panel"):
-                        gr.HTML('''
-                            <div class="render_header">
-                                <span class="header_btn"></span>
-                                <span class="header_btn"></span>
-                                <span class="header_btn"></span>
-                            </div>
-                        ''')
-
-                        with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
+                                                outputs=[code_input])
+
+                with antd.Col(span=24, md=12):
+                    with antd.Card(title="Output",
+                                   elem_style=dict(height="100%"),
+                                   styles=dict(body=dict(height="100%")),
+                                   elem_id="output-container"):
+                        with antd.Tabs(
+                                active_key="empty",
+                                render_tab_bar="() => null") as state_tab:
                             with antd.Tabs.Item(key="empty"):
-                                empty = antd.Empty(description="empty input", elem_classes="right_content")
+                                empty = antd.Empty(
+                                    description=
+                                    "Enter your request to generate code",
+                                    elem_classes="output-empty")
                             with antd.Tabs.Item(key="loading"):
-                                loading = antd.Spin(True, tip="Thinking and coding...", size="large", elem_classes="output-loading")
+                                with antd.Spin(True,
+                                               tip="Thinking and coding...",
+                                               size="large",
+                                               elem_classes="output-loading"
+                                               ) as loading:
+                                    # placeholder
+                                    ms.Div()
                             with antd.Tabs.Item(key="render"):
                                 sandbox = gr.HTML(elem_classes="output-html")
 
-            code_btn.click(
-                generate_code,
-                inputs=[code_input],
-                outputs=[
-                    code_output,
-                    reasoning_output,
-                    sandbox,
-                    state_tab,
-                    output_tabs,
-                    loading
-                ]
-            )
+            code_btn.click(generate_code,
+                           inputs=[code_input],
+                           outputs=[
+                               code_output, reasoning_output, sandbox,
+                               state_tab, output_tabs, loading
+                           ])
 
             # Add auto-scroll functionality
             reasoning_output.change(
@@ -869,14 +919,14 @@ with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
                 outputs=[],
             )
 
-            def on_tab_change(tab_key):
+            def on_tab_change(e: gr.EventData):
+                tab_key = e._data["payload"][0]
                 return gr.update(active_key=tab_key, visible=True)
 
             output_tabs.change(
                 fn=on_tab_change,
-                inputs=[output_tabs],
                 outputs=[output_tabs],
             )
 
 if __name__ == '__main__':
-    demo.queue(default_concurrency_limit=50).launch(ssr_mode=False)
+    demo.queue(default_concurrency_limit=50).launch(ssr_mode=False)