Use tab container for image components

app.py

@@ -153,18 +153,12 @@ def build_gradio_app(queues, command):
     css = """#anno-img .mask {opacity: 0.5; transition: all 0.2s ease-in-out;}
              #anno-img .mask.active {opacity: 0.7}"""
 
-    def get_examples():
+    def get_click_examples():
         assets_dir = os.path.join(os.path.dirname(__file__), "assets")
         app_images = list(filter(lambda x: x.startswith("app_image"), os.listdir(assets_dir)))
         app_images.sort()
         return [{"image": os.path.join(assets_dir, x)} for x in app_images]
 
-    def on_prompt_opt(index):
-        click_img = gr.Image(None, visible=index == 0)
-        draw_img = gr.ImageEditor(None, visible=index != 0)
-        anno_img = gr.AnnotatedImage(None)
-        return click_img, draw_img, anno_img
-
     def on_reset_btn():
         click_img, draw_img = gr.Image(None), gr.ImageEditor(None)
         anno_img = gr.AnnotatedImage(None)
@@ -207,25 +201,23 @@ def build_gradio_app(queues, command):
         annotations = [(x, y) for x, y in zip(masks, texts)]
         return inputs["img"][:, :, ::-1], annotations
 
-    app = gr.Blocks(title=title, theme=theme, css=css).__enter__()
-    gr.Markdown(header)
+    app, _ = gr.Blocks(title=title, theme=theme, css=css).__enter__(), gr.Markdown(header)
     container, column = gr.Row().__enter__(), gr.Column().__enter__()
-    click_img = gr_ext.ImagePrompter(show_label=False)
-    draw_img = gr.ImageEditor(show_label=False, visible=False)
-    interactions = "LeftClick (FG) | MiddleClick (BG) | PressMove (Box) | Draw (Sketch)"
+    click_tab, click_img = gr.Tab("Point+Box").__enter__(), gr_ext.ImagePrompter(show_label=False)
+    interactions = "LeftClick (FG) | MiddleClick (BG) | PressMove (Box)"
     gr.Markdown("<h3 style='text-align: center'>[🖱️ | 🖐️]: 🌟🌟 {} 🌟🌟 </h3>".format(interactions))
-    row = gr.Row().__enter__()
-    prompt_opt = gr.Radio(["Point+Box", "Sketch"], label="Prompt", type="index", value="Point+Box")
     point_opt = gr.Radio(["Batch", "Ensemble"], label="Multipoint", type="index", value="Batch")
-    _, row = row.__exit__(), gr.Row().__enter__()
-    reset_btn, submit_btn = gr.Button("Reset"), gr.Button("Execute")
-    _, row = row.__exit__(), gr.Row().__enter__()
-    gr.Examples(get_examples(), inputs=[click_img], label="Examples (for Point+Box only)")
+    gr.Examples(get_click_examples(), inputs=[click_img])
+    _, draw_tab = click_tab.__exit__(), gr.Tab("Sketch").__enter__()
+    draw_img, _ = gr.ImageEditor(show_label=False), draw_tab.__exit__()
+    prompt_opt = gr.Radio(["Click", "Draw"], type="index", visible=False, value="Click")
+    row, reset_btn, submit_btn = gr.Row().__enter__(), gr.Button("Reset"), gr.Button("Execute")
     _, _, column = row.__exit__(), column.__exit__(), gr.Column().__enter__()
     anno_img = gr.AnnotatedImage(elem_id="anno-img", show_label=False)
     reset_btn.click(on_reset_btn, [], [click_img, draw_img, anno_img])
     submit_btn.click(on_submit_btn, [click_img, draw_img, prompt_opt, point_opt], [anno_img])
-    prompt_opt.change(on_prompt_opt, [prompt_opt], [click_img, draw_img, anno_img])
+    click_tab.select(lambda: "Click", [], [prompt_opt])
+    draw_tab.select(lambda: "Draw", [], [prompt_opt])
     column.__exit__(), container.__exit__(), app.__exit__()
     return app