app.py

import streamlit as st
import pandas as pd
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:
    min_dict = json.load(f)
with open("./max_dict.json", "r") as f:
    max_dict = json.load(f)
with open("./cities_geo.json", "r") as f:
    cities_geo = json.load(f)

# 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')

    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)

    # 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)