app.py

import streamlit as st 
import  joblib 
#import pickle
#from datetime import date
import numpy as np
#import sklearn


html_temp = """
    <div style="background-color:tomato;padding:10px">
    <h2 style="color:white;text-align:center;">Streamlit AIR Pollution Prediciton  ML App </h2>
    </div>
    """
st.markdown(html_temp, unsafe_allow_html=True)

image_url="https://wallpapercave.com/wp/wp6100544.jpg"

st.image(image_url, caption="Image from URL", use_container_width=True)
st.markdown(f"""
    <style>
        /* Set the background image for the entire app */
        .stApp {{
            background-color: #add8e6;
            background-size: 100px;
            background-repeat:no;
            background-attachment: auto;
            background-position:full;
        }}
    </style>
    """, unsafe_allow_html=True)
    
col1,col2=st.columns(2)
with col1:
    # Name
    name=st.selectbox("Select Name" ,options=['Emissions',"Pollution","Asthma-Related","Hospitalizations"])
    name_index=['Emissions',"Pollution","Asthma-Related","Hospitalizations"]
    name_value= name_index.index(name)
with col2:
    # Measure
    measure=st.selectbox("Select Measure ",options=["Density","Miles","Rates","Concentration"])
    measure_index=["Density","Miles","Rates","Concentration"]
    measure_value =measure_index.index(measure)
col1,col2 = st.columns(2)
with col1:
    # Geo_Type_Name
    Geo_Type_Name=st.selectbox('Select Geo_Type_Name',options=["UHF42",'UHF34','Borough','CD','Citywi'])
    Geo_Type_Name_index=["UHF42",'UHF34','Borough','CD','Citywi']
    Geo_Type_Name_value =Geo_Type_Name_index.index(Geo_Type_Name)
with col2:
    # Geo_Place_Name
    Geo_Place_Name=st.selectbox('Select Geo_Place_Name',options=['Queens','Unknown','Brooklyn','Bronx','Manhattan','Staten Island=5'])
    Geo_Place_Name_index=['Queens','Unknown','Brooklyn','Bronx','Manhattan','Staten Island=5']
    Geo_Place_Name_value=Geo_Place_Name_index.index(Geo_Place_Name)

#time_period
time_period=st.selectbox('select Time Period',options=['Other','Annual Average','Summer','Winter'])
time_period_index=['Other','Annual Average','Summer','Winter']
time_period_value=time_period_index.index(time_period)

# Data_Values
Data_values=st.slider("Enter The Data Values",min_value=0,max_value=424,value=1)

# model
model=joblib.load('Air_pollution_prediction_rf_model.joblib')
# with open('Air_pollution_prediction_rf_model.joblib', 'rb') as f:
#     model= pickle.load(f)

st.markdown("""
    <style>
    .stButton>button {
        background-color:#98FB98; /* Change color */
        color: red;              /* Text color */
        border-radius: 10px;       /* Rounded corners */
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
    }
    .stButton>button:hover {
        background-color: #C70039; /* Darker shade on hover */
    }
    </style>
""", unsafe_allow_html=True)

if st.button("Submit"):
   # Prepare input features for the model
    input_features = np.array([[
        name_value, measure_value, Geo_Type_Name_value, 
        Geo_Place_Name_value, time_period_value, Data_values
    ]])
    
    # Get prediction from the model
    try:
        output = model.predict(input_features)[0]
    except Exception as e:
        st.error(f"⚠️ Error in prediction: {e}")
        output = None
    
    # Define pollution status messages and colors
    pollution_status = {
        0: ("🌤️ Air Pollution is Moderate", "#FFD700"),  # Gold
        1: ("✅ Air Pollution is Good", "#32CD32"),       # Green
        2: ("⚠️ Air Pollution is Bad", "#FF4500")        # Red-Orange
    }
    
    # Retrieve prediction result and corresponding color
    result_text, result_color = pollution_status.get(output, ("❓ Unknown Prediction", "#808080"))  # Default to gray if unknown


    # st.write(result_text)
    # # Display styled result
    if output is not None:
        st.markdown(f"""
            <div style="
                padding: 15px; 
                background-color: {result_color}; 
                border-radius: 10px; 
                text-align: center; 
                font-size: 18px; 
                font-weight: bold; 
                color: white;">
                {result_text}
            </div>
        """, unsafe_allow_html=True)

    st.write("")
    st.write("")