Made some inital changes for sprint 2

.github/README.md

@@ -1,95 +1,195 @@
-# WORK IN PROGRESS
+# HTRflow_app
 
-> :warning: **Dont use yet !**
+[HTRflow_app](https://huggingface.co/spaces/Riksarkivet/htr_demo), our interactive demo application that visualizes the entire Handwritten Text Recognition (HTR) process. With this demo, users can explore, step by step, how AI transforms historical manuscripts into digital text.
 
-# htrflow_app: A demo app for htrflow
+Please note that this is a demo application—not intended for production use—but it highlights the immense potential of HTR technology for cultural heritage institutions worldwide.
 
-We're thrilled to introduce [htrflow](https://huggingface.co/spaces/Riksarkivet/htr_demo), our demonstration platform that brings to life the process of transcribing Swedish handwritten documents from the 17th to the 19th century.
 
 <p align="center">
-  <img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/htrflow_background_dalle3.png?raw=true" alt="HTRFLOW Image" width=40%>
+  <img src="https://ai-riksarkivet.github.io/htrflow/latest/assets/background_htrflow_2.png" alt="HTRflow App Demo" width="80%">
 </p>
 
-htrflow_app is designed to provide users with a step-by-step visualization of the HTR-process, and offer non-expert users an inside look into the workings of an AI-transcription pipeline.
-At the moment htrflow_app is mainly a demo-application. It’s not intended for production, but instead to showcase the immense possibilities that HTR-technology is opening up for cultural heritage institutions around the world.
+---
+<!-- https://ecotrust-canada.github.io/markdown-toc/ -->
+- [HTRflow_app](#htrflow-app) 
+  * [Overview](#overview)
+  * [Guide](#guide)
+  * [How to use app..](#how-to-use-app)
+  * [Getting Started](#getting-started)
+    + [Prerequisites](#prerequisites)
+    + [Installation](#installation)
+    + [Running the Application Locally](#running-the-application-locally)
+  * [Running with Docker](#running-with-docker)
+    + [Locally with Docker](#locally-with-docker)
+    + [On Hugging Face Spaces](#on-hugging-face-spaces)
+  * [Contributing](#contributing)
+  * [License](#license)
 
-All code is open-source, all our models are on [Hugging Face](https://huggingface.co/collections/Riksarkivet/models-for-handwritten-text-recognition-652692c6871f915e766de688) and are free to use, and all data will be made available for download and use on [Hugging Face](https://huggingface.co/datasets/Riksarkivet/placeholder_htr) as well.
 
-**Note** that the backend (src) for the app will be rewritten and packaged to be more optimized under the project name [htrflow_core](https://github.com/Swedish-National-Archives-AI-lab/htrflow_core).
+---
 
-## Run app
+## Guide
 
-Use virtual env.
+The demo consist of 3 tabs: Upload, Results and Export. You navigate through the app by first uploading 1 or many images  in 
 
-```
-python3 -m venv .venv
-source .venv/bin/activate
-```
+Upload:
 
-Install libraries with Makefile:
+Result:
 
-```
-make install
-```
+Export:
 
-With pip:
+## Pipeline Configuration
 
-```
-pip install -r requirements.txt
-```
+HTRflow powers the application's engine with a structured pipeline design pattern. This pattern uses declarative YAML schemas as blueprints to define step-by-step processing instructions. For detailed documentation, visit the [HTRflow Pipeline Guide](https://ai-riksarkivet.github.io/htrflow/latest/getting_started/pipeline.html#yaml).
+
+<p align="center">
+  <img src="../app/assets/images/3_worker.png" alt="HTRflow Worker Pipeline" width="20%">
+</p>
 
-Run app with:
+### Understanding YAML Pipeline Templates
 
-```
-gradio app.py
-```
+The following series of images demonstrates how YAML pipeline templates function. Each template is designed for specific document types - the example below shows a template optimized for single-column running text, such as letters, notes, and individual pages.
 
-## Run with Docker
+<p align="center">
+  <img src="../app/assets/images/how_to_1.png" alt="YAML Template Structure" width="70%">
+</p>
 
-There are two options:
+### Pipeline Steps
 
-### Run with Docker locally
+Each pipeline consists of sequential steps executed from top to bottom. In this example, we focus on two primary steps:
 
-Build container:
+1. **Segmentation**: Identifies and extracts text lines from the image
+2. **Text Recognition**: Performs Handwritten Text Recognition (HTR) on the segmented lines
 
-```
-docker build --tag htrflow/htrflow-app .
-```
+<p align="center">
+  <img src="../app/assets/images/how_to_2.png" alt="Pipeline Steps Overview" width="50%">
+</p>
 
-Run container:
+### Model Integration
 
-```
-docker run -it -d --name htrflow-app -p 7000:7860  htrflow/htrflow-app:latest
-```
+Models specified in the pipeline can be downloaded directly from the [Huggingface model hub](https://huggingface.co/models?library=htrflow). For a comprehensive list of supported models, refer to the [HTRflow Models Documentation](https://ai-riksarkivet.github.io/htrflow/latest/getting_started/models.html#models).
+
+> **Note**: For English text recognition, you'll need to specify an appropriate model ID, such as the [Microsoft TrOCR base handwritten model](https://huggingface.co/microsoft/trocr-base-handwritten).
+
+<p align="center">
+  <img src="../app/assets/images/how_to_3.png" alt="Model Configuration" width="50%">
+</p>
+
+### Processing Workflow
+
+#### Text Line Detection
+The following image illustrates the text line segmentation process:
 
-### Run with Docker with HF
+<p align="center">
+  <img src="../app/assets/images/how_to_4.png" alt="Text Line Detection Process" width="90%">
+</p>
+
+#### Text Recognition
+After segmentation, the detected text lines are processed by the HTR component:
 
-You can also just run it from Hugging Face:
+<p align="center">
+  <img src="../app/assets/images/how_to_5.png" alt="Text Recognition Process" width="80%">
+</p>
+
+#### Reading Order Determination
+The final pipeline step determines the reading order of the text. In this example, it applies a simple top-down ordering transformation:
+
+<p align="center">
+  <img src="../app/assets/images/how_to_6.png" alt="Reading Order Determination" width="85%">
+</p>
 
+
+
+
+
+## Development
+
+### Prerequisites
+
+- **Python:** Version 3.7 or higher
+- **pip:** Python package installer
+- **(Optional) Docker:** For containerized deployment
+- **(Optional) Nvidia GPU:** For faster predictions..
+
+
+### Installation
+
+1. **Clone the Repository:**
+
+   ```bash
+   git clone https://github.com/your_username/htrflow_app.git
+   cd htrflow_app
+   ```
+
+2. **Set Up a Virtual Environment:**
+
+   ```bash
+   python3 -m venv .venv
+   source .venv/bin/activate  # On Windows: .venv\Scripts\activate
+   ```
+
+3. **Install Dependencies:**
+
+   Since we are no longer using a Makefile, install the required packages with:
+
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+### Running the Application Locally
+
+Launch the Gradio demo by running:
+
+```bash
+gradio app/main.py
 ```
+
+Then open your web browser and navigate to `http://localhost:7860` (or the address displayed in your terminal) to interact with the demo.
+
+---
+
+## Running with Docker
+
+### Locally with Docker
+
+1. **Build the Docker Image:**
+
+   ```bash
+   docker build --tag htrflow/htrflow-app .
+   ```
+
+2. **Run the Docker Container:**
+
+   ```bash
+   docker run -it -d --name htrflow-app -p 7000:7860 htrflow/htrflow-app:latest
+   ```
+
+   Now, visit `http://localhost:7000` in your browser.
+
+### On Hugging Face Spaces
+
+Alternatively, you can run HTRflow_app directly on Hugging Face with:
+
+```bash
 docker run -it -p 7860:7860 --platform=linux/amd64 --gpus all \
-	-e registry.hf.space/riksarkivet-htr-demo:latest
+    -e registry.hf.space/riksarkivet-htr-demo:latest
 ```
 
 ---
 
-## Instructions for documentation
 
-- Naming convention of folder is based on tab
-- Naming convention of file is based on subtabs
-  - If subtab uses columns and rows
-    - Use suffix such as col1, row1 or tab1, to indicate differences in postion of text.
+## Contributing
 
-see image below:
+We welcome community contributions! If you’d like to contribute:
+1. Fork the repository.
+2. Create a feature branch (`git checkout -b feature/YourFeature`).
+3. Commit your changes (`git commit -m 'Add some feature'`).
+4. Push to your branch (`git push origin feature/YourFeature`).
+5. Open a pull request.
 
-<p align="center">
-        <img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/layout_structure.png?raw=true" alt="Badge 1">
-</p>
-
-## Assets and file sharing with app
+---
 
-This repo acts as asset manager for the app:
+## License
 
-- [Github Repo](https://github.com/Borg93/htr_gradio_file_placeholder)
+This project is open source. See the [LICENSE](./LICENSE) file for details.
 
-**Note**: this repo is an work in progress

Makefile

@@ -1,48 +0,0 @@
-.PHONY: install
-
-venv:
-	python -m venv venv
-
-
-activate: 
-	source ./venv/bin/activate
-
-install: local_install install_openmmlab
-
-docker_install: local_install install_openmmlab_with_mim
-
-local_install:
-	@echo "Running requirements install"
-	pip install --upgrade pip
-	pip install -r requirements.txt
-
-install_openmmlab_with_mim:
-	@echo "Running Openmmlab requirements install"
-	pip install -U openmim
-	mim install mmengine
-	mim install mmcv
-	mim install mmdet
-	mim install mmocr
-
-install_openmmlab:
-	@echo "Running Openmmlab requirements install"
-	pip install mmengine==0.7.4
-	pip install mmcv==2.0.1
-	pip install mmdet==3.0.0
-	pip install mmocr==1.0.0
-
-build:
-	pip install -e .
-	gradio app.py
-
-docker_build:
-    docker build -t htrflow-app -f .docker/Dockerfile .
-
-# clean_for_actions:
-# 	git lfs prune
-# 	git filter-branch --force --index-filter "git rm --cached --ignore-unmatch helper/text/videos/eating_spaghetti.mp4" --prune-empty --tag-name-filter cat -- --all
-# 	git push --force origin main
-
-# add_space:
-#	git remote add demo https://huggingface.co/spaces/Riksarkivet/htr_demo
-#	git push --force demo main

app/assets/templates/c_nested_labels.yaml

@@ -1,41 +0,0 @@
-steps:
-- step: Segmentation
-  settings:
-    model: yolo
-    model_settings:
-       model: Riksarkivet/yolov9-regions-1
-    generation_settings:
-       batch_size: 2
-- step: Segmentation
-  settings:
-    model: yolo
-    model_settings:
-       model: Riksarkivet/yolov9-lines-within-regions-1
-    generation_settings:
-        batch_size: 2
-- step: TextRecognition
-  settings:
-    model: WordLevelTrocr
-    model_settings:
-       model: Riksarkivet/trocr-base-handwritten-hist-swe-2
-    generation_settings:
-       batch_size: 4
-       num_beams: 1
-- step: ReadingOrderMarginalia
-  settings:
-    two_page: auto
-- step: Export
-  settings:
-    dest: outputs/alto
-    format: alto
-- step: Export
-  settings:
-    dest: outputs/page
-    format: page
-labels:
-  level_labels:
-    - region
-    - line
-    - word
-  sep: _
-  template: "{label}{number}"

app/assets/templates/c_nested_reading_order.yaml

@@ -1,24 +0,0 @@
-steps:
-- step: Segmentation
-  settings:
-    model: yolo
-    model_settings:
-       model: Riksarkivet/yolov9-regions-1
-- step: Segmentation
-  settings:
-    model: yolo
-    model_settings:
-      model: Riksarkivet/yolov9-lines-within-regions-1
-- step: TextRecognition
-  settings:
-    model: TrOCR
-    model_settings:
-      model: Riksarkivet/trocr-base-handwritten-hist-swe-2
-- step: ReadingOrderMarginalia
-  settings:
-    two_page: always
-- step: Export
-  settings:
-    format: txt
-    dest: text-outputs
-

app/assets/templates/c_nested_with_filter.yaml

@@ -1,28 +0,0 @@
-steps:
-- step: Segmentation
-  settings:
-    model: yolo
-    model_settings:
-       model: Riksarkivet/yolov9-regions-1
-- step: Segmentation
-  settings:
-    model: yolo
-    model_settings:
-      model: Riksarkivet/yolov9-lines-within-regions-1
-- step: TextRecognition
-  settings:
-    model: TrOCR
-    model_settings:
-      model: Riksarkivet/trocr-base-handwritten-hist-swe-2
-- step: OrderLines
-- step: Export
-  settings:
-    format: txt
-    dest: raw-outputs
-- step: RemoveLowTextConfidenceLines
-  settings:
-    threshold: 0.95
-- step: Export
-  settings:
-    format: txt
-    dest: cleaned-outputs

app/assets/templates/c_simple_gensettings.yaml

@@ -1,21 +0,0 @@
-steps:
-- step: Segmentation
-  settings:
-    model: yolo
-    model_settings:
-      model: Riksarkivet/yolov9-lines-within-regions-1
-    generation_settings:
-       batch_size: 2
-- step: TextRecognition
-  settings:
-    model: TrOCR
-    model_settings:
-      model: Riksarkivet/trocr-base-handwritten-hist-swe-2
-    generation_settings:
-       batch_size: 4
-       num_beams: 1
-- step: OrderLines
-- step: Export
-  settings:
-    format: txt
-    dest: outputs

app/assets/templates/c_simple_multi_output.yaml

@@ -1,24 +0,0 @@
-steps:
-- step: Segmentation
-  settings:
-    model: yolo
-    model_settings:
-      model: Riksarkivet/yolov9-lines-within-regions-1
-- step: TextRecognition
-  settings:
-    model: TrOCR
-    model_settings:
-      model: Riksarkivet/trocr-base-handwritten-hist-swe-2
-- step: OrderLines
-- step: Export
-  settings:
-    format: txt
-    dest: text-outputs
-- step: Export
-  settings:
-    format: page
-    dest: page-outputs
-- step: Export
-  settings:
-    format: alto
-    dest: alto-outputs

app/assets/templates/{2_nested.yaml → nested.yaml}

@@ -14,9 +14,4 @@ steps:
     model: TrOCR
     model_settings:
       model: Riksarkivet/trocr-base-handwritten-hist-swe-2
-- step: ReadingOrderMarginalia
-- step: Export
-  settings:
-    format: txt
-    dest: text-outputs
-
+- step: ReadingOrderMarginalia

app/assets/templates/{1_simple.yaml → simple.yaml}

@@ -9,8 +9,4 @@ steps:
     model: TrOCR
     model_settings:
       model: Riksarkivet/trocr-base-handwritten-hist-swe-2
-- step: OrderLines
-- step: Export
-  settings:
-    format: txt
-    dest: outputs
+- step: OrderLines

app/content/how_it_works.md

@@ -1,44 +0,0 @@
-# Nocebant Achilles de vallis meminere fugit
-
-## Corpus exta frondes pectora neque
-
-Lorem markdownum animi, resistere praefertur recenti de vocor data levibus.
-Lucifer cupidine pugnandi alter, quies modestos, nec aut quae Cancri diva
-Latiis. Morerne est bonis ingentibus luctantemque corpore ad consistuntque
-Cereris clausit.
-
-## Putat inclita si parte se
-
-Accipe fit explevit pessima in timebat querellas qui. Peti fuit: summa et
-adstantem vulnere artus is utque orbes suis exsangues me saepe! Hominis et Troia
-pater contigit, dolor fecit illis in.
-
-## Nos celer bracchia curvari hiemsque
-
-Corpus Alcmene omnia hiemes viros sic nepotum *pater* soporem, tenebat modo
-Lethaea adstupet artis et cur. Optatis tendebant posita pudore Hennaeis dicere
-visa tanti cornua laevam et faciebat et transfert sanguineam iussos. Aliquid
-occupat [sagittis](http://densihabet.org/) tributuram si nihil fugamque
-Bienoris.
-
-> Os docuisse posse tectus, nisi pronas, trabes annos amor porrigitur. Corpora
-> retemptantem fulvas. Et letum semianimem exclamat omnia et amisso.
-
-## Aquae tibi insanis se quas
-
-[Hyperione dare](http://www.fama.org/)? Cum certam virique fugacis magnos, sedes
-iuverat Canens fera, mox cervus, res dea equorum vocant, vocandus.
-
-    traceroute.mac_active.partition_widget_optical(restoreBare(irqMeme,
-            reimage_file), -1, network.ethics(socketUdp, tagAddressLaser, 54));
-    processScanMainframe.uncPipeline(flash_graphics_kilobit(dsl, imapCircuit,
-            suffix(driveMultitaskingDrive)));
-    var guidSmishing = 881375;
-    ipv(vgaPointPeripheral);
-
-Ureris totidemque mihi sed pendens amantes praesens ambos tua planxerunt
-**lumine**, huius bracchia Cepheusque ne invida circum etiam! Exsistere
-cornuque, non oblatae quid servat quae tecto potiere exhibuit annos qui vulnera.
-Eras sic non passus peragit frequens, quae creati vix. Regno per cortice ignea,
-versus non omni missus: cervice sub *foedoque ferali*. Troiana hiemes solidumve
-et timori; quod, deus clamor barba; mea aulam furtum saltus suo catenas.

app/gradio_config.py

@@ -76,4 +76,12 @@ hr.region-divider {
   margin: auto;
   color: var(--body-text-color);
 }
+
+.button-group-viz {
+ margin: auto;
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ text-align: center;
+}
 """

app/main.py

@@ -1,20 +1,18 @@
-import shutil
-import gradio as gr
 import os
-from app.gradio_config import css, theme
-from app.tabs.submit import submit, collection_submit_state
-from app.tabs.visualizer import visualizer, collection as collection_viz_state
-from gradio_modal import Modal
 
+import gradio as gr
 from htrflow.models.huggingface.trocr import TrOCR
 
+from app.gradio_config import css, theme
+from app.tabs.export import collection as collection_export_state
+from app.tabs.export import export
+from app.tabs.submit import collection_submit_state, submit
+from app.tabs.visualizer import collection as collection_viz_state
+from app.tabs.visualizer import visualizer
+
 TEMPLATE_YAML_FOLDER = "app/assets/templates"
 gr.set_static_paths(paths=[TEMPLATE_YAML_FOLDER])
 
-# TODO: fix api/ endpoints..
-# TODO add colab
-# TDOO addd eexmaple for api
-
 
 def load_markdown(language, section, content_dir="app/content"):
     """Load markdown content from files."""
@@ -50,29 +48,25 @@ matomo = """
 <!-- End Matomo Code -->
 """
 
+
 with gr.Blocks(title="HTRflow", theme=theme, css=css, head=matomo) as demo:
     with gr.Row():
         with gr.Column(scale=1):
-            help_button = gr.Button("Help", scale=0)
-            with Modal(visible=False) as help_modal:
-                # TODO: tutorial material?
-                with gr.Tab("How to use App"):
-                    gr.Markdown(load_markdown(None, "how_it_works"))
-                with gr.Tab("Contact"):
-                    pass
-
+            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"))
 
     with gr.Tabs(elem_classes="top-navbar") as navbar:
-        with gr.Tab(label="Submit Job") as tab_submit:
+        with gr.Tab(label="Upload") as tab_submit:
             submit.render()
-
         with gr.Tab(label="Result") as tab_visualizer:
             visualizer.render()
 
+        with gr.Tab(label="Export") as tab_export:
+            export.render()
+
     @demo.load()
     def inital_trocr_load():
         TrOCR("Riksarkivet/trocr-base-handwritten-hist-swe-2")
@@ -88,14 +82,13 @@ with gr.Blocks(title="HTRflow", theme=theme, css=css, head=matomo) as demo:
         fn=sync_gradio_object_state,
     )
 
-    help_button.click(lambda: Modal(visible=True), None, help_modal)
+    tab_export.select(
+        inputs=[collection_submit_state, collection_export_state],
+        outputs=[collection_export_state],
+        fn=sync_gradio_object_state,
+    )
 
 demo.queue()
 
 if __name__ == "__main__":
-    demo.launch(
-        server_name="0.0.0.0",
-        server_port=7860,
-        enable_monitoring=True,
-        # show_error=True,
-    )
+    demo.launch(server_name="0.0.0.0", server_port=7860, enable_monitoring=True, show_api=False)

app/tabs/export.py

@@ -0,0 +1,67 @@
+import gradio as gr
+import yaml
+from htrflow.pipeline.pipeline import Pipeline
+from htrflow.volume.volume import Collection
+
+
+def run_htrflow(custom_template_yaml, collection, progress=gr.Progress()):
+    """
+    Executes the HTRflow pipeline based on the provided YAML configuration and batch images.
+    Args:
+        custom_template_yaml (str): YAML string specifying the HTRflow pipeline configuration.
+        batch_image_gallery (list): List of uploaded images to process in the pipeline.
+    Returns:
+        tuple: A collection of processed items, list of exported file paths, and a Gradio update object.
+    """
+
+    if custom_template_yaml is None or len(custom_template_yaml) < 1:
+        gr.Warning("HTRflow: Please insert a HTRflow-yaml template")
+    try:
+        config = yaml.safe_load(custom_template_yaml)
+    except Exception as e:
+        gr.Warning(f"HTRflow: Error loading YAML configuration: {e}")
+        return gr.skip()
+
+    pipe = Pipeline.from_config(config)
+
+    collection: Collection = pipe.run(collection, progress=progress)
+
+    gr.Info("HTRflow: Export complete!")
+
+    yield collection, gr.skip()
+
+
+with gr.Blocks() as export:
+    collection = gr.State()
+
+    gr.Markdown("## Export")
+    with gr.Group():
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=1):
+                selected_output = gr.Dropdown(
+                    label="Export file format",
+                    info="Select (multiple) what export format you want",
+                    choices=["txt", "alto", "page", "json"],
+                    multiselect=True,
+                    interactive=True,
+                )
+                name_of_files = gr.Textbox(
+                    label="File name",
+                    info="All files will be given the same name with a suffix of the file extension",
+                    placeholder="my_htr_file",
+                )
+
+            with gr.Column(scale=1):
+                download_files = gr.Files(interactive=False)
+    with gr.Row():
+        export_button = gr.Button("Export", scale=0, min_width=200, variant="primary")
+
+        @export_button.click(inputs=[], outputs=[])
+        def blable():
+            pass
+
+
+# TODO: test pylaia works...
+# TODO: add other pipeliens for other language like english and hebrew model?
+# TODO: add other pipeliens for other language like english and hebrew model?
+# TODO kolla över toast. toast vid export?

app/tabs/submit.py

@@ -1,16 +1,14 @@
-import glob
+import logging
+import os
 import time
-import uuid
+
 import gradio as gr
+import yaml
+from gradio_modal import Modal
 from htrflow.pipeline.pipeline import Pipeline
-from htrflow.pipeline.steps import init_step
-import os
-import logging
+from htrflow.pipeline.steps import auto_import, init_step
 from htrflow.volume.volume import Collection
 
-from htrflow.pipeline.steps import auto_import
-import yaml
-
 logger = logging.getLogger(__name__)
 
 # Max number of images a user can upload at once
@@ -19,23 +17,23 @@ MAX_IMAGES = int(os.environ.get("MAX_IMAGES", 5))
 # Example pipelines
 PIPELINES = {
     "Running text (Swedish)": {
-        "file": "app/assets/templates/2_nested.yaml",
+        "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/1_simple.yaml",
+        "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",
-        ]
+        ],
     },
 }
 
@@ -46,21 +44,14 @@ GRADIO_CACHE = ".gradio_cache"
 EXAMPLES_DIRECTORY = os.path.join(GRADIO_CACHE, "examples")
 
 if os.environ.get("GRADIO_CACHE_DIR", GRADIO_CACHE) != GRADIO_CACHE:
-    logger.warning(
-        "Setting GRADIO_CACHE_DIR to '%s' (overriding a previous value)."
-    )
+    logger.warning("Setting GRADIO_CACHE_DIR to '%s' (overriding a previous value).")
 
 
 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):
         """
@@ -88,31 +79,6 @@ class PipelineWithProgress(Pipeline):
         return collection
 
 
-def rewrite_export_dests(config):
-    """
-    Rewrite the 'dest' in all 'Export' steps to include 'tmp' and a UUID.
-    Returns:
-        - A new config object with the updated 'dest' values.
-        - A list of all updated 'dest' paths.
-    """
-    new_config = {"steps": []}
-    updated_paths = []
-
-    unique_id = str(uuid.uuid4())
-
-    for step in config.get("steps", []):
-        new_step = step.copy()
-        if new_step.get("step") == "Export":
-            settings = new_step.get("settings", {})
-            if "dest" in settings:
-                new_dest = os.path.join("tmp", unique_id, settings["dest"])
-                settings["dest"] = new_dest
-                updated_paths.append(new_dest)
-        new_config["steps"].append(new_step)
-
-    return new_config, updated_paths
-
-
 def run_htrflow(custom_template_yaml, batch_image_gallery, progress=gr.Progress()):
     """
     Executes the HTRflow pipeline based on the provided YAML configuration and batch images.
@@ -131,68 +97,32 @@ def run_htrflow(custom_template_yaml, batch_image_gallery, progress=gr.Progress(
         gr.Warning(f"HTRflow: Error loading YAML configuration: {e}")
         return gr.skip()
 
-    temp_config, tmp_output_paths = rewrite_export_dests(config)
-
     progress(0, desc="HTRflow: Starting")
     time.sleep(0.3)
 
-    print(temp_config)
-
     if batch_image_gallery is None:
         gr.Warning("HTRflow: You must upload atleast 1 image or more")
 
     images = [temp_img[0] for temp_img in batch_image_gallery]
 
-    pipe = PipelineWithProgress.from_config(temp_config)
+    pipe = PipelineWithProgress.from_config(config)
     collections = auto_import(images)
 
-    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")
 
     for collection in collections:
-        if "labels" in temp_config:
-            collection.set_label_format(**temp_config["labels"])
+        if "labels" in config:
+            collection.set_label_format(**config["labels"])
 
         collection.label = "HTRflow_demo_output"
         collection: Collection = pipe.run(collection, progress=progress)
 
-    exported_files = tracking_exported_files(tmp_output_paths)
-
-    time.sleep(0.5)
     progress(1, desc="HTRflow: Finish")
+    time.sleep(1)
     gr.Info("HTRflow: Finish")
 
-    yield collection, exported_files, gr.skip()
-
-
-def tracking_exported_files(tmp_output_paths):
-    """
-    Look for files with specific extensions in the provided tmp_output_paths,
-    including subdirectories. Eliminates duplicate files.
-
-    Args:
-        tmp_output_paths (list): List of temporary output directories to search.
-
-    Returns:
-        list: Unique paths of all matching files found in the directories.
-    """
-    accepted_extensions = {".txt", ".xml", ".json"}
-
-    exported_files = set()
-
-    print(tmp_output_paths)
-
-    # TODO: fix so that we get the file extension for page and alto...
-
-    for tmp_folder in tmp_output_paths:
-        for ext in accepted_extensions:
-            search_pattern = os.path.join(tmp_folder, "**", f"*{ext}")
-            matching_files = glob.glob(search_pattern, recursive=True)
-            exported_files.update(matching_files)
-
-    return sorted(exported_files)
+    yield collection, gr.skip()
 
 
 def get_pipeline_description(pipeline: str) -> str:
@@ -229,6 +159,7 @@ def get_selected_example_image(event: gr.SelectData) -> str:
     """
     Get path to the selected example image.
     """
+    print([event.value["image"]["path"]])
     return [event.value["image"]["path"]]
 
 
@@ -242,55 +173,88 @@ def get_selected_example_pipeline(event: gr.SelectData) -> str | None:
 
 
 with gr.Blocks() as submit:
-    collection_submit_state = gr.State()
+    gr.Markdown("# Upload")
+    gr.Markdown("Start Here! ")
+    gr.Markdown(
+        "First you upload upload 1 image or multiple images (max 5 images). You can also use directly the Image ID from the National Archives of Sweden to request an image"
+    )
+    gr.Markdown(
+        "Afterward, choice a template from the examples based on your material. This will configure a certain pipeline that fits your image."
+    )
 
+    collection_submit_state = gr.State()
     with gr.Group():
         with gr.Row(equal_height=True):
-            batch_image_gallery = gr.Gallery(
-                file_types=["image"],
-                label="Image to transcribe",
-                interactive=True,
-                object_fit="scale-down",
-                scale=3,
-                preview=True
-            )
-
-            examples = gr.Gallery(
-                all_example_images(),
-                label="Examples",
-                interactive=False,
-                allow_preview=False,
-                object_fit="scale-down",
-                min_width=250,
-            )
+            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,
+                    preview=True,
+                )
+
+            with gr.Column(scale=2):
+                examples = gr.Gallery(
+                    all_example_images(),
+                    label="Examples",
+                    interactive=False,
+                    allow_preview=False,
+                    object_fit="scale-down",
+                    min_width=250,
+                )
+
+                image_iiif_url = gr.Textbox(
+                    label="Images from the National Archives of Sweden",
+                    info="e.g <a href='https://sok.riksarkivet.se/bildvisning/R0002231_00005' target='_blank'>R0002231_00005</a> - Press enter to submit",
+                    placeholder="R0002231_00005",
+                )
+
+                iiif_image_placeholder = gr.Image(visible=False)
 
     with gr.Column(variant="panel", elem_classes="pipeline-panel"):
         gr.HTML("Pipeline", elem_classes="pipeline-header", padding=False)
 
         with gr.Row():
-            pipeline_dropdown = gr.Dropdown(
-                PIPELINES, container=False, min_width=240, scale=0, elem_classes="pipeline-dropdown"
-            )
-            pipeline_description = gr.HTML(
-                value=get_pipeline_description, inputs=pipeline_dropdown, elem_classes="pipeline-description", padding=False
-            )
-
-        with gr.Group():
-            with gr.Accordion("Edit pipeline", open=False):
-                custom_template_yaml = gr.Code(
-                    value=get_yaml, inputs=pipeline_dropdown, language="yaml", container=False
-                )
-                url = "https://ai-riksarkivet.github.io/htrflow/latest/getting_started/pipeline.html#example-pipelines"
-                gr.HTML(
-                    f'See the <a href="{url}">documentation</a> for a detailed description on how to customize HTRflow pipelines.',
-                    padding=False,
-                    elem_classes="pipeline-help",
+            with gr.Column(scale=0):
+                pipeline_dropdown = gr.Dropdown(
+                    PIPELINES,
+                    container=False,
+                    min_width=240,
+                    scale=0,
+                    elem_classes="pipeline-dropdown",
                 )
+            with gr.Column():
+                with gr.Row():
+                    pipeline_description = gr.HTML(
+                        value=get_pipeline_description,
+                        inputs=pipeline_dropdown,
+                        elem_classes="pipeline-description",
+                        padding=False,
+                    )
+                    help_button = gr.Button(
+                        "Edit Pipeline",
+                        scale=0,
+                    )
+
+                with Modal(visible=False) as help_modal:
+                    custom_template_yaml = gr.Code(
+                        value=get_yaml,
+                        inputs=pipeline_dropdown,
+                        language="yaml",
+                        container=False,
+                    )
+                    url = "https://ai-riksarkivet.github.io/htrflow/latest/getting_started/pipeline.html#example-pipelines"
+                    gr.HTML(
+                        f'See the <a href="{url}">documentation</a> for a detailed description on how to customize HTRflow pipelines.',
+                        padding=False,
+                        elem_classes="pipeline-help",
+                    )
 
     with gr.Row():
         run_button = gr.Button("Submit", variant="primary", scale=0, min_width=200)
         progess_bar = gr.Textbox(visible=False, show_label=False)
-        collection_output_files = gr.Files(label="Output Files", scale=0, min_width=400, visible=False)
 
     @batch_image_gallery.upload(
         inputs=batch_image_gallery,
@@ -302,20 +266,26 @@ with gr.Blocks() as submit:
             return gr.update(value=None)
         return images
 
+    def return_iiif_url(image_iiif_url):
+        return f"https://lbiiif.riksarkivet.se/arkis!{image_iiif_url}/full/max/0/default.jpg"
+
+    image_iiif_url.submit(fn=return_iiif_url, inputs=image_iiif_url, outputs=iiif_image_placeholder).then(
+        fn=lambda x: [x], inputs=iiif_image_placeholder, outputs=batch_image_gallery
+    )
+
     run_button.click(
-        lambda: (gr.update(visible=True), gr.update(visible=False)),
-        outputs=[progess_bar, collection_output_files],
+        lambda: gr.update(visible=True),
+        outputs=[progess_bar],
     ).then(
         fn=run_htrflow,
         inputs=[custom_template_yaml, batch_image_gallery],
-        outputs=[collection_submit_state, collection_output_files, progess_bar],
+        outputs=[collection_submit_state, progess_bar],
     ).then(
-        lambda: (gr.update(visible=False), gr.update(visible=True)),
-        outputs=[progess_bar, collection_output_files],
+        lambda: gr.update(visible=False),
+        outputs=[progess_bar],
     )
 
     examples.select(get_selected_example_image, None, batch_image_gallery)
     examples.select(get_selected_example_pipeline, None, pipeline_dropdown)
 
-# TODO: valudate yaml before submitting...?
-# TODO: Add toast gr.Warning: Lose previues run...
+    help_button.click(lambda: Modal(visible=True), None, help_modal)

app/tabs/visualizer.py

@@ -1,18 +1,22 @@
 import gradio as gr
 from jinja2 import Environment, FileSystemLoader
 
-
 _ENV = Environment(loader=FileSystemLoader("app/assets/jinja-templates"))
 _IMAGE_TEMPLATE = _ENV.get_template("image")
 _TRANSCRIPTION_TEMPLATE = _ENV.get_template("transcription")
 
 
 def render_image(collection, current_page_index):
-    return _IMAGE_TEMPLATE.render(page=collection[current_page_index], lines=collection[current_page_index].traverse(lambda node: node.is_line()))
+    return _IMAGE_TEMPLATE.render(
+        page=collection[current_page_index],
+        lines=collection[current_page_index].traverse(lambda node: node.is_line()),
+    )
 
 
 def render_transcription(collection, current_page_index):
-    regions = collection[current_page_index].traverse(lambda node: node.children and all(child.is_line() for child in node))
+    regions = collection[current_page_index].traverse(
+        lambda node: node.children and all(child.is_line() for child in node)
+    )
     return _TRANSCRIPTION_TEMPLATE.render(regions=regions)
 
 
@@ -46,7 +50,8 @@ def update_image_caption(collection, current_page_index):
 
 
 with gr.Blocks() as visualizer:
-
+    gr.Markdown("# Results")
+    gr.Markdown("Below is the results from the job that were submitted")
     with gr.Row():
         # Columns are needed here to get the scale right. The documentation
         # claims all components have the `scale` argument but it doesn't
@@ -62,10 +67,10 @@ with gr.Blocks() as visualizer:
             gr.Markdown("## Annotated image")
             image = gr.HTML(padding=False, elem_classes="svg-image", container=True)
 
-            image_caption = gr.Markdown()
-            with gr.Row():
-                left = gr.Button("← Previous", visible=False, interactive=False)
-                right = gr.Button("Next →", visible=False)
+            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)
+                right = gr.Button("Next →", visible=False, scale=0)
 
     collection = gr.State()
     current_page_index = gr.State(0)
@@ -80,18 +85,34 @@ with gr.Blocks() as visualizer:
     # - 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_transcription, inputs=[collection, current_page_index], outputs=transcription)
+    collection.change(
+        render_transcription,
+        inputs=[collection, current_page_index],
+        outputs=transcription,
+    )
     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)
+    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(render_transcription, inputs=[collection, current_page_index], outputs=transcription)
+    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(update_image_caption, inputs=[collection, current_page_index], outputs=image_caption)
+    current_page_index.change(
+        update_image_caption,
+        inputs=[collection, current_page_index],
+        outputs=image_caption,
+    )

pyproject.toml

@@ -18,7 +18,7 @@ requires-python = ">=3.10,<3.13"
 
 dependencies = [
     "htrflow==0.2.0",
-    "gradio>=5.11.0",
+    "gradio>=5.15.0",
     "datasets>=3.2.0",
     "pandas>=2.2.3",
     "tqdm>=4.67.1",