Update app.py

app.py

@@ -43,18 +43,10 @@ st.title("🏖️ Predict Maintenance")
 #st.write("Fill in the details below and click **Check for Maintenance** to see if the Engine needs maintenance to prevent from failure.")
 #st.write("Suggested Ranges are based on the Range of Values model trained on.")
 st.markdown("""
-<style>
-.intro-text p {
-    margin-bottom: 0.4rem;
-}
-</style>
-
-<div class="intro-text">
-<p>The Predict Maintenance app is a tool to predict if an Engine needs any maintenance based on provided operating sensor parameters.</p>
-<p>Fill in the details below and click <b>Check for Maintenance</b> to see if the Engine needs maintenance.</p>
-<p><i>Suggested ranges are based on the range of values the model was trained on.</i></p>
-</div>
-""", unsafe_allow_html=True)
+The Predict Maintenance app is a tool to predict if an engine needs maintenance based on operating sensor parameters.  
+Fill in the details below and click **Check for Maintenance** to see the prediction.  
+*Suggested ranges are based on the data distribution used during training.*
+""")
 
 
 
@@ -89,15 +81,18 @@ def formatted_number_input(title, hint, minval, maxval, defvalue, steps, valform
 
 st.markdown("""
 <style>
-.card {
+/* Card container */
+[data-testid="stVerticalBlock"] > [data-testid="stVerticalBlock"] {
     background-color: #0f141a;
     border: 1px solid #2a2f36;
     border-radius: 12px;
-    padding: 18px;
-    margin-bottom: 20px;
+    padding: 16px;
+    margin-bottom: 16px;
 }
+
+/* Card title spacing */
 .card-title {
-    font-size: 1.1rem;
+    font-size: 1.05rem;
     font-weight: 600;
     margin-bottom: 12px;
 }
@@ -116,81 +111,80 @@ col_inputs, col_output = st.columns([3, 1.5])
 # update contnent (input) in left input column
 with col_inputs:
 
-    st.markdown('<div class="card">', unsafe_allow_html=True)
-    st.markdown('<div class="card-title">🔧 Engine Parameters</div>', unsafe_allow_html=True)
+    with st.container():
+        st.markdown('<div class="card-title">🔧 Engine Parameters</div>', unsafe_allow_html=True)
     
-    col_left, col_right = st.columns(2)
-
-    # define inputs in left column
-    with col_left:
+        col_left, col_right = st.columns(2)
     
-        rpm = formatted_number_input(
-            "Lubricating oil pressure (kPa)",
-            "50 to 2500",
-            minval=50.0,
-            maxval=2500.0,
-            defvalue=735.0,
-            steps=10.0,
-            valformat="%.2f"
-        )
-        
+        # define inputs in left column
+        with col_left:
         
-        oil_pressure = formatted_number_input(
-            "Lubricating oil pressure (kPa)",
-            "0.001 to 10.0",
-            minval=0.001,
-            maxval=10.0,
-            defvalue=3.300000,
-            steps=0.001,
-            valformat="%.6f"
-        )
-        
-        
-        fuel_pressure = formatted_number_input(
-            "Fuel Pressure (kPa)",
-            "0.01 to 25.0",
-            minval=0.01,
-            maxval=25.0,
-            defvalue=6.500000,
-            steps=0.01,
-            valformat="%.6f"
-        )
-
-    # define inputs in left column
-    with col_right:
-        coolant_pressure = formatted_number_input(
-            "Coolant Pressure (kPa)",
-            "0.01 to 10.0",
-            minval=0.01,
-            maxval=10.0,
-            defvalue=2.250000,
-            steps=0.10,
-            valformat="%.6f"
-        )
-        
-        
-        lub_oil_temp = formatted_number_input(
-            "Lubricating oil Temperature (°C)",
-            "50.0 to 100.0",
-            minval=50.0,
-            maxval=100.0,
-            defvalue=75.0,
-            steps=0.1,
-            valformat="%.6f"
-        )
-        
-        
-        coolant_temp = formatted_number_input(
-            "Coolant Temperature (°C)",
-            "50.0 to 200.0",
-            minval=50.0,
-            maxval=200.0,
-            defvalue=75.000000,
-            steps=0.1,
-            valformat="%.6f"
-        )
-
-    st.markdown('</div>', unsafe_allow_html=True)
+            rpm = formatted_number_input(
+                "Engine RPM",
+                "50 to 2500",
+                minval=50.0,
+                maxval=2500.0,
+                defvalue=735.0,
+                steps=10.0,
+                valformat="%.2f"
+            )
+            
+            
+            oil_pressure = formatted_number_input(
+                "Lubricating oil pressure (kPa)",
+                "0.001 to 10.0",
+                minval=0.001,
+                maxval=10.0,
+                defvalue=3.300000,
+                steps=0.001,
+                valformat="%.6f"
+            )
+            
+            
+            fuel_pressure = formatted_number_input(
+                "Fuel Pressure (kPa)",
+                "0.01 to 25.0",
+                minval=0.01,
+                maxval=25.0,
+                defvalue=6.500000,
+                steps=0.01,
+                valformat="%.6f"
+            )
+    
+        # define inputs in left column
+        with col_right:
+            coolant_pressure = formatted_number_input(
+                "Coolant Pressure (kPa)",
+                "0.01 to 10.0",
+                minval=0.01,
+                maxval=10.0,
+                defvalue=2.250000,
+                steps=0.10,
+                valformat="%.6f"
+            )
+            
+            
+            lub_oil_temp = formatted_number_input(
+                "Lubricating oil Temperature (°C)",
+                "50.0 to 100.0",
+                minval=50.0,
+                maxval=100.0,
+                defvalue=75.0,
+                steps=0.1,
+                valformat="%.6f"
+            )
+            
+            
+            coolant_temp = formatted_number_input(
+                "Coolant Temperature (°C)",
+                "50.0 to 200.0",
+                minval=50.0,
+                maxval=200.0,
+                defvalue=75.000000,
+                steps=0.1,
+                valformat="%.6f"
+            )
+
 
 #st.markdown('</div>', unsafe_allow_html=True)
 
@@ -200,79 +194,78 @@ with col_inputs:
 
 with col_output:
 
-    st.markdown('<div class="card">', unsafe_allow_html=True)
-    st.markdown('<div class="card-title">🧠 Prediction Result</div>', unsafe_allow_html=True)
-    
-    output_placeholder = st.empty()
-    details_placeholder = st.empty()
+    with st.container():
+        st.markdown('<div class="card-title">🧠 Prediction Result</div>', unsafe_allow_html=True)
 
-    # ==========================
-    # Single Value Prediction
-    # ==========================
-    if st.button("Check fo Maintenance"):
-    
-        # extract the data collected into a structure
-        input_data = {
-            'Engine_rpm'              : float(rpm),
-            'Lub_oil_pressure'        : float(oil_pressure),
-            'Fuel_pressure'           : float(fuel_pressure),
-            'Coolant_pressure'        : float(coolant_pressure),
-            'lub_oil_temp'            : float(lub_oil_temp),
-            'Coolant_temp'            : float(coolant_temp),
-        }
-    
-        input_df = pd.DataFrame([input_data])
-    
-        response = requests.post (
-            "https://harishsohani-AIMLProjectTestBackEnd.hf.space/v1/EngPredMaintenance",
-            json=input_data
-            )
-    
-        if response.status_code == 200:
-            ## get result as json
-            result = response.json ()
-    
-            resp_status = result.get ("status")
-    
-            if resp_status == "success":
-                
-                ## Get Sales Prediction Value
-                prediction_from_backend = result.get ("prediction")  # Extract only the value
+        output_placeholder = st.empty()
+        details_placeholder = st.empty()
+
+        # ==========================
+        # Single Value Prediction
+        # ==========================
+        if st.button("Check for Maintenance"):
+        
+            # extract the data collected into a structure
+            input_data = {
+                'Engine_rpm'              : float(rpm),
+                'Lub_oil_pressure'        : float(oil_pressure),
+                'Fuel_pressure'           : float(fuel_pressure),
+                'Coolant_pressure'        : float(coolant_pressure),
+                'lub_oil_temp'            : float(lub_oil_temp),
+                'Coolant_temp'            : float(coolant_temp),
+            }
+        
+            input_df = pd.DataFrame([input_data])
+        
+            response = requests.post (
+                "https://harishsohani-AIMLProjectTestBackEnd.hf.space/v1/EngPredMaintenance",
+                json=input_data
+                )
+        
+            if response.status_code == 200:
+                ## get result as json
+                result = response.json ()
+        
+                resp_status = result.get ("status")
         
-                # generate output string
-                if prediction_from_backend == 1:
-                    output_placeholder.error("⚠️ Engine likely needs maintenance")
+                if resp_status == "success":
+                    
+                    ## Get Sales Prediction Value
+                    prediction_from_backend = result.get ("prediction")  # Extract only the value
+            
+                    # generate output string
+                    if prediction_from_backend == 1:
+                        output_placeholder.error("⚠️ Engine likely needs maintenance")
+                    else:
+                        output_placeholder.success("✅ Engine operating normally")
+            
+                    details_placeholder.markdown("""
+                    **Model:** XGBoost  
+                    **Threshold:** 0.5  
+                    **Inference:** Real-time
+                    """)
+                    
                 else:
-                    output_placeholder.success("✅ Engine operating normally")
         
-                details_placeholder.markdown("""
-                **Model:** XGBoost  
-                **Threshold:** 0.5  
-                **Inference:** Real-time
-                """)
+                    error_str = result.get ("message")
+    
+                    output_placeholder.error(f"⚠️ {error_str}")
+        
+            elif response.status_code == 400 or response.status_code == 500:  # known errors
                 
-            else:
+                ## get result as json
+                result = response.json ()
     
+                # get error message
                 error_str = result.get ("message")
-
-                output_placeholder.error(f"⚠️ {error_str}")
     
-        elif response.status_code == 400 or response.status_code == 500:  # known errors
-            
-            ## get result as json
-            result = response.json ()
-
-            # get error message
-            error_str = result.get ("message")
-
-            # show error message
-            output_placeholder.error(f"⚠️ Error processing request- Status Code : {response.status_code}, error : {error_str}")
-            
-        else:
-            output_placeholder.error(f"⚠️ Error processing request- Status Code : {response.status_code}")
+                # show error message
+                output_placeholder.error(f"⚠️ Error processing request- Status Code : {response.status_code}, error : {error_str}")
+                
+            else:
+                output_placeholder.error(f"⚠️ Error processing request- Status Code : {response.status_code}")
 
-    st.markdown('</div>', unsafe_allow_html=True)
-    
+   
 
 # ==============================
 # Batch Prediction