Update app.py

app.py

@@ -156,19 +156,46 @@ if __name__ == "__main__":
     categories = sorted(set(Path(p).parts[0] for p in glob.glob('*/*.txt')) | set(recommended.keys()) - {"all"})
 
     with gr.Blocks() as demo:
+        # Custom CSS for banner and buttons
+        gr.HTML("""
+        <style>
+            #banner-img img {
+                width: 100%;
+                height: auto;
+                border-radius: 10px;
+            }
+            .category-button button {
+                background: linear-gradient(to right, #36d1dc, #5b86e5);
+                color: white;
+                border: none;
+                border-radius: 8px;
+                padding: 8px 16px;
+                font-weight: bold;
+                transition: 0.3s;
+            }
+            .category-button button:hover {
+                background: linear-gradient(to right, #5b86e5, #36d1dc);
+                transform: scale(1.05);
+            }
+        </style>
+        """)
+
         selected_category = gr.State("all")
+
+        # ✅ Banner Image
         with gr.Row():
             banner_path = Path(__file__).resolve().parent / "bannerhr.png"
             banner_value = str(banner_path) if banner_path.exists() else None
-            gr.Image(value=banner_value, show_label=False, show_download_button=False)
-            
+            gr.Image(value=banner_value, show_label=False, show_download_button=False, elem_id="banner-img")
 
+        # ✅ Category Buttons with color
         with gr.Row():
             category_buttons = []
             for cat in ["all"] + categories:
-                btn = gr.Button(cat)
+                btn = gr.Button(cat, elem_classes=["category-button"])
                 category_buttons.append(btn)
 
+        # ✅ Question selection and input
         with gr.Row():
             with gr.Column():
                 examples = gr.Dropdown(
@@ -177,18 +204,25 @@ if __name__ == "__main__":
                     value=recommended["all"][0]
                 )
             with gr.Column():
-                query = gr.Textbox(label="Ask a question")
+                query = gr.Textbox(label="Ask a question", value=recommended["all"][0])  # ✅ Pre-filled to avoid error
                 submit = gr.Button("Submit")
                 answer = gr.Textbox(label="Answer")
 
+        # ✅ Category change logic
         def set_category(cat):
-            return cat, gr.update(choices=recommended.get(cat, recommended["all"]), value=recommended.get(cat, recommended["all"])[0])
+            return cat, gr.update(
+                choices=recommended.get(cat, recommended["all"]),
+                value=recommended.get(cat, recommended["all"])[0]
+            )
 
         for btn in category_buttons:
-            btn.click(lambda _, cat=btn.value: set_category(cat), inputs=None, outputs=[selected_category, examples])
+            btn.click(lambda _, cat=btn.value: set_category(cat),
+                      inputs=None, outputs=[selected_category, examples])
 
+        # ✅ Sync dropdown to textbox
         examples.change(lambda q: q, inputs=examples, outputs=query)
 
+        # ✅ Submit logic
         submit.click(lambda q, cat: answer_question(q, None if cat == "all" else cat),
                      inputs=[query, selected_category], outputs=answer)