Update app.py

app.py

@@ -368,66 +368,127 @@ def topics(output_file, input_checks):
     plot.update_layout(width=600, height=400)
     return gr.Plot.update(value=plot, visible=True)  # no next_button becomes available
 
+
 with gr.Blocks() as demo:
-    with gr.Tab("Sentence"):
-        gr.Markdown("""
-        # Demo EmotioNL
-        This demo allows you to analyse the emotion in a Dutch sentence.
-        """)
-        with gr.Row():
-            with gr.Column():
-                input = gr.Textbox(
-                        label="Enter a sentence",
-                        value="Jaaah! Volgende vakantie Barcelona en na het zomerseizoen naar de Algarve",
-                        lines=1)
-                send_btn = gr.Button("Send")
-            output = gr.Textbox()
-        send_btn.click(fn=inference_sentence, inputs=input, outputs=output)
-    with gr.Tab("Dataset"):
-        gr.Markdown("""
-        # Demo EmotioNL
-        This demo allows you to analyse the emotions in a dataset with Dutch sentences.
-
-        _! As we are currently updating this demo, submitting your own data is unavailable for the moment ! However, you can try out the showcase mode 😊_
-        
-        The data should be in tsv-format with two named columns: the first column (id) should contain the sentence IDs, and the second column (text) should contain the actual texts. Optionally, there is a third column named 'date', which specifies the date associated with the text (e.g., tweet date). This column is necessary when the options 'emotion distribution over time' and 'peaks' are selected.
-        
-        You can also try out the demo in  showcase mode, which uses example data, namely a dataset with tweets about the COVID-19 pandemic.
-        """)
-        with gr.Row():
-            with gr.Column():
-                input_file = gr.File(
-                    label="Upload a dataset")
-                input_checks = gr.CheckboxGroup(
-                    ["emotion frequencies", "emotion distribution over time", "peaks", "topics"],
-                    label = "Select options")
-                send_btn = gr.Button("Submit data")
-                demo_btn = gr.Button("... or showcase with example data")
-            with gr.Column():
-                message = gr.Textbox(label="Message", visible=False)
-
-                output_file = gr.File(label="Predictions", visible=False)
-                next_button_freq = gr.Button("Show emotion frequencies", visible=False)
+    with gr.Row():
+        with gr.Column(scale=1, min_width=100):
+            gr.Markdown("""
+            """)
+        with gr.Column(scale=5, min_width=500):
+            gr.Markdown("""
+                <div style="text-align: center"><h1>EmotioNL: A framework for Dutch emotion detection</h1></div>
                 
-                output_plot = gr.Plot(show_label=False, visible=False).style(container=True)
-                next_button_dist = gr.Button("Show emotion distribution over time", visible=False)
+                <div style="display: block;margin-left: auto;margin-right: auto;width: 60%;"><img alt="EmotioNL logo" src="https://users.ugent.be/~lundbruy/EmotioNL.png" width="100%"></div>
                 
-                output_dist = gr.Plot(show_label=False, visible=False)
-                next_button_peaks = gr.Button("Show peaks", visible=False)
+                This demo was made to demonstrate the EmotioNL model, a transformer-based classification model that analyses emotions in Dutch texts. The model uses [RobBERT](https://github.com/iPieter/RobBERT), which was further fine-tuned on the [EmotioNL dataset](https://lt3.ugent.be/resources/emotionl/). The resulting model is a classifier that, given a sentence, predicts one of the following emotion categories: _anger_, _fear_, _joy_, _love_, _sadness_ or _neutral_. The demo can be used either in **sentence mode**, which allows you to enter a sentence for which an emotion will be predicted; or in **dataset mode**, which allows you to upload a dataset or see the full functuonality of with example data.
+                """)
+        with gr.Column(scale=1, min_width=100):
+            gr.Markdown("""
+            """)
+    with gr.Row():
+        with gr.Column(scale=1, min_width=100):
+            gr.Markdown("""
+            """)
+        with gr.Column(scale=5, min_width=500):
+            with gr.Tab("Sentence"):
+                gr.Markdown("""
+                """)
+                with gr.Row():
+                    with gr.Column():
+                        input = gr.Textbox(
+                                label="Enter a sentence",
+                                value="Jaaah! Volgende vakantie Barcelona en na het zomerseizoen naar de Algarve",
+                                lines=1)
+                        send_btn = gr.Button("Send")
+                    output = gr.Textbox()
+                send_btn.click(fn=inference_sentence, inputs=input, outputs=output)
                 
-                output_peaks = gr.Plot(visible=False)
-                next_button_topics = gr.Button("Show topics", visible=False)
+            with gr.Tab("Dataset"):
+                gr.Markdown("""
+                _As we are currently updating this demo, submitting your own data is unavailable for the moment._
+                _Try out the showcase mode._
+                """)
                 
-                output_topics = gr.Plot(show_label=False, visible=False)
+                with gr.Row():
+                    with gr.Column(scale=0.75):
+                        demo_btn = gr.Button("Showcase with example data", variant="primary")
+                    with gr.Column(scale=1):
+                        gr.Markdown("""
+                            #### Run in showcase mode or use your own data
+                            Try out the demo in showcase mode, which uses example data (609,206 tweets about the COVID-19 pandemic) with all the options provided by the demo, or upload your own dataset.
+                            """)
+
+                with gr.Row():
+                    with gr.Column(scale=0.75):
+                        input_file = gr.File(
+                            label="Upload a dataset")
+                        input_checks = gr.CheckboxGroup(
+                            ["emotion frequencies", "emotion distribution over time", "peaks", "topics"],
+                            label = "Select options")
+                        send_btn = gr.Button("Submit data")
+                    with gr.Column(scale=1):
+                        gr.Markdown("""
+                            #### Data format
+                            The data should be in tsv-format with two named columns: the first column (id) should contain the sentence IDs, and the second column (text) should contain the actual texts. Optionally, there is a third column named 'date', which specifies the date associated with the text (e.g., tweet date). This column is necessary when the options 'emotion distribution over time' and 'peaks' are selected. For now, we only accept files with maximum 400 sentences and a limit of 300 tokens per sentence.
+                            
+                            #### Options
+                            **Emotion frequencies** outputs a bar plot with the prediction frequencies of each emotion category (anger, fear, joy, love, sadness or neutral).
+                            **Emotion distribution over time** outputs a line plot that visualises the frequency of predicted emotions over time for each emotion category.
+                            **Peaks** outputs a step graph that only shows the significant fluctuations (upwards and downwards) in emotion frequencies over time.
+                            **Topics** uses [BERTopic](https://maartengr.github.io/BERTopic/index.html) to find topics in the datasets, and outputs a bar plot that shows the emotion distribution per topic.
+                            """)
+                with gr.Row():
+                    with gr.Column():
+                        gr.Markdown("""
+                            ___
+                            """)
+
+                with gr.Row():
+                    with gr.Column():
+                        output_markdown = gr.Markdown("""
+                        ### Output
+                        """, visible=False)
+                        
+                        message = gr.Textbox(label="Message", visible=False)
+                        
+                        output_file = gr.File(label="Predictions", visible=False)
+                        next_button_freq = gr.Button("Show emotion frequencies", visible=False)
+                        
+                        output_plot = gr.Plot(show_label=False, visible=False).style(container=True)
+                        next_button_dist = gr.Button("Show emotion distribution over time", visible=False)
+                        
+                        output_dist = gr.Plot(show_label=False, visible=False)
+                        next_button_peaks = gr.Button("Show peaks", visible=False)
+                        
+                        output_peaks = gr.Plot(visible=False)
+                        next_button_topics = gr.Button("Show topics", visible=False)
+                        
+                        output_topics = gr.Plot(show_label=False, visible=False)
+                    
+                #send_btn.click(fn=file, inputs=[input_file,input_checks], outputs=[output_file,next_button_freq,next_button_dist,next_button_peaks,next_button_topics])
+                next_button_freq.click(fn=freq, inputs=[output_file,input_checks], outputs=[output_plot,next_button_dist,next_button_peaks,next_button_topics])
+                next_button_dist.click(fn=dist, inputs=[output_file,input_checks], outputs=[output_dist,next_button_peaks,next_button_topics])
+                next_button_peaks.click(fn=peaks, inputs=[output_file,input_checks], outputs=[output_peaks,next_button_topics])
+                next_button_topics.click(fn=topics, inputs=[output_file,input_checks], outputs=output_topics)
+                send_btn.click(fn=unavailable, inputs=[input_file,input_checks], outputs=message)
+                demo_btn.click(fn=showcase, inputs=[input_file], outputs=[message,output_file,next_button_freq,next_button_dist,next_button_peaks,next_button_topics])
         
-        #send_btn.click(fn=file, inputs=[input_file,input_checks], outputs=[output_file,next_button_freq,next_button_dist,next_button_peaks,next_button_topics])
-        next_button_freq.click(fn=freq, inputs=[output_file,input_checks], outputs=[output_plot,next_button_dist,next_button_peaks,next_button_topics])
-        next_button_dist.click(fn=dist, inputs=[output_file,input_checks], outputs=[output_dist,next_button_peaks,next_button_topics])
-        next_button_peaks.click(fn=peaks, inputs=[output_file,input_checks], outputs=[output_peaks,next_button_topics])
-        next_button_topics.click(fn=topics, inputs=[output_file,input_checks], outputs=output_topics)
-        send_btn.click(fn=unavailable, inputs=[input_file,input_checks], outputs=message)
-        demo_btn.click(fn=showcase, inputs=[input_file], outputs=[message,output_file,next_button_freq,next_button_dist,next_button_peaks,next_button_topics])
-
+        with gr.Column(scale=1, min_width=100):
+            gr.Markdown("""
+            """)
+    with gr.Row():
+        with gr.Column(scale=1, min_width=100):
+            gr.Markdown("""
+            """)
+        with gr.Column(scale=5, min_width=500):
+            gr.Markdown("""
+                <font size="2">Both this demo and the dataset have been created by [LT3](https://lt3.ugent.be/), the Language and Translation Technology Team of Ghent University. The EmotioNL project has been carried out with support from the Research Foundation – Flanders (FWO). For any questions, please contact [email protected].</font>
+                
+                <div style="display: flex"><img style="margin-right: 1em" alt="LT3 logo" src="https://lt3.ugent.be/static/images/logo_v2_single.png" width="136" height="58"> <img style="margin-right: 1em" alt="FWO logo" src="https://www.fwo.be/images/logo_desktop.png" height="58"></div>
+                """)
+        with gr.Column(scale=1, min_width=100):
+            gr.Markdown("""
+            """)
         
 demo.launch()