Change background

app.py

@@ -96,6 +96,7 @@ def send_prompt(prompt: str) -> Tuple[List, List, str, str, bool, bool, bool, bo
     )
 css = """
 .logo {max-width: 200px !important; widht: 300px;}
+.myElemento { background-color:#E8E9E3; border-color:#E8E9E3; }
 """
 
 js = """
@@ -135,37 +136,37 @@ with gr.Blocks(css=css, js=js) as demo:
     <p style="text-align: center; margin-top: 20px; font-size: 35px;">
         🌿 <strong>¡Hagamos la IA más sostenible juntos!</strong> 🚀♻️
     </p>
-    <div style="flex-wrap: wrap; width: 100%; display:flex; flex-direction: row; justify-content:center; align-items:stretch;"  >
-    <div style="margin:2px; background-color:white; display:flex; border-radius:4px; flex-direction:row; align-items:center" >
+    <div style="flex-wrap: wrap;  width: 100%; display:flex; flex-direction: row; justify-content:center; align-items:stretch;"  >
+    <div style="margin:2px; background-color:#e4e4e7; display:flex; border-radius:4px; flex-direction:row; align-items:center" >
         <img class="logo" src='/gradio_api/file=static/cotec.png'>
     </div>
-    <div style="margin:2px;background-color:white; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
+    <div style="margin:2px;background-color:#e4e4e7; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
         <img class="logo" src='/gradio_api/file=static/upm.png'>
     </div>
-    <div style="margin:2px;background-color:white; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
+    <div style="margin:2px;background-color:#e4e4e7; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
         <img class="logo" src='/gradio_api/file=static/etsit.png'>
     </div>
     </div>
 
 </div>
 
-            """)
+            """, )
     with gr.Column(visible=False) as app:
         buttons = [None] * 2  # Initialize the list with None elements
         with gr.Group(elem_classes="container"):
             gr.HTML("""
             <div style="flex-wrap: wrap; width: 100%; display:flex; flex-direction: row; justify-content:center; align-items:stretch;"  >
-            <div style="margin:2px; background-color:white; display:flex; border-radius:4px; flex-direction:row; align-items:center" >
+            <div style="margin:2px; display:flex; border-radius:4px; flex-direction:row; align-items:center" >
                 <img class="logo" src='/gradio_api/file=static/cotec.png'>
             </div>
-            <div style="margin:2px;background-color:white; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
+            <div style="margin:2px;display:flex; border-radius:4px;flex-direction:row; align-items:center" >
                 <img class="logo" src='/gradio_api/file=static/upm.png'>
             </div>
-            <div style="margin:2px;background-color:white; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
+            <div style="margin:2px;display:flex; border-radius:4px;flex-direction:row; align-items:center" >
                 <img class="logo" src='/gradio_api/file=static/etsit.png'>
             </div>
             </div>
-            """)
+            """, elem_classes="myElemento")
             gr.Image("static/logo.jpg", elem_id="centered", show_label=False)
             with gr.Row(visible=False) as model_consumption_row:
                 consumption_text = gr.Textbox(label="Consumo: ", visible=True, interactive=False)
@@ -265,7 +266,7 @@ with gr.Blocks(css=css, js=js) as demo:
 
         # Project Description
         gr.HTML("""
-        <div style="padding: 20px; font-size: 18px;">
+        <div style="padding: 20px; font-size: 18px;border-color:#E8E9E3 ">
             <h2 style="font-size: 30px;">🌱 Sobre Este Proyecto</h2>
             <p>Este espacio es parte del proyecto <strong>"Sostenibilidad Generativa"</strong> 🌍, desarrollado en la Escuela Técnica Superior de Ingenieros de Telecomunicación de la Universidad Politécnica de Madrid y financiado por la <strong>Fundación Cotec</strong>. Nuestro objetivo es evaluar cómo la <strong>conciencia energética</strong> ⚡ impacta la evaluación de los usuarios sobre los <strong>Modelos de Lenguaje de Gran Escala (LLMs)</strong>.</p>
 
@@ -290,18 +291,18 @@ with gr.Blocks(css=css, js=js) as demo:
         </div>
         """)
         gr.HTML("""
-            <div style="flex-wrap: wrap; width: 100%; display:flex; flex-direction: row; justify-content:center; align-items:stretch;"  >
-            <div style="margin:2px; background-color:white; display:flex; border-radius:4px; flex-direction:row; align-items:center" >
-                <img class="logo" src='/gradio_api/file=static/cotec.png'>
-            </div>
-            <div style="margin:2px;background-color:white; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
-                <img class="logo" src='/gradio_api/file=static/upm.png'>
-            </div>
-            <div style="margin:2px;background-color:white; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
-                <img class="logo" src='/gradio_api/file=static/etsit.png'>
-            </div>
+            <div style="flex-wrap: wrap; background-color:#E8E9E3; width: 100%; display:flex; flex-direction: row; justify-content:center; align-items:stretch;"  >
+                <div style="margin:2px; background-color:#E8E9E3; display:flex; border-radius:4px; flex-direction:row; align-items:center" >
+                    <img class="logo" src='/gradio_api/file=static/cotec.png'>
+                </div>
+                <div style="margin:2px; background-color:#E8E9E3; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
+                    <img class="logo" src='/gradio_api/file=static/upm.png'>
+                </div>
+                <div style="margin:2px; background-color:#E8E9E3; display:flex; border-radius:4px;flex-direction:row; align-items:center" >
+                    <img class="logo" src='/gradio_api/file=static/etsit.png'>
+                </div>
             </div>
-    """)
+    """, )
 
     start_button =  gr.Button(value="Start", visible=True, interactive=True, size= "lg",elem_id="start", variant="primary")
     start_button.click(