Update app.py

app.py

@@ -114,10 +114,11 @@ def format_recipe(json_data):
 def ui_update_pipeline(image_path):
     # SAFEGUARD: Check if image exists
     if image_path is None:
-        return "⚠️ Please upload an image first.", "", gr.update(visible=False), gr.update(visible=False), "", gr.update(visible=False), ""
+        # Return hidden updates if no image
+        return "⚠️ Please upload an image first.", "", gr.update(visible=False), "", gr.update(visible=False), "", gr.update(visible=False)
 
     if not hf_token: 
-        return "Error: HF_TOKEN missing", "", gr.update(), gr.update(), "", gr.update(), ""
+        return "Error: HF_TOKEN missing", "", gr.update(), "", gr.update(), "", gr.update()
     try:
         os.environ["HF_TOKEN"] = hf_token
         digitizer = RecipeDigitalizerPipeline()
@@ -128,10 +129,15 @@ def ui_update_pipeline(image_path):
         else:
             sim_list = ["No query generated.", "", ""]
         
-        # Returning updates for GROUPS, not Rows
-        return (readable, sim_list[0], gr.update(visible=True), gr.update(visible=True), sim_list[1], gr.update(visible=True), sim_list[2])
+        # Returning updates for COLUMNS (c1_col, c2_col, c3_col) which are valid output components
+        return (
+            readable, 
+            sim_list[0], gr.update(visible=True), 
+            sim_list[1], gr.update(visible=True), 
+            sim_list[2], gr.update(visible=True)
+        )
     except Exception as e:
-        return f"Error: {e}", "Error", gr.update(), gr.update(), "", gr.update(), ""
+        return f"Error: {e}", "Error", gr.update(), "Error", gr.update(), "Error", gr.update()
 
 # ==========================================
 # 4. UI THEME & CSS
@@ -419,32 +425,33 @@ with gr.Blocks(title="CookBook") as demo:
                     gr.Markdown("### 🔍 Similar Recipes")
                     
                     with gr.Row():
-                        # Recipe 1 - Wrapped in Group to be valid output
-                        with gr.Column(scale=1, min_width=200):
-                            with gr.Group(elem_classes=["fb-card"], visible=False) as c1_group:
+                        
+                        # Recipe 1 - Wrapped in COLUMN to be valid output
+                        with gr.Column(scale=1, min_width=200, visible=False) as c1_col:
+                            with gr.Group(elem_classes=["fb-card"]):
                                 sim1 = gr.HTML("Waiting for results...")
                                 with gr.Row(elem_classes=["post-actions"]):
                                     gr.Button("Save", elem_classes=["action-btn"], size="sm")
 
                         # Recipe 2
-                        with gr.Column(scale=1, min_width=200):
-                            with gr.Group(elem_classes=["fb-card"], visible=False) as c2_group:
+                        with gr.Column(scale=1, min_width=200, visible=False) as c2_col:
+                            with gr.Group(elem_classes=["fb-card"]):
                                 sim2 = gr.HTML("Waiting for results...")
                                 with gr.Row(elem_classes=["post-actions"]):
                                     gr.Button("Save", elem_classes=["action-btn"], size="sm")
 
                         # Recipe 3
-                        with gr.Column(scale=1, min_width=200):
-                            with gr.Group(elem_classes=["fb-card"], visible=False) as c3_group:
+                        with gr.Column(scale=1, min_width=200, visible=False) as c3_col:
+                            with gr.Group(elem_classes=["fb-card"]):
                                 sim3 = gr.HTML("Waiting for results...")
                                 with gr.Row(elem_classes=["post-actions"]):
                                     gr.Button("Save", elem_classes=["action-btn"], size="sm")
 
-                # Update the Click logic to output to GROUPS, not rows
+                # Updated Click Logic using COLUMNS as valid outputs
                 magic_btn.click(
                     ui_update_pipeline, 
                     input_img, 
-                    [out_text, sim1, c1_group, sim2, c2_group, sim3, c3_group]
+                    [out_text, sim1, c1_col, sim2, c2_col, sim3, c3_col]
                 )
 
             # --- VIEW 2: FEED ---
@@ -483,91 +490,4 @@ with gr.Blocks(title="CookBook") as demo:
                             with gr.Row(elem_classes=["post-actions"]):
                                 gr.Button("👍 Like", elem_classes=["action-btn"], size="sm")
                                 gr.Button("💬 Comment", elem_classes=["action-btn"], size="sm")
-                                gr.Button("↪ Share", elem_classes=["action-btn"], size="sm")
-                    
-                    gr.Button("Load More...", variant="secondary")
-                else:
-                    gr.Markdown("⚠️ Database is empty.")
-
-            # --- VIEW 3: SAVED ---
-            with gr.Column(visible=False) as saved_view:
-                gr.Markdown("### 🔖 Saved Items")
-                if not df_recipes.empty:
-                    saved_batch = df_recipes.head(20)
-                    for index, row in saved_batch.iterrows():
-                        with gr.Group(elem_classes=["fb-card"]):
-                            with gr.Row():
-                                gr.HTML("<div style='width:80px; height:80px; background:#eee; border-radius:8px;'></div>")
-                                with gr.Column():
-                                    gr.Markdown(f"**{row['Title']}**")
-                                    gr.HTML("<span style='color:#65676B; font-size:12px;'>Saved from News Feed</span>")
-                                    gr.Button("View Collection", size="sm", variant="secondary")
-
-            # --- VIEW 4: ABOUT ---
-            with gr.Group(visible=False) as about_view:
-                with gr.Group(elem_classes=["fb-card"]):
-                    gr.Markdown("# About CookBook")
-                    gr.Markdown("Developed by **Shahar Firshtman** and **Lior Feinstein**.")
-                    gr.HTML(f"""
-                    <div style="margin-top: 20px;">
-                        <img src="data:image/jpeg;base64,{process_b64}" style="width: 100%; border-radius: 8px;">
-                    </div>
-                    """)
-
-        # === RIGHT COLUMN (Contacts) ===
-        with gr.Column(elem_classes=["col-right"]):
-            gr.Markdown("### Sponsored")
-            with gr.Group(elem_classes=["fb-card"]):
-                gr.Markdown("**Culinary School**\nJoin 10,000+ students learning to cook today!")
-                gr.HTML(f"""
-                <img src="data:image/webp;base64,{sponsored_b64}" style="width:100%; height:auto; border-radius:8px; display:block; margin-top:10px;">
-                """)
-            
-            gr.HTML("<hr style='border:0; border-top:1px solid #ced0d4; margin: 10px 0;'>")
-            
-            gr.Markdown("### Contacts")
-            contacts = ["Elon Musk", "Gordon Ramsay", "Jamie Oliver", "Martha Stewart"]
-            for contact in contacts:
-                gr.HTML(f"""
-                <div class="contact-row">
-                    <div style="position:relative;">
-                        <img src="https://ui-avatars.com/api/?name={contact}&background=random" style="width:36px; height:36px; border-radius:50%;">
-                        <div style="position:absolute; bottom:0; right:0; width:10px; height:10px; background:#31a24c; border-radius:50%; border:2px solid white;"></div>
-                    </div>
-                    <div class="contact-name">{contact}</div>
-                </div>
-                """)
-
-    # ==========================================
-    # 6. NAVIGATION LOGIC
-    # ==========================================
-    def go_digi():
-        return (
-            gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False),
-            gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"])
-        )
-    def go_feed():
-        return (
-            gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(visible=False),
-            gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"])
-        )
-    def go_saved():
-        return (
-            gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False),
-            gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn", "selected"]), gr.update(elem_classes=["nav-btn"])
-        )
-    def go_about():
-        return (
-            gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), gr.update(visible=True),
-            gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn"]), gr.update(elem_classes=["nav-btn", "selected"])
-        )
-
-    outputs_ui = [digitalizer_view, feed_view, saved_view, about_view, nav_digital, nav_feed, nav_saved, nav_about]
-    
-    nav_digital.click(go_digi, None, outputs_ui)
-    nav_feed.click(go_feed, None, outputs_ui)
-    nav_saved.click(go_saved, None, outputs_ui)
-    nav_about.click(go_about, None, outputs_ui)
-
-if __name__ == "__main__":
-    demo.launch(theme=theme, css=facebook_css)
+                                gr