Spaces:
Running
Running
import gradio as gr | |
from typing import Tuple, List | |
import requests | |
import os | |
url = "http://138.4.22.130/arena" | |
def submit_prompt(prompt: str): | |
return backend.router(prompt) | |
def start_app()-> Tuple[bool, bool, bool]: | |
return ( | |
gr.update(visible=False), # landing visible | |
gr.update(visible=True), # app visible | |
gr.update(visible=False), # start_button visible | |
) | |
#Dont ask, best way to get the request param | |
def record_vote_0(prompt: str, left_chat: List, right_chat: List, | |
left_model: str, right_model: str, energy, moreConsuming, request: gr.Request) -> Tuple[str, bool, bool, bool, bool, bool]: | |
return record_vote(prompt, left_chat, right_chat, left_model, right_model, energy, moreConsuming, request, 0) | |
def record_vote_1(prompt: str, left_chat: List, right_chat: List, | |
left_model: str, right_model: str, energy, moreConsuming, request: gr.Request) -> Tuple[str, bool, bool, bool, bool, bool]: | |
return record_vote(prompt, left_chat, right_chat, left_model, right_model, energy, moreConsuming, request, 1) | |
def record_vote_2(prompt: str, left_chat: List, right_chat: List, | |
left_model: str, right_model: str, energy, moreConsuming, request: gr.Request) -> Tuple[str, bool, bool, bool, bool, bool]: | |
return record_vote(prompt, left_chat, right_chat, left_model, right_model, energy, moreConsuming, request, 2) | |
def change_vote( _id:str, backdown: bool,) -> Tuple[bool, bool]: | |
print(backdown, _id) | |
response = requests.post(url + "/v2/backdownvote", json={"backdown": backdown, "_id": _id}) | |
return ( | |
gr.update(visible=False), | |
gr.update(visible=False) | |
) | |
def record_vote(prompt: str, left_chat: List, right_chat: List, | |
left_model: str, right_model: str, energy, moreConsuming, request: gr.Request, vote_type: int ) -> Tuple[str, bool, bool, bool, bool, bool, bool]: | |
"""Record a vote for either the left or right model""" | |
vote_message = "Is a tie!" | |
if vote_type == 0: | |
vote_message = "Right model wins!" | |
elif vote_type == 1: | |
vote_message = "Left model wins!" | |
result_msg = f"Vote recorded: {vote_message}" | |
response = requests.post(url + "/v2/vote", json={"vote": vote_type, "prompt": prompt, | |
"left_chat": left_chat, "right_chat": right_chat, | |
"left_model": left_model, "right_model": right_model, | |
"ip": request.client.host | |
}) | |
print(request.client.host) | |
print(request.client) | |
print(request.headers) | |
print(request.client.host) | |
changeVisible = False | |
jsonResponse = response.json() | |
_id = jsonResponse["id"] | |
if((moreConsuming == "izquierda" and vote_type == 0) or (moreConsuming == "derecha" and vote_type == 1)): | |
changeVisible = True | |
#result, left_model, buttons[0], buttons[1], tievote_btn, model_names_row, | |
return ( | |
result_msg, # result | |
gr.update(interactive=False), # left_vote_btn interactive | |
gr.update(interactive=False), # right_vote_btn interactive | |
gr.update(interactive=False), # tie_btn interactive | |
gr.update(visible=True), # model_names_row visible | |
gr.update(visible=changeVisible), # backdown_row visible | |
_id, | |
gr.update(interactive=True) | |
) | |
def send_prompt(prompt: str) -> Tuple[List, List, str, str, bool, bool, bool, bool, str, bool]: | |
response = requests.post(url + "/v2/query", json={"prompt": prompt}) | |
jsonResponse = response.json() | |
print(jsonResponse) | |
if(jsonResponse["status"] == 200): | |
moreConsuming = jsonResponse["message"]["moreConsumption"] | |
return ( | |
[{"role":"assistant", "content": jsonResponse["answers"][0]}], # left_output | |
[{"role": "assistant", "content": jsonResponse["answers"][1]}], # right_output | |
jsonResponse["models"][0], # left_model, | |
jsonResponse["models"][1], # right_model, | |
gr.update(interactive=True, visible=True), | |
gr.update(interactive=True, visible=True), | |
gr.update(interactive=True, visible=True), | |
gr.update(visible=False), | |
moreConsuming, | |
gr.update(interactive=False) | |
) | |
css = """ | |
.logo {max-width: 200px !important; widht: 300px;} | |
""" | |
js = """ | |
document.getElementById("start").onclick = function() { | |
window.scrollTo(0, 0); | |
} | |
""" | |
# Initialize Gradio Blocks | |
with gr.Blocks(css=css, js=js) as demo: | |
_id = gr.State("") | |
moreConsuming = gr.State("") | |
with gr.Column(visible=True) as landing: | |
gr.set_static_paths(paths=["static"]) | |
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> 🌍, 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> | |
<h2 style="font-size: 30px;">🔍 Cómo Funciona</h2> | |
<ol> | |
<li><strong>Haz una Pregunta</strong> 💬: Ingresa cualquier pregunta en el cuadro de texto a continuación.</li> | |
<li><strong>Compara las Respuestas</strong> 🤖⚖️: Dos LLMs diferentes proporcionarán respuestas.</li> | |
<li><strong>Elige tu Favorita</strong> ✅: Califica cuál respuesta consideras mejor.</li> | |
<li><strong>Considera el Impacto Energético</strong> ⚡🔋: Para algunas preguntas, verás información sobre el consumo energético de los modelos.</li> | |
</ol> | |
<h2 style="font-size: 30px;">⚡ Información Energética</h2> | |
<ul> | |
<li>Cuando se muestre, los <strong>datos de consumo energético</strong> 🔋 te ayudarán a comprender el <strong>impacto ambiental</strong> 🌎.</li> | |
<li>Deberás considerar: <strong>¿Vale la pena una mejor respuesta si implica mayor consumo energético?</strong> 🤔</li> | |
<li>La comparación resaltará cuando un modelo <strong>consuma más del doble</strong> de energía que el otro ⚠️.</li> | |
</ul> | |
<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" > | |
<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> | |
</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" > | |
<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> | |
""") | |
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) | |
with gr.Row(): | |
chatbot = [None] * 2 # Initialize the list with None elements | |
messages = ["☝️ El primero es mejor", "☝️El segundo es mejor"] | |
for i in range(2): | |
with gr.Column(): | |
chatbot[i] = gr.Chatbot( | |
show_label=False, # You can set this to False to hide the label | |
type="messages", | |
elem_id="chatbot", | |
height=400, | |
show_copy_button=True, | |
latex_delimiters=[ | |
{"left": "$", "right": "$", "display": False}, | |
{"left": "$$", "right": "$$", "display": True}, | |
{"left": r"\(", "right": r"\)", "display": False}, | |
{"left": r"\[", "right": r"\]", "display": True}, | |
], | |
) | |
buttons[i] = gr.Button( | |
value=messages[i], visible=True, interactive=False | |
) | |
with gr.Row(): | |
for i in range(2): | |
with gr.Column(): | |
gr.Textbox(show_label=False, visible=False) | |
#left_output = gr.Chatbot(label="A (400w 🔋)", type="messages") | |
tievote_btn = gr.Button( | |
value="🤝 Es un empate ", visible=True, interactive=False | |
) | |
with gr.Column(visible=False) as backdown_row: | |
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) | |
with gr.Row(visible=False) as model_names_row: | |
left_model = gr.Textbox(label="Left Model", interactive=False) | |
right_model = gr.Textbox(label="Right Model", interactive=False) | |
result = gr.Textbox(label="Result", interactive=False, visible=False) | |
with gr.Group(elem_classes="container"): | |
with gr.Row(equal_height=True): | |
textbox = gr.Textbox( | |
show_label=False, | |
placeholder="👉 Introduce tu prompt y presiona Enviar", | |
elem_id="input_box", | |
#submit_btn=True, | |
) | |
send_btn = gr.Button(value="Enviar", scale=0, variant="primary") | |
previous_prompt = gr.State("") | |
tie_count = gr.State(0) | |
# Define interactions | |
textbox.submit(fn=lambda *args: send_prompt(*args), | |
inputs=[textbox], | |
outputs=[chatbot[0], chatbot[1], left_model, right_model, | |
buttons[0], buttons[1], tievote_btn, model_names_row, moreConsuming | |
]) | |
send_btn.click(fn=lambda *args: send_prompt(*args), | |
inputs=[textbox], | |
outputs=[chatbot[0], chatbot[1], left_model, right_model, | |
buttons[0], buttons[1], tievote_btn, model_names_row, moreConsuming, send_btn | |
]) | |
buttons[0].click( | |
record_vote_0, | |
inputs=[textbox, chatbot[0], chatbot[1], left_model, right_model, gr.State(value=False), moreConsuming], | |
outputs=[result,buttons[0], buttons[1], tievote_btn, model_names_row, backdown_row, _id, send_btn] | |
) | |
buttons[1].click( | |
record_vote_1, | |
inputs=[textbox, chatbot[0], chatbot[1], left_model, right_model, gr.State(value=False), moreConsuming], | |
outputs=[result,buttons[0], buttons[1], tievote_btn, model_names_row, backdown_row, _id, send_btn] | |
) | |
tievote_btn.click( | |
record_vote_2, | |
inputs=[textbox, chatbot[0], chatbot[1], left_model, right_model, gr.State(value=False), moreConsuming], | |
outputs=[result,buttons[0], buttons[1], tievote_btn, model_names_row, backdown_row, _id, send_btn] | |
) | |
backdown_btn.click( | |
lambda *args: change_vote(*args, True), | |
inputs=[_id], | |
outputs=[backdown_row, model_names_row] | |
) | |
no_backdown_btn.click( | |
lambda *args: change_vote(*args, False), | |
inputs=[_id], | |
outputs=[backdown_row, model_names_row] | |
) | |
# Project Description | |
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> 🌍, 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> | |
<h2 style="font-size: 30px;">🔍 Cómo Funciona</h2> | |
<ol> | |
<li><strong>Haz una Pregunta</strong> 💬: Ingresa cualquier pregunta en el cuadro de texto a continuación.</li> | |
<li><strong>Compara las Respuestas</strong> 🤖⚖️: Dos LLMs diferentes proporcionarán respuestas.</li> | |
<li><strong>Elige tu Favorita</strong> ✅: Califica cuál respuesta consideras mejor.</li> | |
<li><strong>Considera el Impacto Energético</strong> ⚡🔋: Para algunas preguntas, verás información sobre el consumo energético de los modelos.</li> | |
</ol> | |
<h2 style="font-size: 30px;">⚡ Información Energética</h2> | |
<ul> | |
<li>Cuando se muestre, los <strong>datos de consumo energético</strong> 🔋 te ayudarán a comprender el <strong>impacto ambiental</strong> 🌎.</li> | |
<li>Deberás considerar: <strong>¿Vale la pena una mejor respuesta si implica mayor consumo energético?</strong> 🤔</li> | |
<li>La comparación resaltará cuando un modelo <strong>consuma más del doble</strong> de energía que el otro ⚠️.</li> | |
</ul> | |
<p style="text-align: center; margin-top: 20px; font-size: 35px;"> | |
🌿 <strong>¡Hagamos la IA más sostenible juntos!</strong> 🚀♻️ | |
</p> | |
</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> | |
""") | |
start_button = gr.Button(value="Start", visible=True, interactive=True, size= "lg",elem_id="start", 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). """ | |
) | |
if __name__ == "__main__": | |
gr.set_static_paths(paths=[os.path.join(os.path.dirname(__file__), "static")]) | |
demo.launch(show_api=False) | |