Update app.py

app.py

@@ -3,92 +3,71 @@ import gradio as gr
 from google import genai
 from google.genai.types import GenerateContentConfig, GoogleSearch, Tool
 
-# Initialize GenAI Client
-API_KEY = os.getenv("Gemini_API_Key")  # Ensure to set this in Hugging Face Secrets
+# -------- Gemini Setup --------
+API_KEY = os.getenv("Gemini_API_Key")
 client = genai.Client(api_key=API_KEY)
-MODEL_ID = "gemini-2.0-flash"  # Replace with your desired model ID
+MODEL_ID = "gemini-2.0-flash"
 
-custom_ui = """
-<style>
+# -------- Custom CSS + JS --------
+custom_css = """
 #search-btn {
-    background-color: #4f46e5;
-    color: white;
-    border: none;
-    padding: 12px 20px;
+    background-color: #4f46e5 !important;
+    color: white !important;
     font-size: 16px;
     border-radius: 10px;
-    cursor: pointer;
+    padding: 10px 18px;
     transition: opacity 0.6s ease, transform 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 8px;
 }
 
-#search-btn:hover {
-    background-color: #4338ca;
-}
-
-#search-btn.fade {
+#search-btn:active {
     opacity: 0.5;
     transform: scale(0.97);
 }
-</style>
-
-<button id="search-btn">
-    🔍 Search
-</button>
-
-<audio id="clap-sound">
-  <source src="https://www.soundjay.com/human/applause-8.mp3" type="audio/mpeg">
-</audio>
-
-<script>
-const btn = document.getElementById("search-btn");
-const clap = document.getElementById("clap-sound");
+"""
 
-btn.addEventListener("click", () => {
+custom_js = """
+() => {
+    const clap = new Audio("https://www.soundjay.com/human/applause-8.mp3");
     clap.play();
-    btn.classList.add("fade");
-
-    setTimeout(() => {
-        btn.classList.remove("fade");
-    }, 1200);
-});
-</script>
+}
 """
 
+# -------- AI Function --------
 def google_search_query(question):
     try:
-        # Define the Google Search Tool
         google_search_tool = Tool(google_search=GoogleSearch())
-        
-        # Generate the response
+
         response = client.models.generate_content(
             model=MODEL_ID,
             contents=question,
             config=GenerateContentConfig(tools=[google_search_tool]),
         )
 
-        # Extract AI response and search results
-        ai_response = response.text  # AI response as plain text
+        ai_response = response.text
         search_results = response.candidates[0].grounding_metadata.search_entry_point.rendered_content
 
         return ai_response, search_results
+
     except Exception as e:
         return f"Error: {str(e)}", ""
 
-# Gradio Interface
-app = gr.Interface(
-    fn=google_search_query,
-    inputs=gr.Textbox(lines=2, label="Ask a Question"),
-        gr.HTML(custom_ui),
-    outputs=[
-        gr.Textbox(label="AI Response"),
-        gr.HTML(label="Search Results"),
-    ],
-    title="Google Search with Gemini AI",
-    description="Ask a question, and the AI will use Google search tools to provide an answer along with contextual search results.",
-)
+# -------- Gradio App --------
+with gr.Blocks(css=custom_css) as app:
+    gr.Markdown("## 🔍 Google Search with Gemini AI")
+
+    question = gr.Textbox(lines=2, label="Ask a Question")
+
+    search_btn = gr.Button("🔍 Search", elem_id="search-btn")
+
+    ai_output = gr.Textbox(label="AI Response")
+    search_output = gr.HTML(label="Search Results")
+
+    search_btn.click(
+        fn=google_search_query,
+        inputs=question,
+        outputs=[ai_output, search_output],
+        js=custom_js
+    )
 
 if __name__ == "__main__":
-    app.launch(share=True)
+    app.launch(share=True)