Merge templating and submit job tabs

- Moved contents and functionality from 'Templating' tab to 'Submit Job' tab
- Removed the 'Templating' tab

app/gradio_config.py

@@ -46,4 +46,34 @@ hr.region-divider {
   margin-bottom: 0.5em;
 }
 
+.pipeline-panel {
+  background: none;
+  border: solid 1px;
+  border-color: var(--block-border-color);
+}
+
+.pipeline-help {
+  padding: 5px 0 0 0;
+  font-weight: var(--block-info-text-weight);
+  font-size: var(--block-info-text-size);
+  color: var(--block-info-text-color);
+}
+
+.pipeline-help a {
+  color: var(--secondary-400);
+}
+
+.pipeline-help a:hover {
+  color: var(--secondary-500);
+}
+
+.pipeline-header {
+  padding: 2px 0px 0px 2px;
+  color: var(--body-text-color);
+}
+
+.pipeline-description {
+  margin: auto;
+  color: var(--body-text-color);
+}
 """

app/main.py

@@ -2,24 +2,13 @@ import shutil
 import gradio as gr
 import os
 from app.gradio_config import css, theme
-from app.tabs.submit import (
-    submit,
-    custom_template_yaml,
-    collection_submit_state,
-)
+from app.tabs.submit import submit, collection_submit_state
 from app.tabs.visualizer import visualizer, collection as collection_viz_state
-
-from app.tabs.templating import (
-    templating_block,
-    TEMPLATE_IMAGE_FOLDER,
-    TEMPLATE_YAML_FOLDER,
-    template_output_yaml_code,
-)
 from gradio_modal import Modal
 
 from htrflow.models.huggingface.trocr import TrOCR
 
-gr.set_static_paths(paths=[TEMPLATE_IMAGE_FOLDER])
+TEMPLATE_YAML_FOLDER = "app/assets/templates"
 gr.set_static_paths(paths=[TEMPLATE_YAML_FOLDER])
 
 # TODO: fix api/ endpoints..
@@ -78,9 +67,6 @@ with gr.Blocks(title="HTRflow", theme=theme, css=css, head=matomo) as demo:
             gr.Markdown(load_markdown(None, "main_sub_title"))
 
     with gr.Tabs(elem_classes="top-navbar") as navbar:
-        with gr.Tab(label="Templating") as tab_templating:
-            templating_block.render()
-
         with gr.Tab(label="Submit Job") as tab_submit:
             submit.render()
 
@@ -91,40 +77,11 @@ with gr.Blocks(title="HTRflow", theme=theme, css=css, head=matomo) as demo:
     def inital_trocr_load():
         TrOCR("Riksarkivet/trocr-base-handwritten-hist-swe-2")
 
-    @demo.load()
-    def inital_yaml_code():
-        tmp_dir = "tmp/"
-        if os.path.exists(tmp_dir) and os.path.isdir(tmp_dir):
-            shutil.rmtree(tmp_dir)
-
-    @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_gradio_objects(input_value, state_value):
-        """Synchronize the YAML state if there is a mismatch."""
-        return input_value if input_value != state_value else gr.skip()
-
     def sync_gradio_object_state(input_value, state_value):
         """Synchronize the Collection."""
         state_value = input_value
         return state_value if state_value is not None else gr.skip()
 
-    tab_templating.select(
-        inputs=[custom_template_yaml, template_output_yaml_code],
-        outputs=[template_output_yaml_code],
-        fn=sync_gradio_objects,
-    )
-
-    tab_submit.select(
-        inputs=[template_output_yaml_code, custom_template_yaml],
-        outputs=[custom_template_yaml],
-        fn=sync_gradio_objects,
-    )
-
     tab_visualizer.select(
         inputs=[collection_submit_state, collection_viz_state],
         outputs=[collection_viz_state],

app/tabs/submit.py

@@ -11,6 +11,19 @@ from htrflow.pipeline.steps import auto_import
 import yaml
 
 MAX_IMAGES = int(os.environ.get("MAX_IMAGES", 5))  # env: Maximum allowed images
+PIPELINE_DOCUMENTATION = (
+    "https://ai-riksarkivet.github.io/htrflow/latest/getting_started/pipeline.html#example-pipelines"
+)
+PIPELINES = {
+    "Running text (Swedish)": {
+        "file": "app/assets/templates/2_nested.yaml",
+        "description": "This pipeline works well on documents with multiple text regions.",
+    },
+    "Letters (Swedish)": {
+        "file": "app/assets/templates/1_simple.yaml",
+        "description": "This pipeline works well on letters and other documents with only one text region.",
+    },
+}
 
 
 class PipelineWithProgress(Pipeline):
@@ -157,34 +170,52 @@ def tracking_exported_files(tmp_output_paths):
     return sorted(exported_files)
 
 
+def get_description(pipeline: str):
+    return PIPELINES[pipeline]["description"]
+
+
+def get_yaml(pipeline: str):
+    with open(PIPELINES[pipeline]["file"], "r") as f:
+        pipeline = f.read()
+    return pipeline
+
+
 with gr.Blocks() as submit:
     collection_submit_state = gr.State()
+    batch_image_gallery = gr.Gallery(
+        file_types=["image"],
+        label="Upload the images you want to transcribe",
+        interactive=True,
+        object_fit="cover",
+    )
 
-    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,
-                        object_fit="cover",
-                    )
+    with gr.Column(variant="panel", elem_classes="pipeline-panel"):
+        gr.HTML("Pipeline", elem_classes="pipeline-header", padding=False)
 
-                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=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
+            pipeline_dropdown = gr.Dropdown(
+                PIPELINES, container=False, min_width=240, scale=0, elem_classes="pipeline-dropdown"
+            )
+            pipeline_description = gr.HTML(
+                value=get_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
+                )
+                gr.HTML(
+                    f'See the <a href="{PIPELINE_DOCUMENTATION}">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,
         outputs=[batch_image_gallery],

app/tabs/templating.py

@@ -1,190 +0,0 @@
-import gradio as gr
-import os
-import re
-
-
-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"
-
-
-TEMPLATE_IMAGE_FOLDER = "app/assets/images"
-TEMPLATE_YAML_FOLDER = "app/assets/templates"
-
-image_files = get_sorted_files(
-    TEMPLATE_IMAGE_FOLDER, (".png", ".jpg", ".jpeg", ".webp")
-)
-yaml_files = get_sorted_files(TEMPLATE_YAML_FOLDER, (".yaml",))
-
-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 = 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):
-    if yaml_path and os.path.isfile(yaml_path):
-        with open(yaml_path, "r") as file:
-            return file.read()
-    return "YAML content not available"
-
-
-with gr.Blocks() as templating_block:
-    with gr.Row(variant="panel"):
-        with gr.Column(scale=2):
-            with gr.Row():
-                dropdown_selection_template = gr.Dropdown(
-                    label="Choose template",
-                    info="Choice a suitable template for your material",
-                    value="Simple",
-                    choices=["Simple", "Nested", "Custom"],
-                    multiselect=False,
-                    interactive=True,
-                )
-
-                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,
-                )
-
-            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 for HTRflow</p>',
-        visible=True,
-    )
-
-    @dropdown_selection_template.select(
-        inputs=dropdown_selection_template,
-        outputs=[
-            template_image,
-            template_output_yaml_code,
-            custom_dropdown_selection_template,
-        ],
-    )
-    def on_template_select(dropdown_selection_template):
-        if dropdown_selection_template == "Simple":
-            yaml_content = get_yaml_content(yaml_files_numbered[0])
-            return image_files[0], yaml_content, gr.update(visible=False)
-        elif dropdown_selection_template == "Nested":
-            yaml_content = get_yaml_content(yaml_files_numbered[1])
-            return image_files[1], yaml_content, gr.update(visible=False)
-        elif dropdown_selection_template == "Custom":
-            yaml_content = get_yaml_content(yaml_files_c_letter[0])
-            return image_files[2], yaml_content, gr.update(visible=True)
-        else:
-            return gr.Error(
-                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,
-            template_output_yaml_code,
-            custom_dropdown_selection_template,
-        ],
-    )
-
-# TODO: Vi vill ändra namn på på fileerna så man ser vilken extension (format) fileerna är i
-# rimes_test - kopia 2_page
-# .xml
-# 3.5 KB ⇣
-# ×
-# rimes_test - kopia
-# .xml
-# 3.5 KB ⇣
-# ×
-# rimes_test
-# .xml
-# 3.4 KB ⇣
-# ×
-# rimes_test - kopia 2
-# .xml
-# 1.7 KB ⇣
-# ×
-# rimes_test - kopia
-# .xml
-# 1.7 KB ⇣
-# ×
-# rimes_test
-# .xml