Update app.py

app.py

@@ -4,7 +4,8 @@
 # IMPROVEMENTS:
 # -------------
 # ✅ Mobile-friendly single-column layout
-# ✅ Auto-prediction on image upload (no button needed)
+# ✅ Fixed mobile upload issues with session state
+# ✅ Persistent predictions across reruns
 # ✅ Simplified, responsive CSS
 # ✅ Better error handling
 # ✅ Loads model from Hugging Face Hub OR local file
@@ -20,6 +21,7 @@ from torchvision import transforms
 from PIL import Image
 import timm
 from pathlib import Path
+import hashlib
 
 # ============================================================
 # PAGE CONFIGURATION
@@ -29,9 +31,20 @@ st.set_page_config(
     page_title="🍕 FoodVision AI",
     page_icon="🍕",
     layout="centered",
-    initial_sidebar_state="collapsed"  # Better for mobile
+    initial_sidebar_state="collapsed"
 )
 
+# ============================================================
+# SESSION STATE INITIALIZATION
+# ============================================================
+
+if 'predictions' not in st.session_state:
+    st.session_state.predictions = None
+if 'processed_image' not in st.session_state:
+    st.session_state.processed_image = None
+if 'last_image_hash' not in st.session_state:
+    st.session_state.last_image_hash = None
+
 # ============================================================
 # MINIMAL CSS (Mobile-First)
 # ============================================================
@@ -93,8 +106,13 @@ st.markdown("""
         font-size: 0.95rem;
     }
     
-    /* Info boxes */
-    .stAlert {
+    /* Make file uploader more visible */
+    .stFileUploader {
+        margin-bottom: 1rem;
+    }
+    
+    /* Make camera input more visible */
+    .stCameraInput {
         margin-top: 1rem;
     }
 </style>
@@ -127,6 +145,14 @@ FOOD_CLASSES = [
     "sushi", "tacos", "takoyaki", "tiramisu", "tuna_tartare", "waffles"
 ]
 
+# ============================================================
+# HELPER FUNCTIONS
+# ============================================================
+
+def get_image_hash(image_bytes):
+    """Create a hash of image bytes to detect if it's a new image."""
+    return hashlib.md5(image_bytes).hexdigest()
+
 # ============================================================
 # MODEL LOADING
 # ============================================================
@@ -257,106 +283,142 @@ def main():
     uploaded_file = st.file_uploader(
         "Choose a food image",
         type=['jpg', 'jpeg', 'png', 'webp'],
-        label_visibility="collapsed"
+        key="file_uploader"
     )
     
     # Camera input (below uploader)
     st.markdown("**Or use your camera:**")
     camera_photo = st.camera_input(
         "Take a picture",
-        label_visibility="collapsed"
+        key="camera_input"
     )
     
     # Determine which image to use
     image_source = None
     source_name = ""
+    image_bytes = None
     
     if camera_photo is not None:
         image_source = camera_photo
         source_name = "camera"
+        image_bytes = camera_photo.getvalue()
     elif uploaded_file is not None:
         image_source = uploaded_file
         source_name = "upload"
+        image_bytes = uploaded_file.getvalue()
     
-    # Process image automatically (no button needed!)
-    if image_source is not None:
+    # Process image if we have one
+    if image_source is not None and image_bytes is not None:
         try:
-            # Load image
-            image = Image.open(image_source)
-            
-            # Show image preview
-            st.image(image, caption=f"Image from {source_name}", use_column_width=True)
-            
-            # Auto-predict with spinner
-            with st.spinner("🧠 Analyzing your food..."):
-                img_tensor = preprocess_image(image)
-                predictions = predict(model, img_tensor, device, top_k=3)
+            # Check if this is a new image
+            current_hash = get_image_hash(image_bytes)
             
-            st.markdown("---")
-            
-            # Display top prediction prominently
-            top_food, top_conf = predictions[0]
-            
-            st.markdown(f"""
-            <div class="prediction-card">
-                <h2>🏆 {top_food}</h2>
-                <h3>{top_conf:.1f}% Confidence</h3>
-            </div>
-            """, unsafe_allow_html=True)
+            # Only process if it's a new image
+            if current_hash != st.session_state.last_image_hash:
+                # Load image
+                image = Image.open(image_source)
+                
+                # Store image in session state
+                st.session_state.processed_image = image
+                st.session_state.last_image_hash = current_hash
+                
+                # Show loading indicator
+                with st.spinner("🧠 Analyzing your food..."):
+                    # Preprocess and predict
+                    img_tensor = preprocess_image(image)
+                    predictions = predict(model, img_tensor, device, top_k=3)
+                    
+                    # Store predictions in session state
+                    st.session_state.predictions = predictions
             
-            # Show all top-3 predictions
-            st.markdown("### 📊 Top 3 Predictions")
+            # Display results (from session state)
+            if st.session_state.processed_image is not None:
+                # Show image preview
+                st.image(
+                    st.session_state.processed_image, 
+                    caption=f"Image from {source_name}", 
+                    use_column_width=True
+                )
             
-            for i, (food, conf) in enumerate(predictions, 1):
-                emoji = "🥇" if i == 1 else "🥈" if i == 2 else "🥉"
+            if st.session_state.predictions is not None:
+                st.markdown("---")
+                
+                # Display top prediction prominently
+                top_food, top_conf = st.session_state.predictions[0]
                 
-                st.markdown(f"**{emoji} {food}**")
                 st.markdown(f"""
-                <div class="conf-bar">
-                    <div class="conf-fill" style="width: {conf}%">
-                        {conf:.1f}%
-                    </div>
+                <div class="prediction-card">
+                    <h2>🏆 {top_food}</h2>
+                    <h3>{top_conf:.1f}% Confidence</h3>
                 </div>
                 """, unsafe_allow_html=True)
-            
-            # Feedback based on confidence
-            st.markdown("---")
-            if top_conf > 90:
-                st.success("🎉 **Very confident!** The model is very sure about this prediction.")
-            elif top_conf > 70:
-                st.success("👍 **Good confidence!** This looks like a solid prediction.")
-            elif top_conf > 50:
-                st.warning("🤔 **Moderate confidence.** The food might be ambiguous or partially visible.")
-            else:
-                st.warning("😕 **Low confidence.** Try a clearer photo with better lighting.")
+                
+                # Show all top-3 predictions
+                st.markdown("### 📊 Top 3 Predictions")
+                
+                for i, (food, conf) in enumerate(st.session_state.predictions, 1):
+                    emoji = "🥇" if i == 1 else "🥈" if i == 2 else "🥉"
+                    
+                    st.markdown(f"**{emoji} {food}**")
+                    st.markdown(f"""
+                    <div class="conf-bar">
+                        <div class="conf-fill" style="width: {conf}%">
+                            {conf:.1f}%
+                        </div>
+                    </div>
+                    """, unsafe_allow_html=True)
+                
+                # Feedback based on confidence
+                st.markdown("---")
+                if top_conf > 90:
+                    st.success("🎉 **Very confident!** The model is very sure about this prediction.")
+                elif top_conf > 70:
+                    st.success("👍 **Good confidence!** This looks like a solid prediction.")
+                elif top_conf > 50:
+                    st.warning("🤔 **Moderate confidence.** The food might be ambiguous or partially visible.")
+                else:
+                    st.warning("😕 **Low confidence.** Try a clearer photo with better lighting.")
+                
+                # Add a clear button to reset
+                if st.button("🔄 Analyze Another Image", use_container_width=True):
+                    st.session_state.predictions = None
+                    st.session_state.processed_image = None
+                    st.session_state.last_image_hash = None
+                    st.rerun()
         
         except Exception as e:
             st.error(f"❌ Error: {str(e)}")
             st.info("Try a different image or check if the file is corrupted")
+            
+            # Reset state on error
+            st.session_state.predictions = None
+            st.session_state.processed_image = None
+            st.session_state.last_image_hash = None
     
     else:
-        # Instructions
-        st.info("👆 Upload a food image or take a photo to get started!")
-        
-        with st.expander("💡 Tips for Best Results"):
-            st.markdown("""
-            - Use clear, well-lit photos
-            - Make sure food is the main subject
-            - Avoid heavily filtered images
-            - Try different angles if confidence is low
-            - Works best with common dishes
-            """)
-        
-        with st.expander("🍽️ What can it recognize?"):
-            st.markdown("""
-            The model can identify **101 popular dishes** including:
-            - 🍕 Pizza, Pasta, Burgers
-            - 🍣 Sushi, Ramen, Pad Thai
-            - 🥗 Salads, Sandwiches
-            - 🍰 Desserts (cakes, ice cream, etc.)
-            - 🍳 Breakfast foods
-            - And many more!
-            """)
+        # Instructions (only show if no predictions)
+        if st.session_state.predictions is None:
+            st.info("👆 Upload a food image or take a photo to get started!")
+            
+            with st.expander("💡 Tips for Best Results"):
+                st.markdown("""
+                - Use clear, well-lit photos
+                - Make sure food is the main subject
+                - Avoid heavily filtered images
+                - Try different angles if confidence is low
+                - Works best with common dishes
+                """)
+            
+            with st.expander("🍽️ What can it recognize?"):
+                st.markdown("""
+                The model can identify **101 popular dishes** including:
+                - 🍕 Pizza, Pasta, Burgers
+                - 🍣 Sushi, Ramen, Pad Thai
+                - 🥗 Salads, Sandwiches
+                - 🍰 Desserts (cakes, ice cream, etc.)
+                - 🍳 Breakfast foods
+                - And many more!
+                """)
     
     # Footer
     st.markdown("---")