add image

app.py

@@ -60,15 +60,7 @@ with gr.Blocks(title="HTR Riksarkivet", theme=theme, css=css) as demo:
                 with gr.Tab("API"):
                     with gr.Row():
                         with gr.Column():
-                            gr.Markdown(
-                                """
-                                ## 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.
-                                        """
-                            )
-
+                            gr.Markdown(TextHowTo.htr_tool_api_text)
                             gr.Code(
                                 value="""
 from gradio_client import Client # pip install gradio_client
@@ -95,23 +87,7 @@ print(job.result())
                             gr.Markdown(TextHowTo.figure_htr_api)
 
                         with gr.Column():
-                            gr.Markdown(
-                                """
-        ## Duplicating a Space for private use
-        It's worth noting that while using any public 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:
-
-        <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>
-        <br>
-
-        """
-                            )
+                            gr.Markdown(TextHowTo.duplicatin_space_htr_text)
                             gr.Markdown(TextHowTo.figure_htr_hardware)
 
                             gr.Markdown(
@@ -154,16 +130,7 @@ print(job.result())
                         with gr.Column():
                             gr.Markdown(TextRoadmap.roadmap)
                         with gr.Column():
-                            gr.Markdown(TextRoadmap.notebook)
-
-                            gr.Markdown(
-                                """
-                                <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>"""
-                            )
+                            gr.Markdown(TextRoadmap.discussion)
 
     demo.load(None, None, None, _js=js)
 

helper/text/text_howto.py

@@ -45,6 +45,13 @@ The Stepwise HTR Tool also provides a dedicated Explore Results tab, allowing yo
 
 """
 
+    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.
+        """
+
     stepwise_htr_tool_tab1 = """
 ### Tab 1: Region Segmentation
 The Region Segmentation tab allows you to perform the initial step of segmenting the handwritten text into regions of interest. By adjusting the P-threshold and C-threshold settings, you can control the confidence score required for a prediction and the minimum overlap or similarity for a detected region to be considered valid. Additionally, you can select an underlying machine learning model for region segmentation.
@@ -119,6 +126,21 @@ Alternatively, you can watch the instructional video below, which provides a ste
 <img src="https://raw.githubusercontent.com/Borg93/htr_gradio_file_placeholder/main/hardware_example.png" alt="HTR_tool" style="width:75%; display: block; margin-left: auto; margin-right:auto;" >
 <figcaption style="text-align: center;"> <em> Figure - Choose a hardware that has atleast a GPU </em></figcaption>
 </figure> 
+"""
+    duplicatin_space_htr_text = """
+## Duplicating a Space for private use
+It's worth noting that while using any public 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:
+
+<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>
+<br>
+
 """
 
 

helper/text/text_roadmap.py

@@ -22,6 +22,11 @@ class TextRoadmap:
         </a>
     </p>"""
 
+    roadmap_image = """  
+        <p align="center">
+            <img src="" alt="Badge 1">
+    </p>"""
+
 
 if __name__ == "__main__":
     pass