Update app.py

app.py

@@ -1,68 +1,187 @@
 import gradio as gr
 from ultralytics import YOLO
 import PIL.Image
+import numpy as np
+from typing import List, Tuple
 
-# Load your model
+# Load the trained model
 model = YOLO('best.pt')
 
-def process_multiple_images(file_paths):
+def detect_ingredients(images: List) -> Tuple[List, str]:
     """
-    This function now accepts a LIST of file paths, 
-    loops through them, and combines the results.
+    Process multiple images and return detected ingredients.
+    
+    Args:
+        images: List of uploaded images (file paths)
+        
+    Returns:
+        Tuple of (processed_images, ingredient_list_text)
     """
-    if not file_paths:
-        return [], "No files uploaded."
-
-    gallery_images = []
-    all_detected_ingredients = set()
-
-    # Loop through every image uploaded
-    for image_path in file_paths:
-        # Run the model on this specific image
-        # Using conf=0.5 as a balanced starting point
-        results = model.predict(source=image_path, conf=0.5, iou=0.3, imgsz=640)
+    if not images or len(images) == 0:
+        return [], "**No images uploaded.**"
+    
+    processed_images = []
+    all_detected_items = set()
+    
+    # Process each uploaded image
+    for image_file in images:
+        if image_file is None:
+            continue
         
-        # 1. Process the Image (Draw boxes)
-        res_plotted = results[0].plot()
-        # Convert BGR (OpenCV) to RGB (Gradio/PIL)
-        res_rgb = res_plotted[..., ::-1]
-        pil_img = PIL.Image.fromarray(res_rgb)
+        # Get file path (Gradio File component returns file objects)
+        image_path = image_file.name if hasattr(image_file, 'name') else image_file
         
-        # Add to our list of images to display
-        gallery_images.append(pil_img)
+        # Run prediction with your local settings (conf=0.7)
+        results = model.predict(source=image_path, conf=0.7, iou=0.3, verbose=False)
         
-        # 2. Extract Ingredients
+        # Get the image with bounding boxes drawn
+        result_image = results[0].plot()
+        
+        # Extract detected ingredients from this image
         for box in results[0].boxes:
-            cls_id = int(box.cls)
-            name = model.names[cls_id]
-            all_detected_ingredients.add(name)
-
-    # Create a master list of unique ingredients found across ALL photos
-    master_list_text = ", ".join(all_detected_ingredients)
-    if not master_list_text:
-        master_list_text = "No ingredients detected."
+            class_id = int(box.cls)
+            class_name = model.names[class_id]
+            all_detected_items.add(class_name)
+        
+        # Convert numpy array to PIL Image for display
+        # YOLO returns BGR, convert to RGB
+        if len(result_image.shape) == 3:
+            result_image_rgb = result_image[..., ::-1]  # BGR to RGB
+            processed_images.append(PIL.Image.fromarray(result_image_rgb))
+        else:
+            processed_images.append(PIL.Image.fromarray(result_image))
+    
+    # Create formatted ingredient list
+    if all_detected_items:
+        ingredient_list = sorted(list(all_detected_items))
+        ingredient_list_text = "**Detected Ingredients:**\n\n"
+        ingredient_list_text += "\n".join([f"• {item.capitalize()}" for item in ingredient_list])
+        ingredient_list_text += f"\n\n**Total unique items:** {len(ingredient_list)}"
+    else:
+        ingredient_list_text = "**No ingredients detected.**\n\nTry adjusting the image quality or lighting."
+    
+    return processed_images, ingredient_list_text
 
-    return gallery_images, master_list_text
+# Custom CSS for a modern, clean interface
+custom_css = """
+    .gradio-container {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    .main-header {
+        text-align: center;
+        padding: 20px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 10px;
+        margin-bottom: 20px;
+    }
+    .description-box {
+        background: #f8f9fa;
+        padding: 15px;
+        border-radius: 8px;
+        border-left: 4px solid #667eea;
+        margin-bottom: 20px;
+        color: #000000 !important;
+    }
+    .description-box * {
+        color: #000000 !important;
+    }
+    .ingredient-list {
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        min-height: 200px;
+        color: #000000 !important;
+    }
+    .ingredient-list * {
+        color: #000000 !important;
+    }
+    .ingredient-list p, .ingredient-list strong {
+        color: #000000 !important;
+    }
+"""
 
-# Build the Interface
-demo = gr.Interface(
-    fn=process_multiple_images,
+# Create the Gradio interface
+with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
+    gr.Markdown(
+        """
+        # 🥗 Fridge Ingredient Scanner
+        
+        Upload photos of your fridge, pantry, or groceries to automatically detect ingredients!
+        """,
+        elem_classes=["main-header"]
+    )
+    
+    gr.Markdown(
+        """
+        <div class="description-box">
+        <strong>📸 How to use:</strong><br>
+        1. Click "Upload Images" or drag and drop multiple photos<br>
+        2. Wait for the AI to analyze your ingredients<br>
+        3. View all processed images with detection boxes and the complete ingredient list
+        </div>
+        """,
+        elem_classes=["description-box"]
+    )
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            image_input = gr.File(
+                file_count="multiple",
+                file_types=["image"],
+                label="📁 Upload Images",
+                height=200
+            )
+            
+            process_btn = gr.Button(
+                "🔍 Detect Ingredients",
+                variant="primary",
+                size="lg"
+            )
+            
+            gr.Markdown("---")
+            
+            ingredient_output = gr.Markdown(
+                label="📋 Detected Ingredients",
+                elem_classes=["ingredient-list"]
+            )
+        
+        with gr.Column(scale=2):
+            gallery_output = gr.Gallery(
+                label="🖼️ Processed Images with Detections",
+                show_label=True,
+                elem_id="gallery",
+                columns=2,
+                rows=2,
+                height="auto",
+                allow_preview=True,
+                preview=True
+            )
     
-    # INPUT CHANGE: Use gr.File allows selecting multiple files at once
-    inputs=gr.File(
-        file_count="multiple", 
-        file_types=["image"], 
-        label="Upload Multiple Photos (Fridge & Pantry)"
-    ),
+    # Process images when button is clicked
+    process_btn.click(
+        fn=detect_ingredients,
+        inputs=image_input,
+        outputs=[gallery_output, ingredient_output]
+    )
     
-    # OUTPUT CHANGE: Use gr.Gallery to show a carousel of images
-    outputs=[
-        gr.Gallery(label="Processed Images", columns=2), 
-        gr.Textbox(label="Master Ingredient List")
-    ],
+    # Also process when images are uploaded (auto-detect)
+    image_input.upload(
+        fn=detect_ingredients,
+        inputs=image_input,
+        outputs=[gallery_output, ingredient_output]
+    )
     
-    title="Bulk Ingredient Scanner",
-    description="Upload multiple photos at once. The AI will combine all ingredients into one list."
-)
+    gr.Markdown(
+        """
+        ---
+        <div style="text-align: center; color: #666; padding: 20px;">
+        <small>Powered by YOLOv11 | Upload multiple images to scan your entire fridge!</small>
+        </div>
+        """
+    )
 
-demo.launch()
+# Launch the app
+if __name__ == "__main__":
+    demo.launch()