custom css

app.py

@@ -13,6 +13,7 @@ import matplotlib.colors as mcolors
 import plotly.express as px
 import seaborn as sns
 from tqdm import tqdm
+from utils import css
 
 PATH = '/data/' # at least 150GB storage needs to be attached
 os.environ['TRANSFORMERS_CACHE'] = PATH
@@ -207,13 +208,13 @@ def predict_wrapper(text, language):
     return results, figure, piechart, heatmap, output_info
 
 
-with gr.Blocks() as demo:
+with gr.Blocks(css=css) as demo:
     placeholder = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
     introduction = """This platform is designed to detect and visualize emotions in text. The model behind it operates using a 6-label codebook, including the following labels: ‘Anger’, ‘Fear’, ‘Disgust’, ‘Sadness’, ‘Joy’, and ‘None of Them’.
     The model is optimized for sentence-level analysis, and make predictions in the following languages: Czech, English, French, German, Hungarian, Polish, and Slovak.
     The text you enter in the input box is automatically divided into sentences, and the analysis is performed on each sentence. Depending on the length of the text, this process may take a few seconds, but for longer texts, it can take up to 2-3 minutes.
     """
-    gr.Markdown(introduction)
+    gr.Markdown(introduction, elem_classes="info")
     with gr.Row():
         with gr.Column():
             input_text = gr.Textbox(lines=6, label="Input", placeholder="Enter your text here...")
@@ -227,13 +228,13 @@ with gr.Blocks() as demo:
         with gr.Column(scale=7):
             piechart = gr.Plot()
         with gr.Column(scale=3):
-            gr.Markdown("The following pie chart shows the average probabilities of all emotions associated with the entire text.")
+            gr.Markdown("The following pie chart shows the average probabilities of all emotions associated with the entire text.", elem_classes="info")
 
     with gr.Row():
         with gr.Column(scale=7):
             plot = gr.Plot()
         with gr.Column(scale=3):
-            gr.Markdown("The bar plot represents the relative frequency of emotion predictions at the sentence level.")
+            gr.Markdown("The bar plot represents the relative frequency of emotion predictions at the sentence level.", elem_classes="info")
 
     with gr.Row():
         with gr.Column(scale=7):
@@ -243,13 +244,13 @@ with gr.Blocks() as demo:
                 wrap=True  # important
             )
         with gr.Column(scale=3):
-            gr.Markdown("The table displays the predicted emotion and its confidence value for each sentence in the text.")
+            gr.Markdown("The table displays the predicted emotion and its confidence value for each sentence in the text.", elem_classes="info")
 
     with gr.Row():
         with gr.Column(scale=7):
             heatmap = gr.Plot()
         with gr.Column(scale=3):
-            gr.Markdown("The table displays the predicted emotion and its confidence value for each sentence in the text")
+            gr.Markdown("The table displays the predicted emotion and its confidence value for each sentence in the text", elem_classes="info")
 
     with gr.Row():
         model_info = gr.Markdown()

utils.py

@@ -27,4 +27,8 @@ def download_hf_models():
                                                                    token=HF_TOKEN)
     for tokenizer_id in tokenizers:
         AutoTokenizer.from_pretrained(tokenizer_id)
+        
+css = '''
+.info {font-size: 3em; !important}
+'''