Update app.py

app.py

@@ -3,14 +3,46 @@ 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
+from PIL import Image
 
 # 🔹 Expand the Page Layout
-st.set_page_config(layout="wide")  # Use Streamlit's built-in wide layout
+st.set_page_config(layout="wide")
+
+# 2. Inject CSS to override the default max-width and set it to 90%
+st.markdown(
+    """
+    <style>
+        /* Target the main block container */
+        .block-container {
+            /* Set the max-width to 90% of the viewport */
+            max-width: 90% !important;
+
+            /* Optional: Adjust padding if needed */
+            /* padding-left: 2rem !important; */
+            /* padding-right: 2rem !important; */
+            /* padding-top: 1rem !important; */ /* Adjust top padding */
+            /* padding-bottom: 1rem !important; */
+
+            /* Ensure it remains centered */
+            margin: auto !important;
+        }
+
+        /* You might need to target a more specific element depending on the Streamlit version */
+        /* If the above doesn't work, try inspecting the element in your browser */
+        /* and use a selector like: */
+        /* div[data-testid="stAppViewContainer"] > section > div[data-testid="stBlock"] { */
+        /* max-width: 90% !important; */
+        /* } */
+
+    </style>
+    """,
+    unsafe_allow_html=True
+)
 
 # --- Constants and Data ---
 current_model = "Model Mini"
-new_model = "Food Vision" # Define the second model name
+new_model = "Food Vision"
+# ... (class_names, top_ten_dict, last_ten_dict remain the same) ...
 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',
@@ -33,7 +65,7 @@ class_names = ['apple_pie', 'baby_back_ribs', 'baklava', 'beef_carpaccio', 'beef
                'sushi', 'tacos', 'takoyaki', 'tiramisu', 'tuna_tartare', 'waffles']
 
 top_ten_dict = {
-    "class_name": ["edamame", "macarons", "oysters", "pho", "mussels", # Corrected 'mussles' -> 'mussels'
+    "class_name": ["edamame", "macarons", "oysters", "pho", "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]
@@ -45,72 +77,100 @@ last_ten_dict = {
                  0.340426, 0.340045, 0.339785, 0.324826, 0.282407]
 }
 
-# 🔹 Custom CSS for Centered Content within elements and layout stability
+# 🔹 Custom CSS for Alignment and Spacing
 st.markdown(
     """
     <style>
-        /* Center content vertically and horizontally using flexbox */
+        /* Center content H, align V top, reduce padding/min-height */
         .centered {
             display: flex;
             flex-direction: column;
-            align-items: center;
-            justify-content: center; /* Can adjust to flex-start if needed */
+            align-items: center; /* Keep horizontal centering */
+            justify-content: flex-start; /* Align content to the top */
             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;
+            width: 100%;
+            min-height: 100px; /* Reduced minimum height */
+            padding-top: 5px; /* Reduced padding */
+            padding-bottom: 10px;
+            height: 100%; /* Allow div to take full column height if needed */
         }
 
-        /* Style file uploader for better centering if needed */
-        /* Streamlit structure might change, this targets common patterns */
+        /* Ensure subheaders within columns have less top margin */
+        .centered h3 { /* Targets the subheaders like "1. Provide Image" */
+           margin-top: 0px !important;
+           padding-top: 0px !important;
+           margin-bottom: 15px !important; /* Add space below subheader */
+        }
+
+        /* Style file uploader (ensure consistent padding) */
         div[data-testid="stFileUploader"] > section {
-             padding: 0; /* Reduce default padding if it pushes content */
+            padding: 0;
+            display: flex; /* Use flex for centering button inside */
+            justify-content: center;
         }
-        div[data-testid="stFileUploader"] > section > input {
-             /* Hide default input if necessary */
+        div[data-testid="stFileUploader"] label { /* Style the button-like label */
+             margin-bottom: 10px; /* Space below uploader */
+        }
+        div[data-testid="stCameraInput"] label { /* Style the camera input label */
+            margin-bottom: 10px; /* Space below camera input */
         }
-         div[data-testid="stFileUploader"] label {
-             /* Style the label if needed */
-         }
 
 
         /* Center images and standardize size */
-        .centered img { /* Target images specifically within centered divs */
+        .centered img {
             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 */
+            max-width: 200px;
+            max-height: 200px;
+            width: auto;
+            height: auto;
+            object-fit: contain;
             border-radius: 20px;
-            margin-bottom: 15px; /* Add space below image */
+            margin-bottom: 10px; /* Reduced space below image */
         }
 
-         /* Ensure columns try to vertically align content */
+         /* Align the TOPS of the columns */
          div[data-testid="stVerticalBlock"] div[data-testid="stHorizontalBlock"] {
-             align-items: center;
+             align-items: flex-start !important; /* Align column tops */
          }
 
          /* Style the radio buttons */
          div[data-testid="stRadio"] > label {
-             font-weight: bold; /* Make label bold */
-             margin-bottom: 10px;
+             font-weight: bold;
+             margin-bottom: 5px !important; /* Reduced margin */
+             padding-top: 0 !important;
          }
          div[data-testid="stRadio"] > div {
-            display: flex;
-            justify-content: center; /* Center radio options */
-            gap: 15px; /* Add space between radio buttons */
+             display: flex;
+             justify-content: center;
+             gap: 10px; /* Reduced gap */
+             margin-bottom: 10px; /* Add space below radio group */
          }
 
          /* Style the button */
          div[data-testid="stButton"] > button {
-             width: 80%; /* Make button wider */
-             margin-top: 20px; /* Add space above button */
+             width: 80%;
+             margin-top: 15px; /* Reduced margin */
+         }
+
+         /* Reduce space BELOW the caption ABOVE the columns */
+         div[data-testid="stCaptionContainer"] {
+              padding-bottom: 0px !important;
+              margin-bottom: -10px !important; /* Negative margin pulls following elements up */
          }
 
+         /* Reduce space ABOVE the main H2 header for the demo section */
+          h2[data-testid="stHeading"]:has(+ div[data-testid="stCaptionContainer"]) {
+             margin-bottom: 5px !important; /* Space between header and caption */
+          }
+
+          /* Reduce space below the final divider before the demo H2 header */
+          hr[data-testid="stDivider"] + h2[data-testid="stHeading"] {
+              margin-top: -15px !important; /* Pull header closer to divider */
+          }
+
+
     </style>
     """,
     unsafe_allow_html=True
@@ -122,6 +182,7 @@ st.header("A food vision app using a CNN model fine-tuned on EfficientNet.")
 st.divider()
 
 # --- Explanations (Collapsible) ---
+# ... (Keep the expanders as they were) ...
 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.
@@ -310,36 +371,27 @@ with st.expander("What is the F1-Score?"):
 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
+    last_ten_df = 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)
     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)
+        st.bar_chart(top_ten_df.set_index('class_name_display')['f1-score'], 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()
-
+        st.bar_chart(last_ten_df.set_index('class_name_display')['f1-score'], use_container_width=True, color="#ff748c")
+st.divider() # Divider before the interactive section
 
 # --- Helper Functions ---
-@st.cache_resource # Cache the loaded model
+@st.cache_resource
 def load_model(filepath):
     """Loads a Tensorflow Keras Model."""
-    st.write(f"Cache miss: Loading model from {filepath}") # Debug message
+    st.write(f"Cache miss: Loading model from {filepath}")
     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}")
@@ -348,21 +400,10 @@ def load_model(filepath):
 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}")
@@ -385,19 +426,20 @@ def predict_using_model(image_input: UploadedFile, model_path: str) -> tuple[str
     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_index = tf.argmax(pred_prob, axis=1).numpy()[0]
             predicted_class_name = class_names[predicted_index]
-            predicted_probability = float(tf.reduce_max(pred_prob).numpy()) # Get the highest probability
+            predicted_probability = float(tf.reduce_max(pred_prob).numpy())
         return predicted_class_name, predicted_probability
     except Exception as e:
         st.error(f"Prediction failed: {e}")
         return None, None
 
 # --- Interactive Demo Section ---
-st.divider()
+# Header and Caption for the interactive section
 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
@@ -408,18 +450,19 @@ if "predicted_prob" not in st.session_state:
 
 
 # Use columns for layout
-cols = st.columns([3, 0.5, 2, 0.5, 3], gap="medium") # Adjusted column ratios and gaps
+cols = st.columns([3, 0.5, 2, 0.5, 3], gap="medium") # Keep original column ratios
+
 
 # --- Column 1: Image Input ---
 with cols[0]:
     st.markdown('<div class="centered">', unsafe_allow_html=True) # Apply centering
-    st.subheader("1. Provide an Image")
+    st.subheader("1. Provide an Image") # H3 targeted by CSS
     image_source = st.radio(
         "Choose image source:",
         ("Upload Image", "Use Camera"),
         key="image_source",
         horizontal=True,
-        label_visibility="collapsed" # Hide the radio label itself
+        label_visibility="collapsed"
     )
 
     uploaded_image = None
@@ -442,22 +485,25 @@ with cols[0]:
 
     # 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!")
+        image_bytes_for_state = uploaded_image.getvalue()
+        st.image(image_bytes_for_state, caption="Your image", use_column_width='auto')
+        # Removed success message to save space
     else:
         st.info("Upload or take a picture.")
 
-    st.markdown('</div>', unsafe_allow_html=True) # Close centered div
+    st.markdown('</div>', unsafe_allow_html=True)
+
 
 # --- Column 2: Arrow 1 ---
 with cols[1]:
-    st.markdown('<div class="centered" style="justify-content: center; min-height: 300px;">➡️</div>', unsafe_allow_html=True)
+    # Adjusted padding-top to roughly align arrow with top content
+    st.markdown('<div class="centered" style="justify-content: flex-start; padding-top: 50px;">➡️</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")
+    st.markdown('<div class="centered">', unsafe_allow_html=True)
+    st.subheader("2. Select Model") # H3 targeted by CSS
 
     chosen_model = st.radio(
         "Pick a Model:",
@@ -470,17 +516,16 @@ with cols[2]:
     model_path_to_use = ""
     model_image_path = ""
 
-    if chosen_model == current_model: # Model Mini
-        model_image_path = "content/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
+    if chosen_model == current_model:
+        model_image_path = "brain.png"
+        model_path_to_use = "model_mini_Food101.keras"
+    elif chosen_model == new_model:
+        model_image_path = "content/creativity_15557951.png"
+        model_path_to_use = "FoodVision.keras"
 
-    # Display model icon/image if path is valid
     try:
         if model_image_path:
-            st.image(model_image_path, width=150) # Control model image size
+            st.image(model_image_path, width=150) # Keep model image
     except Exception as e:
         st.warning(f"Could not load model image: {model_image_path}")
 
@@ -489,41 +534,39 @@ with cols[2]:
         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
+        use_container_width=True,
+        disabled=not uploaded_image or not model_path_to_use
     )
 
     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
+            st.session_state.predicted_image_bytes = image_bytes_for_state
         else:
             st.warning("Please provide an image and select a valid model.")
 
-    st.markdown('</div>', unsafe_allow_html=True) # Close centered div
+    st.markdown('</div>', unsafe_allow_html=True)
+
 
 # --- Column 4: Arrow 2 ---
 with cols[3]:
-    st.markdown('<div class="centered" style="justify-content: center; min-height: 300px;">➡️</div>', unsafe_allow_html=True)
+     # Adjusted padding-top
+    st.markdown('<div class="centered" style="justify-content: flex-start; padding-top: 50px;">➡️</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")
+    st.markdown('<div class="centered">', unsafe_allow_html=True)
+    st.subheader("3. Prediction Result") # H3 targeted by CSS
 
-    # 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:
@@ -531,15 +574,15 @@ with cols[4]:
 
         st.success(f"Prediction: **:blue[{modified_class}]**")
         if probability:
-             st.write(f"Confidence: {probability:.2%}") # Display confidence
+             st.write(f"Confidence: {probability:.1%}") # Slightly less verbose 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.")
+         st.error("Prediction failed or image invalid.")
     else:
-        st.info("Result will appear here after prediction.")
+        st.info("Result will appear here.")
+
+    st.markdown('</div>', unsafe_allow_html=True)
 
-    st.markdown('</div>', unsafe_allow_html=True) # Close centered div
 
 # --- Footer or Final Divider ---
-st.divider()
+# st.divider() # Optional: remove if you want less space at the bottom