data explorer

app/main.py

@@ -1,17 +1,26 @@
+import logging
+
 import gradio as gr
 
 from app.gradio_config import css, theme
 from app.tabs.adv_htrflow_tab import adv_htrflow_pipeline
+from app.tabs.data_explorer_tab import data_explorer
+from app.tabs.examples_tab import examples
 from app.tabs.htrflow_tab import htrflow_pipeline
 from app.tabs.overview_tab import overview, overview_language
 from app.utils.lang_helper import get_tab_updates
 from app.utils.md_helper import load_markdown
 
+logger = logging.getLogger("gradio_log")
+
+
 TAB_LABELS = {
-    "ENG": ["Home", "Simple HTR", "Custom HTR"],
-    "SWE": ["Hem", "Enkel HTR", "Anpassad HTR"],
+    "ENG": ["Home", "Simple HTR", "Custom HTR", "Examples"],
+    "SWE": ["Hem", "Enkel HTR", "Anpassad HTR", "Exempel"],
 }
 
+LANG_CHOICES = ["ENG", "SWE"]
+
 with gr.Blocks(title="HTRflow", theme=theme, css=css) as demo:
     with gr.Row():
         local_language = gr.BrowserState(default_value="ENG", storage_key="selected_language")
@@ -19,7 +28,7 @@ with gr.Blocks(title="HTRflow", theme=theme, css=css) as demo:
 
         with gr.Column(scale=1):
             language_selector = gr.Dropdown(
-                choices=["ENG", "SWE"], value="ENG", container=False, min_width=50, scale=0, elem_id="langdropdown"
+                choices=LANG_CHOICES, value="ENG", container=False, min_width=50, scale=0, elem_id="langdropdown"
             )
 
         with gr.Column(scale=2):
@@ -37,6 +46,12 @@ with gr.Blocks(title="HTRflow", theme=theme, css=css) as demo:
         with gr.Tab(label="Custom HTR") as tab_custom_htr:
             adv_htrflow_pipeline.render()
 
+        with gr.Tab(label="Examples") as tab_examples:
+            examples.render()
+
+        with gr.Tab(label="Data Explorer") as tab_data_explorer:
+            data_explorer.render()
+
     @demo.load(inputs=[local_language], outputs=[language_selector, main_language, overview_language])
     def load_language(saved_values):
         return (saved_values,) * 3
@@ -64,8 +79,8 @@ with gr.Blocks(title="HTRflow", theme=theme, css=css) as demo:
         return (*get_tab_updates(selected_language, TAB_LABELS),)
 
     @main_language.change(inputs=[main_language])
-    def on_language_change(selected_language):
-        print(f"Language changed to: {selected_language}")
+    def log_on_language_change(selected_language):
+        logger.info(f"Language changed to: {selected_language}")
 
 
 demo.queue()

app/tabs/adv_htrflow_tab.py

@@ -1,27 +1,53 @@
+import time
+
 import gradio as gr
 
 with gr.Blocks() as adv_htrflow_pipeline:
     with gr.Row(variant="panel"):
         with gr.Column():
-            gr.Markdown("<h2>Templates</h2>")
             # TODO: We want to either crop or draw polygon or bbox and send it to the custom model. Or just as the image is.
             # TODO: For the viewer we should be able to select from the output of the model what for values we want to
-            gr.ImageMask()
+            # TODO: add batch predictions here..
+            # TODO: add load from s3, local, hf daasets( however everything could go through hf_datasets).
+
+            image_mask = gr.ImageMask(interactive=True)
 
             with gr.Group():
                 with gr.Row(visible=True) as yaml_pipeline:
-                    custom_template_yaml = gr.Code(
-                        value="Paste your custom pipeline here",
-                        language="yaml",
-                        label="yaml",
+                    with gr.Accordion(label="Insert Yaml", open=False):
+                        custom_template_yaml = gr.Code(
+                            value="Paste your custom pipeline here",
+                            language="yaml",
+                            label="yaml",
+                            interactive=True,
+                        )
+                    test = gr.Dropdown(  # TODO: This should be a dropdown to decide input image or mask or s3 or local path
+                        ["Upload", "Draw", "s3", "local"],
+                        value="Upload",
+                        multiselect=False,
+                        label="Upload method",
+                        container=False,
+                        scale=0,
                         interactive=True,
                     )
 
             with gr.Row():
-                gr.Button("Submit", variant="primary", scale=0)
+                run_button = gr.Button("Submit", variant="primary", scale=0)
+                cancel_button = gr.Button(
+                    "stop", variant="stop", scale=0
+                )  # TODO: This should be a cancel button and be hidden until the run button is clicked
+                d = gr.DownloadButton(
+                    "Download the file", visible=True, scale=0
+                )  # TODO: This should be hidden until the run button is clicked
+
+                textbox = gr.Textbox(
+                    scale=0
+                )  # This is for debugging runnr when run button is clicked and the stop button is clicked
+
+                # TODO: add a upload to hf datasets
+                # TODO: add a hf login button to login to upload datasets
 
         with gr.Column():
-            gr.Markdown("<h2>Viewer</h2>")
             with gr.Tabs():
                 with gr.Tab("HTR ouput"):
                     gr.CheckboxGroup(
@@ -30,9 +56,19 @@ with gr.Blocks() as adv_htrflow_pipeline:
                     )
 
                     gr.Image()
-                with gr.Tab("Graph Excution"):
-                    pass
+
                 with gr.Tab("Table"):
                     pass
                 with gr.Tab("Analysis"):
+                    # TODO add https://www.gradio.app/docs/gradio/highlightedtext and graph of run graph
                     pass
+
+        test.select(lambda: gr.update(visible=True), None, image_mask)
+
+        def foo():
+            for i in range(300):
+                yield i
+                time.sleep(0.5)
+
+        click_event = run_button.click(fn=foo, inputs=None, outputs=textbox)
+        cancel_button.click(fn=None, inputs=None, outputs=None, cancels=[click_event])

app/tabs/data_explorer_tab.py

@@ -0,0 +1,63 @@
+import gradio as gr
+import pandas as pd
+from gradio_modal import Modal
+
+output_image_placehholder = gr.Image(label="Output image", height=400, show_share_button=True)
+
+
+def show_warning(selection: gr.SelectData):
+    gr.Warning(f"Your choice is #{selection.index}, with image: {selection.value['image']['path']}!")
+
+
+with gr.Blocks() as data_explorer:
+    with gr.Row(variant="panel"):
+        with gr.Column(scale=1):
+            output_dataframe_pipeline = gr.Textbox(label="Path", info="path s3 or path, hf-dataset.")
+            with gr.Group():
+                (
+                    gr.Dropdown(
+                        ["ran", "swam", "ate", "slept"],
+                        value=["swam", "slept"],
+                        multiselect=True,
+                        label="Activity",
+                        info="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nisl eget ",
+                    ),
+                )
+                gr.Slider(2, 20, value=4, label="Count", info="Choose between 2 and 20")
+                gr.Slider(2, 20, value=4, label="Another", info="Choose between 2 and 20")
+            output_dataframe_pipeline = gr.Textbox(label="search", info="search image bla bla..")
+            gr.Button("Search", variant="primary", scale=0)
+        with gr.Column(scale=4):
+            with gr.Tabs():
+                with gr.Tab("Gallery"):
+                    image_gallery = gr.Gallery(
+                        [
+                            "https://unsplash.com/photos/4oaDBgVROGo/download?ixid=M3wxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE3MTA0NjI1MzZ8&force=true&w=640",
+                            "https://unsplash.com/photos/4oaDBgVROGo/download?ixid=M3wxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE3MTA0NjI1MzZ8&force=true&w=640",
+                            "https://unsplash.com/photos/4oaDBgVROGo/download?ixid=M3wxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE3MTA0NjI1MzZ8&force=true&w=640",
+                            "https://unsplash.com/photos/4oaDBgVROGo/download?ixid=M3wxMjA3fDB8MXxhbGx8NHx8fHx8fDJ8fDE3MTA0NjI1MzZ8&force=true&w=640",
+                        ]
+                        * 10,
+                        allow_preview=False,
+                        label="Image Gallery",
+                        preview=False,
+                        columns=[7],
+                        rows=[10],
+                        show_download_button=True,
+                        show_share_button=True,
+                    )
+                with gr.Tab("Embeddings"):
+                    pass
+                    # TODO: add a embedding plot here
+                    # user needs to login hf and get a datasets with embeddings
+
+        with Modal(visible=False) as gallery_modal:
+            with gr.Row():
+                with gr.Column(scale=0):
+                    gr.Markdown("")
+                with gr.Column(scale=4):
+                    gr.Image()
+                with gr.Column(scale=0):
+                    gr.Markdown("")
+
+            image_gallery.select(fn=show_warning, inputs=None).then(lambda: Modal(visible=True), None, gallery_modal)

app/tabs/examples_tab.py

@@ -0,0 +1,73 @@
+import gradio as gr
+from gradio_modal import Modal
+import pandas as pd
+
+from app.assets.examples import DemoImages
+
+images_for_demo = DemoImages()
+
+
+output_image_placehholder = gr.Image(
+    label="Output image",
+    height=400,
+    show_share_button=True,
+)
+markdown_selected_option = gr.Markdown(container=True)
+
+
+def htr_image_placehholder(txt, method, image):
+    needs_yaml_to_forward_tohtrflow_ = """steps:
+"""
+    print(method)
+
+    return txt, method, image
+
+
+with gr.Blocks() as examples:
+    with gr.Row(variant="panel"):
+        with gr.Column():
+            example_text_input_placeholder = gr.Markdown(visible=False, container=False)
+            example_method_input_placeholder = gr.Markdown(visible=False, container=False)
+            example_text_output_placeholder = gr.Markdown(visible=False, container=False)
+
+            user_image_input = gr.Image(visible=False, container=False)
+
+            gr.Examples(  # TODO: add so example has a alto xml file on hf datasets
+                fn=htr_image_placehholder,
+                examples=images_for_demo.examples_list,
+                inputs=[
+                    example_text_input_placeholder,
+                    example_method_input_placeholder,
+                    user_image_input,
+                ],
+                outputs=[example_text_output_placeholder, markdown_selected_option, output_image_placehholder],
+                cache_examples=True,
+                cache_mode="eager",
+                label="Example images",
+                examples_per_page=6,
+            )
+
+        with gr.Column():
+            with gr.Tabs():
+                with gr.Tab("Viewer"):
+                    with gr.Group():
+                        with gr.Row():
+                            output_image_placehholder.render()
+                        with gr.Row():
+                            markdown_selected_option.render()
+                            show_output_modal = gr.Button("Show output", variant="secondary", scale=0)
+                        with gr.Row():
+                            output_dataframe_pipeline = gr.Textbox(label="Click text", info="click on image bla bla..")
+                with gr.Tab("YAML, DF, Graph?") as htrflow_output_table_tab:
+                    with gr.Group():
+                        with gr.Row():
+                            output_dataframe_pipeline = gr.Image(label="Output image", interactive=False, height="100")
+                        with gr.Row():
+                            output_dataframe_pipeline = gr.Dataframe(label="Output image", col_count=2)
+
+                with Modal(visible=False) as output_modal:
+                    output_files_pipeline = gr.Files(label="Output files", height=100, visible=True, scale=0)
+                    output_yaml_code = gr.Code(language="yaml", label="yaml", interactive=True, visible=True, scale=0)
+                    # TODO: yaml should parse from datasets.. and show the yaml code
+
+        show_output_modal.click(lambda: Modal(visible=True), None, output_modal)

app/tabs/htrflow_tab.py

@@ -1,5 +1,6 @@
 import gradio as gr
 import pandas as pd
+from gradio_modal import Modal
 from jinja2 import Environment, FileSystemLoader
 
 from app.assets.examples import DemoImages
@@ -37,14 +38,6 @@ def submit_button_pipeline_fn(method, input_image, yaml_str):
     return f"Selected Option: {method}", input_image, serialized_files, gr.update(visible=True), df
 
 
-def htr_image_placehholder(txt, method, image):
-    needs_yaml_to_forward_tohtrflow_ = """steps:
-"""
-    print(method)
-
-    return txt, method, image
-
-
 def get_yaml_button_fn(
     method,
     output_formats,
@@ -116,7 +109,7 @@ def get_yaml_button_fn(
         return f"Error generating YAML: {str(e)}"
 
 
-output_image_placehholder = gr.Image(label="Output image", height=500, show_share_button=True)
+output_image_placehholder = gr.Image(label="Output image", height=400, show_share_button=True)
 markdown_selected_option = gr.Markdown(container=True)
 
 inital_state_selection_option = "Simple layout"
@@ -125,105 +118,84 @@ with gr.Blocks() as htrflow_pipeline:
     with gr.Row(variant="panel"):
         with gr.Column():
             # gr.Markdown("<h2>Control Panel</h2>")
-            with gr.Tabs():
-                with gr.Tab("Templates"):
-                    with gr.Group():
-                        example_text_input_placeholder = gr.Markdown(visible=False, container=False)
-                        example_method_input_placeholder = gr.Markdown(visible=False, container=False)
-                        example_text_output_placeholder = gr.Markdown(visible=False, container=False)
-
-                        selected_option = gr.State(inital_state_selection_option)
-                        dummy_none = gr.State(0)
-
-                        user_image_input = gr.Image(
-                            interactive=True, sources=["upload", "clipboard"], label="Input image", height=300
-                        )
-
-                        template_method_radio = gr.Dropdown(
-                            [inital_state_selection_option, "Nested segmentation", "Tables"],
-                            value=inital_state_selection_option,
-                            label="Select template",
-                            info="Will add more templates later!",
-                        )
-
-                        with gr.Row() as simple_pipeline:
-                            with gr.Column():
-                                with gr.Row():
-                                    simple_segment_model = gr.Textbox(
-                                        "model1", label="Segmentation", info="Info about the Segmentation model"
-                                    )
-                                    simple_segment_model_type = gr.Dropdown(
-                                        choices=["yolo"], value="yolo", label="Segmentation", info="Model"
-                                    )
-                                with gr.Row():
-                                    simple_htr_model = gr.Textbox(
-                                        "model1", label="HTR", info="Info about the HTR model"
-                                    )
-                                    simple_htr_model_type = gr.Dropdown(
-                                        choices=["TrOCR"], value="TrOCR", label="HTR", info="Model"
-                                    )
-
-                        with gr.Row(visible=False) as nested_pipeline:
-                            with gr.Column():
-                                with gr.Row():
-                                    nested_segment_model_1 = gr.Textbox(
-                                        "model1", label="Segmentation", info="Info about the Segmentation model"
-                                    )
-                                    nested_segment_model_1_type = gr.Dropdown(
-                                        choices=["yolo"], value="yolo", label="Segmentation", info="Model"
-                                    )
-                                with gr.Row():
-                                    nested_segment_model_2 = gr.Textbox(
-                                        "model2", label="Segmentation", info="Info about the Segmentation model"
-                                    )
-                                    nested_segment_model_2_type = gr.Dropdown(
-                                        choices=["yolo"], value="yolo", label="Segmentation", info="Model"
-                                    )
-                                with gr.Row():
-                                    nested_htr_model = gr.Textbox(
-                                        "model1", label="HTR", info="Info about the HTR model"
-                                    )
-                                    nested_htr_model_type = gr.Dropdown(
-                                        choices=["TrOCR"], value="TrOCR", label="HTR", info="Model"
-                                    )
-
-                        with gr.Row(visible=False) as table_pipeline:
-                            with gr.Column():
-                                gr.Textbox("WIP")
-                        with gr.Row():
-                            output_formats = gr.Dropdown(
-                                choices=["txt", "alto", "page"],
-                                value="txt",
-                                multiselect=True,
-                                label="Serialized Output",
-                                info="Supported format are: ...",
-                            )
-
-                    with gr.Row():
-                        submit_button_pipeline = gr.Button("Submit", variant="primary", scale=0)
-                        get_yaml_button = gr.Button("Get Yaml", variant="secondary", scale=0)
-
-                with gr.Tab("Examples") as examples_tab:
-                    # TODO:  Perhaps we should move examples to a seperate tab for simplicity?
-                    gr.Examples(
-                        fn=htr_image_placehholder,
-                        examples=images_for_demo.examples_list,
-                        inputs=[
-                            example_text_input_placeholder,
-                            example_method_input_placeholder,
-                            user_image_input,
-                        ],
-                        outputs=[example_text_output_placeholder, markdown_selected_option, output_image_placehholder],
-                        cache_examples=True,
-                        cache_mode="lazy",
-                        label="Example images",
-                        examples_per_page=7,
+
+            with gr.Group():
+                example_text_input_placeholder = gr.Markdown(visible=False, container=False)
+                example_method_input_placeholder = gr.Markdown(visible=False, container=False)
+                example_text_output_placeholder = gr.Markdown(visible=False, container=False)
+
+                selected_option = gr.State(inital_state_selection_option)
+                dummy_none = gr.State(0)
+
+                user_image_input = gr.Image(
+                    interactive=True, sources=["upload", "clipboard"], label="Input image", height=300
+                )
+
+                template_method_radio = gr.Dropdown(
+                    [inital_state_selection_option, "Nested segmentation", "Tables"],
+                    value=inital_state_selection_option,
+                    label="Select template",
+                    info="Will add more templates later!",
+                )
+
+                with gr.Accordion(label="Pipeline", open=False):
+                    with gr.Row() as simple_pipeline:
+                        with gr.Column():
+                            with gr.Row(): # TODO: use dynamic rendering instead to make it more clean :https://www.youtube.com/watch?v=WhAMvOEOWJw&ab_channel=HuggingFace
+                                simple_segment_model = gr.Textbox(
+                                    "model1", label="Segmentation", info="Info about the Segmentation model"
+                                )
+                                simple_segment_model_type = gr.Dropdown(
+                                    choices=["yolo"], value="yolo", label="Segmentation", info="Model"
+                                )
+                            with gr.Row():
+                                simple_htr_model = gr.Textbox("model1", label="HTR", info="Info about the HTR model")
+                                simple_htr_model_type = gr.Dropdown(
+                                    choices=["TrOCR"], value="TrOCR", label="HTR", info="Model"
+                                )
+
+                    with gr.Row(visible=False) as nested_pipeline:
+                        with gr.Column():
+                            with gr.Row():
+                                nested_segment_model_1 = gr.Textbox(
+                                    "model1", label="Segmentation", info="Info about the Segmentation model"
+                                )
+                                nested_segment_model_1_type = gr.Dropdown(
+                                    choices=["yolo"], value="yolo", label="Segmentation", info="Model"
+                                )
+                            with gr.Row():
+                                nested_segment_model_2 = gr.Textbox(
+                                    "model2", label="Segmentation", info="Info about the Segmentation model"
+                                )
+                                nested_segment_model_2_type = gr.Dropdown(
+                                    choices=["yolo"], value="yolo", label="Segmentation", info="Model"
+                                )
+                            with gr.Row():
+                                nested_htr_model = gr.Textbox("model1", label="HTR", info="Info about the HTR model")
+                                nested_htr_model_type = gr.Dropdown(
+                                    choices=["TrOCR"], value="TrOCR", label="HTR", info="Model"
+                                )
+
+                    with gr.Row(visible=False) as table_pipeline:
+                        with gr.Column():
+                            gr.Textbox("WIP")
+                with gr.Row():
+                    output_formats = gr.Dropdown(
+                        choices=["txt", "alto", "page"],
+                        value="txt",
+                        multiselect=True,
+                        label="Serialized Output",
+                        info="Supported format are: ...",
                     )
 
+            with gr.Row():
+                submit_button_pipeline = gr.Button("Submit", variant="primary", scale=0)
+                get_yaml_button = gr.Button("Get Yaml", variant="secondary", scale=0)
+                output_files_pipeline = gr.Files(label="Output files", height=100, visible=False)
+
         with gr.Column():
-            # gr.Markdown("<h2>Output Panel</h2>")
             with gr.Tabs():
-                with gr.Tab("Viewer"):  # interactive=False, elem_id="htrflowouttab"
+                with gr.Tab("Viewer"):
                     with gr.Group():
                         with gr.Row():
                             output_image_placehholder.render()
@@ -238,8 +210,14 @@ with gr.Blocks() as htrflow_pipeline:
                         with gr.Row():
                             output_dataframe_pipeline = gr.Dataframe(label="Output image", col_count=2)
 
-            output_files_pipeline = gr.Files(label="Output files", height=100, visible=False)
-            output_yaml_code = gr.Code(language="yaml", label="yaml", interactive=True, visible=False)
+            with Modal(visible=False) as yaml_modal:
+                with gr.Row():
+                    with gr.Column(scale=0):
+                        gr.Markdown("")
+                    with gr.Column(scale=4):
+                        output_yaml_code = gr.Code(language="yaml", label="yaml", interactive=True, visible=False)
+                    with gr.Column(scale=0):
+                        gr.Markdown("")
 
     submit_button_pipeline.click(
         get_yaml_button_fn,
@@ -268,7 +246,7 @@ with gr.Blocks() as htrflow_pipeline:
             output_files_pipeline,
             output_dataframe_pipeline,
         ],
-    ).then(dummy_revealer, inputs=dummy_none, outputs=output_yaml_code)
+    )
 
     get_yaml_button.click(
         get_yaml_button_fn,
@@ -294,3 +272,5 @@ with gr.Blocks() as htrflow_pipeline:
         inputs=template_method_radio,
         outputs=[simple_pipeline, nested_pipeline, table_pipeline, selected_option],
     )
+
+    get_yaml_button.click(lambda: Modal(visible=True), None, yaml_modal)

app/translation.yaml

@@ -1,13 +0,0 @@
-ENG:
-  Language: Language
-  Home: Home
-  Simple HTR: Simple HTR
-  Custom HTR: Custom HTR
-  # Other translations...
-
-SWE:
-  Language: Språk
-  Home: Hem
-  Simple HTR: Enkel HTR
-  Custom HTR: Anpassad HTR
-  # Other translations...

pyproject.toml

@@ -23,6 +23,7 @@ dependencies = [
     "datasets>=3.2.0",
     "pandas>=2.2.3",
     "jinja2>=3.1.4",
+    "gradio-modal>=0.0.4",
 ]
 
 [project.urls]

todo.txt

@@ -12,3 +12,6 @@ TODO: ssr mode: https://www.gradio.app/docs/gradio/blocks
 TODO: enable monitoring and test api mode: https://www.gradio.app/docs/gradio/blocks
 TODO: tes usage of modal: https://www.gradio.app/custom-components/gallery
 TODO: new docker container..  https://huggingface.co/spaces/pngwn/gradio-docker/blob/main/Dockerfile, need cuda and uv stuff..
+- use https://www.gradio.app/docs/gradio/set_static_paths
+- https://huggingface.co/spaces/Wauplin/space_to_dataset_saver
+- https://www.freddyboulton.com/blog/gradio-logfire

translation.yaml

@@ -1,10 +0,0 @@
-ENG:
-  Language: Language
-  Home: Home
-  Simple HTR: Simple HTR
-  Custom HTR: Custom HTR
-SWE:
-  Language: Language
-  Home: Home
-  Simple HTR: Simple HTR
-  Custom HTR: Custom HTR