fix: scrollbar, feat: download depen

app.py

@@ -1,9 +1,13 @@
+from turtle import down
 import spacy
 from spacy import displacy
 import random
 from spacy.tokens import Span
 import gradio as gr
 import pandas as pd
+import cairosvg
+import base64
+
 
 DEFAULT_MODEL = "en_core_web"
 DEFAULT_TEXT = "Apple is looking at buying U.K. startup for $1 billion."
@@ -16,6 +20,7 @@ texts = {"en": DEFAULT_TEXT, "ca": "Apple està buscant comprar una startup del
          "ja": "アップルがイギリスの新興企業を１０億ドルで購入を検討", "ko": "애플이 영국의 스타트업을 10억 달러에 인수하는 것을 알아보고 있다.", "lt": "Jaunikis pirmąją vestuvinę naktį iškeitė į areštinės gultą", "nb": "Apple vurderer å kjøpe britisk oppstartfirma for en milliard dollar.", "nl": "Apple overweegt om voor 1 miljard een U.K. startup te kopen",
          "pl": "Poczuł przyjemną woń mocnej kawy.", "pt": "Apple está querendo comprar uma startup do Reino Unido por 100 milhões de dólares", "ro": "Apple plănuiește să cumpere o companie britanică pentru un miliard de dolari", "ru": "Apple рассматривает возможность покупки стартапа из Соединённого Королевства за $1 млрд", "sv": "Apple överväger att köpa brittisk startup för 1 miljard dollar.", "zh": "作为语言而言，为世界使用人数最多的语言，目前世界有五分之一人口做为母语。"}
 
+button_css = "--tw-border-opacity: 1; border-color: rgb(75 85 99 / var(--tw-border-opacity)); --tw-gradient-from: #4b5563; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(75 85 99 / 0));--tw-gradient-to: #374151; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); background-color: rgb(55 65 81 / var(--tw-bg-opacity)); border-radius: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; font-size: 1rem; line-height: 1.5rem; font-weight: 600; -webkit-appearance: button; --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); border-width: 1px; align-items: center; justify-content: center; display: inline-flex;"
 
 def get_all_models():
     with open("requirements.txt") as f:
@@ -31,22 +36,44 @@ def get_all_models():
 
 models = get_all_models()
 
+def download_svg(svg):
+    encode = base64.b64encode(bytes(svg, 'utf-8'))
+    img = 'data:image/svg+xml;base64,' + str(encode)[2:-1]
+    html = f'<a download="displacy.svg" href="{img}" style="{button_css}">Download as SVG</a>'
+    return html
+
+# def download_png(svg):
+#     encode = base64.b64encode(bytes(svg, 'utf-8'))
+#     svg_uri = 'data:image/svg+xml;base64,' + str(encode)[2:-1]
+#     output = cairosvg.svg2png(url=svg_uri)
+#     encoded = base64.b64encode(output)
+#     img = 'data:image/png;base64,' + str(encoded)[2:-1]
+#     html = f'<a download="displacy.png" href="{img}" style="{button_css}">Download as PNG</a>'
+#     return html
+
+# def download(type, svg):
+#     if type == 'png':
+#         return download_png(svg)
+#     elif type == 'svg':
+#         return download_svg(svg)
 
 def dependency(text, col_punct, col_phrase, compact, bg, font, model):
     nlp = spacy.load(model + "_sm")
     doc = nlp(text)
     options = {"compact": compact, "collapse_phrases": col_phrase,
                "collapse_punct": col_punct, "bg": bg, "color": font}
-    html = displacy.render(doc, style="dep", options=options) 
-    return html
+    svg = displacy.render(doc, style="dep", options=options)
+    download = download_svg(svg)
+    return svg, download
 
 
 def entity(text, ents, model):
     nlp = spacy.load(model + "_sm")
     doc = nlp(text)
     options = {"ents": ents}
-    html = displacy.render(doc, style="ent", options=options)
-    return html
+    svg = displacy.render(doc, style="ent", options=options)
+    # download = download_svg('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="en" id="97e9d3ac65344f2bb6e6ce517bd13b1e-0" class="displacy" width="1800" height="399.5" direction="ltr" style="max-width: none; height: 399.5px; color: black; font-family: Arial; direction: ltr">' + svg + "</svg>")
+    return svg
 
 
 def token(text, attributes, model):
@@ -128,8 +155,9 @@ def span(text, span1, span2, label1, label2, model):
             Span(doc, idx2_1, idx2_2, label2),
         ]
 
-    html = displacy.render(doc, style="span")
-    return html
+    svg = displacy.render(doc, style="span")
+    # download = download_svg(svg)
+    return svg
 
 
 def get_text(model):
@@ -196,8 +224,19 @@ with demo:
                             label="Text Color", value="black")
                 
                 depen_output = gr.HTML(value=dependency(
-                    DEFAULT_TEXT, True, True, False, DEFAULT_COLOR, "black", DEFAULT_MODEL))
-                dep_button = gr.Button("Generate Dependency Parser")
+                    DEFAULT_TEXT, True, True, False, DEFAULT_COLOR, "black", DEFAULT_MODEL)[0])
+                with gr.Row():
+                    with gr.Column():
+                        dep_button = gr.Button("Regenerate Dependency Parser", variant="primary")
+                    with gr.Column():
+                        dep_download_button = gr.HTML(value=download_svg(depen_output.value))
+                    with gr.Column():
+                        gr.Markdown(" ")
+                    with gr.Column():
+                        gr.Markdown(" ")
+                    
+                
+                
                 gr.Markdown(" ")
     with gr.Box():
         with gr.Column():
@@ -205,11 +244,20 @@ with demo:
                 "## [Entity Recognizer](https://spacy.io/usage/visualizers#ent)")
             gr.Markdown(
                 "The entity visualizer highlights named entities and their labels in a text.")
-            entity_input = gr.CheckboxGroup(
+            ent_input = gr.CheckboxGroup(
                 DEFAULT_ENTS, value=DEFAULT_ENTS)
-            entity_output = gr.HTML(value=entity(
+            ent_output = gr.HTML(value=entity(
                 DEFAULT_TEXT, DEFAULT_ENTS, DEFAULT_MODEL))
-            ent_button = gr.Button("Generate Entity Recognizer")
+            ent_button = gr.Button("Regenerate Entity Recognizer", variant="primary")
+            # with gr.Row():
+            #         with gr.Column():
+            #             ent_button = gr.Button("Regenerate Entity Recognizer", variant="primary")
+            #         with gr.Column():
+            #             ent_download_button = gr.HTML(value=download_svg(ent_output.value))
+            #         with gr.Column():
+            #             gr.Markdown(" ")
+            #         with gr.Column():
+            #             gr.Markdown(" ")
     with gr.Box():
         with gr.Column():
             gr.Markdown(
@@ -224,7 +272,7 @@ with demo:
                     gr.Markdown("")
             tok_output = gr.Dataframe(headers=DEFAULT_TOK_ATTR, value=default_token(
                 DEFAULT_TEXT, DEFAULT_TOK_ATTR, DEFAULT_MODEL), overflow_row_behaviour="paginate")
-            tok_button = gr.Button("Generate Token Properties")
+            tok_button = gr.Button("Regenerate Token Properties", variant="primary")
     with gr.Box():
         with gr.Column():
             gr.Markdown(
@@ -244,7 +292,7 @@ with demo:
                 with gr.Column():
                     gr.Markdown("")
             sim_random_button = gr.Button("Generate random words")
-            sim_button = gr.Button("Generate similarity")
+            sim_button = gr.Button("Regenerate similarity", variant="primary")
     with gr.Box():
         with gr.Column():
             gr.Markdown(
@@ -276,31 +324,38 @@ with demo:
                     gr.Markdown("")
             span_output = gr.HTML(value=span(
                 DEFAULT_TEXT, "U.K. startup", "U.K.", "ORG", "GPE", DEFAULT_MODEL))
-            gr.Markdown(value="")
-            gr.Markdown(value="")
-            span_button = gr.Button("Generate spans")
+            span_button = gr.Button("Regenerate Spans", variant="primary")
+            # with gr.Row():
+            #         with gr.Column():
+            #             span_button = gr.Button("Regenerate Spans", variant="primary")
+            #         with gr.Column():
+            #             span_download_button = gr.HTML(value=download_svg(span_output.value))
+            #         with gr.Column():
+            #             gr.Markdown(" ")
+            #         with gr.Column():
+            #             gr.Markdown(" ")
 
     model_input.change(get_text, inputs=[model_input], outputs=text_input)
     button.click(dependency, inputs=[
-        text_input, col_punct, col_phrase, compact, bg, text, model_input], outputs=depen_output)
+        text_input, col_punct, col_phrase, compact, bg, text, model_input], outputs=[depen_output, dep_download_button])
     button.click(
-        entity, inputs=[text_input, entity_input, model_input], outputs=entity_output)
+        entity, inputs=[text_input, ent_input, model_input], outputs=[ent_output])
     button.click(
         token, inputs=[text_input, tok_input, model_input], outputs=tok_output)
     button.click(vectors, inputs=[sim_text1,
                  sim_text2, model_input], outputs=sim_output)
     button.click(
-        span, inputs=[text_input, span1, span2, label1, label2, model_input], outputs=span_output)
+        span, inputs=[text_input, span1, span2, label1, label2, model_input], outputs=[span_output])
     dep_button.click(dependency, inputs=[
-        text_input, col_punct, col_phrase, compact, bg, text, model_input], outputs=depen_output)
+        text_input, col_punct, col_phrase, compact, bg, text, model_input], outputs=[depen_output, dep_download_button])
     ent_button.click(
-        entity, inputs=[text_input, entity_input, model_input], outputs=entity_output)
+        entity, inputs=[text_input, ent_input, model_input], outputs=[ent_output])
     tok_button.click(
         token, inputs=[text_input, tok_input, model_input], outputs=[tok_output])
     sim_button.click(vectors, inputs=[
                      sim_text1, sim_text2, model_input], outputs=sim_output)
     span_button.click(
-        span, inputs=[text_input, span1, span2, label1, label2, model_input], outputs=span_output)
+        span, inputs=[text_input, span1, span2, label1, label2, model_input], outputs=[span_output])
     sim_random_button.click(random_vectors, inputs=[text_input, model_input], outputs=[
                             sim_output, sim_text1, sim_text2])
 demo.launch()

scrollbar.css

@@ -1,22 +1,31 @@
-.overflow-auto::-webkit-scrollbar {
+.output-html {
+    overflow-x: auto;
+    overflow-y: visible;
+}
+
+.output-html::-webkit-scrollbar {
     -webkit-appearance: none;
 }
 
-.overflow-auto::-webkit-scrollbar:vertical {
-    width: 11px;
+.output-html::-webkit-scrollbar:vertical {
+    width: 0px;
 }
 
-.overflow-auto::-webkit-scrollbar:horizontal {
+.output-html::-webkit-scrollbar:horizontal {
     height: 11px;
 }
 
-.overflow-auto::-webkit-scrollbar-thumb {
+.output-html::-webkit-scrollbar-thumb {
     border-radius: 8px;
     border: 2px solid white; /* should match background, can't be transparent */
     background-color: rgba(0, 0, 0, .5);
 }
 
-.overflow-auto::-webkit-scrollbar-track { 
+.output-html::-webkit-scrollbar-track { 
     background-color: #fff; 
     border-radius: 8px; 
-} 
+} 
+
+.spans {
+    min-height: 75px;
+}