Update app.py

app.py

@@ -6,7 +6,7 @@ from utils import create_new_features, normalize, bucketize, init_new_pred
 
 st.set_page_config(layout="wide")
 
-# load model and files
+# Load model and files
 with open('./trained_model.pkl', 'rb') as file:
     model = pickle.load(file)
 with open("./min_dict.json", "r") as f:
@@ -22,19 +22,20 @@ col1, col2 = st.columns([1, 2])  # Adjust the width ratios as needed
 with col1:
     st.subheader('Features')
     
-    city = st.selectbox('City', list(cities_geo.keys()))  # Display city dropdown in the first column
-    waterfront = st.checkbox('Waterfront', value=False)
-    bedrooms = st.slider('Bedrooms', min_value=min_dict['bedrooms'], max_value=max_dict['bedrooms'], value=3)
-    bathrooms = st.slider('Bathrooms', min_value=min_dict['bathrooms'], max_value=max_dict['bathrooms'], value=2)
-    sqft_living = st.slider('Square Feet (Living)', min_value=min_dict['sqft_living'], max_value=max_dict['sqft_living'], value=1000)
-    sqft_lot = st.slider('Square Feet (Lot)', min_value=min_dict['sqft_lot'], max_value=max_dict['sqft_lot'], value=2000)
-    floors = st.slider('Floors', min_value=min_dict['floors'], max_value=max_dict['floors'], value=1)
-    view = st.slider('View', min_value=min_dict['view'], max_value=max_dict['view'], value=0)
-    condition = st.slider('Condition', min_value=min_dict['condition'], max_value=max_dict['condition'], value=3)
-    sqft_above = st.slider('Square Feet (Above)', min_value=min_dict['sqft_above'], max_value=max_dict['sqft_above'], value=1000)
-    sqft_basement = st.slider('Square Feet (Basement)', min_value=min_dict['sqft_basement'], max_value=max_dict['sqft_basement'], value=0)
-    yr_built = st.slider('Year Built', min_value=min_dict['yr_built'], max_value=max_dict['yr_built'], value=2000)
-    yr_renovated = st.slider('Year Renovated', min_value=min_dict['yr_renovated'], max_value=max_dict['yr_renovated'], value=2010)
+    with st.container():
+        city = st.selectbox('City', list(cities_geo.keys()))  # Display city dropdown in the first column
+        waterfront = st.checkbox('Waterfront', value=False)
+        bedrooms = st.slider('Bedrooms', min_value=min_dict['bedrooms'], max_value=max_dict['bedrooms'], value=3)
+        bathrooms = st.slider('Bathrooms', min_value=min_dict['bathrooms'], max_value=max_dict['bathrooms'], value=2)
+        sqft_living = st.slider('Square Feet (Living)', min_value=min_dict['sqft_living'], max_value=max_dict['sqft_living'], value=1000)
+        sqft_lot = st.slider('Square Feet (Lot)', min_value=min_dict['sqft_lot'], max_value=max_dict['sqft_lot'], value=2000)
+        floors = st.slider('Floors', min_value=min_dict['floors'], max_value=max_dict['floors'], value=1)
+        view = st.slider('View', min_value=min_dict['view'], max_value=max_dict['view'], value=0)
+        condition = st.slider('Condition', min_value=min_dict['condition'], max_value=min_dict['condition'], value=3)
+        sqft_above = st.slider('Square Feet (Above)', min_value=min_dict['sqft_above'], max_value=max_dict['sqft_above'], value=1000)
+        sqft_basement = st.slider('Square Feet (Basement)', min_value=min_dict['sqft_basement'], max_value=max_dict['sqft_basement'], value=0)
+        yr_built = st.slider('Year Built', min_value=min_dict['yr_built'], max_value=max_dict['yr_built'], value=2000)
+        yr_renovated = st.slider('Year Renovated', min_value=min_dict['yr_renovated'], max_value=min_dict['yr_renovated'], value=2010)
 
     st.markdown('</div>', unsafe_allow_html=True)
     
@@ -62,13 +63,13 @@ with col1:
     # Predict the price
     predicted_price = model.predict(new_pred)
 
-# Display the map in the second column
 with col2:
-    # Placeholder for displaying the predicted price at the top
-    price_placeholder = st.empty()
-    price_placeholder.markdown(
-        f"<h1 style='font-size: 24px;'>Predicted Price: ${predicted_price[0][0]:,.2f}</h1>",
-        unsafe_allow_html=True)
-    
-    map_data = pd.DataFrame(cities_geo[city])
-    st.map(map_data, zoom=11) 
+    with st.container():
+        # Placeholder for displaying the predicted price at the top
+        price_placeholder = st.empty()
+        price_placeholder.markdown(
+            f"<h1 style='font-size: 24px;'>Predicted Price: ${predicted_price[0][0]:,.2f}</h1>",
+            unsafe_allow_html=True)
+
+        map_data = pd.DataFrame(cities_geo[city])
+        st.map(map_data, zoom=11)