import gradio as gr
import joblib

# Load the trained CatBoost model
cat = joblib.load('cat_model.joblib')

# Define a prediction function using the trained CatBoost model
def predict_aqi(pm25, no2, co, so2, o3):
    features = [[pm25, no2, co, so2, o3]]
    pred = cat.predict(features)[0]
    return f"Predicted AQI: {pred:.2f}"

# Custom CSS for a modern look
custom_css = """
.gradio-container {background: linear-gradient(135deg, #ffd21e 0%, #ffcc29 100%);}
h1, h2, h3 {color: #2d3a4b;}
input, .input-text {border-radius: 8px;}
.output-text {font-size: 1.5em; color: #1a5d1a; font-weight: bold;}
"""

# Feature info HTML
feature_info = """
<div style='background: #ffd21e; border-radius: 10px; padding: 18px; margin-bottom: 18px; color: #2d3a4b; font-size: 1.1em;'>
<b>What do these features mean?</b><br><br>
<ul>
    <li><b>PM2.5 (μg/m³):</b> Fine particulate matter. <b>Low:</b> 0-50 (Good), <b>High:</b> 250+ (Hazardous)</li>
    <li><b>NO2 (μg/m³):</b> Nitrogen dioxide. <b>Low:</b> 0-40 (Good), <b>High:</b> 200+ (Very unhealthy)</li>
    <li><b>CO (mg/m³):</b> Carbon monoxide. <b>Low:</b> 0-2 (Good), <b>High:</b> 10+ (Dangerous)</li>
    <li><b>SO2 (μg/m³):</b> Sulfur dioxide. <b>Low:</b> 0-20 (Good), <b>High:</b> 100+ (Very unhealthy)</li>
    <li><b>O3 (μg/m³):</b> Ozone. <b>Low:</b> 0-60 (Good), <b>High:</b> 180+ (Unhealthy)</li>
</ul>
<i>Higher values mean more pollution and worse air quality.</i>
</div>
"""

with gr.Blocks(css=custom_css, title="Air Quality Index Predictor") as demo:
    gr.Markdown("<h1>🌤️ Air Quality Index (AQI) Predictor</h1>")
    gr.Markdown(feature_info)
    with gr.Row():
        with gr.Column():
            pm25 = gr.Number(label="PM2.5 (μg/m³)", value=50.0)
            no2 = gr.Number(label="NO2 (μg/m³)", value=20.0)
            co = gr.Number(label="CO (mg/m³)", value=1.0)
            so2 = gr.Number(label="SO2 (μg/m³)", value=10.0)
            o3 = gr.Number(label="O3 (μg/m³)", value=40.0)
            submit_btn = gr.Button("Predict AQI", elem_id="submit-btn")
        with gr.Column():
            gr.Markdown(
    "<b>AQI value explains air quality: 0–50 = good (safe), 51–100 = moderate, 150+ = unhealthy (polluted and harmful to breathe)</b>"
)

            output = gr.Textbox(label="Result", elem_classes="output-text", interactive=False)
    submit_btn.click(
        predict_aqi,
        inputs=[pm25, no2, co, so2, o3],
        outputs=output
    )

demo.launch()