Hook selected image from gallery into Moondream input

app.py

@@ -22,6 +22,8 @@ yolos_id = "hustvl/yolos-small-300"
 yolos_processor: YolosImageProcessor = YolosImageProcessor.from_pretrained(yolos_id)
 yolos_model: YolosForObjectDetection = YolosForObjectDetection.from_pretrained(yolos_id)
 
+selected_image: int | None = None
+
 
 def answer_question(img, prompt):
     """
@@ -72,7 +74,7 @@ def detect_objects(img: Image.Image):
     return box_images
 
 
-def gallery_selected(evt: gr.SelectData):
+def gallery_selected(evt: gr.SelectData) -> tuple[int, gr.Button]:
     """
     Listener for the gallery selection event.
 
@@ -82,6 +84,16 @@ def gallery_selected(evt: gr.SelectData):
     return evt.index, gr.Button(interactive=evt.selected)
 
 
+def to_moondream(images: list[tuple[Image.Image, str | None]]) -> tuple[gr.Tabs, Image.Image]:
+    """
+    Listener that sends selected gallery image to the moondream model.
+
+    :param images: list of images from yolos_gallery
+    :return: new selected tab and selected image (no caption)
+    """
+    return gr.Tabs(selected='moondream'), images[selected_image][0]
+
+
 if __name__ == "__main__":
     with gr.Blocks() as app:
         gr.Markdown(
@@ -92,29 +104,32 @@ if __name__ == "__main__":
             """
         )
 
-        with gr.Tab("Object Detection"):
-            with gr.Row():
-                with gr.Column():
-                    yolos_input = gr.Image(type="pil")
-                    yolos_submit = gr.Button("Submit")
-                yolos_output = gr.Gallery(label="Detected Objects", object_fit="scale-down", columns=3, scale=1,
-                                          show_share_button=False, selected_index=None, allow_preview=False)
-
-            with gr.Row():
-                yolos_selected = gr.TextArea(label="Selected Image Index")
-                proceed_button = gr.Button("To Moondream", interactive=False)
-
-        with gr.Tab("Inference"):
-            with gr.Row():
-                moon_prompt = gr.Textbox(label="Input", value="Describe this image.")
-                moon_submit = gr.Button("Submit")
-            with gr.Row():
-                moon_img = gr.Image(label="Image", type="pil")
-                moon_output = gr.TextArea(label="Output")
+        # Referenced: https://github.com/gradio-app/gradio/issues/7726#issuecomment-2028051431
+        with gr.Tabs(selected='yolos') as tabs:
+            with gr.Tab("Object Detection", id='yolos'):
+                with gr.Row():
+                    with gr.Column():
+                        yolos_input = gr.Image(type="pil", scale=1)
+                        yolos_submit = gr.Button("Submit", scale=0)
+
+                    with gr.Column():
+                        yolos_gallery = gr.Gallery(label="Detected Objects", object_fit="scale-down", columns=3,
+                                                   scale=2, show_share_button=False, selected_index=None,
+                                                   allow_preview=False, type="pil", interactive=False)
+                        proceed_button = gr.Button("To Moondream", interactive=False)
+
+            with gr.Tab("Inference", id='moondream'):
+                with gr.Row():
+                    moon_prompt = gr.Textbox(label="Input", value="Describe this image.")
+                    moon_submit = gr.Button("Submit")
+                with gr.Row():
+                    moon_img = gr.Image(label="Image", type="pil", interactive=True)
+                    moon_output = gr.TextArea(label="Output")
 
         # --- YOLOS --- #
-        yolos_submit.click(detect_objects, [yolos_input], yolos_output)
-        yolos_output.select(gallery_selected, None, [yolos_selected, proceed_button])
+        yolos_submit.click(detect_objects, [yolos_input], yolos_gallery)
+        yolos_gallery.select(gallery_selected, None, [selected_image, proceed_button])
+        proceed_button.click(to_moondream, yolos_gallery, [tabs, moon_img])
 
         # --- Moondream --- #
         moon_submit.click(answer_question, [moon_img, moon_prompt], moon_output)