update

app.py

@@ -13,10 +13,38 @@ print("Downloaded and unzipped the file.")
 
 diagram = get_svg_content("derendering_supp/derender_diagram.svg")
 org = get_svg_content("org/cor.svg")
-
-org_content = f"""
-{org}
-"""
+org_content = f"{org}"
+
+gif_filenames = [
+    "christians.gif",
+    "good.gif",
+    "october.gif",
+    "welcome.gif",
+    "you.gif",
+    "letter.gif",
+]
+captions = [
+    "CHRISTIANS",
+    "Good",
+    "October",
+    "WELOME",
+    "you",
+    "letter",
+]
+gif_base64_strings = {
+    caption: get_base64_encoded_gif(f"gifs/{name}")
+    for caption, name in zip(captions, gif_filenames)
+}
+
+sketches = [
+    "bird.gif",
+    "cat.gif",
+    "coffee.gif",
+    "penguin.gif",
+]
+sketches_base64_strings = {
+    name: get_base64_encoded_gif(f"sketches/{name}") for name in sketches
+}
 
 
 def demo(Dataset, Model, Output_Format):
@@ -97,17 +125,28 @@ def demo(Dataset, Model, Output_Format):
 with gr.Blocks() as app:
     gr.HTML(org_content)
     gr.Markdown(
-        f"""
-        # InkSight: Offline-to-Online Handwriting Conversion by Learning to Read and Write<br>
-        <div>{diagram}</div>
-        🔔 This demo showcases the outputs of <b>Small-i</b>, <b>Small-p</b>, and <b>Large-i</b> on three public datasets (100 samples each).<br>
-        ℹ️ Choose a model variant and dataset, then click 'Sample' to see an input with its corresponding outputs for all three inference types.<br>
-        📝 Choose the output format: Image or Image+Video. While showing only images are faster, videos can demonstrate the writing process of the inks.<br>
+        "# InkSight: Offline-to-Online Handwriting Conversion by Learning to Read and Write"
+    )
+    gr.HTML(
+        """
+        <div style="display: flex; align-items: center; margin-bottom: 20px;">
+            <a href="https://arxiv.org/abs/2402.05804" target="_blank" style="font-size: 16px; background-color: #4CAF50; color: white; padding: 5px 7px; text-decoration: none; border-radius: 2px;">
+                📄 Read the Paper
+            </a>
+        </div>
+        """
+    )
+    gr.HTML(f"<div style='margin: 20px 0;'>{diagram}</div>")
+    gr.Markdown(
+        """
+        🔔 This demo showcases the outputs of **Small-i**, **Small-p**, and **Large-i** on three public datasets (word-level, 100 samples each).<br>
+        ℹ️ Choose a model variant and dataset (IAM, IMGUR5K, HierText), then click 'Sample' to see an input with its corresponding outputs for all three inference types.<br>
+        📝 Output format: Image or Image+Video. While showing only images are faster, videos can demonstrate the writing process of the inks.<br>
         """
     )
     with gr.Row():
         dataset = gr.Dropdown(
-            ["IMGUR5K", "IAM", "HierText"], label="Dataset", value="HierText"
+            ["IAM", "IMGUR5K", "HierText"], label="Dataset", value="IAM"
         )
         model = gr.Dropdown(
             ["Small-i", "Large-i", "Small-p"],
@@ -156,4 +195,41 @@ with gr.Blocks() as app:
         ],
     )
 
+    gr.Markdown("## Additional Word-level Samples")
+
+    html_content = """
+    <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 0px;">
+    """
+
+    for caption, base64_string in gif_base64_strings.items():
+        title = caption
+        html_content += f"""
+        <div>
+            <img src="data:image/gif;base64,{base64_string}" alt="{title}" style="width: 100%; max-width: 200px;">
+            <p style="text-align: center;">{title}</p>
+        </div>
+        """
+
+    html_content += "</div>"
+
+    gr.HTML(html_content)
+
+    # Sketches
+    gr.Markdown("## Additional Sketch Samples")
+
+    html_content = """
+    <div style="display: flex; justify-content: space-around; flex-wrap: wrap; gap: 0px;">
+    """
+
+    for _, base64_string in sketches_base64_strings.items():
+        html_content += f"""
+        <div>
+            <img src="data:image/gif;base64,{base64_string}" style="width: 100%; max-width: 200px;">
+        </div>
+        """
+
+    html_content += "</div>"
+
+    gr.HTML(html_content)
+
 app.launch()

utils.py

@@ -20,6 +20,7 @@ from io import BytesIO
 from matplotlib.animation import FuncAnimation, FFMpegWriter, PillowWriter
 import requests
 import zipfile
+import base64
 
 
 warnings.filterwarnings("ignore")
@@ -41,6 +42,11 @@ def unzip_file(filename, extract_to="."):
         zip_ref.extractall(extract_to)
 
 
+def get_base64_encoded_gif(gif_path):
+    with open(gif_path, "rb") as gif_file:
+        return base64.b64encode(gif_file.read()).decode("utf-8")
+
+
 def load_and_pad_img_dir(file_dir):
     image_path = os.path.join(file_dir)
     image = Image.open(image_path)