Update app.py

app.py

@@ -32,7 +32,7 @@ def process_images(annotated_image, second_image, user_api_key=None, progress=gr
 
     # Construct the dynamic prompt with the actual box coordinates
     prompt = f"""add the <central object in the second image> in the first image only inside an imaginary box defined by pixels values "xmin": {xmin}, "ymin": {ymin}, "xmax": {xmax}, "ymax": {ymax}. Take care of shadows, lighting, style, and general concept of objects as per the first image."""
-
+    print(f"prompt - {prompt}")
     progress(0.2, desc="Gradio is preparing your images...")
 
     try:
@@ -146,8 +146,7 @@ def process_images(annotated_image, second_image, user_api_key=None, progress=gr
             else:
                 os.environ.pop("FAL_KEY", None)
 
-
-example_image_banner = gr.HTML(
+examples_image_banner=gr.HTML(
         """
         <style>
             .animation-container {
@@ -521,14 +520,14 @@ example_image_banner = gr.HTML(
         </style>
 
         <div class="animation-container">
-            <div class="animation-title">Guided Nano Banana Magic ✨</div>
+            <div class="animation-title">Image Fusion Magic ✨</div>
             <div class="mini-container" id="animContainer">
                 <!-- Set 1 Images -->
                 <div class="mini-image-wrapper mini-left-image set1" style="animation-play-state: running;">
-                    <img src="/gradio_api/file=one-1.png" alt="Set1 Left"> <!--src would be file/my_image.png*/ -->
+                    <img src="/gradio_api/file=/content/one-1.png" alt="Set1 Left"> <!--src would be file/my_image.png*/ -->
                 </div>
                 <div class="mini-image-wrapper mini-right-image set1" style="animation-play-state: running;">
-                    <img src="/gradio_api/file=one-2.png" alt="Set1 Right">
+                    <img src="/gradio_api/file=/content/one-2.png" alt="Set1 Right">
                 </div>
                 <div class="mini-result-image set1" style="animation-play-state: running;">
                     <img src="/gradio_api/file=one-3.jpg" alt="Set1 Result">
@@ -536,10 +535,10 @@ example_image_banner = gr.HTML(
 
                 <!-- Set 2 Images -->
                 <div class="mini-image-wrapper mini-left-image set2" style="animation-play-state: running;">
-                    <img src="/gradio_api/file=two-1.png" alt="Set2 Left">
+                    <img src="/gradio_api/file=/content/two-1.png" alt="Set2 Left">
                 </div>
                 <div class="mini-image-wrapper mini-right-image set2" style="animation-play-state: running;">
-                    <img src="/gradio_api/file=two-2.png" alt="Set2 Right">
+                    <img src="/gradio_api/file=/content/two-2.png" alt="Set2 Right">
                 </div>
                 <div class="mini-result-image set2" style="animation-play-state: running;">
                     <img src="/gradio_api/file=two-3.jpeg" alt="Set2 Result">
@@ -547,13 +546,13 @@ example_image_banner = gr.HTML(
 
                 <!-- Set 3 Images -->
                 <div class="mini-image-wrapper mini-left-image set3" style="animation-play-state: running;">
-                    <img src="/gradio_api/file=three-1.png" alt="Set3 Left">
+                    <img src="/gradio_api/file=/content/three-1.png" alt="Set3 Left">
                 </div>
                 <div class="mini-image-wrapper mini-right-image set3" style="animation-play-state: running;">
-                    <img src="/gradio_api/file=three-2.png" alt="Set3 Right">
+                    <img src="/gradio_api/file=/content/three-2.png" alt="Set3 Right">
                 </div>
                 <div class="mini-result-image set3" style="animation-play-state: running;">
-                    <img src="/gradio_api/file=three-3.jpg" alt="Set3 Result">
+                    <img src="/gradio_api/file=/content/three-3.jpg" alt="Set3 Result">
                 </div>
 
                 <!-- Progress bar -->
@@ -580,33 +579,35 @@ with gr.Blocks(theme='ocean') as demo:
     # Add navigation bar
     navbar = gr.Navbar(
         value=[
-            ("Learn more about Gradio Navbar", "https://www.gradio.app/guides/multipage-apps#customizing-the-navbar"),
+            ("Documentation", "https://docs.fal.ai"),
             ("FAL.AI nano-banana", "https://fal.ai/models/fal-ai/nano-banana/edit/api"),
-            ],
+            ("Learn more about Gradio Navbar", "https://www.gradio.app/guides/multipage-apps#customizing-the-navbar")
+        ],
         visible=True,
         main_page_name="🎨 guided nano banana"
     )
+    with gr.Row():
+        # Add the animated banner
+        examples_image_banner.render()
 
-    # Add the animated banner
-    example_image_banner.render()
-
-    gr.HTML(
-        """
-        <h1><center>Guide Your Nano Banana👉🍌</center></h1>
+        with gr.Column():
+            gr.HTML(
+                """
+                <h1><center>Guide Your Nano Banana👉🍌</center></h1>
 
-        <b>How to use:</b><br>
-        1. Upload or capture the first image and draw a box where you want to place an object<br>
-        2. Upload the second image containing the object you want to insert<br>
-        3. Click "Generate Composite Image" and wait for the Gradio and Nano-Banana to blend the images<br>
+                <b>How to use:</b><br>
+                1. Upload or capture the first image and draw a box where you want to place an object<br>
+                2. Upload the second image containing the object you want to insert<br>
+                3. Click "Generate Composite Image" and wait for the Gradio and Nano-Banana to blend the images<br>
 
-        The Gradio app will intelligently place the object from the second image into the boxed area of the first image,
-        taking care of lighting, shadows, and proper integration. Kidnly note that this app is experimental, so image edits might not always create the desired results. You can create a duplicate of the app and experiment with the prompt available <a href="https://huggingface.co/spaces/ysharma/guided-placement-nano-banana/blob/main/app.py#L34">here</a> to achieve better results.
-        """
-    )
+                The Gradio app will intelligently place the object from the second image into the boxed area of the first image,
+                taking care of lighting, shadows, and proper integration.
+                """
+            )
 
     # API Key input section
-    with gr.Row():
-        with gr.Column():
+    #with gr.Row():
+        #with gr.Column():
             with gr.Accordion("🔑 API Configuration (Optional)", open=False):
                 gr.Markdown(
                     """
@@ -682,24 +683,24 @@ with gr.Blocks(theme='ocean') as demo:
     examples = [
         [
             {
-                "image": "examples/example1-1.png",
+                "image": "example1-1.png",
                 "boxes": [{"xmin": 61, "ymin": 298, "xmax": 228, "ymax": 462}],
             },
-            "examples/example1-2.png",
+            "example1-2.png",
         ],
         [
             {
-                "image": "examples/example2-1.png",
+                "image": "example2-1.png",
                 "boxes": [{"xmin": 205, "ymin": 791, "xmax": 813, "ymax": 1161}],
             },
-            "examples/example2-2.jpg",
+            "example2-2.jpg",
         ],
         [
             {
-                "image": "examples/example3-1.png",
+                "image": "example3-1.png",
                 "boxes": [{"xmin": 24, "ymin": 465, "xmax": 146, "ymax": 607}],
             },
-            "examples/example3-2.png",
+            "example3-2.png",
         ],
     ]
     
@@ -708,14 +709,15 @@ with gr.Blocks(theme='ocean') as demo:
         inputs=[first_image, second_image],
     )
 
-with demo.route("ℹ️Tips for Best Results", "/tips"):
+
+with demo.route("Tips", "/tips"):
     gr.Markdown(
         """
         # ℹ️ Tips for Best Results
         - **Box Placement**: Draw the box exactly where you want the object to appear
         - **Image Quality**: Use high-resolution images for better results
         - **Object Selection**: The second image should clearly show the object you want to insert
-            - **Lighting**: Images with similar lighting conditions work best
+        - **Lighting**: Images with similar lighting conditions work best
         - **Processing Time**: Generation typically takes 10-30 seconds
         - **API Key**: If you encounter errors, try using your own FAL API key
         """
@@ -728,4 +730,4 @@ with demo.route("ℹ️Tips for Best Results", "/tips"):
     )
 
 if __name__ == "__main__":
-    demo.launch(ssr_mode=False, allowed_paths=["."])
+    demo.launch(ssr_mode=False, allowed_paths=["."], debug=False)