Improvements

.gitignore

@@ -0,0 +1 @@
+__pycache__

app.py

@@ -1,111 +1,80 @@
 import gradio as gr
-from anytree import Node, RenderTree
-import spacy
-from spacy import displacy
+from utils import Pipeline
 
-nlp = spacy.load("en_core_web_md")
+pip = Pipeline()
 
-# -- Main functions --
-
-
-def postag(tk):
-    tag = ""
-    plural_tags = ["NNS", "NNPS"]
-    if tk.tag_ in plural_tags:
-        tag = " ({}) (Plural)".format(tk.tag_)
-    else:
-        tag = " ({})".format(tk.tag_)
-    return tag
-    
-def genFlatDepthTree(expr):
-    doc = nlp(expr)
-    root = next(doc.sents).root
-    node = Node(""+root.text+": (Root)"+postag(root), parent=None)
-
-    def tree(tk, last_node, depth):
-        if tk.n_lefts + tk.n_rights > 0:
-            for ch in tk.children:
-                tree(ch, Node(""+ch.text+": "+str(depth+1)+postag(ch), parent=last_node), depth+1)
-    
-    tree(root, node, 0)
-    flat_tree = ""
-
-    for pre, fill, node in RenderTree(node):
-        flat_tree += """{}{}\n""".format(pre, node.name)
+# -- Interface --
+iface = gr.Blocks(css="css/style.css")
 
-    img_tree = displacy.render(doc, style='dep', options={'distance': 100})
+with iface:
+    gr.Markdown("<center> <h2>🌳 Syntactic Tree Generator 🌳</h2> </center>")
     
-    return "<center><div style='max-width: 800px; overflow-x:auto;'>"+img_tree+"</div></center>", flat_tree
+    with gr.Row():
+        with gr.Column():
+            image = gr.Image(
+                value="https://img.unocero.com/2019/11/facebook-app-para-hacer-memes-1-1024x576.jpg",show_label=False
+            )
     
-# def syntacticTree(expr):
-#     doc = nlp(expr)
-#     depths = {}
+        with gr.Column():
+            in_sentence = gr.Textbox(
+                label="Input", 
+                placeholder="Enter an expression here"
+            )
 
-#     def walk_tree(tk, depth):
-#         depths[tk.text] = depth
-#         if tk.n_lefts + tk.n_rights > 0: # if Doesn't root
-#             [walk_tree(child, depth + 1) for child in tk.children]
+            btn_get_tree = gr.Button(
+                value="Generate Tree!"
+            )
 
-#     [walk_tree(sent.root, 0) for sent in doc.sents]
+            out_str_tree = gr.Textbox(
+                label="Flat tree",
+                elem_id="no-outline"
+            )
 
-#     flat_tree = [tk.text+" - "+str(depths[tk.text]) for tk in doc]
-#     image_tree = displacy.render(doc, style='dep', options={'distance': 100})
-#     image_tree = "<center><div style='max-width: 800px; overflow-x:auto;'>"+image_tree+"</div></center>"
+            error = gr.HTML(
+                show_label=False
+            )
     
-#     return image_tree,flat_tree
-
-# -- Interface --
-demo = gr.Blocks(css=".container { max-width: 900px; margin: auto;}", title="Syntactic tree generator")
 
-with demo:
-    gr.Markdown("""<center> <h2>🌳 Syntactic Tree Generator 🌳</h2> </center>""")
-    with gr.Row():
-        with gr.Column():
-            gr.Image(value="https://img.unocero.com/2019/11/facebook-app-para-hacer-memes-1-1024x576.jpg",label="", type="URL")
-        with gr.Column():
-            input_expr = gr.Textbox(label="Input", placeholder="Enter an expression here")
-            out_flat_tree = gr.Textbox(label="Flat tree", value="")
-        with gr.Row(): btn_get_tree = gr.Button(value="Get Tree")
-        
-        
-    out_image_tree = gr.HTML(label="")
+    out_html_tree = gr.HTML(
+        show_label=False
+    )
 
     gr.Examples(
-        examples=[ 
+        inputs = in_sentence,
+        examples = [ 
             "glass in guys hand on right first guy",
             "i have been happy",
             "the happy spiders",
             "the best dog out there",
-             "girl 's face",
-             'bottom grass',
-             'rock people are sitting on',
-             'blue sky center below clouds',
-             'group of people on left',
-             'tree middle',
-             'the lump of grass above the bright rock in the bottom left',
-             'berries in middle',
-             'red shirt kid',
-             'middle rock',
-             'grass below the person in the straw hat',
-             'grass on the left',
-             'wall between stairs 2nd lv on right',
-             'the large group of clouds',
-             'sky top left',
-             'rock structure on far right',
-             'left donkey'],
-    inputs=input_expr,
-        examples_per_page=25,
+            "girl 's face",
+            'bottom grass',
+            'rock people are sitting on',
+            'blue sky center below clouds',
+            'group of people on left',
+            'tree middle',
+            'the lump of grass above the bright rock in the bottom left',
+            'berries in middle',
+            'red shirt kid',
+            'middle rock',
+            'grass below the person in the straw hat',
+            'grass on the left',
+            'wall between stairs 2nd lv on right',
+            'the large group of clouds',
+            'sky top left',
+            'rock structure on far right',
+            'left donkey'],
+        examples_per_page=10,
     )
     
-    # input_expr.change(     
-    #     fn=genFlatDepthTree, 
-    #     inputs=input_expr, 
-    #     outputs=[out_image_tree, out_flat_tree])
     btn_get_tree.click(
-        fn=genFlatDepthTree, 
-        inputs=input_expr, 
-        outputs=[out_image_tree, out_flat_tree]
+        fn = pip.compute, 
+        inputs = in_sentence, 
+        outputs = [error, out_html_tree, out_str_tree],
+        api_name= "gen_tree"
     )
 
-demo.queue(concurrency_count=10)
-demo.launch(debug=True)
+iface.launch(
+    server_name="0.0.0.0",
+    # server_port=9090,
+    # share = True
+)

css/style.css

@@ -0,0 +1,167 @@
+.container { 
+    max-width: 85%; 
+    margin: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+h1, .h1 {
+  font-size: 2.5rem;
+}
+
+h2, .h2 {
+  font-size: 2rem;
+}
+
+h3, .h3 {
+  font-size: 1.75rem;
+}
+
+h4, .h4 {
+  font-size: 1.5rem;
+}
+
+h5, .h5 {
+  font-size: 1.25rem;
+}
+
+h6, .h6 {
+  font-size: 1rem;
+}
+
+.no-outline {
+    border: 0px none;
+}
+
+.alert {
+    position: relative;
+    padding: 0.75rem 1.25rem;
+    margin-bottom: 1rem;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+}
+
+.alert-primary {
+    color: #004085;
+    background-color: #cce5ff;
+    border-color: #b8daff;
+}
+
+.alert-secondary {
+    color: #383d41;
+    background-color: #e2e3e5;
+    border-color: #d6d8db;
+}
+
+.alert-success {
+    color: #155724;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+}
+
+.alert-info {
+    color: #0c5460;
+    background-color: #d1ecf1;
+    border-color: #bee5eb;
+}
+
+.alert-warning {
+    color: #856404;
+    background-color: #fff3cd;
+    border-color: #ffeeba;
+}
+
+.alert-danger {
+    color: #721c24;
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+}
+
+.alert-light {
+    color: #818182;
+    background-color: #fefefe;
+    border-color: #fdfdfe;
+}
+
+.alert-dark {
+    color: #1b1e21;
+    background-color: #d6d8d9;
+    border-color: #c6c8ca;
+}
+
+.btn {
+    display: inline-block;
+    font-weight: 400;
+    color: #212529;
+    text-align: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: transparent;
+    border: 1px solid transparent;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: #007bff;
+    border-color: #007bff;
+}
+
+.btn-secondary {
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d;
+}
+
+.btn-success {
+    color: #fff;
+    background-color: #28a745;
+    border-color: #28a745;
+}
+
+.btn-info {
+    color: #fff;
+    background-color: #17a2b8;
+    border-color: #17a2b8;
+}
+
+.btn-warning {
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107;
+}
+
+.btn-danger {
+    color: #fff;
+    background-color: #dc3545;
+    border-color: #dc3545;
+}
+
+.btn-light {
+    color: #212529;
+    background-color: #f8f9fa;
+    border-color: #f8f9fa;
+}
+
+.btn-dark {
+    color: #fff;
+    background-color: #343a40;
+    border-color: #343a40;
+}

requirements.txt

@@ -1,3 +1,3 @@
 spacy
 anytree
-https://huggingface.co/spacy/en_core_web_md/resolve/main/en_core_web_md-any-py3-none-any.whl
+# https://huggingface.co/spacy/en_core_web_md/resolve/main/en_core_web_md-any-py3-none-any.whl

utils.py

@@ -0,0 +1,92 @@
+import spacy
+from typing import Tuple
+from spacy import displacy
+from anytree import Node, RenderTree
+
+class Pipeline:
+    def __init__(
+        self
+    ) -> None:
+
+        self.nlp = spacy.load("en_core_web_md")
+        self.__ch_html_tree = None
+        self.__ch_str_tree = None
+        self.__ch_sentence = None
+
+    def __postag(
+        self,
+        tk: str
+    ) -> str:
+
+        tag = ""
+        plural_tags = ["NNS", "NNPS"]
+        if tk.tag_ in plural_tags:
+            tag = " ({}) (Plural)".format(tk.tag_)
+        else:
+            tag = " ({})".format(tk.tag_)
+        return tag
+    
+    def __genSyntacticTree(
+        self,
+        expr: str
+    ) -> Tuple[str,str]:
+
+        doc = self.nlp(expr)
+        root = next(doc.sents).root
+        node = Node("" + root.text + ": (Root)" + self.__postag(root), parent=None)
+
+        def tree(
+            tk: str, 
+            last_node: Node, 
+            depth: int
+        ) -> None:
+
+            if tk.n_lefts + tk.n_rights > 0:
+                for child in tk.children:
+                    tree(
+                        child, 
+                        Node(
+                            "" + child.text + ": " + str(depth + 1) + self.__postag(child), 
+                            parent=last_node
+                        ),
+                        depth+1
+                    )
+        
+        tree(root, node, 0)
+        syntactic_str_tree = ""
+
+        for pre, fill, node in RenderTree(node):
+            syntactic_str_tree += """{}{}\n""".format(pre, node.name)
+
+        syntactic_tree = displacy.render(doc, style='dep', options={'distance': 100})
+        syntactic_html_tree = f"""
+            <center>
+                <div style='max-width: 800px; overflow-x:auto;'>
+                    {syntactic_tree}
+                </div>
+            </center>
+        """
+        return syntactic_html_tree, syntactic_str_tree
+
+    def compute(
+        self,
+        sentence: str
+    ) -> Tuple[str,str,str]:
+
+        error = ""
+        error_template = """
+            <center>
+                <div class="alert alert-warning" role="alert">
+                <h6><b>{}</b></h6>
+                </div>
+            </center>
+        """
+        if sentence.strip() == "":
+            error = error_template.format("The sentence can not be empty!")
+            return error, "", ""
+
+        if sentence != self.__ch_sentence:
+            self.__ch_sentence = sentence
+            self.__ch_html_tree, self.__ch_str_tree = self.__genSyntacticTree(sentence)
+
+        return error, self.__ch_html_tree, self.__ch_str_tree