Update app.py

app.py

@@ -1,7 +1,7 @@
 import os
 import re
 from http import HTTPStatus
-from typing import Dict, List, Optional, Tuple
+from typing import Dict, List, Optional, Tuple, TypedDict
 import base64
 import dashscope
 import gradio as gr
@@ -10,100 +10,18 @@ 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);
-}
+# Type definitions
+History = List[Tuple[str, str]]
+Messages = List[Dict[str, str]]
 
-.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);
-    }
-}
-"""
+class SystemConfig(TypedDict):
+    system: str
 
 # Initialize DashScope
 YOUR_API_TOKEN = os.getenv('YOUR_API_TOKEN')
 dashscope.api_key = YOUR_API_TOKEN
 
-# Helper functions
 def history_to_messages(history: History, system: str) -> Messages:
     messages = [{'role': Role.SYSTEM, 'content': system}]
     for h in history:
@@ -118,35 +36,35 @@ def messages_to_history(messages: Messages) -> History:
         history.append([q['content'], r['content']])
     return history
 
-def remove_code_block(text):
+def remove_code_block(text: str) -> str:
     pattern = r'```html\n(.+?)\n```'
     match = re.search(pattern, text, re.DOTALL)
     if match:
         return match.group(1).strip()
     return text.strip()
 
-def send_to_sandbox(code):
+def history_render(history: History) -> tuple[gr.update, History]:
+    return gr.update(open=True), history
+
+def clear_history() -> List:
+    return []
+
+def send_to_sandbox(code: str) -> str:
     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>"
 
-def demo_card_click(e: gr.EventData):
+def demo_card_click(e: gr.EventData) -> str:
     index = e._data['component']['index']
     return DEMO_LIST[index]['description']
 
 # Create Gradio interface
-with gr.Blocks(css=custom_css) as demo:
+with gr.Blocks(css="app.css") as demo:
     history = gr.State([])
     setting = gr.State({"system": SystemPrompt})
     
     with ms.Application() as app:
-        with antd.ConfigProvider(theme={
-            "token": {
-                "colorPrimary": "#6366f1",
-                "borderRadius": 8,
-                "fontSize": 16
-            }
-        }):
+        with antd.ConfigProvider():
             with antd.Row(gutter=[32, 12]) as layout:
                 # Left Column
                 with antd.Col(span=24, md=8):
@@ -161,8 +79,7 @@ with gr.Blocks(css=custom_css) as demo:
                         input = antd.InputTextarea(
                             size="large",
                             allow_clear=True,
-                            placeholder="What kind of application would you like to build?",
-                            style={"minHeight": "120px"}
+                            placeholder="What kind of application would you like to build?"
                         )
                         
                         with antd.Flex(gap="small", justify="space-between"):
@@ -177,10 +94,8 @@ with gr.Blocks(css=custom_css) as demo:
                                     antd.CardMeta()
                                 demoCard.click(demo_card_click, outputs=[input])
                         
-                        antd.Divider("Settings")
-                        
                         with antd.Flex(gap="small", wrap=True):
-                            settingPromptBtn = antd.Button("⚙️ System Prompt", type="default")
+                            settingPromptBtn = antd.Button("⚙️ Settings", type="default")
                             codeBtn = antd.Button("🧑‍💻 View Code", type="default")
                             historyBtn = antd.Button("📜 History", type="default")
                 
@@ -227,7 +142,7 @@ with gr.Blocks(css=custom_css) as demo:
 
     # Event handlers
     def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
-        if query is None or query.strip() == '':
+        if not query or query.strip() == '':
             return
         
         if _history is None:
@@ -279,7 +194,7 @@ with gr.Blocks(css=custom_css) as demo:
         outputs=[code_output, history, sandbox, state_tab, code_drawer]
     )
     
-    clear_btn.click(lambda: [], outputs=[history])
+    clear_btn.click(clear_history, outputs=[history])
     
     settingPromptBtn.click(
         lambda: gr.update(open=True),