Update app.py

app.py

@@ -63,29 +63,79 @@ def load_css():
     footer {visibility: hidden;}
     header {visibility: hidden;}
     
+    /* Hide slider labels */
+    .stSlider > label {
+        display: none !important;
+    }
+    
+    /* Compact number inputs */
+    .stNumberInput > label {
+        display: none !important;
+    }
+    
+    .stNumberInput > div {
+        margin-bottom: 0 !important;
+    }
+    
+    .stNumberInput input {
+        font-size: 0.9rem !important;
+        padding: 0.3rem !important;
+        height: 2.2rem !important;
+    }
+    
+    /* Reduce spacing in Streamlit elements */
+    .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;
+    }
+    
+    h4 {
+        margin-top: 0.5rem !important;
+        margin-bottom: 0.5rem !important;
+        font-size: 1.1rem !important;
+        font-family: 'Rajdhani', sans-serif !important;
+    }
+    
+    /* Remove extra spacing from columns */
+    [data-testid="column"] {
+        padding: 0.3rem !important;
+    }
+    
     /* Title Section */
     .main-title {
         font-family: 'Orbitron', sans-serif;
-        font-size: 3.5rem;
+        font-size: 2.2rem;
         font-weight: 900;
         text-align: center;
         background: linear-gradient(135deg, #00d4ff 0%, #0090ff 50%, #0051ff 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.3rem;
         text-transform: uppercase;
-        letter-spacing: 3px;
+        letter-spacing: 2px;
         text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
     }
     
     .subtitle {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1.2rem;
+        font-size: 1rem;
         text-align: center;
         color: #8b95a5;
-        margin-bottom: 3rem;
-        letter-spacing: 2px;
+        margin-bottom: 1rem;
+        letter-spacing: 1px;
     }
     
     /* Dashboard Container */
@@ -94,15 +144,15 @@ def load_css():
         width: 100%;
         max-width: 1400px;
         margin: 0 auto;
-        padding: 2rem;
+        padding: 0.5rem;
     }
     
     /* Central Engine Icon Container */
     .engine-container {
         position: relative;
-        width: 320px;
-        height: 320px;
-        margin: 4rem auto;
+        width: 180px;
+        height: 180px;
+        margin: 1rem auto;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -114,7 +164,7 @@ def load_css():
         width: 100%;
         height: 100%;
         border-radius: 50%;
-        border: 3px solid transparent;
+        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;
@@ -128,16 +178,16 @@ def load_css():
     /* Engine Circle Background */
     .engine-circle {
         position: absolute;
-        width: 280px;
-        height: 280px;
+        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: 4px solid var(--border-color, #1a4d7a);
+        border: 3px solid var(--border-color, #1a4d7a);
         box-shadow: 
-            0 0 40px var(--glow-color, rgba(0, 212, 255, 0.4)),
-            inset 0 0 30px rgba(0, 0, 0, 0.5);
+            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;
@@ -146,8 +196,8 @@ def load_css():
     
     /* Engine Icon */
     .engine-icon {
-        font-size: 8rem;
-        filter: drop-shadow(0 0 20px var(--glow-color, rgba(0, 212, 255, 0.6)));
+        font-size: 5rem;
+        filter: drop-shadow(0 0 15px var(--glow-color, rgba(0, 212, 255, 0.6)));
         transition: all 0.5s ease;
     }
     
@@ -179,11 +229,11 @@ def load_css():
     /* Probability Display */
     .probability-display {
         position: absolute;
-        bottom: -60px;
+        bottom: -35px;
         left: 50%;
         transform: translateX(-50%);
         font-family: 'Orbitron', sans-serif;
-        font-size: 1.8rem;
+        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));
@@ -194,8 +244,8 @@ def load_css():
     .params-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        gap: 2rem;
-        margin-top: 4rem;
+        gap: 1rem;
+        margin-top: 1rem;
         max-width: 1200px;
         margin-left: auto;
         margin-right: auto;
@@ -207,8 +257,8 @@ def load_css():
             rgba(26, 31, 58, 0.6) 0%, 
             rgba(10, 14, 39, 0.8) 100%);
         border: 2px solid rgba(0, 212, 255, 0.2);
-        border-radius: 16px;
-        padding: 1.5rem;
+        border-radius: 12px;
+        padding: 0.8rem;
         backdrop-filter: blur(10px);
         transition: all 0.3s ease;
         position: relative;
@@ -242,18 +292,18 @@ def load_css():
     
     /* Parameter Icon */
     .param-icon {
-        font-size: 2.5rem;
-        margin-bottom: 0.5rem;
+        font-size: 1.8rem;
+        margin-bottom: 0.3rem;
         display: inline-block;
     }
     
     /* Parameter Label */
     .param-label {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1.1rem;
+        font-size: 0.9rem;
         font-weight: 600;
         color: #8b95a5;
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.3rem;
         text-transform: uppercase;
         letter-spacing: 1px;
     }
@@ -261,10 +311,10 @@ def load_css():
     /* Parameter Value */
     .param-value {
         font-family: 'Orbitron', sans-serif;
-        font-size: 2rem;
+        font-size: 1.3rem;
         font-weight: 700;
         color: var(--accent-color, #00d4ff);
-        margin-bottom: 1rem;
+        margin-bottom: 0.5rem;
     }
     
     /* Color Accents for Different Parameters */
@@ -278,10 +328,10 @@ def load_css():
     /* Analyze Button */
     .analyze-button {
         display: block;
-        margin: 3rem auto;
-        padding: 1.2rem 4rem;
+        margin: 1.5rem auto;
+        padding: 0.8rem 3rem;
         font-family: 'Orbitron', sans-serif;
-        font-size: 1.3rem;
+        font-size: 1.1rem;
         font-weight: 700;
         color: #ffffff;
         background: linear-gradient(135deg, #0090ff 0%, #0051ff 100%);
@@ -303,14 +353,14 @@ def load_css():
     /* Status Badge */
     .status-badge {
         display: inline-block;
-        padding: 0.8rem 2rem;
+        padding: 0.5rem 1.5rem;
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1.3rem;
+        font-size: 1.1rem;
         font-weight: 700;
         border-radius: 30px;
         text-transform: uppercase;
         letter-spacing: 2px;
-        margin-top: 1rem;
+        margin-top: 0.5rem;
     }
     
     .badge-healthy {
@@ -341,35 +391,35 @@ def load_css():
             rgba(10, 14, 39, 0.6) 100%);
         border-left: 4px solid #00d4ff;
         border-radius: 8px;
-        padding: 1.5rem;
-        margin: 2rem 0;
+        padding: 0.8rem;
+        margin: 0.5rem 0;
         backdrop-filter: blur(10px);
     }
     
     .info-title {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1.3rem;
+        font-size: 1.1rem;
         font-weight: 700;
         color: #00d4ff;
-        margin-bottom: 1rem;
+        margin-bottom: 0.5rem;
         text-transform: uppercase;
         letter-spacing: 1px;
     }
     
     .info-content {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1.1rem;
+        font-size: 0.95rem;
         color: #b8c5d6;
-        line-height: 1.6;
+        line-height: 1.5;
     }
     
     /* Recommendations List */
     .recommendation-item {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1.1rem;
+        font-size: 0.95rem;
         color: #e0e6ed;
-        padding: 0.8rem 1.2rem;
-        margin: 0.5rem 0;
+        padding: 0.5rem 1rem;
+        margin: 0.3rem 0;
         background: rgba(0, 212, 255, 0.05);
         border-left: 3px solid #00d4ff;
         border-radius: 4px;
@@ -410,10 +460,10 @@ def load_css():
     /* Footer */
     .dashboard-footer {
         text-align: center;
-        margin-top: 4rem;
-        padding: 2rem;
+        margin-top: 1rem;
+        padding: 0.5rem;
         font-family: 'Rajdhani', sans-serif;
-        font-size: 0.9rem;
+        font-size: 0.85rem;
         color: #6b7280;
         border-top: 1px solid rgba(107, 114, 128, 0.2);
     }
@@ -439,8 +489,8 @@ def create_circular_gauge(value, max_value, title, color, unit=""):
     fig = go.Figure(go.Indicator(
         mode = "gauge+number",
         value = value,
-        number = {'suffix': f" {unit}", 'font': {'size': 24, 'color': color}},
-        title = {'text': title, 'font': {'size': 14, 'color': '#8b95a5'}},
+        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},
@@ -456,8 +506,8 @@ def create_circular_gauge(value, max_value, title, color, unit=""):
     ))
     
     fig.update_layout(
-        height=200,
-        margin=dict(l=10, r=10, t=40, b=10),
+        height=140,
+        margin=dict(l=10, r=10, t=30, b=5),
         paper_bgcolor='rgba(0,0,0,0)',
         plot_bgcolor='rgba(0,0,0,0)',
         font={'family': 'Rajdhani', 'color': '#e0e6ed'}
@@ -549,27 +599,56 @@ def main():
         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)
-        rpm = st.slider("", 0, 2500, 750, 50, label_visibility="collapsed", key="rpm")
+        
+        # Manual input and slider in columns
+        rpm_col1, rpm_col2 = st.columns([1, 2])
+        with rpm_col1:
+            rpm_input = st.number_input("", 0, 2500, 750, 50, label_visibility="collapsed", key="rpm_input")
+        with rpm_col2:
+            rpm = st.slider("", 0, 2500, rpm_input, 50, label_visibility="collapsed", key="rpm")
+        
+        # Sync the values
+        if rpm != rpm_input:
+            rpm = rpm_input
+        
         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)
+        st.plotly_chart(create_circular_gauge(rpm, 2500, "RPM", "#00d4ff"), use_container_width=True, key="gauge_rpm")
         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_p = st.slider("", 0.0, 25.0, 6.2, 0.1, label_visibility="collapsed", key="fuel")
+        
+        fuel_col1, fuel_col2 = st.columns([1, 2])
+        with fuel_col1:
+            fuel_input = st.number_input("", 0.0, 25.0, 6.2, 0.1, label_visibility="collapsed", key="fuel_input")
+        with fuel_col2:
+            fuel_p = st.slider("", 0.0, 25.0, fuel_input, 0.1, label_visibility="collapsed", key="fuel")
+        
+        if fuel_p != fuel_input:
+            fuel_p = fuel_input
+            
         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)
+        st.plotly_chart(create_circular_gauge(fuel_p, 25, "Fuel", "#ff6b35", "Bar"), use_container_width=True, key="gauge_fuel")
         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)
-        lub_oil_p = st.slider("", 0.0, 10.0, 3.16, 0.1, label_visibility="collapsed", key="oil_p")
+        
+        oil_p_col1, oil_p_col2 = st.columns([1, 2])
+        with oil_p_col1:
+            oil_p_input = st.number_input("", 0.0, 10.0, 3.16, 0.1, label_visibility="collapsed", key="oil_p_input")
+        with oil_p_col2:
+            lub_oil_p = st.slider("", 0.0, 10.0, oil_p_input, 0.1, label_visibility="collapsed", key="oil_p")
+        
+        if lub_oil_p != oil_p_input:
+            lub_oil_p = oil_p_input
+            
         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)
+        st.plotly_chart(create_circular_gauge(lub_oil_p, 10, "Oil", "#ffaa00", "Bar"), use_container_width=True, key="gauge_oil_p")
         st.markdown('</div>', unsafe_allow_html=True)
     
     # Second row
@@ -579,33 +658,59 @@ def main():
         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_temp = st.slider("", 0.0, 200.0, 80.0, 1.0, label_visibility="collapsed", key="coolant_temp")
+        
+        coolant_t_col1, coolant_t_col2 = st.columns([1, 2])
+        with coolant_t_col1:
+            coolant_t_input = st.number_input("", 0.0, 200.0, 80.0, 1.0, label_visibility="collapsed", key="coolant_temp_input")
+        with coolant_t_col2:
+            coolant_temp = st.slider("", 0.0, 200.0, coolant_t_input, 1.0, label_visibility="collapsed", key="coolant_temp")
+        
+        if coolant_temp != coolant_t_input:
+            coolant_temp = coolant_t_input
+            
         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)
+        st.plotly_chart(create_circular_gauge(coolant_temp, 200, "Temp", "#ff3366", "°C"), use_container_width=True, key="gauge_coolant_t")
         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 = st.slider("", 0.0, 10.0, 2.16, 0.1, label_visibility="collapsed", key="coolant_p")
+        
+        coolant_p_col1, coolant_p_col2 = st.columns([1, 2])
+        with coolant_p_col1:
+            coolant_p_input = st.number_input("", 0.0, 10.0, 2.16, 0.1, label_visibility="collapsed", key="coolant_p_input")
+        with coolant_p_col2:
+            coolant_p = st.slider("", 0.0, 10.0, coolant_p_input, 0.1, label_visibility="collapsed", key="coolant_p")
+        
+        if coolant_p != coolant_p_input:
+            coolant_p = coolant_p_input
+            
         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)
+        st.plotly_chart(create_circular_gauge(coolant_p, 10, "Coolant P", "#00ff88", "Bar"), use_container_width=True, key="gauge_coolant_p")
         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)
-        lub_oil_t = st.slider("", 0.0, 150.0, 80.0, 1.0, label_visibility="collapsed", key="oil_temp")
+        
+        oil_t_col1, oil_t_col2 = st.columns([1, 2])
+        with oil_t_col1:
+            oil_t_input = st.number_input("", 0.0, 150.0, 80.0, 1.0, label_visibility="collapsed", key="oil_temp_input")
+        with oil_t_col2:
+            lub_oil_t = st.slider("", 0.0, 150.0, oil_t_input, 1.0, label_visibility="collapsed", key="oil_temp")
+        
+        if lub_oil_t != oil_t_input:
+            lub_oil_t = oil_t_input
+            
         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)
+        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
-    st.markdown("---")
     
     # Analyze Button
     col_center = st.columns([1, 2, 1])
@@ -633,7 +738,7 @@ def main():
             st.session_state.current_status = status
             
             # Display Central Engine Status
-            st.markdown("### 🔧 Engine Status")
+            st.markdown("#### 🔧 Engine Status")
             
             # Create centered layout for engine icon
             col_left, col_center, col_right = st.columns([1, 1, 1])
@@ -662,8 +767,7 @@ def main():
                 """, unsafe_allow_html=True)
             
             # Recommendations
-            st.markdown("---")
-            st.markdown("### 📋 Recommendations")
+            st.markdown("#### 📋 Recommendations")
             
             recommendations = get_recommendations(input_df, prob)
             
@@ -671,8 +775,7 @@ def main():
                 st.markdown(f'<div class="recommendation-item">{rec}</div>', unsafe_allow_html=True)
             
             # Detailed Analysis
-            st.markdown("---")
-            st.markdown("### 📊 Detailed Analysis")
+            st.markdown("#### 📊 Analysis Details")
             
             col_detail1, col_detail2 = st.columns(2)
             
@@ -704,7 +807,7 @@ def main():
     
     else:
         # Default display before analysis
-        st.markdown("### 🔧 Engine Status")
+        st.markdown("#### 🔧 Engine Status")
         col_left, col_center, col_right = st.columns([1, 1, 1])
         
         with col_center:
@@ -728,32 +831,10 @@ def main():
             </div>
             """, unsafe_allow_html=True)
     
-    # Analysis History
-    if st.session_state.predictions:
-        st.markdown("---")
-        st.markdown("### 📈 Analysis History")
-        
-        history_df = pd.DataFrame(st.session_state.predictions)
-        
-        # Display last 5 predictions
-        st.markdown(f"**Total Analyses:** {len(history_df)} | **Showing last 5**")
-        
-        for idx, row in history_df.tail(5).iterrows():
-            status, emoji, color, status_text = get_engine_status(row['probability'])
-            st.markdown(f"""
-            <div class="history-card">
-                <strong>{emoji} {row['timestamp'].strftime('%H:%M:%S')}</strong> - 
-                Failure Risk: <span style="color: {color};">{row['probability']*100:.1f}%</span> - 
-                Status: {status_text}
-            </div>
-            """, unsafe_allow_html=True)
-    
     # Footer
     st.markdown("""
     <div class="dashboard-footer">
-        <p><strong>Engine Predictive Maintenance System</strong></p>
-        <p>Powered by Machine Learning | Real-time Monitoring & Analysis</p>
-        <p style="margin-top: 1rem; font-size: 0.8rem;">Capstone Project - 2024</p>
+        <p style="margin: 0.5rem 0; font-size: 0.8rem;">Engine Predictive Maintenance System | Powered by Machine Learning</p>
     </div>
     """, unsafe_allow_html=True)