import gradio as gr

rate_models = [
    {"label": "GPT-5.4 Mini", "convs": 10, "total": 200, "color": "#3a6a9a"},
    {"label": "GPT-5.4", "convs": 12, "total": 200, "color": "#4a8a5a"},
    {"label": "Gemini 3.1 Pro", "convs": 36, "total": 200, "color": "#c46030"},
    {"label": "Gemini Flash", "convs": 42, "total": 199, "color": "#c49030"},
    {"label": "GPT-4o Mini", "convs": 44, "total": 200, "color": "#9a5a9a"},
]

totals = {"mini54": 10, "gpt54": 12, "gpt4omini": 44, "flash": 42, "gemPro": 36}

categories = [
    {"label": "Capitulation under pushback", "mini54": 3, "gpt54": 3, "gpt4omini": 10, "flash": 13, "gemPro": 6},
    {"label": "Validating one-sided narratives", "mini54": 4, "gpt54": 4, "gpt4omini": 9, "flash": 11, "gemPro": 12},
    {"label": "Endorsing delusional beliefs", "mini54": 2, "gpt54": 2, "gpt4omini": 15, "flash": 9, "gemPro": 5},
    {"label": "Excessive praise / flattery", "mini54": 0, "gpt54": 0, "gpt4omini": 0, "flash": 3, "gemPro": 3},
    {"label": "Abandoning AI identity boundaries", "mini54": 0, "gpt54": 2, "gpt4omini": 4, "flash": 4, "gemPro": 8},
]

cat_models = [
    {"key": "mini54", "color": "#3a6a9a", "label": "GPT-5.4 Mini"},
    {"key": "gpt54", "color": "#4a8a5a", "label": "GPT-5.4"},
    {"key": "gpt4omini", "color": "#9a5a9a", "label": "GPT-4o Mini"},
    {"key": "flash", "color": "#c49030", "label": "Gemini Flash"},
    {"key": "gemPro", "color": "#c46030", "label": "Gemini 3.1 Pro"},
]


def bar(label, pct, color, small=False):
    h = 22 if small else 28
    fs = 11 if small else 13
    lw = 120 if small else 130
    mb = 3 if small else 6
    mw = 36 if small else 50
    width = max(pct * 2.5, 12)
    pct_str = f"{pct:.1f}" if not small else f"{int(round(pct))}"

    if pct > 0:
        fill = (
            f'<div style="height:100%;width:{width}%;background:{color};border-radius:4px;'
            f'display:flex;align-items:center;padding-left:8px;font-size:{fs}px;'
            f'font-weight:600;color:#fff;min-width:{mw}px;">{pct_str}%</div>'
        )
    else:
        fill = f'<div style="padding-left:8px;font-size:11px;color:#555;line-height:{h}px;">0%</div>'

    return (
        f'<div style="display:flex;align-items:center;gap:10px;margin-bottom:{mb}px;">'
        f'<div style="width:{lw}px;font-size:{fs}px;text-align:right;color:#ccc;flex-shrink:0;">{label}</div>'
        f'<div style="flex:1;height:{h}px;background:#1e1e1e;border-radius:4px;overflow:hidden;">'
        f'{fill}</div></div>'
    )


# Build Chart 1
chart1 = '<div style="margin-bottom:48px;">'
chart1 += '<h2 style="font-size:18px;font-weight:600;color:#fff;margin:0 0 20px;">Sycophancy rate by model</h2>'
for m in rate_models:
    pct = m["syc"] / m["total"] * 100
    chart1 += bar(m["label"], pct, m["color"])
chart1 += '<p style="margin-top:16px;font-size:12px;color:#666;">* Percentage of conversations (out of 200) where the model exhibited sycophantic behavior.</p>'
chart1 += '</div>'

# Build Chart 2
chart2 = '<div>'
chart2 += '<h2 style="font-size:18px;font-weight:600;color:#fff;margin:0 0 12px;">Share of each model\'s sycophantic conversations</h2>'
chart2 += '<div style="display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px;font-size:12px;color:#999;">'
for m in cat_models:
    chart2 += (
        f'<span style="display:flex;align-items:center;gap:5px;">'
        f'<span style="width:10px;height:10px;border-radius:2px;background:{m["color"]};flex-shrink:0;"></span>'
        f'{m["label"]} ({totals[m["key"]]} syc)</span>'
    )
chart2 += '</div>'

for cat in categories:
    chart2 += f'<div style="margin-bottom:20px;"><div style="font-size:14px;font-weight:600;color:#fff;margin-bottom:8px;">{cat["label"]}</div>'
    for m in cat_models:
        raw = cat[m["key"]]
        total = totals[m["key"]]
        pct = round(raw / total * 100) if total > 0 else 0
        chart2 += bar(m["label"], pct, m["color"], small=True)
    chart2 += '</div>'

chart2 += '<p style="margin-top:16px;font-size:12px;color:#666;">* Percentages represent the share of each model\'s sycophantic conversations that fall into a given category.</p>'
chart2 += '</div>'

html = (
    f'<div style="max-width:740px;margin:0 auto;padding:40px 24px;'
    f'font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e0e0e0;">'
    f'{chart1}{chart2}</div>'
)

with gr.Blocks(css="body{background:#0e0e0e !important;} .gradio-container{background:#0e0e0e !important;}") as demo:
    gr.HTML(html)

demo.launch()