ui/components.py

import gradio as gr
from ui.formatting import format_history
from urllib.parse import urlparse, parse_qs
import pandas as pd


CSV_FILE = "20260316_131636_llm_responses.csv"


def load_app(request: gr.Request):
    prolific_id = request.query_params.get("prolific_id", "RACHEL-TEST")  # TODO: change
    # use prolific_id to determine which page to show, log it, etc.
    return prolific_id


def get_prompt_and_responses(prolific_id):
    df = pd.read_csv(CSV_FILE)
    filtered_df = df[df.prolific_id == prolific_id].iloc[0]
    print(filtered_df["prompt"])
    print(filtered_df["response_a"])
    print(filtered_df["response_b"])
    return filtered_df["prompt"], filtered_df["response_a"], filtered_df["response_b"] 


def update_display(prolific_id):
    print(prolific_id)
    prompt, response_a, response_b = get_prompt_and_responses(prolific_id)
    
    history = [{
        "user": prompt,
        "response_a": response_a,
        "response_b": response_b,
        "highlight": "none"  # or whatever default
    }]
    
    return prompt, response_a, response_b, history, format_history(history)



def create_interface():
    with gr.Blocks(title="Minimal LM Arena", theme=gr.themes.Default()) as demo:   
        # State variables for conversation history
        # conversation_id_state = gr.State()
        prolific_id_state = gr.State("")  # TODO: remove later
        prompt_state = gr.State("") 
        response_a_state = gr.State("")
        response_b_state = gr.State("")
        history_state = gr.State([])  # Store history as state

        conversation_display = gr.HTML(label="Conversation")

        
        # Also trigger on initial load
        demo.load(
            load_app, 
            inputs=None, 
            outputs=[prolific_id_state]
        ).then(
            update_display,
            inputs=[prolific_id_state],
            outputs=[prompt_state, response_a_state, response_b_state, history_state, conversation_display]
        )
        
    return demo