Update app.py

app.py

@@ -3,24 +3,107 @@ import re
 from http import HTTPStatus
 from typing import Dict, List, Optional, Tuple
 import base64
-
-
 import dashscope
 import gradio as gr
 from dashscope import Generation
 from dashscope.api_entities.dashscope_response import Role
-
 import modelscope_studio.components.base as ms
 import modelscope_studio.components.legacy as legacy
 import modelscope_studio.components.antd as antd
 from config import DEMO_LIST, SystemPrompt
 
+# Custom CSS for improved UI
+custom_css = """
+.left_header {
+    text-align: center;
+    padding: 2rem;
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    border-radius: 15px;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.left_header img {
+    max-width: 200px;
+    margin-bottom: 1rem;
+    transition: transform 0.3s ease;
+}
+
+.left_header img:hover {
+    transform: scale(1.05);
+}
+
+.left_header h1 {
+    color: white;
+    font-size: 2rem;
+    font-weight: 600;
+    margin: 0;
+}
+
+.right_panel {
+    background: white;
+    border-radius: 15px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    height: 100%;
+}
+
+.render_header {
+    background: #f3f4f6;
+    padding: 12px;
+    border-radius: 15px 15px 0 0;
+    display: flex;
+    gap: 8px;
+}
+
+.header_btn {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.header_btn:nth-child(1) { background: #ef4444; }
+.header_btn:nth-child(2) { background: #f59e0b; }
+.header_btn:nth-child(3) { background: #10b981; }
+
+.html_content {
+    height: calc(100vh - 180px);
+    overflow: auto;
+    padding: 20px;
+}
+
+.right_content {
+    padding: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(100vh - 180px);
+}
+
+/* Mobile Responsive Design */
+@media (max-width: 768px) {
+    .left_header {
+        padding: 1.5rem;
+    }
+    
+    .left_header img {
+        max-width: 150px;
+    }
+    
+    .left_header h1 {
+        font-size: 1.5rem;
+    }
+    
+    .html_content {
+        height: calc(100vh - 140px);
+    }
+}
+"""
+
+# Initialize DashScope
 YOUR_API_TOKEN = os.getenv('YOUR_API_TOKEN')
 dashscope.api_key = YOUR_API_TOKEN
 
-History = List[Tuple[str, str]]
-Messages = List[Dict[str, str]]
-
+# Helper functions
 def history_to_messages(history: History, system: str) -> Messages:
     messages = [{'role': Role.SYSTEM, 'content': system}]
     for h in history:
@@ -28,180 +111,191 @@ def history_to_messages(history: History, system: str) -> Messages:
         messages.append({'role': Role.ASSISTANT, 'content': h[1]})
     return messages
 
-
-def messages_to_history(messages: Messages) -> Tuple[str, History]:
+def messages_to_history(messages: Messages) -> History:
     assert messages[0]['role'] == Role.SYSTEM
     history = []
     for q, r in zip(messages[1::2], messages[2::2]):
         history.append([q['content'], r['content']])
     return history
 
-
 def remove_code_block(text):
     pattern = r'```html\n(.+?)\n```'
     match = re.search(pattern, text, re.DOTALL)
     if match:
         return match.group(1).strip()
-    else:
-        return text.strip()
-
-def history_render(history: History):
-    return gr.update(open=True), history
-
-def clear_history():
-    return []
+    return text.strip()
 
 def send_to_sandbox(code):
     encoded_html = base64.b64encode(code.encode('utf-8')).decode('utf-8')
     data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
     return f"<iframe src=\"{data_uri}\" width=\"100%\" height=\"920px\"></iframe>"
-    # return {
-    #     '/src/App.jsx': {
-    #         'code': code,
-    #         'fpath': '/src/App.jsx',
-    #     },
-    #     # 以路径为 key，必须以绝对路径来描述
-    #     '/src/index.js': {
-    #         'code':
-    #         'import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);',
-    #         'fpath': '/src/index.js',
-    #     },
-    #     '/package.json': {
-    #         'code': '{"name":"demo", "main": "./src/index.js", "dependencies":{ "react": "18.3.1", "react-dom": "18.3.1", "antd": "5.21.6", "styled-components": "6.1.13" }}',
-    #         'fpath': '/package.json',
-    #     },
-    # }
 
 def demo_card_click(e: gr.EventData):
     index = e._data['component']['index']
     return DEMO_LIST[index]['description']
 
-with gr.Blocks(css_paths="app.css") as demo:
+# Create Gradio interface
+with gr.Blocks(css=custom_css) as demo:
     history = gr.State([])
-    setting = gr.State({
-        "system": SystemPrompt,
-    })
-
+    setting = gr.State({"system": SystemPrompt})
+    
     with ms.Application() as app:
-        with antd.ConfigProvider():
+        with antd.ConfigProvider(theme={
+            "token": {
+                "colorPrimary": "#6366f1",
+                "borderRadius": 8,
+                "fontSize": 16
+            }
+        }):
             with antd.Row(gutter=[32, 12]) as layout:
+                # Left Column
                 with antd.Col(span=24, md=8):
                     with antd.Flex(vertical=True, gap="middle", wrap=True):
                         header = gr.HTML("""
-                                  <div class="left_header">
-                                   <img src="//img.alicdn.com/imgextra/i2/O1CN01KDhOma1DUo8oa7OIU_!!6000000000220-1-tps-240-240.gif" width="200px" />
-                                   <h1>Qwen2.5-Coder</h2>
-                                  </div>
-                                   """)
+                            <div class="left_header">
+                                <img src="//img.alicdn.com/imgextra/i2/O1CN01KDhOma1DUo8oa7OIU_!!6000000000220-1-tps-240-240.gif" />
+                                <h1>AI TOOL BUILDER BY SYNCMERCE</h1>
+                            </div>
+                        """)
+                        
                         input = antd.InputTextarea(
-                            size="large", allow_clear=True, placeholder="Please enter what kind of application you want")
-                        # input = gr.TextArea(placeholder="请输入您想要一个什么样的应用", show_label=False, container=False)
-                        btn = antd.Button("send", type="primary", size="large")
-                        clear_btn = antd.Button("clear history", type="default", size="large")
-
-                        antd.Divider("examples")
-                        with antd.Flex(gap="small", wrap=True):
+                            size="large",
+                            allow_clear=True,
+                            placeholder="What kind of application would you like to build?",
+                            style={"minHeight": "120px"}
+                        )
+                        
+                        with antd.Flex(gap="small", justify="space-between"):
+                            btn = antd.Button("Generate ✨", type="primary", size="large")
+                            clear_btn = antd.Button("Clear History", size="large")
+                        
+                        antd.Divider("Examples")
+                        
+                        with antd.Space(direction="vertical", style={"width": "100%"}):
                             with ms.Each(DEMO_LIST):
-                              with antd.Card(hoverable=True, as_item="card") as demoCard:
-                                antd.CardMeta()
-                              demoCard.click(demo_card_click, outputs=[input])
-
-                        antd.Divider("setting")
-
+                                with antd.Card(hoverable=True, as_item="card") as demoCard:
+                                    antd.CardMeta()
+                                demoCard.click(demo_card_click, outputs=[input])
+                        
+                        antd.Divider("Settings")
+                        
                         with antd.Flex(gap="small", wrap=True):
-                            settingPromptBtn = antd.Button(
-                                "⚙️ set system Prompt", type="default")
-                            codeBtn = antd.Button("🧑‍💻 view code", type="default")
-                            historyBtn = antd.Button("📜 history", type="default")
-
-                    with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
-                        systemPromptInput = antd.InputTextarea(
-                            SystemPrompt, auto_size=True)
-
-                    settingPromptBtn.click(lambda: gr.update(
-                        open=True), inputs=[], outputs=[system_prompt_modal])
-                    system_prompt_modal.ok(lambda input: ({"system": input}, gr.update(
-                        open=False)), inputs=[systemPromptInput], outputs=[setting, system_prompt_modal])
-                    system_prompt_modal.cancel(lambda: gr.update(
-                        open=False), outputs=[system_prompt_modal])
-
-                    with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
-                        code_output = legacy.Markdown()
-
-                    codeBtn.click(lambda: gr.update(open=True),
-                                  inputs=[], outputs=[code_drawer])
-                    code_drawer.close(lambda: gr.update(
-                        open=False), inputs=[], outputs=[code_drawer])
-
-                    with antd.Drawer(open=False, title="history", placement="left", width="900px") as history_drawer:
-                        history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
-
-                    historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
-                    history_drawer.close(lambda: gr.update(
-                        open=False), inputs=[], outputs=[history_drawer])
-
+                            settingPromptBtn = antd.Button("⚙️ System Prompt", type="default")
+                            codeBtn = antd.Button("🧑‍💻 View Code", type="default")
+                            historyBtn = antd.Button("📜 History", type="default")
+                
+                # Right Column
                 with antd.Col(span=24, md=16):
                     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>')
+                        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="right_content")
-                                with antd.Tabs.Item(key="render"):
-                                    sandbox = gr.HTML(elem_classes="html_content")
-                                # sandbox = pro.FrontendCodeSandbox(elem_style={
-                                #   'height': '920px',
-                                #   'width': '100%'
-                                # })
-
-            def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
-              if query is None:
-                  query = ''
-              if _history is None:
-                  _history = []
-              messages = history_to_messages(_history, _setting['system'])
-              messages.append({'role': Role.USER, 'content': query})
-
-              gen = Generation.call(model="qwen2.5-coder-32b-instruct",
-                                    messages=messages,
-                                    result_format='message',
-                                    stream=True)
-              for response in gen:
-                  if response.status_code == HTTPStatus.OK:
-                      role = response.output.choices[0].message.role
-                      content = response.output.choices[0].message.content
-                      if response.output.choices[0].finish_reason == 'stop':
-                        _history = messages_to_history(messages + [{
-                            'role': role,
-                            'content': content
-                        }])
-                        print('history')
-                        print(_history)
-                        yield {
-                            code_output: content,
-                            history: _history,
-                            sandbox: send_to_sandbox(remove_code_block(content)),
-                            state_tab:  gr.update(active_key="render"),
-                            code_drawer:  gr.update(open=False),
-                        }
-                      else:
-                        yield {
-                            code_output: content,
-                            state_tab:  gr.update(active_key="loading"),
-                            code_drawer: gr.update(open=True),
-                        }                      
-                  else:
-                      raise ValueError(
-                          'Request id: %s, Status code: %s, error code: %s, error message: %s'
-                          % (response.request_id, response.status_code, response.code,
-                            response.message))
-
-            btn.click(generation_code,
-                      inputs=[input, setting, history],
-                      outputs=[code_output, history, sandbox, state_tab, code_drawer])
+                                empty = antd.Empty(
+                                    description="Start by describing your application",
+                                    elem_classes="right_content"
+                                )
+                            with antd.Tabs.Item(key="loading"):
+                                loading = antd.Spin(
+                                    True,
+                                    tip="Creating your application...",
+                                    size="large",
+                                    elem_classes="right_content"
+                                )
+                            with antd.Tabs.Item(key="render"):
+                                sandbox = gr.HTML(elem_classes="html_content")
+    
+    # Add modals and drawers
+    with antd.Modal(open=False, title="System Prompt", width="800px") as system_prompt_modal:
+        systemPromptInput = antd.InputTextarea(SystemPrompt, auto_size=True)
+    
+    with antd.Drawer(open=False, title="Code", placement="left", width="750px") as code_drawer:
+        code_output = legacy.Markdown()
+    
+    with antd.Drawer(open=False, title="History", placement="left", width="900px") as history_drawer:
+        history_output = legacy.Chatbot(
+            show_label=False,
+            height=960,
+            elem_classes="history_chatbot"
+        )
+
+    # Event handlers
+    def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
+        if query is None or query.strip() == '':
+            return
+        
+        if _history is None:
+            _history = []
             
-            clear_btn.click(clear_history, inputs=[], outputs=[history])
+        messages = history_to_messages(_history, _setting['system'])
+        messages.append({'role': Role.USER, 'content': query})
+        
+        gen = Generation.call(
+            model="qwen2.5-coder-32b-instruct",
+            messages=messages,
+            result_format='message',
+            stream=True
+        )
+        
+        for response in gen:
+            if response.status_code == HTTPStatus.OK:
+                role = response.output.choices[0].message.role
+                content = response.output.choices[0].message.content
+                
+                if response.output.choices[0].finish_reason == 'stop':
+                    _history = messages_to_history(messages + [
+                        {'role': role, 'content': content}
+                    ])
+                    
+                    yield {
+                        code_output: content,
+                        history: _history,
+                        sandbox: send_to_sandbox(remove_code_block(content)),
+                        state_tab: gr.update(active_key="render"),
+                        code_drawer: gr.update(open=False),
+                    }
+                else:
+                    yield {
+                        code_output: content,
+                        state_tab: gr.update(active_key="loading"),
+                        code_drawer: gr.update(open=True),
+                    }
+            else:
+                raise ValueError(
+                    f'Request id: {response.request_id}, Status code: {response.status_code}, '
+                    f'error code: {response.code}, error message: {response.message}'
+                )
+
+    # Connect event handlers
+    btn.click(
+        generation_code,
+        inputs=[input, setting, history],
+        outputs=[code_output, history, sandbox, state_tab, code_drawer]
+    )
+    
+    clear_btn.click(lambda: [], outputs=[history])
+    
+    settingPromptBtn.click(
+        lambda: gr.update(open=True),
+        outputs=[system_prompt_modal]
+    )
+    
+    system_prompt_modal.ok(
+        lambda input: ({"system": input}, gr.update(open=False)),
+        inputs=[systemPromptInput],
+        outputs=[setting, system_prompt_modal]
+    )
 
+# Launch the app
 if __name__ == "__main__":
-    demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
+    demo.queue(concurrency_count=20).launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=True
+    )