helper_functions.py

import streamlit as st
import joblib
import pandas as pd

@st.cache_resource(ttl=6*300)  # Reruns every 6 hours
def run_model():
    # Load or train your model (pretrained model in this case)
    model = joblib.load("linear_regression_model.pkl")
    
    # Static input values
    input_data = pd.DataFrame({
        'Temperature': [20.0],
        'Wind Speed': [10.0],
        'Humidity': [50.0]
    })
    
    # Run the model with static input
    prediction = model.predict(input_data)
    return prediction

# Custom function to create styled metric boxes with subscripts, smaller label, and larger metric
def custom_metric_box(label, value, delta):
    st.markdown(f"""
        <div style="
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 15px;
            margin-bottom: 10px;
            width: 200px;  /* Fixed width */
        ">
            <h4 style="font-size: 18px; font-weight: normal; margin: 0;">{label}</h4>  <!-- Smaller label -->
            <p style="font-size: 36px; font-weight: bold; margin: 0;">{value}</p>  <!-- Larger metric -->
            <p style="color: {'green' if '+' in delta else 'orange'}; margin: 0;">{delta}</p>
        </div>
        """, unsafe_allow_html=True)

# Custom function to create pollution metric boxes with side-by-side layout for label and value
# Custom function to create pollution metric boxes with side-by-side layout and fixed width
def pollution_box(label, value, delta):
    st.markdown(f"""
        <div style="
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            padding: 15px;
            margin-bottom: 10px;
            width: 300px;  /* Fixed width */
        ">
            <h4 style="font-size: 18px; font-weight: normal; margin: 0;">{label}</h4>  <!-- Smaller label -->
            <p style="font-size: 36px; font-weight: bold; margin: 0;">{value}</p>  <!-- Larger metric -->
            <p style="color: {'green' if '+' in delta else 'orange'}; margin: 0;">{delta}</p>
        </div>
        """, unsafe_allow_html=True)