Add nav buttons

app/gradio_config.py

@@ -4,12 +4,13 @@ theme = gr.themes.Default(
     primary_hue="blue",
     secondary_hue="blue",
     neutral_hue="slate",
-    # font=[
-    #     gr.themes.GoogleFont("Open Sans"),
-    #     "ui-sans-serif",
-    #     "system-ui",
-    #     "sans-serif",
-    # ],
+    font=[
+        gr.themes.GoogleFont("Open Sans"),
+        "ui-sans-serif",
+        "system-ui",
+        "sans-serif",
+    ],
+    # text_size="md",
 )
 
 css = """
@@ -25,14 +26,6 @@ css = """
   top: 20px;
 }
 
-.transcription-column {
-  height: 100vh;
-}
-
-/* this is needed in order to make the transcription sticky */
-.app {
-  overflow: visible;
-}
 
 /* style of table cell svg elements */
 .cellline {
@@ -85,7 +78,6 @@ hr.region-divider {
 .pipeline-info {
   padding: 0 0 0 2px;
   font-weight: var(--block-info-text-weight);
-  font-size: var(--block-info-text-size);
   color: var(--block-info-text-color);
 }
 
@@ -126,5 +118,4 @@ hr.region-divider {
   }
 }
 
-
 """

app/tabs/submit.py

@@ -186,7 +186,7 @@ with gr.Blocks() as submit:
 
             with gr.Column(scale=2):
                 first_page = gr.Number(3, label="First page of the book", precision=0)
-                last_page = gr.Number(4, label="Last page of the book", precision=0)
+                last_page = gr.Number(5, label="Last page of the book", precision=0)
                 examples = gr.Gallery(
                     all_example_images(),
                     label="Examples",

app/tabs/visualizer.py

@@ -1,10 +1,12 @@
+import os
 import gradio as gr
 from jinja2 import Environment, FileSystemLoader
+from typing_extensions import TypeAlias
 
 _ENV = Environment(loader=FileSystemLoader("app/assets/jinja-templates"))
 _IMAGE_TEMPLATE = _ENV.get_template("image.j2")
 
-from typing import NamedTuple
+from typing import NamedTuple, TypeAlias
 from dawsonia.typing import BBoxTuple
 
 
@@ -22,11 +24,42 @@ class Page(NamedTuple):
     path: str
 
 
-def render_image(collection: list[Page], current_page_index: int) -> str:
+Collection: TypeAlias = list[Page]
+
+def render_image(collection: Collection, current_page_index: int) -> str:
     return _IMAGE_TEMPLATE.render(
         page=collection[current_page_index],
     )
 
+def toggle_navigation_button(collection: Collection):
+    visible = len(collection) > 1
+    return gr.update(visible=visible)
+
+
+def activate_left_button(current_page_index):
+    interactive = current_page_index > 0
+    return gr.update(interactive=interactive)
+
+
+def activate_right_button(collection: Collection, current_page_index):
+    interactive = current_page_index + 1 < len(collection)
+    return gr.update(interactive=interactive)
+
+
+def right_button_click(collection: Collection, current_page_index):
+    max_index = len(collection) - 1
+    return min(max_index, current_page_index + 1)
+
+
+def left_button_click(current_page_index):
+    return max(0, current_page_index - 1)
+
+
+def update_image_caption(collection: Collection, current_page_index):
+    n_pages = len(collection)
+    label = os.path.split(collection[current_page_index].path)[-1]
+    return f"image {current_page_index + 1} of {n_pages}: `{label}`"
+
 
 with gr.Blocks() as visualizer:
     gr.Markdown("# Result")
@@ -36,14 +69,14 @@ with gr.Blocks() as visualizer:
 
     with gr.Row():
         # Annotated image panel
-        with gr.Column(scale=2):
+        with gr.Column(scale=1):
             image = gr.HTML(
                 label="Annotated image",
                 padding=False,
                 elem_classes="svg-image",
                 container=True,
-                max_height="65vh",
-                min_height="65vh",
+                min_height="40vh",
+                max_height="50vh",
                 show_label=True,
             )
 
@@ -57,6 +90,12 @@ with gr.Blocks() as visualizer:
     collection = gr.State()
     current_page_index = gr.State(0)
 
+    # Wiring of navigation buttons
+    left.click(left_button_click, current_page_index, current_page_index)
+    right.click(
+        right_button_click, [collection, current_page_index], current_page_index
+    )
+    
     # Updates on collection change:
     # - update the view
     # - reset the page index (always start on page 0)
@@ -64,4 +103,29 @@ with gr.Blocks() as visualizer:
     # - update the image caption
     collection.change(
         render_image, inputs=[collection, current_page_index], outputs=image
-    )
+    )
+    collection.change(lambda _: 0, current_page_index, current_page_index)
+    collection.change(toggle_navigation_button, collection, left)
+    collection.change(toggle_navigation_button, collection, right)
+    collection.change(
+        update_image_caption,
+        inputs=[collection, current_page_index],
+        outputs=image_caption,
+    )
+
+    # Updates on page change:
+    # - update the view
+    # - activate/deactivate buttons
+    # - update the image caption
+    current_page_index.change(
+        render_image, inputs=[collection, current_page_index], outputs=image
+    )
+    current_page_index.change(activate_left_button, current_page_index, left)
+    current_page_index.change(
+        activate_right_button, [collection, current_page_index], right
+    )
+    current_page_index.change(
+        update_image_caption,
+        inputs=[collection, current_page_index],
+        outputs=image_caption,
+    )

run.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+source .venv/bin/activate
+GRADIO_CACHE_DIR=.gradio_cache PYTHONPATH=$(pwd) gradio app/main.py