Update UI and lock out buttons when no images present

app.py

@@ -82,15 +82,15 @@ def gallery_selected(evt: gr.SelectData) -> tuple[int, gr.Button]:
     return evt.index, gr.Button(interactive=evt.selected)
 
 
-def to_moondream(images: list[tuple[Image.Image, str | None]], index: int) -> tuple[gr.Tabs, Image.Image]:
+def to_moondream(images: list[tuple[Image.Image, str | None]], index: int) -> tuple[gr.Tabs, Image.Image, gr.Button]:
     """
     Listener that sends selected gallery image to the moondream model.
 
     :param images: list of images from yolos_gallery
     :param index: index of selected gallery image
-    :return: new selected tab and selected image (no caption)
+    :return: selected tab, selected image (no caption), and an enabled button
     """
-    return gr.Tabs(selected='moondream'), images[index][0]
+    return gr.Tabs(selected='moondream'), images[index][0], gr.Button(interactive=True)
 
 
 if __name__ == "__main__":
@@ -105,33 +105,37 @@ if __name__ == "__main__":
         selected_image = gr.Number(visible=False, precision=0)
 
         # Referenced: https://github.com/gradio-app/gradio/issues/7726#issuecomment-2028051431
-        with gr.Tabs(selected='yolos') as tabs:
+        with gr.Tabs() 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("Detect Objects")
-
-                    with gr.Column():
+                with gr.Row(equal_height=False):
+                    with gr.Group():
+                        yolos_input = gr.Image(label="Input Image", type="pil")
+                        yolos_submit = gr.Button("Detect Objects", interactive=False)
+                    with gr.Group():
                         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)
+                                                   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")
+                    with gr.Group():
+                        moon_img = gr.Image(label="Image", type="pil", interactive=True)
+                        moon_prompt = gr.Textbox(label="Question", value="What is this food item?")
+                        moon_submit = gr.Button("Submit", interactive=False)
+                    moon_output = gr.TextArea(label="Output", interactive=False)
 
         # --- YOLOS --- #
+        yolos_input.upload(lambda: gr.Button(interactive=True), None, yolos_submit)
+        yolos_input.clear(lambda: gr.Button(interactive=False), None, yolos_submit)
+
         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, selected_image], [tabs, moon_img])
+        proceed_button.click(to_moondream, [yolos_gallery, selected_image], [tabs, moon_img, moon_submit])
 
         # --- Moondream --- #
+        moon_img.upload(lambda: gr.Button(interactive=True), None, moon_submit)
+        moon_img.clear(lambda: gr.Button(interactive=False), None, moon_submit)
         moon_submit.click(answer_question, [moon_img, moon_prompt], moon_output)
 
     app.queue().launch()