Upload app.py

app.py

@@ -20,158 +20,48 @@ def chatbot_response(message):
     response = query_engine.query(message)
     return str(response)
 
-# Custom CSS for purple button styling with JavaScript
-custom_css = """
-/* Target all possible Gradio button selectors */
-button,
-.btn,
-.gr-button,
-.gradio-button,
-input[type="submit"],
-.submit-btn {
-    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
-    color: white !important;
-    border-radius: 8px !important;
-}
-
-button:hover,
-.btn:hover,
-.gr-button:hover,
-.gradio-button:hover,
-input[type="submit"]:hover,
-.submit-btn:hover {
-    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
-    transition: all 0.2s ease !important;
-}
-
-/* Specific targeting for different Gradio versions */
-.gradio-container button,
-.gradio-container .btn {
-    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
-    color: white !important;
-}
-
-.gradio-container button:hover,
-.gradio-container .btn:hover {
-    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
-}
-
-/* Target by CSS classes that might be used */
-.primary,
-.btn-primary,
-.gr-button-primary {
-    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
-    color: white !important;
-}
-
-.primary:hover,
-.btn-primary:hover,
-.gr-button-primary:hover {
-    background: linear-gradient(45deg, #7C3AED, #9333EA) !important;
-}
-
-/* Very specific targeting for submit-like buttons */
-button[aria-label*="Submit"],
-button[title*="Submit"],
-.submit,
-.gr-form button {
-    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
-    color: white !important;
-}
+# Create a custom theme with purple buttons
+custom_theme = gr.themes.Soft(
+    primary_hue=gr.themes.colors.purple,
+    secondary_hue=gr.themes.colors.gray,
+    neutral_hue=gr.themes.colors.gray,
+).set(
+    button_primary_background_fill="linear-gradient(45deg, #8B5CF6, #A855F7)",
+    button_primary_background_fill_hover="linear-gradient(45deg, #7C3AED, #9333EA)",
+    button_primary_text_color="white",
+    button_primary_border_color="transparent",
+    button_secondary_background_fill="#374151",
+    button_secondary_background_fill_hover="#4B5563",
+    button_secondary_text_color="white",
+    button_secondary_border_color="#4B5563",
+)
 
-/* Override any orange/default styling */
-.gradio-button.primary,
-.btn.primary,
-button.primary {
-    background: linear-gradient(45deg, #8B5CF6, #A855F7) !important;
-    border: none !important;
+# Minimal CSS as backup
+custom_css = """
+/* Backup styling for example buttons */
+.examples button {
+    background: #374151 !important;
     color: white !important;
+    border: 1px solid #4B5563 !important;
 }
-
-/* Clear/secondary buttons */
-.secondary,
-.btn-secondary,
-.gr-button-secondary {
-    background: #E5E7EB !important;
-    color: #374151 !important;
-    border: 1px solid #D1D5DB !important;
-}
-
-.secondary:hover,
-.btn-secondary:hover,
-.gr-button-secondary:hover {
-    background: #F3F4F6 !important;
-}
-
-/* JavaScript to style example buttons */
-<script>
-function styleExampleButtons() {
-    // Wait for the page to fully load
-    setTimeout(function() {
-        console.log('Attempting to style example buttons...');
-        
-        // Find all buttons on the page
-        const allButtons = document.querySelectorAll('button');
-        console.log('Found', allButtons.length, 'buttons');
-        
-        // Skip the first two buttons (Clear and Submit) and style the rest
-        allButtons.forEach((btn, index) => {
-            if (index >= 2) {
-                console.log('Styling button', index, ':', btn.textContent);
-                btn.style.setProperty('background', '#374151', 'important');
-                btn.style.setProperty('color', 'white', 'important');
-                btn.style.setProperty('border', '1px solid #4B5563', 'important');
-                btn.style.setProperty('border-radius', '8px', 'important');
-                
-                // Add hover effect
-                btn.addEventListener('mouseenter', function() {
-                    this.style.setProperty('background', '#4B5563', 'important');
-                });
-                btn.addEventListener('mouseleave', function() {
-                    this.style.setProperty('background', '#374151', 'important');
-                });
-            }
-        });
-        
-        // Alternative approach: look for buttons containing example text
-        const exampleTexts = [
-            'Provide a summary of Donald',
-            'Has Donald worked with Python',
-            'Tell me something interesting',
-            'What technical skills',
-            'How did Donald build'
-        ];
-        
-        exampleTexts.forEach(text => {
-            const buttons = Array.from(allButtons).filter(btn => 
-                btn.textContent.includes(text) || 
-                btn.innerText.includes(text)
-            );
-            buttons.forEach(btn => {
-                console.log('Found example button:', btn.textContent);
-                btn.style.setProperty('background', '#374151', 'important');
-                btn.style.setProperty('color', 'white', 'important');
-                btn.style.setProperty('border', '1px solid #4B5563', 'important');
-            });
-        });
-    }, 2000); // Wait 2 seconds for Gradio to fully render
-}
-
-// Run immediately and also when DOM content loads
-styleExampleButtons();
-document.addEventListener('DOMContentLoaded', styleExampleButtons);
-
-// Also run when the window loads (backup)
-window.addEventListener('load', styleExampleButtons);
-</script>
 """
 
+iface = gr.Interface(
+    fn=chatbot_response,
+    inputs="text",
+    outputs="text",
+    title="Ask about me",
+    description="Ask questions and receive answers based on my bio.",
+    examples=[["Provide a summary of Donald"],
+              ["Has Donald worked with Python or machine learning?"],
+              ["Tell me something interesting about Donald"],
+              ["What technical skills does Donald have?"],
+              ["How did Donald build this RAG chatbot?"]
+             ],
+    theme=custom_theme,
+    css=custom_css
+)
+
 iface = gr.Interface(
     fn=chatbot_response,
     inputs="text",