Update app.py

app.py

@@ -4,6 +4,20 @@ import pickle
 import json
 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)
 with open("./min_dict.json", "r") as f:
@@ -13,29 +27,28 @@ with open("./max_dict.json", "r") as f:
 with open("./cities_geo.json", "r") as f:
     cities_geo = json.load(f)
 
-st.set_page_config(layout="wide")
-
 # Create two columns: one for the city and one for the map
 col1, col2 = st.columns([1, 2])  # Adjust the width ratios as needed
 
 with col1:
     st.subheader('Features')
-    
-    # Display city dropdown in the first column
-    city = st.selectbox(
-        'Select City', 
-        ['Algona', 'Auburn', 'Beaux Arts Village', 'Bellevue',
-         'Black Diamond', 'Bothell', 'Burien', 'Carnation', 'Clyde Hill',
-         'Covington', 'Des Moines', 'Duvall', 'Enumclaw', 'Fall City',
-         'Federal Way', 'Inglewood-Finn Hill', 'Issaquah', 'Kenmore',
-         'Kent', 'Kirkland', 'Lake Forest Park', 'Maple Valley', 'Medina',
-         'Mercer Island', 'Milton', 'Newcastle', 'Normandy Park',
-         'North Bend', 'Pacific', 'Preston', 'Ravensdale', 'Redmond',
-         'Renton', 'Sammamish', 'SeaTac', 'Seattle', 'Shoreline',
-         'Skykomish', 'Snoqualmie', 'Snoqualmie Pass', 'Tukwila', 'Vashon',
-         'Woodinville', 'Yarrow Point'],
-    )
-    waterfront = st.checkbox('Waterfront', value=False)
+
+    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)
@@ -47,6 +60,8 @@ with col1:
     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
@@ -78,230 +93,7 @@ with col2:
     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
-    )
+        unsafe_allow_html=True)
     
     map_data = pd.DataFrame(cities_geo[city])
-    
-    # if city == 'Seattle':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6097, 47.6205, 47.6762],
-    #         'longitude': [-122.3331, -122.3493, -122.3198]
-    #     })
-    # elif city == 'Bellevue':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6101, 47.6183],
-    #         'longitude': [-122.2015, -122.2046]
-    #     })
-    # elif city == 'Algona':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3162],
-    #         'longitude': [-122.2295]
-    #     })
-    # elif city == 'Auburn':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3073],
-    #         'longitude': [-122.2284]
-    #     })
-    # elif city == 'Beaux Arts Village':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6141],
-    #         'longitude': [-122.2125]
-    #     })
-    # elif city == 'Black Diamond':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3465],
-    #         'longitude': [-121.9877]
-    #     })
-    # elif city == 'Bothell':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.7595],
-    #         'longitude': [-122.2056]
-    #     })
-    # elif city == 'Burien':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.4702],
-    #         'longitude': [-122.3359]
-    #     })
-    # elif city == 'Carnation':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6460],
-    #         'longitude': [-121.9758]
-    #     })
-    # elif city == 'Clyde Hill':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6330],
-    #         'longitude': [-122.2107]
-    #     })
-    # elif city == 'Covington':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3765],
-    #         'longitude': [-122.0288]
-    #     })
-    # elif city == 'Des Moines':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3840],
-    #         'longitude': [-122.3061]
-    #     })
-    # elif city == 'Duvall':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.7332],
-    #         'longitude': [-121.9916]
-    #     })
-    # elif city == 'Enumclaw':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.2059],
-    #         'longitude': [-121.9876]
-    #     })
-    # elif city == 'Fall City':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.5980],
-    #         'longitude': [-121.8896]
-    #     })
-    # elif city == 'Federal Way':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3220],
-    #         'longitude': [-122.3126]
-    #     })
-    # elif city == 'Inglewood-Finn Hill':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.7338],
-    #         'longitude': [-122.2780]
-    #     })
-    # elif city == 'Issaquah':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.5410],
-    #         'longitude': [-122.0311]
-    #     })
-    # elif city == 'Kenmore':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.7557],
-    #         'longitude': [-122.2416]
-    #     })
-    # elif city == 'Kent':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3809],
-    #         'longitude': [-122.2348]
-    #     })
-    # elif city == 'Kirkland':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6810],
-    #         'longitude': [-122.2087]
-    #     })
-    # elif city == 'Lake Forest Park':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.7318],
-    #         'longitude': [-122.2764]
-    #     })
-    # elif city == 'Maple Valley':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3610],
-    #         'longitude': [-122.0240]
-    #     })
-    # elif city == 'Medina':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6357],
-    #         'longitude': [-122.2169]
-    #     })
-    # elif city == 'Mercer Island':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.5703],
-    #         'longitude': [-122.2264]
-    #     })
-    # elif city == 'Milton':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.2335],
-    #         'longitude': [-122.2730]
-    #     })
-    # elif city == 'Newcastle':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.5477],
-    #         'longitude': [-122.1711]
-    #     })
-    # elif city == 'Normandy Park':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.4051],
-    #         'longitude': [-122.3376]
-    #     })
-    # elif city == 'North Bend':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.4904],
-    #         'longitude': [-121.7852]
-    #     })
-    # elif city == 'Pacific':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3197],
-    #         'longitude': [-122.2786]
-    #     })
-    # elif city == 'Preston':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.5420],
-    #         'longitude': [-121.9214]
-    #     })
-    # elif city == 'Ravensdale':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.3485],
-    #         'longitude': [-121.9807]
-    #     })
-    # elif city == 'Redmond':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6734],
-    #         'longitude': [-122.1215]
-    #     })
-    # elif city == 'Renton':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.4829],
-    #         'longitude': [-122.2170]
-    #     })
-    # elif city == 'Sammamish':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6162],
-    #         'longitude': [-122.0394]
-    #     })
-    # elif city == 'SeaTac':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.4484],
-    #         'longitude': [-122.3085]
-    #     })
-    # elif city == 'Shoreline':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.7554],
-    #         'longitude': [-122.3410]
-    #     })
-    # elif city == 'Skykomish':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.7054],
-    #         'longitude': [-121.4848]
-    #     })
-    # elif city == 'Snoqualmie':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.5410],
-    #         'longitude': [-121.8340]
-    #     })
-    # elif city == 'Snoqualmie Pass':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.4286],
-    #         'longitude': [-121.4420]
-    #     })
-    # elif city == 'Tukwila':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.4835],
-    #         'longitude': [-122.2585]
-    #     })
-    # elif city == 'Vashon':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.4337],
-    #         'longitude': [-122.4660]
-    #     })
-    # elif city == 'Woodinville':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.7524],
-    #         'longitude': [-122.1576]
-    #     })
-    # elif city == 'Yarrow Point':
-    #     map_data = pd.DataFrame({
-    #         'latitude': [47.6348],
-    #         'longitude': [-122.2218]
-    #     })
-
-    st.map(map_data, zoom=11)
+    st.map(map_data, zoom=11)