diff --git "a/src/ui_components_original.py" "b/src/ui_components_original.py" --- "a/src/ui_components_original.py" +++ "b/src/ui_components_original.py" @@ -1,4 +1,4 @@ -# src/ui_components_improved.py +# src/ui_components_original.py import gradio as gr import os @@ -316,501 +316,510 @@ class UIComponents: return ["Default Hospital - Location"] def get_custom_css(self): - # SmartHeal-inspired theme with purple/blue gradient and modern design - return """ -/* =================== SMARTHEAL THEME (Inspired by smartheal.org) =================== */ -:root { - /* Primary colors from SmartHeal */ - --sh-primary: #6366f1; /* indigo-500 */ - --sh-primary-dark: #4f46e5; /* indigo-600 */ - --sh-primary-light: #a5b4fc; /* indigo-300 */ - --sh-secondary: #8b5cf6; /* violet-500 */ - --sh-accent: #06b6d4; /* cyan-500 */ - - /* Neutral colors */ - --sh-gray-50: #f8fafc; - --sh-gray-100: #f1f5f9; - --sh-gray-200: #e2e8f0; - --sh-gray-300: #cbd5e1; - --sh-gray-400: #94a3b8; - --sh-gray-500: #64748b; - --sh-gray-600: #475569; - --sh-gray-700: #334155; - --sh-gray-800: #1e293b; - --sh-gray-900: #0f172a; - - /* Background and surface */ - --sh-bg: #f8fafc; - --sh-surface: #ffffff; - --sh-surface-hover: #f1f5f9; - - /* Shadows and effects */ - --sh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - --sh-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); - --sh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); - --sh-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); - - /* Border radius */ - --sh-radius-sm: 0.375rem; - --sh-radius: 0.5rem; - --sh-radius-lg: 0.75rem; - --sh-radius-xl: 1rem; - - /* Transitions */ - --sh-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Global styles */ -html, body, .gradio-container { - background: var(--sh-bg) !important; - color: var(--sh-gray-900) !important; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; - line-height: 1.6 !important; -} - -/* Header styling inspired by SmartHeal */ -.medical-header { - background: linear-gradient(135deg, var(--sh-primary) 0%, var(--sh-secondary) 100%) !important; - color: white !important; - padding: 2rem 2.5rem !important; - border-radius: var(--sh-radius-xl) !important; - display: flex !important; - align-items: center !important; - justify-content: space-between !important; - margin-bottom: 1.5rem !important; - box-shadow: var(--sh-shadow-xl) !important; - position: relative !important; - overflow: hidden !important; -} - -.medical-header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url('data:image/svg+xml,') !important; - opacity: 0.3; -} - -.header-left { - display: flex !important; - align-items: center !important; - gap: 1.5rem !important; - position: relative !important; - z-index: 1 !important; -} - -.logo { - width: 4rem !important; - height: 4rem !important; - border-radius: var(--sh-radius-lg) !important; - background: rgba(255, 255, 255, 0.95) !important; - padding: 0.5rem !important; - box-shadow: var(--sh-shadow-lg) !important; - transition: var(--sh-transition) !important; -} - -.logo:hover { - transform: scale(1.05) !important; - box-shadow: var(--sh-shadow-xl) !important; -} - -.medical-header h1 { - margin: 0 !important; - font-size: 2.25rem !important; - font-weight: 800 !important; - letter-spacing: -0.025em !important; - background: linear-gradient(45deg, #ffffff, #e0e7ff) !important; - -webkit-background-clip: text !important; - -webkit-text-fill-color: transparent !important; - background-clip: text !important; -} - -.medical-header p { - margin: 0.5rem 0 0 0 !important; - opacity: 0.9 !important; - font-weight: 500 !important; - font-size: 1.1rem !important; -} - -.header-nav { - display: flex !important; - gap: 1.5rem !important; - align-items: center !important; - font-weight: 600 !important; - position: relative !important; - z-index: 1 !important; -} - -.header-nav a { - color: rgba(255, 255, 255, 0.9) !important; - text-decoration: none !important; - padding: 0.75rem 1rem !important; - border-radius: var(--sh-radius) !important; - transition: var(--sh-transition) !important; - position: relative !important; - overflow: hidden !important; -} - -.header-nav a::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); - transition: left 0.5s; -} - -.header-nav a:hover { - background: rgba(255, 255, 255, 0.15) !important; - transform: translateY(-2px) !important; - color: white !important; -} - -.header-nav a:hover::before { - left: 100%; -} - -/* Card and form styling */ -.gr-form, .gr-group, .gradio-container .gr-box, .gradio-container .gr-panel { - background: var(--sh-surface) !important; - border-radius: var(--sh-radius-xl) !important; - padding: 2rem !important; - box-shadow: var(--sh-shadow-lg) !important; - border: 1px solid var(--sh-gray-200) !important; - transition: var(--sh-transition) !important; -} - -.gr-form:hover, .gr-group:hover { - box-shadow: var(--sh-shadow-xl) !important; - transform: translateY(-2px) !important; -} - -/* Input styling */ -.gr-textbox, .gr-number, .gr-dropdown, .gr-slider { - border-radius: var(--sh-radius-lg) !important; - border: 2px solid var(--sh-gray-200) !important; - background: var(--sh-surface) !important; - box-shadow: var(--sh-shadow-sm) !important; - transition: var(--sh-transition) !important; - font-size: 1rem !important; - padding: 0.75rem 1rem !important; -} - -.gr-textbox:focus-within, .gr-number:focus-within, .gr-dropdown:focus-within { - border-color: var(--sh-primary) !important; - box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important; - transform: translateY(-1px) !important; -} - -/* Button styling */ -button.gr-button, button.gr-button-primary { - background: linear-gradient(135deg, var(--sh-primary) 0%, var(--sh-primary-dark) 100%) !important; - color: white !important; - border: none !important; - border-radius: var(--sh-radius-lg) !important; - font-weight: 700 !important; - padding: 1rem 2rem !important; - letter-spacing: 0.025em !important; - box-shadow: var(--sh-shadow-lg) !important; - transition: var(--sh-transition) !important; - text-transform: none !important; - position: relative !important; - overflow: hidden !important; -} - -button.gr-button::before, button.gr-button-primary::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); - transition: left 0.5s; -} - -button.gr-button:hover, button.gr-button-primary:hover { - transform: translateY(-3px) !important; - box-shadow: var(--sh-shadow-xl) !important; - filter: brightness(1.05) !important; -} - -button.gr-button:hover::before, button.gr-button-primary:hover::before { - left: 100%; -} - -button.gr-button-secondary { - background: var(--sh-gray-100) !important; - color: var(--sh-gray-700) !important; - border: 2px solid var(--sh-gray-300) !important; - box-shadow: var(--sh-shadow) !important; -} - -button.gr-button-secondary:hover { - background: var(--sh-gray-200) !important; - border-color: var(--sh-gray-400) !important; -} - -/* Tab styling */ -.gradio-container .tabs, .gradio-container .tabitem { - border-radius: var(--sh-radius-xl) !important; - background: var(--sh-surface) !important; -} - -.gradio-container .tab-nav button { - border-radius: var(--sh-radius-lg) !important; - background: var(--sh-gray-100) !important; - border: 2px solid var(--sh-gray-200) !important; - color: var(--sh-gray-600) !important; - padding: 0.75rem 1.5rem !important; - font-weight: 600 !important; - transition: var(--sh-transition) !important; - margin-right: 0.5rem !important; -} - -.gradio-container .tab-nav button:hover { - background: var(--sh-gray-200) !important; - color: var(--sh-gray-700) !important; - transform: translateY(-1px) !important; -} - -.gradio-container .tab-nav button.selected { - background: linear-gradient(135deg, var(--sh-primary) 0%, var(--sh-primary-dark) 100%) !important; - border-color: var(--sh-primary) !important; - color: white !important; - box-shadow: var(--sh-shadow-lg) !important; -} - -/* Status messages */ -.status-success { - background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important; - border: 2px solid #22c55e !important; - color: #15803d !important; - padding: 1rem 1.5rem !important; - border-radius: var(--sh-radius-lg) !important; - margin: 1rem 0 !important; - box-shadow: var(--sh-shadow) !important; - font-weight: 600 !important; -} - -.status-error { - background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important; - border: 2px solid #ef4444 !important; - color: #dc2626 !important; - padding: 1rem 1.5rem !important; - border-radius: var(--sh-radius-lg) !important; - margin: 1rem 0 !important; - box-shadow: var(--sh-shadow) !important; - font-weight: 600 !important; -} - -.status-warning { - background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important; - border: 2px solid #f59e0b !important; - color: #d97706 !important; - padding: 1rem 1.5rem !important; - border-radius: var(--sh-radius-lg) !important; - margin: 1rem 0 !important; - box-shadow: var(--sh-shadow) !important; - font-weight: 600 !important; -} - -.status-info { - background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important; - border: 2px solid #3b82f6 !important; - color: #1d4ed8 !important; - padding: 1rem 1.5rem !important; - border-radius: var(--sh-radius-lg) !important; - margin: 1rem 0 !important; - box-shadow: var(--sh-shadow) !important; - font-weight: 600 !important; -} - -/* Image styling */ -.gr-image { - border-radius: var(--sh-radius-xl) !important; - overflow: hidden !important; - box-shadow: var(--sh-shadow-lg) !important; - transition: var(--sh-transition) !important; -} - -.gr-image:hover { - transform: scale(1.02) !important; - box-shadow: var(--sh-shadow-xl) !important; -} - -/* Analysis results styling */ -.analysis-container { - background: var(--sh-surface) !important; - border-radius: var(--sh-radius-xl) !important; - padding: 2rem !important; - margin: 1.5rem 0 !important; - box-shadow: var(--sh-shadow-xl) !important; - border: 1px solid var(--sh-gray-200) !important; -} - -.analysis-header { - background: linear-gradient(135deg, var(--sh-primary) 0%, var(--sh-secondary) 100%) !important; - color: white !important; - padding: 2rem !important; - border-radius: var(--sh-radius-lg) !important; - margin-bottom: 2rem !important; - text-align: center !important; - position: relative !important; - overflow: hidden !important; -} - -.analysis-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: shimmer 3s ease-in-out infinite; -} - -@keyframes shimmer { - 0%, 100% { transform: rotate(0deg); } - 50% { transform: rotate(180deg); } -} - -.metric-grid { - display: grid !important; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; - gap: 1.5rem !important; - margin: 2rem 0 !important; -} - -.metric-card { - background: var(--sh-surface) !important; - padding: 1.5rem !important; - border-radius: var(--sh-radius-lg) !important; - text-align: center !important; - box-shadow: var(--sh-shadow) !important; - border: 1px solid var(--sh-gray-200) !important; - transition: var(--sh-transition) !important; -} - -.metric-card:hover { - transform: translateY(-4px) !important; - box-shadow: var(--sh-shadow-xl) !important; - border-color: var(--sh-primary) !important; -} - -.metric-card h3 { - color: var(--sh-primary) !important; - margin: 0 0 0.5rem 0 !important; - font-size: 1rem !important; - font-weight: 600 !important; - text-transform: uppercase !important; - letter-spacing: 0.05em !important; -} - -.metric-card p { - font-weight: 800 !important; - font-size: 1.5rem !important; - color: var(--sh-gray-900) !important; - margin: 0 !important; -} - -/* Responsive design */ -@media (max-width: 768px) { - .medical-header { - padding: 1.5rem !important; - border-radius: var(--sh-radius-lg) !important; - flex-direction: column !important; - text-align: center !important; - gap: 1rem !important; - } - - .medical-header h1 { - font-size: 1.75rem !important; - } - - .header-nav { - flex-wrap: wrap !important; - justify-content: center !important; - gap: 0.75rem !important; - } - - .logo { - width: 3rem !important; - height: 3rem !important; - } - - .gr-form, .gr-group { - padding: 1.5rem !important; - } - - .metric-grid { - grid-template-columns: 1fr !important; - gap: 1rem !important; - } -} - -/* Loading animations */ -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -.loading { - animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; -} - -/* Scrollbar styling */ -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar-track { - background: var(--sh-gray-100); - border-radius: var(--sh-radius); -} - -::-webkit-scrollbar-thumb { - background: var(--sh-gray-400); - border-radius: var(--sh-radius); - transition: var(--sh-transition); -} - -::-webkit-scrollbar-thumb:hover { - background: var(--sh-gray-500); -} - -/* Focus styles for accessibility */ -*:focus { - outline: 2px solid var(--sh-primary) !important; - outline-offset: 2px !important; -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - :root { - --sh-primary: #4338ca; - --sh-primary-dark: #3730a3; - --sh-gray-900: #000000; - --sh-surface: #ffffff; - } -} - -/* Reduced motion support */ -@media (prefers-reduced-motion: reduce) { - *, *::before, *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -""" + return """ + /* =================== SMARTHEAL-INSPIRED 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, #f8fafc 0%, #e2e8f0 100%) !important; + color: #1e293b !important; + line-height: 1.6 !important; + } + + /* SmartHeal-inspired Header */ + .medical-header { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; + color: white !important; + padding: 40px !important; + border-radius: 0 0 24px 24px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + margin-bottom: 0 !important; + box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3) !important; + border: none !important; + position: relative !important; + overflow: hidden !important; + } + + .medical-header::before { + content: '' !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + background: url('data:image/svg+xml,') !important; + opacity: 0.3 !important; + pointer-events: none !important; + } + + .logo { + width: 80px !important; + height: 80px !important; + border-radius: 50% !important; + margin-right: 24px !important; + border: 4px solid rgba(255, 255, 255, 0.2) !important; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important; + background: white !important; + padding: 4px !important; + position: relative !important; + z-index: 2 !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, #f1f5f9) !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; + position: relative !important; + z-index: 2 !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; + position: relative !important; + z-index: 2 !important; + } + + /* Enhanced Form Styling */ + .gr-form { + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important; + border-radius: 20px !important; + padding: 32px !important; + margin: 24px 0 !important; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08) !important; + border: 1px solid rgba(99, 102, 241, 0.1) !important; + backdrop-filter: blur(10px) !important; + position: relative !important; + overflow: hidden !important; + } + + .gr-form::before { + content: '' !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + height: 4px !important; + background: linear-gradient(90deg, #6366f1, #8b5cf6, #f97316) !important; + z-index: 1 !important; + } + + /* Professional Input Fields */ + .gr-textbox, .gr-number, .gr-dropdown { + 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.04) !important; + font-size: 1rem !important; + color: #1e293b !important; + padding: 16px 20px !important; + } + + .gr-textbox:focus, .gr-number:focus, .gr-dropdown:focus, + .gr-textbox input:focus, .gr-number input:focus, .gr-dropdown select:focus { + border-color: #6366f1 !important; + box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important; + background: #ffffff !important; + outline: none !important; + transform: translateY(-1px) !important; + } + + /* SmartHeal-inspired Button Styling */ + button.gr-button, button.gr-button-primary { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 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(99, 102, 241, 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, #4f46e5 0%, #7c3aed 100%) !important; + box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4) !important; + transform: translateY(-3px) !important; + } + + button.gr-button::before, button.gr-button-primary::before { + content: '' !important; + position: absolute !important; + top: 0 !important; + left: -100% !important; + width: 100% !important; + height: 100% !important; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important; + transition: left 0.5s !important; + } + + button.gr-button:hover::before, button.gr-button-primary:hover::before { + left: 100% !important; + } + + /* Secondary Button Style */ + button.gr-button-secondary { + background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important; + color: #ffffff !important; + border: none !important; + border-radius: 12px !important; + font-weight: 600 !important; + padding: 14px 28px !important; + font-size: 1rem !important; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; + box-shadow: 0 4px 16px rgba(249, 115, 22, 0.3) !important; + } + + button.gr-button-secondary:hover { + background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important; + box-shadow: 0 8px 32px rgba(249, 115, 22, 0.4) !important; + transform: translateY(-2px) !important; + } + + /* Professional Status Messages */ + .status-success { + background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important; + border: 2px solid #22c55e !important; + color: #15803d !important; + padding: 20px 24px !important; + border-radius: 16px !important; + font-weight: 600 !important; + margin: 16px 0 !important; + box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2) !important; + backdrop-filter: blur(10px) !important; + position: relative !important; + } + + .status-success::before { + content: '✅' !important; + position: absolute !important; + left: 20px !important; + top: 50% !important; + transform: translateY(-50%) !important; + font-size: 1.2rem !important; + } + + .status-error { + background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%) !important; + border: 2px solid #ef4444 !important; + color: #dc2626 !important; + padding: 20px 24px !important; + border-radius: 16px !important; + font-weight: 600 !important; + margin: 16px 0 !important; + box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2) !important; + backdrop-filter: blur(10px) !important; + position: relative !important; + } + + .status-error::before { + content: '❌' !important; + position: absolute !important; + left: 20px !important; + top: 50% !important; + transform: translateY(-50%) !important; + font-size: 1.2rem !important; + } + + .status-warning { + background: linear-gradient(135deg, #fffbeb 0%, #fed7aa 100%) !important; + border: 2px solid #f59e0b !important; + color: #d97706 !important; + padding: 20px 24px !important; + border-radius: 16px !important; + font-weight: 600 !important; + margin: 16px 0 !important; + box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2) !important; + backdrop-filter: blur(10px) !important; + position: relative !important; + } + + .status-warning::before { + content: '⚠️' !important; + position: absolute !important; + left: 20px !important; + top: 50% !important; + transform: translateY(-50%) !important; + font-size: 1.2rem !important; + } + + /* Enhanced Tab Styling */ + .gr-tab-nav { + background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important; + border-radius: 16px 16px 0 0 !important; + padding: 8px !important; + border-bottom: 2px solid #e2e8f0 !important; + } + + .gr-tab-nav button { + background: transparent !important; + border: none !important; + border-radius: 12px !important; + padding: 12px 24px !important; + font-weight: 600 !important; + color: #64748b !important; + transition: all 0.3s ease !important; + margin: 0 4px !important; + } + + .gr-tab-nav button.selected { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; + color: white !important; + box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3) !important; + } + + .gr-tab-nav button:hover:not(.selected) { + background: rgba(99, 102, 241, 0.1) !important; + color: #6366f1 !important; + } + + /* Enhanced Image Upload Area */ + .gr-file-upload { + border: 3px dashed #6366f1 !important; + border-radius: 16px !important; + background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; + padding: 40px !important; + text-align: center !important; + transition: all 0.3s ease !important; + position: relative !important; + overflow: hidden !important; + } + + .gr-file-upload:hover { + border-color: #8b5cf6 !important; + background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important; + transform: translateY(-2px) !important; + box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1) !important; + } + + .gr-file-upload::before { + content: '📸' !important; + font-size: 3rem !important; + display: block !important; + margin-bottom: 16px !important; + } + + /* Enhanced Slider Styling */ + .gr-slider { + background: #f1f5f9 !important; + border-radius: 12px !important; + padding: 20px !important; + border: 2px solid #e2e8f0 !important; + } + + .gr-slider input[type="range"] { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; + border-radius: 8px !important; + height: 8px !important; + } + + .gr-slider input[type="range"]::-webkit-slider-thumb { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; + border: 3px solid white !important; + border-radius: 50% !important; + width: 24px !important; + height: 24px !important; + box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important; + } + + /* Analysis Results Styling */ + .analysis-container { + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important; + border-radius: 20px !important; + padding: 32px !important; + margin: 24px 0 !important; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08) !important; + border: 1px solid rgba(99, 102, 241, 0.1) !important; + position: relative !important; + overflow: hidden !important; + } + + .analysis-container::before { + content: '' !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + height: 4px !important; + background: linear-gradient(90deg, #6366f1, #8b5cf6, #f97316) !important; + z-index: 1 !important; + } + + .analysis-header { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; + color: white !important; + padding: 24px 32px !important; + border-radius: 16px 16px 0 0 !important; + margin: -32px -32px 24px -32px !important; + text-align: center !important; + position: relative !important; + z-index: 2 !important; + } + + .analysis-header h1 { + margin: 0 !important; + font-size: 2.5rem !important; + font-weight: 800 !important; + text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3) !important; + } + + .analysis-header p { + margin: 8px 0 0 0 !important; + opacity: 0.9 !important; + font-size: 1.1rem !important; + font-weight: 500 !important; + } + + /* Image Gallery Styling */ + .image-gallery { + display: grid !important; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; + gap: 24px !important; + margin: 24px 0 !important; + } + + .image-item { + background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%) !important; + border-radius: 16px !important; + padding: 20px !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important; + border: 1px solid #e2e8f0 !important; + transition: all 0.3s ease !important; + text-align: center !important; + } + + .image-item:hover { + transform: translateY(-4px) !important; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12) !important; + border-color: #6366f1 !important; + } + + .image-item img { + width: 100% !important; + border-radius: 12px !important; + margin-bottom: 16px !important; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; + } + + .image-item h4 { + color: #1e293b !important; + margin: 0 0 8px 0 !important; + font-size: 1.2rem !important; + font-weight: 700 !important; + } + + .image-item p { + color: #64748b !important; + margin: 0 !important; + font-size: 0.95rem !important; + line-height: 1.5 !important; + } + + /* Responsive Design */ + @media (max-width: 768px) { + .medical-header { + padding: 24px 16px !important; + text-align: center !important; + flex-direction: column !important; + } + .medical-header h1 { + font-size: 2.5rem !important; + margin-top: 16px !important; + } + .logo { + width: 60px !important; + height: 60px !important; + margin-right: 0 !important; + margin-bottom: 16px !important; + } + .gr-form { + padding: 20px !important; + margin: 16px 8px !important; + } + .image-gallery { + grid-template-columns: 1fr !important; + gap: 16px !important; + } + button.gr-button, button.gr-button-primary { + padding: 14px 24px !important; + font-size: 1rem !important; + } + } + + /* Loading Animation */ + @keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } + } + + .loading { + animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; + } + + /* Gradient Text Effect */ + .gradient-text { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important; + -webkit-background-clip: text !important; + -webkit-text-fill-color: transparent !important; + background-clip: text !important; + font-weight: 700 !important; + } + + /* Card Hover Effects */ + .card-hover { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; + } + + .card-hover:hover { + transform: translateY(-8px) scale(1.02) !important; + box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15) !important; + } + + /* Disclaimer Styling */ + .disclaimer { + background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%) !important; + border: 2px solid #f87171 !important; + border-radius: 16px !important; + padding: 20px 24px !important; + margin: 16px 0 !important; + box-shadow: 0 8px 24px rgba(248, 113, 113, 0.2) !important; + } + + .disclaimer h3 { + color: #dc2626 !important; + margin: 0 0 12px 0 !important; + font-size: 1.3rem !important; + font-weight: 700 !important; + } + + .disclaimer p { + color: #991b1b !important; + margin: 0 !important; + font-weight: 600 !important; + line-height: 1.5 !important; + } + """ def create_interface(self): """ @@ -891,33 +900,23 @@ button.gr-button-secondary:hover { # ----------------------- Blocks UI ----------------------- with gr.Blocks(css=self.get_custom_css(), title="SmartHeal - AI Wound Care Assistant") as app: - # Header with SmartHeal branding + # Header logo_url = "https://scontent.fccu31-2.fna.fbcdn.net/v/t39.30808-6/275933824_102121829111657_3325198727201325354_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=6ee11a&_nc_ohc=5F0FMH9ni8QQ7kNvwHM_7v-&_nc_oc=AdnDo4fj3kdh7ShWq75N3ZEXKuGjbAu9-xZpx6bd82Vo4w0y6D-iHL64ETyW4lWod7s&_nc_zt=23&_nc_ht=scontent.fccu31-2.fna&_nc_gid=a4EiY054p4ChBMLqHCkaIA&oh=00_AfVn-aHeCy95qNhA--DhvjkWp6qdzowKpPRyJ8jevATOmQ&oe=68B1CF4B" gr.HTML(f"""
Revolutionising Healthcare with Precision Technology
-Advanced Wound Care Analysis & Clinical Support System
This AI-powered system is designed for educational and testing purposes only. It is not intended to replace professional medical judgment or clinical assessment. Always consult qualified healthcare professionals for proper diagnosis and treatment decisions.
+This system is for testing/education and not a substitute for clinical judgment.
+
Use the drawing tool below to manually mark the wound area. - Select the pen tool and carefully draw over the wound region to create your custom mask. + Select the pen tool and draw over the wound region to create your mask.
Advanced organization management features coming soon to SmartHeal platform.
-Role: {html.escape(user_role.title())} | ID: {user_id}
-Binary mask showing precise wound boundaries
-Mask not available
'} -White = Wound Area, Black = Background
+ if manual_mask_path: + # Use manual mask + visual_results = self.wound_analyzer.analyze_wound( + img_path, {}, seg_adjust=0.0, manual_mask_path=manual_mask_path + ) + mask_type = "Manual" + else: + # Use automatic segmentation + visual_results = self.wound_analyzer.perform_visual_analysis(image_pil) + mask_type = "Automatic" + + if not visual_results: + return "No specific risk factors identified.
" + + # ---------------------- Image Gallery ---------------------- + image_gallery_html = "Uploaded wound photograph for analysis
+AI-powered wound boundary detection with confidence: {conf_str}
+Clinician-adjusted wound boundary used for this report
+Precise wound boundary identification and tissue analysis
+Comprehensive wound assessment powered by advanced AI technology
+