update

app.css

@@ -1,614 +0,0 @@
-/* Modern coding editor styling for AnyCoder */
-
-:root {
-    --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: light) {
-    :root {
-        --text-color: #333333;
-        --bg-color: #f3f3f3;
-        --surface-color: #ffffff;
-        --border-color: #e1e1e1;
-        --html-bg: #ffffff;
-        --code-bg: #f8f8f8;
-        --sidebar-bg: #f5f5f5;
-    }
-}
-
-/* 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;
-}
-
-.app-header h1 {
-    margin: 0;
-    color: var(--text-color);
-    font-size: 24px;
-    font-weight: 600;
-}
-
-.app-header .subtitle {
-    color: var(--text-color);
-    opacity: 0.7;
-    font-size: 14px;
-    margin-left: auto;
-}
-
-/* Main layout */
-.gradio-container {
-    background: var(--bg-color);
-    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;
-}
-
-/* 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;
-    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);
-}
-
-/* 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;
-}
-
-.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;
-    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%;
-    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;
-}
-
-/* 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

@@ -307,159 +307,97 @@ def generation_code(query: Optional[str], image: Optional[gr.Image], _setting: D
         }
 
 # Main application
-with gr.Blocks(css_paths="app.css", title="AnyCoder - AI Code Generator") as demo:
+with gr.Blocks(theme=gr.themes.Base(), title="AnyCoder - AI Code Generator") as demo:
     history = gr.State([])
     setting = gr.State({
         "system": SystemPrompt,
     })
     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"
+    with gr.Sidebar():
+        gr.Markdown("# AnyCoder\nAI-Powered Code Generator")
+        gr.Markdown("""Describe your app or UI in plain English. Optionally upload a UI image (for ERNIE model). Click Generate to get code and preview.""")
+        input = gr.Textbox(
+            label="Describe your application",
+            placeholder="e.g., Create a todo app with add, delete, and mark as complete functionality",
+            lines=2
+        )
+        image_input = gr.Image(
+            label="Upload UI design image (ERNIE-4.5-VL only)",
+            visible=False
+        )
+        with gr.Row():
+            btn = gr.Button("Generate", variant="primary", size="sm")
+            clear_btn = gr.Button("Clear", variant="secondary", size="sm")
+        gr.Markdown("### Quick Examples")
+        for i, demo_item in enumerate(DEMO_LIST[:5]):
+            demo_card = gr.Button(
+                value=demo_item['title'], 
+                variant="secondary",
+                size="sm"
             )
-            image_input = gr.Image(
-                label="Upload UI design image (ERNIE-4.5-VL only)",
-                visible=False,
-                elem_classes="image-input"
+            demo_card.click(
+                fn=lambda idx=i: gr.update(value=DEMO_LIST[idx]['description']),
+                outputs=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"
-                    )
-                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"
+        gr.Markdown("---")
+        model_dropdown = gr.Dropdown(
+            choices=[model['name'] for model in AVAILABLE_MODELS],
+            value=AVAILABLE_MODELS[0]['name'],
+            label="Select Model"
+        )
+        def on_model_change(model_name):
+            for m in AVAILABLE_MODELS:
+                if m['name'] == model_name:
+                    return m, f"**Model:** {m['name']}", update_image_input_visibility(m)
+            return AVAILABLE_MODELS[0], f"**Model:** {AVAILABLE_MODELS[0]['name']}", update_image_input_visibility(AVAILABLE_MODELS[0])
+        model_display = gr.Markdown(f"**Model:** {AVAILABLE_MODELS[0]['name']}")
+        model_dropdown.change(
+            on_model_change,
+            inputs=model_dropdown,
+            outputs=[current_model, model_display, image_input]
+        )
+        with gr.Accordion("System Prompt", open=False):
+            systemPromptInput = gr.Textbox(
+                value=SystemPrompt,
+                label="System Prompt",
+                lines=10
             )
+            save_prompt_btn = gr.Button("Save", variant="primary")
+            def save_prompt(input):
+                return {setting: {"system": input}}
+            save_prompt_btn.click(save_prompt, inputs=systemPromptInput, outputs=setting)
+
+    with gr.Column():
+        model_display
+        with gr.Tabs():
+            with gr.Tab("Code Editor"):
+                code_output = gr.Code(
+                    language="html", 
+                    lines=25, 
+                    interactive=False,
+                    label="Generated Code"
+                )
+            with gr.Tab("Live Preview"):
+                sandbox = gr.HTML(label="Live Preview")
+            with gr.Tab("History"):
+                history_output = gr.Chatbot(show_label=False, height=400)
+        status_indicator = gr.Markdown(
+            'Ready to generate code',
+        )
 
     # 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)
+    # History tab update
+    def update_history(history):
+        return history
+    history_output.change(update_history, inputs=history, outputs=history_output)
 
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)

pyproject.toml

@@ -1,36 +0,0 @@
-[project]
-name = "anychat"
-version = "0.1.0"
-description = ""
-readme = "README.md"
-requires-python = ">=3.10"
-dependencies = [
-    "gradio>=5.0.0",
-    "huggingface-hub>=0.30.0",
-    "modelscope-studio>=1.2.0",
-]
-
-[tool.uv.sources]
-
-
-[tool.ruff]
-line-length = 119
-
-[tool.ruff.lint]
-select = [
-    "E",
-    "F",
-    #"I",
-    "N",
-    "S",
-    "T",
-    "UP",
-    "W",
-]
-ignore = ["T201"]
-unfixable = [
-    "F401", # unused-import
-]
-
-[tool.ruff.format]
-docstring-code-format = true