Update app.py

app.py

@@ -280,250 +280,274 @@ class SocioCareAIPreconsultation:
         self.demo = self._create_interface()
 
     def _create_interface(self):
-        # Custom CSS for better styling
+        # Modern dark theme CSS matching the image
         custom_css = """
         <style>
-            .sociocare-header {
-                background: linear-gradient(135deg, #2c5aa0 0%, #4a90e2 50%, #7bb3f0 100%);
-                padding: 2rem;
-                border-radius: 20px;
-                margin-bottom: 2rem;
-                box-shadow: 0 10px 30px rgba(44, 90, 160, 0.3);
-                text-align: center;
-                position: relative;
-                overflow: hidden;
+            /* Global dark theme */
+            .gradio-container {
+                background: linear-gradient(135deg, #0F0C29 0%, #24243e 50%, #302B63 100%) !important;
+                min-height: 100vh;
             }
             
-            .sociocare-header::before {
-                content: '';
-                position: absolute;
-                top: -50%;
-                left: -50%;
-                width: 200%;
-                height: 200%;
-                background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-                animation: pulse 4s ease-in-out infinite;
+            .dark {
+                background: linear-gradient(135deg, #0F0C29 0%, #24243e 50%, #302B63 100%) !important;
             }
             
-            @keyframes pulse {
-                0%, 100% { transform: scale(1); opacity: 0.5; }
-                50% { transform: scale(1.05); opacity: 0.8; }
-            }
-            
-            .sociocare-title {
-                color: white;
-                font-size: 2.5rem;
-                font-weight: 700;
-                margin-bottom: 0.5rem;
-                text-shadow: 0 2px 4px rgba(0,0,0,0.3);
-                position: relative;
-                z-index: 1;
+            /* Main container */
+            .main-container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                min-height: 90vh;
+                padding: 2rem;
             }
             
-            .sociocare-subtitle {
-                color: #e8f4fd;
-                font-size: 1.2rem;
-                margin-bottom: 1rem;
-                font-weight: 400;
+            /* AI Icon and waves container */
+            .ai-icon-container {
                 position: relative;
-                z-index: 1;
+                margin-bottom: 3rem;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
             }
             
-            .sociocare-disclaimer {
-                color: #b8daf7;
-                font-size: 0.95rem;
-                font-weight: 300;
-                position: relative;
-                z-index: 1;
+            /* Audio waves */
+            .audio-waves {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 4px;
+                margin-bottom: 2rem;
+                height: 60px;
             }
             
-            .info-card {
-                background: linear-gradient(135deg, #f8fbff 0%, #e8f4fd 100%);
-                padding: 1.5rem;
-                border-radius: 16px;
-                border: 1px solid #d1e7f5;
-                box-shadow: 0 4px 20px rgba(44, 90, 160, 0.1);
-                margin-bottom: 1.5rem;
-                transition: transform 0.3s ease, box-shadow 0.3s ease;
+            .wave-dot {
+                width: 6px;
+                height: 6px;
+                background: #667EEA;
+                border-radius: 50%;
+                animation: pulse 2s ease-in-out infinite;
+                opacity: 0.6;
             }
             
-            .info-card:hover {
-                transform: translateY(-2px);
-                box-shadow: 0 6px 25px rgba(44, 90, 160, 0.15);
+            .wave-bar {
+                width: 4px;
+                background: linear-gradient(to top, #667EEA, #764BA2);
+                border-radius: 2px;
+                animation: wave 1.5s ease-in-out infinite;
             }
             
-            .info-card h3 {
-                color: #2c5aa0;
-                margin-top: 0;
-                margin-bottom: 1rem;
-                font-size: 1.3rem;
-                font-weight: 600;
-                display: flex;
-                align-items: center;
-                gap: 0.5rem;
-            }
+            .wave-bar:nth-child(1) { height: 20px; animation-delay: 0s; }
+            .wave-bar:nth-child(2) { height: 35px; animation-delay: 0.1s; }
+            .wave-bar:nth-child(3) { height: 45px; animation-delay: 0.2s; }
+            .wave-bar:nth-child(4) { height: 60px; animation-delay: 0.3s; }
+            .wave-bar:nth-child(5) { height: 50px; animation-delay: 0.4s; }
+            .wave-bar:nth-child(6) { height: 40px; animation-delay: 0.5s; }
+            .wave-bar:nth-child(7) { height: 55px; animation-delay: 0.6s; }
+            .wave-bar:nth-child(8) { height: 35px; animation-delay: 0.7s; }
+            .wave-bar:nth-child(9) { height: 25px; animation-delay: 0.8s; }
+            .wave-bar:nth-child(10) { height: 40px; animation-delay: 0.9s; }
+            .wave-bar:nth-child(11) { height: 50px; animation-delay: 1s; }
+            .wave-bar:nth-child(12) { height: 30px; animation-delay: 1.1s; }
             
-            .info-card ul {
-                color: #4a6b8a;
-                line-height: 1.7;
-                margin-bottom: 0;
+            @keyframes wave {
+                0%, 100% { transform: scaleY(0.5); opacity: 0.7; }
+                50% { transform: scaleY(1); opacity: 1; }
             }
             
-            .info-card li {
-                margin-bottom: 0.5rem;
-                padding-left: 0.5rem;
+            @keyframes pulse {
+                0%, 100% { opacity: 0.4; transform: scale(1); }
+                50% { opacity: 1; transform: scale(1.2); }
             }
             
-            .warning-card {
-                background: linear-gradient(135deg, #fff8e1 0%, #ffeaa7 100%);
-                border: 1px solid #ffcc02;
-                border-left: 4px solid #ff9800;
+            /* AI Icon */
+            .ai-icon {
+                width: 120px;
+                height: 120px;
+                background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+                border-radius: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 3rem;
+                color: white;
+                box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
+                margin-bottom: 2rem;
+                position: relative;
+                overflow: hidden;
             }
             
-            .warning-card h3 {
-                color: #e65100;
+            .ai-icon::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
+                animation: shimmer 3s ease-in-out infinite;
             }
             
-            .warning-card p {
-                color: #bf360c;
-                line-height: 1.6;
+            @keyframes shimmer {
+                0% { transform: translateX(-100%); }
+                100% { transform: translateX(100%); }
             }
             
-            .emergency-card {
-                background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
-                padding: 1.5rem;
-                border-radius: 16px;
-                border: 1px solid #81c784;
-                border-left: 4px solid #4caf50;
-                margin-top: 1.5rem;
+            /* Title */
+            .ai-title {
+                font-size: 2.5rem;
+                font-weight: 700;
+                background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
                 text-align: center;
-            }
-            
-            .emergency-card p {
-                color: #1b5e20;
                 margin-bottom: 0.5rem;
-                font-weight: 500;
+                letter-spacing: -0.02em;
             }
             
-            .voice-section {
-                background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
-                padding: 2rem;
-                border-radius: 20px;
-                border: 2px solid #e3f2fd;
-                box-shadow: 0 8px 32px rgba(44, 90, 160, 0.1);
+            /* Subtitle */
+            .ai-subtitle {
+                color: #A0AEC0;
+                font-size: 1.1rem;
+                text-align: center;
+                margin-bottom: 3rem;
+                font-weight: 400;
             }
             
-            .voice-title {
-                color: #2c5aa0;
-                font-size: 1.5rem;
-                font-weight: 600;
-                margin-bottom: 1rem;
-                text-align: center;
+            /* WebRTC component styling */
+            .webrtc-container {
                 display: flex;
+                flex-direction: column;
                 align-items: center;
-                justify-content: center;
-                gap: 0.5rem;
+                gap: 1rem;
             }
             
-            .feature-grid {
-                display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-                gap: 1rem;
-                margin-bottom: 1.5rem;
+            /* Hide default gradio elements */
+            .gradio-container .wrap,
+            .gradio-container .container,
+            footer {
+                background: transparent !important;
+                border: none !important;
+                box-shadow: none !important;
             }
             
-            .feature-item {
-                background: #f8fbff;
-                padding: 1rem;
-                border-radius: 12px;
-                border: 1px solid #e1f5fe;
-                text-align: center;
-                transition: all 0.3s ease;
+            /* Custom button styling for WebRTC */
+            button {
+                background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%) !important;
+                border: none !important;
+                border-radius: 50px !important;
+                padding: 1rem 2rem !important;
+                color: white !important;
+                font-weight: 600 !important;
+                font-size: 1.1rem !important;
+                cursor: pointer !important;
+                transition: all 0.3s ease !important;
+                box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3) !important;
             }
             
-            .feature-item:hover {
-                background: #e8f4fd;
-                border-color: #b3e5fc;
+            button:hover {
+                transform: translateY(-2px) !important;
+                box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4) !important;
             }
             
-            .feature-icon {
-                font-size: 2rem;
-                margin-bottom: 0.5rem;
-                display: block;
+            /* Status indicators */
+            .status-dot {
+                width: 12px;
+                height: 12px;
+                border-radius: 50%;
+                background: #4ADE80;
+                box-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
+                animation: pulse 2s ease-in-out infinite;
+                margin-right: 0.5rem;
             }
             
-            .feature-text {
-                color: #2c5aa0;
-                font-weight: 500;
+            .status-text {
+                color: #E2E8F0;
                 font-size: 0.9rem;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin-top: 1rem;
+            }
+            
+            /* Hide default gradio styling */
+            .gradio-container .block {
+                background: transparent !important;
+                border: none !important;
+                box-shadow: none !important;
+            }
+            
+            /* Responsive design */
+            @media (max-width: 768px) {
+                .ai-icon {
+                    width: 100px;
+                    height: 100px;
+                    font-size: 2.5rem;
+                }
+                
+                .ai-title {
+                    font-size: 2rem;
+                }
+                
+                .audio-waves {
+                    height: 50px;
+                    gap: 3px;
+                }
+                
+                .wave-bar {
+                    width: 3px;
+                }
             }
         </style>
         """
 
-        with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
-            gr.HTML("""
-                <div class="sociocare-header">
-                    <h1 class="sociocare-title">🏥 SocioCare AI Preconsultation</h1>
-                    <p class="sociocare-subtitle">Advanced AI-Powered Health Assessment & Guidance</p>
-                    <p class="sociocare-disclaimer">⚠️ Preliminary health assessment • Not a substitute for professional medical advice</p>
-                </div>
-            """)
-
-            with gr.Row():
-                with gr.Column(scale=5):
-                    gr.HTML("""
-                        <div class="info-card">
-                            <h3>🎯 How Your Preconsultation Works</h3>
-                            <ul>
-                                <li><strong>Start Your Session:</strong> Click "Begin Preconsultation" to activate voice interaction</li>
-                                <li><strong>Describe Your Concerns:</strong> Speak clearly about your symptoms, health concerns, or questions</li>
-                                <li><strong>Interactive Assessment:</strong> SocioCare AI will ask follow-up questions to better understand your condition</li>
-                                <li><strong>Receive Guidance:</strong> Get preliminary health insights and next-step recommendations</li>
-                                <li><strong>Ask Questions:</strong> Feel free to ask for clarification or additional information</li>
-                            </ul>
-                        </div>
-                    """)
-                    
-                    gr.HTML("""
-                        <div class="feature-grid">
-                            <div class="feature-item">
-                                <span class="feature-icon">🎤</span>
-                                <div class="feature-text">Voice-Activated<br>Assessment</div>
-                            </div>
-                            <div class="feature-item">
-                                <span class="feature-icon">🧠</span>
-                                <div class="feature-text">AI-Powered<br>Analysis</div>
-                            </div>
-                            <div class="feature-item">
-                                <span class="feature-icon">⚡</span>
-                                <div class="feature-text">Real-Time<br>Responses</div>
-                            </div>
-                            <div class="feature-item">
-                                <span class="feature-icon">🔒</span>
-                                <div class="feature-text">Secure &<br>Private</div>
-                            </div>
-                        </div>
-                    """)
-                    
-                    gr.HTML("""
-                        <div class="info-card warning-card">
-                            <h3>⚠️ Important Medical Disclaimer</h3>
-                            <p style="margin-bottom: 1rem;">
-                                SocioCare AI provides preliminary health assessment and general medical information only. 
-                                This service is designed to help you understand your symptoms and guide you toward appropriate care.
-                            </p>
-                            <p style="margin-bottom: 0;">
-                                <strong>Always consult with qualified healthcare professionals for diagnosis, treatment, and comprehensive medical care.</strong>
-                            </p>
+        with gr.Blocks(theme=gr.themes.Glass(), css=custom_css) as demo:
+            with gr.Column(elem_classes=["main-container"]):
+                # Audio waves visualization
+                gr.HTML("""
+                    <div class="audio-waves">
+                        <div class="wave-dot"></div>
+                        <div class="wave-dot"></div>
+                        <div class="wave-dot"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-bar"></div>
+                        <div class="wave-dot"></div>
+                        <div class="wave-dot"></div>
+                        <div class="wave-dot"></div>
+                    </div>
+                """)
+                
+                # AI Icon
+                gr.HTML("""
+                    <div class="ai-icon-container">
+                        <div class="ai-icon">
+                            AI✨
                         </div>
-                    """)
-
-                with gr.Column(scale=6):
-                    gr.HTML('<div class="voice-section">')
-                    gr.HTML('<h2 class="voice-title">🎙️ Voice Preconsultation Portal</h2>')
-                    
+                    </div>
+                """)
+                
+                # Title and Subtitle
+                gr.HTML("""
+                    <h1 class="ai-title">AI Voice Agent</h1>
+                    <p class="ai-subtitle">By SocioCare</p>
+                """)
+                
+                # WebRTC Component
+                with gr.Column(elem_classes=["webrtc-container"]):
                     webrtc = WebRTC(
-                        label="Click to Begin Your Preconsultation",
+                        label="",
                         modality="audio",
                         mode="send-receive",
                         rtc_configuration=get_rtc_configuration(),
@@ -537,34 +561,13 @@ class SocioCareAIPreconsultation:
                         concurrency_limit=3,
                     )
                     
+                    # Status indicator
                     gr.HTML("""
-                        <div style="margin-top: 1.5rem; padding: 1rem; background: #f0f8ff; border-radius: 12px; border: 1px solid #b3e5fc;">
-                            <p style="color: #1976d2; margin-bottom: 0.5rem; font-weight: 500; text-align: center;">
-                                💡 <strong>Tips for Best Results:</strong>
-                            </p>
-                            <ul style="color: #1976d2; font-size: 0.9rem; line-height: 1.5; margin-bottom: 0;">
-                                <li>Speak in a quiet environment</li>
-                                <li>Describe symptoms clearly and in detail</li>
-                                <li>Mention symptom duration and severity</li>
-                                <li>Be honest about your medical history</li>
-                            </ul>
+                        <div class="status-text">
+                            <span class="status-dot"></span>
+                            Ready to assist with your health consultation
                         </div>
                     """)
-                    gr.HTML('</div>')
-
-            gr.HTML("""
-                <div class="emergency-card">
-                    <p style="margin-bottom: 1rem;">
-                        <strong>🚨 Emergency Services:</strong> If you're experiencing a medical emergency, call your local emergency number (911, 999, 112) immediately.
-                    </p>
-                    <p style="margin-bottom: 1rem;">
-                        <strong>🔒 Privacy Protection:</strong> Your voice consultation is not recorded or stored. All interactions are secure and confidential.
-                    </p>
-                    <p style="margin-bottom: 0;">
-                        <strong>⏰ Session Duration:</strong> Each preconsultation session lasts up to 10 minutes. You can start a new session anytime.
-                    </p>
-                </div>
-            """)
 
         return demo
 
@@ -590,7 +593,7 @@ class SocioCareAIPreconsultation:
             print("Could not find an available port. Please set the PORT environment variable.")
             return
         
-        print(f"Starting SocioCare AI Preconsultation server on port {port}")
+        print(f"Starting AI Voice Agent server on port {port}")
         
         self.demo.launch(
             server_name="0.0.0.0",