Update app.py

app.py

@@ -44,37 +44,37 @@ current_model = "Model Mini"
 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',
-               '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']
+                '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",
                    "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]
+                  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]
+                  0.340426, 0.340045, 0.339785, 0.324826, 0.282407]
 }
 
 # 🔹 Custom CSS for Alignment and Spacing
@@ -86,7 +86,7 @@ st.markdown(
             display: flex;
             flex-direction: column;
             align-items: center; /* Keep horizontal centering */
-            justify-content: flex-start; /* Align content to the top */
+            justify-content: flex-start; /* Align content to the top by default */
             text-align: center;
             width: 100%;
             min-height: 100px; /* Reduced minimum height */
@@ -97,9 +97,9 @@ st.markdown(
 
         /* 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 */
+            margin-top: 0px !important;
+            padding-top: 0px !important;
+            margin-bottom: 15px !important; /* Add space below subheader */
         }
 
         /* Style file uploader (ensure consistent padding) */
@@ -112,7 +112,7 @@ st.markdown(
              margin-bottom: 10px; /* Space below uploader */
         }
         div[data-testid="stCameraInput"] label { /* Style the camera input label */
-            margin-bottom: 10px; /* Space below camera input */
+             margin-bottom: 10px; /* Space below camera input */
         }
 
 
@@ -130,46 +130,63 @@ st.markdown(
             margin-bottom: 10px; /* Reduced space below image */
         }
 
-         /* Align the TOPS of the columns */
-         div[data-testid="stVerticalBlock"] div[data-testid="stHorizontalBlock"] {
-             align-items: flex-start !important; /* Align column tops */
-         }
+        /* Align the TOPS of the columns (This might be overridden by .centered justify-content) */
+        div[data-testid="stVerticalBlock"] div[data-testid="stHorizontalBlock"] {
+            align-items: flex-start !important; /* Align column tops */
+        }
 
-         /* Style the radio buttons */
-         div[data-testid="stRadio"] > label {
-             font-weight: bold;
-             margin-bottom: 5px !important; /* Reduced margin */
-             padding-top: 0 !important;
-         }
-         div[data-testid="stRadio"] > div {
-             display: flex;
-             justify-content: center;
-             gap: 10px; /* Reduced gap */
-             margin-bottom: 10px; /* Add space below radio group */
-         }
+        /* Style the radio buttons */
+        div[data-testid="stRadio"] > label {
+            font-weight: bold;
+            margin-bottom: 5px !important; /* Reduced margin */
+            padding-top: 0 !important;
+        }
+        div[data-testid="stRadio"] > div {
+            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%;
-             margin-top: 15px; /* Reduced margin */
-         }
+        /* Style the button */
+        div[data-testid="stButton"] > 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 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"]) {
+        /* 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"] {
+         /* 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 */
           }
 
+        /* --- NEW CSS for Larger Centered Arrows --- */
+        .arrow-indicator {
+            font-size: 3em; /* Make the arrow much bigger */
+            display: block; /* Ensure it takes up its own line */
+            text-align: center; /* Center the arrow horizontally within its container */
+            line-height: 1; /* Adjust line height if needed */
+            margin: auto; /* Center the block element itself if needed */
+        }
+
+        /* Explicitly center the content vertically for the arrow columns */
+        /* Using :has() is modern CSS, may need alternative for older browsers */
+        .centered:has(.arrow-indicator) {
+             justify-content: center !important; /* Explicitly center content vertically */
+             padding-top: 0 !important; /* Remove any unwanted top padding */
+             min-height: 150px; /* Ensure enough height for centering relative to image */
+        }
+
 
     </style>
     """,
@@ -213,12 +230,12 @@ NUM_CLASSES = 101 # Example number of food classes
 # --- 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
+    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 ---
@@ -311,7 +328,7 @@ base_model.trainable = True
 # fine_tune_at = 100 # Example: Unfreeze layers from index 100 onwards
 
 # for layer in base_model.layers[:fine_tune_at]:
-#    layer.trainable = False
+#     layer.trainable = False
 
 # --- Re-compile the Model with a Lower Learning Rate ---
 # Lowering the learning rate is crucial for fine-tuning to avoid
@@ -496,8 +513,10 @@ with cols[0]:
 
 # --- Column 2: Arrow 1 ---
 with cols[1]:
-    # 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)
+    # Use inline style to center content vertically
+    st.markdown('<div class="centered" style="justify-content: center;">', unsafe_allow_html=True)
+    st.markdown('<span class="arrow-indicator">➡️</span>', unsafe_allow_html=True) # Apply arrow-indicator class
+    st.markdown('</div>', unsafe_allow_html=True)
 
 
 # --- Column 3: Model Selection & Prediction ---
@@ -517,7 +536,7 @@ with cols[2]:
     model_image_path = ""
 
     if chosen_model == current_model:
-        model_image_path = "brain.png"
+        model_image_path = "content/brain.png"
         model_path_to_use = "model_mini_Food101.keras"
     elif chosen_model == new_model:
         model_image_path = "content/creativity_15557951.png"
@@ -552,8 +571,10 @@ with cols[2]:
 
 # --- Column 4: Arrow 2 ---
 with cols[3]:
-     # Adjusted padding-top
-    st.markdown('<div class="centered" style="justify-content: flex-start; padding-top: 50px;">➡️</div>', unsafe_allow_html=True)
+     # Use inline style to center content vertically
+    st.markdown('<div class="centered" style="justify-content: center;">', unsafe_allow_html=True)
+    st.markdown('<span class="arrow-indicator">➡️</span>', unsafe_allow_html=True) # Apply arrow-indicator class
+    st.markdown('</div>', unsafe_allow_html=True)
 
 
 # --- Column 5: Output ---
@@ -577,7 +598,7 @@ with cols[4]:
              st.write(f"Confidence: {probability:.1%}") # Slightly less verbose confidence
 
     elif predict_button:
-         st.error("Prediction failed or image invalid.")
+           st.error("Prediction failed or image invalid.")
     else:
         st.info("Result will appear here.")
 
@@ -585,4 +606,4 @@ with cols[4]:
 
 
 # --- Footer or Final Divider ---
-# st.divider() # Optional: remove if you want less space at the bottom
+st.divider() # Optional: remove if you want less space at the bottom