Update app.py

app.py

@@ -520,7 +520,7 @@ examples_image_banner=gr.HTML(
         </style>
 
         <div class="animation-container">
-            <div class="animation-title">Image Fusion Magic ✨</div>
+            <div class="animation-title">Nano Banana 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;">
@@ -579,7 +579,6 @@ with gr.Blocks(theme='ocean') as demo:
     # Add navigation bar
     navbar = gr.Navbar(
         value=[
-            ("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")
         ],
@@ -601,13 +600,11 @@ with gr.Blocks(theme='ocean') as demo:
                 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.
+                taking care of lighting, shadows, and proper integration. Kindly 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.
                 """
             )
 
-    # API Key input section
-    #with gr.Row():
-        #with gr.Column():
+            # API Key input section
             with gr.Accordion("🔑 API Configuration (Optional)", open=False):
                 gr.Markdown(
                     """
@@ -629,7 +626,7 @@ with gr.Blocks(theme='ocean') as demo:
         with gr.Column(scale=1):
             with gr.Row():
                 with gr.Column(scale=1):
-                    gr.Markdown("### Step 1: Annotate First Image")
+                    gr.Markdown("### Step 1: Annotate First Image ()")
                     # Image annotator for first image
                     from gradio_image_annotation import image_annotator
                     #first_image = ImageAnnotator(
@@ -683,24 +680,24 @@ with gr.Blocks(theme='ocean') as demo:
     examples = [
         [
             {
-                "image": "example1-1.png",
+                "image": "/examples/example1-1.png",
                 "boxes": [{"xmin": 61, "ymin": 298, "xmax": 228, "ymax": 462}],
             },
-            "example1-2.png",
+            "/examples/example1-2.png",
         ],
         [
             {
-                "image": "example2-1.png",
+                "image": "/examples/example2-1.png",
                 "boxes": [{"xmin": 205, "ymin": 791, "xmax": 813, "ymax": 1161}],
             },
-            "example2-2.jpg",
+            "/examples/example2-2.jpg",
         ],
         [
             {
-                "image": "example3-1.png",
+                "image": "/examples/example3-1.png",
                 "boxes": [{"xmin": 24, "ymin": 465, "xmax": 146, "ymax": 607}],
             },
-            "example3-2.png",
+            "/examples/example3-2.png",
         ],
     ]
     
@@ -710,7 +707,7 @@ with gr.Blocks(theme='ocean') as demo:
     )
 
 
-with demo.route("Tips", "/tips"):
+with demo.route("ℹ️Tips for Best Results", "/tips"):
     gr.Markdown(
         """
         # ℹ️ Tips for Best Results