update to gradio

app.css

@@ -1,79 +1,614 @@
-/* Basic styling for the coder application */
+/* Modern coding editor styling for AnyCoder */
 
 :root {
-    --text-color: #333;
-    --bg-color: #f5f5f5;
-    --html-bg: white;
+    --primary-color: #007acc;
+    --secondary-color: #1e1e1e;
+    --accent-color: #4ec9b0;
+    --text-color: #d4d4d4;
+    --bg-color: #252526;
+    --surface-color: #2d2d30;
+    --border-color: #3e3e42;
+    --success-color: #4ec9b0;
+    --error-color: #f44747;
+    --warning-color: #ce9178;
+    --html-bg: #ffffff;
+    --code-bg: #1e1e1e;
+    --sidebar-bg: #252526;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
     :root {
-        --text-color: #e0e0e0;
-        --bg-color: #2d2d2d;
-        --html-bg: #1e1e1e;
+        --text-color: #333333;
+        --bg-color: #f3f3f3;
+        --surface-color: #ffffff;
+        --border-color: #e1e1e1;
+        --html-bg: #ffffff;
+        --code-bg: #f8f8f8;
+        --sidebar-bg: #f5f5f5;
     }
 }
 
-.left_header {
-    text-align: center;
-    margin-bottom: 20px;
+/* App header */
+.app-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 24px;
+    background: var(--surface-color);
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 0;
 }
 
-.left_header h1 {
-    margin-top: 10px;
-    color: #333;
+.app-header h1 {
+    margin: 0;
+    color: var(--text-color);
+    font-size: 24px;
+    font-weight: 600;
 }
 
-@media (prefers-color-scheme: dark) {
-    .left_header h1 {
-        color: white;
-    }
+.app-header .subtitle {
+    color: var(--text-color);
+    opacity: 0.7;
+    font-size: 14px;
+    margin-left: auto;
 }
 
-.right_panel {
+/* Main layout */
+.gradio-container {
     background: var(--bg-color);
-    border-radius: 8px;
-    padding: 20px;
-    height: 100%;
+    min-height: 100vh;
+}
+
+/* Left sidebar */
+.code-input {
+    background: var(--surface-color) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+    color: var(--text-color) !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+    font-size: 14px !important;
+}
+
+.code-input:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2) !important;
+}
+
+.model-display {
+    color: var(--text-color) !important;
+    font-size: 14px !important;
+    margin: 0 !important;
+}
+
+.icon-btn {
+    background: var(--surface-color) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-color) !important;
+    border-radius: 6px !important;
+    padding: 8px 12px !important;
+    transition: all 0.2s ease !important;
+}
+
+.icon-btn:hover {
+    background: var(--primary-color) !important;
+    color: white !important;
+    transform: translateY(-1px) !important;
+}
+
+.generate-btn {
+    background: var(--primary-color) !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 8px !important;
+    font-weight: 600 !important;
+    transition: all 0.2s ease !important;
+}
+
+.generate-btn:hover {
+    background: #005a9e !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(0, 122, 204, 0.3) !important;
+}
+
+.clear-btn {
+    background: var(--surface-color) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-color) !important;
+    border-radius: 6px !important;
+}
+
+.quick-example-btn {
+    background: var(--surface-color) !important;
+    border: 1px solid var(--border-color) !important;
+    color: var(--text-color) !important;
+    border-radius: 6px !important;
+    font-size: 12px !important;
+    padding: 8px 12px !important;
+    transition: all 0.2s ease !important;
+}
+
+.quick-example-btn:hover {
+    background: var(--primary-color) !important;
+    color: white !important;
+    border-color: var(--primary-color) !important;
+}
+
+/* Code editor tabs */
+.code-tabs {
+    background: var(--code-bg) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
+}
+
+.code-tab, .preview-tab {
+    background: var(--code-bg) !important;
+    color: var(--text-color) !important;
+    border: none !important;
+    padding: 12px 20px !important;
+    font-weight: 500 !important;
+}
+
+.code-tab[aria-selected="true"], .preview-tab[aria-selected="true"] {
+    background: var(--surface-color) !important;
+    color: var(--primary-color) !important;
+    border-bottom: 2px solid var(--primary-color) !important;
+}
+
+/* Code editor */
+.code-editor {
+    background: var(--code-bg) !important;
+    border: none !important;
+    border-radius: 0 !important;
+    color: var(--text-color) !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+    min-height: 500px !important;
+}
+
+.code-editor .monaco-editor {
+    background: var(--code-bg) !important;
+}
+
+/* HTML content */
+.html_content {
+    width: 100% !important;
+    height: 500px !important;
+    border: none !important;
+    border-radius: 0 !important;
+    background: var(--html-bg) !important;
 }
 
-.render_header {
+/* Status bar */
+.status-bar {
+    background: var(--surface-color) !important;
+    border-top: 1px solid var(--border-color) !important;
+    padding: 8px 16px !important;
+    font-size: 12px !important;
+    color: var(--text-color) !important;
+}
+
+.status-indicator {
     display: flex;
+    align-items: center;
     gap: 8px;
-    margin-bottom: 15px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.status-indicator.generating {
+    color: var(--warning-color);
 }
 
-.header_btn {
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: #ff5f56;
+.status-indicator.success {
+    color: var(--success-color);
 }
 
-.header_btn:nth-child(2) {
-    background: #ffbd2e;
+.status-indicator.error {
+    color: var(--error-color);
 }
 
-.header_btn:nth-child(3) {
-    background: #27ca3f;
+/* Modals */
+.modal {
+    max-width: 420px;
+    padding: 16px 20px 12px 20px !important;
+    border-radius: 10px;
+    background: #23232b;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
+    border: 1px solid #29293a;
+}
+
+.modal h3 {
+    font-size: 1.1em;
+    margin-bottom: 8px;
+    margin-top: 0;
+}
+
+.modal-input {
+    font-size: 0.95em;
+    padding: 8px 10px;
+    border-radius: 6px;
+    background: #18181f;
+    border: 1px solid #29293a;
+    margin-bottom: 10px;
+}
+
+.modal .gr-button {
+    min-width: 80px;
+    height: 32px;
+    font-size: 0.95em;
+    margin-right: 8px;
+    border-radius: 6px;
+    padding: 0 10px;
+}
+
+/* Drawers */
+.drawer {
+    max-width: 420px;
+    padding: 12px 16px 8px 16px !important;
+    border-radius: 10px;
+    background: #23232b;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.12);
+    border: 1px solid #29293a;
+}
+
+.drawer h3 {
+    font-size: 1.1em;
+    margin-bottom: 8px;
+    margin-top: 0;
+}
+
+/* History chatbot */
+.history_chatbot {
+    background: #18181f !important;
+    border-radius: 8px !important;
+    padding: 8px !important;
+    font-size: 0.97em !important;
+    min-height: 200px;
+    max-height: 320px;
+    overflow-y: auto;
 }
 
-.right_content {
+.history_chatbot .message {
+    margin-bottom: 6px !important;
+    padding: 6px 10px !important;
+    border-radius: 6px !important;
+}
+
+/* Model cards */
+.model-select-row {
     display: flex;
+    gap: 8px;
+    justify-content: flex-start;
+    margin-bottom: 8px;
+}
+
+.model-card-btn {
+    min-width: 80px;
+    max-width: 120px;
+    height: 40px;
+    border-radius: 8px;
+    font-size: 1em;
+    font-weight: 600;
+    text-align: center;
+    padding: 0 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: background 0.2s, box-shadow 0.2s;
+}
+
+.model-card-btn:hover {
+    background: #2a2a2a;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+/* Image input */
+.image-input {
+    background: var(--surface-color) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .app-header {
+        flex-direction: column;
+        gap: 8px;
+        text-align: center;
+    }
+    
+    .app-header .subtitle {
+        margin-left: 0;
+    }
+    
+    .code-editor {
+        min-height: 300px !important;
+    }
+    
+    .html_content {
+        height: 300px !important;
+    }
+}
+
+/* Loading animation */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-color);
+}
+
+/* Sidebar styling */
+.sidebar {
+    position: relative;
+    overflow: visible;
+    min-width: 320px;
+    max-width: 360px;
+    padding: 18px 12px 12px 12px;
+    background: #20202a;
+    border-right: 1px solid #23232b;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.sidebar-header {
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    height: 800px;
+    padding: 32px 0 16px 0;
+    background: var(--surface-color);
+    border-bottom: 1px solid var(--border-color);
+}
+.sidebar-header h1 {
+    margin: 8px 0 0 0;
+    font-size: 22px;
+    color: var(--primary-color);
+    font-weight: 700;
+}
+.sidebar-desc {
+    font-size: 13px;
+    color: var(--text-color);
+    opacity: 0.7;
+    margin-top: 4px;
+    text-align: center;
+}
+.sidebar-section {
+    padding: 18px 24px 0 24px;
+}
+.sidebar-section h3 {
+    font-size: 15px;
+    color: var(--primary-color);
+    margin-bottom: 8px;
+}
+.sidebar-section ul {
+    padding-left: 18px;
+    font-size: 13px;
+    color: var(--text-color);
+    opacity: 0.85;
+}
+.sidebar-btn {
+    width: 100%;
+    margin: 6px 0;
+    border-radius: 6px !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    background: var(--surface-color) !important;
+    color: var(--primary-color) !important;
+    border: 1px solid var(--border-color) !important;
+    transition: all 0.2s;
+}
+.sidebar-btn:hover {
+    background: var(--primary-color) !important;
+    color: #fff !important;
+}
+.quick-example-btn {
+    margin: 4px 0;
+    font-size: 13px !important;
+    background: var(--surface-color) !important;
+    color: var(--text-color) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 6px !important;
+    transition: all 0.2s;
+}
+.quick-example-btn:hover {
+    background: var(--primary-color) !important;
+    color: #fff !important;
+}
+
+/* Main area styling */
+.main-area {
+    background: var(--bg-color);
+    min-height: 100vh;
+    padding: 32px 40px 32px 40px;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
+}
+.model-display {
+    color: var(--primary-color) !important;
+    font-size: 15px !important;
+    margin-bottom: 8px !important;
+}
+.code-input, .image-input {
+    margin-bottom: 8px !important;
+}
+.generate-btn, .clear-btn {
+    min-width: 80px;
+    height: 32px;
+    font-size: 0.97em;
+    border-radius: 6px;
+    margin-right: 6px;
 }
 
+/* Code editor and preview */
+.code-tabs {
+    background: var(--code-bg) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 8px !important;
+    margin-top: 24px !important;
+    overflow: hidden !important;
+}
+.code-tab, .preview-tab {
+    background: var(--code-bg) !important;
+    color: var(--text-color) !important;
+    border: none !important;
+    padding: 12px 20px !important;
+    font-weight: 500 !important;
+}
+.code-tab[aria-selected="true"], .preview-tab[aria-selected="true"] {
+    background: var(--surface-color) !important;
+    color: var(--primary-color) !important;
+    border-bottom: 2px solid var(--primary-color) !important;
+}
+.code-editor {
+    background: var(--code-bg) !important;
+    border: none !important;
+    border-radius: 0 !important;
+    color: var(--text-color) !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+    font-size: 15px !important;
+    line-height: 1.5 !important;
+    min-height: 500px !important;
+}
+.code-editor .monaco-editor {
+    background: var(--code-bg) !important;
+}
 .html_content {
+    width: 100% !important;
+    height: 500px !important;
+    border: none !important;
+    border-radius: 0 !important;
+    background: var(--html-bg) !important;
+}
+.status-bar {
+    background: var(--surface-color) !important;
+    border-top: 1px solid var(--border-color) !important;
+    padding: 8px 16px !important;
+    font-size: 13px !important;
+    color: var(--text-color) !important;
+    margin-top: 0 !important;
+}
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+.status-indicator.generating {
+    color: var(--warning-color);
+}
+.status-indicator.success {
+    color: var(--success-color);
+}
+.status-indicator.error {
+    color: var(--error-color);
+}
+
+/* Modal and drawer styling remain as before */
+
+/* Responsive design */
+@media (max-width: 900px) {
+    .main-area {
+        padding: 16px 4vw 16px 4vw;
+    }
+    .sidebar {
+        min-width: 180px;
+        padding: 0 0 0 0;
+    }
+}
+@media (max-width: 600px) {
+    .main-area {
+        padding: 8px 2vw 8px 2vw;
+    }
+    .sidebar {
+        display: none;
+    }
+    .code-editor {
+        min-height: 250px !important;
+    }
+    .html_content {
+        height: 220px !important;
+    }
+}
+
+.sidebar .modal,
+.sidebar .drawer {
+    position: absolute;
+    left: 0;
+    top: 420px;
     width: 100%;
-    height: 920px;
-    border: none;
-    border-radius: 8px;
-    background: var(--html-bg);
+    z-index: 10;
+    background: #23232b;
+    box-shadow: 2px 0 16px rgba(0,0,0,0.18);
+    border-radius: 10px;
+    border: 1px solid #29293a;
+    padding: 18px 16px 12px 16px !important;
+    min-width: 320px;
+    max-width: 360px;
 }
 
-.history_chatbot {
-    max-height: 960px;
-    overflow-y: auto;
+/* Sidebar section headings and text */
+.sidebar-section h3,
+.sidebar-section {
+    color: #4fc3f7 !important;
+}
+.sidebar-section ul,
+.sidebar-section li {
+    color: #e0e0e0 !important;
+}
+
+/* Quick Examples heading */
+.sidebar .sidebar-section h3 {
+    color: #4fc3f7 !important;
+}
+
+/* Tab labels */
+.code-tabs .tab-nav .tab-nav-btn,
+.code-tabs .tab-nav .tab-nav-btn.selected {
+    color: #f5f5f5 !important;
+    font-weight: 600;
+}
+.code-tabs .tab-nav .tab-nav-btn.selected {
+    border-bottom: 2px solid #ff9800 !important;
+}
+
+/* Live Preview tab content */
+.preview-tab {
+    color: #f5f5f5 !important;
+    background: #18181f !important;
+}
+
+/* For light mode, override with a media query or a .light class if you support it */
+body.light .sidebar-section h3,
+body.light .sidebar-section {
+    color: #1976d2 !important;
+}
+body.light .sidebar-section ul,
+body.light .sidebar-section li {
+    color: #222 !important;
+}
+body.light .code-tabs .tab-nav .tab-nav-btn,
+body.light .code-tabs .tab-nav .tab-nav-btn.selected {
+    color: #222 !important;
+}
+body.light .preview-tab {
+    color: #222 !important;
+    background: #fff !important;
 }

app.py

@@ -7,10 +7,6 @@ import base64
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as legacy
-import modelscope_studio.components.antd as antd
-
 # Configuration
 SystemPrompt = """You are a helpful coding assistant. You help users create applications by generating code based on their requirements. 
 When asked to create an application, you should:
@@ -150,12 +146,12 @@ def remove_code_block(text):
             extracted = match.group(1).strip()
             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'):
+    if text.strip().startswith('<!DOCTYPE html>') or text.strip().startswith('<html') or text.strip().startswith('<'):
         return text.strip()
     return text.strip()
 
 def history_render(history: History):
-    return gr.update(open=True), history
+    return gr.update(visible=True), history
 
 def clear_history():
     return []
@@ -267,155 +263,203 @@ def demo_card_click(e: gr.EventData):
         # Return the first demo description as fallback
         return DEMO_LIST[0]['description']
 
+def generation_code(query: Optional[str], image: Optional[gr.Image], _setting: Dict[str, str], _history: Optional[History], _current_model: Dict):
+    if query is None:
+        query = ''
+    if _history is None:
+        _history = []
+    messages = history_to_messages(_history, _setting['system'])
+    if image is not None:
+        messages.append(create_multimodal_message(query, image))
+    else:
+        messages.append({'role': 'user', 'content': query})
+    try:
+        completion = client.chat.completions.create(
+            model=_current_model["id"],
+            messages=messages,
+            stream=True,
+            max_tokens=5000
+        )
+        content = ""
+        for chunk in completion:
+            if chunk.choices[0].delta.content:
+                content += chunk.choices[0].delta.content
+                clean_code = remove_code_block(content)
+                yield {
+                    code_output: clean_code,
+                    status_indicator: '<div class="status-indicator generating" id="status">Generating code...</div>',
+                }
+        _history = messages_to_history(messages + [{
+            'role': 'assistant',
+            'content': content
+        }])
+        yield {
+            code_output: remove_code_block(content),
+            history: _history,
+            sandbox: send_to_sandbox(remove_code_block(content)),
+            status_indicator: '<div class="status-indicator success" id="status">Code generated successfully!</div>',
+        }
+    except Exception as e:
+        error_message = f"Error: {str(e)}"
+        yield {
+            code_output: error_message,
+            status_indicator: '<div class="status-indicator error" id="status">Error generating code</div>',
+        }
+
 # Main application
-with gr.Blocks(css_paths="app.css") as demo:
+with gr.Blocks(css_paths="app.css", title="AnyCoder - AI Code Generator") as demo:
     history = gr.State([])
     setting = gr.State({
         "system": SystemPrompt,
     })
-    current_model = gr.State(AVAILABLE_MODELS[1])  # Default to DeepSeek R1 (second model)
-
-    with ms.Application() as app:
-        with antd.ConfigProvider():
-            with antd.Row(gutter=[32, 12]) as layout:
-                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="https://huggingface.co/spaces/akhaliq/anycoder/resolve/main/Animated_Logo_Video_Ready.gif" width="200px" />
-                                   <h1>AnyCoder</h1>
-                                  </div>
-                                   """)
-                        current_model_display = gr.Markdown("**Current Model:** DeepSeek R1")
-                        input = antd.InputTextarea(
-                            size="large", allow_clear=True, placeholder="Please enter what kind of application you want")
-                        image_input = gr.Image(label="Upload an image (only for ERNIE-4.5-VL model)", visible=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) as examples_flex:
-                            for i, demo_item in enumerate(DEMO_LIST):
-                                with antd.Card(hoverable=True, title=demo_item["title"]) as demoCard:
-                                    antd.CardMeta(description=demo_item["description"])
-                                demoCard.click(lambda e, idx=i: (DEMO_LIST[idx]['description'], None), outputs=[input, image_input])
-
-                        antd.Divider("setting")
-                        with antd.Flex(gap="small", wrap=True) as setting_flex:
-                            settingPromptBtn = antd.Button(
-                                "⚙️ set system Prompt", type="default")
-                            modelBtn = antd.Button("🤖 switch model", 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.Modal(open=False, title="Select Model", width="600px") as model_modal:
-                        with antd.Flex(vertical=True, gap="middle"):
-                            for i, model in enumerate(AVAILABLE_MODELS):
-                                with antd.Card(hoverable=True, title=model["name"]) as modelCard:
-                                    antd.CardMeta(description=model["description"])
-                                modelCard.click(lambda m=model: (m, gr.update(open=False), f"**Current Model:** {m['name']}", update_image_input_visibility(m)), outputs=[current_model, model_modal, current_model_display, image_input])
-
-                    modelBtn.click(lambda: gr.update(open=True), inputs=[], outputs=[model_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])
-
-                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>')
-                        # Move sandbox outside of tabs for always-on visibility
-                        sandbox = gr.HTML(elem_classes="html_content")
-                        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")
-
-            def generation_code(query: Optional[str], image: Optional[gr.Image], _setting: Dict[str, str], _history: Optional[History], _current_model: Dict):
-                if query is None:
-                    query = ''
-                if _history is None:
-                    _history = []
-                messages = history_to_messages(_history, _setting['system'])
-                
-                # Create multimodal message if image is provided
-                if image is not None:
-                    messages.append(create_multimodal_message(query, image))
-                else:
-                    messages.append({'role': 'user', 'content': query})
-
-                try:
-                    completion = client.chat.completions.create(
-                        model=_current_model["id"],
-                        messages=messages,
-                        stream=True,
-                        max_tokens=5000  # Higher max_tokens for more complete applications while maintaining reasonable speed
+    current_model = gr.State(AVAILABLE_MODELS[0])
+    current_model_display = gr.Markdown(f"**Model:** {AVAILABLE_MODELS[0]['name']}", elem_classes="model-display")
+    open_panel = gr.State(None)
+
+    # Define shared components FIRST so they can be referenced everywhere
+    with gr.Row():
+        # Sidebar
+        with gr.Column(scale=0, min_width=340, elem_classes="sidebar"):
+            gr.HTML("""
+                <div class="sidebar-header">
+                    <img src="https://huggingface.co/spaces/akhaliq/anycoder/resolve/main/Animated_Logo_Video_Ready.gif" width="48px" />
+                    <h1>AnyCoder</h1>
+                    <div class="sidebar-desc">AI-Powered Code Generator</div>
+                </div>
+            """)
+            input = gr.Textbox(
+                label="Describe your application",
+                placeholder="e.g., Create a todo app with add, delete, and mark as complete functionality",
+                lines=2,
+                elem_classes="code-input"
+            )
+            image_input = gr.Image(
+                label="Upload UI design image (ERNIE-4.5-VL only)",
+                visible=False,
+                elem_classes="image-input"
+            )
+            with gr.Row():
+                btn = gr.Button("Generate", variant="primary", size="sm", elem_classes="generate-btn")
+                clear_btn = gr.Button("Clear", variant="secondary", size="sm", elem_classes="clear-btn")
+            gr.HTML("""
+                <div class="sidebar-section">
+                    <h3>How it works</h3>
+                    <ul>
+                        <li>Describe your app or UI in plain English</li>
+                        <li>Optionally upload a UI image (for ERNIE model)</li>
+                        <li>Click Generate to get code and preview</li>
+                    </ul>
+                </div>
+            """)
+            gr.HTML("<div class='sidebar-section'><h3>Quick Examples</h3></div>")
+            for i, demo_item in enumerate(DEMO_LIST[:5]):
+                demo_card = gr.Button(
+                    value=demo_item['title'], 
+                    variant="secondary",
+                    size="sm",
+                    elem_classes="quick-example-btn sidebar-btn"
+                )
+                demo_card.click(
+                    fn=lambda idx=i: gr.update(value=DEMO_LIST[idx]['description']),
+                    outputs=input
+                )
+            gr.HTML("<hr style='margin: 16px 0;'>")
+            with gr.Row():
+                modelBtn = gr.Button("🤖 Model", variant="secondary", size="sm", elem_classes="sidebar-btn")
+                settingPromptBtn = gr.Button("⚙️ Prompt", variant="secondary", size="sm", elem_classes="sidebar-btn")
+                historyBtn = gr.Button("📜 History", variant="secondary", size="sm", elem_classes="sidebar-btn")
+            # Place modals/drawers at the end of the sidebar so they overlay the lower part
+            with gr.Group(visible=False, elem_classes="modal") as system_prompt_modal:
+                gr.HTML("<h3>System Prompt Configuration</h3>")
+                systemPromptInput = gr.Textbox(
+                    value=SystemPrompt,
+                    label="System Prompt",
+                    lines=10,
+                    elem_classes="modal-input"
+                )
+                with gr.Row():
+                    modal_ok_btn = gr.Button("Save", variant="primary")
+                    modal_cancel_btn = gr.Button("Cancel", variant="secondary")
+
+            with gr.Group(visible=False, elem_classes="modal") as model_modal:
+                gr.HTML("<h3>Select AI Model</h3>")
+                with gr.Row(elem_classes="model-select-row"):
+                    for i, model in enumerate(AVAILABLE_MODELS):
+                        model_select_btn = gr.Button(
+                            value=model['name'],
+                            variant="secondary",
+                            size="sm",
+                            elem_classes="model-card-btn"
+                        )
+                        model_select_btn.click(
+                            lambda m=model: (m, gr.update(visible=False), f"**Model:** {m['name']}", update_image_input_visibility(m)), 
+                            outputs=[current_model, model_modal, current_model_display, image_input]
+                        )
+
+            with gr.Group(visible=False, elem_classes="drawer") as history_drawer:
+                gr.HTML("<h3>Generation History</h3>")
+                history_output = gr.Chatbot(show_label=False, height=400, elem_classes="history_chatbot")
+        # Main area
+        with gr.Column(scale=1, min_width=700, elem_classes="main-area"):
+            with gr.Row():
+                current_model_display
+            with gr.Tabs(elem_classes="code-tabs") as tabs:
+                with gr.Tab("Code Editor", elem_classes="code-tab"):
+                    code_output = gr.Code(
+                        language="html", 
+                        lines=25, 
+                        interactive=False,
+                        elem_classes="code-editor"
                     )
-                    
-                    content = ""
-                    for chunk in completion:
-                        if chunk.choices[0].delta.content:
-                            content += chunk.choices[0].delta.content
-                            yield {
-                                code_output: content,
-                                state_tab: gr.update(active_key="loading"),
-                                code_drawer: gr.update(open=True),
-                            }
-                    
-                    # Final response
-                    _history = messages_to_history(messages + [{
-                        'role': 'assistant',
-                        '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),
-                    }
-                    
-                except Exception as e:
-                    error_message = f"Error: {str(e)}"
-                    yield {
-                        code_output: error_message,
-                        state_tab: gr.update(active_key="empty"),
-                        code_drawer: gr.update(open=True),
-                    }
-
-            btn.click(
-                generation_code,
-                inputs=[input, image_input, setting, history, current_model],
-                outputs=[code_output, history, sandbox, state_tab, code_drawer]
+                with gr.Tab("Live Preview", elem_classes="preview-tab"):
+                    sandbox = gr.HTML(elem_classes="html_content")
+            status_indicator = gr.HTML(
+                '<div class="status-indicator" id="status">Ready to generate code</div>',
+                elem_classes="status-bar"
             )
-            
-            clear_btn.click(clear_history, inputs=[], outputs=[history])
-
 
+    # Event handlers
+    settingPromptBtn.click(
+        fn=lambda current: toggle_panel(current, "prompt"),
+        inputs=[open_panel],
+        outputs=[system_prompt_modal, model_modal, history_drawer, open_panel]
+    )
+    modelBtn.click(
+        fn=lambda current: toggle_panel(current, "model"),
+        inputs=[open_panel],
+        outputs=[system_prompt_modal, model_modal, history_drawer, open_panel]
+    )
+    historyBtn.click(
+        fn=lambda current, history: (*toggle_panel(current, "history")[:3], history, toggle_panel(current, "history")[3]),
+        inputs=[open_panel, history],
+        outputs=[system_prompt_modal, model_modal, history_drawer, history_output, open_panel]
+    )
+    modal_ok_btn.click(
+        lambda input: ({"system": input}, gr.update(visible=False)), 
+        inputs=[systemPromptInput], 
+        outputs=[setting, system_prompt_modal]
+    )
+    modal_cancel_btn.click(lambda: gr.update(visible=False), outputs=[system_prompt_modal])
+    btn.click(
+        generation_code,
+        inputs=[input, image_input, setting, history, current_model],
+        outputs=[code_output, history, sandbox, status_indicator]
+    )
+    clear_btn.click(clear_history, outputs=[history])
+
+def toggle_panel(current, panel):
+    # If the requested panel is already open, close all
+    if current == panel:
+        return (gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), None)
+    # Otherwise, open the requested panel and close others
+    if panel == "prompt":
+        return (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), "prompt")
+    elif panel == "model":
+        return (gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), "model")
+    elif panel == "history":
+        return (gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), "history")
+    else:
+        return (gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), None)
 
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)

requirements.txt

@@ -1,3 +1,2 @@
-modelscope_studio
 git+https://github.com/huggingface/huggingface_hub.git
 gradio[oauth]