feat: Add UI for prediction app

.gitattributes

@@ -34,3 +34,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.jpeg filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

src/streamlit_app.py

@@ -1,6 +1,149 @@
 import streamlit as st
+from PIL import Image
 
-st.title("Hello")
-name = st.text_input("Your name:")
-if st.button("Submit"):
-    st.text(f"Hello {name}, nice to meet you!")
+# 📌 PAGE SETUP
+st.set_page_config(page_title="Image Classifier App", page_icon="🤖", layout="centered")
+st.html("""
+<style>
+    .stMainBlockContainer {
+        max-width: 70rem;
+    }
+</style>
+""")
+
+# 📌 INITIALIZE SESSION STATE
+# We initialize session state variables to manage app state
+if "selected_image" not in st.session_state:
+    st.session_state["selected_image"] = None
+if "prediction_placeholder" not in st.session_state:
+    st.session_state["prediction_placeholder"] = {"label": "A Dog", "score": 0.9558}
+
+# 📌 MAIN APP LAYOUT
+with st.container():
+    st.title(
+        body="🖼️ Image Classifier with CNN",
+        help="An interactive application to classify images into over 1000 categories.",
+    )
+    st.html("<br>")
+
+    # Use tabs for different sections of the app
+    tab_app, tab_description = st.tabs(["**App**", "**Description**"])
+
+    # 📌 APP TAB
+    with tab_app:
+        # Create a two-column layout for the app interface
+        col_upload, col_results = st.columns(2, gap="large")
+
+        # 📌 IMAGE UPLOAD & EXAMPLE SELECTION
+        with col_upload:
+            st.header("Upload an Image", divider=True)
+
+            # File uploader widget
+            uploaded_image = st.file_uploader(
+                label="Drag and drop an image here or click to browse",
+                type=["jpg", "jpeg", "png"],
+                help="Maximum file size is 200MB",
+                key="image_uploader",
+            )
+
+            st.html("<br>")
+            st.subheader("Or Try an Example", divider=True)
+
+            # Segmented control for selecting example images
+            selected_example = st.segmented_control(
+                label="Categories",
+                options=["Animal", "Vehicle", "Object", "Building"],
+                default="Animal",
+                help="Select one of the pre-loaded examples",
+            )
+
+            st.html("<br>")
+
+            # --- THE SINGLE CLASSIFY BUTTON ---
+            classify_button = st.button(
+                label="Classify Image",
+                key="classify_btn",
+                type="primary",
+                icon="✨",
+            )
+
+        # 📌 PREDICTION RESULTS
+        with col_results:
+            st.header("Results", divider=True)
+
+            # This message is shown before any image is processed
+            if st.session_state["selected_image"] is None and not classify_button:
+                st.info("Choose an image to get a prediction.")
+
+            # If the button is clicked, run the prediction logic
+            if classify_button:
+                # Check if an image is selected before running prediction
+                if uploaded_image is not None:
+                    st.session_state["selected_image"] = uploaded_image
+                elif selected_example:
+                    # Load the selected example image
+                    try:
+                        img_path = f"./assets/{selected_example.lower()}.jpg"
+                        st.session_state["selected_image"] = Image.open(img_path)
+                    except FileNotFoundError:
+                        st.error(
+                            f"Error: The example image '{selected_example.lower()}.jpg' was not found."
+                        )
+                        st.stop()
+
+                if st.session_state["selected_image"] is not None:
+                    st.image(
+                        st.session_state["selected_image"],
+                        caption="Image to be classified",
+                    )
+                    st.markdown("---")
+                    st.subheader("Prediction")
+
+                    # Call the prediction function and display results
+                    with st.spinner("Analyzing image..."):
+                        # Call our modularized prediction function!
+                        try:
+                            predicted_label, predicted_score = predict_image(
+                                st.session_state["selected_image"]
+                            )
+
+                            st.metric(
+                                label="Prediction",
+                                value=f"Prediction: {predicted_label.replace('_', ' ').title()}",
+                                delta=f"{predicted_score * 100:.2f}%",
+                                help="The predicted category and its confidence score.",
+                                delta_color="normal",
+                            )
+                            st.balloons()
+                        except Exception as e:
+                            st.error(f"An error occurred during prediction: {e}")
+                else:
+                    st.error("Please upload an image or select an example to classify.")
+
+
+# 📌 DESCRIPTION TAB
+with tab_description:
+    st.header("About This Project", divider=True)
+    st.markdown(
+        """
+        This project showcases a Convolutional Neural Network (CNN) model that automatically
+        classifies images into over 1000 different categories.
+
+        ### Original Architecture
+        The original project was built as a multi-service architecture, featuring:
+        * **Streamlit:** For the web user interface.
+        * **FastAPI:** As a RESTful API to handle image processing and model serving.
+        * **Redis:** A message broker for communication between the services.
+
+        ### Portfolio Adaptation
+        For a live and cost-effective demo, this application has been adapted into a single-service
+        solution. The core logic of the FastAPI backend has been integrated directly into
+        the Streamlit app. This demonstrates the ability to adapt a solution for
+        specific deployment and resource constraints.
+
+        ### Technologies Used
+        * **Streamlit:** For the interactive web interface.
+        * **TensorFlow:** For loading and running the pre-trained CNN model.
+        * **Pre-trained Model:** ResNet50 with weights trained on the ImageNet dataset.
+        """
+    )