Update app.py

app.py

@@ -68,6 +68,11 @@ def load_css():
         display: none !important;
     }
     
+    /* 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;
@@ -77,6 +82,11 @@ def load_css():
         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;
@@ -152,7 +162,7 @@ def load_css():
         position: relative;
         width: 180px;
         height: 180px;
-        margin: 1rem auto;
+        margin: 1rem auto 3rem auto;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -360,7 +370,7 @@ def load_css():
         border-radius: 30px;
         text-transform: uppercase;
         letter-spacing: 2px;
-        margin-top: 0.5rem;
+        margin-top: 1rem;
     }
     
     .badge-healthy {
@@ -592,6 +602,20 @@ def main():
     # Parameter Input Section
     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)
     
@@ -603,13 +627,17 @@ def main():
         # 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")
+            rpm_input = st.number_input("", 0, 2500, st.session_state.rpm_val, 50, label_visibility="collapsed", key="rpm_input")
         with rpm_col2:
-            rpm = st.slider("", 0, 2500, rpm_input, 50, label_visibility="collapsed", key="rpm")
+            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
         
-        # Sync the values
-        if rpm != rpm_input:
-            rpm = rpm_input
+        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")
@@ -622,12 +650,16 @@ def main():
         
         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")
+            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_p = st.slider("", 0.0, 25.0, fuel_input, 0.1, label_visibility="collapsed", key="fuel")
+            fuel_slider = st.slider("", 0.0, 25.0, st.session_state.fuel_val, 0.1, label_visibility="collapsed", key="fuel_slider")
         
-        if fuel_p != fuel_input:
-            fuel_p = fuel_input
+        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")
@@ -640,12 +672,16 @@ def main():
         
         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")
+            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:
-            lub_oil_p = st.slider("", 0.0, 10.0, oil_p_input, 0.1, label_visibility="collapsed", key="oil_p")
+            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
         
-        if lub_oil_p != oil_p_input:
-            lub_oil_p = oil_p_input
+        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")
@@ -661,12 +697,16 @@ def main():
         
         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")
+            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_temp = st.slider("", 0.0, 200.0, coolant_t_input, 1.0, label_visibility="collapsed", key="coolant_temp")
+            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_temp != coolant_t_input:
-            coolant_temp = coolant_t_input
+        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")
@@ -679,12 +719,16 @@ def main():
         
         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")
+            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 = st.slider("", 0.0, 10.0, coolant_p_input, 0.1, label_visibility="collapsed", key="coolant_p")
+            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
         
-        if coolant_p != coolant_p_input:
-            coolant_p = coolant_p_input
+        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")
@@ -697,12 +741,16 @@ def main():
         
         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")
+            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:
-            lub_oil_t = st.slider("", 0.0, 150.0, oil_t_input, 1.0, label_visibility="collapsed", key="oil_temp")
+            oil_t_slider = st.slider("", 0.0, 150.0, st.session_state.oil_t_val, 1.0, label_visibility="collapsed", key="oil_temp_slider")
+        
+        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
         
-        if lub_oil_t != oil_t_input:
-            lub_oil_t = oil_t_input
+        lub_oil_t = st.session_state.oil_t_val
             
         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")
@@ -757,6 +805,7 @@ def main():
                         {prob*100:.1f}% Failure Risk
                     </div>
                 </div>
+                <div style="height: 10px;"></div>
                 """, unsafe_allow_html=True)
                 
                 # Status badge
@@ -821,10 +870,11 @@ def main():
                     Awaiting Analysis
                 </div>
             </div>
+            <div style="height: 10px;"></div>
             """, unsafe_allow_html=True)
             
             st.markdown(f"""
-            <div style="text-align: center; margin-top: 2rem;">
+            <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>