Update app.py

app.py

@@ -43,59 +43,67 @@ st.markdown("""
     }
     
     .main .block-container {
-        padding-top: 1rem !important;
-        padding-bottom: 1rem !important;
+        padding-top: 0.5rem !important;
+        padding-bottom: 0.5rem !important;
         max-width: 1400px !important;
     }
     
     /* Hide Streamlit UI */
     #MainMenu, footer, header {visibility: hidden;}
     
+    /* Hide all dividers and extra spacing */
+    hr {display: none !important;}
+    
+    /* Compact sections */
+    [data-testid="stVerticalBlock"] > [style*="flex-direction: column;"] > [data-testid="stVerticalBlock"] {
+        gap: 0.2rem !important;
+    }
+    
     /* Title */
     .main-title {
         font-family: 'Orbitron', sans-serif;
-        font-size: 2rem;
+        font-size: 1.4rem;
         font-weight: 900;
         text-align: center;
         background: linear-gradient(135deg, #00d4ff, #0090ff);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.2rem;
         text-transform: uppercase;
-        letter-spacing: 2px;
+        letter-spacing: 1px;
     }
     
     .subtitle {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 0.9rem;
+        font-size: 0.75rem;
         text-align: center;
         color: #8b95a5;
-        margin-bottom: 1rem;
+        margin-bottom: 0.5rem;
     }
     
     /* Parameter Card */
     .param-card {
         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: 10px;
-        padding: 0.8rem;
-        margin-bottom: 0.5rem;
+        border: 1px solid rgba(0, 212, 255, 0.2);
+        border-radius: 6px;
+        padding: 0.4rem 0.5rem;
+        margin-bottom: 0.3rem;
     }
     
     .param-header {
         display: flex;
         align-items: center;
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.2rem;
     }
     
     .param-icon {
-        font-size: 1.5rem;
-        margin-right: 0.5rem;
+        font-size: 1rem;
+        margin-right: 0.3rem;
     }
     
     .param-name {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 0.9rem;
+        font-size: 0.7rem;
         font-weight: 600;
         color: #8b95a5;
         text-transform: uppercase;
@@ -103,10 +111,30 @@ st.markdown("""
     
     .param-value-display {
         font-family: 'Orbitron', sans-serif;
-        font-size: 1.5rem;
+        font-size: 1rem;
         font-weight: 700;
         text-align: center;
-        margin: 0.3rem 0;
+        margin: 0.2rem 0;
+    }
+    
+    /* Make inputs inline and compact */
+    .stNumberInput, .stSlider {
+        margin-bottom: 0 !important;
+    }
+    
+    .stNumberInput > div, .stSlider > div {
+        margin-bottom: 0 !important;
+    }
+    
+    .stNumberInput input {
+        height: 2rem !important;
+        font-size: 0.8rem !important;
+        padding: 0.2rem 0.5rem !important;
+    }
+    
+    /* Remove spacing between inputs */
+    [data-testid="column"] {
+        padding: 0.2rem !important;
     }
     
     /* Status Colors */
@@ -118,43 +146,43 @@ st.markdown("""
     /* Engine Status */
     .engine-status-container {
         text-align: center;
-        padding: 1rem;
-        margin: 1rem 0;
+        padding: 0.5rem;
+        margin: 0.3rem 0;
     }
     
     .engine-icon-display {
-        font-size: 6rem;
-        margin: 0.5rem 0;
-        filter: drop-shadow(0 0 20px currentColor);
+        font-size: 3.5rem;
+        margin: 0.2rem 0;
+        filter: drop-shadow(0 0 15px currentColor);
     }
     
     .probability-text {
         font-family: 'Orbitron', sans-serif;
-        font-size: 1.8rem;
+        font-size: 1.2rem;
         font-weight: 700;
-        margin: 0.5rem 0;
+        margin: 0.2rem 0;
     }
     
     .status-badge {
         display: inline-block;
-        padding: 0.5rem 1.5rem;
+        padding: 0.3rem 1rem;
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1rem;
+        font-size: 0.8rem;
         font-weight: 700;
-        border-radius: 20px;
+        border-radius: 15px;
         border: 2px solid;
         text-transform: uppercase;
-        margin: 0.5rem 0;
+        margin: 0.2rem 0;
     }
     
     /* Alert Box */
     .alert-box {
-        padding: 0.6rem 1rem;
-        border-radius: 6px;
-        margin: 0.3rem 0;
+        padding: 0.3rem 0.6rem;
+        border-radius: 4px;
+        margin: 0.2rem 0;
         font-family: 'Rajdhani', sans-serif;
-        font-size: 0.9rem;
-        border-left: 4px solid;
+        font-size: 0.75rem;
+        border-left: 3px solid;
     }
     
     .alert-warning {
@@ -171,63 +199,70 @@ st.markdown("""
     
     /* Recommendation Item */
     .rec-item {
-        padding: 0.5rem 0.8rem;
-        margin: 0.3rem 0;
+        padding: 0.3rem 0.5rem;
+        margin: 0.2rem 0;
         background: rgba(0, 212, 255, 0.05);
-        border-left: 3px solid #00d4ff;
-        border-radius: 4px;
+        border-left: 2px solid #00d4ff;
+        border-radius: 3px;
         font-family: 'Rajdhani', sans-serif;
-        font-size: 0.9rem;
+        font-size: 0.75rem;
         color: #e0e6ed;
     }
     
     /* Feature Importance */
     .feature-bar {
-        height: 25px;
+        height: 18px;
         background: linear-gradient(90deg, var(--color), transparent);
-        border-radius: 4px;
-        margin: 0.3rem 0;
+        border-radius: 3px;
+        margin: 0.2rem 0;
         position: relative;
-        padding: 0.2rem 0.5rem;
+        padding: 0.1rem 0.4rem;
         font-family: 'Rajdhani', sans-serif;
-        font-size: 0.85rem;
+        font-size: 0.7rem;
         color: white;
     }
     
     /* 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;
+        border-left: 2px solid #00d4ff;
+        border-radius: 4px;
+        padding: 0.4rem 0.6rem;
+        margin: 0.2rem 0;
     }
     
     .detail-title {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 1rem;
+        font-size: 0.8rem;
         font-weight: 700;
         color: #00d4ff;
-        margin-bottom: 0.5rem;
+        margin-bottom: 0.3rem;
         text-transform: uppercase;
     }
     
     .detail-content {
         font-family: 'Rajdhani', sans-serif;
-        font-size: 0.9rem;
+        font-size: 0.75rem;
         color: #b8c5d6;
-        line-height: 1.6;
+        line-height: 1.4;
     }
     
     /* Section Headers */
     h3 {
         font-family: 'Rajdhani', sans-serif !important;
-        font-size: 1.2rem !important;
+        font-size: 0.9rem !important;
         color: #00d4ff !important;
-        margin-top: 0.5rem !important;
-        margin-bottom: 0.5rem !important;
+        margin-top: 0.3rem !important;
+        margin-bottom: 0.3rem !important;
         text-transform: uppercase;
-        letter-spacing: 1px;
+        letter-spacing: 0.5px;
+    }
+    
+    /* Compact button */
+    .stButton > button {
+        padding: 0.4rem 1rem !important;
+        font-size: 0.85rem !important;
+        margin: 0.3rem 0 !important;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -238,10 +273,10 @@ def create_gauge(value, max_value, color):
     fig = go.Figure(go.Indicator(
         mode="gauge+number",
         value=value,
-        number={'font': {'size': 16, 'color': color}},
+        number={'font': {'size': 12, 'color': color}},
         gauge={
             'axis': {'range': [0, max_value], 'tickwidth': 1},
-            'bar': {'color': color, 'thickness': 0.6},
+            'bar': {'color': color, 'thickness': 0.5},
             'bgcolor': "rgba(26, 31, 58, 0.3)",
             'borderwidth': 1,
             'bordercolor': "rgba(255, 255, 255, 0.1)",
@@ -254,7 +289,7 @@ def create_gauge(value, max_value, color):
     ))
     
     fig.update_layout(
-        height=120,
+        height=80,
         margin=dict(l=5, r=5, t=5, b=5),
         paper_bgcolor='rgba(0,0,0,0)',
         plot_bgcolor='rgba(0,0,0,0)',
@@ -358,8 +393,14 @@ def main():
     with col1:
         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")
+        
+        # Inputs side by side
+        input_col1, input_col2 = st.columns([1, 3])
+        with input_col1:
+            rpm_input = st.number_input("", 0, 2500, 750, 50, key="rpm_num", label_visibility="collapsed")
+        with input_col2:
+            rpm_slider = st.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})
@@ -368,8 +409,13 @@ def main():
     with col2:
         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")
+        
+        input_col1, input_col2 = st.columns([1, 3])
+        with input_col1:
+            fuel_input = st.number_input("", 0.0, 25.0, 6.2, 0.1, key="fuel_num", label_visibility="collapsed")
+        with input_col2:
+            fuel_slider = st.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})
@@ -378,8 +424,13 @@ def main():
     with col3:
         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")
+        
+        input_col1, input_col2 = st.columns([1, 3])
+        with input_col1:
+            oil_p_input = st.number_input("", 0.0, 10.0, 3.16, 0.1, key="oil_p_num", label_visibility="collapsed")
+        with input_col2:
+            oil_p_slider = st.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})
@@ -391,8 +442,13 @@ def main():
     with col4:
         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")
+        
+        input_col1, input_col2 = st.columns([1, 3])
+        with input_col1:
+            coolant_t_input = st.number_input("", 0.0, 200.0, 80.0, 1.0, key="coolant_t_num", label_visibility="collapsed")
+        with input_col2:
+            coolant_t_slider = st.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})
@@ -401,8 +457,13 @@ def main():
     with col5:
         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")
+        
+        input_col1, input_col2 = st.columns([1, 3])
+        with input_col1:
+            coolant_p_input = st.number_input("", 0.0, 10.0, 2.16, 0.1, key="coolant_p_num", label_visibility="collapsed")
+        with input_col2:
+            coolant_p_slider = st.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})
@@ -411,8 +472,13 @@ def main():
     with col6:
         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")
+        
+        input_col1, input_col2 = st.columns([1, 3])
+        with input_col1:
+            oil_t_input = st.number_input("", 0.0, 150.0, 80.0, 1.0, key="oil_t_num", label_visibility="collapsed")
+        with input_col2:
+            oil_t_slider = st.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})