Update app.py

app.py

@@ -8,6 +8,55 @@ API_KEY = os.getenv("Gemini_API_Key")  # Ensure to set this in Hugging Face Secr
 client = genai.Client(api_key=API_KEY)
 MODEL_ID = "gemini-2.0-flash"  # Replace with your desired model ID
 
+custom_ui = """
+<style>
+#search-btn {
+    background-color: #4f46e5;
+    color: white;
+    border: none;
+    padding: 12px 20px;
+    font-size: 16px;
+    border-radius: 10px;
+    cursor: pointer;
+    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 {
+    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", () => {
+    clap.play();
+    btn.classList.add("fade");
+
+    setTimeout(() => {
+        btn.classList.remove("fade");
+    }, 1200);
+});
+</script>
+"""
+
 def google_search_query(question):
     try:
         # Define the Google Search Tool
@@ -32,6 +81,7 @@ def google_search_query(question):
 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"),