Update app.py

app.py

@@ -1,5 +1,6 @@
 import os
 from typing import Dict, List, Optional, Tuple
+import logging
 import asyncio
 
 import gradio as gr
@@ -9,18 +10,22 @@ from config import (
 )
 from api_clients import generation_code, tavily_client
 from chat_processing import (
-    clear_history, history_to_chatbot_messages, update_image_input_visibility,
-    get_gradio_language, send_to_sandbox,
+    clear_history, history_to_chatbot_messages, update_image_input_visibility, update_submit_button,
+    get_gradio_language, send_to_sandbox
 )
 from file_processing import create_multimodal_message
 from web_extraction import enhance_query_with_search
 from ux_components import create_top_demo_cards
 
 # --- Gradio App UI ---
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
 
-
-def demo_card_click(e: gr.EventData):
+def demo_card_click(evt: gr.EventData):
+    """Handles clicks on the demo cards to populate the input textbox."""
+    # This function seems complex for its purpose. Gradio's event data can be tricky.
+    # A simpler approach might be to directly pass the description.
+    # For now, keeping the logic but adding comments.
     try:
         # Get the index from the event data
         if hasattr(e, '_data') and e._data:
@@ -60,6 +65,7 @@ with gr.Blocks(
     ),
     title="AnyCoder - AI Code Generator"
 ) as demo:
+    gr.HTML("<h1 align='center'>AnyCoder - AI Code Generator</h1>")
     history = gr.State([])
     setting = gr.State({
         "system": HTML_SYSTEM_PROMPT,
@@ -67,130 +73,126 @@ with gr.Blocks(
     current_model = gr.State(AVAILABLE_MODELS[0])  # Moonshot Kimi-K2
     open_panel = gr.State(None)
     last_login_state = gr.State(None)
-    with gr.Sidebar():
-        input = gr.Textbox(
-            label="What would you like to build?",
-            placeholder="Describe your application...",
-            lines=3,
-            visible=True  # Always visible
-        )
-        # Language dropdown for code generation
-        language_choices = [
-            "python", "c", "cpp", "markdown", "latex", "json", "html", "css", "javascript", "jinja2", "typescript", "yaml", "dockerfile", "shell", "r", "sql", "sql-msSQL", "sql-mySQL", "sql-mariaDB", "sql-sqlite", "sql-cassandra", "sql-plSQL", "sql-hive", "sql-pgSQL", "sql-gql", "sql-gpSQL", "sql-sparkSQL", "sql-esper"
-        ]
-        language_dropdown = gr.Dropdown(
-            choices=language_choices,
-            value="html",
-            label="Code Language",
-            visible=True  # Always visible
-        )
-        website_url_input = gr.Textbox(
-            label="Website URL for redesign",
-            placeholder="https://example.com",
-            lines=1,
-            visible=True  # Always visible
-        )
-        file_input = gr.File(
-            label="Reference file",
-            file_types=[".pdf", ".txt", ".md", ".csv", ".docx", ".jpg", ".jpeg", ".png", ".bmp", ".tiff", ".tif", ".gif", ".webp"],
-            visible=True  # Always visible
-        )
-        image_input = gr.Image(
-            label="UI design image",
-            visible=False  # Hidden by default; shown only for ERNIE-VL or GLM-VL
-        )
-        with gr.Row():
-            btn = gr.Button("Generate", variant="primary", size="lg", scale=2, visible=True)  # Always visible
-            clear_btn = gr.Button("Clear", variant="secondary", size="sm", scale=1, visible=True)  # Always visible
-        search_toggle = gr.Checkbox(
-            label="🔍 Web search",
-            value=False,
-            visible=True  # Always visible
-        )
-        model_dropdown = gr.Dropdown(
-            choices=[model['name'] for model in AVAILABLE_MODELS],
-            value=AVAILABLE_MODELS[0]['name'],  # Moonshot Kimi-K2
-            label="Model",
-            visible=True  # Always visible
-        )
-        gr.Markdown("**Quick start**", visible=True)
-        quick_examples_col = create_top_demo_cards(input)
-
-        if not tavily_client:
-            gr.Markdown("⚠️ Web search unavailable", visible=True)
-        else:
-            gr.Markdown("✅ Web search available", visible=True)
-        model_display = gr.Markdown(f"**Model:** {AVAILABLE_MODELS[0]['name']}", visible=True)  # Moonshot Kimi-K2
-        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])  # Moonshot Kimi-K2 fallback
-
-        def save_prompt(input):
-            return {setting: {"system": input}}
-        model_dropdown.change(
-            on_model_change,
-            inputs=model_dropdown,
-            outputs=[current_model, model_display, image_input]
-        )
-        with gr.Accordion("Advanced", open=False, visible=True) as advanced_accordion:
-            systemPromptInput = gr.Textbox(
-                value=HTML_SYSTEM_PROMPT,
-                label="System prompt",
-                lines=5
-            )
-            save_prompt_btn = gr.Button("Save", variant="primary", size="sm")
-            save_prompt_btn.click(save_prompt, inputs=systemPromptInput, outputs=setting)
 
-    with gr.Column():
-        with gr.Tabs():
-            with gr.Tab("Code"):
-                code_output = gr.Code(
-                    language="html", 
-                    lines=25, 
-                    interactive=False,
-                    label="Generated code"
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("## Controls")
+            input = gr.Textbox(
+                label="What would you like to build?",
+                placeholder="Describe your application...",
+                lines=4,
+                interactive=True
+            )
+            # Language dropdown for code generation
+            language_choices = [
+                "python", "c", "cpp", "markdown", "latex", "json", "html", "css", "javascript", "jinja2", "typescript", "yaml", "dockerfile", "shell", "r", "sql"
+            ]
+            language_dropdown = gr.Dropdown(
+                choices=language_choices,
+                value="html",
+                label="Code Language"
+            )
+            website_url_input = gr.Textbox(
+                label="Website URL for redesign",
+                placeholder="https://example.com",
+                lines=1
+            )
+            file_input = gr.File(
+                label="Reference file",
+                file_types=[".pdf", ".txt", ".md", ".csv", ".docx", ".jpg", ".jpeg", ".png", ".bmp", ".tiff", ".tif", ".gif", ".webp"]
+            )
+            image_input = gr.Image(
+                label="UI design image",
+                visible=False  # Hidden by default; shown only for ERNIE-VL or GLM-VL
+            )
+            with gr.Row():
+                btn = gr.Button("Generate", variant="primary", size="lg", scale=2, interactive=False)
+                clear_btn = gr.Button("Clear", variant="secondary", size="sm", scale=1)
+            
+            gr.Markdown("---")
+            gr.Markdown("### Quick Examples")
+            quick_examples_col = create_top_demo_cards(input)
+            
+            gr.Markdown("---")
+            gr.Markdown("### Settings")
+            search_toggle = gr.Checkbox(
+                label="🔍 Web search",
+                value=False,
+            )
+            if not tavily_client:
+                gr.Markdown("⚠️ Web search unavailable", visible=True)
+            
+            model_dropdown = gr.Dropdown(
+                choices=[model['name'] for model in AVAILABLE_MODELS],
+                value=AVAILABLE_MODELS[0]['name'],  # Moonshot Kimi-K2
+                label="Model",
+            )
+            
+            with gr.Accordion("Advanced Settings", open=False):
+                systemPromptInput = gr.Textbox(
+                    value=HTML_SYSTEM_PROMPT,
+                    label="System Prompt",
+                    lines=5
                 )
-            with gr.Tab("Preview"):
-                sandbox = gr.HTML(label="Live preview")
-            with gr.Tab("History"):
-                history_output = gr.Chatbot(show_label=False, height=400, type="messages")
+                save_prompt_btn = gr.Button("Save Prompt", variant="secondary", size="sm")
+        
+        with gr.Column(scale=3):
+            model_display = gr.Markdown(f"**Model:** {AVAILABLE_MODELS[0]['name']}", visible=True)
+            with gr.Tabs():
+                with gr.Tab("Code"):
+                    code_output = gr.Code(
+                        language="html", 
+                        lines=28, 
+                        interactive=False,
+                        label="Generated Code"
+                    )
+                with gr.Tab("Preview"):
+                    sandbox = gr.HTML(label="Live Preview")
+                with gr.Tab("History"):
+                    history_output = gr.Chatbot(show_label=False, height=600, type="messages")
 
     # --- Event Handlers ---
+    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])
+
+    def save_prompt(prompt_text):
+        return {setting: {"system": prompt_text}}
+
     def update_code_language(language):
         return gr.update(language=get_gradio_language(language))
 
-    language_dropdown.change(update_code_language, inputs=language_dropdown, outputs=code_output)
-
     def preview_logic(code, language):
         if language == "html":
             return send_to_sandbox(code)
         else:
             return "<div style='padding:1em;color:#888;text-align:center;'>Preview is only available for HTML.</div>"
 
-
-    # Use asyncio.create_task to ensure the generation_code coroutine is properly awaited
-    def submit_query(*args):
-        task = asyncio.create_task(generation_code(*args))  # Create a task
-        async def wrapper():
-            async for update in task:
+    async def submit_query(*args):
+        """Handles the main code generation logic asynchronously."""
+        # This is the correct way to handle async generators in Gradio
+        with gr.Tabs():
+            async for update in generation_code(*args):
                 yield update
-        return wrapper() # Return the wrapper function
 
     btn.click(fn=submit_query,
               inputs=[input, image_input, file_input, website_url_input, setting, history, current_model, search_toggle, language_dropdown],
               outputs=[code_output, history, sandbox, history_output])
 
+    input.change(update_submit_button, inputs=input, outputs=btn)
 
+    model_dropdown.change(
+        on_model_change,
+        inputs=model_dropdown,
+        outputs=[current_model, model_display, image_input]
+    )
+    save_prompt_btn.click(save_prompt, inputs=systemPromptInput, outputs=setting)
     # Update preview when code or language changes
+    language_dropdown.change(update_code_language, inputs=language_dropdown, outputs=code_output)
     code_output.change(preview_logic, inputs=[code_output, language_dropdown], outputs=sandbox)
-    language_dropdown.change(preview_logic, inputs=[code_output, language_dropdown], outputs=sandbox)
     clear_btn.click(clear_history, outputs=[history, history_output, file_input, website_url_input])
 
-
-if __name__ == "__main__":
-    demo.queue(api_open=False, default_concurrency_limit=20).launch(ssr_mode=True, mcp_server=False, show_api=False)
-
 if __name__ == "__main__":
     demo.queue(api_open=False, default_concurrency_limit=20).launch(ssr_mode=True, mcp_server=False, show_api=False)