app.py

import streamlit as st
from tensorflow.keras.models import load_model
import numpy as np

# =========================================================
# PAGE CONFIG
# =========================================================
st.set_page_config(
    page_title="AI Sales Predictor",
    page_icon="📈",
    layout="wide",
    initial_sidebar_state="collapsed"
)

# =========================================================
# CUSTOM CSS
# =========================================================
st.markdown("""

<style>



html, body, [class*="css"] {

    font-family: 'Segoe UI', sans-serif;

}



.main {

    background: #f5f7fb;

}



.block-container {

    max-width: 1200px;

    padding-top: 2rem;

    padding-bottom: 2rem;

    padding-left: 1rem;

    padding-right: 1rem;

}



.hero {

    background: linear-gradient(135deg,#111827,#2563eb);

    padding: 2.5rem;

    border-radius: 28px;

    color: white;

    margin-bottom: 2rem;

}



.hero h1 {

    font-size: 48px;

    font-weight: 800;

    margin-bottom: 0.5rem;

}



.hero p {

    font-size: 18px;

    opacity: 0.9;

}



.card {

    background: white;

    border-radius: 24px;

    padding: 1.5rem;

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

    margin-bottom: 1rem;

}



.result-box {

    background: linear-gradient(135deg,#16a34a,#22c55e);

    padding: 2rem;

    border-radius: 24px;

    text-align: center;

    color: white;

    margin-top: 1rem;

}



.metric-card {

    background: white;

    padding: 1rem;

    border-radius: 18px;

    box-shadow: 0 4px 14px rgba(0,0,0,0.06);

    text-align: center;

}



.stButton > button {

    width: 100%;

    height: 58px;

    border-radius: 16px;

    border: none;

    background: linear-gradient(135deg,#2563eb,#1d4ed8);

    color: white;

    font-size: 20px;

    font-weight: 700;

}



.stButton > button:hover {

    background: linear-gradient(135deg,#1d4ed8,#1e40af);

}



div[data-baseweb="select"] {

    border-radius: 14px !important;

}



div[data-baseweb="slider"] {

    padding-top: 1rem;

    padding-bottom: 1rem;

}



@media (max-width: 768px){



    .hero {

        padding: 1.5rem;

    }



    .hero h1 {

        font-size: 30px;

    }



    .hero p {

        font-size: 15px;

    }



    .stButton > button {

        height: 54px;

        font-size: 18px;

    }



    .block-container {

        padding-left: 0.7rem;

        padding-right: 0.7rem;

    }

}



</style>

""", unsafe_allow_html=True)

# =========================================================
# LOAD MODEL
# =========================================================
@st.cache_resource
def load_ai_model():
    return load_model("rossmann.h5")

model = load_ai_model()

# =========================================================
# HERO SECTION
# =========================================================
st.markdown("""

<div class="hero">

    <h1>📈 AI Rossmann Sales Predictor</h1>

    <p>

        Predict daily Rossmann store sales using AI-powered analytics.

        Modern responsive interface optimized for desktop and mobile devices.

    </p>

</div>

""", unsafe_allow_html=True)

# =========================================================
# INFO METRICS
# =========================================================
m1, m2, m3 = st.columns(3)

with m1:
    st.markdown("""

    <div class="metric-card">

        <h3>⚡ Fast Prediction</h3>

        <p>Instant AI analysis</p>

    </div>

    """, unsafe_allow_html=True)

with m2:
    st.markdown("""

    <div class="metric-card">

        <h3>📱 Mobile Friendly</h3>

        <p>Responsive modern design</p>

    </div>

    """, unsafe_allow_html=True)

with m3:
    st.markdown("""

    <div class="metric-card">

        <h3>🧠 Deep Learning</h3>

        <p>Neural network prediction</p>

    </div>

    """, unsafe_allow_html=True)

st.write("")

# =========================================================
# MAIN FORM
# =========================================================
st.markdown('<div class="card">', unsafe_allow_html=True)

st.subheader("Store Information")

col1, col2 = st.columns(2)

# =========================================================
# LEFT COLUMN
# =========================================================
with col1:

    customers = st.slider(
        "👥 Number of Customers",
        min_value=0,
        max_value=10000,
        value=1200,
        step=50
    )

    day_name = st.selectbox(
        "📅 Day of the Week",
        [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
            "Sunday"
        ]
    )

# =========================================================
# RIGHT COLUMN
# =========================================================
with col2:

    store_open = st.selectbox(
        "🏪 Store Status",
        [
            "Open",
            "Closed"
        ]
    )

    promo = st.selectbox(
        "🎯 Promotion Active",
        [
            "Yes",
            "No"
        ]
    )

st.write("")

predict_btn = st.button("🚀 Predict Sales")

st.markdown('</div>', unsafe_allow_html=True)

# =========================================================
# ENCODING
# =========================================================
open_value = 1 if store_open == "Open" else 0

promo_value = 1 if promo == "Yes" else 0

day_mapping = {
    "Monday": 1,
    "Tuesday": 2,
    "Wednesday": 3,
    "Thursday": 4,
    "Friday": 5,
    "Saturday": 6,
    "Sunday": 7
}

day_value = day_mapping[day_name]

# =========================================================
# PREDICTION
# =========================================================
if predict_btn:

    input_data = np.array([
        customers,
        open_value,
        day_value,
        promo_value
    ])

    if len(input_data.shape) == 1:
        input_data = np.expand_dims(input_data, axis=0)

    with st.spinner("AI is predicting sales..."):

        prediction = model.predict(input_data, verbose=0)

        predicted_sales = int(prediction[0][0])

    # =====================================================
    # RESULT CARD
    # =====================================================
    st.markdown(f"""

    <div class="result-box">

        <h2>Predicted Daily Sales</h2>

        <h1 style="font-size:72px;">€{predicted_sales:,}</h1>

        <p>AI-powered Rossmann sales estimation completed successfully</p>

    </div>

    """, unsafe_allow_html=True)

    st.write("")

    # =====================================================
    # ANALYTICS CARDS
    # =====================================================
    a1, a2, a3 = st.columns(3)

    with a1:
        st.metric(
            "Customers",
            f"{customers:,}"
        )

    with a2:
        st.metric(
            "Promotion",
            "Active" if promo_value == 1 else "Inactive"
        )

    with a3:
        st.metric(
            "Store Status",
            "Open" if open_value == 1 else "Closed"
        )

    # =====================================================
    # SALES INSIGHT
    # =====================================================
    st.write("")

    if predicted_sales > 15000:
        st.success("🔥 High sales potential detected for this store day.")

    elif predicted_sales > 7000:
        st.info("📈 Average to strong daily sales expected.")

    else:
        st.warning("⚠️ Lower sales prediction detected.")