import streamlit as st
import tensorflow as tf
from tensorflow.keras.utils import load_img, img_to_array
from io import BytesIO

st.set_page_config(page_title="Forest Fire Detection", page_icon="🔥", layout="centered")

# Custom header with emoji
st.markdown(
    """
    <div style='text-align: center; margin-bottom: 20px;'>
        <h1>🔥 Forest Fire Detection Demo 🔥</h1>
        <p style='font-size:20px;'>Upload a forest image and let AI detect fire!<br>
        <span style='font-size:40px;'>🌲🌳🌴</span></p>
    </div>
    """,
    unsafe_allow_html=True
)

st.sidebar.title("About")
st.sidebar.info(
    "Upload a forest image to detect fire using a deep learning model. "
    "This demo is powered by TensorFlow and Streamlit."
)

# Load model only once
@st.cache_resource
def load_model():
    return tf.keras.models.load_model('FFD.keras')
model = load_model()

uploaded_file = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"])

if uploaded_file is not None:
    with st.spinner("Analyzing image..."):
        img = load_img(BytesIO(uploaded_file.read()), target_size=(150, 150))
        img_array = img_to_array(img) / 255.0
        img_array = img_array.reshape(1, 150, 150, 3)
        prediction = model.predict(img_array)
        confidence = float(prediction[0][0])
        result = 'Fire Detected' if confidence > 0.5 else 'No Fire'

        # Improved two-column layout with centered content and card-style result
        col1, col2 = st.columns([1.2, 1])
        with col1:
            st.markdown("<div style='display:flex;justify-content:center;'>", unsafe_allow_html=True)
            st.image(img, caption="Uploaded Image", width=260)
            st.markdown("</div>", unsafe_allow_html=True)
        with col2:
            st.markdown(
                f"""
                <div style='background: rgb(38, 39, 48); border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); padding: 24px; text-align: center; margin-top: 20px;'>
                    <h2 style='color:{"red" if result=="Fire Detected" else "green"}; margin-bottom: 10px;'>
                        {"🔥" if result=="Fire Detected" else "🌲"} {result}
                    </h2>
                    <div style='margin-bottom: 10px;'>
                        <progress value='{confidence:.2f}' max='1' style='width:80%; height:18px;'></progress>
                    </div>
                    <div style='font-size:18px; margin-bottom: 10px;'><b>Confidence:</b> {confidence:.2f}</div>
                </div>
                """,
                unsafe_allow_html=True
            )
    st.markdown("<br>", unsafe_allow_html=True)
else:
    st.info("Please upload an image to get started.")

# Footer
st.markdown(
    "<hr><div style='text-align:center;font-size:14px;'>"
    "Made with ❤️ by CoderKP using Streamlit & TensorFlow"
    "</div>",
    unsafe_allow_html=True
)