restructuring the text of the app

app.py

@@ -7,7 +7,6 @@ from helper.gradio_config import css, theme
 from helper.text.text_app import TextApp
 from helper.utils import TrafficDataHandler
 from tabs.about_tab import about_tab
-from tabs.help_tab import help_tab
 from tabs.htr_tool import htr_tool_tab
 from tabs.stepwise_htr_tool import stepwise_htr_tool_tab
 
@@ -17,7 +16,7 @@ with gr.Blocks(title="Riksarkivet", theme=theme, css=css) as demo:
     with gr.Row():
         with gr.Column(scale=1):
             text_ip_output = gr.Markdown(TextApp.demo_version)
-        with gr.Column(scale=1):
+        with gr.Column(scale=2):
             gr.Markdown(TextApp.title_markdown)
         with gr.Column(scale=1):
             gr.Markdown(TextApp.title_markdown_img)
@@ -29,10 +28,7 @@ with gr.Blocks(title="Riksarkivet", theme=theme, css=css) as demo:
         with gr.Tab("Stepwise"):
             stepwise_htr_tool_tab.render()
 
-        with gr.Tab("Help"):
-            help_tab.render()
-
-        with gr.Tab("About"):
+        with gr.Tab("Documentation"):
             about_tab.render()
 
     SECRET_KEY = os.environ.get("AM_I_IN_A_DOCKER_CONTAINER", False)

helper/gradio_config.py

@@ -24,7 +24,8 @@ class GradioConfig:
 
         #download_file > div.empty.svelte-lk9eg8.large.unpadded_box  {min-height: 100px;}
         #gallery_lines > div.preview.svelte-1b19cri > div.thumbnails.scroll-hide.svelte-1b19cri {display: none;}
-
+        
+        .tr-head.svelte-13hsdno>.svelte-13hsdno+.svelte-13hsdno {display: none;} 
                 """
 
     def generate_tooltip_css(self):

helper/text/about/changelog_roadmap/current_changelog.md

@@ -0,0 +1,15 @@
+## Changelog
+
+### [0.0.1] - 2023-10-19
+
+#### Added
+
+- Stepwise feature > Explore results > New Text diff and CER components
+
+#### Fixed
+
+#### Changed
+
+- Layout in both Fast track and Stepwise to improve the UX
+
+#### Removed

helper/text/about/changelog_roadmap/old_changelog.md

@@ -0,0 +1,15 @@
+## Changelog
+
+### [0.0.1] - 2023-10-19
+
+#### Added
+
+- Stepwise feature > Explore results > New Text diff and CER components
+
+#### Fixed
+
+#### Changed
+
+- Layout in both Fast track and Stepwise to improve the UX
+
+#### Removed

helper/text/about/changelog_roadmap/roadmap.md

@@ -0,0 +1,25 @@
+## Roadmap
+
+#### ☑ Release Model on HuggingFace
+
+- Continually retrain and update both segmentation and text-recognition models as more training data becomes available.
+
+#### ☐ Release Training and Eval data on HuggingFace
+
+#### ☐ Specialized TrOCR Model
+
+- Train a TrOCR model specialized on Swedish historical handwritten text.
+- Initialize with a historical BERT-model trained at the Swedish National Archives.
+
+#### ☐ Open-source and package HTR-pipeline for mass HTR
+
+- Develop an easy-to-implement pipeline like the demo.
+- Ensure high modularity:
+- Different segmentation strategies.
+- Integration of models from various frameworks.
+- Effective evaluation methods for entire pipelines and their comparisons.
+- Broad use-cases: Not just running text, but all types of handwritten archives.
+
+#### ☐ Inference Endpoints
+
+- Serve model through inference APIs / Rest APIs with dedicated hardware.

helper/text/{text_roadmap.py → about/contributions/contributions.md}

@@ -1,60 +1,3 @@
-class TextRoadmap:
-    roadmap = """
-    ## Roadmap
-
-    #### ☑ Release Model on HuggingFace
-      - Continually retrain and update both segmentation and text-recognition models as more training data becomes available.
-
-    #### ☐ Release Training and Eval data on HuggingFace
-
-    #### ☐ Specialized TrOCR Model
-      - Train a TrOCR model specialized on Swedish historical handwritten text.
-      - Initialize with a historical BERT-model trained at the Swedish National Archives.
-    
-    #### ☐ Open-source and package HTR-pipeline for mass HTR
-      - Develop an easy-to-implement pipeline like the demo.
-      - Ensure high modularity: 
-        - Different segmentation strategies.
-        - Integration of models from various frameworks.
-        - Effective evaluation methods for entire pipelines and their comparisons.
-      - Broad use-cases: Not just running text, but all types of handwritten archives.
-
-    #### ☐ Inference Endpoints
-      - Serve model through inference APIs / Rest APIs with dedicated hardware.
-
-    """
-
-    changelog = """
-
-## Changelog
-
-### [0.0.1] - 2023-10-19
-
-#### Added
-
-- Stepwise feature > Explore results > New Text diff and CER components
-
-#### Fixed
-
-- -
-
-#### Changed
-
-- Layout in both Fast track and Stepwise to improve the UX
-
-### Removed
-
-- -
-
-    
-"""
-
-    roadmap_image = """  
-    <figure>
-    <img src="https://raw.githubusercontent.com/Borg93/htr_gradio_file_placeholder/main/roadmap_image_2.png" alt="HTR_tool" style="width:70%; display: block; margin-left: auto; margin-right:auto;" >
-    </figure> """
-
-    text_contribution = """
 ## Project Contributions
 
 We extend our deepest gratitude to the individuals and organizations who have made this project possible through their invaluable contributions, especially in providing datasets for training the models. Their generosity and collaboration have significantly propelled the project forward.
@@ -82,6 +25,3 @@ For further details on contributions or if you are interested in contributing, p
 Thank you!
 
 // Riksarkivet
-
-
-"""

helper/text/about/htrflow/htrflow_col1.md

@@ -0,0 +1,11 @@
+## Introduction
+
+The Swedish National Archives introduces a demonstrational end-to-end HTR (Handwritten Text Recognition) pipeline. This pipeline comprises two instance segmentation models: one designated for segmenting text-regions and another for isolating text-lines within these regions, coupled with an HTR model for image-to-text transcription. The objective of this project is to establish a generic pipeline capable of processing running-text documents spanning from 1600 to 1900.
+
+## Usage
+
+It's crucial to emphasize that this application serves primarily for demonstration purposes, aimed at showcasing the various models employed in the current workflow for processing documents with running-text. <br>
+
+For an insight into the upcoming features we are working on:
+
+- Navigate to the > **About** > **Changelog & Roadmap**.

helper/text/about/htrflow/htrflow_col2.md

@@ -0,0 +1,22 @@
+## Source Code
+
+Please fork and leave a star on Github if you like it! The code for this project can be found here:
+
+- [Github](https://github.com/Borg93/htr_gradio)
+  **Note**: We will in the future package all of the code for mass htr (batch inference on multi-GPU setup), but the code is still work in progress.
+
+## Models
+
+The models within this pipeline will be subject to continual retraining and updates as more data becomes accessible. For detailed information about all the models used in this project, please refer to the model cards available on Hugging Face:
+
+- [Riksarkivet/rtmdet_regions](https://huggingface.co/Riksarkivet/rtmdet_regions)
+- [Riksarkivet/rtmdet_lines](https://huggingface.co/Riksarkivet/rtmdet_lines)
+- [Riksarkivet/satrn_htr](https://huggingface.co/https://huggingface.co/Riksarkivet/satrn_htr)
+
+## Datasets
+
+Both train and evaluation datasets for the models will be released in the future here:
+
+- [Riksarkivet/placeholder_region_segmentation](https://huggingface.co/datasets/Riksarkivet/placeholder_region_segmentation)
+- [Riksarkivet/placeholder_line_segmentation](https://huggingface.co/datasets/Riksarkivet/placeholder_line_segmentation)
+- [Riksarkivet/placeholder_htr](https://huggingface.co/datasets/Riksarkivet/placeholder_htr)

helper/text/about/htrflow/htrflow_row1.md

@@ -0,0 +1,3 @@
+## The Pipeline in Overview
+
+The steps in the pipeline can be seen below as follows:

helper/text/about/htrflow/htrflow_tab1.md

@@ -0,0 +1,7 @@
+### Binarization
+
+The reason for binarizing the images before processing them is that we want the models to generalize as well as possible. By training on only binarized images and by binarizing images before running them through the pipeline, we take the target domain closer to the training domain, and ruduce negative effects of background variation, background noise etc., on the final results. The pipeline implements a simple adaptive thresholding algorithm for binarization.
+
+<figure>
+<img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/app_project_bin.png?raw=true" alt="HTR_tool" style="width:70%; display: block; margin-left: auto; margin-right:auto;" >
+</figure>

helper/text/about/htrflow/htrflow_tab2.md

@@ -0,0 +1,7 @@
+### Text-region segmentation
+
+To facilitate the text-line segmentation process, it is advantageous to segment the image into text-regions beforehand. This initial step offers several benefits, including reducing variations in line spacing, eliminating blank areas on the page, establishing a clear reading order, and distinguishing marginalia from the main text. The segmentation model utilized in this process predicts both bounding boxes and masks. Although the model has the capability to predict both, only the masks are utilized for the segmentation tasks of lines and regions. An essential post-processing step involves checking for regions that are contained within other regions. During this step, only the containing region is retained, while the contained region is discarded. This ensures that the final segmented text-regions are accurate and devoid of overlapping or redundant areas.
+
+<figure>
+<img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/app_project_region.png?raw=true" alt="HTR_tool" style="width:70%; display: block; margin-left: auto; margin-right:auto;" >
+</figure>

helper/text/about/htrflow/htrflow_tab3.md

@@ -0,0 +1,7 @@
+### Text-line segmentation
+
+This is also an RTMDet model that's trained on extracting text-lines from cropped text-regions within an image. The same post-processing on the instance segmentation masks is done here as in the text-region segmentation step.
+
+<figure>
+<img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/app_project_line.png?raw=true" alt="HTR_tool" style="width:70%; display: block; margin-left: auto; margin-right:auto;" >
+</figure>

helper/text/about/htrflow/htrflow_tab4.md

@@ -0,0 +1,7 @@
+### HTR
+
+For the text-recognition a SATRN model was trained with mmocr on approximately one million handwritten text-line images ranging from 1600 to 1900. It was trained on a wide variety of archival material to make it generalize as well as possible. See below for detailed evaluation results, and also some finetuning experiments.
+
+<figure>
+<img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/app_project_htr.png?raw=true" alt="HTR_tool" style="width:70%; display: block; margin-left: auto; margin-right:auto;" >
+</figure>

helper/text/docs_strucutre.md

@@ -0,0 +1,20 @@
+## 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.
+
+see image below:
+
+<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:
+
+- [Github Repo](https://github.com/Borg93/htr_gradio_file_placeholder)
+
+**Note**: this repo is an work in progress

helper/text/help/faq.md

@@ -1,9 +0,0 @@
-## Frequently asked questions
-
-WIP
-
-**Q**: <u>Is my data secure?</u>
-**A**: Absolutely. We prioritize user data security and have implemented robust encryption methods to ensure your data remains private and protected.
-
-**Q**: <u>Who can I contact for technical support?</u>
-**A**: Please reach out to our support team at [email protected] for any technical queries.

helper/text/help/faq_discussion/discussion.md

@@ -0,0 +1,11 @@
+## Discussion about the app
+
+If you have suggestions, questions, or would like to discuss improvemnts for the app, please don't hesitate to reach out.
+
+- Open a discussion on [HuggingFace](https://huggingface.co/spaces/Riksarkivet/htr_demo/discussions).
+
+## Contact us
+
+If you prefer email or your question is more sensitive please email.
+
+- Send it to [email protected]

helper/text/help/faq_discussion/faq.md

@@ -0,0 +1,13 @@
+## Frequently Asked Questions
+
+**Q**: <u>Is my data secure? Can I upload my own images?</u>
+**A**: Absolutely. Uploaded files are not saved or stored.
+
+**Q**: <u>Why am I always in a queue?</u>
+**A**: This is due to hardware constraints and rate limits imposed by Hugging Face. For alternative ways to use the app, refer to the **Documentation** tab under **Duplication for Own Use & API**.
+
+**Q**: <u>Why is inference slow?</u>
+**A**: The current speed is due to hardware limitations and the present state of the code. However, we plan to update the application in future releases, which will significantly improve inference times.
+
+**Q**: <u>Is batch inference possible?</u>
+**A**: Not currently, but we plan to add this feature in the future.

helper/text/text_about.py

@@ -1,78 +1,31 @@
-class TextAbout:
-    # About text
-    intro_text = """
-
-    ## Introduction
-    The Swedish National Archives introduces a demonstrational end-to-end HTR (Handwritten Text Recognition) pipeline. This pipeline comprises two instance segmentation models: one designated for segmenting text-regions and another for isolating text-lines within these regions, coupled with an HTR model for image-to-text transcription. The objective of this project is to establish a generic pipeline capable of processing running-text documents spanning from 1600 to 1900.
+from helper.text.markdown_reader import read_markdown
 
-    ## Usage
-    It's crucial to emphasize that this application serves primarily for demonstration purposes, aimed at showcasing the various models employed in the current workflow for processing documents with running-text. <br>
 
-    For an insight into the upcoming features we are working on:
-    -  Navigate to the > **About** > **Roadmap**. 
+class TextAbout:
+    # HTRFLOW
+    htrflow_col1 = read_markdown("helper/text/about/htrflow/htrflow_col1.md")
 
-    To understand how to utilize this application through a REST API, self-host or via Docker, 
-    - Navigate to the > **About** > **How to Use** > **API & Duplicate for Private Use**.
-    
-    """
+    htrflow_col2 = read_markdown("helper/text/about/htrflow/htrflow_col2.md")
 
-    ## The Pipeline in Overview
-    pipeline_overview_text = """
-    ## The Pipeline in Overview
-    
-    The steps in the pipeline can be seen below as follows:
-    """
+    htrflow_row1 = read_markdown("helper/text/about/htrflow/htrflow_row1.md")
 
-    binarization = """
+    htrflow_tab1 = read_markdown("helper/text/about/htrflow/htrflow_tab1.md")
 
-    ### Binarization
-    The reason for binarizing the images before processing them is that we want the models to generalize as well as possible. By training on only binarized images and by binarizing images before running them through the pipeline, we take the target domain closer to the training domain, and ruduce negative effects of background variation, background noise etc., on the final results. The pipeline implements a simple adaptive thresholding algorithm for binarization.
-    <figure>
-    <img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/app_project_bin.png?raw=true" alt="HTR_tool" style="width:70%; display: block; margin-left: auto; margin-right:auto;" >
-    </figure> 
+    htrflow_tab2 = read_markdown("helper/text/about/htrflow/htrflow_tab2.md")
 
-"""
-    text_region_segment = """    
-    ### Text-region segmentation
-    To facilitate the text-line segmentation process, it is advantageous to segment the image into text-regions beforehand. This initial step offers several benefits, including reducing variations in line spacing, eliminating blank areas on the page, establishing a clear reading order, and distinguishing marginalia from the main text. The segmentation model utilized in this process predicts both bounding boxes and masks. Although the model has the capability to predict both, only the masks are utilized for the segmentation tasks of lines and regions. An essential post-processing step involves checking for regions that are contained within other regions. During this step, only the containing region is retained, while the contained region is discarded. This ensures that the final segmented text-regions are accurate and devoid of overlapping or redundant areas.
-    <figure>
-    <img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/app_project_region.png?raw=true" alt="HTR_tool" style="width:70%; display: block; margin-left: auto; margin-right:auto;" >
-    </figure> 
-"""
-    text_line_segmentation = """
-    ### Text-line segmentation
+    htrflow_tab3 = read_markdown("helper/text/about/htrflow/htrflow_tab3.md")
 
-    This is also an RTMDet model that's trained on extracting text-lines from cropped text-regions within an image. The same post-processing on the instance segmentation masks is done here as in the text-region segmentation step.
-    <figure>
-    <img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/app_project_line.png?raw=true" alt="HTR_tool" style="width:70%; display: block; margin-left: auto; margin-right:auto;" >
-    </figure> 
-"""
-    text_htr = """
-    ### HTR
+    htrflow_tab4 = read_markdown("helper/text/about/htrflow/htrflow_tab4.md")
 
-    For the text-recognition a SATRN model was trained with mmocr on approximately one million handwritten text-line images ranging from 1600 to 1900. It was trained on a wide variety of archival material to make it generalize as well as possible. See below for detailed evaluation results, and also some finetuning experiments.
-    <figure>
-    <img src="https://github.com/Borg93/htr_gradio_file_placeholder/blob/main/app_project_htr.png?raw=true" alt="HTR_tool" style="width:70%; display: block; margin-left: auto; margin-right:auto;" >
-    </figure> 
-    """
+    # Contributions
+    contributions = read_markdown("helper/text/about/contributions/contributions.md")
 
-    text_src_code_data_models = """
-    ## Source Code
-    Please fork and leave a star on Github if you like it! The code for this project can be found here:
-    - [Github](https://github.com/Borg93/htr_gradio)
-    **Note**: We will in the future package all of the code for mass htr (batch inference on multi-GPU setup), but the code is still work in progress.
+    # Changelog & Roadmap
+    current_changelog = read_markdown("helper/text/about/changelog_roadmap/current_changelog.md")
 
-    ## The Dataset
-    For a glimpse into the kind of data we're working with, you can explore our sample test data on Hugging Face:
-    - [HuggingFace Dataset Card](https://huggingface.co/datasets/Riksarkivet/test_images_demo)
-    **Note**: This is just a sample. The complete training dataset will be released in the future.
+    old_changelog = read_markdown("helper/text/about/changelog_roadmap/old_changelog.md")
 
-    ## The Models
-    The models within this pipeline will be subject to continual retraining and updates as more data becomes accessible. For detailed information about all the models used in this project, please refer to the model cards available on Hugging Face:
-    - [Riksarkivet/rtmdet_regions](https://huggingface.co/Riksarkivet/rtmdet_regions)
-    - [Riksarkivet/rtmdet_lines](https://huggingface.co/Riksarkivet/rtmdet_lines)
-    - [Riksarkivet/satrn_htr](https://huggingface.co/https://huggingface.co/Riksarkivet/satrn_htr)
-    """
+    roadmap = read_markdown("helper/text/about/changelog_roadmap/roadmap.md")
 
 
 if __name__ == "__main__":

helper/text/text_app.py

@@ -1,16 +1,17 @@
 class TextApp:
-    demo_version = """Demo version 0.0.1"""
+    demo_version = """<em>Version 0.0.1</em>"""
 
     title_markdown = """
 
 
     <h1><center> HTRFLOW </center></h1>
 
-    <h3><center> Swedish National Archives - Riksarkivet </center></h3>"""
+    <p><center>Explore AI models for historical HTR developed by the Swedish National Archives </center></p>"""
 
     title_markdown_img = """
-    <img src="https://raw.githubusercontent.com/Borg93/Riksarkivet_docs/main/docs/assets/fav-removebg-preview.png" width="13%" align="right" margin-right="100" />
-
+    <a href="https://riksarkivet.se">
+    <img src="https://raw.githubusercontent.com/Borg93/Riksarkivet_docs/main/docs/assets/fav-removebg-preview.png" width="17%" align="right" margin-right="100" />
+    </a>
     """
 
 

helper/text/text_help.py

@@ -46,8 +46,16 @@ Follow the instructions below:
     htr_tool_api_text = """
 ## Usage of Client API
 
-For those interested in testing out the demo, it's available to run as a Gradio Python client. To facilitate this, there's a lightweight package called ´gradio_client´ that you can easily install via pip.
-        """
+If you prefer to run **Fast track** programmatically, we offer an API for that purpose.
+
+- Docuemtnation for gradio client with [python](https://www.gradio.app/guides/getting-started-with-the-python-client) 
+- Docuemtnation for gradio client with [javascript](https://www.gradio.app/guides/getting-started-with-the-js-client)
+
+**Note**: More extensive APIs and documentation can be added in the future upon request.
+
+See example below for usage of API in python:
+        
+          """
 
     stepwise_htr_tool_tab1 = """
 ### Tab 1: Region Segmentation
@@ -121,16 +129,18 @@ Alternatively, you can watch the instructional video below, which provides a ste
 </figure> 
 """
     duplicatin_space_htr_text = """
-## Duplicating for own Use
+## Duplicating for own use
 
-It's worth noting that while using any poublic Space as an API is possible, there's a catch. Hugging Face might rate limit you if you send an excessive number of requests in a short period. However, there's a workaround for those who need to make frequent API calls. By duplicating a public Space, you can create your own private Space. This private version allows you to make unlimited requests without any restrictions. So, if you're planning on heavy usage duplicate space:
+Please be aware of certain limitations when using the application:
+- Primarily, this application is designed for demonstration purposes and is not intended for mass HTR.
+- Currently, the Swedish National Archives has constraints on sharing hardware, leading to a queue system for high demand.
+- The demo is hosted on Hugging Face domains, and they may rate-limit you if there's an excessive number of requests in a short timeframe, especially when using the API.
+
+For those requiring heavy usage, you can conveniently duplicate the application.
+- Duplicate [application](https://huggingface.co/spaces/Riksarkivet/htr_demo?duplicate=true). 
+
+By doing so, you'll create your own private app, which allows for unlimited requests without any restrictions. The image below shows the minimum hardware you need to use if you don't have access to hardware youself:
 
-<br>
-<p align="center">
-    <a href="https://huggingface.co/spaces/Riksarkivet/htr_demo?duplicate=true">
-        <img src="https://huggingface.co/datasets/huggingface/badges/raw/main/duplicate-this-space-xl-dark.svg" alt="Badge 1">
-    </a>
-</p>
 """
 
     duplicatin_for_privat = """
@@ -158,7 +168,7 @@ print(job.result())
     output_code_for_api_text = """
 ### Output from the api
 
-The output from the api is currently in the format of Page XML, which can be imported into transkibus or be viewed in this [viewer](https://huggingface.co/spaces/Riksarkivet/Viewer_demo).
+The output from the api is currently in the format of Page XML, which can be imported into this [viewer](https://huggingface.co/spaces/Riksarkivet/Viewer_demo).
 
 
 """
@@ -193,31 +203,13 @@ Loaded as API: http://127.0.0.1:7860/ ✔
 # Output is truncated. View as a scrollable element or open in a text editor. Adjust cell output settings...
  """
 
-    text_faq = read_markdown("helper/text/help/faq.md")
+    text_faq = read_markdown("helper/text/help/faq_discussion/faq.md")
 
     text_contact = """
 
 """
 
-    discussion = """
-    ## Discussion about the app
-
-    If you have suggestions, questions, or would like to discuss our roadmap further, please don't hesitate to reach out.
-    Press badge below to open a discussion on HuggingFace.
-
-    <p align="center">
-        <a href="https://huggingface.co/spaces/Riksarkivet/htr_demo/discussions">
-            <img src="https://huggingface.co/datasets/huggingface/badges/raw/main/open-a-discussion-xl-dark.svg" alt="Badge 1">
-        </a>
-    </p>
-    
-    ## Open discussion
-    DIGG...
-
-    ## Contact us
-    email..
-
-    """
+    text_discussion = read_markdown("helper/text/help/faq_discussion/discussion.md")
 
 
 if __name__ == "__main__":

tabs/about_tab.py

@@ -1,39 +1,71 @@
 import gradio as gr
 
 from helper.text.text_about import TextAbout
-from helper.text.text_roadmap import TextRoadmap
+from helper.text.text_help import TextHowTo
 
 with gr.Blocks() as about_tab:
     with gr.Tabs():
         with gr.Tab("HTRFLOW"):
             with gr.Row():
                 with gr.Column():
-                    gr.Markdown(TextAbout.intro_text)
+                    gr.Markdown(TextAbout.htrflow_col1)
                 with gr.Column():
-                    gr.Markdown(TextAbout.text_src_code_data_models)
+                    gr.Markdown(TextAbout.htrflow_col2)
             with gr.Row():
-                gr.Markdown(TextAbout.pipeline_overview_text)
+                gr.Markdown(TextAbout.htrflow_row1)
             with gr.Row():
                 with gr.Tabs():
                     with gr.Tab("Binarization"):
-                        gr.Markdown(TextAbout.binarization)
+                        gr.Markdown(TextAbout.htrflow_tab1)
                     with gr.Tab("Region segmentation"):
-                        gr.Markdown(TextAbout.text_region_segment)
+                        gr.Markdown(TextAbout.htrflow_tab2)
                     with gr.Tab("Line segmentation"):
-                        gr.Markdown(TextAbout.text_line_segmentation)
+                        gr.Markdown(TextAbout.htrflow_tab3)
                     with gr.Tab("Text recognition"):
-                        gr.Markdown(TextAbout.text_htr)
+                        gr.Markdown(TextAbout.htrflow_tab4)
+
+        with gr.Tab("FAQ & Discussion"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown(TextHowTo.text_faq)
+                with gr.Column():
+                    gr.Markdown(TextHowTo.text_discussion)
 
         with gr.Tab("Contributions"):
             with gr.Row():
-                gr.Markdown(TextRoadmap.text_contribution)
+                gr.Markdown(TextAbout.contributions)
 
         with gr.Tab("Changelog & Roadmap"):
             with gr.Row():
                 with gr.Column():
                     with gr.Accordion("Current Changelog", open=True):
-                        gr.Markdown(TextRoadmap.changelog)
+                        gr.Markdown(TextAbout.current_changelog)
                     with gr.Accordion("Old Changelog", open=False):
-                        pass
+                        gr.Markdown(TextAbout.old_changelog)
                 with gr.Column():
-                    gr.Markdown(TextRoadmap.roadmap)
+                    gr.Markdown(TextAbout.roadmap)
+
+        with gr.Tab("Duplicating for own use & API"):
+            with gr.Row():
+                with gr.Column():
+                    gr.Markdown(TextHowTo.duplicatin_space_htr_text)
+                    gr.Markdown(TextHowTo.figure_htr_hardware)
+                    gr.Markdown(TextHowTo.duplicatin_for_privat)
+
+                with gr.Column():
+                    gr.Markdown(TextHowTo.htr_tool_api_text)
+                    gr.Code(
+                        value=TextHowTo.code_for_api,
+                        language="python",
+                        interactive=False,
+                        show_label=False,
+                    )
+
+                    gr.Markdown(TextHowTo.output_code_for_api_text)
+
+                    gr.Code(
+                        value=TextHowTo.output_code_for_api,
+                        language=None,
+                        interactive=False,
+                        show_label=False,
+                    )

tabs/help_tab.py

@@ -4,13 +4,6 @@ from helper.text.text_help import TextHowTo
 
 with gr.Blocks() as help_tab:
     with gr.Tabs():
-        with gr.Tab("FAQ & Discussion"):
-            with gr.Row():
-                with gr.Column():
-                    gr.Markdown(TextHowTo.text_faq)
-                with gr.Column():
-                    gr.Markdown(TextHowTo.discussion)
-
         with gr.Tab("Fast track"):
             gr.Markdown("WIP")
             pass
@@ -47,33 +40,3 @@ with gr.Blocks() as help_tab:
                                 gr.Markdown("image")
             with gr.Row():
                 gr.Markdown(TextHowTo.stepwise_htr_tool_end)
-
-        with gr.Tab("API"):
-            with gr.Row():
-                with gr.Column():
-                    gr.Markdown(TextHowTo.htr_tool_api_text)
-                    gr.Code(
-                        value=TextHowTo.code_for_api,
-                        language="python",
-                        interactive=False,
-                        show_label=False,
-                    )
-                with gr.Column():
-                    gr.Markdown(TextHowTo.output_code_for_api_text)
-
-                    gr.Code(
-                        value=TextHowTo.output_code_for_api,
-                        language=None,
-                        interactive=False,
-                        show_label=False,
-                    )
-
-            pass
-        with gr.Tab("Duplicating for own use"):
-            with gr.Row():
-                with gr.Column():
-                    gr.Markdown(TextHowTo.duplicatin_space_htr_text)
-                    gr.Markdown(TextHowTo.figure_htr_hardware)
-
-                with gr.Column():
-                    gr.Markdown(TextHowTo.duplicatin_for_privat)

tabs/htr_tool.py

@@ -45,12 +45,13 @@ with gr.Blocks() as htr_tool_tab:
 
                 with gr.Tab("Visualize") as tab_image_viewer_selector:
                     with gr.Row():
-                        gr.Button(
-                            value="Image viewer",
-                            variant="secondary",
-                            link="https://huggingface.co/spaces/Riksarkivet/Viewer_demo",
-                            interactive=True,
-                        )
+                        gr.Markdown("")
+                        #     gr.Button(
+                        #     value="Image viewer",
+                        #     variant="secondary",
+                        #     link="https://huggingface.co/spaces/Riksarkivet/Viewer_demo",
+                        #     interactive=True,
+                        # )
 
                         run_image_visualizer_button = gr.Button(
                             value="Visualize results", variant="primary", interactive=True
@@ -63,7 +64,12 @@ with gr.Blocks() as htr_tool_tab:
                 with gr.Tab("Compare") as tab_model_compare_selector:
                     with gr.Box():
                         gr.Markdown(
-                            "Compare different runs with uploaded Ground Truth and calculate CER. You will also be able to upload output format files"
+                            """
+                            **Work in progress**
+
+                            Compare different runs with uploaded Ground Truth and calculate CER. You will also be able to upload output format files
+
+                            """
                         )
 
                         calc_cer_button_fast = gr.Button("Calculate CER", variant="primary", visible=True)
@@ -80,82 +86,85 @@ with gr.Blocks() as htr_tool_tab:
                             examples_per_page=5,
                         )
 
+                        gr.Markdown(" ")
+
                     with gr.Column(scale=3):
-                        with gr.Row():
-                            with gr.Group():
-                                gr.Markdown("    ⚙️ Settings ")
-                                with gr.Row():
-                                    radio_file_input = gr.CheckboxGroup(
-                                        choices=["Txt", "Page XML"],
-                                        value=["Txt", "Page XML"],
-                                        label="Output file extension",
-                                        # info="Only txt and page xml is supported for now!",
-                                        scale=1,
-                                    )
-                                with gr.Row():
-                                    gr.Checkbox(
-                                        value=True,
-                                        label="Binarize image",
-                                        info="Binarize image to reduce background noise",
-                                    )
-                                    gr.Checkbox(
-                                        value=True,
-                                        label="Output prediction threshold",
-                                        info="Output XML with prediction score",
-                                    )
-
-                                with gr.Accordion("Models", open=False):
-                                    with gr.Group():
-                                        with gr.Row():
-                                            htr_tool_region_segment_model_dropdown = gr.Dropdown(
-                                                choices=["Riksarkivet/rtmdet_region"],
-                                                value="Riksarkivet/rtmdet_region",
-                                                label="Region segmentation models",
-                                                info="More models will be added",
-                                            )
-
-                                            gr.Slider(
-                                                minimum=0.4,
-                                                maximum=1,
-                                                value=0.5,
-                                                step=0.05,
-                                                label="P-threshold",
-                                                info="""Filter confidence score for a prediction score to be considered""",
-                                            )
-
-                                        with gr.Row():
-                                            htr_tool_line_segment_model_dropdown = gr.Dropdown(
-                                                choices=["Riksarkivet/rtmdet_lines"],
-                                                value="Riksarkivet/rtmdet_lines",
-                                                label="Line segmentation models",
-                                                info="More models will be added",
-                                            )
-
-                                            gr.Slider(
-                                                minimum=0.4,
-                                                maximum=1,
-                                                value=0.5,
-                                                step=0.05,
-                                                label="P-threshold",
-                                                info="""Filter confidence score for a prediction score to be considered""",
-                                            )
-
-                                        with gr.Row():
-                                            htr_tool_transcriber_model_dropdown = gr.Dropdown(
-                                                choices=["Riksarkivet/satrn_htr", "microsoft/trocr-base-handwritten"],
-                                                value="Riksarkivet/satrn_htr",
-                                                label="Text recognition models",
-                                                info="More models will be added",
-                                            )
-
-                                            gr.Slider(
-                                                value=0.6,
-                                                minimum=0.5,
-                                                maximum=1,
-                                                label="HTR threshold",
-                                                info="Prediction score threshold for transcribed lines",
-                                                scale=1,
-                                            )
+                        with gr.Group():
+                            gr.Markdown("    ⚙️ Settings ")
+                            with gr.Row():
+                                radio_file_input = gr.CheckboxGroup(
+                                    choices=["Txt", "Page XML"],
+                                    value=["Txt", "Page XML"],
+                                    label="Output file extension",
+                                    info="JSON and ALTO-XML will be added",
+                                    scale=1,
+                                )
+                            with gr.Row():
+                                gr.Checkbox(
+                                    value=True,
+                                    label="Binarize image",
+                                    info="Binarize image to reduce background noise",
+                                )
+                                gr.Checkbox(
+                                    value=True,
+                                    label="Output prediction threshold",
+                                    info="Output XML with prediction score",
+                                )
+
+                            with gr.Accordion("Advanced settings", open=False):
+                                with gr.Group():
+                                    with gr.Row():
+                                        htr_tool_region_segment_model_dropdown = gr.Dropdown(
+                                            choices=["Riksarkivet/rtmdet_region"],
+                                            value="Riksarkivet/rtmdet_region",
+                                            label="Region segmentation models",
+                                            info="More models will be added",
+                                        )
+
+                                        gr.Slider(
+                                            minimum=0.4,
+                                            maximum=1,
+                                            value=0.5,
+                                            step=0.05,
+                                            label="P-threshold",
+                                            info="""Filter confidence score for a prediction score to be considered""",
+                                        )
+
+                                    with gr.Row():
+                                        htr_tool_line_segment_model_dropdown = gr.Dropdown(
+                                            choices=["Riksarkivet/rtmdet_lines"],
+                                            value="Riksarkivet/rtmdet_lines",
+                                            label="Line segmentation models",
+                                            info="More models will be added",
+                                        )
+
+                                        gr.Slider(
+                                            minimum=0.4,
+                                            maximum=1,
+                                            value=0.5,
+                                            step=0.05,
+                                            label="P-threshold",
+                                            info="""Filter confidence score for a prediction score to be considered""",
+                                        )
+
+                                    with gr.Row():
+                                        htr_tool_transcriber_model_dropdown = gr.Dropdown(
+                                            choices=["Riksarkivet/satrn_htr", "microsoft/trocr-base-handwritten"],
+                                            value="Riksarkivet/satrn_htr",
+                                            label="Text recognition models",
+                                            info="More models will be added",
+                                        )
+
+                                        gr.Slider(
+                                            value=0.6,
+                                            minimum=0.5,
+                                            maximum=1,
+                                            label="HTR threshold",
+                                            info="Prediction score threshold for transcribed lines",
+                                            scale=1,
+                                        )
+                                    with gr.Row():
+                                        gr.Markdown("    More settings will be added")
 
                 with gr.Row(visible=False) as image_viewer_tab:
                     text_polygon_dict = gr.Variable()
@@ -169,7 +178,7 @@ with gr.Blocks() as htr_tool_tab:
                         gr.Radio(
                             choices=["Compare Page XML", "Compare different runs"],
                             value="Compare Page XML",
-                            info="Compare different runs from HTRFLOW or with external runs, e.g with Transkibus ",
+                            info="Compare different runs from HTRFLOW or with external runs.",
                         )
                     with gr.Row():
                         gr.UploadButton(label="Run A")

tabs/stepwise_htr_tool.py

@@ -141,12 +141,12 @@ with gr.Blocks() as stepwise_htr_tool_tab:
                                         info="More models will be added",
                                     )
                     with gr.Row():
-                        clear_line_segment_button = gr.Button(
-                            " ",
-                            variant="Secondary",
-                            # elem_id="center_button",
-                            scale=1,
-                        )
+                        # placeholder_line_button = gr.Button(
+                        #     "",
+                        #     variant="secondary",
+                        #     scale=1,
+                        # )
+                        gr.Markdown(" ")
 
                         line_segment_button = gr.Button(
                             "Run",
@@ -156,8 +156,6 @@ with gr.Blocks() as stepwise_htr_tool_tab:
                         )
 
                 with gr.Column(scale=3):
-                    # gr.Markdown("""lorem ipsum""")
-
                     output_line_from_region = gr.Image(
                         label="Segmented lines", type="numpy", interactive="False", height=600
                     )
@@ -199,7 +197,7 @@ with gr.Blocks() as stepwise_htr_tool_tab:
                                 )
 
                     with gr.Row():
-                        clear_transcribe_button = gr.Button(" ", variant="Secondary", visible=True, scale=1)
+                        copy_textarea = gr.Button("Copy Text", variant="secondary", visible=True, scale=1)
 
                         transcribe_button = gr.Button("Run", variant="primary", visible=True, scale=1)
 
@@ -211,6 +209,7 @@ with gr.Blocks() as stepwise_htr_tool_tab:
                             lines=26,
                             value="",
                             show_copy_button=True,
+                            elem_id="textarea_stepwise_3",
                         )
 
         #####################################
@@ -261,6 +260,7 @@ with gr.Blocks() as stepwise_htr_tool_tab:
 
                     with gr.Row(equal_height=False):
                         cer_output = gr.Textbox(label="CER:")
+                        gr.Markdown("")
                         calc_cer_button = gr.Button("Calculate CER", variant="primary", visible=True)
 
                 with gr.Column(scale=1, visible=True):
@@ -283,7 +283,7 @@ with gr.Blocks() as stepwise_htr_tool_tab:
 
     def compute_cer(dataframe_text_index, gt_text_index):
         if gt_text_index is not None and gt_text_index.strip() != "":
-            return cer_metric.compute(predictions=[dataframe_text_index], references=[gt_text_index])
+            return round(cer_metric.compute(predictions=[dataframe_text_index], references=[gt_text_index]), 4)
         else:
             return "Ground truth not provided"
 
@@ -324,6 +324,8 @@ with gr.Blocks() as stepwise_htr_tool_tab:
         ],
     )
 
+    copy_textarea.click(fn=None, _js="""document.querySelector("#textarea_stepwise_3 > label > button").click()""")
+
     transcribe_button.click(
         custom_track.transcribe_text,
         inputs=[inputs_lines_to_transcribe],