Add beautiful custom styling to Gradio interface

app/gradio_interface.py

@@ -1,5 +1,5 @@
 """
-Gradio interface for ORA - Fast GPU testing
+Gradio interface for ORA - Fast GPU testing with beautiful UI
 This runs alongside the FastAPI server for quick testing with ZeroGPU
 """
 
@@ -100,21 +100,186 @@ Respond with compassion and wisdom."""
     
     return response
 
-# Create Gradio interface
+# Custom CSS for beautiful UI matching the Orb interface
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Crimson+Text:ital@0;1&display=swap');
+
+/* Dark theme with purple/blue gradients */
+.gradio-container {
+    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
+    font-family: 'Inter', sans-serif !important;
+}
+
+/* Header styling */
+.gradio-container h1 {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 3rem !important;
+    font-weight: 600 !important;
+    text-align: center !important;
+    margin-bottom: 0.5rem !important;
+    animation: fadeIn 1s ease-in;
+}
+
+/* Description text */
+.gradio-container p {
+    color: #a0aec0 !important;
+    text-align: center !important;
+    font-size: 1.1rem !important;
+    margin-bottom: 2rem !important;
+}
+
+/* Chat container */
+.message-wrap {
+    background: rgba(255, 255, 255, 0.05) !important;
+    backdrop-filter: blur(10px) !important;
+    border-radius: 20px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    padding: 1.5rem !important;
+    animation: slideUp 0.5s ease-out;
+}
+
+/* User messages */
+.message.user {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    border-radius: 18px !important;
+    padding: 1rem 1.5rem !important;
+    font-family: 'Inter', sans-serif !important;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
+    animation: messageSlide 0.3s ease-out;
+}
+
+/* Bot messages */
+.message.bot {
+    background: rgba(255, 255, 255, 0.08) !important;
+    color: #e2e8f0 !important;
+    border-radius: 18px !important;
+    padding: 1rem 1.5rem !important;
+    font-family: 'Crimson Text', serif !important;
+    font-size: 1.1rem !important;
+    line-height: 1.8 !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    animation: messageSlide 0.3s ease-out;
+}
+
+/* Input box */
+.input-box {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: 2px solid rgba(102, 126, 234, 0.3) !important;
+    border-radius: 25px !important;
+    color: white !important;
+    padding: 1rem 1.5rem !important;
+    font-size: 1rem !important;
+    transition: all 0.3s ease !important;
+}
+
+.input-box:focus {
+    border-color: #667eea !important;
+    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4) !important;
+    outline: none !important;
+}
+
+/* Send button */
+.send-button {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    border-radius: 20px !important;
+    padding: 0.8rem 2rem !important;
+    color: white !important;
+    font-weight: 600 !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+}
+
+.send-button:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
+}
+
+/* Examples */
+.examples {
+    background: rgba(255, 255, 255, 0.03) !important;
+    border-radius: 15px !important;
+    padding: 1rem !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+.example-btn {
+    background: rgba(102, 126, 234, 0.1) !important;
+    border: 1px solid rgba(102, 126, 234, 0.3) !important;
+    color: #a0aec0 !important;
+    border-radius: 12px !important;
+    padding: 0.7rem 1.2rem !important;
+    transition: all 0.3s ease !important;
+}
+
+.example-btn:hover {
+    background: rgba(102, 126, 234, 0.2) !important;
+    border-color: #667eea !important;
+    color: white !important;
+    transform: translateY(-2px) !important;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes messageSlide {
+    from { opacity: 0; transform: translateX(-20px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+}
+"""
+
+# Create Gradio interface with custom theme
 demo = gr.ChatInterface(
     fn=generate_response,
-    title="🙏 ORA - Spiritual AI Assistant (GPU Testing)",
-    description="Fast GPU-powered testing interface for ORA. Ask theological questions, seek spiritual guidance, or discuss scripture.",
+    title="🙏 ORA",
+    description="✨ Your Spiritual AI Companion • Powered by ZeroGPU for Lightning-Fast Responses ✨",
     examples=[
         "What does the Bible say about finding peace in difficult times?",
         "How can I grow closer to God?",
         "Explain the parable of the prodigal son",
         "What is the meaning of faith?",
     ],
-    theme=gr.themes.Soft(),
+    theme=gr.themes.Soft(
+        primary_hue="purple",
+        secondary_hue="blue",
+        neutral_hue="slate",
+        font=["Inter", "Crimson Text", "sans-serif"]
+    ),
+    css=custom_css,
     retry_btn=None,
     undo_btn=None,
-    clear_btn="Clear",
+    clear_btn="✨ New Conversation",
+    submit_btn="🙏 Ask ORA",
 )
 
 if __name__ == "__main__":