app.py

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("""
<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:#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:#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:#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; 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;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;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)
            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;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>

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