upload

README.md

@@ -1,25 +1,13 @@
 ---
-# 详细文档见https://modelscope.cn/docs/%E5%88%9B%E7%A9%BA%E9%97%B4%E5%8D%A1%E7%89%87
-domain: #领域：cv/nlp/audio/multi-modal/AutoML
-# - cv
-tags: #自定义标签
--
-datasets: #关联数据集
-  evaluation:
-  #- iic/ICDAR13_HCTR_Dataset
-  test:
-  #- iic/MTWI
-  train:
-  #- iic/SIBR
-models: #关联模型
-#- iic/ofa_ocr-recognition_general_base_zh
-
-## 启动文件(若SDK为Gradio/Streamlit，默认为app.py, 若为Static HTML, 默认为index.html)
-# deployspec:
-#   entry_file: app.py
-license: Apache License 2.0
+title: MiniMax M1
+emoji: 💬
+colorFrom: yellow
+colorTo: purple
+sdk: gradio
+sdk_version: 5.0.1
+app_file: app.py
+pinned: false
+license: apache-2.0
 ---
-#### Clone with HTTP
-```bash
- git clone https://www.modelscope.cn/studios/MiniMax/MiniMax-M1.git
-```
+
+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

@@ -0,0 +1,882 @@
+import base64
+import gradio as gr
+import json
+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
+import modelscope_studio.components.pro as pro
+from modelscope_studio.components.pro.chatbot import (
+    ChatbotActionConfig, ChatbotBotConfig, ChatbotMarkdownConfig,
+    ChatbotPromptsConfig, ChatbotUserConfig, ChatbotWelcomeConfig)
+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']
+SYSTEM_PROMPT = os.environ.get('SYSTEM_PROMPT')
+MULTIMODAL_FLAG = os.environ.get('MULTIMODAL')
+MODEL_CONTROL_DEFAULTS = json.loads(os.environ['MODEL_CONTROL_DEFAULTS'])
+NAME_MAP = {
+    'system': os.environ.get('SYSTEM_NAME'),
+    'user': os.environ.get('USER_NAME'),
+}
+
+MODEL_NAME = 'MiniMax-M1'
+
+
+def prompt_select(e: gr.EventData):
+    return gr.update(value=e._data["payload"][0]["value"]["description"])
+
+
+def clear():
+    return gr.update(value=None)
+
+
+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)
+    for chunk in submit(None, chatbot_value):
+        yield chunk
+
+
+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)
+
+
+def add_name_for_message(message):
+    name = NAME_MAP.get(message['role'])
+    if name is not None:
+        message['name'] = name
+
+
+def convert_content(content):
+    if isinstance(content, str):
+        return content
+    if isinstance(content, tuple):
+        return [{
+            'type': 'image_url',
+            'image_url': {
+                'url': encode_base64(content[0]),
+            },
+        }]
+    content_list = []
+    for key, val in content.items():
+        if key == 'text':
+            content_list.append({
+                'type': 'text',
+                'text': val,
+            })
+        elif key == 'files':
+            for f in val:
+                content_list.append({
+                    'type': 'image_url',
+                    'image_url': {
+                        'url': encode_base64(f),
+                    },
+                })
+    return content_list
+
+
+def encode_base64(path):
+    guess_type = mimetypes.guess_type(path)[0]
+    if not guess_type.startswith('image/'):
+        raise gr.Error('not an image ({}): {}'.format(guess_type, path))
+    with open(path, 'rb') as handle:
+        data = handle.read()
+        return 'data:{};base64,{}'.format(
+            guess_type,
+            base64.b64encode(data).decode(),
+        )
+
+
+def format_history(history):
+    """Convert chatbot history format to API call format"""
+    messages = []
+    if SYSTEM_PROMPT is not None:
+        messages.append({
+            'role': 'system',
+            'content': SYSTEM_PROMPT,
+        })
+    
+    for item in history:
+        if item["role"] == "user":
+            messages.append({
+                'role': 'user',
+                'content': convert_content(item["content"]),
+            })
+        elif item["role"] == "assistant":
+            # 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":
+                        reasoning_content = content_item.get("content", "")
+                    elif content_item.get("type") == "text":
+                        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),
+            })
+    
+    return messages
+
+
+def submit(sender_value, chatbot_value):
+    if sender_value is not None:
+        chatbot_value.append({
+            "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,
+            'messages': api_messages,
+            'stream': True,
+            'max_tokens': MODEL_CONTROL_DEFAULTS['tokens_to_generate'],
+            'temperature': MODEL_CONTROL_DEFAULTS['temperature'],
+            'top_p': MODEL_CONTROL_DEFAULTS['top_p'],
+        }
+        
+        r = requests.post(
+            API_URL,
+            headers={
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer {}'.format(API_KEY),
+            },
+            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",
+            "content": "",
+            "options": {
+                "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)
+                            else:
+                                reasoning_duration = 0.0
+                                thought_cost_time = "0.00"
+                            message_content[-2]["options"] = {"title": f"End of Thought ({thought_cost_time}s)"}
+
+                    yield {chatbot: gr.update(value=chatbot_value)}
+                    
+                elif 'message' in choice:
+                    message_data = choice['message']
+                    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)
+                            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)"}
+                    
+                    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]["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"
+        chatbot_value[-1]["content"] = "Request failed, please try again."
+        yield {
+            clear_btn: gr.update(disabled=False),
+            sender: gr.update(loading=False),
+            chatbot: gr.update(value=chatbot_value),
+        }
+        raise e
+
+
+def remove_code_block(text):
+    # Try to match code blocks with language markers
+    patterns = [
+        r'```(?:html|HTML)\n([\s\S]+?)\n```',  # Match ```html or ```HTML
+        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'):
+        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"""
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script>
+            // Create a safe storage alternative
+            const safeStorage = {{
+                _data: {{}},
+                getItem: function(key) {{
+                    return this._data[key] || null;
+                }},
+                setItem: function(key, value) {{
+                    this._data[key] = value;
+                }},
+                removeItem: function(key) {{
+                    delete this._data[key];
+                }},
+                clear: function() {{
+                    this._data = {{}};
+                }}
+            }};
+            
+            // Replace native localStorage
+            Object.defineProperty(window, 'localStorage', {{
+                value: safeStorage,
+                writable: false
+            }});
+
+            // Add error handling without using alert
+            window.onerror = function(message, source, lineno, colno, error) {{
+                console.error('Error:', message);
+            }};
+        </script>
+    </head>
+    <body>
+        {code}
+    </body>
+    </html>
+    """
+    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 {
+            code_output: gr.update(value=None),
+            reasoning_output: gr.update(value=None),
+            sandbox: gr.update(value=None),
+            state_tab: gr.update(active_key="empty"),
+            output_tabs: gr.update(active_key="reasoning", visible=False),
+            loading: gr.update(tip="Thinking...")
+        }
+    
+    print("Starting code generation with query:", query)
+    messages = [{
+        'role': 'system',
+        'content': SystemPrompt
+    }, {
+        'role': 'user',
+        'content': query
+    }]
+    
+    max_retries = 3
+    retry_count = 0
+    
+    while retry_count < max_retries:
+        try:
+            data = {
+                'model': MODEL_VERSION,
+                'messages': messages,
+                'stream': True,
+                'max_tokens': MODEL_CONTROL_DEFAULTS['tokens_to_generate'],
+                '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))
+            r = requests.post(
+                API_URL,
+                headers={
+                    'Content-Type': 'application/json',
+                    'Authorization': 'Bearer {}'.format(API_KEY),
+                },
+                data=json.dumps(data),
+                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))
+                    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)
+                            }
+                        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)
+                            }
+                    elif 'message' in choice:
+                        message_data = choice['message']
+                        content = message_data.get('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")
+                        }
+            
+            # If successful, break out of retry loop
+            break
+            
+        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)}")
+            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 {
+  height: calc(100vh - 200px);
+  overflow: hidden;
+}
+
+.ant-tabs-tabpane {
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Modify existing styles */
+.output-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: unset;
+}
+
+.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;
+}
+
+.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 {
+  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;
+  width: 100%;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+.reasoning-box .ms-markdown {
+  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 {
+  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;
+}
+
+/* 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 */
+.right_content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 620px;
+  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);
+}
+"""
+
+def scroll_to_bottom():
+    return """
+    function() {
+        setTimeout(() => {
+            const reasoningBox = document.querySelector('.reasoning-box');
+            if (reasoningBox) {
+                reasoningBox.scrollTop = reasoningBox.scrollHeight;
+            }
+            const markdownContainer = document.querySelector('.markdown-container');
+            if (markdownContainer) {
+                markdownContainer.scrollTop = markdownContainer.scrollHeight;
+            }
+        }, 100);
+    }
+    """
+
+with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
+    with antd.Tabs() as tabs:
+        with antd.Tabs.Item(key="chat", label="Chatbot"):
+            with antd.Flex(vertical=True, gap="middle"):
+                chatbot = pro.Chatbot(
+                    height="calc(100vh - 200px)",
+                    markdown_config=ChatbotMarkdownConfig(allow_tags=["think"]),
+                    welcome_config=ChatbotWelcomeConfig(
+                        variant="borderless",
+                        icon="./assets/minimax-logo.png",
+                        title="Hello, I'm MiniMax-M1",
+                        description="You can input text to get started.",
+                        prompts=ChatbotPromptsConfig(
+                            title="How can I help you today?",
+                            styles={
+                                "list": {
+                                    "width": '100%',
+                                },
+                                "item": {
+                                    "flex": 1,
+                                },
+                            },
+                            items=DEFAULT_PROMPTS
+                        )
+                    ),
+                    user_config=ChatbotUserConfig(actions=["copy", "edit"]),
+                    bot_config=ChatbotBotConfig(
+                        header=MODEL_NAME,
+                        avatar="./assets/minimax-logo.png",
+                        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 ms.Slot("icon"):
+                                antd.Icon("ClearOutlined")
+
+                clear_btn.click(fn=clear, outputs=[chatbot])
+                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])
+
+        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.Flex(vertical=True, gap="middle"):
+                        code_input = antd.InputTextarea(
+                            size="large",
+                            allow_clear=True,
+                            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")
+                        
+                        antd.Divider("Examples")
+
+                        # Examples with categories
+                        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.Flex(gap="small", wrap=True):
+                                        for example in examples:
+                                            with antd.Card(
+                                                elem_classes="example-card",
+                                                hoverable=True
+                                            ) as example_card:
+                                                antd.Card.Meta(
+                                                    title=example['title'],
+                                                    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:
+                            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="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,
+                    loading
+                ]
+            )
+
+            # Add auto-scroll functionality
+            reasoning_output.change(
+                fn=scroll_to_bottom,
+                inputs=[],
+                outputs=[],
+            )
+            code_output.change(
+                fn=scroll_to_bottom,
+                inputs=[],
+                outputs=[],
+            )
+
+            def on_tab_change(tab_key):
+                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)

config.py

@@ -0,0 +1,104 @@
+DEFAULT_PROMPTS = [
+    {
+        "label": "🤔 Logical Reasoning",
+        "children": [
+            {
+                "description": "A cat is lying on a blanket because it is warm. What does 'it' refer to in this sentence?"
+            },
+            {
+                "description": "Snowflake : white'' - Which of the following groups of words has a relationship most similar to the relationship in the above word group? [ ''Doctor : learned'', ''Woman : gentle'', ''River : flowing'', ''Peony : wealth'' ]"
+            }
+        ]
+    },
+    {
+        "label": "📚 Knowledge Q&A",
+        "children": [
+            {
+                "description": "Why are most manhole covers round?"
+            },
+            {
+                "description": "What is the shortest distance between the United States and Russia?"
+            }
+        ]
+    }
+]
+
+DEFAULT_CODE = {
+    "./index.html": """
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <h1>Hello, World!</h1>
+    </body>
+    </html>
+    """
+}
+
+SystemPrompt = """
+You are a web development engineer, writing web pages according to the instructions below. You are a powerful code editing assistant capable of writing code and creating artifacts in conversations with users, or modifying and updating existing artifacts as requested by users. 
+All code is written in a single code block to form a complete code file for display, without separating HTML and JavaScript code. An artifact refers to a runnable complete code snippet, you prefer to integrate and output such complete runnable code rather than breaking it down into several code blocks. For certain types of code, they can render graphical interfaces in a UI window. After generation, please check the code execution again to ensure there are no errors in the output.
+Output only the HTML, without any additional descriptive text. Make the UI looks modern and beautiful.
+"""
+
+EXAMPLES = {
+    "UI Components": [
+        {
+            "title": "🔄 3D Flipping Card",
+            "description": "Create a 3D flipping card component that flips on hover. Include front and back content. Use only HTML and CSS (no JS). Make the flip smooth and realistic."
+        },
+        {
+            "title": "⚡ SVG Loading Animation",
+            "description": "Design an SVG dynamic loading animation with abstract style (e.g., rotating spinner, pulse dots) for web page loading status indication"
+        },
+        {
+            "title": "✨ Particle Background",
+            "description": "Create an HTML page with a canvas-based animated particle background. The particles should move smoothly and connect when close. Add a central heading text over the canvas"
+        },
+        {
+            "title": "🌈 Colorful Gradient Background",
+            "description": "Create an HTML page with a gradient background that transitions smoothly between multiple colors. Add a central heading text over the gradient"
+        }
+    ],
+    "Interactive Apps": [
+        {
+            "title": "📋 TODO list",
+            "description": "Create a modern, interactive to-do list web app. It should allow users to add and remove items. Use beautiful styling and animations."
+        },
+        {
+            "title": "📝 Sticky Note Wall",
+            "description": "Create a sticky note wall where users can create, edit, drag, and delete colorful sticky notes. Make it visually appealing"
+        },
+        {
+            "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. Make it visually appealing."
+        },
+        {
+            "title": "💰 Personal Finance Tracker",
+            "description": "Create a personal finance tracker with user input, and visualize income and expenses using animated pie and bar charts. Use modern, responsive design in a single HTML file."
+        }
+    ],
+    "Tools & Editors": [
+        {
+            "title": "📝 Markdown Editor with Preview",
+            "description": "Develop a modern markdown editor with real-time preview. Use a split pane layout for input and output, support bold, italics, headers, lists, links, images, etc. No external libraries."
+        },
+        {
+            "title": "🖼️ Image Filter Tool",
+            "description": "Create an image filter tool where users can upload an image and apply filters like grayscale, blur, brightness, contrast, etc. Show real-time preview."
+        }
+    ],
+    "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. Use canvas and JavaScript to animate colorful particles that fade out."
+        }
+    ]
+}

requirements.txt

@@ -0,0 +1,4 @@
+gradio==5.27.0
+gradio-client>=0.30.0
+requests
+modelscope_studio==1.4.0

start.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+# 设置环境变量
+export API_URL="https://api.minimaxi.chat/v1/text/chatcompletion_v2"
+export MODEL_CONTROL_DEFAULTS='{"tokens_to_generate": 40000, "temperature": 1, "top_p": 0.95}'
+export MODEL_VERSION="MiniMax-Reasoning-01"
+export API_KEY="your_api_key_here"  # 请替换为你的实际API密钥
+
+# 可选环境变量
+export SYSTEM_PROMPT="你是小爱同学，一个有用的AI助手"
+export MULTIMODAL="ON"
+export SYSTEM_NAME="小爱同学"
+export USER_NAME="用户"
+
+# 启动应用
+python app.py