Update app.py

app.py

@@ -152,64 +152,82 @@ def generation_code(
 # UI LAYOUT & EVENT WIRING
 # ==============================================================================
 
-with gr.Blocks(theme=gr.themes.Soft(), title="ShashaCode - AI Code Generator") as demo:
+# Custom CSS for a more professional and modern look
+CUSTOM_CSS = """
+body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
+#main_title { text-align: center; font-size: 2.5rem; font-weight: 700; color: #1a202c; margin: 1.5rem 0 0.5rem 0; }
+#subtitle { text-align: center; color: #4a5568; margin-bottom: 2.5rem; font-size: 1.1rem; }
+.gradio-container { background-color: #f7fafc; }
+/* Custom styling for the generate button to make it stand out */
+#gen_btn { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
+"""
+
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue", secondary_hue="sky"), title="AnyCoder - AI Code Generator", css=CUSTOM_CSS) as demo:
     # --- State Management ---
     history_state = gr.State([])
     initial_model = AVAILABLE_MODELS[0]
     model_state = gr.State(initial_model)
 
     # --- UI Definition ---
-    with gr.Sidebar():
-        gr.Markdown("## 🚀Shasha AI")
-        gr.Markdown("Your personal AI partner for generating, modifying, and understanding code.")
-        
-        model_choices = [model["name"] for model in AVAILABLE_MODELS]
-
-        model_dd = gr.Dropdown(
-            choices=model_choices,
-            value=initial_model["name"],
-            label="🤖 Select AI Model",
-            info="Different models have different strengths. Experiment!"
-        )
+    gr.Markdown("# 🚀 Shasha AI", elem_id="main_title")
+    gr.Markdown("Your personal AI partner for generating, modifying, and understanding code.", elem_id="subtitle")
+
+    with gr.Row(equal_height=False):
+        # Left column for controls and inputs
+        with gr.Column(scale=1):
+            gr.Markdown("### 1. Select Model")
+            model_choices = [model["name"] for model in AVAILABLE_MODELS]
+            model_dd = gr.Dropdown(
+                choices=model_choices,
+                value=initial_model["name"],
+                label="AI Model",
+                info="Different models have different strengths."
+            )
 
-        with gr.Accordion("🛠️ Inputs & Context", open=True):
-            prompt_in = gr.Textbox(label="Prompt", lines=3, placeholder="e.g., 'Create a dark-themed login form.'")
-            file_in = gr.File(label="📎 Attach File (Optional)", type="filepath")
-            url_site = gr.Textbox(label="🌐 Scrape Website (Optional)", placeholder="https://example.com")
-        
-        with gr.Accordion("⚙️ Settings", open=False):
+            gr.Markdown("### 2. Provide Context")
+            with gr.Tabs():
+                with gr.Tab("📝 Prompt"):
+                    prompt_in = gr.Textbox(
+                        label="Your Request",
+                        lines=7,
+                        placeholder="e.g., 'Create a modern, responsive landing page for a SaaS product.'",
+                        show_label=False
+                    )
+                with gr.Tab("📄 File"):
+                    file_in = gr.File(label="Attach File (Optional)", type="filepath")
+                with gr.Tab("🌐 Website"):
+                    url_site = gr.Textbox(label="Scrape Website (Optional)", placeholder="https://example.com")
+
+            gr.Markdown("### 3. Configure Output")
             language_dd = gr.Dropdown(
                 choices=["html", "python", "transformers.js", "sql", "javascript", "css"],
                 value="html",
-                label="🎯 Target Language"
+                label="Target Language"
             )
-            search_chk = gr.Checkbox(label="🧠 Enable Web Search", info="Enhances the AI's knowledge with real-time information.")
-        
-        with gr.Row():
-            gen_btn = gr.Button("Generate Code", variant="primary", scale=2)
-            clr_btn = gr.Button("Clear", variant="secondary", scale=1)
-
-    with gr.Column():
-        with gr.Tabs():
-            with gr.Tab("💻 Code", id="code_tab"):
-                code_out = gr.Code(label="Generated Code", language="html")
-            with gr.Tab("👁️ Live Preview", id="preview_tab"):
-                preview_out = gr.HTML(label="Live Preview")
-            with gr.Tab("📜 History", id="history_tab"):
-                # Removed deprecated 'bubble_full_width' parameter
-                chat_out = gr.Chatbot(label="Conversation History", type="messages")
+            search_chk = gr.Checkbox(label="Enable Web Search", info="Enhances AI with real-time info.")
+
+            with gr.Row():
+                clr_btn = gr.Button("Clear Session", variant="secondary")
+                gen_btn = gr.Button("Generate Code", variant="primary", elem_id="gen_btn")
+
+        # Right column for outputs
+        with gr.Column(scale=2):
+            with gr.Tabs() as main_tabs:
+                with gr.Tab("💻 Code", id="code_tab"):
+                    code_out = gr.Code(label="Generated Code", language="html", interactive=True)
+                with gr.Tab("👁️ Live Preview", id="preview_tab"):
+                    preview_out = gr.HTML(label="Live Preview")
+                with gr.Tab("📜 History", id="history_tab"):
+                    chat_out = gr.Chatbot(label="Conversation History", type="messages")
 
     # --- Event Wiring ---
-    # Event listeners must be defined within the gr.Blocks context.
-
     def on_model_change(model_name: str) -> Dict:
         """Updates the model_state when the user selects a new model."""
         model_details = get_model_details(model_name)
         return model_details or initial_model
-    
-    model_dd.change(fn=on_model_change, inputs=[model_dd], outputs=[model_state])
 
-    language_dd.change(fn=lambda lang: gr.Code(language=lang), inputs=[language_dd], outputs=[code_out])
+    model_dd.change(fn=on_model_change, inputs=[model_dd], outputs=[model_state])
+    language_dd.change(fn=lambda lang: gr.update(language=lang), inputs=[language_dd], outputs=[code_out])
 
     gen_btn.click(
         fn=generation_code,
@@ -221,12 +239,20 @@ with gr.Blocks(theme=gr.themes.Soft(), title="ShashaCode - AI Code Generator") a
     )
 
     def clear_session():
-        """Resets the UI components and state to their initial values."""
-        return "", [], "", [], None, ""
-    
+        """Resets all UI components and state to their initial values."""
+        return (
+            "",      # prompt_in
+            None,    # file_in
+            "",      # url_site
+            [],      # history_state
+            "",      # code_out
+            "",      # preview_out
+            []       # chat_out
+        )
+
     clr_btn.click(
         fn=clear_session,
-        outputs=[prompt_in, history_state, preview_out, chat_out, file_in, url_site],
+        outputs=[prompt_in, file_in, url_site, history_state, code_out, preview_out, chat_out],
         queue=False
     )