Spaces:

MiniMaxAI
/

MiniMax-M1

Running

App Files Files Community

sriting commited on 3 days ago

Commit

55d5889

1 Parent(s): 132df10

feat: add code playground tab

Browse files

Files changed (2) hide show

app.py +364 -67
config.py +96 -0

app.py CHANGED Viewed

@@ -5,6 +5,7 @@ import mimetypes
 import os
 import requests
 import time
 import modelscope_studio.components.antd as antd
 import modelscope_studio.components.antdx as antdx
 import modelscope_studio.components.base as ms
@@ -12,6 +13,8 @@ import modelscope_studio.components.pro as pro
 from modelscope_studio.components.pro.chatbot import (
     ChatbotActionConfig, ChatbotBotConfig, ChatbotMarkdownConfig,
     ChatbotPromptsConfig, ChatbotUserConfig, ChatbotWelcomeConfig)
 MODEL_VERSION = os.environ['MODEL_VERSION']
@@ -282,75 +285,369 @@ def submit(sender_value, chatbot_value):
         raise e
-with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
-    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=[{
-                        "label": "🤔 Logical Reasoning",
-                        "children": [{
-                            "description": "A is taller than B, B is shorter than C. Who is taller, A or C?"
-                        }, {
-                            "description": "Alice put candy in the drawer and went out. Bob moved the candy to the cabinet. Where will Alice look for the candy when she returns?"
-                        }]
-                    }, {
-                        "label": "📚 Knowledge Q&A",
-                        "children": [{
-                            "description": "Can you tell me about middle school mathematics?"
-                        }, {
-                            "description": "If Earth's gravity suddenly halved, what would happen to the height humans can jump?"
-                        }]
-                    }])),
-            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])
 if __name__ == '__main__':
-    demo.queue(default_concurrency_limit=50).launch()

 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
 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']
         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: dict):
+    return lambda: gr.update(value=example["description"])
+def generate_code(query: str):
+    if not query:
+        return None, None, None, gr.update(active_key="empty")
+    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 = ""
+            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', '')
+                        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"),
+                        }
+                    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: content,
+                            reasoning_output: reasoning_content + "\n",
+                            sandbox: send_to_sandbox(html_content),
+                            state_tab: gr.update(active_key="render"),
+                        }
+            # 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 = """
+.output-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 680px;
+  height: calc(100vh - 200px);
+}
+.output-html {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 680px;
+}
+.output-html > iframe {
+  flex: 1;
+}
+.reasoning-box {
+  height: 160px;
+  overflow-y: auto;
+  padding: 8px 12px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.2;
+  white-space: pre-wrap;
+  word-break: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+.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;
+}
+.reasoning-box textarea {
+  scroll-behavior: smooth;
+}
+"""
+def scroll_to_bottom():
+    return """
+    function() {
+        const textarea = document.querySelector('.reasoning-box textarea');
+        if (textarea) {
+            textarea.scrollTop = textarea.scrollHeight;
+        }
+    }
+    """
+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]):
+                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"
+                        )
+                        code_btn = antd.Button("Generate Code", type="primary", size="large")
+                        reasoning_output = gr.TextArea(
+                            label="Thinking Process",
+                            elem_classes="reasoning-box",
+                            interactive=False,
+                            lines=4,
+                            elem_id="reasoning-output"
+                        )
+                        code_output = legacy.Markdown()
+                        antd.Divider("Examples")
+                        # Examples
+                        with antd.Flex(gap="small", wrap=True):
+                            for example in EXAMPLES:
+                                with antd.Card(
+                                        elem_style=dict(
+                                            flex="1 1 fit-content"),
+                                        hoverable=True) as example_card:
+                                    antd.Card.Meta(
+                                        title=example['title'],
+                                        description=example['description'])
+                                example_card.click(
+                                    fn=select_example(
+                                        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")
+                        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")
+                            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]
+            )
 if __name__ == '__main__':
+    demo.queue(default_concurrency_limit=50).launch(ssr_mode=False)

config.py ADDED Viewed

	@@ -0,0 +1,96 @@

+DEFAULT_PROMPTS = [
+    {
+        "label": "🤔 Logical Reasoning",
+        "children": [
+            {
+                "description": "A is taller than B, B is shorter than C. Who is taller, A or C?"
+            },
+            {
+                "description": "Alice put candy in the drawer and went out. Bob moved the candy to the cabinet. Where will Alice look for the candy when she returns?"
+            }
+        ]
+    },
+    {
+        "label": "📚 Knowledge Q&A",
+        "children": [
+            {
+                "description": "Can you tell me about middle school mathematics?"
+            },
+            {
+                "description": "If Earth's gravity suddenly halved, what would happen to the height humans can jump?"
+            }
+        ]
+    }
+]
+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 = [
+    {
+        "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": "⚡ 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"
+    },
+    {
+        "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": "📝 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."
+    },
+    {
+        "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": "💰 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."
+    },
+    {
+        "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": "💥 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."
+    },
+]