bug fix

app.py

@@ -8,9 +8,6 @@ from PIL import Image
 import numpy as np
 from pathlib import Path
 import gradio as gr
-from gradio.inputs import Image as GradioImage
-from gradio.outputs import Image as GradioOutputImage
-from gradio.components import Textbox, Button, Slider
 
 import warnings
 
@@ -88,6 +85,7 @@ if __name__ == "__main__":
     parser.add_argument("--debug", action="store_true", help="using debug mode")
     parser.add_argument("--share", action="store_true", help="share the app")
     args = parser.parse_args()
+    
     css = """
   #mkd {
     height: 500px; 
@@ -95,32 +93,45 @@ if __name__ == "__main__":
     border: 1px solid #ccc; 
   }
 """
-    # Using a simpler block creation method
-    block = gr.Blocks()
-    with block:
+    with gr.Blocks(css=css) as demo:
         gr.Markdown("<h1><center>Grounding DINO<h1><center>")
         gr.Markdown("<h3><center>Open-World Detection with <a href='https://github.com/IDEA-Research/GroundingDINO'>Grounding DINO</a><h3><center>")
         gr.Markdown("<h3><center>Note the model runs on CPU, so it may take a while to run the model.<h3><center>")
 
         with gr.Row():
             with gr.Column():
-                input_image = GradioImage(type="pil")
-                grounding_caption = Textbox("Detection Prompt")
-                run_button = Button("Run")
-                # Advanced options in a collapsible section
-                box_threshold = Slider(
-                    minimum=0.0, maximum=1.0, value=0.25, step=0.001, label="Box Threshold"
-                )
-                text_threshold = Slider(
-                    minimum=0.0, maximum=1.0, value=0.25, step=0.001, label="Text Threshold"
-                )
+                input_image = gr.Image(label="Input Image")
+                grounding_caption = gr.Textbox(label="Detection Prompt")
+                run_button = gr.Button("Run")
+                
+                with gr.Accordion("Advanced options", open=False):
+                    box_threshold = gr.Slider(
+                        minimum=0.0, maximum=1.0, value=0.25, step=0.001, 
+                        label="Box Threshold"
+                    )
+                    text_threshold = gr.Slider(
+                        minimum=0.0, maximum=1.0, value=0.25, step=0.001, 
+                        label="Text Threshold"
+                    )
 
             with gr.Column():
-                gallery = GradioOutputImage(
+                gallery = gr.Image(
+                    label="Detection Result",
                     type="pil"
-                ).scale(full_width=True)
+                )
 
-        run_button.click(fn=run_grounding, inputs=[
-                        input_image, grounding_caption, box_threshold, text_threshold], outputs=[gallery])
-        # Example setup removed - older versions may not support Examples component
-        block.launch(share=False, show_api=False, show_error=True)
+        run_button.click(
+            fn=run_grounding, 
+            inputs=[input_image, grounding_caption, box_threshold, text_threshold], 
+            outputs=[gallery]
+        )
+        
+        gr.Examples(
+            examples=[["this_is_fine.png", "coffee cup", 0.25, 0.25]],
+            inputs=[input_image, grounding_caption, box_threshold, text_threshold],
+            outputs=[gallery],
+            fn=run_grounding,
+            cache_examples=True,
+        )
+    
+    demo.launch(share=args.share, debug=args.debug, show_error=True)