Update app.py

app.py

@@ -194,7 +194,7 @@ body, .gradio-container { background-color: #f0f2f5; }
 }
 .trend-box:hover { background: #f0f2f5; cursor: pointer; }
 
-/* FIX: Force Gap in the Upload Row */
+/* Gap Fix */
 .gap-fix {
     gap: 25px !important; 
 }
@@ -215,7 +215,7 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
                     <span class="app-slogan">Turning Handwritten Notes into a Digital Cookbook.</span>
                 </div>
             </div>
-            <div style="color: #65676b; font-weight: 600;">v3.1</div>
+            <div style="color: #65676b; font-weight: 600;">v3.2</div>
         </div>
     """)
 
@@ -238,18 +238,30 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
         # --- CENTER CONTENT ---
         with gr.Column(scale=3):
             
-            # === VIEW 1: AI DIGITALIZER (Default) ===
+            # === VIEW 1: AI DIGITALIZER ===
             with gr.Group(visible=True) as digitalizer_view:
                 
-                # SECTION 1: UPLOAD & TEXT (Side by Side)
-                # FIX 2: Added 'gap-fix' class to ensure space > 7px (set to 25px in CSS)
+                # SECTION 1: UPLOAD & TEXT
                 with gr.Row(elem_classes=["gap-fix"]):
-                    # Left: Upload
+                    # Left: Upload & Examples
                     with gr.Column(scale=1):
                         gr.Markdown("### 1. Upload Note", elem_classes=["content-card"])
                         with gr.Group(elem_classes=["content-card"]):
                             input_img = gr.Image(type="filepath", label="Upload", height=300)
                             magic_btn = gr.Button("✨ Convert to Digital", variant="primary", size="lg")
+                            
+                            # NEW: Examples Component
+                            gr.Examples(
+                                examples=[
+                                    ["quick_tries_images/applecrisp.jpg"],
+                                    ["quick_tries_images/meatballs recipe.jpg"],
+                                    ["quick_tries_images/tofu.jfif"]
+                                ],
+                                inputs=input_img,
+                                label="Or try these examples:",
+                                # cache_examples=False ensures fast startup and no build errors
+                                cache_examples=False
+                            )
                     
                     # Right: Text
                     with gr.Column(scale=1):
@@ -257,14 +269,13 @@ with gr.Blocks(title="Legacy Kitchen") as demo:
                         with gr.Group(elem_classes=["content-card"]):
                             out_text = gr.Textbox(label="Result", lines=12, interactive=False, show_label=False)
 
-                # FIX 1: Added 30px Spacer (using 35px to be safe)
+                # Spacer
                 gr.HTML("<div style='height: 35px;'></div>")
 
                 # SECTION 2: SIMILAR RECIPES
                 gr.Markdown("### 3. Similar Recipes from Database")
                 with gr.Row():
                     with gr.Column(elem_classes=["sim-card"]):
-                        # FIX 3: Default Text when no image uploaded
                         sim1 = gr.Markdown("Once you will upload your scanned recipe, we will share similar recipes!")
                     with gr.Column(elem_classes=["sim-card"]):
                         sim2 = gr.Markdown("")