app.py

# -*- coding: utf-8 -*-
import streamlit as st
from streamlit.runtime.uploaded_file_manager import UploadedFile
import tensorflow as tf
import pandas as pd
from PIL import Image # Needed for image display consistency potentially

# 🔹 Expand the Page Layout
st.set_page_config(layout="wide")  # Use Streamlit's built-in wide layout

# --- Constants and Data ---
current_model = "Model Mini"
new_model = "Food Vision" # Define the second model name
class_names = ['apple_pie', 'baby_back_ribs', 'baklava', 'beef_carpaccio', 'beef_tartare',
               'beet_salad', 'beignets', 'bibimbap', 'bread_pudding', 'breakfast_burrito',
               'bruschetta', 'caesar_salad', 'cannoli', 'caprese_salad', 'carrot_cake',
               'ceviche', 'cheese_plate', 'cheesecake', 'chicken_curry', 'chicken_quesadilla',
               'chicken_wings', 'chocolate_cake', 'chocolate_mousse', 'churros', 'clam_chowder',
               'club_sandwich', 'crab_cakes', 'creme_brulee', 'croque_madame', 'cup_cakes',
               'deviled_eggs', 'donuts', 'dumplings', 'edamame', 'eggs_benedict', 'escargots',
               'falafel', 'filet_mignon', 'fish_and_chips', 'foie_gras', 'french_fries',
               'french_onion_soup', 'french_toast', 'fried_calamari', 'fried_rice',
               'frozen_yogurt', 'garlic_bread', 'gnocchi', 'greek_salad',
               'grilled_cheese_sandwich', 'grilled_salmon', 'guacamole', 'gyoza', 'hamburger',
               'hot_and_sour_soup', 'hot_dog', 'huevos_rancheros', 'hummus', 'ice_cream',
               'lasagna', 'lobster_bisque', 'lobster_roll_sandwich', 'macaroni_and_cheese',
               'macarons', 'miso_soup', 'mussels', 'nachos', 'omelette', 'onion_rings',
               'oysters', 'pad_thai', 'paella', 'pancakes', 'panna_cotta', 'peking_duck',
               'pho', 'pizza', 'pork_chop', 'poutine', 'prime_rib', 'pulled_pork_sandwich',
               'ramen', 'ravioli', 'red_velvet_cake', 'risotto', 'samosa', 'sashimi',
               'scallops', 'seaweed_salad', 'shrimp_and_grits', 'spaghetti_bolognese',
               'spaghetti_carbonara', 'spring_rolls', 'steak', 'strawberry_shortcake',
               'sushi', 'tacos', 'takoyaki', 'tiramisu', 'tuna_tartare', 'waffles']

top_ten_dict = {
    "class_name": ["edamame", "macarons", "oysters", "pho", "mussels", # Corrected 'mussles' -> 'mussels'
                   "sashimi", "seaweed_salad", "dumplings", "guacamole", "onion_rings"],
    "f1-score": [0.964427, 0.900433, 0.853119, 0.852652, 0.850622,
                 0.844794, 0.834356, 0.833006, 0.83209, 0.831967]
}
last_ten_dict = {
    "class_name": ["chocolate_mousse", "tuna_tartare", "scallops", "huevos_rancheros",
                   "foie_gras", "steak", "bread_pudding", "ravioli", "pork_chop", "apple_pie"],
    "f1-score": [0.413793, 0.399254, 0.383693, 0.367698, 0.354497,
                 0.340426, 0.340045, 0.339785, 0.324826, 0.282407]
}

# 🔹 Custom CSS for Centered Content within elements and layout stability
st.markdown(
    """
    <style>
        /* Center content vertically and horizontally using flexbox */
        .centered {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; /* Can adjust to flex-start if needed */
            text-align: center;
            width: 100%; /* Take full width of its container (e.g., column) */
            min-height: 300px; /* Give containers minimum height to reduce collapse */
            padding-top: 20px; /* Add some padding */
            padding-bottom: 20px;
        }

        /* Style file uploader for better centering if needed */
        /* Streamlit structure might change, this targets common patterns */
        div[data-testid="stFileUploader"] > section {
             padding: 0; /* Reduce default padding if it pushes content */
        }
        div[data-testid="stFileUploader"] > section > input {
             /* Hide default input if necessary */
        }
         div[data-testid="stFileUploader"] label {
             /* Style the label if needed */
         }


        /* Center images and standardize size */
        .centered img { /* Target images specifically within centered divs */
            display: block;
            margin-left: auto;
            margin-right: auto;
            max-width: 200px; /* Use max-width for responsiveness */
            max-height: 200px; /* Use max-height */
            width: auto; /* Allow auto width */
            height: auto; /* Allow auto height */
            object-fit: contain; /* Contain ensures the whole image fits */
            border-radius: 20px;
            margin-bottom: 15px; /* Add space below image */
        }

         /* Ensure columns try to vertically align content */
         div[data-testid="stVerticalBlock"] div[data-testid="stHorizontalBlock"] {
             align-items: center;
         }

         /* Style the radio buttons */
         div[data-testid="stRadio"] > label {
             font-weight: bold; /* Make label bold */
             margin-bottom: 10px;
         }
         div[data-testid="stRadio"] > div {
            display: flex;
            justify-content: center; /* Center radio options */
            gap: 15px; /* Add space between radio buttons */
         }

         /* Style the button */
         div[data-testid="stButton"] > button {
             width: 80%; /* Make button wider */
             margin-top: 20px; /* Add space above button */
         }

    </style>
    """,
    unsafe_allow_html=True
)

# --- Page Title and Intro ---
st.title("Food Vision Demo App 🍔🧠")
st.header("A food vision app using a CNN model fine-tuned on EfficientNet.")
st.divider()

# --- Explanations (Collapsible) ---
with st.expander("Learn More: What is a CNN?"):
    st.write("""
    A Neural Network is a system inspired by the human brain, composed of interconnected nodes (neurons) organized in layers: an input layer, one or more hidden layers, and an output layer.
    Data (like text, numbers, images) is fed into the input layer, encoded as numbers. This information flows through the network, undergoing mathematical transformations at each node based on learned 'weights'.
    The network 'learns' by adjusting these weights during training to minimize the difference between its predictions and the actual outcomes.
    """)
    # Consider adding a simple diagram URL if available
    # st.image("url_to_neural_network_diagram.png")
    st.write("""
    A **Convolutional Neural Network (CNN)** is a specialized type of neural network particularly effective for processing grid-like data, such as images and videos.
    CNNs use special layers called 'convolutional layers' that apply filters to input images to automatically learn hierarchical patterns, like edges, textures, and shapes. This makes them excellent for visual recognition tasks.
    """)

with st.expander("Learn More: Sample CNN Code Snippet (TensorFlow/Keras)"):
    st.write("This is a simplified example showing key components like using a pre-trained base model (EfficientNet), adding custom layers, enabling mixed precision (for faster training), and compiling the model.")
    code = """
import tensorflow as tf
from tensorflow.keras import layers, models, applications
from tensorflow.keras import mixed_precision

# --- Configuration ---
IMAGE_SHAPE = (224, 224, 3)
NUM_CLASSES = 101 # Example number of food classes

# --- Enable Mixed Precision (Optional but recommended for speed) ---
# mixed_precision.set_global_policy("mixed_float16")

# --- Data Augmentation Layer ---
# Define data augmentation transformations here
data_augmentation = tf.keras.Sequential([
  layers.RandomFlip("horizontal"),
  layers.RandomRotation(0.2),
  layers.RandomZoom(0.2),
  layers.RandomHeight(0.2),
  layers.RandomWidth(0.2),
  # Rescaling might be part of EfficientNet preprocessing, check docs
], name="data_augmentation")

# --- Build the Model using Functional API ---
# 1. Input Layer
inputs = layers.Input(shape=IMAGE_SHAPE, name="input_layer")

# 2. Data Augmentation (applied during training)
# x = data_augmentation(inputs) # Apply augmentation first

# 3. Base Model (EfficientNetB0) - Transfer Learning
base_model = applications.EfficientNetB0(include_top=False, # Don't include the final classification layer
                                       weights='imagenet', # Load pre-trained weights
                                       input_shape=IMAGE_SHAPE)
base_model.trainable = False # Freeze the base model initially

# Pass input through base model (ensure correct preprocessing if not done before)
# EfficientNet often has a preprocessing function or handles rescaling internally
x = base_model(inputs, training=False) # Use inputs directly if augmentation is after base_model

# 4. Pooling Layer
x = layers.GlobalAveragePooling2D(name="global_average_pooling")(x)

# 5. Output Layer (Dense)
# The number of units must match the number of classes
# Use float32 for the final layer for numerical stability with mixed precision
logits = layers.Dense(NUM_CLASSES, name="dense_logits")(x)
outputs = layers.Activation("softmax", dtype=tf.float32, name="softmax_output")(logits)

# 6. Create the Model
model = models.Model(inputs=inputs, outputs=outputs)

# --- Compile the Model ---
# Use Adam optimizer (common choice)
optimizer = tf.keras.optimizers.Adam()
# If using mixed precision, wrap the optimizer
# optimizer = mixed_precision.LossScaleOptimizer(optimizer)

model.compile(loss="categorical_crossentropy", # Use if labels are one-hot encoded
              optimizer=optimizer,
              metrics=["accuracy"])

# --- Model Summary ---
# model.summary()

# --- Train the Model (Example) ---
# history = model.fit(train_data,
#                     epochs=5,
#                     validation_data=test_data,
#                     ...)
"""
    st.code(code, language="python")

with st.expander("Learn More: What is EfficientNet?"):
    st.write("""
    EfficientNet is a family of Convolutional Neural Networks (CNNs) developed by Google Brain.
    Its key innovation is a method called **compound scaling**. Instead of arbitrarily increasing just the depth (number of layers), width (number of channels), or input image resolution, EfficientNet scales all three dimensions simultaneously using a fixed set of scaling coefficients.
    This balanced scaling approach allows EfficientNet models (like EfficientNetB0, B1, ..., B7) to achieve state-of-the-art accuracy on image classification tasks while being significantly smaller and faster (more computationally efficient) than previous models with similar accuracy.
    """)

with st.expander("Learn More: What is Fine-Tuning?"):
    st.write("""
    **Fine-tuning** is a transfer learning technique where you take a model pre-trained on a large dataset (like ImageNet, which contains millions of general images) and train it further on a smaller, specific dataset (like our Food-101 dataset).

    **Why Fine-Tune?**
    1.  **Leverage Existing Knowledge:** The pre-trained model has already learned general visual features (edges, textures, shapes) from the large dataset.
    2.  **Faster Training:** You don't need to train the entire network from scratch, saving significant time and computational resources.
    3.  **Better Performance on Small Datasets:** It often leads to better results than training from scratch, especially when your specific dataset is relatively small.

    **Process:**
    1.  **Load Pre-trained Model:** Load a model (like EfficientNet) with its pre-trained weights, typically excluding its final classification layer.
    2.  **Freeze Base Layers:** Initially, keep the weights of the pre-trained layers frozen (`trainable = False`).
    3.  **Add New Layers:** Add new layers on top (e.g., Pooling, Dense layers) suitable for your specific task (e.g., classifying 101 food types).
    4.  **Train Top Layers:** Train *only* the new layers on your dataset for a few epochs.
    5.  **(Optional but common) Unfreeze Some Layers:** Unfreeze some of the later layers of the base model (`trainable = True`).
    6.  **Train with Low Learning Rate:** Continue training the entire network (or the unfrozen parts) with a very low learning rate. This allows the pre-trained weights to adapt slightly to the nuances of your specific dataset without drastically changing the learned general features.
    """)

with st.expander("Learn More: Fine-Tuning Code Snippet (TensorFlow/Keras)"):
    st.write("This snippet shows how to unfreeze layers and re-compile the model for fine-tuning, typically done *after* initial feature extraction training.")
    tune_code = """
# --- Load weights from initial training phase (where base_model was frozen) ---
# model.load_weights(checkpoint_path_feature_extraction)

# --- Unfreeze some or all layers of the base model ---
base_model.trainable = True

# --- Optional: Freeze earlier layers again (fine-tune only later layers) ---
# print(f"Number of layers in base model: {len(base_model.layers)}")
# Fine-tune from this layer onwards
# fine_tune_at = 100 # Example: Unfreeze layers from index 100 onwards

# for layer in base_model.layers[:fine_tune_at]:
#    layer.trainable = False

# --- Re-compile the Model with a Lower Learning Rate ---
# Lowering the learning rate is crucial for fine-tuning to avoid
# destroying the pre-trained weights.
LOW_LEARNING_RATE = 0.0001 # Example: 10x smaller than initial LR

optimizer = tf.keras.optimizers.Adam(learning_rate=LOW_LEARNING_RATE)
# If using mixed precision:
# optimizer = mixed_precision.LossScaleOptimizer(tf.keras.optimizers.Adam(learning_rate=LOW_LEARNING_RATE))

model.compile(loss="categorical_crossentropy",
              optimizer=optimizer, # Use the optimizer with the low learning rate
              metrics=["accuracy"])

# --- Continue Training (Fine-tuning) ---
# history_fine_tune = model.fit(train_data,
#                               epochs=initial_epochs + 5, # Train for a few more epochs
#                               initial_epoch=history.epoch[-1], # Start where previous training left off
#                               validation_data=test_data,
#                               ...)
"""
    st.code(tune_code, language="python")
st.divider()

# --- Model Build Details ---
st.subheader("Model Building Details")
formatted_class_names = [food.replace("_", " ").title() for food in class_names]
st.write(f"The model was built using the **Food-101 dataset**.")
with st.expander("View All 101 Food Classes"):
    st.write(f"The dataset consists of 101 classes of food: {', '.join(formatted_class_names)}")
st.info("When predicting, please provide an image belonging to one of these 101 classes. The model has not been trained on other types of food or objects.")
st.divider()

# --- Model Performance ---
st.subheader("Model Performance Insights")
st.write("""
After training, some food classes are predicted more accurately than others.
This can be due to factors like the number of training images available for each class, visual similarity between classes, and image quality.
We use the **F1-score** to evaluate performance per class, as it balances precision and recall.
""")

with st.expander("What is the F1-Score?"):
    st.write("""
    The **F1-score** is a metric used to evaluate a model's accuracy on classification tasks, especially when dealing with imbalanced datasets (where some classes have many more samples than others). It's the harmonic mean of **Precision** and **Recall**.

    * **Precision:** Out of all the times the model predicted a specific class (e.g., "Pizza"), what proportion were actually correct?
        $$ \text{Precision} = \\frac{\\text{True Positives}}{\\text{True Positives} + \\text{False Positives}} $$
    * **Recall (Sensitivity):** Out of all the actual instances of a specific class (e.g., all the real Pizza images), what proportion did the model correctly identify?
        $$ \text{Recall} = \\frac{\\text{True Positives}}{\\text{True Positives} + \\text{False Negatives}} $$

    The F1-score combines these two:
    """)
    st.latex(r"F_1 = 2 \times \frac{\text{Precision} \times \text{Recall}}{\text{Precision} + \text{Recall}}")
    st.write("An F1-score ranges from 0 (worst) to 1 (best - perfect precision and recall).")

# --- Top/Last 10 Charts ---
st.subheader("Top and Least Performing Classes (by F1-Score)")
with st.container():
    top_ten_df = pd.DataFrame(top_ten_dict).sort_values("f1-score", ascending=False)
    last_ten_df = pd.DataFrame(last_ten_dict).sort_values("f1-score", ascending=True) # Already sorted ascendingly in dict creation usually

    # Format class names for display
    top_ten_df['class_name_display'] = top_ten_df['class_name'].str.replace('_', ' ').str.title()
    last_ten_df['class_name_display'] = last_ten_df['class_name'].str.replace('_', ' ').str.title()


    col1, col2 = st.columns(2)
    with col1:
        st.write("**Top 10 Classes**")
        st.bar_chart(top_ten_df.set_index('class_name_display')['f1-score'],
                     # horizontal=True, # Bar chart auto-detects horizontal best here
                     use_container_width=True)
    with col2:
        st.write("**Bottom 10 Classes**")
        st.bar_chart(last_ten_df.set_index('class_name_display')['f1-score'],
                     # horizontal=True,
                     use_container_width=True, color="#ff748c") # Red color for low scores
st.divider()


# --- Helper Functions ---
@st.cache_resource # Cache the loaded model
def load_model(filepath):
    """Loads a Tensorflow Keras Model."""
    st.write(f"Cache miss: Loading model from {filepath}") # Debug message
    try:
        model = tf.keras.models.load_model(filepath)
        # You might need a warm-up prediction for GPU memory allocation
        # For example: model.predict(tf.zeros([1, 224, 224, 3]))
        return model
    except Exception as e:
        st.error(f"Error loading model from {filepath}: {e}")
        return None

def load_prep_image(image_input: UploadedFile, img_shape=224):
    """Reads and preprocesses an image for EfficientNet prediction."""
    try:
        # Read image file buffer
        bytes_data = image_input.getvalue()
        # Decode image
        image_tensor = tf.io.decode_image(bytes_data, channels=3)
        # Resize image
        # Use tf.image.resize with method='nearest' or 'bilinear' (default)
        image_tensor_resized = tf.image.resize(image_tensor, [img_shape, img_shape])
        # Expand dimensions to create batch_size 1 -> (1, H, W, C)
        image_tensor_expanded = tf.expand_dims(image_tensor_resized, axis=0)
        # EfficientNet models usually have their own preprocessing layer/function
        # or expect inputs scaled 0-255. Check the specific model's requirement.
        # If it expects 0-1 scaling and doesn't do it internally:
        # image_tensor_scaled = image_tensor_expanded / 255.0
        # return image_tensor_scaled
        # Assuming EfficientNet B0 handles scaling or expects 0-255:
        return image_tensor_expanded
    except Exception as e:
        st.error(f"Error processing image: {e}")
        return None

def predict_using_model(image_input: UploadedFile, model_path: str) -> tuple[str | None, float | None]:
    """Predicts the class name and probability for an image."""
    if image_input is None:
        st.warning("No image provided for prediction.")
        return None, None

    processed_image = load_prep_image(image_input)
    if processed_image is None:
        return None, None

    model = load_model(model_path)
    if model is None:
        return None, None

    try:
        with st.spinner("🤖 Model is predicting..."):
            pred_prob = model.predict(processed_image)
            predicted_index = tf.argmax(pred_prob, axis=1).numpy()[0] # Get index of highest probability
            predicted_class_name = class_names[predicted_index]
            predicted_probability = float(tf.reduce_max(pred_prob).numpy()) # Get the highest probability
        return predicted_class_name, predicted_probability
    except Exception as e:
        st.error(f"Prediction failed: {e}")
        return None, None

# --- Interactive Demo Section ---
st.divider()
st.header(f"Try the Models: :blue[{current_model}] & :blue[{new_model}]")
st.caption("_Model performance may vary. Models are periodically updated._")

# Initialize session state keys if they don't exist
if "prediction_result" not in st.session_state:
    st.session_state.prediction_result = None
if "predicted_image_bytes" not in st.session_state:
    st.session_state.predicted_image_bytes = None
if "predicted_prob" not in st.session_state:
    st.session_state.predicted_prob = None


# Use columns for layout
cols = st.columns([3, 0.5, 2, 0.5, 3], gap="medium") # Adjusted column ratios and gaps

# --- Column 1: Image Input ---
with cols[0]:
    st.markdown('<div class="centered">', unsafe_allow_html=True) # Apply centering
    st.subheader("1. Provide an Image")
    image_source = st.radio(
        "Choose image source:",
        ("Upload Image", "Use Camera"),
        key="image_source",
        horizontal=True,
        label_visibility="collapsed" # Hide the radio label itself
    )

    uploaded_image = None
    image_bytes_for_state = None

    if image_source == "Upload Image":
        uploaded_image = st.file_uploader(
            "Upload (.png, .jpg, .jpeg)",
            type=["png", "jpg", "jpeg"],
            accept_multiple_files=False,
            key="uploader",
            label_visibility="collapsed"
        )
    elif image_source == "Use Camera":
        uploaded_image = st.camera_input(
            "Take a picture",
            key="camera_input",
            label_visibility="collapsed"
        )

    # Display uploaded image preview
    if uploaded_image:
        image_bytes_for_state = uploaded_image.getvalue() # Store bytes for state
        st.image(image_bytes_for_state, caption="Your image", use_column_width='auto') # Auto width fits container
        st.success("Image ready!")
    else:
        st.info("Upload or take a picture.")

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

# --- Column 2: Arrow 1 ---
with cols[1]:
    st.markdown('<div class="centered" style="justify-content: center; min-height: 300px;">➡️</div>', unsafe_allow_html=True)

# --- Column 3: Model Selection & Prediction ---
with cols[2]:
    st.markdown('<div class="centered">', unsafe_allow_html=True) # Apply centering
    st.subheader("2. Select Model")

    chosen_model = st.radio(
        "Pick a Model:",
        (current_model, new_model),
        key="model_choice",
        horizontal=True,
        label_visibility="collapsed"
    )

    model_path_to_use = ""
    model_image_path = ""

    if chosen_model == current_model: # Model Mini
        model_image_path = "brain.png" # Make sure this file exists
        model_path_to_use = "model_mini_Food101.keras" # Make sure this path is correct
    elif chosen_model == new_model: # Food Vision
        model_image_path = "content/creativity_15557951.png" # Make sure this file exists
        model_path_to_use = "FoodVision.keras" # Make sure this path is correct

    # Display model icon/image if path is valid
    try:
        if model_image_path:
            st.image(model_image_path, width=150) # Control model image size
    except Exception as e:
        st.warning(f"Could not load model image: {model_image_path}")

    # Prediction Button
    predict_button = st.button(
        label="Predict Food!",
        icon="⚛️",
        type="primary",
        use_container_width=True, # Make button fill column width
        disabled=not uploaded_image or not model_path_to_use # Disable if no image or path
    )

    if predict_button:
        if uploaded_image and model_path_to_use:
            # Perform prediction
            result_class, result_prob = predict_using_model(uploaded_image, model_path=model_path_to_use)
            # Store results in session state
            st.session_state.prediction_result = result_class
            st.session_state.predicted_prob = result_prob
            st.session_state.predicted_image_bytes = image_bytes_for_state # Store the bytes of the image used
        else:
            st.warning("Please provide an image and select a valid model.")

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

# --- Column 4: Arrow 2 ---
with cols[3]:
    st.markdown('<div class="centered" style="justify-content: center; min-height: 300px;">➡️</div>', unsafe_allow_html=True)

# --- Column 5: Output ---
with cols[4]:
    st.markdown('<div class="centered">', unsafe_allow_html=True) # Apply centering
    st.subheader("3. Prediction Result")

    # Display result from session state
    if st.session_state.prediction_result and st.session_state.predicted_image_bytes:
        # Display the image associated with the prediction
        st.image(st.session_state.predicted_image_bytes, caption="Image Analyzed", use_column_width='auto')

        result_class = st.session_state.prediction_result
        probability = st.session_state.predicted_prob

        # Format class name nicely
        if "_" in result_class:
            modified_class = result_class.replace("_", " ").title()
        else:
            modified_class = result_class.title()

        st.success(f"Prediction: **:blue[{modified_class}]**")
        if probability:
             st.write(f"Confidence: {probability:.2%}") # Display confidence

    elif predict_button:
         # If button was clicked but prediction failed or had no result
         st.error("Prediction could not be completed. Check logs or try again.")
    else:
        st.info("Result will appear here after prediction.")

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

# --- Footer or Final Divider ---
st.divider()