Update app.py

app.py

@@ -156,33 +156,33 @@ def compare_question_answering_spanish(context, question):
     bloom_answer = bloom_question_answering(context, question)
     return f"""
     <div>
-        <h2 style='color: #2e8b57; font-weight: bold;'>Respuestas:</h2>
+        <h2 style='color: #2e8b57; font-weight: bold; text-align: center;'>Respuestas:</h2>
     </div><br>
-    <div>
+    <div style='color: #2e8b57; font-weight: bold;'>
         <strong>ConfliBERT-Spanish-Beto-Cased-NewsQA:</strong><br>{confli_answer_spanish}</div><br>
-    <div>
+    <div style='color: #2e8b57; font-weight: bold;'>
         <strong>Beto-Spanish-Cased-NewsQA:</strong><br>{beto_answer_spanish}
     </div><br>
-    <div>
+    <div style='color: #2e8b57; font-weight: bold;'>
         <strong>ConfliBERT-Spanish-Beto-Cased-SQAC:</strong><br>{confli_sqac_answer_spanish}
     </div><br>
-    <div>
+    <div style='color: #2e8b57; font-weight: bold;'>
         <strong>Beto-Spanish-Cased-SQAC:</strong><br>{beto_sqac_answer_spanish}
     </div><br>
-    <div>
+    <div style='color: #2e8b57; font-weight: bold;'>
         <strong>GPT-2-Small-Spanish:</strong><br>{gpt2_answer_spanish}
     </div><br>
-    <div>
+    <div style='color: #2e8b57; font-weight: bold;'>
         <strong>BLOOM-1.7B:</strong><br>{bloom_answer}
     </div><br>
-    <div>
+    <div style='color: #2e8b57; font-weight: bold;'>
         <strong>Información del modelo:</strong><br>
-        ConfliBERT-Spanish-Beto-Cased-NewsQA: <a href='https://huggingface.co/salsarra/ConfliBERT-Spanish-Beto-Cased-NewsQA' target='_blank'>salsarra/ConfliBERT-Spanish-Beto-Cased-NewsQA</a><br>
-        Beto-Spanish-Cased-NewsQA: <a href='https://huggingface.co/salsarra/Beto-Spanish-Cased-NewsQA' target='_blank'>salsarra/Beto-Spanish-Cased-NewsQA</a><br>
-        ConfliBERT-Spanish-Beto-Cased-SQAC: <a href='https://huggingface.co/salsarra/ConfliBERT-Spanish-Beto-Cased-SQAC' target='_blank'>salsarra/ConfliBERT-Spanish-Beto-Cased-SQAC</a><br>
-        Beto-Spanish-Cased-SQAC: <a href='https://huggingface.co/salsarra/Beto-Spanish-Cased-SQAC' target='_blank'>salsarra/Beto-Spanish-Cased-SQAC</a><br>
-        GPT-2-Small-Spanish: <a href='https://huggingface.co/datificate/gpt2-small-spanish' target='_blank'>datificate GPT-2 Small Spanish</a><br>
-        BLOOM-1.7B: <a href='https://huggingface.co/bigscience/bloom-1b7' target='_blank'>bigscience BLOOM-1.7B</a><br>
+        <a href='https://huggingface.co/salsarra/ConfliBERT-Spanish-Beto-Cased-NewsQA' target='_blank'>ConfliBERT-Spanish-Beto-Cased-NewsQA</a><br>
+        <a href='https://huggingface.co/salsarra/Beto-Spanish-Cased-NewsQA' target='_blank'>Beto-Spanish-Cased-NewsQA</a><br>
+        <a href='https://huggingface.co/salsarra/ConfliBERT-Spanish-Beto-Cased-SQAC' target='_blank'>ConfliBERT-Spanish-Beto-Cased-SQAC</a><br>
+        <a href='https://huggingface.co/salsarra/Beto-Spanish-Cased-SQAC' target='_blank'>Beto-Spanish-Cased-SQAC</a><br>
+        <a href='https://huggingface.co/datificate/gpt2-small-spanish' target='_blank'>GPT-2-Small-Spanish</a><br>
+        <a href='https://huggingface.co/bigscience/bloom-1b7' target='_blank'>BLOOM-1.7B</a><br>
     </div>
     """
 
@@ -202,12 +202,12 @@ css_styles = """
         color: #ff8c00;
     }
     h2 {
-        color: #ff8c00;
+        color: #2e8b57;
         text-align: center;
         font-size: 1.5em;
     }
     .description {
-        color: inherit;
+        color: #2e8b57;
         display: block;
         font-size: 1em;
         text-align: center;
@@ -216,11 +216,9 @@ css_styles = """
         text-align: center;
         margin-top: 10px;
         font-size: 0.9em;
-        color: #666;
         width: 100%;
     }
     .footer a {
-        color: #2e8b57;
         font-weight: bold;
         text-decoration: none;
     }
@@ -237,18 +235,18 @@ demo = gr.Interface(
         gr.Textbox(lines=2, placeholder="Ingrese su pregunta aquí...", label="Pregunta")
     ],
     outputs=gr.HTML(label="Salida"),
-    title="<a href='https://eventdata.utdallas.edu/conflibert/' target='_blank'>ConfliBERT-Spanish-QA</a>",
+    title="<a href='https://eventdata.utdallas.edu/conflibert/' target='_blank' style='color: #2e8b57; text-align: center;'>ConfliBERT-Spanish-QA</a>",
     description="<span class='description'>Compare respuestas entre los modelos ConfliBERT, BETO, ConfliBERT SQAC, Beto SQAC, GPT-2 Small Spanish y BLOOM-1.7B para preguntas en español.</span>",
     css=css_styles,
     allow_flagging="never",
-    # Footer HTML with centered, green links
+    # Footer HTML with green "Developed By" text
     article="""
     <div class='footer'>
-        <a href='https://eventdata.utdallas.edu/' style='color: #2e8b57; font-weight: bold;'>UTD Event Data</a> | 
-        <a href='https://www.utdallas.edu/' style='color: #2e8b57; font-weight: bold;'>University of Texas at Dallas</a>
+        <a href='https://eventdata.utdallas.edu/'>UTD Event Data</a> | 
+        <a href='https://www.utdallas.edu/'>University of Texas at Dallas</a>
     </div>
-    <div class='footer'>
-        Developed By: <a href='https://www.linkedin.com/in/sultan-alsarra-phd-56977a63/' target='_blank' style='color: #2e8b57; font-weight: bold;'>Sultan Alsarra</a>
+    <div class='footer' style='color: #2e8b57; font-weight: bold;'>
+        Developed By: <a href='https://www.linkedin.com/in/sultan-alsarra-phd-56977a63/' target='_blank'>Sultan Alsarra</a>
     </div>
     """
 )