UI changes, add examples

.gitattributes

@@ -33,3 +33,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 cc3m_embeddings.pkl filter=lfs diff=lfs merge=lfs -text
+examples filter=lfs diff=lfs merge=lfs -text
+examples/beaver.png filter=lfs diff=lfs merge=lfs -text
+examples/couch.png filter=lfs diff=lfs merge=lfs -text
+examples/sparrow.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -48,6 +48,9 @@ css = """
 """
 
 examples = [
+    'examples/sparrow.png',
+    'examples/beaver.png',
+    'examples/couch.png',
 ]
 
 # Download model from HF Hub.
@@ -142,12 +145,25 @@ def generate_for_prompt(input_text, state, ret_scale_factor, max_num_rets, num_w
 
 
 with gr.Blocks(css=css) as demo:
-    gr.Markdown(
-        '### Grounding Language Models to Images for Multimodal Generation'
-    )
-
     gr.HTML("""
-        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>
+        <h1>🧀 FROMAGe</h1>
+        <p>This is the official Gradio demo for the FROMAGe model, a model that can process arbitrarily interleaved image and text inputs, and produce image and text outputs.</p>
+
+        <strong>Paper:</strong> <a href="https://arxiv.org/abs/2301.13823" target="_blank">Grounding Language Models to Images for Multimodal Generation</a>
+        <br/>
+        <strong>Project Website:</strong> <a href="https://jykoh.com/fromage" target="_blank">FROMAGe Website</a>
+        <br/>
+        <strong>Code and Models:</strong> <a href="https://github.com/kohjingyu/fromage" target="_blank">GitHub</a>
+        <br/>
+        <br/>
+
+        <strong>Tips:</strong>
+        <ul>
+        <li>Start by inputting either image or text prompts (or both) and chat with FROMAGe to get image-and-text replies.</li>
+        <li>Tweak the level of sensitivity to images and text using the parameters on the right.</li>
+        <li>Check out cool conversations in the examples or community tab for inspiration and share your own!</li>
+        <li>For faster inference without waiting in queue, you may duplicate the space and use your own GPU: <a href="https://huggingface.co/spaces/jykoh/fromage?duplicate=true"><img style="display: inline-block; 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></li>
+        </ul>
     """)
 
     gr_state = gr.State([[], []])  # conversation, chat_history
@@ -183,9 +199,9 @@ with gr.Blocks(css=css) as demo:
             gr_temperature = gr.Slider(
                 minimum=0.0, maximum=1.0, value=0.0, interactive=True, label="Temperature (0 for deterministic, higher for more randomness)")
 
-            # gallery = gr.Gallery(
-            #     value=examples, label="Example Conversations", show_label=True, elem_id="gallery",
-            # ).style(grid=[2], height="auto")
+            gallery = gr.Gallery(
+                value=[Image.open(e) for e in examples], label="Example Conversations", show_label=True, elem_id="gallery",
+            ).style(grid=[2], height="auto")
 
     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, save_group])