Update app.py

app.py

@@ -14,88 +14,20 @@ from chat_processing import (
     get_gradio_language, send_to_sandbox
 )
 from file_processing import create_multimodal_message
-from web_extraction import enhance_query_with_search
+from web_extraction import enhance_query_with_search, perform_web_search
 from ux_components import create_top_demo_cards
 
 # --- Gradio App UI ---
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
 
-
-CSS = """
-/* General App Styling & Font */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-body, .gradio-container {
-    font-family: 'Inter', sans-serif;
-    background-color: #f8f9fa; /* Light gray background */
-    color: #212529;
-}
-
-/* Main Title */
-h1 {
-    color: #0d6efd; /* A more vibrant blue */
-    font-weight: 700;
-    letter-spacing: -1.5px;
-    text-align: center;
-    padding: 1rem 0;
-}
-
-/* Column Headers */
-.col-header {   
-    color: #495057;
-    font-weight: 600;
-    text-transform: uppercase;
-    font-size: 0.85rem;
-    letter-spacing: 0.75px;
-    border-bottom: 2px solid #e9ecef;
-    padding-bottom: 10px;
-    margin-bottom: 20px;
-    text-align: left;
-}
-
-/* Consistent Label Styling */
-.gradio-container .label {
-    font-weight: 500;
-    color: #343a40;
-}
-
-/* Custom Button Styling */
-.gradio-container .gr-button {
-    border-radius: 8px !important;
-    font-size: 1rem !important;
-    font-weight: 500;
-    transition: all 0.2s ease-in-out;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-}
-.gradio-container .gr-button-primary {
-    background: linear-gradient(45deg, #0d6efd, #0dcaf0) !important;
-    color: white !important;
-    border: none !important;
-}
-.gradio-container .gr-button-primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-}
-
-/* Input Textbox Styling */
-.gradio-container textarea {
-    border-radius: 8px !important;
-    border: 1px solid #ced4da !important;
-}
-.gradio-container textarea:focus {
-    border-color: #80bdff !important;
-    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
-}
-
-/* Tabs Styling */
-.gradio-container .tabs > .tab-nav > button {
-    font-weight: 600;
-    color: #6c757d;
-}
-.gradio-container .tabs > .tab-nav > button.selected {
-    color: #0d6efd;
-    border-bottom: 3px solid #0d6efd;
-}
-"""
+# Update the Gradio theme to use modern styling
+theme = gr.themes.Base(
+    primary_hue=gr.themes.colors.blue,
+    secondary_hue=gr.themes.colors.blue,  # Keeping it consistent
+    neutral_hue=gr.themes.colors.neutral,
+    font=gr.themes.GoogleFont("Inter"),
+    font_mono=gr.themes.GoogleFont("JetBrains Mono"),
+)
 
 def demo_card_click(evt: gr.EventData):
     """Handles clicks on the demo cards to populate the input textbox."""
@@ -130,19 +62,29 @@ def demo_card_click(evt: gr.EventData):
 
 with gr.Blocks(
     theme=gr.themes.Base(
-        primary_hue="blue",
-        secondary_hue="sky",  # Changed secondary hue for a more modern palette
-        neutral_hue="gray",
+        primary_hue=gr.themes.colors.blue,
+        secondary_hue=gr.themes.colors.blue,
+        neutral_hue=gr.themes.colors.neutral,
         font=gr.themes.GoogleFont("Inter"),
         font_mono=gr.themes.GoogleFont("JetBrains Mono"),
-        text_size=gr.themes.sizes.text_md,
-        spacing_size=gr.themes.sizes.spacing_md,
-        radius_size=gr.themes.sizes.radius_md
+        text_size=gr.themes.sizes.text_lg,
+        spacing_size=gr.themes.sizes.spacing_lg,
+        radius_size=gr.themes.sizes.radius_lg,
     ),
     title="AnyCoder - AI Code Generator",
-    css="static/style.css"  # Load the external CSS
+    css="""
+    .col-header { text-transform: uppercase; font-size: 0.9em; letter-spacing: 0.05em; color: #555; border-bottom: 1px solid #eee; padding-bottom: 0.5em; margin-bottom: 1em; }
+    .col-header + div { margin-top: 0; } /* Remove extra spacing */
+    .gradio-container .gr-button-primary { background: linear-gradient(to right, #42a5f5, #4791db); color: white; } /* Blue gradient */
+    .gradio-container .gr-button-secondary { background-color: #e3f2fd; color: #1e88e5; } /* Lighter blue */
+    .gradio-container .gr-button-small { font-size: 0.875rem; padding: 0.5rem 1rem; }  /* Smaller buttons*/
+    .gradio-container .gr-textbox, .gradio-container .gr-dropdown { border-radius: 6px; }
+    .gradio-container .tabs { border-bottom: 2px solid #e0f2f7; } /* Tabs container line */
+    .gradio-container .tabitem { padding: 1rem; }  /* Tab content padding*/
+    .gradio-container .gr-code { border-radius: 6px; background-color: #f5f5f5; } /* Code background */
+    """
 ) as demo:
-    gr.HTML("<h1 align='center'>AnyCoder - AI Code Generator</h1>")
+    gr.HTML("<h1 align='center'>Shasha - AI Code Generator</h1>")
     history = gr.State([])
     setting = gr.State({
         "system": HTML_SYSTEM_PROMPT,
@@ -183,7 +125,7 @@ with gr.Blocks(
                 visible=False  # Hidden by default; shown only for ERNIE-VL or GLM-VL
             )
             with gr.Row(equal_height=True):  #Keep buttons vertically aligned
-                btn = gr.Button("Generate", variant="primary", size="lg", scale=2, interactive=False)
+                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("---",)
@@ -211,7 +153,7 @@ with gr.Blocks(
                     label="System Prompt",
                     lines=5
                 )
-                save_prompt_btn = gr.Button("Save Prompt", variant="secondary", size="sm", min_width=100)
+                save_prompt_btn = gr.Button("Save Prompt", variant="secondary", size="sm", min_width=100, elem_classes="gr-button-small")
 
         
         with gr.Column(scale=3):
@@ -222,7 +164,7 @@ with gr.Blocks(
                         language="html", 
                         lines=28, 
                         interactive=False,
-                        label="Generated Code",
+                        label="Generated Code"
                     )
                 with gr.Tab("Preview"):
                     sandbox = gr.HTML(label="Live Preview")