Upload app.py

app.py

@@ -20,19 +20,25 @@ def chatbot_response(message):
     response = query_engine.query(message)
     return str(response)
 
-# Custom CSS for purple Submit button - Multiple selectors for HF Spaces compatibility
+# Custom CSS with even more comprehensive selectors
 custom_css = """
-/* Primary button selectors for different Gradio versions */
+/* Universal purple button styling */
 button.primary,
 .primary,
 button[variant="primary"],
 .gradio-button.primary,
 button.lg.primary,
-button.svelte-cmf5ev.primary {
+button.svelte-cmf5ev.primary,
+.gradio-container button.primary,
+div[data-testid="submit-button"] button,
+.gradio-interface button[type="submit"],
+button:has-text("Submit"),
+button[title="Submit"] {
     background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
+    border: 1px solid #8B5CF6 !important;
     color: white !important;
     border-radius: 8px !important;
+    font-weight: 500 !important;
 }
 
 button.primary:hover,
@@ -40,31 +46,57 @@ button.primary:hover,
 button[variant="primary"]:hover,
 .gradio-button.primary:hover,
 button.lg.primary:hover,
-button.svelte-cmf5ev.primary:hover {
+button.svelte-cmf5ev.primary:hover,
+.gradio-container button.primary:hover,
+div[data-testid="submit-button"] button:hover,
+.gradio-interface button[type="submit"]:hover,
+button:has-text("Submit"):hover,
+button[title="Submit"]:hover {
     background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
+    border: 1px solid #7C3AED !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4) !important;
     transition: all 0.2s ease !important;
 }
 
-/* More specific selectors for HF Spaces */
-.gradio-container button[type="submit"],
-.gradio-container .primary-button,
-.gradio-container .submit-button {
+/* Additional selectors for robustness */
+.gradio-container .submit,
+.gradio-container [data-variant="primary"],
+.interface-submit-btn,
+button.submit-btn {
     background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
+    border: 1px solid #8B5CF6 !important;
     color: white !important;
 }
 
-/* Force override any existing styles */
-[data-testid="primary-button"],
-[role="button"].primary {
+/* Override any Hugging Face specific styles */
+.huggingface-space button.primary {
+    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
+}
+
+/* Fallback with more general selector */
+button:nth-child(2):not(.secondary) {
     background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
     color: white !important;
+    border: 1px solid #8B5CF6 !important;
 }
 """
 
+# Create custom theme
+purple_theme = gr.themes.Soft(
+    primary_hue="violet",
+    secondary_hue="gray",
+    neutral_hue="gray",
+).set(
+    button_primary_background_fill="#8B5CF6",
+    button_primary_background_fill_dark="#7C3AED",
+    button_primary_background_fill_hover="#A855F7",
+    button_primary_border_color="#8B5CF6",
+    button_primary_border_color_dark="#7C3AED",
+    button_primary_text_color="white",
+    button_primary_text_color_dark="white"
+)
+
 iface = gr.Interface(
     fn=chatbot_response,
     inputs="text",
@@ -77,6 +109,7 @@ iface = gr.Interface(
               ["What technical skills does Donald have?"],
               ["How did Donald build this RAG chatbot?"]
              ],
+    theme=purple_theme,
     css=custom_css
 )