Upload app.py

app.py

@@ -87,24 +87,75 @@ st.markdown("""
         border: 1px solid rgba(255,255,255,0.2);
     }
     
-    /* Input styling */
+    /* Input labels - Clean and simple */
     .stSelectbox label, .stSlider label {
-        font-family: 'Inter', sans-serif;
-        font-weight: 600;
-        color: #2d3748;
-        font-size: 1rem;
-        margin-bottom: 0.5rem;
+        font-family: 'Inter', sans-serif !important;
+        font-weight: 600 !important;
+        color: #2c3e50 !important;
+        font-size: 1rem !important;
+        margin-bottom: 0.5rem !important;
+        display: block !important;
     }
     
+    /* Selectbox styling - Force dark text on light background */
     .stSelectbox > div > div {
-        background-color: #f8f9ff;
-        border-radius: 15px;
-        border: 2px solid #e1e8ff;
-        font-family: 'Inter', sans-serif;
-        font-size: 1rem;
-        padding: 0.5rem 1rem;
+        background-color: #ffffff !important;
+        border-radius: 10px !important;
+        border: 2px solid #e1e8ff !important;
+        font-family: 'Inter', sans-serif !important;
+        color: #000000 !important;
+    }
+    
+    /* Critical: Force dropdown text to be visible */
+    .stSelectbox [data-baseweb="select"] {
+        background-color: #ffffff !important;
+    }
+    
+    .stSelectbox [data-baseweb="select"] > div {
+        background-color: #ffffff !important;
+        color: #000000 !important;
+        font-weight: 600 !important;
+    }
+    
+    /* Target the actual button that shows selected value */
+    .stSelectbox [data-baseweb="select"] > div > div[role="button"] {
+        background-color: #ffffff !important;
+        color: #000000 !important;
+        font-weight: 600 !important;
+        border: 2px solid #e1e8ff !important;
+        border-radius: 10px !important;
+        padding: 0.75rem 1rem !important;
+        min-height: 50px !important;
     }
     
+    /* Force text color in the button */
+    .stSelectbox [data-baseweb="select"] > div > div[role="button"] > div {
+        color: #000000 !important;
+        font-weight: 600 !important;
+        font-size: 1rem !important;
+    }
+    
+    /* Target dropdown options when opened */
+    .stSelectbox [data-baseweb="select"] [data-baseweb="menu"] {
+        background-color: #ffffff !important;
+        border: 2px solid #e1e8ff !important;
+        border-radius: 10px !important;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+    }
+    
+    .stSelectbox [data-baseweb="select"] [data-baseweb="menu"] > ul > li {
+        background-color: #ffffff !important;
+        color: #000000 !important;
+        font-weight: 600 !important;
+        padding: 0.75rem 1rem !important;
+    }
+    
+    .stSelectbox [data-baseweb="select"] [data-baseweb="menu"] > ul > li:hover {
+        background-color: #f8f9ff !important;
+        color: #000000 !important;
+    }
+    
+    /* Slider styling */
     .stSlider > div > div {
         background-color: #f8f9ff;
         border-radius: 15px;
@@ -112,6 +163,14 @@ st.markdown("""
         border: 2px solid #e1e8ff;
     }
     
+    /* Input container heading */
+    .input-container h3 {
+        color: #2c3e50 !important;
+        font-weight: 700 !important;
+        font-family: 'Inter', sans-serif !important;
+        margin-bottom: 1.5rem !important;
+    }
+    
     /* Button styling */
     .stButton > button {
         background: linear-gradient(135deg, #6c5ce7, #fd79a8);
@@ -188,9 +247,10 @@ st.markdown("""
     .footer {
         text-align: center;
         margin-top: 2rem;
-        color: rgba(255,255,255,0.7);
+        color: rgba(255,255,255,0.95);
         font-family: 'Inter', sans-serif;
         font-size: 0.9rem;
+        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
     }
     
     /* Responsive design */
@@ -235,15 +295,22 @@ def load_model():
 # Prediction function
 def predict_solution(diameter, soil_type, high_water, model, le_soil, le_water, le_solution):
     try:
+        import pandas as pd
+        
         # Encode inputs
         soil_encoded = le_soil.transform([soil_type])[0]
         water_encoded = le_water.transform([high_water])[0]
         
-        # Create feature vector
-        features = np.array([[diameter, soil_encoded, water_encoded]])
+        # Create feature DataFrame with proper column names to match training
+        feature_data = {
+            'Diameter': [diameter],
+            'soil_encoded': [soil_encoded], 
+            'water_encoded': [water_encoded]
+        }
+        features_df = pd.DataFrame(feature_data)
         
         # Make prediction
-        prediction_encoded = model.predict(features)[0]
+        prediction_encoded = model.predict(features_df)[0]
         prediction = le_solution.inverse_transform([prediction_encoded])[0]
         
         return prediction