Update interface

app.py

@@ -1,26 +1,58 @@
 from esgen.functions import *
 
 
+js = """
+function createGradioAnimation() {
+    var container = document.createElement('div');
+    container.id = 'gradio-animation';
+    container.style.fontSize = '2em';
+    container.style.fontWeight = 'bold';
+    container.style.textAlign = 'center';
+    container.style.marginBottom = '20px';
+
+    var text = 'EntitySchema Generator';
+    for (var i = 0; i < text.length; i++) {
+        (function(i){
+            setTimeout(function(){
+                var letter = document.createElement('span');
+                letter.style.opacity = '0';
+                letter.style.transition = 'opacity 0.5s';
+                letter.innerText = text[i];
+
+                container.appendChild(letter);
+
+                setTimeout(function() {
+                    letter.style.opacity = '1';
+                }, 50);
+            }, i * 250);
+        })(i);
+    }
+
+    var gradioContainer = document.querySelector('.gradio-container');
+    gradioContainer.insertBefore(container, gradioContainer.firstChild);
+
+    return 'Animation created';
+}
+"""
+
+
 with gr.Blocks() as introduction_tab:
     gr.Markdown(
         """
-        # EntitySchema Generator
-        
-        This is an EntitySchema Generator consists of three components:
-        - The **Generate** tab is used to generate an EntitySchema from scratch through a frequent-based draft and a user-based refinement step.
-        - The **Append** tab is used to add properties that are missing in the first step.
-        - The **Modify** tab is used to edit properties in an EntitySchema.
-        
-        What about other functions?
-        - **Delete**: the EntitySchema code is interactive so that one can directly edit or delete content.
+        This is a [Wikidata EntitySchema](https://www.wikidata.org/wiki/Wikidata:Schemas) Generator that consists of 
+        two components:
+        - The **Generate** tab is used to generate an EntitySchema from scratch by analyzing existing items and 
+        refining the results with the help of a chatbot.
+        - The **Modify** tab is used to add, change, or remove constraints from an  existing EntitySchema.
         
         ## Resources: 
-        - [Wikidata Project Schemas](https://www.wikidata.org/wiki/Wikidata:WikiProject_Schemas)
+        - [Wikidata Schemas](https://www.wikidata.org/wiki/Wikidata:Schemas)
         - [Shape Expressions (ShEx) 2.1 Primer](https://shex.io/shex-primer/)
         - [EntitySchema directory](https://www.wikidata.org/wiki/Wikidata:Database_reports/EntitySchema_directory)
         - [WikiShape](https://wikishape.weso.es)
         - [RDFShape](https://rdfshape.weso.es)
-        - A similar toolkit but more from scratch can be found [here at Toolforge](https://tools-static.wmflabs.org/entityschema-generator/).
+        - [ShExStatements](https://shexstatements.toolforge.org)
+        - A similar toolkit can be found [here on Toolforge](https://tools-static.wmflabs.org/entityschema-generator/).
         """
     )
 
@@ -28,37 +60,51 @@ with gr.Blocks() as introduction_tab:
 with gr.Blocks() as generate_tab:
     gr.Markdown(
         """
-        # EntitySchema Generator: Generate ES from scratch
+        On this page, you can generate an EntitySchema from scratch. The tool will analyze existing items to draft an 
+        EntitySchema for you. Afterwards, you can refine it by answering a few questions from a chatbot.
+        
+        ## Step 1: Generate an EntitySchema from scratch
         """
     )
     with gr.Row():
         with gr.Column():
             es_name = gr.Textbox(
-                label="Name of EntitySchema",
+                label="Name of the new EntitySchema",
                 placeholder="e.g., algorithm"
             )
             with gr.Group():
                 es_class = gr.Textbox(
-                    label="Class ID",
-                    placeholder="e.g., Q8366"
+                    label="Item ID for class",
+                    placeholder="e.g., Q8366",
+                    info="Specify which class the new EntitySchema will cover. The tool will look at all items that "
+                         "are an 'instance of' (P31) the class."
                 )
-                class_choices = gr.Radio(visible=False)
-            extra_checkbox = gr.Checkbox(label="Permitting extra properties")
-            generate_btn = gr.Button(value="Generate")
+                class_choices = gr.Radio(visible=False)  # TODO: remove the label
+            threshold_slider = gr.Slider(
+                minimum=10, maximum=100, value=50, step=10, label="Cut-off",
+                info="Ignore all properties that are used on less than X% of items in the class for the initial "
+                     "EntitySchema generation"
+            )
+            # extra_checkbox = gr.Checkbox(label="Permitting extra properties")
+            # TODO: remove EXTRA
+            generate_btn = gr.Button(value="Generate EntitySchema")
             gr.Markdown(
                 """
-                ## Refinement
-                The chatbot will ask you a series of questions to refine the EntitySchema. Click the following buttons to answer the questions.
-                - If you think the property is required for the EntitySchema, click "Yes". 
-                - If you think the property is optional, click "Optional". 
-                - If you think the property is not properly used for the EntitySchema, click "No". 
-                - If you are unsure, click "Unsure".
+                ## Step 2: Refine the generated EntitySchema
+                The chatbot will ask you a series of questions to refine the EntitySchema. Click the following buttons 
+                to answer the questions.
+                - If you think the property is required for all items in the class, click "Yes". 
+                - If you think the property is only used on some items in the class, click "Optional". 
+                - If you think the property should not be used on any items in the class, click "No". 
+                - If you can't decide, feel free to click "Skip".
                 """
             )
+            # TODO: what does the rejection ("No") semantically mean
 
             refine_chatbot = gr.Chatbot(
                 label="Chatbot",
-                value=[[None, None]]
+                value=[[None, None]],
+                height=400,
             )
             # chatbot_input = gr.Textbox(placeholder="Type your message here :)")
             with gr.Row():
@@ -71,13 +117,14 @@ with gr.Blocks() as generate_tab:
                 no_btn = gr.Button(
                     value="⛔️ No"
                 )
-                unsure_btn = gr.Button(
-                    value="🤔 Unsure"
+                skip_btn = gr.Button(
+                    value="⏩ Skip"
                 )
 
         with gr.Column():
+            # TODO: meaningful error messages
             es_output = gr.Code(
-                lines=60,
+                lines=65,
                 label="EntitySchema",
                 interactive=True,
             )
@@ -87,19 +134,12 @@ with gr.Blocks() as generate_tab:
                 visible=False,
             )
 
-    # gr.Examples(
-    #     examples=["algorithm"],
-    #     inputs=es_output,
-    #     outputs=es_output,
-    #     fn=load_examples,
-    #     cache_examples=True
-    # )
-
     es_class.input(
         fn=update_class_choices,
         inputs=es_class,
         outputs=class_choices
     )
+    # TODO: more distinction between labels and descriptions
     class_choices.select(
         fn=select_class,
         inputs=[class_choices],
@@ -108,7 +148,7 @@ with gr.Blocks() as generate_tab:
 
     generate_btn.click(
         fn=entity_schema_generation,
-        inputs=[es_name, es_class, extra_checkbox],
+        inputs=[es_name, es_class, threshold_slider],
         outputs=[es_output, es_json, refine_chatbot]
     )
 
@@ -127,23 +167,43 @@ with gr.Blocks() as generate_tab:
         inputs=[es_json, refine_chatbot],
         outputs=[es_output, es_json, refine_chatbot]
     )
-    unsure_btn.click(
-        fn=input_unsure,
+    skip_btn.click(
+        fn=input_skip,
         inputs=[es_json, refine_chatbot],
         outputs=[es_output, es_json, refine_chatbot]
     )
 
 
-with gr.Blocks() as append_tab:
+with gr.Blocks() as modify_single_tab:
     gr.Markdown(
         """
-        # EntitySchema Generator: Add properties
+        On this page, you can modify an existing EntitySchema. You can load an example or paste your own EntitySchema 
+        into the EntitySchema box on the right. Afterwards, you can specify the changes you would like to make to your 
+        EntitySchema.
+        
+        ## Step 1: Load an EntitySchema
         """
     )
     with gr.Row():
         with gr.Column():
+            # examples
+            example_dropdown = gr.Dropdown(
+                choices=["algorithm"],
+                label="EntitySchema Examples"
+            )
+            example_btn = gr.Button("Load example")
+
+            gr.Markdown(
+                """
+                ## Step 2: Modify the EntitySchema
+                
+                You can add a new constraint to the EntitySchema by specifying it below. If the EntitySchema already 
+                contains a constraint for the property, it will be overwritten by the new constraint. If you would like 
+                to delete constraints, simply delete them in the EntitySchema box.
+                """
+            )
             property_name = gr.Textbox(
-                label="Property Name"
+                label="Property ID"
             )
             property_choices = gr.Radio(
                 visible=False
@@ -183,7 +243,7 @@ with gr.Blocks() as append_tab:
 
         with gr.Column():
             es_output = gr.Code(
-                lines=25,
+                lines=46,
                 label="EntitySchema",
                 interactive=True,
             )
@@ -193,14 +253,7 @@ with gr.Blocks() as append_tab:
             #     visible=False,
             # )
 
-    # gr.Examples(
-    #     examples=["algorithm"],
-    #     inputs=es_output,
-    #     outputs=es_output,
-    #     fn=load_examples,
-    #     cache_examples=True
-    # )
-
+    # single triple constraint
     property_name.input(
         fn=update_property_choices,
         inputs=property_name,
@@ -226,116 +279,25 @@ with gr.Blocks() as append_tab:
         inputs=[class_names, class_choices],
         outputs=[class_names, class_choices]
     )
-    # add_class_btn.click(
-    #     fn=add_classes,
-    #     inputs=class_names,
-    #     outputs=class_names
-    # )
     insert_btn.click(
         fn=insert_triple_constraint,
         inputs=[es_output, property_name, allowed_values, class_names, datatypes, cardinality, comment],
         outputs=es_output
     )
 
-
-with gr.Blocks() as modify_tab:
-    gr.Markdown(
-        """
-        # EntitySchema Generator: Change properties
-        """
-    )
-    with gr.Row():
-        with gr.Column():
-            es_input = gr.Code(
-                lines=23,
-                label="EntitySchema",
-                interactive=True,
-            )
-            convert_btn = gr.Button(value="Convert")
-        with gr.Column():
-            # with gr.Row():
-            #     es_name = gr.Textbox(label="Name of EntitySchema")
-            #     es_class = gr.Textbox(label="Class ID")
-            property_name = gr.Dropdown(
-                label="Property Name"
-            )
-            property_choices = gr.Radio(
-                visible=False
-            )
-            with gr.Group():
-                allowed_values = gr.Dropdown(
-                    choices=[
-                        "with any value",
-                        "with one of a set of specific entities",
-                        "with an instance of",
-                        "with a subclass of",
-                        "XML Schema datatypes"
-                    ],
-                    label="Allowed Values"
-                )
-                class_names = gr.Textbox(label="Class Name", interactive=True, visible=False)
-                class_choices = gr.Radio(visible=False)
-                datatypes = gr.Dropdown(visible=False)
-                # add_class_btn = gr.Button(value="Add", visible=False)
-            cardinality = gr.Dropdown(
-                choices=[
-                    "has 1 matching statement",
-                    "has 0 or 1 matching statements",
-                    "has 0 or more matching statements",
-                    "has 1 or more matching statements",
-                    "has no matching statements"
-                ],
-                label="Cardinality",
-                interactive=True
-            )
-            with gr.Row():
-                comment = gr.Textbox(
-                    label="Comment"
-                )
-
-            change_btn = gr.Button(value="Change")
-
-    # gr.Examples(
-    #     examples=["algorithm"],
-    #     inputs=es_input,
-    #     outputs=es_input,
-    #     fn=load_examples,
-    #     cache_examples=True
-    # )
-
-    convert_btn.click(
-        fn=convert_string_to_es,
-        inputs=es_input,
-        outputs=[property_name]
-    )
-
-    # TODO: Duplicated code fragment, merge Append and Modify tabs?
-    allowed_values.change(
-        fn=select_allowed_values,
-        inputs=allowed_values,
-        outputs=[class_names, class_choices, datatypes]
-    )
-    class_names.input(
-        fn=update_class_choices,
-        inputs=class_names,
-        outputs=class_choices
-    )
-    class_choices.select(
-        fn=add_class,
-        inputs=[class_names, class_choices],
-        outputs=[class_names, class_choices]
-    )
-
-    change_btn.click(
-        fn=change_triple_constraint,
-        inputs=[es_input, property_name, allowed_values, class_names, datatypes, cardinality, comment],
-        outputs=es_input
+    # example
+    example_btn.click(
+        fn=load_examples,
+        inputs=[example_dropdown],
+        outputs=[es_output]
     )
 
 
 demo = gr.TabbedInterface(
-    interface_list=[introduction_tab, generate_tab, append_tab, modify_tab],
-    tab_names=["Introduction", "Generate", "Append", "Modify"]
+    interface_list=[introduction_tab, generate_tab, modify_single_tab],
+    tab_names=["Introduction", "Generate", "Modify"],
+    css="footer {visibility: hidden}",
+    js=js
 )