fix: error

README.md

@@ -10,4 +10,4 @@ pinned: false
 license: apache-2.0
 ---
 
-An example chatbot using [Gradio](https://gradio.app), [`huggingface_hub`](https://huggingface.co/docs/huggingface_hub/v0.22.2/en/index), and the [Hugging Face Inference API](https://huggingface.co/docs/api-inference/index).
+An MiniMax-M1 example chatbot using [MiniMax-M1](https://huggingface.co/spaces/MiniMaxAI/MiniMax-M1), [Gradio](https://gradio.app), [`modelscope_studio`](https://modelscope.cn/studios/modelscope/modelscope-studio).

app.py

@@ -357,8 +357,10 @@ def send_to_sandbox(code):
     print("Generated iframe:", iframe)
     return iframe
 
-def select_example(example: dict):
-    return lambda: gr.update(value=example["description"])
+def select_example(example):
+    if isinstance(example, dict):
+        return example.get("description", "")
+    return ""
 
 def generate_code(query: str):
     if not query:
@@ -401,6 +403,8 @@ def generate_code(query: str):
             
             content = ""
             reasoning_content = ""
+            loading_text = "Thinking..."
+            
             for row in r.iter_lines():
                 if row.startswith(b'data:'):
                     data = json.loads(row[5:])
@@ -413,14 +417,24 @@ def generate_code(query: str):
                         delta = choice['delta']
                         content += delta.get('content', '')
                         reasoning_content += delta.get('reasoning_content', '')
-                        print("Current content:", content)
-                        print("Current reasoning:", reasoning_content)
-                        yield {
-                            code_output: content,
-                            reasoning_output: reasoning_content + "\n",
-                            state_tab: gr.update(active_key="loading"),
-                            output_tabs: gr.update(active_key="reasoning", visible=True)
-                        }
+                        
+                        # Update loading text based on content
+                        if content and not loading_text == "Generating code...":
+                            loading_text = "Generating code..."
+                            yield {
+                                code_output: content,
+                                reasoning_output: reasoning_content + "\n",
+                                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: content,
+                                reasoning_output: reasoning_content + "\n",
+                                state_tab: gr.update(active_key="loading"),
+                                output_tabs: gr.update(active_key="reasoning", visible=True)
+                            }
                     elif 'message' in choice:
                         message_data = choice['message']
                         content = message_data.get('content', '')
@@ -434,7 +448,7 @@ def generate_code(query: str):
                             reasoning_output: reasoning_content + "\n",
                             sandbox: send_to_sandbox(html_content),
                             state_tab: gr.update(active_key="render"),
-                            output_tabs: gr.update(active_key="code", visible=True)  # Switch to code tab when complete
+                            output_tabs: gr.update(active_key="code", visible=True)
                         }
             
             # If successful, break out of retry loop
@@ -468,10 +482,47 @@ css = """
   flex-direction: column;
   width: 100%;
   min-height: 680px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e8e8e8;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.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 {
@@ -572,6 +623,19 @@ css = """
 .example-tabs .ant-tabs-tab-active {
   font-weight: 500;
 }
+
+/* Empty state styles */
+.right_content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 680px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
 """
 
 def scroll_to_bottom():
@@ -685,39 +749,40 @@ with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
                                                 )
 
                                             example_card.click(
-                                                fn=select_example(example),
+                                                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 ms.Slot("extra"):
-                                with ms.Div(elem_id="output-container-extra"):
-                                    with antd.Button(
-                                            "Download HTML",
-                                            type="link",
-                                            href_target="_blank",
-                                            disabled=True,
-                                    ) as download_btn:
-                                        with ms.Slot("icon"):
-                                            antd.Icon("DownloadOutlined")
-                                    download_content = gr.Text(visible=False)
-
-                                    view_code_btn = antd.Button(
-                                        "🧑‍💻 View Code", type="primary")
+                        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:
                             with antd.Tabs.Item(key="empty"):
                                 empty = antd.Empty(description="empty input", elem_classes="right_content")
                             with antd.Tabs.Item(key="loading"):
-                                loading = antd.Spin(True, tip="coding...", size="large", elem_classes="output-loading")
+                                loading = antd.Spin(True, tip="Thinking and coding...", size="large", elem_classes="output-loading")
                             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]
+                outputs=[
+                    code_output,
+                    reasoning_output,
+                    sandbox,
+                    state_tab,
+                    output_tabs,
+                    loading
+                ]
             )
 
             # Add auto-scroll functionality