finish tabs job and templating

.gitignore

@@ -1,5 +1,7 @@
 venv/
 .vscode/
+.cache/
+outputs/
 
 # Byte-compiled / optimized / DLL files
 */__pycache__

app/main.py

@@ -1,13 +1,13 @@
 import gradio as gr
 
 from app.gradio_config import css, theme
-from app.tabs.adv_htrflow_tab import adv_htrflow_pipeline
-from app.tabs.submit import submit
+from app.tabs.submit import submit, custom_template_yaml
 from app.tabs.examples_tab import examples
 from app.tabs.templating import (
     templating_block,
     TEMPLATE_IMAGE_FOLDER,
     TEMPLATE_YAML_FOLDER,
+    template_output_yaml_code,
 )
 from app.utils.md_helper import load_markdown
 
@@ -34,8 +34,36 @@ with gr.Blocks(title="HTRflow", theme=theme, css=css) as demo:
         with gr.Tab(label="Output & Visualize") as tab_examples:
             examples.render()
 
+    @demo.load(
+        inputs=[template_output_yaml_code],
+        outputs=[template_output_yaml_code],
+    )
+    def inital_yaml_code(template_output_yaml_code):
+        return template_output_yaml_code
+
+    def sync_yaml_state(input_value, state_value):
+        """Synchronize the YAML state if there is a mismatch."""
+        return input_value if input_value != state_value else gr.skip()
+
+    tab_submit.select(
+        inputs=[template_output_yaml_code, custom_template_yaml],
+        outputs=[custom_template_yaml],
+        fn=sync_yaml_state,
+    )
+
+    tab_templating.select(
+        inputs=[custom_template_yaml, template_output_yaml_code],
+        outputs=[template_output_yaml_code],
+        fn=sync_yaml_state,
+    )
+
 
 demo.queue()
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7862, enable_monitoring=False)
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7862,
+        enable_monitoring=False,
+        show_error=True,
+    )

app/tabs/adv_htrflow_tab.py

@@ -1,73 +0,0 @@
-import gradio as gr
-
-
-with gr.Blocks() as adv_htrflow_pipeline:
-    with gr.Row(variant="panel"):
-        with gr.Column(scale=3):
-
-            image_batch_input = gr.Gallery(
-                file_types=["image"],
-                label="Upload images",
-                interactive=True,
-                object_fit="cover",
-                preview=True,
-                columns=5,
-            )
-
-            with gr.Row(visible=True) as yaml_pipeline:
-                with gr.Accordion(label="Run Template", open=False):
-
-                    custom_template_yaml = gr.Code(
-                        value="Paste your custom pipeline here",
-                        language="yaml",
-                        label="yaml",
-                        # show_label=False,
-                        interactive=True,
-                        lines=5,
-                    )
-
-            with gr.Row():
-                run_button = gr.Button("Submit", variant="primary", scale=0)
-                cancel_button = gr.Button(
-                    "stop", variant="stop", scale=0, visible=False
-                )
-                d = gr.DownloadButton(
-                    "Download the file", visible=False, scale=0
-                )  # TODO: This should be hidden until the run button is clicked
-
-                textbox_ = gr.Textbox(scale=0, visible=False)
-
-        with gr.Column(scale=3):
-            with gr.Tabs():
-                with gr.Tab("HTR ouput"):
-                    gr.CheckboxGroup(
-                        ["Reading Order", "Line", "Region", "Word"],
-                        info="Checkboxgroup should be basedon output structure from htrflow",
-                    )
-
-                    gr.Image(
-                        interactive=False,
-                        show_fullscreen_button=True,
-                        show_share_button=True,
-                    )
-
-                with gr.Tab("Table"):
-                    pass
-                with gr.Tab("Analysis"):
-                    # TODO add https://www.gradio.app/docs/gradio/highlightedtext and graph of run graph
-                    pass
-
-        def foo():
-            gr.Info("hello morgan")
-            return gr.update(visible=True), "test"
-
-        click_event = run_button.click(
-            fn=foo, inputs=None, outputs=[cancel_button, textbox_]
-        ).then(fn=lambda: gr.update(visible=False), inputs=None, outputs=cancel_button)
-
-        cancel_button.click(
-            fn=lambda: gr.update(visible=False),
-            inputs=None,
-            outputs=cancel_button,
-            cancels=[click_event],
-        )

app/tabs/submit.py

@@ -1,154 +1,79 @@
 import time
 import gradio as gr
+from htrflow.pipeline.pipeline import Pipeline
+from htrflow.pipeline.steps import auto_import
+import yaml
 
-default_template_yaml = """
-steps:
 
-# Region segmentation
-- step: Segmentation
-    settings:
-    model: yolo
-    model_settings:
-        model: Riksarkivet/yolov9-regions-1
-        revision: 7c44178d85926b4a096c55c89bf224855a201fbf
-    generation_settings:
-        batch_size: 32
-        half: true
-        conf: 0.5  # confidence threshold - keep all boxes with conf > 0.5
+MAX_IMAGES = 5  # Maximum allowed images
 
-# Line segmentation
-- step: Segmentation
-    settings:
-    model: yolo
-    model_settings:
-        model: Riksarkivet/yolov9-lines-within-regions-1
-        revision: ea2f8987cba316abc62762f3030266ec8875338d
-    generation_settings:
-        batch_size: 16
-        half: true
-
-- step: FilterRegionsByShape
-    settings:
-    min_ratio: 0.5  # keep lines that have at least a 1:2 (=0.5) width-to-height ratio
-
-- step: TextRecognition
-    settings:
-    model: ORTWordLevelTrocr
-    model_settings:
-        model: ./model
-    generation_settings:
-        batch_size: 64
-        num_beams: 1
-        max_new_tokens: 64
-
-- step: ReadingOrderMarginalia
-    settings:
-    two_page: true
-
-# Remove garbage lines: anything below 0.7 in confidence
-- step: RemoveLowTextConfidenceLines
-    settings:
-    threshold: 0.7
-
-# Remove garbage regions: any region with mean confidence < 0.75 AFTER the below-0.7 lines have been removed
-- step: RemoveLowTextConfidenceRegions
-    settings:
-    threshold: 0.75
-
-- step: Export
-    settings:
-    dest: output/job
-    format: alto
-    template_dir: /app/config
-    template_name: alto-with-RA-pageID
-
-- step: Export
-    settings:
-    dest: output/job
-    format: json
-    indent: null
-
-# Sets label format to regionX_lineY_wordZ
-labels:
-    level_labels:
-    - region
-    - line
-    - word
-    sep: _
-    template: "{label}{number}"
-"""
 
 with gr.Blocks() as submit:
-
-    # Row 2: Image Upload and Editor
-    with gr.Row(variant="panel"):
-        image_editor = gr.ImageEditor(
-            label="Upload the image you want to transcribe",
-            sources="upload",
-            interactive=True,
-            layers=False,
-            eraser=False,
-            brush=False,
-            height=400,
-            transforms="crop",
-            crop_size="16,5",
-            visible=False,
-        )
-        image_mask = gr.Gallery(
-            file_types=["image"],
-            label="Upload the image you want to transcribe",
-            interactive=True,
-            height=400,
-            object_fit="cover",
-            columns=5,
-        )
-
-    # Row 3: Run Template Accordion
-    with gr.Row():
-        with gr.Accordion(label="Pipeline yaml (expand to customize settings)", open=False):
-            # Add the documentation link with an emoji first
-            docs_link = gr.HTML(
-                value='<p>Bellow is the pipeline yaml that will be used. <a href="https://ai-riksarkivet.github.io/htrflow/latest/getting_started/pipeline.html#example-pipelines" target="_blank">📚 Click here 📚</a> for a detailed description on how to customize the configuration</p>'
-            )
-            # Then, the code block with the template YAML
-            custom_template_yaml = gr.Code(
-                value=default_template_yaml,  # Set the default template YAML here
-                language="yaml",
-                label="yaml",
-                interactive=True,
-                lines=5,
-            )
-
-    # Row 4: Submit and Cancel Buttons
-    with gr.Row():
-        run_button = gr.Button("Submit", variant="primary", scale=0)
-        cancel_button = gr.Button("Stop", variant="stop", scale=0, visible=False)
-        d = gr.DownloadButton("Download the file", visible=False, scale=0)
-        textbox_ = gr.Textbox(scale=0, visible=False)
-
-    # Cancel button functionality
-    cancel_button.click(
-        fn=lambda: gr.update(visible=False),
-        inputs=None,
-        outputs=cancel_button,
+    with gr.Column(variant="panel"):
+        with gr.Group():
+            with gr.Row():
+                with gr.Column(scale=1):
+                    batch_image_gallery = gr.Gallery(
+                        file_types=["image"],
+                        label="Upload the images you want to transcribe",
+                        interactive=True,
+                        height=400,
+                        object_fit="cover",
+                        columns=5,
+                    )
+
+                with gr.Column(scale=1):
+                    custom_template_yaml = gr.Code(
+                        value="",
+                        language="yaml",
+                        label="Pipeline",
+                        interactive=True,
+                    )
+        with gr.Row():
+            run_button = gr.Button("Submit", variant="primary", scale=0, min_width=160)
+
+    @batch_image_gallery.upload(
+        inputs=batch_image_gallery,
+        outputs=[batch_image_gallery],
     )
-
-    # Image Editor Upload handling
-    image_editor.upload(
-        fn=None,
-        inputs=None,
-        outputs=None,
-        js=""" 
-        () => {
-            const button = document.querySelector('button[aria-label="Transform button"][title="Transform button"]');
-            if (button) {
-                button.click();
-                console.log('Transform button clicked.');
-            } else {
-                console.error('Transform button not found.');
-            }
-        }
-        """,
-    ).then(
-        fn=lambda: gr.update(crop=None), inputs=None, outputs=image_editor
+    def validate_images(images):
+        if len(images) > 5:
+            gr.Warning(f"Maximum images you can upload is set to: {MAX_IMAGES}")
+            return gr.update(value=None)
+        return images
+
+    def my_function(custom_template_yaml, batch_image_gallery, progress=gr.Progress()):
+        config = yaml.safe_load(custom_template_yaml)
+
+        image, _ = batch_image_gallery[0]
+
+        pipe = Pipeline.from_config(config)
+        print(batch_image_gallery)
+        collections = auto_import(image)
+
+        label = "HTRflow demo"
+
+        for collection in collections:
+            if "labels" in config:
+                collection.set_label_format(**config["labels"])
+            if label:
+                collection.label = label
+            collection = pipe.run(collection)
+
+        # progress(0, desc="Starting...")
+        # time.sleep(1)
+        # for i in progress.tqdm(range(100)):
+        #     if i == 20:
+        #         gr.Info("hej morgan")
+        #     if i == 50:
+        #         gr.Info("hej morgan2")
+        #     time.sleep(0.1)
+        # gr.Info("hej morgan nu är jag klar")
+        print(collection)
+        return gr.skip()
+
+    run_button.click(
+        fn=my_function,
+        inputs=[custom_template_yaml, batch_image_gallery],
+        outputs=batch_image_gallery,
     )

app/tabs/templating.py

@@ -2,49 +2,65 @@ import gradio as gr
 import os
 import re
 
-template_image_folder = "app/assets/images"
-template_yaml_folder = "app/assets/templates"
-
-image_files = sorted(
-    [
-        os.path.join(template_image_folder, img)
-        for img in os.listdir(template_image_folder)
-        if img.lower().endswith((".png", ".jpg", ".jpeg", ".webp"))
-    ],
-    key=lambda x: (
-        int(re.search(r"\d+", os.path.basename(x)).group())
-        if re.search(r"\d+", os.path.basename(x))
-        else float("inf")
-    ),
-)
 
-yaml_files = [
-    os.path.join(template_yaml_folder, yml)
-    for yml in os.listdir(template_yaml_folder)
-    if yml.lower().endswith(".yaml")
-]
-
-yaml_files_numbered = sorted(
-    [yml for yml in yaml_files if re.match(r"^\d", os.path.basename(yml))],
-    key=lambda x: (
-        int(re.search(r"\d+", os.path.basename(x)).group())
-        if re.search(r"\d+", os.path.basename(x))
-        else float("inf")
-    ),
+def get_sorted_files(folder, extensions):
+    """Retrieve sorted files by numeric value in their names."""
+    return sorted(
+        [
+            os.path.join(folder, file)
+            for file in os.listdir(folder)
+            if file.lower().endswith(extensions)
+        ],
+        key=lambda x: (
+            int(re.search(r"\d+", os.path.basename(x)).group())
+            if re.search(r"\d+", os.path.basename(x))
+            else float("inf")
+        ),
+    )
+
+
+def filter_files_by_prefix(files, prefix_pattern):
+    """Filter files based on a regex prefix pattern."""
+    return [file for file in files if re.match(prefix_pattern, os.path.basename(file))]
+
+
+def clean_file_names(files, prefix_to_remove):
+    """Clean filenames by removing a specific prefix if present."""
+    return [
+        (
+            os.path.basename(file)[len(prefix_to_remove) :]
+            if os.path.basename(file).startswith(prefix_to_remove)
+            else os.path.basename(file)
+        )
+        for file in files
+    ]
+
+
+def get_yaml_content(yaml_path):
+    """Read and return YAML content from a file."""
+    if os.path.isfile(yaml_path):
+        with open(yaml_path, "r") as file:
+            return file.read()
+    return "YAML content not available"
+
+
+# Folder Paths
+TEMPLATE_IMAGE_FOLDER = "app/assets/images"
+TEMPLATE_YAML_FOLDER = "app/assets/templates"
+
+# File Retrieval
+image_files = get_sorted_files(
+    TEMPLATE_IMAGE_FOLDER, (".png", ".jpg", ".jpeg", ".webp")
 )
+yaml_files = get_sorted_files(TEMPLATE_YAML_FOLDER, (".yaml",))
 
-yaml_files_c_letter = [
-    yml for yml in yaml_files if re.match(r"^[cC]", os.path.basename(yml))
-]
+# Categorize YAML Files
+yaml_files_numbered = filter_files_by_prefix(yaml_files, r"^\d")
+yaml_files_c_letter = filter_files_by_prefix(yaml_files, r"^[cC]")
 
-name_yaml_files_c_letter_cleaned = [
-    (
-        os.path.basename(yml)[2:]
-        if os.path.basename(yml).startswith("c_")
-        else os.path.basename(yml)
-    )
-    for yml in yaml_files_c_letter
-]
+# Create Mappings
+name_yaml_files_c_letter_cleaned = clean_file_names(yaml_files_c_letter, "c_")
+name_to_yaml_map = dict(zip(name_yaml_files_c_letter_cleaned, yaml_files_c_letter))
 
 
 def get_yaml_content(yaml_path):
@@ -57,39 +73,52 @@ def get_yaml_content(yaml_path):
 with gr.Blocks() as templating_block:
     with gr.Row(variant="panel"):
         with gr.Column(scale=2):
-            dropdown_selection_template = gr.Dropdown(
-                label="Choice template",
-                info="template info",
-                value="Simple",
-                choices=["Simple", "Nested", "Custom"],
-                max_choices=1,
-                interactive=True,
-            )
-            template_image = gr.Image(
-                label="Example Templates", value=image_files[0], height=400
-            )
+            with gr.Row():
+                dropdown_selection_template = gr.Dropdown(
+                    label="Choose template",
+                    info="template info",
+                    value="Simple",
+                    choices=["Simple", "Nested", "Custom"],
+                    multiselect=False,
+                    interactive=True,
+                )
 
-            custom_dropdown = gr.Dropdown(
-                label="Custom template",
-                info="Choice a different custom templates...",
-                value=name_yaml_files_c_letter_cleaned[0],
-                choices=name_yaml_files_c_letter_cleaned,
-                max_choices=1,
-                interactive=True,
-                visible=False,
-            )
+                custom_dropdown_selection_template = gr.Dropdown(
+                    label="Custom template",
+                    info="Choice a different custom templates...",
+                    value=name_yaml_files_c_letter_cleaned[0],
+                    choices=name_yaml_files_c_letter_cleaned,
+                    multiselect=False,
+                    interactive=True,
+                    visible=False,
+                )
 
-            output_yaml_code = gr.Code(
-                language="yaml",
-                label="yaml",
-                interactive=True,
-                visible=True,
-                lines=15,
-            )
+            with gr.Group():
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        template_image = gr.Image(
+                            label="Example Templates", value=image_files[0], height=400
+                        )
+                    with gr.Column(scale=1):
+
+                        template_output_yaml_code = gr.Code(
+                            language="yaml",
+                            label="Pipeline",
+                            interactive=True,
+                            visible=True,
+                        )
+    docs_link = gr.HTML(
+        value='<p><a href="https://ai-riksarkivet.github.io/htrflow/latest/getting_started/pipeline.html#example-pipelines" target="_blank">📚 Click here 📚</a> for a detailed description on how to customize the configuration</p>',
+        visible=True,
+    )
 
     @dropdown_selection_template.select(
         inputs=dropdown_selection_template,
-        outputs=[template_image, output_yaml_code, custom_dropdown],
+        outputs=[
+            template_image,
+            template_output_yaml_code,
+            custom_dropdown_selection_template,
+        ],
     )
     def on_template_select(dropdown_selection_template):
 
@@ -107,8 +136,37 @@ with gr.Blocks() as templating_block:
                 f"{dropdown_selection_template} - is not a valid Template selection"
             )
 
+    @custom_dropdown_selection_template.select(
+        inputs=custom_dropdown_selection_template,
+        outputs=[template_output_yaml_code],
+    )
+    def on_custom_template_select(custom_template_selection):
+        yaml_path = name_to_yaml_map.get(custom_template_selection)
+
+        if yaml_path:
+            yaml_content = get_yaml_content(yaml_path)
+            return yaml_content
+        else:
+            return gr.Error(
+                f"{custom_template_selection} - is not a valid Custom Template selection"
+            )
+
+    @dropdown_selection_template.select(
+        inputs=dropdown_selection_template,
+        outputs=[template_output_yaml_code],
+    )
+    def check_for_custom_template(dropdown_selection_template):
+        if dropdown_selection_template == "Custom":
+            return gr.update(visible=True)
+        else:
+            return gr.skip()
+
     templating_block.load(
         fn=on_template_select,
         inputs=dropdown_selection_template,
-        outputs=[template_image, output_yaml_code, custom_dropdown],
+        outputs=[
+            template_image,
+            template_output_yaml_code,
+            custom_dropdown_selection_template,
+        ],
     )