tabbed examples

app.py

@@ -228,19 +228,60 @@ tile_size = 100
 # image_folder = os.path.join("file", "images")
 image_folder ="images"
 
-image_examples = {
-    "Snoop": "Snoop Dogg.jpg",
-    "Ray": "Ray-Liotta-Goodfellas.jpg", 
-    "Anya": "Anya Taylor-Joy 003.jpg",
-    "Billie": "billie eilish 004.jpeg",
-    "Lizzo": "Lizzo 001.jpeg",
-    "Donkey": "Donkey.jpg",
-    "SohoJoe": "SohoJoeEth.jpeg",
-    "Mirai": "Mirai.jpg",
-    "OnChainMonkey": "OnChainMonkey-2278.jpg",
-    "Wassie": "Wassie 4498.jpeg",
-    "Pup in TeaCup": "pup1.jpg",
+# image_examples = {
+#         "452650": "452650.jpeg",
+#         "Prompt 1": "a college dorm with a desk and bunk beds",
+#         "371739": "371739.jpeg",
+#         "Prompt 2": "a large banana is placed before a stuffed monkey.",
+#         "557922": "557922.jpeg",
+#         "Prompt 3": "a person sitting on a bench using a cell phone",
+
+# }
+
+tabbed_examples = {
+    "CoCo": {
+        "452650": "452650.jpeg",
+        "Prompt 1": "a college dorm with a desk and bunk beds",
+        "371739": "371739.jpeg",
+        "Prompt 2": "a large banana is placed before a stuffed monkey.",
+        "557922": "557922.jpeg",
+        "Prompt 3": "a person sitting on a bench using a cell phone",
+    },
+    "Portraits": {
+        "Snoop": "Snoop Dogg.jpg",
+        "Snoop Prompt": "Snoop Dogg",
+        "Ray": "Ray-Liotta-Goodfellas.jpg",
+        "Ray Prompt": "Ray Liotta, Goodfellas",
+        "Anya": "Anya Taylor-Joy 003.jpg",
+        "Anya Prompt": "Anya Taylor-Joy, The Queen's Gambit",
+        "Billie": "billie eilish 004.jpeg",
+        "Billie Prompt": "Billie Eilish, blonde hair",
+        "Lizzo": "Lizzo 001.jpeg",
+        "Lizzo Prompt": "Lizzo,",
+        "Donkey": "Donkey.jpg",
+        "Donkey Prompt": "Donkey, from Shrek",
+    },
+    "NFT's": {
+        "SohoJoe": "SohoJoeEth.jpeg",
+        "SohoJoe Prompt": "SohoJoe.Eth",
+        "Mirai": "Mirai.jpg",
+        "Mirai Prompt": "Mirai from White Rabbit, @shibuyaxyz",
+        "OnChainMonkey": "OnChainMonkey-2278.jpg",
+        "OCM Prompt": "On Chain Monkey",
+        "Wassie": "Wassie 4498.jpeg",
+        "Wassie Prompt": "Wassie by Wassies",
+    },
+    "Pups": {
+        "Pup1": "pup1.jpg",
+        "Prompt": "Teacup Yorkies",
+        "Pup2": "pup2.jpg",
+        "Pup3": "pup3.jpg",
+        "Pup4": "pup4.jpeg",
+        "Pup5": "pup5.jpg",
+    },
 }
+
+
 image_examples_tile_size = 50
 
 with gr.Blocks() as demo:
@@ -264,9 +305,9 @@ Try uploading a few images and/or add some text prompts and click generate image
                     gr.Markdown("## Generates:")
             for example in examples:
                 with gr.Row():
-                    for image in example:
+                    for example in example:
                         with gr.Column(scale=1, min_width=tile_size):
-                            local_path = os.path.join(image_folder, image)
+                            local_path = os.path.join(image_folder, example)
                             gr.Image(
                                 value = local_path, shape=(tile_size,tile_size), 
                                 show_label=False, interactive=False) \
@@ -277,25 +318,37 @@ Try uploading a few images and/or add some text prompts and click generate image
             with gr.Tab(f"Input {i+1}"):
                 with gr.Row():
                     with gr.Column(scale=1, min_width=240):
-                        input_images[i] = gr.Image()
+                        input_images[i] = gr.Image(label="Image Prompt", show_label=True)
                     with gr.Column(scale=3, min_width=600):
                         embedding_plots[i] = gr.LinePlot(show_label=False).style(container=False)
                         # input_image.change(on_image_load, inputs= [input_image, plot])
                 with gr.Row():
                     with gr.Column(scale=2, min_width=240):
-                        input_prompts[i] = gr.Textbox()
+                        input_prompts[i] = gr.Textbox(label="Text Prompt", show_label=True)
                     with gr.Column(scale=3, min_width=600):
                         with gr.Accordion(f"Embeddings (base64)", open=False):
                             embedding_base64s[i] = gr.Textbox(show_label=False)
-                with gr.Row():
-                    for idx, (title, image) in enumerate(image_examples.items()):
-                        local_path = os.path.join(image_folder, image)
-                        with gr.Column(scale=1, min_width=image_examples_tile_size):
-                            gr.Examples(
-                                examples=[local_path],
-                                inputs=input_images[i],
-                                label=title,
-                            )
+                for idx, (tab_title, examples) in enumerate(tabbed_examples.items()):
+                    with gr.Tab(tab_title):
+                        with gr.Row():
+                            for idx, (title, example) in enumerate(examples.items()):
+                                if example.endswith(".jpg") or example.endswith(".jpeg"):
+                                    # add image example
+                                    local_path = os.path.join(image_folder, example)
+                                    with gr.Column(scale=1, min_width=image_examples_tile_size):
+                                        gr.Examples(
+                                            examples=[local_path],
+                                            inputs=input_images[i],
+                                            label=title,
+                                        )
+                                else:
+                                    # add text example
+                                    with gr.Column(scale=1, min_width=image_examples_tile_size*2):
+                                        gr.Examples(
+                                            examples=[example],
+                                            inputs=input_prompts[i],
+                                            label=title,
+                                        )
 
     with gr.Row():
         average_embedding_plot = gr.LinePlot(show_label=True, label="Average Embeddings (base64)").style(container=False)
@@ -319,7 +372,8 @@ Try uploading a few images and/or add some text prompts and click generate image
     embedding_base64s_state = gr.State(value=[None for i in range(max_tabs)])
     for i in range(max_tabs):
         input_images[i].change(on_image_load_update_embeddings, input_images[i], [embedding_base64s[i]])
-        input_prompts[i].submit(on_prompt_change_update_embeddings, input_prompts[i], [embedding_base64s[i]])
+        # input_prompts[i].submit(on_prompt_change_update_embeddings, input_prompts[i], [embedding_base64s[i]])
+        input_prompts[i].change(on_prompt_change_update_embeddings, input_prompts[i], [embedding_base64s[i]])
         embedding_base64s[i].change(on_embeddings_changed_update_plot, embedding_base64s[i], [embedding_plots[i]])
         # embedding_plots[i].change(on_plot_changed, embedding_base64s[i], average_embedding_base64)
         # embedding_plots[i].change(on_embeddings_changed_update_average_embeddings, embedding_base64s[i], average_embedding_base64)