Hugging Face's logo

Spaces:
Riksarkivet
/
htr_demo
Running on T4

App Files Community
7
htr_demo
File size: 4,990 Bytes 
5ebeb73
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
import gradio as gr


class GradioConfig:
    def __init__(self, tooltip_dict):
        self.tooltip_dict = tooltip_dict
        self.theme = gr.themes.Base(
            primary_hue="blue",
            secondary_hue="blue",
            neutral_hue="slate",
            font=[
                gr.themes.GoogleFont("Open Sans"),
                "ui-sans-serif",
                "system-ui",
                "sans-serif",
            ],
        )
        self.css = """
        footer {display: none !important;}
        #image_upload {min-height:450}
        #image_upload [data-testid="image"], #image_upload [data-testid="image"] > div{min-height: 450px}
        #gallery {height: 400px} 
        .fixed-height.svelte-g4rw9.svelte-g4rw9 {min-height: 400px;}
                """

    def generate_tooltip_css(self):
        temp_css_list = [self.css]
        for button_id, tooltip_text in self.tooltip_dict.items():
            temp_css_list.append(self.template_tooltip_css(button_id, tooltip_text))

        return "\n".join(temp_css_list)

    def template_tooltip_css(self, button_id, tooltip_text):
        return f"""
        /* For tooltip */
        #{button_id} {{
            position: relative;
        }}

        #{button_id}::before {{
            visibility: hidden; 
            content: '';
            position: absolute;
            bottom: 100%; /* Position on top of the parent element */
            left: 50%;
            margin-left: 5px; /* Adjust for the desired space between the button and tooltip */
            transform: translateY(-50%);
            border-width: 7px;
            border-style: solid;
            border-color: rgba(51, 51, 51, 0) transparent transparent rgba(51, 51, 51, 0); 
            transition: opacity 0.4s ease-in-out, border-color 0.4s ease-in-out;
            opacity: 0;
            z-index: 999;
        }}

        #{button_id}::after {{
            visibility: hidden; 
            content: '{tooltip_text}';
            position: absolute;
            bottom: 100%; /* Position on top of the parent element */
            left: 42%;
            background-color: rgba(51, 51, 51, 0);
            color: white;
            padding: 5px;
            border-radius: 3px;
            z-index: 998;
            opacity: 0;
            transition: opacity 0.4s ease-in-out, background-color 0.4s ease-in-out;
            margin-bottom: 20px !important; /* Increased from 18px to 23px to move tooltip 5px upwards */
            margin-left: 0px; /* Adjust for the arrow width and the desired space between the arrow and tooltip */
            white-space: normal; /* Allows the text to wrap */
            width: 200px; /* Maximum line length before wrapping */
            box-sizing: border-box;
        }}

        #{button_id}.showTooltip::before {{
            visibility: visible;
            opacity: 1;
            border-color: rgba(51, 51, 51, 0.7) transparent transparent rgba(51, 51, 51, 0.7);
        }}

        #{button_id}.showTooltip::after {{
            visibility: visible;
            opacity: 1;
            background-color: rgba(51, 51, 51, 0.7);
        }}
        """

    def add_interaction_to_buttons(self):
        button_ids_list = ", ".join([f"'#{id}'" for id, _ in self.tooltip_dict.items()])
        button_ids = button_ids_list.replace("'", "")
        return f"""
        function monitorButtonHover() {{

            gradioURL = window.location.href
            if (!gradioURL.endsWith('?__theme=dark')) {{
                window.location.replace(gradioURL + '?__theme=dark');
            }}

            const buttons = document.querySelectorAll('{button_ids}');
            buttons.forEach(function(button) {{
                button.addEventListener('mouseenter', function() {{
                    this.classList.add('showTooltip');
                }});

                button.addEventListener('mouseleave', function() {{
                    this.classList.remove('showTooltip');
                }});
            }})
        }}
        """


buttons_with_tooltip = {
    "run_pipeline_button": "Runs HTR on the image. Takes approx 1-2 mins per image (depending on hardware).",
    "clear_button": "Clears all states and resets the entire workflow in the stepwise tool.",
    "region_segment_button": "Segments text regions in the chosen image with the chosen settings.",
    "line_segment_button": "Segments chosen regions from the image gallery into lines segments.",
    "transcribe_button": "Transcribes each line segment into text and streams back the data.",
}
gradio_config = GradioConfig(buttons_with_tooltip)

theme = gradio_config.theme
css = gradio_config.generate_tooltip_css()
js = gradio_config.add_interaction_to_buttons()


if __name__ == "__main__":
    tooltip = GradioConfig({"run_pipeline_button": "this is a tooltop", "clear_button": "this is a tooltop"})
    css = tooltip.generate_tooltip_css()
    js = tooltip.add_interaction_to_buttons()

    print(css)
    print(js)