Create app.py

app.py

@@ -0,0 +1,266 @@
+import json
+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])
+
+    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__":
+    demo.launch()