import streamlit as st
import tensorflow as tf
import numpy as np
from PIL import Image

# Load the saved ResNet model
model_resnet = []#tf.keras.models.load_model("path_to_your_saved_model/resnet_model.h5")

# Set page configuration and layout
st.set_page_config(
    page_title="Image Classification App",
    page_icon=":camera:",
    layout="wide",
)

# Header logo
st.image("RCAIoT_logo.png", use_column_width=False)

# Main content
col1, col2 = st.columns([1, 1])

with col1:
    st.header("Upload Image")
    uploaded_image = st.file_uploader("Choose an image...", type=["jpg", "jpeg", "png"], key="upload_image")
    if uploaded_image is not None:
        # Display the uploaded image with fixed initial height and width using HTML/CSS
        st.image(uploaded_image, caption="Uploaded Image", use_column_width=False, width=300)
        st.markdown(
            """
            <style>
            img {
                max-height: 300px;
            }
            </style>
            """,
            unsafe_allow_html=True,
        )

with col2:
    st.header("Results")

    # Stylish Analyze and Reset buttons in a horizontal row
    st.markdown(
        """
        <style>
        .analyze-reset-buttons {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .analyze-reset-buttons button {
            flex: 1;
            margin: 10px;
            padding: 10px;
            background-color: #3366ff;
            color: white;
            font-size: 16px;
            text-align: center;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .analyze-reset-buttons button:hover {
            background-color: #2353b4;
        }
        .results-text {
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
            color: #000;
        }
        .results-values {
            font-size: 18px;
            font-weight: bold;
            margin-top: 10px;
            color: blue;
        }
        </style>
        """,
        unsafe_allow_html=True,
    )

    st.markdown("<div class='analyze-reset-buttons'>", unsafe_allow_html=True)
    if st.button("Analyze", key="analyze_button"):
        if uploaded_image is not None:
            # Preprocess the uploaded image
            img = Image.open(uploaded_image)
            img = img.resize((64, 64))  # Resize the image to match the model input size
            img = np.array(img)
            img = tf.keras.applications.resnet50.preprocess_input(img)
            img = np.expand_dims(img, axis=0)  # Add batch dimension

            # Make predictions using the loaded model
            predictions = model_resnet.predict(img)

            # Get the class label with the highest probability
            class_label = np.argmax(predictions)
            confidence = predictions[0][class_label]

            # Display prediction and confidence
            st.markdown(
                f"<div class='results-text'>Predicted Class: <span class='results-values'>{class_label}</span></div>",
                unsafe_allow_html=True,
            )
            st.markdown(
                f"<div class='results-text'>Confidence Level: <span class='results-values'>{confidence:.2f}</span></div>",
                unsafe_allow_html=True,
            )
        else:
            st.warning("Please upload an image before clicking 'Analyze'.")
    if st.button("Reset", key="reset_button"):
        st.session_state.uploaded_image = None
        uploaded_image = None
        st.empty()  # Clear the results container
    st.markdown("</div>", unsafe_allow_html=True)