app.py

import streamlit as st
import pickle
import numpy as np

# Load trained model
model = pickle.load(open("fire_alarm.pkl", "rb"))

st.set_page_config(
    page_title="Fire Alarm Prediction",
    page_icon="🔍",
    layout="centered",
)

st.markdown("""
    <style>
        .stApp {
            background-color: #ECEFF1;
        }
        .title {
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            color: #37474F;
        }
        .stButton > button {
            width: 100%;
            background-color: #546E7A; 
            color: white;
            font-size: 16px;
            border-radius: 6px;
        }
        .result-box {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: white;
            padding: 12px;
            border-radius: 8px;
            margin-top: 20px;
        }
        .fire {
            background-color: #FF7043; 
        }
        .no-fire {
            background-color: #66BB6A; 
        }
    </style>
    """,
    unsafe_allow_html=True,
)

st.markdown("<h1 class='title'>Fire Alarm Prediction</h1>", unsafe_allow_html=True)

# Input fields based on dataset
col1, col2 = st.columns(2)

with col1:
    temperature = st.slider("Temperature (°C)", -10, 100, 20)
    humidity = st.slider("Humidity (%)", 0, 100, 57)
    tvoc = st.slider("TVOC (ppb)", 0, 60000, 0)
    eco2 = st.slider("eCO2 (ppm)", 300, 50000, 400)
    raw_h2 = st.slider("Raw H2", 0, 50000, 12306)

with col2:
    raw_ethanol = st.slider("Raw Ethanol", 0, 50000, 18520)
    pressure = st.slider("Pressure (hPa)", 900, 1100, 939)
    pm1 = st.slider("PM1.0", 0, 500, 0)
    pm2_5 = st.slider("PM2.5", 0, 500, 0)

# Prepare input data
input_data = np.array([[temperature, humidity, tvoc, eco2, raw_h2, raw_ethanol, pressure, pm1, pm2_5]])
st.write("Input data shape:", input_data.shape)

if st.button("Predict Fire Alarm"):
    prediction = model.predict(input_data)
    result = "Fire Detected!" if prediction[0] == 1 else "No Fire Detected"
    result_class = "fire" if prediction[0] == 1 else "no-fire"

    # Display result
    st.markdown(
        f"""
        <div class="result-box {result_class}">
            {result}
        </div>
        """,
        unsafe_allow_html=True, 
    )