Update app/streamlit_app.py

app/streamlit_app.py

@@ -253,21 +253,20 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Professional Color Scheme - Golden and Complementary Blue Theme
+# Professional Color Scheme - Sophisticated Gold/Grey/White Theme
 COLORS = {
-    'primary': '#DAA520',      # Goldenrod
-    'secondary': '#1E3A8A',    # Royal Blue (complements gold well)
+    'primary': '#D4AF37',      # Gold
+    'secondary': '#2C3E50',    # Dark Grey
     'accent': '#F8F9FA',       # Light Grey/White
-    'success': '#16A085',      # Teal Green
-    'warning': '#E67E22',      # Orange
+    'success': '#27AE60',      # Green
+    'warning': '#F39C12',      # Orange
     'danger': '#E74C3C',       # Red
-    'info': '#3498DB',         # Light Blue
-    'dark': '#1F2937',         # Dark Grey
-    'light': '#F1F5F9',        # Very Light Grey
+    'info': '#3498DB',         # Blue
+    'dark': '#34495E',         # Darker Grey
+    'light': '#ECF0F1',        # Very Light Grey
     'white': '#FFFFFF',        # Pure White
-    'text_primary': '#1F2937', # Dark Grey for main text
-    'text_secondary': '#6B7280', # Medium Grey for secondary text
-    'blue_hover': '#1E40AF'    # Darker blue for hover states
+    'text_primary': '#2C3E50', # Dark Grey for main text
+    'text_secondary': '#7F8C8D' # Medium Grey for secondary text
 }
 
 # Enhanced Custom CSS with Professional Styling
@@ -288,18 +287,21 @@ st.markdown(f"""
         font-size: 3.5rem;
         font-weight: 700;
         text-align: center;
-        color: {COLORS['primary']};
+        background: linear-gradient(135deg, {COLORS['primary']} 0%, {COLORS['warning']} 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
         margin: 2rem 0;
-        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        text-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }}
     
     /* Subtitle */
     .subtitle {{
         font-family: 'Inter', sans-serif;
         font-size: 1.2rem;
-        font-weight: 500;
+        font-weight: 400;
         text-align: center;
-        color: {COLORS['secondary']};
+        color: {COLORS['text_secondary']};
         margin-bottom: 2rem;
         line-height: 1.6;
     }}
@@ -373,13 +375,13 @@ st.markdown(f"""
     
     /* Environment Info */
     .environment-info {{
-        background: {COLORS['accent']};
+        background: linear-gradient(135deg, {COLORS['primary']}20 0%, {COLORS['primary']}10 100%);
         color: {COLORS['dark']};
         padding: 1.5rem;
         border-radius: 16px;
-        border: 1px solid {COLORS['primary']};
+        border: 1px solid {COLORS['primary']}40;
         margin: 1rem 0;
-        box-shadow: 0 4px 16px rgba(218, 165, 32, 0.1);
+        box-shadow: 0 4px 16px rgba(212, 175, 55, 0.1);
     }}
     
     .environment-info h4 {{
@@ -390,7 +392,7 @@ st.markdown(f"""
     
     /* Button Styling */
     .stButton > button {{
-        background: {COLORS['primary']};
+        background: linear-gradient(135deg, {COLORS['primary']} 0%, {COLORS['warning']} 100%);
         color: {COLORS['white']};
         border: none;
         border-radius: 12px;
@@ -398,13 +400,12 @@ st.markdown(f"""
         font-weight: 600;
         font-family: 'Inter', sans-serif;
         transition: all 0.3s ease;
-        box-shadow: 0 4px 16px rgba(218, 165, 32, 0.3);
+        box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
     }}
     
     .stButton > button:hover {{
-        background: {COLORS['blue_hover']};
         transform: translateY(-2px);
-        box-shadow: 0 6px 24px rgba(30, 64, 175, 0.4);
+        box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4);
     }}
     
     /* Tab Styling */
@@ -413,35 +414,22 @@ st.markdown(f"""
         border-radius: 12px;
         padding: 0.5rem;
         box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-        border: 1px solid {COLORS['light']};
     }}
     
     .stTabs [data-baseweb="tab"] {{
-        background: {COLORS['accent']};
-        border: 2px solid {COLORS['light']};
+        background: transparent;
         border-radius: 8px;
         color: {COLORS['text_secondary']};
         font-weight: 500;
         padding: 0.75rem 1.5rem;
         margin: 0 0.25rem;
         transition: all 0.3s ease;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    }}
-    
-    .stTabs [data-baseweb="tab"]:hover {{
-        border-color: {COLORS['primary']};
-        background: rgba(218, 165, 32, 0.1);
-        transform: translateY(-1px);
-        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
     }}
     
     .stTabs [data-baseweb="tab"][data-state="active"] {{
-        background: {COLORS['primary']};
-        border: 2px solid {COLORS['primary']};
+        background: linear-gradient(135deg, {COLORS['primary']} 0%, {COLORS['warning']} 100%);
         color: {COLORS['white']};
         font-weight: 600;
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(218, 165, 32, 0.3);
     }}
     
     /* Sidebar Styling */
@@ -489,26 +477,10 @@ st.markdown(f"""
     
     /* Progress Bar */
     .stProgress > div > div > div > div {{
-        background: {COLORS['primary']};
+        background: linear-gradient(135deg, {COLORS['primary']} 0%, {COLORS['warning']} 100%);
         border-radius: 8px;
     }}
     
-    /* Style widget containers instead of hiding them */
-    .stRadio, .stCheckbox, .stFileUploader, .stTextInput, .stTextArea, .stSelectbox {{
-        background-color: {COLORS['accent']} !important;
-        border: 1px solid {COLORS['light']} !important;
-        border-radius: 8px !important;
-        padding: 0.5rem !important;
-        margin: 0.5rem 0 !important;
-    }}
-    
-    /* Style nested containers to match */
-    .stRadio > div, .stCheckbox > div, .stFileUploader > div, 
-    .stTextInput > div, .stTextArea > div, .stSelectbox > div {{
-        background-color: transparent !important;
-        border: none !important;
-    }}
-    
     /* Alert Styling */
     .alert-critical {{
         background: linear-gradient(135deg, {COLORS['danger']}20 0%, {COLORS['danger']}10 100%);
@@ -561,7 +533,7 @@ st.markdown(f"""
         display: inline-block;
         width: 4px;
         height: 24px;
-        background: {COLORS['primary']};
+        background: linear-gradient(135deg, {COLORS['primary']} 0%, {COLORS['warning']} 100%);
         margin-right: 12px;
         border-radius: 2px;
     }}
@@ -732,8 +704,8 @@ def create_confidence_gauge(confidence: float, prediction: str):
             'bar': {'color': COLORS['danger'] if prediction == "Fake" else COLORS['success']},
             'steps': [
                 {'range': [0, 50], 'color': COLORS['light']},
-                {'range': [50, 80], 'color': 'rgba(243, 156, 18, 0.3)'},  # Warning color with transparency
-                {'range': [80, 100], 'color': 'rgba(39, 174, 96, 0.3)'}   # Success color with transparency
+                {'range': [50, 80], 'color': COLORS['warning'] + '40'},
+                {'range': [80, 100], 'color': COLORS['success'] + '40'}
             ],
             'threshold': {
                 'line': {'color': COLORS['primary'], 'width': 4},
@@ -843,19 +815,17 @@ def main():
     with tab1:
         st.markdown('<h2 class="section-header">🎯 Single Text Analysis</h2>', unsafe_allow_html=True)
 
-        # Input methods with custom styling wrapper
+        # Input methods with professional styling
         col1, col2 = st.columns([3, 1])
         with col1:
             st.markdown('<h3 class="subsection-header">Input Method</h3>', unsafe_allow_html=True)
         with col2:
-            st.markdown('<div style="background: transparent; padding: 0;">', unsafe_allow_html=True)
             input_method = st.radio(
                 "Choose input method:",
                 ["Type Text", "Upload File"],
                 horizontal=True,
                 label_visibility="collapsed"
             )
-            st.markdown('</div>', unsafe_allow_html=True)
 
         user_text = ""
 
@@ -1645,14 +1615,16 @@ def render_logs_tab():
         "Alerts Log": path_manager.get_logs_path("monitor/alerts.json")
     }
     
-    col1, col2, col3 = st.columns([2, 1, 1])
-    
-    with col1:
-        selected_log = st.selectbox("Select log file:", list(log_files.keys()))
-    with col2:
-        max_entries = st.number_input("Max entries:", min_value=10, max_value=1000, value=50)
-    with col3:
-        auto_refresh_logs = st.checkbox("Auto refresh", value=False)
+    # Group log controls in container
+    with st.container():
+        col1, col2, col3 = st.columns([2, 1, 1])
+        
+        with col1:
+            selected_log = st.selectbox("Select log file:", list(log_files.keys()))
+        with col2:
+            max_entries = st.number_input("Max entries:", min_value=10, max_value=1000, value=50)
+        with col3:
+            auto_refresh_logs = st.checkbox("Auto refresh", value=False)
     
     if st.button("📂 Load Log", type="primary", use_container_width=True) or auto_refresh_logs:
         log_path = log_files[selected_log]
@@ -1760,130 +1732,41 @@ def render_system_status_tab():
                     </div>
                     """, unsafe_allow_html=True)
 
-                # Enhanced Health components display
+                # Health components
                 model_health = health_data.get('model_health', {})
                 system_health = health_data.get('system_health', {})
                 api_health = health_data.get('api_health', {})
 
-                # Create professional health cards
                 col1, col2, col3 = st.columns(3)
 
                 with col1:
-                    st.markdown(f"""
-                    <div class="status-card" style="border: 2px solid {COLORS['primary']};">
-                        <div style="text-align: center; padding: 1rem;">
-                            <div style="color: {COLORS['primary']}; font-size: 2rem; margin-bottom: 0.5rem;">🤖</div>
-                            <h3 style="color: {COLORS['primary']}; margin: 0.5rem 0; font-weight: 600;">Model Health</h3>
-                            <div style="margin-top: 1rem;">
-                    """, unsafe_allow_html=True)
-                    
-                    status_val = model_health.get('status', 'unknown')
-                    if status_val == 'healthy':
-                        st.markdown(f'<div style="color: {COLORS["success"]}; font-weight: 600; margin: 0.5rem 0;">Status: ✅ Healthy</div>', unsafe_allow_html=True)
-                    else:
-                        st.markdown(f'<div style="color: {COLORS["danger"]}; font-weight: 600; margin: 0.5rem 0;">Status: ❌ Unhealthy</div>', unsafe_allow_html=True)
-                    
-                    # Key model metrics
-                    last_check = model_health.get('last_check', 'Unknown')
-                    if last_check != 'Unknown':
-                        try:
-                            from datetime import datetime
-                            check_time = datetime.fromisoformat(last_check.replace('Z', '+00:00'))
-                            formatted_time = check_time.strftime('%H:%M:%S')
-                            st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-size: 0.9rem;">Last Check: {formatted_time}</div>', unsafe_allow_html=True)
-                        except:
-                            st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-size: 0.9rem;">Last Check: {last_check}</div>', unsafe_allow_html=True)
-                    
-                    model_available = model_health.get('model_available', False)
-                    pipeline_available = model_health.get('pipeline_available', False)
-                    vectorizer_available = model_health.get('vectorizer_available', False)
-                    
-                    st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-size: 0.9rem;">Model Available: {"✅" if model_available else "❌"}</div>', unsafe_allow_html=True)
-                    st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-size: 0.9rem;">Pipeline Available: {"✅" if pipeline_available else "❌"}</div>', unsafe_allow_html=True)
-                    st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-size: 0.9rem;">Vectorizer Available: {"✅" if vectorizer_available else "❌"}</div>', unsafe_allow_html=True)
-                    
-                    # Model paths
-                    vectorizer_path = model_health.get('vectorizer_path', 'Unknown')
-                    pipeline_path = model_health.get('pipeline_path', 'Unknown')
-                    if vectorizer_path != 'Unknown':
-                        st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-size: 0.8rem; margin-top: 0.5rem;">Vectorizer Path: {vectorizer_path}</div>', unsafe_allow_html=True)
-                    if pipeline_path != 'Unknown':
-                        st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-size: 0.8rem;">Pipeline Path: {pipeline_path}</div>', unsafe_allow_html=True)
-                    
-                    st.markdown("""
-                            </div>
-                        </div>
-                    </div>
-                    """, unsafe_allow_html=True)
+                    st.markdown('<h4>🤖 Model Health</h4>', unsafe_allow_html=True)
+                    for key, value in model_health.items():
+                        if key not in ['test_prediction', 'model_path', 'data_path', 'environment', 'file_exists']:
+                            display_key = key.replace('_', ' ').title()
+                            if isinstance(value, bool):
+                                status_icon = "✅" if value else "❌"
+                                st.write(f"**{display_key}:** {status_icon}")
+                            else:
+                                st.write(f"**{display_key}:** {value}")
 
                 with col2:
-                    st.markdown(f"""
-                    <div class="status-card" style="border: 2px solid {COLORS['info']};">
-                        <div style="text-align: center; padding: 1rem;">
-                            <div style="color: {COLORS['info']}; font-size: 2rem; margin-bottom: 0.5rem;">💻</div>
-                            <h3 style="color: {COLORS['info']}; margin: 0.5rem 0; font-weight: 600;">System Health</h3>
-                            <div style="margin-top: 1rem;">
-                    """, unsafe_allow_html=True)
-                    
-                    cpu_percent = system_health.get('cpu_percent', 0)
-                    memory_percent = system_health.get('memory_percent', 0) 
-                    disk_percent = system_health.get('disk_percent', 0)
-                    
-                    # CPU Usage
-                    cpu_color = COLORS['success'] if cpu_percent < 70 else COLORS['warning'] if cpu_percent < 85 else COLORS['danger']
-                    st.markdown(f'<div style="color: {cpu_color}; font-weight: 600; margin: 0.5rem 0;">CPU Percent</div>', unsafe_allow_html=True)
-                    st.markdown(f'<div style="color: {cpu_color}; font-size: 1.5rem; font-weight: 700;">{cpu_percent:.1f}%</div>', unsafe_allow_html=True)
-                    
-                    # Memory Usage  
-                    memory_color = COLORS['success'] if memory_percent < 70 else COLORS['warning'] if memory_percent < 85 else COLORS['danger']
-                    st.markdown(f'<div style="color: {memory_color}; font-weight: 600; margin: 0.5rem 0;">Memory Percent</div>', unsafe_allow_html=True)
-                    st.markdown(f'<div style="color: {memory_color}; font-size: 1.5rem; font-weight: 700;">{memory_percent:.1f}%</div>', unsafe_allow_html=True)
-                    
-                    # Disk Usage
-                    disk_color = COLORS['success'] if disk_percent < 70 else COLORS['warning'] if disk_percent < 85 else COLORS['danger']
-                    st.markdown(f'<div style="color: {disk_color}; font-weight: 600; margin: 0.5rem 0;">Disk Percent</div>', unsafe_allow_html=True)
-                    st.markdown(f'<div style="color: {disk_color}; font-size: 1.5rem; font-weight: 700;">{disk_percent:.1f}%</div>', unsafe_allow_html=True)
-                    
-                    # Uptime
-                    uptime = system_health.get('uptime', 0)
-                    uptime_hours = uptime / 3600 if uptime else 0
-                    st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-weight: 600; margin: 0.5rem 0;">Uptime</div>', unsafe_allow_html=True)
-                    st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-size: 1.2rem; font-weight: 600;">{uptime_hours:.1f}h</div>', unsafe_allow_html=True)
-                    
-                    st.markdown("""
-                            </div>
-                        </div>
-                    </div>
-                    """, unsafe_allow_html=True)
+                    st.markdown('<h4>💻 System Health</h4>', unsafe_allow_html=True)
+                    for key, value in system_health.items():
+                        display_key = key.replace('_', ' ').title()
+                        if 'percent' in key:
+                            st.metric(display_key, f"{value:.1f}%")
+                        elif 'uptime' in key:
+                            uptime_hours = value / 3600
+                            st.metric(display_key, f"{uptime_hours:.1f}h")
+                        else:
+                            st.write(f"**{display_key}:** {value}")
 
                 with col3:
-                    st.markdown(f"""
-                    <div class="status-card" style="border: 2px solid {COLORS['secondary']};">
-                        <div style="text-align: center; padding: 1rem;">
-                            <div style="color: {COLORS['secondary']}; font-size: 2rem; margin-bottom: 0.5rem;">🌐</div>
-                            <h3 style="color: {COLORS['secondary']}; margin: 0.5rem 0; font-weight: 600;">API Health</h3>
-                            <div style="margin-top: 1rem;">
-                    """, unsafe_allow_html=True)
-                    
-                    rate_limit_active = api_health.get('rate_limit_active', False)
-                    active_connections = api_health.get('active_connections', 0)
-                    
-                    st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-weight: 600; margin: 0.5rem 0;">Rate Limit Active: {"✅" if rate_limit_active else "❌"}</div>', unsafe_allow_html=True)
-                    
-                    st.markdown(f'<div style="color: {COLORS["secondary"]}; font-weight: 600; margin: 0.5rem 0;">Active Connections</div>', unsafe_allow_html=True)
-                    st.markdown(f'<div style="color: {COLORS["secondary"]}; font-size: 1.5rem; font-weight: 700;">{active_connections}</div>', unsafe_allow_html=True)
-                    
-                    # Add more API health metrics if available
+                    st.markdown('<h4>🌐 API Health</h4>', unsafe_allow_html=True)
                     for key, value in api_health.items():
-                        if key not in ['rate_limit_active', 'active_connections'] and not key.startswith('_'):
-                            display_key = key.replace('_', ' ').title()
-                            st.markdown(f'<div style="color: {COLORS["text_secondary"]}; font-size: 0.9rem; margin: 0.2rem 0;">{display_key}: {value}</div>', unsafe_allow_html=True)
-                    
-                    st.markdown("""
-                            </div>
-                        </div>
-                    </div>
-                    """, unsafe_allow_html=True)
+                        display_key = key.replace('_', ' ').title()
+                        st.write(f"**{display_key}:** {value}")
 
         except Exception as e:
             st.markdown(f"""
@@ -2297,9 +2180,9 @@ def render_cv_results_section():
         if 'model_version' in cv_results:
             st.markdown(f"""
             <div class="info-message">
-                <strong>Model:</strong> {cv_results.get('model_version', 'Unknown')} | 
-                <strong>Type:</strong> {cv_results.get('model_type', 'Unknown')} | 
-                <strong>Trained:</strong> {cv_results.get('training_timestamp', 'Unknown')}
+                **Model:** {cv_results.get('model_version', 'Unknown')} | 
+                **Type:** {cv_results.get('model_type', 'Unknown')} | 
+                **Trained:** {cv_results.get('training_timestamp', 'Unknown')}
             </div>
             """, unsafe_allow_html=True)
         
@@ -2366,8 +2249,8 @@ def render_model_comparison_section():
         
         st.markdown(f"""
         <div class="info-message">
-            <strong>Comparison:</strong> {models_compared.get('model1_name', 'Model 1')} vs {models_compared.get('model2_name', 'Model 2')} | 
-            <strong>Timestamp:</strong> {comparison_results.get('comparison_timestamp', 'Unknown')}
+            **Comparison:** {models_compared.get('model1_name', 'Model 1')} vs {models_compared.get('model2_name', 'Model 2')} | 
+            **Timestamp:** {comparison_results.get('comparison_timestamp', 'Unknown')}
         </div>
         """, unsafe_allow_html=True)