Update app.py

app.py

@@ -5,7 +5,6 @@ import os
 import plotly.graph_objects as go
 from huggingface_hub import hf_hub_download
 from datetime import datetime
-import base64
 
 # --- CONFIGURATION ---
 HF_USERNAME = os.getenv("HF_USERNAME", "iStillWaters")
@@ -15,9 +14,9 @@ MODEL_REPO_ID = f"{HF_USERNAME}/{MODEL_REPO_NAME}"
 MODEL_FILENAME = "best_engine_model.pkl"
 SCALER_FILENAME = "scaler.joblib"
 
-# --- PAGE CONFIGURATION ---
+# --- PAGE CONFIG ---
 st.set_page_config(
-    page_title="Engine Predictive Maintenance",
+    page_title="Engine Health Monitor",
     page_icon="🔧",
     layout="wide",
     initial_sidebar_state="collapsed"
@@ -26,566 +25,310 @@ st.set_page_config(
 # --- LOAD MODEL ---
 @st.cache_resource
 def load_artifacts():
-    """Load ML model and scaler"""
     try:
         model_path = hf_hub_download(repo_id=MODEL_REPO_ID, filename=MODEL_FILENAME)
         scaler_path = hf_hub_download(repo_id=MODEL_REPO_ID, filename=SCALER_FILENAME)
-        model = joblib.load(model_path)
-        scaler = joblib.load(scaler_path)
-        return model, scaler, None
+        return joblib.load(model_path), joblib.load(scaler_path), None
     except Exception as e:
         return None, None, str(e)
 
-# --- SESSION STATE ---
-if 'predictions' not in st.session_state:
-    st.session_state.predictions = []
-if 'current_status' not in st.session_state:
-    st.session_state.current_status = 'unknown'
-
 # --- CUSTOM CSS ---
-def load_css():
-    st.markdown("""
-    <style>
-    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;600;700&display=swap');
+st.markdown("""
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@400;600;700&display=swap');
     
-    /* Global Styles */
+    /* Global */
     .stApp {
-        background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
-        color: #e0e6ed;
-    }
-    
-    .main {
-        background: transparent;
-    }
-    
-    /* Hide Streamlit Elements */
-    #MainMenu {visibility: hidden;}
-    footer {visibility: hidden;}
-    header {visibility: hidden;}
-    
-    /* Hide slider labels */
-    .stSlider > label {
-        display: none !important;
+        background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
     }
     
-    /* Hide the container/bar above sliders */
-    .stSlider > div[data-baseweb="slider"] > div:first-child {
-        display: none !important;
-    }
-    
-    /* Compact number inputs */
-    .stNumberInput > label {
-        display: none !important;
-    }
-    
-    .stNumberInput > div {
-        margin-bottom: 0 !important;
-    }
-    
-    /* Hide bars above number inputs */
-    .stNumberInput > div > div:first-child {
-        display: none !important;
-    }
-    
-    .stNumberInput input {
-        font-size: 0.9rem !important;
-        padding: 0.3rem !important;
-        height: 2.2rem !important;
-    }
-    
-    /* Reduce spacing in Streamlit elements */
-    .block-container {
+    .main .block-container {
         padding-top: 1rem !important;
-        padding-bottom: 0rem !important;
-    }
-    
-    /* Compact dividers */
-    hr {
-        margin: 0.5rem 0 !important;
-    }
-    
-    /* Compact markdown headers */
-    h3 {
-        margin-top: 0.5rem !important;
-        margin-bottom: 0.5rem !important;
-        font-size: 1.3rem !important;
+        padding-bottom: 1rem !important;
+        max-width: 1400px !important;
     }
     
-    h4 {
-        margin-top: 0.5rem !important;
-        margin-bottom: 0.5rem !important;
-        font-size: 1.1rem !important;
-        font-family: 'Rajdhani', sans-serif !important;
-    }
+    /* Hide Streamlit UI */
+    #MainMenu, footer, header {visibility: hidden;}
     
-    /* Remove extra spacing from columns */
-    [data-testid="column"] {
-        padding: 0.3rem !important;
-    }
-    
-    /* Title Section */
+    /* Title */
     .main-title {
         font-family: 'Orbitron', sans-serif;
-        font-size: 2.2rem;
+        font-size: 2rem;
         font-weight: 900;
         text-align: center;
-        background: linear-gradient(135deg, #00d4ff 0%, #0090ff 50%, #0051ff 100%);
+        background: linear-gradient(135deg, #00d4ff, #0090ff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        background-clip: text;
-        margin-bottom: 0.3rem;
+        margin-bottom: 0.5rem;
         text-transform: uppercase;
         letter-spacing: 2px;
-        text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
     }
     
     .subtitle {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1rem;
+        font-size: 0.9rem;
         text-align: center;
         color: #8b95a5;
         margin-bottom: 1rem;
-        letter-spacing: 1px;
-    }
-    
-    /* Dashboard Container */
-    .dashboard-container {
-        position: relative;
-        width: 100%;
-        max-width: 1400px;
-        margin: 0 auto;
-        padding: 0.5rem;
-    }
-    
-    /* Central Engine Icon Container */
-    .engine-container {
-        position: relative;
-        width: 180px;
-        height: 180px;
-        margin: 1rem auto 3rem auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    
-    /* Rotating Glow Ring */
-    .glow-ring {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-        border: 2px solid transparent;
-        background: linear-gradient(45deg, transparent 30%, var(--ring-color, #00d4ff) 50%, transparent 70%);
-        animation: rotate 4s linear infinite;
-        opacity: 0.6;
-    }
-    
-    @keyframes rotate {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-    
-    /* Engine Circle Background */
-    .engine-circle {
-        position: absolute;
-        width: 160px;
-        height: 160px;
-        border-radius: 50%;
-        background: radial-gradient(circle at 30% 30%, 
-            rgba(26, 31, 58, 0.9) 0%, 
-            rgba(10, 14, 39, 0.95) 100%);
-        border: 3px solid var(--border-color, #1a4d7a);
-        box-shadow: 
-            0 0 30px var(--glow-color, rgba(0, 212, 255, 0.4)),
-            inset 0 0 20px rgba(0, 0, 0, 0.5);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.5s ease;
-    }
-    
-    /* Engine Icon */
-    .engine-icon {
-        font-size: 5rem;
-        filter: drop-shadow(0 0 15px var(--glow-color, rgba(0, 212, 255, 0.6)));
-        transition: all 0.5s ease;
-    }
-    
-    /* Status Colors */
-    .status-healthy {
-        --border-color: #00ff88;
-        --glow-color: rgba(0, 255, 136, 0.5);
-        --ring-color: #00ff88;
-    }
-    
-    .status-warning {
-        --border-color: #ffaa00;
-        --glow-color: rgba(255, 170, 0, 0.5);
-        --ring-color: #ffaa00;
-    }
-    
-    .status-critical {
-        --border-color: #ff3366;
-        --glow-color: rgba(255, 51, 102, 0.5);
-        --ring-color: #ff3366;
-    }
-    
-    .status-unknown {
-        --border-color: #4a5568;
-        --glow-color: rgba(74, 85, 104, 0.3);
-        --ring-color: #4a5568;
     }
     
-    /* Probability Display */
-    .probability-display {
-        position: absolute;
-        bottom: -35px;
-        left: 50%;
-        transform: translateX(-50%);
-        font-family: 'Orbitron', sans-serif;
-        font-size: 1.2rem;
-        font-weight: 700;
-        color: var(--border-color, #00d4ff);
-        text-shadow: 0 0 10px var(--glow-color, rgba(0, 212, 255, 0.5));
-        white-space: nowrap;
-    }
-    
-    /* Parameter Cards Grid */
-    .params-grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 1rem;
-        margin-top: 1rem;
-        max-width: 1200px;
-        margin-left: auto;
-        margin-right: auto;
-    }
-    
-    /* Individual Parameter Card */
+    /* Parameter Card */
     .param-card {
-        background: linear-gradient(135deg, 
-            rgba(26, 31, 58, 0.6) 0%, 
-            rgba(10, 14, 39, 0.8) 100%);
+        background: linear-gradient(135deg, rgba(26, 31, 58, 0.6), rgba(10, 14, 39, 0.8));
         border: 2px solid rgba(0, 212, 255, 0.2);
-        border-radius: 12px;
+        border-radius: 10px;
         padding: 0.8rem;
-        backdrop-filter: blur(10px);
-        transition: all 0.3s ease;
-        position: relative;
-        overflow: hidden;
-    }
-    
-    .param-card::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 3px;
-        background: linear-gradient(90deg, 
-            transparent 0%, 
-            var(--accent-color, #00d4ff) 50%, 
-            transparent 100%);
-        opacity: 0;
-        transition: opacity 0.3s ease;
-    }
-    
-    .param-card:hover {
-        border-color: var(--accent-color, #00d4ff);
-        box-shadow: 0 8px 30px rgba(0, 212, 255, 0.15);
-        transform: translateY(-4px);
+        margin-bottom: 0.5rem;
     }
     
-    .param-card:hover::before {
-        opacity: 1;
+    .param-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5rem;
     }
     
-    /* Parameter Icon */
     .param-icon {
-        font-size: 1.8rem;
-        margin-bottom: 0.3rem;
-        display: inline-block;
+        font-size: 1.5rem;
+        margin-right: 0.5rem;
     }
     
-    /* Parameter Label */
-    .param-label {
+    .param-name {
         font-family: 'Rajdhani', sans-serif;
         font-size: 0.9rem;
         font-weight: 600;
         color: #8b95a5;
-        margin-bottom: 0.3rem;
         text-transform: uppercase;
-        letter-spacing: 1px;
     }
     
-    /* Parameter Value */
-    .param-value {
+    .param-value-display {
         font-family: 'Orbitron', sans-serif;
-        font-size: 1.3rem;
+        font-size: 1.5rem;
         font-weight: 700;
-        color: var(--accent-color, #00d4ff);
-        margin-bottom: 0.5rem;
+        text-align: center;
+        margin: 0.3rem 0;
     }
     
-    /* Color Accents for Different Parameters */
-    .param-rpm { --accent-color: #00d4ff; }
-    .param-fuel { --accent-color: #ff6b35; }
-    .param-oil-pressure { --accent-color: #ffaa00; }
-    .param-coolant-temp { --accent-color: #ff3366; }
-    .param-coolant-pressure { --accent-color: #00ff88; }
-    .param-oil-temp { --accent-color: #a855f7; }
-    
-    /* Analyze Button */
-    .analyze-button {
-        display: block;
-        margin: 1.5rem auto;
-        padding: 0.8rem 3rem;
-        font-family: 'Orbitron', sans-serif;
-        font-size: 1.1rem;
-        font-weight: 700;
-        color: #ffffff;
-        background: linear-gradient(135deg, #0090ff 0%, #0051ff 100%);
-        border: 2px solid #00d4ff;
-        border-radius: 50px;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        box-shadow: 0 0 30px rgba(0, 144, 255, 0.3);
+    /* Status Colors */
+    .status-healthy { color: #00ff88; }
+    .status-caution { color: #ffaa00; }
+    .status-warning { color: #ff9500; }
+    .status-critical { color: #ff3366; }
+    
+    /* Engine Status */
+    .engine-status-container {
+        text-align: center;
+        padding: 1rem;
+        margin: 1rem 0;
+    }
+    
+    .engine-icon-display {
+        font-size: 6rem;
+        margin: 0.5rem 0;
+        filter: drop-shadow(0 0 20px currentColor);
     }
     
-    .analyze-button:hover {
-        background: linear-gradient(135deg, #00d4ff 0%, #0090ff 100%);
-        box-shadow: 0 0 50px rgba(0, 212, 255, 0.5);
-        transform: translateY(-2px);
+    .probability-text {
+        font-family: 'Orbitron', sans-serif;
+        font-size: 1.8rem;
+        font-weight: 700;
+        margin: 0.5rem 0;
     }
     
-    /* Status Badge */
     .status-badge {
         display: inline-block;
         padding: 0.5rem 1.5rem;
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1.1rem;
+        font-size: 1rem;
         font-weight: 700;
-        border-radius: 30px;
+        border-radius: 20px;
+        border: 2px solid;
         text-transform: uppercase;
-        letter-spacing: 2px;
-        margin-top: 1rem;
+        margin: 0.5rem 0;
     }
     
-    .badge-healthy {
-        background: rgba(0, 255, 136, 0.2);
-        color: #00ff88;
-        border: 2px solid #00ff88;
-        box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
+    /* Alert Box */
+    .alert-box {
+        padding: 0.6rem 1rem;
+        border-radius: 6px;
+        margin: 0.3rem 0;
+        font-family: 'Rajdhani', sans-serif;
+        font-size: 0.9rem;
+        border-left: 4px solid;
     }
     
-    .badge-warning {
-        background: rgba(255, 170, 0, 0.2);
+    .alert-warning {
+        background: rgba(255, 170, 0, 0.1);
+        border-color: #ffaa00;
         color: #ffaa00;
-        border: 2px solid #ffaa00;
-        box-shadow: 0 0 20px rgba(255, 170, 0, 0.3);
     }
     
-    .badge-critical {
-        background: rgba(255, 51, 102, 0.2);
+    .alert-critical {
+        background: rgba(255, 51, 102, 0.1);
+        border-color: #ff3366;
         color: #ff3366;
-        border: 2px solid #ff3366;
-        box-shadow: 0 0 20px rgba(255, 51, 102, 0.3);
-    }
-    
-    /* Info Panel */
-    .info-panel {
-        background: linear-gradient(135deg, 
-            rgba(26, 31, 58, 0.4) 0%, 
-            rgba(10, 14, 39, 0.6) 100%);
-        border-left: 4px solid #00d4ff;
-        border-radius: 8px;
-        padding: 0.8rem;
-        margin: 0.5rem 0;
-        backdrop-filter: blur(10px);
     }
     
-    .info-title {
-        font-family: 'Rajdhani', sans-serif;
-        font-size: 1.1rem;
-        font-weight: 700;
-        color: #00d4ff;
-        margin-bottom: 0.5rem;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-    }
-    
-    .info-content {
-        font-family: 'Rajdhani', sans-serif;
-        font-size: 0.95rem;
-        color: #b8c5d6;
-        line-height: 1.5;
-    }
-    
-    /* Recommendations List */
-    .recommendation-item {
-        font-family: 'Rajdhani', sans-serif;
-        font-size: 0.95rem;
-        color: #e0e6ed;
-        padding: 0.5rem 1rem;
+    /* Recommendation Item */
+    .rec-item {
+        padding: 0.5rem 0.8rem;
         margin: 0.3rem 0;
         background: rgba(0, 212, 255, 0.05);
         border-left: 3px solid #00d4ff;
         border-radius: 4px;
-        transition: all 0.2s ease;
+        font-family: 'Rajdhani', sans-serif;
+        font-size: 0.9rem;
+        color: #e0e6ed;
     }
     
-    .recommendation-item:hover {
-        background: rgba(0, 212, 255, 0.1);
-        transform: translateX(4px);
+    /* Feature Importance */
+    .feature-bar {
+        height: 25px;
+        background: linear-gradient(90deg, var(--color), transparent);
+        border-radius: 4px;
+        margin: 0.3rem 0;
+        position: relative;
+        padding: 0.2rem 0.5rem;
+        font-family: 'Rajdhani', sans-serif;
+        font-size: 0.85rem;
+        color: white;
     }
     
-    /* History Section */
-    .history-card {
-        background: linear-gradient(135deg, 
-            rgba(26, 31, 58, 0.5) 0%, 
-            rgba(10, 14, 39, 0.7) 100%);
-        border: 2px solid rgba(0, 212, 255, 0.2);
-        border-radius: 12px;
-        padding: 1rem;
+    /* Analysis Details */
+    .detail-box {
+        background: linear-gradient(135deg, rgba(26, 31, 58, 0.4), rgba(10, 14, 39, 0.6));
+        border-left: 3px solid #00d4ff;
+        border-radius: 6px;
+        padding: 0.8rem;
         margin: 0.5rem 0;
     }
     
-    /* Slider Customization */
-    .stSlider > div > div > div {
-        background: linear-gradient(90deg, #0051ff 0%, #00d4ff 100%);
-    }
-    
-    /* Pulse Animation for Critical State */
-    @keyframes pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.6; }
+    .detail-title {
+        font-family: 'Rajdhani', sans-serif;
+        font-size: 1rem;
+        font-weight: 700;
+        color: #00d4ff;
+        margin-bottom: 0.5rem;
+        text-transform: uppercase;
     }
     
-    .pulse-critical {
-        animation: pulse 1.5s ease-in-out infinite;
+    .detail-content {
+        font-family: 'Rajdhani', sans-serif;
+        font-size: 0.9rem;
+        color: #b8c5d6;
+        line-height: 1.6;
     }
     
-    /* Footer */
-    .dashboard-footer {
-        text-align: center;
-        margin-top: 1rem;
-        padding: 0.5rem;
-        font-family: 'Rajdhani', sans-serif;
-        font-size: 0.85rem;
-        color: #6b7280;
-        border-top: 1px solid rgba(107, 114, 128, 0.2);
+    /* Section Headers */
+    h3 {
+        font-family: 'Rajdhani', sans-serif !important;
+        font-size: 1.2rem !important;
+        color: #00d4ff !important;
+        margin-top: 0.5rem !important;
+        margin-bottom: 0.5rem !important;
+        text-transform: uppercase;
+        letter-spacing: 1px;
     }
-    </style>
-    """, unsafe_allow_html=True)
+</style>
+""", unsafe_allow_html=True)
 
 # --- HELPER FUNCTIONS ---
-def get_engine_status(probability):
-    """Determine engine status based on failure probability"""
-    if probability < 0.25:
-        return 'healthy', '🟢', '#00ff88', 'OPTIMAL'
-    elif probability < 0.50:
-        return 'warning', '🟡', '#ffaa00', 'CAUTION'
-    elif probability < 0.75:
-        return 'warning', '🟠', '#ff9500', 'WARNING'
-    else:
-        return 'critical', '🔴', '#ff3366', 'CRITICAL'
-
-def create_circular_gauge(value, max_value, title, color, unit=""):
-    """Create a minimal circular gauge"""
-    percentage = (value / max_value) * 100
-    
+def create_gauge(value, max_value, color):
+    """Create compact gauge chart"""
     fig = go.Figure(go.Indicator(
-        mode = "gauge+number",
-        value = value,
-        number = {'suffix': f" {unit}", 'font': {'size': 18, 'color': color}},
-        title = {'text': title, 'font': {'size': 12, 'color': '#8b95a5'}},
-        gauge = {
-            'axis': {'range': [0, max_value], 'tickwidth': 1, 'tickcolor': color},
-            'bar': {'color': color, 'thickness': 0.7},
+        mode="gauge+number",
+        value=value,
+        number={'font': {'size': 16, 'color': color}},
+        gauge={
+            'axis': {'range': [0, max_value], 'tickwidth': 1},
+            'bar': {'color': color, 'thickness': 0.6},
             'bgcolor': "rgba(26, 31, 58, 0.3)",
-            'borderwidth': 2,
+            'borderwidth': 1,
             'bordercolor': "rgba(255, 255, 255, 0.1)",
             'steps': [
                 {'range': [0, max_value * 0.6], 'color': 'rgba(0, 255, 136, 0.1)'},
                 {'range': [max_value * 0.6, max_value * 0.8], 'color': 'rgba(255, 170, 0, 0.1)'},
                 {'range': [max_value * 0.8, max_value], 'color': 'rgba(255, 51, 102, 0.1)'}
-            ],
+            ]
         }
     ))
     
     fig.update_layout(
-        height=140,
-        margin=dict(l=10, r=10, t=30, b=5),
+        height=120,
+        margin=dict(l=5, r=5, t=5, b=5),
         paper_bgcolor='rgba(0,0,0,0)',
         plot_bgcolor='rgba(0,0,0,0)',
-        font={'family': 'Rajdhani', 'color': '#e0e6ed'}
+        font={'family': 'Rajdhani'}
     )
     
     return fig
 
-def prepare_input_data(rpm, fuel_p, lub_oil_p, coolant_p, lub_oil_t, coolant_temp):
-    """Prepare input data for model"""
-    return pd.DataFrame({
-        'Engine rpm': [rpm],
-        'Lub oil pressure': [lub_oil_p],
-        'Fuel pressure': [fuel_p],
-        'Coolant pressure': [coolant_p],
-        'lub oil temp': [lub_oil_t],
-        'Coolant temp': [coolant_temp]
-    })
+def validate_parameter(name, value, thresholds):
+    """Validate parameter and return status"""
+    if value > thresholds.get('critical_high', float('inf')):
+        return 'critical', f"🔴 {name}: Critically high ({value})"
+    elif value < thresholds.get('critical_low', float('-inf')):
+        return 'critical', f"🔴 {name}: Critically low ({value})"
+    elif value > thresholds.get('warning_high', float('inf')):
+        return 'warning', f"⚠️ {name}: High ({value})"
+    elif value < thresholds.get('warning_low', float('-inf')):
+        return 'warning', f"⚠️ {name}: Low ({value})"
+    return 'normal', None
 
-def run_prediction(model, scaler, input_df):
-    """Execute model prediction"""
-    try:
-        scaled = scaler.transform(input_df)
-        pred = model.predict(scaled)[0]
-        prob = model.predict_proba(scaled)[0][1] if hasattr(model, 'predict_proba') else 0.0
-        return pred, prob, None
-    except Exception as e:
-        return None, None, str(e)
+def get_status_info(probability):
+    """Get status based on probability"""
+    if probability < 0.25:
+        return 'healthy', '🟢', 'HEALTHY', '#00ff88'
+    elif probability < 0.50:
+        return 'caution', '🟡', 'CAUTION', '#ffaa00'
+    elif probability < 0.75:
+        return 'warning', '🟠', 'WARNING', '#ff9500'
+    else:
+        return 'critical', '🔴', 'CRITICAL', '#ff3366'
 
-def get_recommendations(input_df, prob):
-    """Generate maintenance recommendations"""
-    recommendations = []
-    
-    rpm = input_df['Engine rpm'].values[0]
-    coolant_temp = input_df['Coolant temp'].values[0]
-    lub_oil_p = input_df['Lub oil pressure'].values[0]
-    fuel_p = input_df['Fuel pressure'].values[0]
+def calculate_feature_importance(params):
+    """Calculate normalized feature scores"""
+    return {
+        'Engine RPM': params['rpm'] / 2500,
+        'Coolant Temperature': params['coolant_temp'] / 200,
+        'Oil Pressure (Risk)': max(0, 1 - params['oil_pressure'] / 10),
+        'Fuel Pressure': params['fuel_pressure'] / 25
+    }
+
+def get_recommendations(params, probability, warnings, criticals):
+    """Generate smart recommendations"""
+    recs = []
     
-    if prob > 0.75:
-        recommendations.append("⚠️ IMMEDIATE SHUTDOWN RECOMMENDED - Critical failure risk detected")
-        recommendations.append("📞 Contact maintenance team immediately")
+    if criticals:
+        recs.append("🚨 IMMEDIATE ACTION: Critical parameters detected - Engine shutdown recommended")
+        recs.extend(criticals)
     
-    if coolant_temp > 100:
-        recommendations.append("🌡️ Coolant temperature elevated - Check radiator and cooling system")
+    if params['coolant_temp'] > 100:
+        recs.append("🔧 Check cooling system - radiator, thermostat, and coolant level")
     
-    if lub_oil_p < 2.0:
-        recommendations.append("🛢️ Low oil pressure detected - Inspect oil pump and filter")
+    if params['oil_pressure'] < 2.0:
+        recs.append("🔧 Inspect oil pump and filter - check for leaks")
     
-    if fuel_p < 5.0:
-        recommendations.append("⛽ Fuel pressure below optimal - Check fuel pump and lines")
+    if params['fuel_pressure'] < 5.0:
+        recs.append("🔧 Examine fuel system - pump, filter, and fuel lines")
     
-    if rpm > 2000:
-        recommendations.append("⚙️ High RPM detected - Reduce engine load")
+    if params['rpm'] > 2000:
+        recs.append("⚙️ Reduce engine load immediately")
     
-    if prob > 0.5:
-        recommendations.append("📅 Schedule comprehensive engine inspection within 24 hours")
-    elif prob > 0.25:
-        recommendations.append("📋 Monitor engine parameters and schedule preventive maintenance")
+    if probability > 0.75:
+        recs.append("📅 Schedule emergency maintenance inspection")
+    elif probability > 0.5:
+        recs.append("📅 Schedule maintenance within 24 hours")
+    elif probability > 0.25:
+        recs.append("📋 Monitor closely and schedule preventive maintenance")
     else:
-        recommendations.append("✅ Engine operating within normal parameters")
+        recs.append("✅ Continue normal operations with routine monitoring")
     
-    return recommendations
+    return recs if recs else ["✅ All systems operating normally"]
 
-# --- MAIN APPLICATION ---
+# --- MAIN APP ---
 def main():
-    # Load CSS
-    load_css()
-    
-    # Load Model
+    # Load model
     model, scaler, error = load_artifacts()
     
     if model is None:
@@ -596,243 +339,191 @@ def main():
     st.markdown('<h1 class="main-title">⚙️ Engine Health Monitor</h1>', unsafe_allow_html=True)
     st.markdown('<p class="subtitle">AI-Powered Predictive Maintenance System</p>', unsafe_allow_html=True)
     
-    # Main Dashboard Container
-    st.markdown('<div class="dashboard-container">', unsafe_allow_html=True)
+    # Parameter thresholds
+    thresholds = {
+        'rpm': {'warning_high': 2000, 'critical_high': 2300},
+        'fuel_pressure': {'warning_low': 5.0, 'critical_low': 4.0},
+        'oil_pressure': {'warning_low': 2.0, 'critical_low': 1.5},
+        'coolant_temp': {'warning_high': 100, 'critical_high': 120},
+        'coolant_pressure': {'warning_low': 1.5, 'critical_low': 1.0},
+        'oil_temp': {'warning_high': 110, 'critical_high': 130}
+    }
     
-    # Parameter Input Section
+    # --- PARAMETER INPUTS ---
     st.markdown("### 📊 Engine Parameters")
     
-    # Initialize session state for parameter values if not exists
-    if 'rpm_val' not in st.session_state:
-        st.session_state.rpm_val = 750
-    if 'fuel_val' not in st.session_state:
-        st.session_state.fuel_val = 6.2
-    if 'oil_p_val' not in st.session_state:
-        st.session_state.oil_p_val = 3.16
-    if 'coolant_t_val' not in st.session_state:
-        st.session_state.coolant_t_val = 80.0
-    if 'coolant_p_val' not in st.session_state:
-        st.session_state.coolant_p_val = 2.16
-    if 'oil_t_val' not in st.session_state:
-        st.session_state.oil_t_val = 80.0
-    
-    # Create 2 rows of 3 parameters each
     col1, col2, col3 = st.columns(3)
     
+    # Row 1
     with col1:
-        st.markdown('<div class="param-card param-rpm">', unsafe_allow_html=True)
-        st.markdown('<div class="param-icon">⚡</div>', unsafe_allow_html=True)
-        st.markdown('<div class="param-label">Engine RPM</div>', unsafe_allow_html=True)
-        
-        # Manual input and slider in columns
-        rpm_col1, rpm_col2 = st.columns([1, 2])
-        with rpm_col1:
-            rpm_input = st.number_input("", 0, 2500, st.session_state.rpm_val, 50, label_visibility="collapsed", key="rpm_input")
-        with rpm_col2:
-            rpm_slider = st.slider("", 0, 2500, st.session_state.rpm_val, 50, label_visibility="collapsed", key="rpm_slider")
-        
-        # Update session state based on which changed
-        if rpm_input != st.session_state.rpm_val:
-            st.session_state.rpm_val = rpm_input
-        elif rpm_slider != st.session_state.rpm_val:
-            st.session_state.rpm_val = rpm_slider
-        
-        rpm = st.session_state.rpm_val
-        
-        st.markdown(f'<div class="param-value">{rpm}</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_circular_gauge(rpm, 2500, "RPM", "#00d4ff"), use_container_width=True, key="gauge_rpm")
+        st.markdown('<div class="param-card">', unsafe_allow_html=True)
+        st.markdown('<div class="param-header"><span class="param-icon">⚡</span><span class="param-name">Engine RPM</span></div>', unsafe_allow_html=True)
+        rpm_input = st.number_input("RPM Value", 0, 2500, 750, 50, key="rpm_num", label_visibility="collapsed")
+        rpm_slider = st.slider("RPM Slider", 0, 2500, rpm_input, 50, key="rpm_sld", label_visibility="collapsed")
+        rpm = rpm_slider if rpm_slider != rpm_input else rpm_input
+        st.markdown(f'<div class="param-value-display" style="color: #00d4ff;">{rpm}</div>', unsafe_allow_html=True)
+        st.plotly_chart(create_gauge(rpm, 2500, "#00d4ff"), use_container_width=True, config={'displayModeBar': False})
         st.markdown('</div>', unsafe_allow_html=True)
     
     with col2:
-        st.markdown('<div class="param-card param-fuel">', unsafe_allow_html=True)
-        st.markdown('<div class="param-icon">⛽</div>', unsafe_allow_html=True)
-        st.markdown('<div class="param-label">Fuel Pressure</div>', unsafe_allow_html=True)
-        
-        fuel_col1, fuel_col2 = st.columns([1, 2])
-        with fuel_col1:
-            fuel_input = st.number_input("", 0.0, 25.0, st.session_state.fuel_val, 0.1, label_visibility="collapsed", key="fuel_input")
-        with fuel_col2:
-            fuel_slider = st.slider("", 0.0, 25.0, st.session_state.fuel_val, 0.1, label_visibility="collapsed", key="fuel_slider")
-        
-        if fuel_input != st.session_state.fuel_val:
-            st.session_state.fuel_val = fuel_input
-        elif fuel_slider != st.session_state.fuel_val:
-            st.session_state.fuel_val = fuel_slider
-        
-        fuel_p = st.session_state.fuel_val
-            
-        st.markdown(f'<div class="param-value">{fuel_p:.1f} Bar</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_circular_gauge(fuel_p, 25, "Fuel", "#ff6b35", "Bar"), use_container_width=True, key="gauge_fuel")
+        st.markdown('<div class="param-card">', unsafe_allow_html=True)
+        st.markdown('<div class="param-header"><span class="param-icon">⛽</span><span class="param-name">Fuel Pressure (Bar)</span></div>', unsafe_allow_html=True)
+        fuel_input = st.number_input("Fuel Value", 0.0, 25.0, 6.2, 0.1, key="fuel_num", label_visibility="collapsed")
+        fuel_slider = st.slider("Fuel Slider", 0.0, 25.0, fuel_input, 0.1, key="fuel_sld", label_visibility="collapsed")
+        fuel_p = fuel_slider if fuel_slider != fuel_input else fuel_input
+        st.markdown(f'<div class="param-value-display" style="color: #ff6b35;">{fuel_p:.1f}</div>', unsafe_allow_html=True)
+        st.plotly_chart(create_gauge(fuel_p, 25, "#ff6b35"), use_container_width=True, config={'displayModeBar': False})
         st.markdown('</div>', unsafe_allow_html=True)
     
     with col3:
-        st.markdown('<div class="param-card param-oil-pressure">', unsafe_allow_html=True)
-        st.markdown('<div class="param-icon">🛢️</div>', unsafe_allow_html=True)
-        st.markdown('<div class="param-label">Oil Pressure</div>', unsafe_allow_html=True)
-        
-        oil_p_col1, oil_p_col2 = st.columns([1, 2])
-        with oil_p_col1:
-            oil_p_input = st.number_input("", 0.0, 10.0, st.session_state.oil_p_val, 0.1, label_visibility="collapsed", key="oil_p_input")
-        with oil_p_col2:
-            oil_p_slider = st.slider("", 0.0, 10.0, st.session_state.oil_p_val, 0.1, label_visibility="collapsed", key="oil_p_slider")
-        
-        if oil_p_input != st.session_state.oil_p_val:
-            st.session_state.oil_p_val = oil_p_input
-        elif oil_p_slider != st.session_state.oil_p_val:
-            st.session_state.oil_p_val = oil_p_slider
-        
-        lub_oil_p = st.session_state.oil_p_val
-            
-        st.markdown(f'<div class="param-value">{lub_oil_p:.2f} Bar</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_circular_gauge(lub_oil_p, 10, "Oil", "#ffaa00", "Bar"), use_container_width=True, key="gauge_oil_p")
+        st.markdown('<div class="param-card">', unsafe_allow_html=True)
+        st.markdown('<div class="param-header"><span class="param-icon">🛢️</span><span class="param-name">Oil Pressure (Bar)</span></div>', unsafe_allow_html=True)
+        oil_p_input = st.number_input("Oil P Value", 0.0, 10.0, 3.16, 0.1, key="oil_p_num", label_visibility="collapsed")
+        oil_p_slider = st.slider("Oil P Slider", 0.0, 10.0, oil_p_input, 0.1, key="oil_p_sld", label_visibility="collapsed")
+        oil_p = oil_p_slider if oil_p_slider != oil_p_input else oil_p_input
+        st.markdown(f'<div class="param-value-display" style="color: #ffaa00;">{oil_p:.2f}</div>', unsafe_allow_html=True)
+        st.plotly_chart(create_gauge(oil_p, 10, "#ffaa00"), use_container_width=True, config={'displayModeBar': False})
         st.markdown('</div>', unsafe_allow_html=True)
     
-    # Second row
+    # Row 2
     col4, col5, col6 = st.columns(3)
     
     with col4:
-        st.markdown('<div class="param-card param-coolant-temp">', unsafe_allow_html=True)
-        st.markdown('<div class="param-icon">🌡️</div>', unsafe_allow_html=True)
-        st.markdown('<div class="param-label">Coolant Temp</div>', unsafe_allow_html=True)
-        
-        coolant_t_col1, coolant_t_col2 = st.columns([1, 2])
-        with coolant_t_col1:
-            coolant_t_input = st.number_input("", 0.0, 200.0, st.session_state.coolant_t_val, 1.0, label_visibility="collapsed", key="coolant_temp_input")
-        with coolant_t_col2:
-            coolant_t_slider = st.slider("", 0.0, 200.0, st.session_state.coolant_t_val, 1.0, label_visibility="collapsed", key="coolant_temp_slider")
-        
-        if coolant_t_input != st.session_state.coolant_t_val:
-            st.session_state.coolant_t_val = coolant_t_input
-        elif coolant_t_slider != st.session_state.coolant_t_val:
-            st.session_state.coolant_t_val = coolant_t_slider
-        
-        coolant_temp = st.session_state.coolant_t_val
-            
-        st.markdown(f'<div class="param-value">{coolant_temp:.1f} °C</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_circular_gauge(coolant_temp, 200, "Temp", "#ff3366", "°C"), use_container_width=True, key="gauge_coolant_t")
+        st.markdown('<div class="param-card">', unsafe_allow_html=True)
+        st.markdown('<div class="param-header"><span class="param-icon">🌡️</span><span class="param-name">Coolant Temp (°C)</span></div>', unsafe_allow_html=True)
+        coolant_t_input = st.number_input("Coolant T Value", 0.0, 200.0, 80.0, 1.0, key="coolant_t_num", label_visibility="collapsed")
+        coolant_t_slider = st.slider("Coolant T Slider", 0.0, 200.0, coolant_t_input, 1.0, key="coolant_t_sld", label_visibility="collapsed")
+        coolant_temp = coolant_t_slider if coolant_t_slider != coolant_t_input else coolant_t_input
+        st.markdown(f'<div class="param-value-display" style="color: #ff3366;">{coolant_temp:.1f}</div>', unsafe_allow_html=True)
+        st.plotly_chart(create_gauge(coolant_temp, 200, "#ff3366"), use_container_width=True, config={'displayModeBar': False})
         st.markdown('</div>', unsafe_allow_html=True)
     
     with col5:
-        st.markdown('<div class="param-card param-coolant-pressure">', unsafe_allow_html=True)
-        st.markdown('<div class="param-icon">💧</div>', unsafe_allow_html=True)
-        st.markdown('<div class="param-label">Coolant Pressure</div>', unsafe_allow_html=True)
-        
-        coolant_p_col1, coolant_p_col2 = st.columns([1, 2])
-        with coolant_p_col1:
-            coolant_p_input = st.number_input("", 0.0, 10.0, st.session_state.coolant_p_val, 0.1, label_visibility="collapsed", key="coolant_p_input")
-        with coolant_p_col2:
-            coolant_p_slider = st.slider("", 0.0, 10.0, st.session_state.coolant_p_val, 0.1, label_visibility="collapsed", key="coolant_p_slider")
-        
-        if coolant_p_input != st.session_state.coolant_p_val:
-            st.session_state.coolant_p_val = coolant_p_input
-        elif coolant_p_slider != st.session_state.coolant_p_val:
-            st.session_state.coolant_p_val = coolant_p_slider
-        
-        coolant_p = st.session_state.coolant_p_val
-            
-        st.markdown(f'<div class="param-value">{coolant_p:.2f} Bar</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_circular_gauge(coolant_p, 10, "Coolant P", "#00ff88", "Bar"), use_container_width=True, key="gauge_coolant_p")
+        st.markdown('<div class="param-card">', unsafe_allow_html=True)
+        st.markdown('<div class="param-header"><span class="param-icon">💧</span><span class="param-name">Coolant Pressure (Bar)</span></div>', unsafe_allow_html=True)
+        coolant_p_input = st.number_input("Coolant P Value", 0.0, 10.0, 2.16, 0.1, key="coolant_p_num", label_visibility="collapsed")
+        coolant_p_slider = st.slider("Coolant P Slider", 0.0, 10.0, coolant_p_input, 0.1, key="coolant_p_sld", label_visibility="collapsed")
+        coolant_p = coolant_p_slider if coolant_p_slider != coolant_p_input else coolant_p_input
+        st.markdown(f'<div class="param-value-display" style="color: #00ff88;">{coolant_p:.2f}</div>', unsafe_allow_html=True)
+        st.plotly_chart(create_gauge(coolant_p, 10, "#00ff88"), use_container_width=True, config={'displayModeBar': False})
         st.markdown('</div>', unsafe_allow_html=True)
     
     with col6:
-        st.markdown('<div class="param-card param-oil-temp">', unsafe_allow_html=True)
-        st.markdown('<div class="param-icon">🔥</div>', unsafe_allow_html=True)
-        st.markdown('<div class="param-label">Oil Temperature</div>', unsafe_allow_html=True)
+        st.markdown('<div class="param-card">', unsafe_allow_html=True)
+        st.markdown('<div class="param-header"><span class="param-icon">🔥</span><span class="param-name">Oil Temp (°C)</span></div>', unsafe_allow_html=True)
+        oil_t_input = st.number_input("Oil T Value", 0.0, 150.0, 80.0, 1.0, key="oil_t_num", label_visibility="collapsed")
+        oil_t_slider = st.slider("Oil T Slider", 0.0, 150.0, oil_t_input, 1.0, key="oil_t_sld", label_visibility="collapsed")
+        oil_temp = oil_t_slider if oil_t_slider != oil_t_input else oil_t_input
+        st.markdown(f'<div class="param-value-display" style="color: #a855f7;">{oil_temp:.1f}</div>', unsafe_allow_html=True)
+        st.plotly_chart(create_gauge(oil_temp, 150, "#a855f7"), use_container_width=True, config={'displayModeBar': False})
+        st.markdown('</div>', unsafe_allow_html=True)
+    
+    # --- REAL-TIME VALIDATION ---
+    warnings = []
+    criticals = []
+    
+    for param_name, value, threshold_key in [
+        ('RPM', rpm, 'rpm'),
+        ('Fuel Pressure', fuel_p, 'fuel_pressure'),
+        ('Oil Pressure', oil_p, 'oil_pressure'),
+        ('Coolant Temp', coolant_temp, 'coolant_temp'),
+        ('Coolant Pressure', coolant_p, 'coolant_pressure'),
+        ('Oil Temp', oil_temp, 'oil_temp')
+    ]:
+        status, msg = validate_parameter(param_name, value, thresholds.get(threshold_key, {}))
+        if status == 'critical' and msg:
+            criticals.append(msg)
+        elif status == 'warning' and msg:
+            warnings.append(msg)
+    
+    # Display alerts
+    if criticals or warnings:
+        st.markdown("### ⚠️ Real-Time Alerts")
+        col_alert1, col_alert2 = st.columns(2)
         
-        oil_t_col1, oil_t_col2 = st.columns([1, 2])
-        with oil_t_col1:
-            oil_t_input = st.number_input("", 0.0, 150.0, st.session_state.oil_t_val, 1.0, label_visibility="collapsed", key="oil_temp_input")
-        with oil_t_col2:
-            oil_t_slider = st.slider("", 0.0, 150.0, st.session_state.oil_t_val, 1.0, label_visibility="collapsed", key="oil_temp_slider")
+        with col_alert1:
+            if criticals:
+                for alert in criticals:
+                    st.markdown(f'<div class="alert-box alert-critical">{alert}</div>', unsafe_allow_html=True)
         
-        if oil_t_input != st.session_state.oil_t_val:
-            st.session_state.oil_t_val = oil_t_input
-        elif oil_t_slider != st.session_state.oil_t_val:
-            st.session_state.oil_t_val = oil_t_slider
+        with col_alert2:
+            if warnings:
+                for alert in warnings:
+                    st.markdown(f'<div class="alert-box alert-warning">{alert}</div>', unsafe_allow_html=True)
+    
+    # --- ANALYZE BUTTON ---
+    if st.button("🔍 ANALYZE ENGINE STATUS", type="primary", use_container_width=True):
+        # Prepare input
+        input_df = pd.DataFrame({
+            'Engine rpm': [rpm],
+            'Lub oil pressure': [oil_p],
+            'Fuel pressure': [fuel_p],
+            'Coolant pressure': [coolant_p],
+            'lub oil temp': [oil_temp],
+            'Coolant temp': [coolant_temp]
+        })
         
-        lub_oil_t = st.session_state.oil_t_val
+        # Run prediction
+        try:
+            scaled = scaler.transform(input_df)
+            pred = model.predict(scaled)[0]
+            prob = model.predict_proba(scaled)[0][1] if hasattr(model, 'predict_proba') else 0.0
             
-        st.markdown(f'<div class="param-value">{lub_oil_t:.1f} °C</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_circular_gauge(lub_oil_t, 150, "Oil Temp", "#a855f7", "°C"), use_container_width=True, key="gauge_oil_t")
-        st.markdown('</div>', unsafe_allow_html=True)
-    
-    st.markdown('</div>', unsafe_allow_html=True)
-    
-    # Central Engine Status Display
-    
-    # Analyze Button
-    col_center = st.columns([1, 2, 1])
-    with col_center[1]:
-        analyze = st.button("🔍 ANALYZE ENGINE STATUS", key="analyze", use_container_width=True)
-    
-    # Prediction Results
-    if analyze:
-        input_df = prepare_input_data(rpm, fuel_p, lub_oil_p, coolant_p, lub_oil_t, coolant_temp)
-        pred, prob, error = run_prediction(model, scaler, input_df)
-        
-        if error:
-            st.error(f"Prediction Error: {error}")
-        else:
-            # Store prediction
-            st.session_state.predictions.append({
-                'timestamp': datetime.now(),
-                'probability': prob,
-                'prediction': pred,
-                'rpm': rpm,
-                'coolant_temp': coolant_temp
-            })
+            status, emoji, status_text, color = get_status_info(prob)
+            
+            # --- ENGINE STATUS DISPLAY ---
+            st.markdown("### 🔧 Engine Status")
+            
+            st.markdown(f"""
+            <div class="engine-status-container">
+                <div class="engine-icon-display" style="color: {color};">{emoji}</div>
+                <div class="probability-text" style="color: {color};">{prob*100:.1f}% Failure Risk</div>
+                <div class="status-badge status-{status}" style="border-color: {color}; color: {color};">
+                    {status_text}
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
             
-            status, emoji, color, status_text = get_engine_status(prob)
-            st.session_state.current_status = status
+            # --- FEATURE IMPORTANCE ---
+            st.markdown("### ⚡ Risk Factor Analysis")
             
-            # Display Central Engine Status
-            st.markdown("#### 🔧 Engine Status")
+            params_dict = {
+                'rpm': rpm,
+                'coolant_temp': coolant_temp,
+                'oil_pressure': oil_p,
+                'fuel_pressure': fuel_p
+            }
             
-            # Create centered layout for engine icon
-            col_left, col_center, col_right = st.columns([1, 1, 1])
+            importance = calculate_feature_importance(params_dict)
+            sorted_features = sorted(importance.items(), key=lambda x: x[1], reverse=True)
             
-            with col_center:
-                # Engine status display
-                pulse_class = "pulse-critical" if status == 'critical' else ""
-                
-                st.markdown(f"""
-                <div class="engine-container">
-                    <div class="glow-ring"></div>
-                    <div class="engine-circle status-{status} {pulse_class}">
-                        <div class="engine-icon">{emoji}</div>
+            for feature, score in sorted_features:
+                if score > 0.3:  # Only show significant factors
+                    bar_color = '#ff3366' if score > 0.7 else '#ffaa00' if score > 0.5 else '#00d4ff'
+                    st.markdown(f"""
+                    <div class="feature-bar" style="--color: {bar_color}; width: {score*100}%;">
+                        <strong>{feature}:</strong> {score*100:.1f}%
                     </div>
-                    <div class="probability-display">
-                        {prob*100:.1f}% Failure Risk
-                    </div>
-                </div>
-                <div style="height: 10px;"></div>
-                """, unsafe_allow_html=True)
-                
-                # Status badge
-                st.markdown(f"""
-                <div style="text-align: center;">
-                    <span class="status-badge badge-{status}">{status_text}</span>
-                </div>
-                """, unsafe_allow_html=True)
+                    """, unsafe_allow_html=True)
             
-            # Recommendations
-            st.markdown("#### 📋 Recommendations")
+            # --- RECOMMENDATIONS ---
+            st.markdown("### 📋 Maintenance Recommendations")
             
-            recommendations = get_recommendations(input_df, prob)
+            recommendations = get_recommendations(params_dict, prob, warnings, criticals)
             
-            for rec in recommendations:
-                st.markdown(f'<div class="recommendation-item">{rec}</div>', unsafe_allow_html=True)
+            for rec in recommendations[:6]:  # Show top 6
+                st.markdown(f'<div class="rec-item">{rec}</div>', unsafe_allow_html=True)
             
-            # Detailed Analysis
-            st.markdown("#### 📊 Analysis Details")
+            # --- DETAILED ANALYSIS ---
+            st.markdown("### 📊 Analysis Details")
             
-            col_detail1, col_detail2 = st.columns(2)
+            col_det1, col_det2 = st.columns(2)
             
-            with col_detail1:
+            with col_det1:
                 st.markdown(f"""
-                <div class="info-panel">
-                    <div class="info-title">Prediction Details</div>
-                    <div class="info-content">
+                <div class="detail-box">
+                    <div class="detail-title">Prediction Summary</div>
+                    <div class="detail-content">
                         <strong>Failure Probability:</strong> {prob*100:.2f}%<br>
                         <strong>Classification:</strong> {'FAILURE RISK' if pred == 1 else 'OPERATIONAL'}<br>
                         <strong>Status Level:</strong> {status_text}<br>
@@ -841,52 +532,43 @@ def main():
                 </div>
                 """, unsafe_allow_html=True)
             
-            with col_detail2:
+            with col_det2:
                 st.markdown(f"""
-                <div class="info-panel">
-                    <div class="info-title">Critical Parameters</div>
-                    <div class="info-content">
+                <div class="detail-box">
+                    <div class="detail-title">Parameter Health Check</div>
+                    <div class="detail-content">
                         <strong>Engine RPM:</strong> {rpm} {'⚠️' if rpm > 2000 else '✓'}<br>
                         <strong>Coolant Temp:</strong> {coolant_temp:.1f}°C {'⚠️' if coolant_temp > 100 else '✓'}<br>
-                        <strong>Oil Pressure:</strong> {lub_oil_p:.2f} Bar {'⚠️' if lub_oil_p < 2.0 else '✓'}<br>
+                        <strong>Oil Pressure:</strong> {oil_p:.2f} Bar {'⚠️' if oil_p < 2.0 else '✓'}<br>
                         <strong>Fuel Pressure:</strong> {fuel_p:.1f} Bar {'⚠️' if fuel_p < 5.0 else '✓'}
                     </div>
                 </div>
                 """, unsafe_allow_html=True)
+        
+        except Exception as e:
+            st.error(f"Prediction Error: {str(e)}")
     
     else:
-        # Default display before analysis
-        st.markdown("#### 🔧 Engine Status")
-        col_left, col_center, col_right = st.columns([1, 1, 1])
-        
-        with col_center:
-            st.markdown(f"""
-            <div class="engine-container">
-                <div class="glow-ring"></div>
-                <div class="engine-circle status-unknown">
-                    <div class="engine-icon">⚙️</div>
-                </div>
-                <div class="probability-display">
-                    Awaiting Analysis
-                </div>
-            </div>
-            <div style="height: 10px;"></div>
-            """, unsafe_allow_html=True)
-            
-            st.markdown(f"""
-            <div style="text-align: center; margin-top: 1rem;">
-                <p style="font-family: 'Rajdhani', sans-serif; color: #8b95a5; font-size: 1.1rem;">
-                    Configure engine parameters above and click "ANALYZE ENGINE STATUS"
-                </p>
-            </div>
-            """, unsafe_allow_html=True)
+        # Default state
+        st.markdown("### 🔧 Engine Status")
+        st.markdown("""
+        <div class="engine-status-container">
+            <div class="engine-icon-display" style="color: #4a5568;">⚙️</div>
+            <div class="probability-text" style="color: #8b95a5;">Awaiting Analysis</div>
+            <p style="font-family: 'Rajdhani', sans-serif; color: #8b95a5; font-size: 0.9rem;">
+                Configure parameters above and click "ANALYZE ENGINE STATUS"
+            </p>
+        </div>
+        """, unsafe_allow_html=True)
     
     # Footer
     st.markdown("""
-    <div class="dashboard-footer">
-        <p style="margin: 0.5rem 0; font-size: 0.8rem;">Engine Predictive Maintenance System | Powered by Machine Learning</p>
+    <div style="text-align: center; margin-top: 1rem; padding: 0.5rem; border-top: 1px solid rgba(107, 114, 128, 0.2);">
+        <p style="font-family: 'Rajdhani', sans-serif; color: #6b7280; font-size: 0.8rem; margin: 0;">
+            Engine Predictive Maintenance System | Powered by Machine Learning
+        </p>
     </div>
     """, unsafe_allow_html=True)
 
 if __name__ == "__main__":
-    main()
+    main()