Delete src/ui_components.py

src/ui_components.py

@@ -1,349 +0,0 @@
-import gradio as gr
-import logging
-
-class UIComponents:
-    """UI components and styling for SmartHeal application"""
-    
-    def __init__(self):
-        """Initialize UI components"""
-        self.theme = gr.themes.Soft()
-        self.custom_css = self._load_custom_css()
-    
-    def _load_custom_css(self):
-        """Load custom CSS for the application"""
-        return """
-        /* Main 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;
-        }
-        
-        /* 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;
-            margin: 1rem 0;
-            color: #721c24;
-        }
-        
-        /* Form Styling */
-        .form-group {
-            margin-bottom: 1rem;
-        }
-        
-        .required-field::after {
-            content: " *";
-            color: #dc3545;
-        }
-        
-        /* Button Styling */
-        .primary-button {
-            background: linear-gradient(45deg, #007bff, #0056b3);
-            color: white;
-            border: none;
-            padding: 0.75rem 1.5rem;
-            border-radius: 5px;
-            font-weight: bold;
-            transition: all 0.3s ease;
-        }
-        
-        .primary-button:hover {
-            background: linear-gradient(45deg, #0056b3, #004085);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        }
-        
-        .secondary-button {
-            background: #6c757d;
-            color: white;
-            border: none;
-            padding: 0.5rem 1rem;
-            border-radius: 5px;
-            transition: all 0.3s ease;
-        }
-        
-        .secondary-button:hover {
-            background: #545b62;
-        }
-        
-        /* Image Upload Styling */
-        .image-upload {
-            border: 2px dashed #007bff;
-            border-radius: 8px;
-            padding: 2rem;
-            text-align: center;
-            transition: all 0.3s ease;
-        }
-        
-        .image-upload:hover {
-            border-color: #0056b3;
-            background-color: #f8f9fa;
-        }
-        
-        /* Analysis Results */
-        .analysis-container {
-            background: white;
-            border-radius: 10px;
-            padding: 1.5rem;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            margin: 1rem 0;
-        }
-        
-        .risk-level-low {
-            background-color: #d4edda;
-            border-left: 4px solid #28a745;
-            padding: 0.5rem;
-            border-radius: 4px;
-        }
-        
-        .risk-level-moderate {
-            background-color: #fff3cd;
-            border-left: 4px solid #ffc107;
-            padding: 0.5rem;
-            border-radius: 4px;
-        }
-        
-        .risk-level-high {
-            background-color: #f8d7da;
-            border-left: 4px solid #dc3545;
-            padding: 0.5rem;
-            border-radius: 4px;
-        }
-        
-        /* History Styling */
-        .history-item {
-            background: white;
-            border: 1px solid #dee2e6;
-            border-radius: 8px;
-            padding: 1rem;
-            margin: 0.5rem 0;
-            transition: all 0.3s ease;
-        }
-        
-        .history-item:hover {
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transform: translateY(-1px);
-        }
-        
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .main-header h1 {
-                font-size: 2rem;
-            }
-            
-            .main-header p {
-                font-size: 1rem;
-            }
-            
-            .primary-button, .secondary-button {
-                width: 100%;
-                margin: 0.25rem 0;
-            }
-        }
-        
-        /* Tab Styling */
-        .tab-nav {
-            background-color: #f8f9fa;
-            border-bottom: 1px solid #dee2e6;
-        }
-        
-        .tab-content {
-            padding: 1.5rem;
-        }
-        
-        /* Footer */
-        .footer {
-            text-align: center;
-            padding: 2rem;
-            color: #6c757d;
-            border-top: 1px solid #dee2e6;
-            margin-top: 2rem;
-        }
-        
-        /* Loading Animation */
-        .loading {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #007bff;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        
-        /* Medical Icons */
-        .medical-icon {
-            color: #007bff;
-            margin-right: 0.5rem;
-        }
-        
-        /* Status Indicators */
-        .status-online {
-            color: #28a745;
-        }
-        
-        .status-offline {
-            color: #dc3545;
-        }
-        
-        .status-warning {
-            color: #ffc107;
-        }
-        """
-    
-    def create_header(self, title="SmartHeal - AI Wound Analysis", subtitle="Advanced Medical Imaging Analysis for Healthcare Professionals"):
-        """Create application header"""
-        return gr.HTML(f"""
-        <div class="main-header">
-            <h1>🏥 {title}</h1>
-            <p>{subtitle}</p>
-        </div>
-        """)
-    
-    def create_section_header(self, title, icon=""):
-        """Create section header with optional icon"""
-        return gr.HTML(f"""
-        <div class="section-header">
-            <h2>{icon} {title}</h2>
-        </div>
-        """)
-    
-    def create_subsection_header(self, title):
-        """Create subsection header"""
-        return gr.HTML(f"""
-        <div class="section-header">
-            <h3>{title}</h3>
-        </div>
-        """)
-    
-    def create_result_box(self, content, box_type="info"):
-        """Create styled result box"""
-        css_class = {
-            "info": "result-box",
-            "success": "success-box",
-            "warning": "warning-box",
-            "error": "error-box"
-        }.get(box_type, "result-box")
-        
-        return gr.HTML(f"""
-        <div class="{css_class}">
-            {content}
-        </div>
-        """)
-    
-    def create_footer(self):
-        """Create application footer"""
-        return gr.HTML("""
-        <div class="footer">
-            <p><strong>SmartHeal AI Wound Analysis System</strong></p>
-            <p>⚠️ For educational and research purposes. Always consult qualified healthcare professionals for medical decisions.</p>
-            <p>© 2025 SmartHeal. All rights reserved.</p>
-        </div>
-        """)
-    
-    def format_risk_level_display(self, risk_level):
-        """Format risk level with appropriate styling"""
-        if not risk_level or risk_level == "Unknown":
-            return "Risk Level: Unknown"
-        
-        css_class = {
-            "Low": "risk-level-low",
-            "Minimal": "risk-level-low",
-            "Moderate": "risk-level-moderate",
-            "High": "risk-level-high"
-        }.get(risk_level, "")
-        
-        if css_class:
-            return f'<div class="{css_class}"><strong>Risk Level: {risk_level}</strong></div>'
-        else:
-            return f"Risk Level: {risk_level}"
-    
-    def create_info_card(self, title, content, icon="ℹ️"):
-        """Create an information card"""
-        return gr.HTML(f"""
-        <div class="analysis-container">
-            <h4>{icon} {title}</h4>
-            <p>{content}</p>
-        </div>
-        """)
-    
-    def create_loading_indicator(self, message="Processing..."):
-        """Create loading indicator"""
-        return gr.HTML(f"""
-        <div style="text-align: center; padding: 1rem;">
-            <div class="loading"></div>
-            <p>{message}</p>
-        </div>
-        """)