Update app.py

app.py

@@ -6,17 +6,6 @@ from utils import create_new_features, normalize, bucketize, init_new_pred
 
 st.set_page_config(layout="wide")
 
-st.markdown("""
-    <style>
-    .scroll-container {
-        height: 500px;  /* Set the height of the scrollable section */
-        overflow-y: scroll;
-        padding: 10px;
-        border: 1px solid #ccc; /* Optional: Add border to make the scrollable area more visible */
-    }
-    </style>
-    """, unsafe_allow_html=True)
-
 # load model and files
 with open('./trained_model.pkl', 'rb') as file:
     model = pickle.load(file)
@@ -31,61 +20,46 @@ with open("./cities_geo.json", "r") as f:
 col1, col2 = st.columns([1, 2])  # Adjust the width ratios as needed
 
 with col1:
-    st.subheader('Features')
-
-    with st.container():
-        st.markdown('<div class="scroll-container">', unsafe_allow_html=True)
-    
-        # Create two columns for City and Waterfront
-        col3, col4 = st.columns(2)
-    
-        # City dropdown in the first column
-        with col3:
-            city = st.selectbox('City', list(cities_geo.keys()))
-    
-        # Waterfront checkbox in the second column
-        with col4:
-            waterfront = st.checkbox('Waterfront', value=False)
     
-        # 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)
-    
-        st.markdown('</div>', unsafe_allow_html=True)
-        
-        new_pred = init_new_pred()
-        new_pred['bedrooms'] = bedrooms
-        new_pred['bathrooms'] = bathrooms
-        new_pred['sqft_living'] = sqft_living
-        new_pred['sqft_lot'] = sqft_lot
-        new_pred['floors'] = floors
-        new_pred['waterfront'] = int(waterfront)
-        new_pred['view'] = view
-        new_pred['condition'] = condition
-        new_pred['sqft_above'] = sqft_above
-        new_pred['sqft_basement'] = sqft_basement
-        new_pred['yr_built'] = yr_built
-        new_pred['yr_renovated'] = yr_renovated
-        new_pred[f'city_{city}'] = 1
-    
-        # Process the prediction
-        new_pred = pd.DataFrame([new_pred])
-        new_pred = create_new_features(new_pred)
-        new_pred = bucketize(new_pred)
-        new_pred = normalize(new_pred)
+    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)
+
+    st.markdown('</div>', unsafe_allow_html=True)
     
-        # Predict the price
-        predicted_price = model.predict(new_pred)
+    new_pred = init_new_pred()
+    new_pred['bedrooms'] = bedrooms
+    new_pred['bathrooms'] = bathrooms
+    new_pred['sqft_living'] = sqft_living
+    new_pred['sqft_lot'] = sqft_lot
+    new_pred['floors'] = floors
+    new_pred['waterfront'] = int(waterfront)
+    new_pred['view'] = view
+    new_pred['condition'] = condition
+    new_pred['sqft_above'] = sqft_above
+    new_pred['sqft_basement'] = sqft_basement
+    new_pred['yr_built'] = yr_built
+    new_pred['yr_renovated'] = yr_renovated
+    new_pred[f'city_{city}'] = 1
+
+    # Process the prediction
+    new_pred = pd.DataFrame([new_pred])
+    new_pred = create_new_features(new_pred)
+    new_pred = bucketize(new_pred)
+    new_pred = normalize(new_pred)
+
+    # Predict the price
+    predicted_price = model.predict(new_pred)
 
 # Display the map in the second column
 with col2: