testing with a sidebar

app/assets/templates/{nested.yaml → nested_swe_ra.yaml}

@@ -14,4 +14,6 @@ steps:
     model: TrOCR
     model_settings:
       model: Riksarkivet/trocr-base-handwritten-hist-swe-2
+    generation_settings:
+       batch_size: 4
 - step: ReadingOrderMarginalia

app/assets/templates/simple_eng_modern.yaml

@@ -0,0 +1,12 @@
+steps:
+- step: Segmentation
+  settings:
+    model: yolo
+    model_settings:
+      model: Riksarkivet/yolov9-lines-within-regions-1
+- step: TextRecognition
+  settings:
+    model: TrOCR
+    model_settings:
+      model: microsoft/trocr-base-handwritten
+- step: OrderLines

app/assets/templates/simple_medival.yaml

@@ -0,0 +1,12 @@
+steps:
+- step: Segmentation
+  settings:
+    model: yolo
+    model_settings:
+      model: Riksarkivet/yolov9-lines-within-regions-1
+- step: TextRecognition
+  settings:
+    model: TrOCR
+    model_settings:
+      model: medieval-data/trocr-medieval-base
+- step: OrderLines

app/assets/templates/simple_nordhand.yaml

@@ -0,0 +1,12 @@
+steps:
+- step: Segmentation
+  settings:
+    model: yolo
+    model_settings:
+      model: Riksarkivet/yolov9-lines-within-regions-1
+- step: TextRecognition
+  settings:
+    model: TrOCR
+    model_settings:
+      model: Sprakbanken/TrOCR-norhand-v3
+- step: OrderLines

app/assets/templates/simple_pylaia_french.yaml

@@ -0,0 +1,12 @@
+steps:
+- step: Segmentation
+  settings:
+    model: yolo
+    model_settings:
+      model: Riksarkivet/yolov9-lines-within-regions-1
+- step: TextRecognition
+  settings:
+    model: Pylaia
+    model_settings:
+      model: Teklia/pylaia-belfort
+- step: OrderLines

app/content/main_sub_title_hum.md

@@ -0,0 +1,7 @@
+<a href="https://www.huminfra.se/">
+<center>
+    <img src="https://www.umu.se/globalassets/qbank/huminfra-till-webben-48568w600h600.jpg" 
+         width="60%" 
+         style="margin-top: 0.3rem; border-radius: 0.5rem;" />
+</center>
+</a>

app/content/{main_sub_title.md → main_sub_title_ra.md}

@@ -1,3 +1,3 @@
 <a href="https://huggingface.co/Riksarkivet">
-<img src="https://media.githubusercontent.com/media/AI-Riksarkivet/htrflow_app/refs/heads/main/app/assets/images/fav-removebg-preview.png" width="17%" align="right" margin-right="100" />
+<img src="https://media.githubusercontent.com/media/AI-Riksarkivet/htrflow_app/refs/heads/main/app/assets/images/fav-removebg-preview.png" width="17%" align="right" />
 </a>

app/content/main_title.md

@@ -1 +1 @@
-<h1><center> HTRflow 🔍 App </center></h1>
+<h1><center> HTRflow 🔍</center></h1>

app/content/sidebar.md

@@ -0,0 +1,15 @@
+## HTRflow Demo  
+
+This web application is developed by the **National Archives of Sweden** as part of [Huminfra](https://www.huminfra.se/)
+
+With this demo, users can explore step by step how **AI transforms historical manuscripts into digital text**. Behind the scenes, it runs our open-source **Python package** [HTRflow](https://ai-riksarkivet.github.io/htrflow/latest). Both the app and HTRflow’s code are fully open source.
+
+### How It Works  
+The demo follows a simple three-step workflow:
+
+1. **Upload** - Upload your own image and run HTRflow on it.  
+2. **Results** – View the transcribed text generated by HTRflow.  
+3. **Export** – Select your preferred format and download the results.  
+
+📌 **Note:** This is a **demo application** and is not intended for production use.  
+

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 textline svg elements */
 .textline {
@@ -73,7 +66,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);
 }
 

app/main.py

@@ -57,23 +57,28 @@ matomo = """
 <!-- End Matomo Code -->
 """
 
+with gr.Blocks(
+    title="HTRflow",
+    theme=theme,
+    css=css,
+    head=matomo,
+) as demo:
 
-with gr.Blocks(title="HTRflow", theme=theme, css=css, head=matomo) as demo:
-    with gr.Row():
-        with gr.Column(scale=1):
-            pass
-        with gr.Column(scale=2):
-            gr.Markdown(load_markdown(None, "main_title"))
-        with gr.Column(scale=1):
-            gr.Markdown(load_markdown(None, "main_sub_title"))
+    gr.Markdown(load_markdown(None, "main_title"))
+
+    with gr.Sidebar(label="Menu"):
+        gr.Markdown(load_markdown(None, "main_sub_title_hum"))
+        gr.Markdown(load_markdown(None, "sidebar"))
 
     with gr.Tabs(elem_classes="top-navbar") as navbar:
-        with gr.Tab(label="Upload") as tab_submit:
+        with gr.Tab(label="1. Upload") as tab_submit:
             submit.render()
-        with gr.Tab(label="Result", interactive=False, id="result") as tab_visualizer:
+        with gr.Tab(
+            label="2. Result", interactive=False, id="result"
+        ) as tab_visualizer:
             visualizer.render()
 
-        with gr.Tab(label="Export", interactive=False) as tab_export:
+        with gr.Tab(label="3. Export", interactive=False) as tab_export:
             export.render()
 
     @demo.load()
@@ -85,7 +90,9 @@ with gr.Blocks(title="HTRflow", theme=theme, css=css, head=matomo) as demo:
         state_value = input_value
         return state_value if state_value is not None else gr.skip()
 
-    collection_submit_state.change(activate_tab, collection_submit_state, tab_visualizer)
+    collection_submit_state.change(
+        activate_tab, collection_submit_state, tab_visualizer
+    )
     collection_submit_state.change(activate_tab, collection_submit_state, tab_export)
     collection_submit_state.change(lambda: gr.Tabs(selected="result"), outputs=navbar)
 
@@ -104,4 +111,6 @@ with gr.Blocks(title="HTRflow", theme=theme, css=css, head=matomo) as demo:
 demo.queue()
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860, enable_monitoring=True, show_api=False)
+    demo.launch(
+        server_name="0.0.0.0", server_port=7860, enable_monitoring=True, show_api=False
+    )

app/pipelines.py

@@ -0,0 +1,41 @@
+PIPELINES = {
+    "Swedish - Spreads": {
+        "file": "app/assets/templates/nested_swe_ra.yaml",
+        "description": "This pipeline works well on handwritten historic documents written in Swedish with multiple text regions. The model is devloped by <a href='https://huggingface.co/Riksarkivet'>the National Archives of Sweden</a>.",
+        "examples": [
+            "R0003364_00005.jpg",
+            "30002027_00008.jpg",
+            "A0070302_00201.jpg",
+        ],
+    },
+    "Swedish - Single page and snippets": {
+        "file": "app/assets/templates/simple_swe_ra.yaml",
+        "description": "This pipeline works well on handwritten historic letters and other documents written in Swedish with only one text region. The model is devloped by <a href='https://huggingface.co/Riksarkivet'>the National Archives of Sweden</a>.",
+        "examples": [
+            "451511_1512_01.jpg",
+            "A0062408_00006.jpg",
+            "C0000546_00085_crop.png",
+            "A0073477_00025.jpg",
+        ],
+    },
+    "Norwegian - Single page and snippets": {
+        "file": "app/assets/templates/simple_nordhand.yaml",
+        "description": "This pipeline works well on handwritten historic letters and other documents written in Norwegian with only one text region. The model is developed by the <a href='https://huggingface.co/Sprakbanken/TrOCR-norhand-v3'>Language Bank</a> at The National Library of Norway.",
+        "examples": ["norhand_fmgh040_4.jpg"],
+    },
+    "French - Single page and snippets": {
+        "file": "app/assets/templates/simple_pylaia_french.yaml",
+        "description": "This pipeline works well on handwritten historic letters and other documents written in French. The model is developed by <a href='https://huggingface.co/Teklia/pylaia-belfort'>Teklia</a>.",
+        "examples": ["belfort_snippet.jpg"],
+    },
+    "Medival - Single page and snippets": {
+        "file": "app/assets/templates/simple_medival.yaml",
+        "description": "This pipeline works well for medieval scripts written in single-page running text. It is a base model from <a href='https://huggingface.co/medieval-data'>Medieval Data</a>, but other models can be selected from here: <a href='https://huggingface.co/collections/medieval-data/trocr-medieval-htr-66871faba03abfbb1b66ab69'>Medieval Models</a>.",
+        "examples": ["manusscript_kb.png"],
+    },
+    "English - Single page and snippets": {
+        "file": "app/assets/templates/simple_eng_modern.yaml",
+        "description": "This pipeline works well for English text in single page running text. This a base model from <a href='https://huggingface.co/microsoft/trocr-base-handwritten'>Microsoft</a>.",
+        "examples": ["iam.png"],
+    },
+}

app/tabs/export.py

@@ -70,21 +70,20 @@ with gr.Blocks() as export:
     gr.Markdown("Choose file format for export.")
     with gr.Row():
         with gr.Column(scale=1):
-            with gr.Group():
-                export_file_format = gr.Dropdown(
-                    value=DEFAULT_C,
-                    label="File format",
-                    info="Select export format(s)",
-                    choices=CHOICES,
-                    multiselect=True,
-                    interactive=True,
-                )
-                download_files = gr.Files(label="Download files", interactive=False)
-        with gr.Column(scale=1):
-            pass
+            export_file_format = gr.Dropdown(
+                value=DEFAULT_C,
+                label="File format",
+                info="Select export format(s)",
+                choices=CHOICES,
+                multiselect=True,
+                interactive=True,
+            )
+            export_button = gr.Button(
+                "Export", scale=0, min_width=200, variant="primary"
+            )
 
-    with gr.Row():
-        export_button = gr.Button("Export", scale=0, min_width=200, variant="primary")
+        with gr.Column(scale=1):
+            download_files = gr.Files(label="Download files", interactive=False)
 
         export_button.click(
             fn=export_files,

app/tabs/submit.py

@@ -9,34 +9,14 @@ from htrflow.pipeline.pipeline import Pipeline
 from htrflow.pipeline.steps import init_step
 from htrflow.volume.volume import Collection
 
+from app.main import load_markdown
+from app.pipelines import PIPELINES
+
 logger = logging.getLogger(__name__)
 
 # Max number of images a user can upload at once
 MAX_IMAGES = int(os.environ.get("MAX_IMAGES", 5))
 
-# Example pipelines
-PIPELINES = {
-    "Running text (Swedish)": {
-        "file": "app/assets/templates/nested.yaml",
-        "description": "This pipeline works well on documents with multiple text regions.",
-        "examples": [
-            "R0003364_00005.jpg",
-            "30002027_00008.jpg",
-            "A0070302_00201.jpg",
-        ],
-    },
-    "Letters and snippets (Swedish)": {
-        "file": "app/assets/templates/simple.yaml",
-        "description": "This pipeline works well on letters and other documents with only one text region.",
-        "examples": [
-            "451511_1512_01.jpg",
-            "A0062408_00006.jpg",
-            "C0000546_00085_crop.png",
-            "A0073477_00025.jpg",
-        ],
-    },
-}
-
 # Setup the cache directory to point to the directory where the example images
 # are located. The images must lay in the cache directory because otherwise they
 # have to be reuploaded when drag-and-dropped to the input image widget.
@@ -52,7 +32,12 @@ class PipelineWithProgress(Pipeline):
     @classmethod
     def from_config(cls, config: dict[str, str]):
         """Init pipeline from config, ensuring the correct subclass is instantiated."""
-        return cls([init_step(step["step"], step.get("settings", {})) for step in config["steps"]])
+        return cls(
+            [
+                init_step(step["step"], step.get("settings", {}))
+                for step in config["steps"]
+            ]
+        )
 
     def run(self, collection, start=0, progress=None):
         """
@@ -110,7 +95,9 @@ def run_htrflow(custom_template_yaml, batch_image_gallery, progress=gr.Progress(
 
     pipe = PipelineWithProgress.from_config(config)
 
-    gr.Info(f"HTRflow: processing {len(images)} {'image' if len(images) == 1 else 'images'}.")
+    gr.Info(
+        f"HTRflow: processing {len(images)} {'image' if len(images) == 1 else 'images'}."
+    )
     progress(0.1, desc="HTRflow: Processing")
 
     collection.label = "demo_output"
@@ -178,22 +165,29 @@ def get_image_from_image_id(image_id):
 
 
 with gr.Blocks() as submit:
-    gr.Markdown("# Upload")
-    gr.Markdown("Select or upload the image you want to transcribe. You can upload up to five images at a time.")
+
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("# Upload")
+            gr.Markdown(
+                "Select or upload the image you want to transcribe. You can upload up to five images at a time. \n "
+                "Alternatively, you can choose from example images from the gallery or use Image_IDs."
+            )
 
     collection_submit_state = gr.State()
     with gr.Group():
-        with gr.Row(equal_height=True):
+        with gr.Row(
+            equal_height=True,
+        ):
             with gr.Column(scale=5):
                 batch_image_gallery = gr.Gallery(
                     file_types=["image"],
                     label="Image to transcribe",
                     interactive=True,
                     object_fit="scale-down",
-                    scale=3,
                 )
 
-            with gr.Column(scale=2):
+            with gr.Column(scale=3):
                 examples = gr.Gallery(
                     all_example_images(),
                     label="Examples",
@@ -201,6 +195,7 @@ with gr.Blocks() as submit:
                     allow_preview=False,
                     object_fit="scale-down",
                     min_width=250,
+                    columns=3,
                 )
                 image_iiif_url = gr.Textbox(
                     label="Upload by image ID",
@@ -215,7 +210,9 @@ with gr.Blocks() as submit:
     with gr.Column(variant="panel", elem_classes="pipeline-panel"):
         gr.Markdown("## Settings")
         gr.Markdown(
-            "Select a pipeline that suits your image. You can edit the pipeline if you need to customize it further."
+            "Select a pipeline that best matches your image. The pipeline determines the processing workflow optimized for different handwritten text recognition tasks."
+            "If you select an example image, a suitable pipeline will be preselected automatically. However, you can edit the pipeline if you need to customize it further."
+            "Choosing the right pipeline significantly improves transcription quality"
         )
 
         with gr.Row():
@@ -286,10 +283,13 @@ with gr.Blocks() as submit:
             image_ids = image_ids.split(",")
 
         return [
-            f"https://lbiiif.riksarkivet.se/arkis!{image_id.strip()}/full/max/0/default.jpg" for image_id in image_ids
+            f"https://lbiiif.riksarkivet.se/arkis!{image_id.strip()}/full/max/0/default.jpg"
+            for image_id in image_ids
         ]
 
-    image_iiif_url.submit(fn=return_iiif_url, inputs=image_iiif_url, outputs=batch_image_gallery)
+    image_iiif_url.submit(
+        fn=return_iiif_url, inputs=image_iiif_url, outputs=batch_image_gallery
+    )
 
     run_button.click(
         fn=run_htrflow,

app/tabs/visualizer.py

@@ -59,32 +59,51 @@ with gr.Blocks() as visualizer:
     with gr.Row():
         # Annotated image panel
         with gr.Column(scale=2):
-            gr.Markdown("## Annotated image")
-            image = gr.HTML(padding=False, elem_classes="svg-image", container=True)
+            image = gr.HTML(
+                label="Annotated image",
+                padding=False,
+                elem_classes="svg-image",
+                container=True,
+                max_height="70vh",
+                min_height="70vh",
+                show_label=True,
+            )
 
             image_caption = gr.Markdown(elem_classes="button-group-viz")
             with gr.Row(elem_classes="button-group-viz"):
-                left = gr.Button("← Previous", visible=False, interactive=False, scale=0)
+                left = gr.Button(
+                    "← Previous", visible=False, interactive=False, scale=0
+                )
                 right = gr.Button("Next →", visible=False, scale=0)
 
         # Transcription panel
         with gr.Column(scale=1, elem_classes="transcription-column"):
-            gr.Markdown("## Transcription")
-            transcription = gr.HTML(elem_classes="transcription", container=True, max_height="60vh")
+            transcription = gr.HTML(
+                label="Transcription",
+                show_label=True,
+                elem_classes="transcription",
+                container=True,
+                max_height="70vh",
+                min_height="70vh",
+            )
 
     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)
+    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)
     # - toggle visibility of navigation buttons (don't show them for single pages)
     # - update the image caption
-    collection.change(render_image, inputs=[collection, current_page_index], outputs=image)
+    collection.change(
+        render_image, inputs=[collection, current_page_index], outputs=image
+    )
     collection.change(
         render_transcription,
         inputs=[collection, current_page_index],
@@ -103,14 +122,18 @@ with gr.Blocks() as visualizer:
     # - 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(
+        render_image, inputs=[collection, current_page_index], outputs=image
+    )
     current_page_index.change(
         render_transcription,
         inputs=[collection, current_page_index],
         outputs=transcription,
     )
     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(
+        activate_right_button, [collection, current_page_index], right
+    )
     current_page_index.change(
         update_image_caption,
         inputs=[collection, current_page_index],

pyproject.toml

@@ -17,13 +17,12 @@ classifiers = [
 requires-python = ">=3.10,<3.13"
 
 dependencies = [
-    "htrflow==0.2.0",
-    "gradio>=5.15.0",
-    "datasets>=3.2.0",
-    "pandas>=2.2.3",
+    "htrflow==0.2.5",
+    "gradio>=5.16.0",
     "tqdm>=4.67.1",
-    "pillow>=11.1.0",
     "gradio-modal>=0.0.4",
+    "dill>=0.3.9",
+    "pylaia>=1.1.2",
 ]
 
 [project.urls]
@@ -32,24 +31,11 @@ Repository = "https://github.com/AI-Riksarkivet/htrflow-app"
 
 [tool.uv]
 dev-dependencies = [
-    "pytest >=8.0.1",
     "python-dotenv >=1.0.1",
     "ruff >=0.6.2",
     "uv>=0.4.12",
 ]
 
-# [project.optional-dependencies]
-# openmmlab = [
-#     "openmim==0.3.9",
-#     "mmengine==0.7.4",
-#     "mmcv==2.0.1",
-#     "mmdet==3.0.0",
-#     "mmocr==1.0.0"
-# ]
-# teklia = [
-#     "pylaia==1.1.2"
-# ]
-
 
 [build-system]
 requires = ["hatchling"]
@@ -71,5 +57,5 @@ line-length = 119
 target-version = "py310"
 
 [tool.ruff.lint]
-ignore = ["C901", "E741", "W605"]
+ignore = ["C901", "E741", "W605", "E501"]
 select = ["C", "E", "F", "I", "W"]