Finished export tab

app/gradio_config.py

@@ -102,4 +102,17 @@ hr.region-divider {
  gap: 1rem;
  text-align: center;
 }
+
+.modal-block {
+  width: 60%;
+  padding: 1rem;
+}
+
+@media (max-width: 1024px) { /* mobile and standing iPads */
+  .modal-block {
+    width: 100%;
+  }
+}
+
+
 """

app/main.py

@@ -1,3 +1,4 @@
+import logging
 import os
 
 import gradio as gr
@@ -10,6 +11,10 @@ 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
 
+# Suppress transformers logging
+logging.getLogger("transformers").setLevel(logging.ERROR)
+
+
 TEMPLATE_YAML_FOLDER = "app/assets/templates"
 gr.set_static_paths(paths=[TEMPLATE_YAML_FOLDER])
 
@@ -28,7 +33,7 @@ def load_markdown(language, section, content_dir="app/content"):
 
 
 def activate_tab(collection):
-    return gr.update(interactive = collection is not None)
+    return gr.update(interactive=collection is not None)
 
 
 matomo = """

app/tabs/export.py

@@ -1,67 +1,97 @@
+import os
+import shutil
+from pathlib import Path
+
 import gradio as gr
-import yaml
-from htrflow.pipeline.pipeline import Pipeline
 from htrflow.volume.volume import Collection
 
+DEFAULT_C = "txt"
+CHOICES = ["txt", "alto", "page", "json"]
+
+current_dir = Path(__file__).parent
 
-def run_htrflow(custom_template_yaml, collection, progress=gr.Progress()):
+
+def rename_files_in_directory(directory, fmt):
     """
-    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 fmt is "alto" or "page", rename each file in the directory so that its
+    base name ends with _{fmt} (if it doesn't already). For other formats, leave
+    the file names unchanged.
+    Returns a list of the (new or original) file paths.
     """
+    renamed = []
+    for root, _, files in os.walk(directory):
+        for file in files:
+            old_path = os.path.join(root, file)
+
+            if fmt in ["alto", "page"]:
+                name, ext = os.path.splitext(file)
+
+                if not name.endswith(f"_{fmt}"):
+                    new_name = f"{name}_{fmt}{ext}"
+                    new_path = os.path.join(root, new_name)
+                    os.rename(old_path, new_path)
+                    renamed.append(new_path)
+                else:
+                    renamed.append(old_path)
+            else:
+                renamed.append(old_path)
+    return renamed
+
+
+def export_files(file_formats, collection: Collection, req: gr.Request):
+    if len(file_formats) < 1:
+        gr.Warning("No export file format was selected. Please select a File format")
+        return gr.skip()
 
-    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}")
+    if collection is None:
+        gr.Warning("No image has been transcribed yet. Please go to the Upload tab")
         return gr.skip()
 
-    pipe = Pipeline.from_config(config)
+    temp_user_dir = current_dir / str(req.session_hash)
+    temp_user_dir.mkdir(exist_ok=True)
 
-    collection: Collection = pipe.run(collection, progress=progress)
+    all_renamed_files = []
+    for fmt in file_formats:
+        temp_user_file_dir = os.path.join(temp_user_dir, fmt)
+        collection.save(directory=temp_user_file_dir, serializer=fmt)
+        renamed = rename_files_in_directory(temp_user_file_dir, fmt)
+        all_renamed_files.extend(renamed)
 
-    gr.Info("HTRflow: Export complete!")
+    unique_files = list(dict.fromkeys(all_renamed_files))
 
-    yield collection, gr.skip()
+    return unique_files, temp_user_dir
 
 
 with gr.Blocks() as export:
     collection = gr.State()
+    temp_state = 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"],
+    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,
                 )
-                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",
-                )
+                download_files = gr.Files(label="Download files", interactive=False)
+        with gr.Column(scale=1):
+            pass
 
-            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?
+        export_button.click(
+            fn=export_files,
+            inputs=[export_file_format, collection],
+            outputs=[download_files, temp_state],
+        ).then(
+            fn=lambda folder: shutil.rmtree(folder) if folder else None,
+            inputs=temp_state,
+            outputs=None,
+        )

app/tabs/submit.py

@@ -6,7 +6,7 @@ import gradio as gr
 import yaml
 from gradio_modal import Modal
 from htrflow.pipeline.pipeline import Pipeline
-from htrflow.pipeline.steps import auto_import, init_step
+from htrflow.pipeline.steps import init_step
 from htrflow.volume.volume import Collection
 
 logger = logging.getLogger(__name__)
@@ -106,22 +106,20 @@ def run_htrflow(custom_template_yaml, batch_image_gallery, progress=gr.Progress(
 
     images = [temp_img[0] for temp_img in batch_image_gallery]
 
+    collection = Collection(images)
+
     pipe = PipelineWithProgress.from_config(config)
-    collections = auto_import(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 config:
-            collection.set_label_format(**config["labels"])
+    collection.label = "demo_output"
 
-        collection.label = "HTRflow_demo_output"
-        collection: Collection = pipe.run(collection, progress=progress)
+    collection = pipe.run(collection, progress=progress)
 
-    progress(1, desc="HTRflow: Finish")
-    time.sleep(1)
-    gr.Info("HTRflow: Finish")
+    progress(1, desc="HTRflow: Finish, redirecting to 'Results tab'")
+    time.sleep(2)
+    gr.Info("Image were succesfully transcribed ✨")
 
     yield collection, gr.skip()
 
@@ -160,7 +158,6 @@ 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"]]
 
 
@@ -205,22 +202,21 @@ with gr.Blocks() as submit:
                     object_fit="scale-down",
                     min_width=250,
                 )
-
-                image_id = gr.Textbox(
+                image_iiif_url = gr.Textbox(
                     label="Upload by image ID",
                     info=(
                         "Use any image from our digitized archives by pasting its image ID found in the "
                         "<a href='https://sok.riksarkivet.se/bildvisning/R0002231_00005' target='_blank'>image viewer</a>. "
                         "Press enter to submit."
                     ),
-                    placeholder="R0002231_00005",
+                    placeholder="R0002231_00005, R0002231_00006",
                 )
 
-    gr.Markdown("## Settings")
-    gr.Markdown("Select a pipeline that suits your image. You can edit the pipeline if you need to customize it further.")
-
     with gr.Column(variant="panel", elem_classes="pipeline-panel"):
-        gr.HTML("Pipeline", elem_classes="pipeline-header", padding=False)
+        gr.Markdown("## Settings")
+        gr.Markdown(
+            "Select a pipeline that suits your image. You can edit the pipeline if you need to customize it further."
+        )
 
         with gr.Row():
             with gr.Column(scale=0):
@@ -232,8 +228,12 @@ with gr.Blocks() as submit:
                     elem_classes="pipeline-dropdown",
                 )
 
-            with gr.Column():
+            with gr.Column(scale=0, min_width=100):
                 edit_pipeline_button = gr.Button("Edit", scale=0)
+            with gr.Column(scale=3):
+                progess_bar = gr.Textbox(visible=False, show_label=False)
+            with gr.Column(scale=0, min_width=20):
+                pass
 
         pipeline_description = gr.HTML(
             value=get_pipeline_description,
@@ -242,23 +242,34 @@ with gr.Blocks() as submit:
             padding=False,
         )
 
-    with Modal(visible=False) as edit_pipeline_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 Modal(
+        visible=False,
+    ) as edit_pipeline_modal:
+        with gr.Column():
+            gr.Markdown(
+                """
+                ## Edit Pipeline
+                The code snippet below is a YAML file that the HTRflow app uses to process the image. If you have chosen an
+                image from the "Examples" section, the YAML is already a pre-made template tailored to fit the example image.
+
+                Edit pipeline if needed:
+                """
+            )
+            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("Transcribe", variant="primary", scale=0, min_width=200)
-        progess_bar = gr.Textbox(visible=False, show_label=False)
 
     @batch_image_gallery.upload(
         inputs=batch_image_gallery,
@@ -270,18 +281,20 @@ with gr.Blocks() as submit:
             return gr.update(value=None)
         return images
 
-    image_id.submit(fn=get_image_from_image_id, inputs=image_id, outputs=batch_image_gallery)
+    def return_iiif_url(image_ids):
+        if isinstance(image_ids, str):
+            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
+        ]
+
+    image_iiif_url.submit(fn=return_iiif_url, inputs=image_iiif_url, outputs=batch_image_gallery)
 
     run_button.click(
-        lambda: gr.update(visible=True),
-        outputs=[progess_bar],
-    ).then(
         fn=run_htrflow,
         inputs=[custom_template_yaml, batch_image_gallery],
-        outputs=[collection_submit_state, progess_bar],
-    ).then(
-        lambda: gr.update(visible=False),
-        outputs=[progess_bar],
+        outputs=[collection_submit_state, batch_image_gallery],
     )
 
     examples.select(get_selected_example_image, None, batch_image_gallery)

app/tabs/visualizer.py

@@ -1,4 +1,5 @@
 import gradio as gr
+from htrflow.volume.volume import Collection
 from jinja2 import Environment, FileSystemLoader
 
 _ENV = Environment(loader=FileSystemLoader("app/assets/jinja-templates"))
@@ -6,21 +7,21 @@ _IMAGE_TEMPLATE = _ENV.get_template("image")
 _TRANSCRIPTION_TEMPLATE = _ENV.get_template("transcription")
 
 
-def render_image(collection, current_page_index):
+def render_image(collection: Collection, current_page_index):
     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):
+def render_transcription(collection: Collection, current_page_index):
     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)
 
 
-def toggle_navigation_button(collection):
+def toggle_navigation_button(collection: Collection):
     visible = len(collection.pages) > 1
     return gr.update(visible=visible)
 
@@ -30,12 +31,12 @@ def activate_left_button(current_page_index):
     return gr.update(interactive=interactive)
 
 
-def activate_right_button(collection, current_page_index):
+def activate_right_button(collection: Collection, current_page_index):
     interactive = current_page_index + 1 < len(collection.pages)
     return gr.update(interactive=interactive)
 
 
-def right_button_click(collection, current_page_index):
+def right_button_click(collection: Collection, current_page_index):
     max_index = len(collection.pages) - 1
     return min(max_index, current_page_index + 1)
 
@@ -44,17 +45,18 @@ def left_button_click(current_page_index):
     return max(0, current_page_index - 1)
 
 
-def update_image_caption(collection, current_page_index):
+def update_image_caption(collection: Collection, current_page_index):
     n_pages = len(collection.pages)
     return f"Image {current_page_index + 1} of {n_pages}: `{collection[current_page_index].label}`"
 
 
 with gr.Blocks() as visualizer:
     gr.Markdown("# Result")
-    gr.Markdown("The image to the left shows where HTRflow found text in the image. The transcription can be seen to the right.")
+    gr.Markdown(
+        "The image to the left shows where HTRflow found text in the image. The transcription can be seen to the right."
+    )
 
     with gr.Row():
-
         # Annotated image panel
         with gr.Column(scale=2):
             gr.Markdown("## Annotated image")
@@ -70,7 +72,6 @@ with gr.Blocks() as visualizer:
             gr.Markdown("## Transcription")
             transcription = gr.HTML(elem_classes="transcription", container=True, max_height="60vh")
 
-
     collection = gr.State()
     current_page_index = gr.State(0)