app.py

import streamlit as st
import pandas as pd
import pickle
import json
import pydeck as pdk
from utils import create_new_features, normalize, bucketize, init_new_pred

st.set_page_config(layout="wide")

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

# Custom CSS to adjust the slider width

st.markdown("""
    <style>
    .stSlider [data-baseweb=slider]{
        width: 95%;
    }
    .stCheckbox, .stSelectbox {
        width: 95%px; 
    }
    </style>
    """,unsafe_allow_html=True)

# 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(height=800, border=True):
        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)
    
    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)

with col2:
    # Placeholder for displaying the predicted price at the top
    price_placeholder = st.empty()
    price_placeholder.subheader(f'Predicted Price: ${predicted_price[0][0]:,.2f}')
    map_data = pd.DataFrame(cities_geo[city])
    # with st.container(height=800, border=True):
    #     st.map(map_data, zoom=11)
    
    # Define a PyDeck Layer with map_data
    layer = pdk.Layer(
        "ScatterplotLayer",
        map_data,
        get_position="[lon, lat]",
        get_color="[200, 30, 0, 160]",
        get_radius=200,
    )
    
    # Define a PyDeck View (you can adjust height here)
    view_state = pdk.ViewState(
        latitude=map_data['lat'].mean(),
        longitude=map_data['lon'].mean(),
        zoom=11,
        pitch=50,
    )
    
    # Create a PyDeck chart with the defined layer and view
    deck = pdk.Deck(layers=[layer], initial_view_state=view_state, height=800)
    
    # Display the map using st.pydeck_chart
    st.pydeck_chart(deck)