Update app.py

app.py

@@ -1,522 +1,545 @@
+# -*- 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")  # Forces full-width mode
+st.set_page_config(layout="wide")  # Use Streamlit's built-in wide layout
 
+# --- Constants and Data ---
 current_model = "Model Mini"
-
-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']
+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",
-                   "mussles", "sashimi", "seaweed_salad", "dumplings", "guacamole", "onion_rings"],
+    "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]
+    "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 Full Width & Centered Content
+# 🔹 Custom CSS for Centered Content within elements and layout stability
 st.markdown(
     """
     <style>
-        /* Make the main container wider */
-        .main-container {
-            max-width: 95% !important;
-            margin: auto;
-        }
-
-        /* Center all content inside containers */
+        /* Center content vertically and horizontally using flexbox */
         .centered {
             display: flex;
             flex-direction: column;
             align-items: center;
-            justify-content: center;
+            justify-content: center; /* Can adjust to flex-start if needed */
             text-align: center;
-            width: 100%;
+            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;
         }
 
-        .centeredh {
-            display: flex;
-            width: 80%;
+        /* 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 */
         }
-
-        /* Ensure file uploader is not constrained */
-        div[data-testid="stFileUploader"] {
-            width: 70% !important;
+        div[data-testid="stFileUploader"] > section > input {
+             /* Hide default input if necessary */
         }
+         div[data-testid="stFileUploader"] label {
+             /* Style the label if needed */
+         }
+
 
-        /* Center images */
-        img {
+        /* Center images and standardize size */
+        .centered img { /* Target images specifically within centered divs */
             display: block;
             margin-left: auto;
             margin-right: auto;
-            width: 200px;
-            height: 200px;
+            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
 )
 
-st.title("Food vision demo App 🍔🧠")
-st.header(
-    "A food vision app, using a Machine Learning Model(CNN), fine tuned on EfficientNet.")
-
+# --- 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()
-st.subheader("What is a CNN(Convolutional Neural Network)")
-st.write("A Neural network is network of nodes, consiting of input nodes, output nodes and hidden nodes.\
-    Each node lies in its respective layer, corresponding to its name. \
-         The input nodes reside in the input layer, the output nodes reside in the output layer and the hidden\
-            nodes reside in the hidden layer. The nodes pass information from the input layer to the output layer.\
-                The information consists of data(text, numbers, pictures, audio, videos) encoded as numbers\
-                    that the network uses to learn information. It does this through complex mathematical operations\
-                        and algorithms.")
-
-# Display image of Neural Network here in between dividers
-
-st.write("A Convolutional Neural Network in short is a version\
-     of a Neural Network that specializes on Images, video, basically anything visual.")
 
-st.divider()
-code = """import tensorflow as tf
+# --- 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
 
-# Enable mixed precision
-mixed_precision.set_global_policy("mixed_float16")
-
-image_shape = (224, 224, 3)
-
-# Load EfficientNet with mixed precision
-base_model = tf.keras.applications.EfficientNetB0(include_top=False)
-base_model.trainable = False
-
-inputs = tf.keras.layers.Input(shape=image_shape, name="input_layer")
-
-# Apply data augmentation
-x = data_augmentation(inputs)
-
-x = base_model(x, training=False)
-x = tf.keras.layers.GlobalAveragePooling2D(name="global_average_pooling_layer")(x)
-
-x = tf.keras.layers.Dense(len(train_data.class_names), name="dense_logits")(x)
-
-# Ensure output layer remains in FP32
-outputs = tf.keras.layers.Activation(activation="softmax", dtype=tf.float32, name="predictions")(x)
-
-model = tf.keras.Model(inputs, outputs)
-
-# Use a LossScaleOptimizer to prevent numerical issues
-optimizer = mixed_precision.LossScaleOptimizer(tf.keras.optimizers.Adam())
-
-model.compile(loss=tf.keras.losses.CategoricalCrossentropy(),
+# --- 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"])
 
-# Train the model
-history = model.fit(train_data, epochs=5, validation_data=test_data,
-                    validation_steps=int(0.15 * len(test_data)),
-                    callbacks=[create_tensorboard_callback("model_mini", "model"), checkpoint_callback])"""
-st.subheader("Sample Code for the CNN using TensorFlow Functional API using Transfer Learning (NOT FULL CODE)")
-st.code(code, language="python")
-st.divider()
-
-st.divider()
-
-st.subheader("What is Efficient Net")
-st.write("EfficientNet is a family of convolutional neural networks that are designed to be more efficient and accurate. \
-    It scales up the model's width, depth, and resolution in a balanced way, which helps to achieve better performance \
-    with fewer resources. In simple terms, EfficientNet can achieve high accuracy on image classification tasks while \
-    using less computational power and memory compared to other models.")
-
-st.divider()
-st.subheader("What is Fine Tuning")
-st.write("Fine-tuning is a process in machine learning where a pre-trained model is further trained on a new, but related, dataset. \
-    This helps the model to adapt to the new data and improve its performance on specific tasks. \
-    Essentially, it takes advantage of the knowledge the model has already gained and refines it for better accuracy.")
-
-st.divider()
-tune_code = """# Load feature extraction weights
-model.load_weights(checkpoint_path)
-
-# Unfreeze all layers in the base model
+# --- 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
 
-# Freeze all layers except the last 5
-for layer in base_model.layers[:-5]:
-    layer.trainable = False
+# --- 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
 
-# Use a LossScaleOptimizer to prevent numerical issues
-optimizer = mixed_precision.LossScaleOptimizer(tf.keras.optimizers.Adam())
+# for layer in base_model.layers[:fine_tune_at]:
+#    layer.trainable = False
 
-# Recompile the Model with Lower Learning Rate to reduce overfitting
-model.compile(loss=tf.keras.losses.CategoricalCrossentropy(),
-              optimizer=optimizer, metrics=["accuracy"]) # Learning rate lowered by 10x
+# --- 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
 
-model_tuned_history = model.fit(train_data, epochs=10, initial_epoch=history.epoch[-1],
-                                validation_data=test_data, validation_steps=int(0.15 * len(test_data)),
-                                callbacks=[create_tensorboard_callback("model_mini", "model_tuned")])"""
+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))
 
-st.subheader("Example of Fine Tuning Using TensorFlow (NOT FULL CODE)")
-st.code(tune_code, language="python")
-
-st.divider()
-st.subheader("Model Building Details")
-st.write(f'The Model was built using the :blue[Food101 kaggle dataset].\
- The Dataset consist of 101 classes of Food.\
-     Namely: {[food.replace("_", "").title() for food in class_names]}')
-
-st.divider()
-st.write("When predicting you have to pass an image of any of the 101 classes of food.\
-     The Model has not yet been trained outside the 101 classes of food yet.")
-
-st.divider()
-st.subheader("Top and Least Classes Performance.")
-st.write("After training, some classes evidently performed better than others.\
-     Below are the performance of the top classes and least classes based on the F1 score")
+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()
-st.subheader("F1-score")
-st.write("The F1 score is a measure of a test's accuracy, which considers both the precision and the recall of the test to compute the score. The F1 score is the harmonic mean of precision and recall, where an F1 score reaches its best value at 1 (perfect precision and recall) and worst at 0. \
-    Precision is the number of true positive results divided by the number of all positive results, including those not correctly identified (i.e., the proportion of positive identifications that were actually correct). \
-        Recall (or Sensitivity) is the number of true positive results divided by the number of positives that should have been identified (i.e., the proportion of actual positives that were correctly identified).")
 
-st.divider()
-st.subheader("The formula for F1-score is")
-st.latex(r"F_1 = \frac{2 \times \text{Precision} \times \text{Recall}}{\text{Precision} + \text{Recall}}")
+# --- 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()
 
-# Top 10 last 10 Bar charts
-st.subheader("Top and Least Classes")
+# --- 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():
-    st.markdown('<div class="centeredh">', unsafe_allow_html=True)  # START DIV BLOCK
+    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
 
-    top_ten = pd.DataFrame(top_ten_dict).sort_values("f1-score", ascending=False)
-    last_ten = pd.DataFrame(last_ten_dict).sort_values("f1-score", ascending=True)
+    # 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)
 
+    col1, col2 = st.columns(2)
     with col1:
-        st.write("Top 10 Classes.")
-        st.bar_chart(top_ten, x="class_name", y="f1-score",
-                     horizontal=True, use_container_width=True)
-
+        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("Last 10 classes")
-        st.bar_chart(last_ten, x="class_name", y="f1-score",
-                     horizontal=True, use_container_width=True, color="#ff748c")
-
-    st.markdown('</div>', unsafe_allow_html=True)  # CLOSE DIV BLOCK
-
-new_model = "Food Vision"
+        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()
-st.divider()
-st.header(f"Try out the Current Models, :blue[{current_model}] and :blue[{new_model}] your self.")
-st.caption("_The Model is periodically being improved. Model might change in the future_.")
 
 
+# --- Helper Functions ---
+@st.cache_resource # Cache the loaded model
 def load_model(filepath):
-    """
-    Loads a Tensorflow keras Model from a file path
-
-        Args:
-            filepath(str): File path to the Model.
-
-        Returns
-            A Tensorflow keras loaded Model.
-    """
-    with st.spinner("Loading Model..."):
-        try:
-            loaded_model = tf.keras.models.load_model(filepath)
-        except Exception as e:
-            st.error(f"Can't load Model: {e}")
-        else:
-            if loaded_model:
-                return loaded_model
-
-
-def load_prep_image(image: UploadedFile, img_shape=224, scale=True):
-    """
-        Reads in an image and preprocesses it for model prediction
-
-        Args:
-            image (UploadedFile): path to target image
-            img_shape (int): shape to resize image to. Default = 224
-            scale (bool): Condition to scale image. Default = True
-
-        Returns:
-            Image Tensor of shape (img_shape, img_shape, 3)
-    """
-    bytes_data = image.getvalue()
-    image_tensor = tf.io.decode_image(bytes_data, channels=3)
-    image_tensor = tf.image.resize(image_tensor, [img_shape, img_shape])
-    image_tensor = tf.expand_dims(image_tensor, axis=0)  # Expand dimension as needed by Model
-    if scale:
-        scaled_image_tensor = image_tensor / 255.  # If model does not have built in scaling
-        return scaled_image_tensor
+    """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:
-        return image_tensor
+        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
 
-def predict_using_model(image: UploadedFile, model_path: str) -> str:
-    """
-        This function uses the CNN Model to predict the class name of the uploaded
-        input image.
-
-        Args:
-            model_path(str): The path to the Model
-            image(UploadedFile Object): the uploaded image.
-        
-        Returns:
-            predicted_class_name(str): the name of the predicted class.
-    """
-    with st.spinner("Predicting using your image..."):
-        # Process the image
-        processed_image = load_prep_image(image, scale=False)  # EfficientNet has built in scaling
-        model = load_model(model_path)
-        pred_prob = model.predict(processed_image)
-        predicted_class = class_names[pred_prob.argmax()]  # Get the predicted class name
+# --- Column 4: Arrow 2 ---
+with cols[3]:
+    st.markdown('<div class="centered" style="justify-content: center; min-height: 300px;">➡️</div>', unsafe_allow_html=True)
 
-    return predicted_class
+# --- 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')
 
-def toggle_checkbox(option: str) -> None:
-    """Toggle upload checkboxes such that only one can be selected"""
-    if option == "upload":
-        st.session_state.upload = True
-        st.session_state.camera = False
-    elif option == "camera":
-        st.session_state.upload = False
-        st.session_state.camera = True
+        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()
 
-def toggle_model(option: str) -> None:
-    """Toggles model checkboxes such that only one can be selected"""
-    if option == "model_mini":
-        st.session_state.model_mini = True
-        st.session_state.food_vision = False
-    elif option == "food_vision":
-        st.session_state.model_mini = False
-        st.session_state.food_vision = True
+        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.")
 
-# 🔹 Apply the main container styling
-st.markdown('<div class="main-container">', unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True) # Close centered div
 
-# 🔹 Create a wider main container
-with st.container():
-    # Define columns inside the main container
-    cols = st.columns([3, 1, 2, 1, 2], gap="medium")
-    has_predicted = False
-    has_uploaded = False
-
-    # 🖼️ Image Input Container
-    with cols[0]:
-        with st.container():
-            st.markdown('<div class="centered">', unsafe_allow_html=True)  # START DIV BLOCK
-
-            with st.spinner("Uploading image..."):
-                try:
-                    upload = st.checkbox("Upload Image", key="upload",
-                                         on_change=toggle_checkbox, args=("upload",))
-                    camera = st.checkbox("Use your camera", key="camera",
-                                         on_change=toggle_checkbox, args=("camera",))
-                    if upload:
-                        uploaded_image = st.file_uploader(label="Upload an image (Max 200MB)",
-                                                          type=["png", "jpg", "jpeg"],
-                                                          accept_multiple_files=False, key="uploaded_image")
-
-                        has_uploaded = True  # To check if file_uploader widget has loaded
-
-                        if "uploaded_image" not in st.session_state:
-                            st.session_state["uploaded_image"] = uploaded_image
-
-                    elif camera:
-                        uploaded_image = st.camera_input("Take a Picture",
-                                                         disabled=not camera, key="uploaded_image")
-
-                        has_uploaded = True  # To check if camera_input widget has loaded
-
-                        if "uploaded_image" not in st.session_state:
-                            st.session_state["uploaded_image"] = uploaded_image
-
-                except Exception as e:
-                    st.error(f"Image Upload failed: {e}")
-                else:
-                    if has_uploaded:  # If file_uploader/camera_input widget has loaded
-                        if uploaded_image:  # If user has uploaded an image
-                            st.success("Image Uploaded.")
-                            st.image(st.session_state.uploaded_image,
-                                      caption="Your uploaded image", width=200)
-
-            st.markdown('</div>', unsafe_allow_html=True)  # CLOSE DIV BLOCK
-
-    # ➡️ Arrow 1 Container
-    with cols[1]:
-        with st.container():
-            st.markdown('<div class="centered">', unsafe_allow_html=True)
-            st.write("➡️")  # Example arrow to be changed to image
-            st.markdown('</div>', unsafe_allow_html=True)
-
-    # 🧠 Neural Network Image Container
-    with cols[2]:
-        with st.container():
-            st.markdown('<div class="centered">', unsafe_allow_html=True)
-
-            st.write("Pick a Model")
-            model_mini = st.checkbox("Model Mini", key="model_mini",
-                                      on_change=toggle_model, args=("model_mini",))
-            food_vision = st.checkbox("Food Vision", key="food_vision",
-                                       on_change=toggle_model, args=("food_vision",))
-
-            if model_mini:
-                st.image("brain.png")
-            elif food_vision:
-                st.image("content/creativity_15557951.png")  # To be changed
-
-            if has_uploaded:
-                status = st.button(label="Predict Using Image", icon="⚛️", type="primary")
-                if status and model_mini:
-                    result_class = predict_using_model(uploaded_image,
-                                                        model_path="model_mini_Food101.keras")
-                    has_predicted = True
-                elif status and food_vision:
-                    result_class = predict_using_model(uploaded_image, model_path="FoodVision.keras")
-                    has_predicted = True
-
-            st.markdown('</div>', unsafe_allow_html=True)
-
-    # ➡️ Arrow 2 Container
-    with cols[3]:
-        with st.container():
-            st.markdown('<div class="centered">', unsafe_allow_html=True)
-            st.write("➡️")  # Example arrow to be changed to image
-            st.markdown('</div>', unsafe_allow_html=True)
-
-    # 🏆 Output Container
-    with cols[4]:
-        with st.container():
-            st.markdown('<div class="centered">', unsafe_allow_html=True)
-            if has_predicted:
-                st.image(st.session_state.uploaded_image)
-                if "_" in result_class:
-                    modified_class = result_class.replace("_", "").title()
-                    st.write(f"This is an image of :blue[{modified_class}]")
-                else:
-                    st.write(f"This is an image of :blue[{result_class.title()}]")
-            else:
-                st.write("The Image and Prediction will appear here")
-            st.markdown('</div>', unsafe_allow_html=True)
-
-# Close the widened container
-st.markdown('</div>', unsafe_allow_html=True)
+# --- Footer or Final Divider ---
+st.divider()