visual

app.py

@@ -92,18 +92,21 @@ def send_prompt(prompt: str) -> Tuple[List, List, str, str, bool, bool, bool, bo
          gr.update(visible=False),
          moreConsuming
     )
+css = """
+.logo {max-width: 200px !important; widht: 300px;}
+"""
 
 # Initialize Gradio Blocks
-with gr.Blocks(css="footer{display:none !important}") as demo:
+with gr.Blocks(css=css) as demo:
     _id = gr.State("")
     moreConsuming = gr.State("")
     with gr.Column(visible=True) as landing:
         gr.set_static_paths(paths=["static"])
-        with gr.Group():
+        with gr.Group(elem_classes="container"):
             gr.HTML("""
 <div style="padding: 20px; font-size: 18px;">
     <h2 style="font-size: 30px;">🌱 Sobre Este Proyecto</h2>
-    <p>Este espacio es parte del proyecto <strong>"Sostenibilidad Generativa"</strong> 🌍, 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>
+    <p>Este espacio es parte del proyecto <strong>"Sostenibilidad Generativa"</strong> 🌍, desarrollado en 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>
 
     <h2 style="font-size: 30px;">🔍 Cómo Funciona</h2>
     <ol>
@@ -128,13 +131,13 @@ with gr.Blocks(css="footer{display:none !important}") as demo:
             """)
     with gr.Column(visible=False) as app:
         buttons = [None] * 2  # Initialize the list with None elements
-        with gr.Group():
+        with gr.Group(elem_classes="container"):
             gr.Image("static/logo.png", 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)
             with gr.Row():
                 chatbot = [None] * 2  # Initialize the list with None elements
-                messages = ["👈  Left is better", "👉  Right is better"]
+                messages = ["☝️ El primero es mejor", "☝️El segundo es mejor"]
                 for i in range(2):
                     with gr.Column():
                         chatbot[i] = gr.Chatbot(
@@ -160,10 +163,10 @@ with gr.Blocks(css="footer{display:none !important}") as demo:
 
                 #left_output = gr.Chatbot(label="A (400w 🔋)", type="messages")
         tievote_btn = gr.Button(
-            value="🤝  It's a Tie!", visible=True, interactive=False
+            value="🤝 Es un empate ", visible=True, interactive=False
         )
         with gr.Column(visible=False) as backdown_row:
-            backdown_txt = gr.HTML("""<h2> ¿Sabiendo que la respuesta que no has elegido consume menos energía cambiarías tu elección o la mantendrías?</h2>""")
+            backdown_txt = gr.HTML("""<h2> ¿Sabiendo que la otra respuesta consume menos energía, cambiarías tu elección asumiendo la pérdida de calidad en la respuesta?</h2>""")
             with gr.Row():
                 no_backdown_btn = gr.Button(value="Mantengo la respuesta", visible=True, interactive=True)
                 backdown_btn = gr.Button(value="Cambiaría de respuesta", visible=True, interactive=True)
@@ -172,11 +175,11 @@ with gr.Blocks(css="footer{display:none !important}") as demo:
             right_model = gr.Textbox(label="Right Model", interactive=False)
 
         result = gr.Textbox(label="Result", interactive=False, visible=False)
-        with gr.Group():
-            with gr.Row():
+        with gr.Group(elem_classes="container"):
+            with gr.Row(equal_height=True):
                 textbox = gr.Textbox(
                     show_label=False,
-                    placeholder="👉 Enter your prompt and press ENTER",
+                    placeholder="👉 Introduce tu prompt y presiona Enter",
                     elem_id="input_box",
                     #submit_btn=True,
                 )
@@ -230,7 +233,7 @@ with gr.Blocks(css="footer{display:none !important}") as demo:
         gr.HTML("""
         <div style="padding: 20px; font-size: 18px;">
             <h2 style="font-size: 30px;">🌱 Sobre Este Proyecto</h2>
-            <p>Este espacio es parte del proyecto <strong>"Sostenibilidad Generativa"</strong> 🌍, 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>
+            <p>Este espacio es parte del proyecto <strong>"Sostenibilidad Generativa"</strong> 🌍, desarrollado en 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>
 
             <h2 style="font-size: 30px;">🔍 Cómo Funciona</h2>
             <ol>
@@ -252,17 +255,30 @@ with gr.Blocks(css="footer{display:none !important}") as demo:
             </p>
         </div>
         """)
-
-        gr.Markdown(""" This space is part of a research project to study how knowledge of energy consumption influences user preferences in AI systems. It must be used only for that purpose and not for any illegal, harmful or offensive activities. Please do not upload personal or private information. The space collects and stores the questions and answers and reserves the right to distribute it under a Creative Commons Attribution (CC-BY) license.
-
-Este space es parte de un proyecto de investigación para estudiar cómo el conocimiento sobre el consumo de energía influye en las preferencias de los usuarios en los sistemas de IA. Debe usarse solo para ese propósito y no para actividades ilegales, dañinas u ofensivas. Por favor, no subas información personal o privada. Este espacio recopila y almacena las preguntas y respuestas y se reserva el derecho de distribuirlas bajo una licencia Creative Commons Attribution (CC-BY).  """
-        )
     start_button =  gr.Button(value="Start", visible=True, interactive=True, size= "lg", variant="primary")
     start_button.click(
         lambda *args: start_app(),
         inputs=[],
         outputs=[landing, app, start_button]
     )
+    gr.Markdown(""" This space is part of a research project to study how knowledge of energy consumption influences user preferences in AI systems. It must be used only for that purpose and not for any illegal, harmful or offensive activities. Please do not upload personal or private information. The space collects and stores the questions and answers and reserves the right to distribute it under a Creative Commons Attribution (CC-BY) license.
+
+Este space es parte de un proyecto de investigación para estudiar cómo el conocimiento sobre el consumo de energía influye en las preferencias de los usuarios en los sistemas de IA. Debe usarse solo para ese propósito y no para actividades ilegales, dañinas u ofensivas. Por favor, no subas información personal o privada. Este espacio recopila y almacena las preguntas y respuestas y se reserva el derecho de distribuirlas bajo una licencia Creative Commons Attribution (CC-BY).  """
+        )
+
+    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; 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; 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; flex-direction:row; align-items:center" >
+        <img class="logo" src='/gradio_api/file=static/etsit.png'>
+    </div>
+    </div>
+    """)
 
 if __name__ == "__main__":
     gr.set_static_paths(paths=[os.path.join(os.path.dirname(__file__), "static")])