Update src/enhanced_ui_components.py

src/enhanced_ui_components.py

@@ -38,136 +38,220 @@ class EnhancedUIComponents:
     def _load_custom_css(self):
         """Load custom CSS for the application"""
         return """
-        /* Enhanced SmartHeal Application Styling */
-        .main-header {
-            text-align: center;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 2rem;
-            border-radius: 10px;
-            margin-bottom: 2rem;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-        
-        .main-header h1 {
-            margin: 0;
-            font-size: 2.5rem;
-            font-weight: bold;
-        }
-        
-        .main-header p {
-            margin: 0.5rem 0 0 0;
-            font-size: 1.1rem;
-            opacity: 0.9;
-        }
-        
-        .integration-status {
-            background-color: #e8f5e8;
-            border: 1px solid #4caf50;
-            border-radius: 8px;
-            padding: 1rem;
-            margin: 1rem 0;
-            color: #2e7d32;
-        }
-        
-        .analytics-info {
-            background-color: #e3f2fd;
-            border: 1px solid #2196f3;
-            border-radius: 8px;
-            padding: 1rem;
-            margin: 1rem 0;
-            color: #1565c0;
-        }
-        
-        .session-info {
-            background-color: #fff3e0;
-            border: 1px solid #ff9800;
-            border-radius: 8px;
-            padding: 1rem;
-            margin: 1rem 0;
-            color: #ef6c00;
-        }
-        
-        /* Section Headers */
-        .section-header {
-            background-color: #f8f9fa;
-            padding: 1rem;
-            border-radius: 8px;
-            border-left: 4px solid #007bff;
-            margin: 1rem 0;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-        }
-        
-        .section-header h2 {
-            margin: 0;
-            color: #495057;
-            font-size: 1.3rem;
-        }
-        
-        .section-header h3 {
-            margin: 0;
-            color: #6c757d;
-            font-size: 1.1rem;
-        }
-        
-        /* Result Boxes */
-        .result-box {
-            background-color: #e7f3ff;
-            border: 1px solid #b3d9ff;
-            border-radius: 8px;
-            padding: 1rem;
-            margin: 1rem 0;
-        }
-        
-        .success-box {
-            background-color: #d4edda;
-            border: 1px solid #c3e6cb;
-            border-radius: 8px;
-            padding: 1rem;
-            margin: 1rem 0;
-            color: #155724;
-        }
-        
-        .warning-box {
-            background-color: #fff3cd;
-            border: 1px solid #ffeaa7;
-            border-radius: 8px;
-            padding: 1rem;
-            margin: 1rem 0;
-            color: #856404;
-        }
-        
-        .error-box {
-            background-color: #ffe7e7;
-            border: 1px solid #ffb3b3;
-            border-radius: 8px;
-            padding: 1rem 0;
-            margin: 1rem 0;
-            color: #721c24;
-        }
-        
-        /* Enhanced form styling */
-        .form-group {
-            margin-bottom: 1rem;
-        }
-        
-        .metrics-display {
-            background-color: #f8f9fa;
-            border-radius: 8px;
-            padding: 1rem;
-            margin: 1rem 0;
-            border: 1px solid #dee2e6;
-        }
-        
-        .processing-indicator {
-            background-color: #fff8e1;
-            border: 1px solid #ffcc02;
-            border-radius: 8px;
-            padding: 1rem;
-            margin: 1rem 0;
-            color: #f57f17;
-            text-align: center;
-        }
+        /* =================== SMARTHEAL CSS =================== */
+/* Global Styling */
+body, html {
+    margin: 0 !important;
+    padding: 0 !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif !important;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
+    color: #1A202C !important;
+    line-height: 1.6 !important;
+}
+/* Professional Header with Logo */
+.medical-header {
+    background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%) !important;
+    color: white !important;
+    padding: 32px 40px !important;
+    border-radius: 20px 20px 0 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin-bottom: 0 !important;
+    box-shadow: 0 10px 40px rgba(49, 130, 206, 0.3) !important;
+    border: none !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+.logo {
+    width: 80px !important;
+    height: 80px !important;
+    border-radius: 50% !important;
+    margin-right: 24px !important;
+    border: 4px solid rgba(255, 255, 255, 0.3) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
+    background: white !important;
+    padding: 4px !important;
+}
+.medical-header h1 {
+    font-size: 3.5rem !important;
+    font-weight: 800 !important;
+    margin: 0 !important;
+    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) !important;
+    background: linear-gradient(45deg, #ffffff, #f8f9fa) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3)) !important;
+}
+.medical-header p {
+    font-size: 1.3rem !important;
+    margin: 8px 0 0 0 !important;
+    opacity: 0.95 !important;
+    font-weight: 500 !important;
+    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2) !important;
+}
+/* Enhanced Form Styling */
+.gr-form {
+    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%) !important;
+    border-radius: 20px !important;
+    padding: 32px !important;
+    margin: 24px 0 !important;
+    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1) !important;
+    border: 1px solid rgba(229, 62, 62, 0.1) !important;
+    backdrop-filter: blur(10px) !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+/* Professional Input Fields */
+.gr-textbox, .gr-number {
+    border-radius: 12px !important;
+    border: 2px solid #E2E8F0 !important;
+    background: #FFFFFF !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
+    font-size: 1rem !important;
+    color: #1A202C !important;
+    padding: 16px 20px !important;
+}
+.gr-textbox:focus, .gr-number:focus, .gr-textbox input:focus, .gr-number input:focus {
+    border-color: #E53E3E !important;
+    box-shadow: 0 0 0 4px rgba(229, 62, 62, 0.1) !important;
+    background: #FFFFFF !important;
+    outline: none !important;
+    transform: translateY(-1px) !important;
+}
+/* Enhanced Button Styling */
+button.gr-button, button.gr-button-primary {
+    background: linear-gradient(135deg, #E53E3E 0%, #C53030 100%) !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    border-radius: 12px !important;
+    font-weight: 700 !important;
+    padding: 16px 32px !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 0.5px !important;
+    text-align: center !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    box-shadow: 0 4px 16px rgba(229, 62, 62, 0.3) !important;
+    position: relative !important;
+    overflow: hidden !important;
+    text-transform: uppercase !important;
+    cursor: pointer !important;
+}
+button.gr-button:hover, button.gr-button-primary:hover {
+    background: linear-gradient(135deg, #C53030 0%, #9C2A2A 100%) !important;
+    box-shadow: 0 8px 32px rgba(229, 62, 62, 0.4) !important;
+    transform: translateY(-3px) !important;
+}
+/* Professional Status Messages */
+.status-success {
+    background: linear-gradient(135deg, #F0FFF4 0%, #E6FFFA 100%) !important;
+    border: 2px solid #38A169 !important;
+    color: #22543D !important;
+    padding: 20px 24px !important;
+    border-radius: 16px !important;
+    font-weight: 600 !important;
+    margin: 16px 0 !important;
+    box-shadow: 0 8px 24px rgba(56, 161, 105, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+}
+.status-error {
+    background: linear-gradient(135deg, #FFF5F5 0%, #FED7D7 100%) !important;
+    border: 2px solid #E53E3E !important;
+    color: #742A2A !important;
+    padding: 20px 24px !important;
+    border-radius: 16px !important;
+    font-weight: 600 !important;
+    margin: 16px 0 !important;
+    box-shadow: 0 8px 24px rgba(229, 62, 62, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+}
+.status-warning {
+    background: linear-gradient(135deg, #FFFAF0 0%, #FEEBC8 100%) !important;
+    border: 2px solid #DD6B20 !important;
+    color: #9C4221 !important;
+    padding: 20px 24px !important;
+    border-radius: 16px !important;
+    font-weight: 600 !important;
+    margin: 16px 0 !important;
+    box-shadow: 0 8px 24px rgba(221, 107, 32, 0.2) !important;
+    backdrop-filter: blur(10px) !important;
+}
+/* Image gallery styling for better visualization */
+.image-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    margin: 20px 0;
+}
+.image-item {
+    background: #f8f9fa;
+    border-radius: 12px;
+    padding: 15px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    text-align: center;
+}
+.image-item img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+.image-item h4 {
+    margin: 15px 0 5px 0;
+    color: #2d3748;
+    font-weight: 600;
+}
+.image-item p {
+    margin: 0;
+    color: #666;
+    font-size: 0.9em;
+}
+/* Analyze button special styling */
+#analyze-btn {
+    background: linear-gradient(135deg, #1B5CF3 0%, #1E3A8A 100%) !important;
+    color: #FFFFFF !important;
+    border: none !important;
+    border-radius: 8px !important;
+    font-weight: 700 !important;
+    padding: 14px 28px !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 0.5px !important;
+    text-align: center !important;
+    transition: all 0.2s ease-in-out !important;
+}
+#analyze-btn:hover {
+    background: linear-gradient(135deg, #174ea6 0%, #123b82 100%) !important;
+    box-shadow: 0 4px 14px rgba(27, 95, 193, 0.4) !important;
+    transform: translateY(-2px) !important;
+}
+/* Responsive design */
+@media (max-width: 768px) {
+    .medical-header {
+        padding: 16px !important;
+        text-align: center !important;
+    }
+    
+    .medical-header h1 {
+        font-size: 2rem !important;
+    }
+    
+    .logo {
+        width: 48px !important;
+        height: 48px !important;
+        margin-right: 16px !important;
+    }
+    
+    .gr-form {
+        padding: 16px !important;
+        margin: 8px 0 !important;
+    }
+    
+    .image-gallery {
+        grid-template-columns: 1fr;
+    }
+}
         """
     
     def create_interface(self):