Update app.py

app.py

@@ -3,21 +3,28 @@ import gradio as gr
 from langchain_groq import ChatGroq
 from langchain_tavily import TavilySearch
 
-# Load API keys from Hugging Face Secrets
-groq_api_key = os.environ.get("GROQ_API_KEY")
-tavily_api_key = os.environ.get("TAVILY_API_KEY")
-
-# Initialize LLM
+# =========================
+# Environment Variables
+# =========================
+# Set these in Hugging Face Spaces → Settings → Secrets
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+TAVILY_API_KEY = os.getenv("TAVILY_API_KEY")
+
+if not GROQ_API_KEY or not TAVILY_API_KEY:
+    raise ValueError("Please set GROQ_API_KEY and TAVILY_API_KEY in Hugging Face Secrets")
+
+# =========================
+# LLM & Search Setup
+# =========================
 llm = ChatGroq(
     model_name="openai/gpt-oss-120b",
     temperature=0,
-    groq_api_key=groq_api_key
+    groq_api_key=GROQ_API_KEY
 )
 
-# Initialize Search
 search = TavilySearch(
     max_results=5,
-    tavily_api_key=tavily_api_key
+    tavily_api_key=TAVILY_API_KEY
 )
 
 def google_style_search(query):
@@ -28,32 +35,36 @@ def google_style_search(query):
     context = "\n".join([r["content"] for r in res.get("results", [])])
 
     prompt = f"""
-    Using the following web search information:
-    {context}
+Using the following web search information:
+
+{context}
 
-    Question: {query}
-    Answer in a clear, user-friendly manner:
-    """
+Question: {query}
+Answer in a clear, user-friendly, Google-style summary:
+"""
 
     response = llm.invoke(prompt)
     return response.content.strip()
 
 google_css = """
+@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Inter:wght@400;500;700&display=swap');
+
 body {
     background-color: #ffffff;
-    font-family: Arial, sans-serif;
+    font-family: 'Google Sans', 'Inter', Arial, sans-serif;
 }
 
 .gradio-container {
-    max-width: 800px !important;
+    max-width: 850px !important;
     margin-top: 60px;
 }
 
 #logo {
-    font-size: 48px;
+    font-size: 52px;
     font-weight: 700;
     text-align: center;
-    margin-bottom: 30px;
+    margin-bottom: 35px;
+    letter-spacing: -1px;
 }
 
 #logo span:nth-child(1) { color: #4285F4; }
@@ -62,27 +73,68 @@ body {
 #logo span:nth-child(4) { color: #4285F4; }
 #logo span:nth-child(5) { color: #0F9D58; }
 #logo span:nth-child(6) { color: #DB4437; }
+
+.search-box textarea {
+    border-radius: 24px !important;
+    border: 1px solid #dfe1e5 !important;
+    padding: 14px 20px !important;
+    font-size: 16px !important;
+}
+
+.search-box textarea:focus {
+    box-shadow: 0 1px 6px rgba(32,33,36,.28);
+    border-color: transparent !important;
+}
+
+.search-btn button {
+    border-radius: 6px !important;
+    background-color: #f8f9fa !important;
+    color: #202124 !important;
+    border: 1px solid #f8f9fa !important;
+    font-weight: 500;
+}
+
+.search-btn button:hover {
+    border: 1px solid #dadce0 !important;
+    background-color: #f8f9fa !important;
+}
+
+.answer-box textarea {
+    border-radius: 12px !important;
+    background: #f8f9fa !important;
+    font-size: 15px !important;
+    line-height: 1.6;
+}
 """
 
 with gr.Blocks(css=google_css) as demo:
-    gr.Markdown("""
-    <div id="logo">
-        <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
-    </div>
-    """)
+
+    gr.Markdown(
+        """
+        <div id="logo">
+            <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
+        </div>
+        """,
+        elem_id="logo"
+    )
 
     query_input = gr.Textbox(
         placeholder="Search anything...",
         lines=1,
-        show_label=False
+        show_label=False,
+        elem_classes="search-box"
     )
 
-    search_button = gr.Button("Search")
+    search_button = gr.Button(
+        "Search",
+        elem_classes="search-btn"
+    )
 
     answer_output = gr.Textbox(
         label="Search Result",
         lines=12,
-        interactive=False
+        interactive=False,
+        elem_classes="answer-box"
     )
 
     search_button.click(