Update app.py

app.py

@@ -1,142 +1,266 @@
 import json
-import re
-import argparse
+import random
+import html
+import markdown
+from typing import List, Dict, Any, Tuple
+
 import gradio as gr
+import pandas as pd
+from datasets import load_dataset
+
+# df = pd.read_json("selected_battles.json")
+
+# load arena battles
+ds = load_dataset("lmarena-ai/arena-human-preference-100k", split="train")
+battles = ds['train'].to_pandas()
+
+# Expected columns in this dataset family:
+# ['question_id','model_a','model_b','winner','conversation_a','conversation_b',
+#  'turn','anony','language','tstamp','conv_metadata','is_code','is_refusal',
+#  'dedup_tag','category_tag','judge_hash', ...]
+# See HF card.  ──> winner ∈ {model_a, model_b, tie, both_bad}; conversations are full threads.   [oai_citation:1‡Hugging Face](https://huggingface.co/datasets/lmarena-ai/arena-human-preference-100k/blob/c9fe392b54cd08a0fd27777455318bac2e7b495c/README.md?utm_source=chatgpt.com)
+
+# Dropdown options - sorted by frequency
+def get_sorted_options(column_name):
+    if column_name not in df.columns:
+        return ["(Any)"]
+    value_counts = df[column_name].dropna().value_counts()
+    sorted_values = value_counts.index.tolist()
+    return ["(Any)"] + sorted_values
+
+models_a = get_sorted_options("model_a")
+models_b = get_sorted_options("model_b")
+languages = get_sorted_options("language")
+
+def _ensure_messages(x: Any) -> List[Dict[str, Any]]:
+    """
+    conversation_a / conversation_b can be:
+      - a Python list of {role, content} dicts
+      - a JSON string encoding that list
+    Normalize to a list of dicts with 'role' and 'content'.
+    """
+    if isinstance(x, list):
+        return x
+    if isinstance(x, str):
+        try:
+            val = json.loads(x)
+            if isinstance(val, list):
+                return val
+        except Exception:
+            pass
+    # Last resort: wrap as a single assistant message
+    return [{"role": "assistant", "content": str(x)}]
+
+def _winner_text(row: pd.Series) -> str:
+    w = str(row.get("winner", "")).strip().lower()
+    mapping = {
+        "model_a": "Preference: Model A",
+        "model_b": "Preference: Model B",
+        "tie": "Preference: Tie",
+        "both_bad": "Preference: Tie (both bad)",
+    }
+    return mapping.get(w, "Preference: (unknown)")
+
+def _bubble_html(messages: List[Dict[str, Any]], side_label: str) -> str:
+    """
+    Make a chat-like interface with proper user/assistant bubbles.
+    User messages are on the left, assistant messages on the right.
+    """
+    # Tailwind-like inline styles (no external CSS)
+    css = """
+    <style>
+      .chat-container {padding:12px; border-radius:16px; background:#fafafa; box-shadow:0 1px 3px rgba(0,0,0,.08);}
+      .model-label {font-weight:600; font-size:14px; margin-bottom:12px; opacity:.8; text-align:center;}
+      .message {margin:12px 0; display:flex; align-items:flex-start;}
+      .message.user {justify-content:flex-start;}
+      .message.assistant {justify-content:flex-end;}
+      .bubble {max-width:70%; padding:10px 14px; border-radius:18px; word-wrap:break-word;}
+      .bubble.user {background:#e9eef7; color:#2c3e50; margin-right:auto;}
+      .bubble.assistant {background:#eaf7ea; color:#2c3e50; margin-left:auto;}
+      .role-label {font-size:11px; font-weight:500; margin-bottom:4px; opacity:.7;}
+      .role-label.assistant {text-align:right;}
+      .bubble pre {background:#f5f5f5; padding:8px; border-radius:4px; overflow-x:auto; margin:8px 0;}
+      .bubble code {background:#f0f0f0; padding:2px 4px; border-radius:3px; font-family:monospace;}
+      .bubble p {margin:8px 0;}
+      .bubble ul, .bubble ol {margin:8px 0; padding-left:20px;}
+      .bubble blockquote {border-left:3px solid #ddd; padding-left:12px; margin:8px 0; color:#666;}
+    </style>
+    """
+    body = [f'<div class="chat-container">']
+    
+    # Only show model label at top for User side
+    if side_label != "Assistant":
+        body.append(f'<div class="model-label">{side_label}</div>')
+    
+    first_assistant_message = True
+    for m in messages:
+        role = (m.get("role") or "").lower()
+        content = str(m.get("content", "")).strip()
+        if not content:
+            continue
+            
+        # Convert markdown to HTML
+        try:
+            rendered_content = markdown.markdown(content, extensions=['fenced_code', 'codehilite', 'tables'])
+        except:
+            # Fallback to escaped content if markdown rendering fails
+            rendered_content = html.escape(content)
+            
+        if role in ("user", "system"):
+            role_display = "User" if role == "user" else "System"
+            body.append(f'''
+                <div class="message user">
+                    <div>
+                        <div class="role-label">{role_display}</div>
+                        <div class="bubble user">{rendered_content}</div>
+                    </div>
+                </div>
+            ''')
+        else:
+            # For assistant messages, include the model name in the first message
+            if first_assistant_message and side_label == "Assistant":
+                content = f"{side_label}: {content}"
+                try:
+                    rendered_content = markdown.markdown(content, extensions=['fenced_code', 'codehilite', 'tables'])
+                except:
+                    rendered_content = html.escape(content)
+                first_assistant_message = False
+            
+            body.append(f'''
+                <div class="message assistant">
+                    <div>
+                        <div class="role-label assistant">Assistant</div>
+                        <div class="bubble assistant">{rendered_content}</div>
+                    </div>
+                </div>
+            ''')
+    
+    body.append("</div>")
+    return css + "\n".join(body)
+
+def filter_df(model_a_sel: str, model_b_sel: str, lang_sel: str) -> pd.DataFrame:
+    sub = df
+    if model_a_sel != "(Any)":
+        sub = sub[sub["model_a"] == model_a_sel]
+    if model_b_sel != "(Any)":
+        sub = sub[sub["model_b"] == model_b_sel]
+    if "language" in sub.columns and lang_sel != "(Any)":
+        sub = sub[sub["language"].astype(str) == lang_sel]
+    return sub.reset_index(drop=True)
+
+def format_row(row: pd.Series) -> Tuple[str, str, str, str, str]:
+    # Prompt headline = first user message if present
+    msgs_a = _ensure_messages(row["conversation_a"])
+    msgs_b = _ensure_messages(row["conversation_b"])
+    first_user = ""
+    for m in msgs_a:
+        if (m.get("role") or "").lower() == "user":
+            first_user = str(m.get("content", "")).strip()
+            break
+
+    left = _bubble_html(msgs_a, f"Model A: {row['model_a']}")
+    right = _bubble_html(msgs_b, f"Model B: {row['model_b']}")
+    
+    # Create a subtle preference footer with soft yellow background
+    preference_text = _winner_text(row)
+    footer_html = f"""
+    <div style="
+        background: #fff8e1; 
+        color: #5d4037; 
+        padding: 10px 16px; 
+        margin: 12px 0; 
+        border-radius: 6px; 
+        font-weight: 600; 
+        font-size: 14px; 
+        text-align: center; 
+        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+        border: 1px solid #ffcc02;
+    ">
+        {preference_text}
+    </div>
+    """
+    
+    return "", left, right, footer_html, ""
+
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo")) as demo:
+    gr.Markdown("# Chatbot Arena Battle Viewer (100k)")
+    gr.Markdown(
+        "Filter by **Model A**, **Model B**, and **Language**, then browse side-by-side conversations. "
+        "Data: `lmarena-ai/arena-human-preference-100k`."
+    )
+
+    with gr.Row():
+        dd_a = gr.Dropdown(models_a, label="Model A", value="(Any)")
+        dd_b = gr.Dropdown(models_b, label="Model B", value="(Any)")
+        dd_l = gr.Dropdown(languages, label="Language", value=languages[0])
+
+    with gr.Row():
+        btn_rand  = gr.Button("Random match")
+        btn_prev  = gr.Button("◀ Prev")
+        btn_next  = gr.Button("Next ▶")
+
+    st_indices = gr.State([])
+    st_ptr = gr.State(0)
+
+    header_md = gr.Markdown()
+    with gr.Row():
+        left_html  = gr.HTML()
+        right_html = gr.HTML()
+    footer_md = gr.HTML()
+    meta_md   = gr.Markdown()
+
+    def apply_filters(a, b, l):
+        sub = filter_df(a, b, l)
+        idxs = list(range(len(sub)))
+        ptr = 0 if idxs else -1
+        if ptr >= 0:
+            row = sub.iloc[ptr]
+            head, left, right, foot, meta = format_row(row)
+        else:
+            head = left = right = foot = meta = "_No rows match your filters._"
+        return idxs, ptr, head, left, right, foot, meta
+
+    def nav(a, b, l, indices, ptr, direction):
+        sub = filter_df(a, b, l)
+        if not len(sub):
+            return [], -1, "_No rows match your filters._", "", "", "", ""
+        idxs = list(range(len(sub)))
+        if ptr is None or ptr < 0 or ptr >= len(sub):
+            ptr = 0
+        if direction == "next":
+            ptr = (ptr + 1) % len(sub)
+        elif direction == "prev":
+            ptr = (ptr - 1) % len(sub)
+        row = sub.iloc[ptr]
+        head, left, right, foot, meta = format_row(row)
+        return idxs, ptr, head, left, right, foot, meta
+
+    def rand(a, b, l):
+        sub = filter_df(a, b, l)
+        if not len(sub):
+            return [], -1, "_No rows match your filters._", "", "", "", ""
+        r = random.randrange(len(sub))
+        row = sub.iloc[r]
+        head, left, right, foot, meta = format_row(row)
+        return list(range(len(sub))), r, head, left, right, foot, meta
+
+    # Auto-update when dropdowns change
+    dd_a.change(apply_filters, [dd_a, dd_b, dd_l],
+                [st_indices, st_ptr, header_md, left_html, right_html, footer_md, meta_md])
+    dd_b.change(apply_filters, [dd_a, dd_b, dd_l],
+                [st_indices, st_ptr, header_md, left_html, right_html, footer_md, meta_md])
+    dd_l.change(apply_filters, [dd_a, dd_b, dd_l],
+                [st_indices, st_ptr, header_md, left_html, right_html, footer_md, meta_md])
+    
+    btn_next.click(nav, [dd_a, dd_b, dd_l, st_indices, st_ptr, gr.State("next")],
+                   [st_indices, st_ptr, header_md, left_html, right_html, footer_md, meta_md])
+    btn_prev.click(nav, [dd_a, dd_b, dd_l, st_indices, st_ptr, gr.State("prev")],
+                   [st_indices, st_ptr, header_md, left_html, right_html, footer_md, meta_md])
+    btn_rand.click(rand, [dd_a, dd_b, dd_l],
+                   [st_indices, st_ptr, header_md, left_html, right_html, footer_md, meta_md])
 
-# Load the JSONL file
-def load_jsonl(file_path):
-    data = []
-    with open(file_path, 'r') as f:
-        for line in f:
-            data.append(json.loads(line))
-    return data
-
-def display_pairwise_answer(data):
-    chat_mds = pairwise_to_gradio_chat_mds(data)
-    return chat_mds
-
-newline_pattern1 = re.compile("\n\n(\d+\. )")
-newline_pattern2 = re.compile("\n\n(- )")
-
-def post_process_answer(x):
-    return x
-
-def pairwise_to_gradio_chat_mds(data):
-    end = data["turn"] * 3
-    ans_a = data["conversation_a"]
-    ans_b = data["conversation_b"]
-
-    mds = [""] * end
-    base = 0
-    for i in range(0, end, 3):
-        mds[i] = "## User Prompt\n" + data["conversation_a"][base]["content"].strip()
-        mds[i + 1] = f"## {data['model_a']}\n" + post_process_answer(ans_a[base + 1]["content"].strip())
-        mds[i + 2] = f"## {data['model_b']}\n" + post_process_answer(ans_b[base + 1]["content"].strip())
-        base += 2
-
-    if data["winner"] == "tie":
-        winner = "tie"
-    elif data["winner"] == "model_a":
-        winner = "gemini" if "gemini" in data["model_a"] else "opponent"
-    else:
-        winner = "gemini" if "gemini" in data["model_b"] else "opponent"
-
-    mds += [f"## Winner: {winner}"]
-    mds += [""] * (16 - len(mds))
-    return mds
-
-# Filtering functions
-def filter_by_language(language):
-    return [item for item in data if item['language'] == language]
-
-def filter_by_winner(winner_model, filtered_data):
-    if winner_model == "anyone":
-        return [item for item in filtered_data]
-    return [item for item in filtered_data if item['winner'] == winner_model]
-
-def filter_by_conversation_a_prefix(prefix, filtered_data):
-    return [item for item in filtered_data if item['conversation_a'][0]["content"][:128] == prefix]
-
-# Create Gradio interface
-def update_winner_and_questions(language):
-    filtered_data = filter_by_language(language)
-    winners = ["anyone"] + sorted(set(item['winner'] for item in filtered_data))
-    prefixes = [item['conversation_a'][0]["content"][:128] for item in filtered_data]
-    return gr.update(choices=winners, value=winners[0]), gr.update(choices=prefixes, value=prefixes[0])
-
-def update_question_options(language, winner_model):
-    filtered_data = filter_by_language(language)
-    filtered_data = filter_by_winner(winner_model, filtered_data)
-    prefixes = [item['conversation_a'][0]["content"][:128] for item in filtered_data]
-    return gr.update(choices=prefixes, value=prefixes[0])
-
-def display_filtered_data(language, winner_model, prefix):
-    filtered_data = filter_by_language(language)
-    filtered_data = filter_by_winner(winner_model, filtered_data)
-    filtered_data = filter_by_conversation_a_prefix(prefix, filtered_data)
-    if len(filtered_data) == 0:
-        return [""] * 16
-    return pairwise_to_gradio_chat_mds(filtered_data[0])
-
-def next_question(language, winner_model, prefix):
-    filtered_data = filter_by_language(language)
-    filtered_data = filter_by_winner(winner_model, filtered_data)
-    all_items = [item['conversation_a'][0]["content"][:128] for item in filtered_data]
-    if prefix:
-        i = all_items.index(prefix) + 1
-    else:
-        i = 0
-
-    if i >= len(all_items):
-        return gr.update(choices=all_items, value=all_items[-1])
-    return gr.update(choices=all_items, value=all_items[i])
+    gr.on([demo.load], apply_filters, [dd_a, dd_b, dd_l],
+          [st_indices, st_ptr, header_md, left_html, right_html, footer_md, meta_md])
 
 if __name__ == "__main__":
-    parser = argparse.ArgumentParser()
-    parser.add_argument("--host", type=str, default="0.0.0.0")
-    parser.add_argument("--port", type=int)
-    parser.add_argument("--share", action="store_true")
-    args = parser.parse_args()
-
-    data = load_jsonl('gemini_battles.jsonl')
-
-    default_lang = "English"
-    filter_data = filter_by_language(language=default_lang)
-    question_prefixes = [item['conversation_a'][0]["content"][:128] for item in filter_data]
-    default_question = question_prefixes[2]
-
-    with gr.Blocks() as demo:
-        gr.Markdown(value="# Welcome to gemini-1.5-pro-api-0514 battles")
-        with gr.Row():
-            with gr.Column():
-                languages = ["English"] + list(sorted(set([item['language'] for item in data if item['language'] != "English"])))
-                language_dropdown = gr.Dropdown(label="Select Language", choices=languages, value=default_lang)
-            with gr.Column():
-                winners = ["anyone"] + sorted(set(item['winner'] for item in filter_data))
-                winner_dropdown = gr.Dropdown(label="Winner Model", choices=winners, value="anyone")
-
-        with gr.Row():
-            with gr.Column(scale=5):
-                question_dropdown = gr.Dropdown(label="Select Question", choices=question_prefixes, value=default_question)
-            with gr.Column():
-                next_button = gr.Button("Next Question")
-
-        default_chat_mds = display_filtered_data(default_lang, "anyone", default_question)
-        chat_mds = []
-        for i in range(5):
-            chat_mds.append(gr.Markdown(elem_id=f"user_question_{i+1}", value=default_chat_mds[len(chat_mds)]))
-            with gr.Row():
-                for j in range(2):
-                    with gr.Column(scale=100):
-                        chat_mds.append(gr.Markdown(value=default_chat_mds[len(chat_mds)]))
-                    if j == 0:
-                        with gr.Column(scale=1, min_width=8):
-                            gr.Markdown()
-        chat_mds.append(gr.Markdown())
-
-        language_dropdown.change(fn=update_winner_and_questions, inputs=language_dropdown, outputs=[winner_dropdown, question_dropdown])
-        winner_dropdown.change(fn=update_question_options, inputs=[language_dropdown, winner_dropdown], outputs=question_dropdown)
-        next_button.click(fn=next_question, inputs=[language_dropdown, winner_dropdown, question_dropdown], outputs=question_dropdown)
-        question_dropdown.change(fn=display_filtered_data, inputs=[language_dropdown, winner_dropdown, question_dropdown], outputs=chat_mds)
-
-    demo.launch(share=args.share)
+    demo.launch()