Update app.py

app.py

@@ -3,14 +3,18 @@ import gradio as gr
 from langchain_groq import ChatGroq
 from langchain_tavily import TavilySearch
 
+# ===============================
+# Load API Keys from HF Secrets
+# ===============================
 groq_api_key = os.environ.get("GROQ_API_KEY")
 tavily_api_key = os.environ.get("TAVILY_API_KEY")
 
-if not groq_api_key:
-    raise RuntimeError("GROQ_API_KEY not found in Hugging Face Secrets")
-if not tavily_api_key:
-    raise RuntimeError("TAVILY_API_KEY not found in Hugging Face Secrets")
+if not groq_api_key or not tavily_api_key:
+    raise ValueError("❌ API keys not found. Please add them in Hugging Face Secrets.")
 
+# ===============================
+# Initialize LLM & Search Tool
+# ===============================
 llm = ChatGroq(
     model_name="openai/gpt-oss-120b",
     temperature=0,
@@ -22,31 +26,90 @@ search = TavilySearch(
     tavily_api_key=tavily_api_key
 )
 
+# ===============================
+# Search Agent Function
+# ===============================
 def search_agent(query):
     if not query.strip():
-        return "Please enter a valid question."
+        return "⚠️ Please enter a valid query."
 
-    res = search.invoke(query)
-    context = "\n".join(r["content"] for r in res.get("results", []))
+    results = search.invoke(query)
+    contexts = results.get("results", [])
+
+    if not contexts:
+        return "❌ No relevant information found."
+
+    context_text = "\n".join([r["content"] for r in contexts])
 
     prompt = f"""
-    Use the information below to answer the question.
+Using the following information from web search:
+
+{context_text}
+
+Question: {query}
+Answer clearly and concisely:
+"""
+
+    response = llm.invoke(prompt)
+    return response.content.strip()
+
+custom_css = """
+body {
+    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+}
+
+.gradio-container {
+    max-width: 900px !important;
+    margin: auto;
+}
+
+#title {
+    font-size: 36px;
+    font-weight: 700;
+    text-align: center;
+    color: white;
+}
+
+#subtitle {
+    text-align: center;
+    color: #cfd8dc;
+    margin-bottom: 20px;
+}
+
+.card {
+    background: #111827;
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0px 10px 30px rgba(0,0,0,0.4);
+}
+"""
 
-    {context}
+with gr.Blocks(css=custom_css) as demo:
 
-    Question: {query}
-    Answer clearly and concisely.
-    """
+    gr.Markdown("<div id='title'>Nithi's Search Assistant</div>")
 
-    return llm.invoke(prompt).content.strip()
+    with gr.Column(elem_classes="card"):
+        query_input = gr.Textbox(
+            label="Enter your question",
+            placeholder="Enter your Question",
+            lines=2
+        )
 
-with gr.Blocks() as demo:
-    gr.Markdown("## 🔍 Nithi's Search Assistant")
+        search_btn = gr.Button(
+            "Search",
+            variant="primary"
+        )
 
-    query = gr.Textbox(label="Ask a question")
-    button = gr.Button("Search")
-    output = gr.Textbox(label="Answer", lines=10)
+        output_box = gr.Textbox(
+            label="AI Answer",
+            lines=10,
+            interactive=False
+        )
 
-    button.click(search_agent, query, output)
+    search_btn.click(
+        fn=search_agent,
+        inputs=query_input,
+        outputs=output_box
+    )
 
 demo.launch()