UI changes

app.py

@@ -32,8 +32,13 @@ css = """
     #share-btn-container .wrap {
         display: none !important;
     }
+    #chatbot { height: 300px; }
 """
 
+examples = [
+    # [[[], [], None], [("Show me some pictures in action?"), ('OK')]],
+]
+
 # Download model from HF Hub.
 ckpt_path = huggingface_hub.hf_hub_download(
     repo_id='jykoh/fromage', filename='pretrained_ckpt.pth.tar')
@@ -141,8 +146,8 @@ with gr.Blocks(css=css) as demo:
         For faster inference without waiting in queue, you may duplicate the space and use your own GPU. <a href="https://huggingface.co/spaces/haoheliu/audioldm-text-to-audio-generation?duplicate=true"><img style="margin-top: 0em; margin-bottom: 0em" src="https://img.shields.io/badge/-Duplicate%20Space-blue?labelColor=white&style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAP5JREFUOE+lk7FqAkEURY+ltunEgFXS2sZGIbXfEPdLlnxJyDdYB62sbbUKpLbVNhyYFzbrrA74YJlh9r079973psed0cvUD4A+4HoCjsA85X0Dfn/RBLBgBDxnQPfAEJgBY+A9gALA4tcbamSzS4xq4FOQAJgCDwV2CPKV8tZAJcAjMMkUe1vX+U+SMhfAJEHasQIWmXNN3abzDwHUrgcRGmYcgKe0bxrblHEB4E/pndMazNpSZGcsZdBlYJcEL9Afo75molJyM2FxmPgmgPqlWNLGfwZGG6UiyEvLzHYDmoPkDDiNm9JR9uboiONcBXrpY1qmgs21x1QwyZcpvxt9NS09PlsPAAAAAElFTkSuQmCC&logoWidth=14" alt="Duplicate Space"></a>
     """)
 
-    chatbot = gr.Chatbot(elem_id="chatbot")
     gr_state = gr.State([[], [], None])  # chat_history, input_image
+
     with gr.Row(visible=False) as share_group:
         with gr.Group(elem_id="share-btn-container"):
             community_icon = gr.HTML(community_icon_html)
@@ -150,38 +155,40 @@ with gr.Blocks(css=css) as demo:
             share_button = gr.Button("Share to community", elem_id="share-btn")
 
     with gr.Row():
-        with gr.Column(scale=0.3, min_width=100):
+        with gr.Column(scale=0.7, min_width=500):
+            with gr.Row():
+                chatbot = gr.Chatbot(elem_id="chatbot", label="FROMAGe Chatbot")
+            with gr.Row():
+                image_btn = gr.UploadButton("🖼️ Upload Image", file_types=["image"])
+
+                text_input = gr.Textbox(lines=4, label="Message", placeholder="Type a message")
+
+                with gr.Column():
+                    submit_btn = gr.Button(
+                        "Submit", interactive=True, variant="primary")
+                    clear_last_btn = gr.Button("Undo")
+                    clear_btn = gr.Button("Reset All")
+
+        with gr.Column(scale=0.3, min_width=200):
             ret_scale_factor = gr.Slider(minimum=0.0, maximum=3.0, value=1.0, step=0.1, interactive=True,
-                                         label="Multiplier for returning images (higher means more frequent)")
+                                         label="Frequency multiplier for returning images (higher means more frequent)")
             max_ret_images = gr.Number(
                 minimum=0, maximum=3, value=1, precision=1, interactive=True, label="Max images to return")
             gr_max_len = gr.Slider(minimum=1, maximum=64, value=32,
                                    step=1, interactive=True, label="Max # of words returned")
             gr_temperature = gr.Slider(
-                minimum=0.0, maximum=1.0, value=0.0, interactive=True, label="Temperature")
-
-        with gr.Column(scale=0.7, min_width=400):
-            image_btn = gr.UploadButton("🖼️ Image Input", file_types=["image"])
-            text_input = gr.Textbox(label="Type a message", lines=1, placeholder="Upload an image above [optional]. Then enter a text prompt, and press enter!")
+                minimum=0.0, maximum=1.0, value=0.0, interactive=True, label="Temperature (0 for deterministic, higher for more randomness)")
 
-            with gr.Row():
-                with gr.Column(scale=0.33):
-                    submit_btn = gr.Button(
-                        "Submit", interactive=True, variant="primary")
-                with gr.Column(scale=0.33):
-                    clear_last_btn = gr.Button("Clear Last Round")
-                with gr.Column(scale=0.33):
-                    clear_btn = gr.Button("Clear All")
+            examples = gr.Examples(
+                examples=examples,
+                inputs=[gr_state, chatbot],
+            )
 
     text_input.submit(generate_for_prompt, [text_input, gr_state, ret_scale_factor,
-                      max_ret_images, gr_max_len, gr_temperature], [gr_state, chatbot, share_group],
-                      )
-                      # _js = "() => document.getElementById('#chatbot').scrollTop = document.getElementById('#chatbot').scrollHeight")
+                      max_ret_images, gr_max_len, gr_temperature], [gr_state, chatbot, share_group])
     text_input.submit(lambda: "", None, text_input)  # Reset chatbox.
     submit_btn.click(generate_for_prompt, [text_input, gr_state, ret_scale_factor,
-                     max_ret_images, gr_max_len, gr_temperature], [gr_state, chatbot, share_group],
-                     )
-                     # _js = "() => document.getElementById('#chatbot').scrollTop = document.getElementById('#chatbot').scrollHeight")
+                     max_ret_images, gr_max_len, gr_temperature], [gr_state, chatbot, share_group])
     submit_btn.click(lambda: "", None, text_input)  # Reset chatbox.
 
     image_btn.upload(upload_image, [gr_state, image_btn], [gr_state, chatbot])