Update app.py

app.py

@@ -3,39 +3,36 @@
 
 import time
 import traceback
-import requests
 import gradio as gr
 
-# New Imports for Streaming
+# New Imports for Streaming (must be in your requirements.txt)
+# pip install google-genai groq
 from google import genai
 from groq import Groq
 from groq.types.chat import ChatCompletionChunk
 
+
 # ---------------------------
 # HARDCODED KEYS (TESTING)
 # ---------------------------
 GEMINI_KEY = "AIzaSyAPfDiu2V_aD6un00qHt5bkISm6C0Pkx7o"
-# NOTE: Gemini Python SDK handles the URL internally for streaming
-# GEMINI_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent"
-
 GROQ_KEY = "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"
-# NOTE: Groq Python SDK handles the URL internally
-GROQ_URL = "https://api.groq.com/openai/v1/chat/completions" 
 GROQ_MODEL = "meta-llama/llama-4-scout-17b-16e-instruct"
 
 # Initialize Clients
+# NOTE: Initialization inside the file is fine for testing, but in a real app, 
+# this should be wrapped in error handling or moved to environment variables.
 try:
-    # Use the hardcoded key directly in the client for testing
     GEMINI_CLIENT = genai.Client(api_key=GEMINI_KEY)
     GROQ_CLIENT = Groq(api_key=GROQ_KEY)
 except Exception as e:
-    # This prevents the app from crashing if keys are completely invalid/missing
     print(f"WARNING: Failed to initialize one or both API clients: {e}")
     GEMINI_CLIENT = None
     GROQ_CLIENT = None
 
+
 # ---------------------------
-# Model callers (UPDATED FOR STREAMING)
+# Model callers (STREAMING GENERATORS)
 # ---------------------------
 def call_gemini_stream(message, history):
     # History format conversion for the SDK
@@ -51,13 +48,12 @@ def call_gemini_stream(message, history):
 
     # Use the streaming method and yield chunks
     response_stream = GEMINI_CLIENT.models.generate_content_stream(
-        model="gemini-2.0-flash", # Using the name directly
+        model="gemini-2.0-flash", 
         contents=contents
     )
     
     full_response = ""
     for chunk in response_stream:
-        # Check if text content exists and is not empty
         if chunk.text:
             full_response += chunk.text
             yield full_response
@@ -78,12 +74,11 @@ def call_llama_via_groq_stream(message, history):
     response_stream = GROQ_CLIENT.chat.completions.create(
         model=GROQ_MODEL,
         messages=msgs,
-        stream=True # Critical for streaming
+        stream=True
     )
     
     full_response = ""
     for chunk in response_stream:
-        # Check if the chunk contains content delta
         if isinstance(chunk, ChatCompletionChunk) and chunk.choices:
             content = chunk.choices[0].delta.content
             if content:
@@ -91,107 +86,134 @@ def call_llama_via_groq_stream(message, history):
                 yield full_response
 
 # ---------------------------
-# Chat function (UPDATED to be a GENERATOR)
+# Chat function (Main generator)
 # ---------------------------
 def chat_fn(message, history, model_choice):
     try:
         if model_choice == "Google Gemini 2.0 Flash":
-            # Delegate to the streaming function
             yield from call_gemini_stream(message, history) 
         elif model_choice == "Meta LLaMA 4":
-            # Delegate to the streaming function
             yield from call_llama_via_groq_stream(message, history)
         else:
             yield f"Unknown model: {model_choice}"
     except Exception as e:
-        yield f"Error: {e}\n{traceback.format_exc()}"
+        yield f"Error: An API error occurred: {type(e).__name__}. Check server logs."
 
 # ---------------------------
-# CSS (UPDATED for smoother dropdown look)
+# CSS (Combined for Layout and Style)
 # ---------------------------
 css = """
 /* Topbar layout */
-#topbar { display:flex; justify-content:space-between; align-items:center;
-          padding:18px 28px; background:#0f0f0f; border-bottom:1px solid #1f1f1f; }
-#title { font-weight:800; color:#ffcc33; font-size:20px; }
+#topbar { 
+    display:flex; justify-content:space-between; align-items:center;
+    padding:18px 28px; background:#0f0f0f; border-bottom:1px solid #1f1f1f;
+    min-height: 80px; 
+}
+
+/* Main App Title */
+#main-app-title { 
+    font-weight:800; color:#ffcc33; font-size:20px; 
+    margin: 0;
+}
 
 /* ------------------------------------- */
-/* ** DROPDOWN STYLING FOR SMOOTH LOOK ** */
+/* ** COMPACT DROPDOWN AND TITLE AREA ** */
 /* ------------------------------------- */
-#model_dropdown .gr-dropdown-wrap {
-    /* Hide the default arrow container for a cleaner look */
-    border: none !important;
-    box-shadow: none !important;
+
+/* Style the static title above the dropdown (e.g., "Google") */
+#model-title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #bbb;
+    margin-bottom: 2px !important;
+    padding: 0 !important;
+    line-height: 1.2;
+}
+
+/* Force the entire dropdown component to a small width */
+#model_dropdown {
+    max-width: 140px; 
+    min-width: 100px;
+}
+
+/* Hide Gradio's default label/placeholder text if any */
+#model_dropdown .gr-dropdown-label {
+    display: none !important;
 }
 
+/* Style the actual dropdown button to match the dark aesthetic */
 #model_dropdown .gr-dropdown-wrap > button {
-    /* Main button styling (the collapsed box) */
     background:#1a1a1a !important; 
-    border:1px solid #2b2b2b !important;
+    border:1px solid #333 !important;
     color:#ddd !important; 
-    padding:10px 15px !important; 
-    border-radius:10px !important;  
+    padding:8px 10px !important; /* Smaller padding */
+    border-radius:8px !important;  
     box-shadow:none !important;
-    /* Smooth transition for hover effect */
     transition: all 0.2s ease-in-out;
+    font-size: 14px; 
+    height: auto !important;
 }
 #model_dropdown .gr-dropdown-wrap > button:hover {
     border-color: #ffcc33 !important;
     background: #252525 !important;
 }
 
-/* Style for the options list when opened */
+/* Style the options list when opened */
 .gradio-container .gr-dropdown-options {
     background: #1a1a1a !important;
-    border: 1px solid #ffcc33 !important; /* Accent border when open */
+    border: 1px solid #ffcc33 !important;
     border-radius: 10px !important;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
     padding: 5px 0;
 }
-.gradio-container .gr-dropdown-options button {
-    /* Style for individual options */
-    color: #ddd !important;
-    padding: 10px 15px !important;
-    background: transparent !important;
-    transition: background 0.1s ease;
-}
 .gradio-container .gr-dropdown-options button:hover {
-    /* Highlight the selected option with the yellow accent */
-    background: #ffcc3320 !important; /* Light yellow background on hover */
+    background: #ffcc3320 !important; 
     color: #fff !important;
 }
+
 /* ------------------------------------- */
 
+
 /* make ChatInterface chat area taller */
 .gradio-container .chat-interface .chatbot { min-height: calc(100vh - 220px); background:#111; color:#eee; }
 
-/* style send button (your original) */
+/* style send button */
 .gr-button { border-radius:10px !important; background:#2c2c3f !important; color:#fff !important; }
 """
 
 # ---------------------------
-# Build UI
+# Build UI (Final Layout)
 # ---------------------------
 with gr.Blocks(css=css, title="⚡ YellowFlash.ai") as app:
     with gr.Row(elem_id="topbar"):
-        model_dropdown = gr.Dropdown(
-            choices=["Google Gemini 2.0 Flash", "Meta LLaMA 4"],
-            value="Google Gemini 2.0 Flash",
-            show_label=False,
-            elem_id="model_dropdown",
-            scale=1 # Use scale to control width in the Row
-        )
-    
-    # We must explicitly set title and description here as per your original request 
+        
+        # 1. Left Column: Model Title and Dropdown (Compact Look)
+        with gr.Column(scale=0, min_width=150): 
+            # Static title for the model vendor/family
+            gr.Markdown("**Google**", elem_id="model-title")
+            
+            model_dropdown = gr.Dropdown(
+                choices=["Google Gemini 2.0 Flash", "Meta LLaMA 4"],
+                value="Google Gemini 2.0 Flash",
+                show_label=False,
+                elem_id="model_dropdown",
+                scale=0 
+            )
+
+        # 2. Right Column: The main app title (YellowFlash.ai)
+        with gr.Column(scale=1): 
+            gr.Markdown(f'<span id="main-app-title">⚡ YellowFlash.ai</span>', elem_id="title_md")
+
+
+    # Keep the original "under development" text
+    gr.Markdown("under development")
+
     gr.ChatInterface(
         fn=chat_fn,
-        title="⚡ YellowFlash.ai",
-        description="under development",
+        title="", # Title is now handled by the custom header row
+        description="",
         additional_inputs=[model_dropdown],
-        # When streaming, the Submit button automatically becomes a Stop button
     )
 
 if __name__ == "__main__":
-    # Remove share=True for Hugging Face deployment
-    # The launch() call is kept simple for the HF environment
     app.launch()