import gradio as gr from typing import Tuple, List import requests import os url = "http://138.4.22.130/arena" def get_styling(values): colors = ["rgba(0,190,0)", "rgba(240,165,0)"] return [["", f"background: linear-gradient(90deg, {colors[ind%2]} {row[1]}%, transparent {row[1]}%)"] for ind, row in enumerate(values)] headers = ["Modelo", "Porcentaje %"] def get_display(values): display_values = [] for val in values: display_values.append( [val[0],'{:.2f}'.format(val[1])]) return display_values def fetch_gpt(): rAns = requests.get(url + "/v2/stats/gpt") ansJSON = rAns.json() gpt4omin, gpt4o = 0, 0 gpt1, gpt41mini = 0, 0 backdown = ansJSON["resWithAwareness"] ties = ansJSON["ties"] for model in ansJSON["resByModel"]: if(model["_id"] == "gpt-4o-mini"): gpt4omin = model["count"] elif(model["_id"]== "gpt-4o"): gpt4o = model["count"] data = [ ["GPT4 mini", (gpt4omin+ties)/(gpt4o+gpt4omin+ties)*100 ], ["GPT4", gpt4o/(gpt4o+gpt4omin+ties)*100 ], ["GPT4 mini con concienciación", (gpt4omin+backdown+ties)/(gpt4o+gpt4omin+ties)*100 ], ["GPT4 con concienciación", (gpt4o-backdown)/(gpt4o+gpt4omin+ties)*100 ], ] styling = get_styling(data) display_value = get_display(data) return { "data": data, "headers": headers, "metadata": { "styling": styling, "display_value": display_value } } def fetch_llama(): rAns = requests.get(url + "/v2/stats/llama") ansJSON = rAns.json() llama70, llama8 = 0, 0 gpt1, gpt41mini = 0, 0 backdown = ansJSON["resWithAwareness"] ties = ansJSON["ties"] for model in ansJSON["resByModel"]: if(model["_id"] == "llama-3.3-70b-versatile"): llama70 = model["count"] elif(model["_id"] == "llama3-8b-8192"): llama8 = model["count"] data = [ ["Llama 8", (llama8+ties)/(llama70+llama8+ties)*100 ], ["Llama 70", llama70/(llama70+llama8+ties)*100 ], ["Llama 8 con concienciación", (llama8+backdown+ties)/(llama70+llama8+ties)*100 ], ["Llama 70 con concienciación", (llama70-backdown)/(llama70+llama8+ties)*100 ], ] styling = get_styling(data) display_value = get_display(data) return { "data": data, "headers": headers, "metadata": { "styling": styling, "display_value": display_value } } def fetch_claude(): rAns = requests.get(url + "/v2/stats/claude") ansJSON = rAns.json() cloude, sonet = 0, 0 gpt1, gpt41mini = 0, 0 backdown = ansJSON["resWithAwareness"] ties = ansJSON["ties"] for model in ansJSON["resByModel"]: if(model["_id"] == "clause-haiku-3.5"): cloude = model["count"] elif(model["_id"] == "clause-sonet-3.5"): sonet = model["count"] data = [ ["Claude", (cloude+ties)/(sonet+cloude+ties)*100 ], ["Sonet", sonet/(sonet+cloude+ties)*100 ], ["Claude con concienciación", (cloude+backdown+ties)/(sonet+cloude+ties)*100 ], ["Sonet 70 con concienciación", (sonet-backdown+ties)/(sonet+cloude+ties)*100 ], ] styling = get_styling(data) display_value = get_display(data) return { "data": data, "headers": headers, "metadata": { "styling": styling, "display_value": display_value } } def fetch_gpt_2(): rAns = requests.get(url + "/v2/stats/gpt1") ansJSON = rAns.json() gpt1, gpt41mini = 0, 0 backdown = ansJSON["resWithAwareness"] ties = ansJSON["ties"] for model in ansJSON["resByModel"]: if(model["_id"] == "gpt-4.1"): gpt41 = model["count"] elif(model["_id"] == "gpt-4.1-mini"): gpt41mini = model["count"] data = [ ["GPT4.1 mini", (gpt41mini+ties)/(gpt41+gpt41mini+ties)*100 ], ["GPT4.1 ", gpt41/(gpt41+gpt41mini+ties)*100 ], ["GPT4.1 mini con concienciación", (backdown+gpt41mini+ties)/(gpt41+gpt41mini+ties)*100 ], ["GPT4.1 con concienciación", (gpt41-backdown)/(gpt41+gpt41mini+ties)*100 ], ] styling = get_styling(data) display_value = get_display(data) return { "data": data, "headers": headers, "metadata": { "styling": styling, "display_value": display_value } } 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]: 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 }) 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() 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;} .myElemento { background-color:#E8E9E3; border-color:#E8E9E3; } """ js = """ document.getElementById("start").onclick = function() { window.scrollTo(0, 0); } """ buttons_toggle = [None] * 2 # Initialize the list with None elements # Initialize Gradio Blocks with gr.Blocks(css=css, js=js) as mainapp: _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("""

🌱 Sobre Este Proyecto

Este espacio es parte del proyecto "Sostenibilidad Generativa" 🌍, desarrollado en la Escuela Técnica Superior de Ingenieros de Telecomunicación de la Universidad Politécnica de Madrid y financiado por la Fundación Cotec. Nuestro objetivo es evaluar cómo la conciencia energética ⚡ impacta la evaluación de los usuarios sobre los Modelos de Lenguaje de Gran Escala (LLMs).

🔍 Cómo Funciona

  1. Haz una Pregunta 💬: Ingresa cualquier pregunta en el cuadro de texto a continuación.
  2. Compara las Respuestas 🤖⚖️: Dos LLMs diferentes proporcionarán respuestas.
  3. Elige tu Favorita ✅: Califica cuál respuesta consideras mejor.
  4. Considera el Impacto Energético ⚡🔋: Para algunas preguntas, verás información sobre el consumo energético de los modelos.

⚡ Información Energética

🌿 ¡Hagamos la IA más sostenible juntos! 🚀♻️

""", ) with gr.Column(visible=False) as app: buttons = [None] * 2 # Initialize the list with None elements with gr.Group(elem_classes="container"): gr.HTML("""
""", 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) 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("""

¿Sabiendo que la otra respuesta consume menos energía, cambiarías tu elección asumiendo la pérdida de calidad en la respuesta?

""") 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("""

🌱 Sobre Este Proyecto

Este espacio es parte del proyecto "Sostenibilidad Generativa" 🌍, desarrollado en la Escuela Técnica Superior de Ingenieros de Telecomunicación de la Universidad Politécnica de Madrid y financiado por la Fundación Cotec. Nuestro objetivo es evaluar cómo la conciencia energética ⚡ impacta la evaluación de los usuarios sobre los Modelos de Lenguaje de Gran Escala (LLMs).

🔍 Cómo Funciona

  1. Haz una Pregunta 💬: Ingresa cualquier pregunta en el cuadro de texto a continuación.
  2. Compara las Respuestas 🤖⚖️: Dos LLMs diferentes proporcionarán respuestas.
  3. Elige tu Favorita ✅: Califica cuál respuesta consideras mejor.
  4. Considera el Impacto Energético ⚡🔋: Para algunas preguntas, verás información sobre el consumo energético de los modelos.

⚡ Información Energética

🌿 ¡Hagamos la IA más sostenible juntos! 🚀♻️

""") gr.HTML("""
""", ) 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). """ ) with gr.Blocks(fill_height=False) as data: gr.Markdown("## GPT4") gr.DataFrame(fetch_gpt, every=gr.Timer(60)) gr.Markdown("## Llama 3") gr.DataFrame(fetch_llama, every=gr.Timer(60)) gr.Markdown("## GPT4.1") gr.DataFrame(fetch_gpt_2, every=gr.Timer(60)) gr.Markdown("## Claude") gr.DataFrame(fetch_claude, every=gr.Timer(60)) if __name__ == "__main__": gr.set_static_paths(paths=[os.path.join(os.path.dirname(__file__), "static")]) demo = gr.TabbedInterface([mainapp, data], ["Arena", "Data"], css=css, js=js) demo.launch(show_api=False)