Update src/app.py

src/app.py

@@ -148,7 +148,18 @@ def process_images(annotated_image, second_image, user_api_key=None, progress=gr
 
 
 # Create the Gradio interface
-with gr.Blocks(theme='monochrome') as demo:
+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")
+        ],
+        visible=True,
+        main_page_name="🎨 guided nano banana"
+    )
+    
     gr.HTML(
         """
         <h1><center>Guide Your Nano Banana👉🍌</center></h1>
@@ -229,20 +240,7 @@ with gr.Blocks(theme='monochrome') as demo:
             placeholder="Results will appear here...",
             lines=3,
         )
-    
-    # Examples section
-    with gr.Accordion("ℹ️ Tips for Best Results", open=False):
-        gr.Markdown(
-            """
-            - **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
-            - **Processing Time**: Generation typically takes 10-30 seconds
-            - **API Key**: If you encounter errors, try using your own FAL API key
-            """
-        )
-    
+        
     # Connect the button to the processing function
     generate_btn.click(
         fn=process_images,
@@ -251,5 +249,24 @@ with gr.Blocks(theme='monochrome') as demo:
         show_progress=True,
     )
 
+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
+        - **Processing Time**: Generation typically takes 10-30 seconds
+        - **API Key**: If you encounter errors, try using your own FAL API key
+        """
+    )
+
+    # Different navbar for the Settings page
+    navbar = gr.Navbar(
+        visible=True,
+        main_page_name="Home",
+    )  
+    
 if __name__ == "__main__":
     demo.launch(ssr_mode=False)