upgrade to gradio blocks (#1)

- upgrade to gradio blocks (274546c2d9b7fbb87d302c2d76789da4d490ca33)


Co-authored-by: Abdullah Meda <abd-meda@users.noreply.huggingface.co>

app.py

@@ -1,10 +1,10 @@
-import torch
+import os
 import re
+
+import torch
 import gradio as gr
-from pathlib import Path
 from transformers import AutoTokenizer, AutoFeatureExtractor, VisionEncoderDecoderModel
 
-
 # Pattern to ignore all the text after 2 or more full stops
 regex_pattern = "[.]{2,}"
 
@@ -19,6 +19,10 @@ def post_process(text):
     return text
 
 
+def set_example_image(example: list) -> dict:
+    return gr.Image.update(value=example[0])
+
+
 def predict(image, max_length=64, num_beams=4):
     pixel_values = feature_extractor(images=image, return_tensors="pt").pixel_values
     pixel_values = pixel_values.to(device)
@@ -52,29 +56,29 @@ print("Loaded feature_extractor")
 tokenizer = AutoTokenizer.from_pretrained(model.decoder.name_or_path, use_fast=True)
 if model.decoder.name_or_path == "gpt2":
     tokenizer.pad_token = tokenizer.eos_token
-
 print("Loaded tokenizer")
 
-title = "Poster2Plot: Upload a Movie/T.V show poster to generate a plot"
-description = ""
-
-input = gr.inputs.Image(type="pil")
-
-example_images = sorted(
-    [f.as_posix() for f in Path("examples").glob("*.jpg")]
-)
-print(f"Loaded {len(example_images)} example images")
-
-interface = gr.Interface(
-    fn=predict,
-    inputs=input,
-    outputs="textbox",
-    title=title,
-    description=description,
-    examples=example_images,
-    examples_per_page=20,
-    live=True,
-    article='<p>Made by: <a href="https://twitter.com/kartik_godawat" target="_blank" rel="noopener noreferrer">dk-crazydiv</a> and <a href="https://twitter.com/dsr_ai" target="_blank" rel="noopener noreferrer">dsr</a></p>'
-)
-
-interface.launch()
+examples = [[f"examples/{filename}"] for filename in next(os.walk('examples'), (None, None, []))[2]]
+print(f"Loaded {len(examples)} example images")
+
+with gr.Blocks(css="#title { margin: 0 auto; padding: 25px 25px 25px 25px }") as poster2plot:
+    with gr.Column():
+        with gr.Row():
+            gr.Markdown("# Poster2Plot: Upload a Movie/T.V show poster to generate a plot", elem_id='title')
+        with gr.Row():
+            with gr.Column():
+                with gr.Row():
+                    input_image = gr.Image(label='Input Image', type='numpy')
+                with gr.Row():
+                    submit_button = gr.Button(value="Submit", variant='primary')
+            with gr.Column():
+                plot = gr.Textbox(label="Plot")
+        with gr.Row():
+            example_images = gr.Dataset(components=[input_image], samples=examples)
+        with gr.Row():
+            gr.Markdown("Made by: [dk-crazydiv](https://twitter.com/kartik_godawat) and [dsr](https://twitter.com/dsr_ai)")
+
+    submit_button.click(fn=predict, inputs=[input_image], outputs=[plot])
+    example_images.click(fn=set_example_image, inputs=[example_images], outputs=example_images.components)
+
+poster2plot.launch()