Update app.py

app.py

@@ -1,5 +1,5 @@
 """
-ChessSLM — Play, Watch AI vs AI, or Battle Custom Models
+ChessSLM — AI vs AI  &  Model Arena
 HF Space  |  Gradio 4
 """
 
@@ -14,15 +14,15 @@ from transformers import (
 # CONFIG
 # ══════════════════════════════════════════════════════════════════════════════
 MODEL_ID = "FlameF0X/ChessSLM"
-BOARD_SZ = 400
+BOARD_SZ = 460
 
 # ══════════════════════════════════════════════════════════════════════════════
-# MODEL LOADING  (lazy — happens on first move, not at build time)
+# MODEL LOADING  (lazy — on first move, not at build time)
 # ══════════════════════════════════════════════════════════════════════════════
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 _tok  = None
 _mdl  = None
-_extra: dict = {}
+_extra: dict = {}   # cache for custom models
 
 def _ensure_main_model():
     global _tok, _mdl
@@ -35,16 +35,24 @@ def _ensure_main_model():
     _mdl.config.use_cache = True
     print(f"✓ {MODEL_ID} ready on {device}")
 
+def load_custom(model_id: str):
+    if model_id in _extra:
+        return _extra[model_id]
+    tok = AutoTokenizer.from_pretrained(model_id)
+    if tok.pad_token is None:
+        tok.pad_token = tok.eos_token
+    mdl = AutoModelForCausalLM.from_pretrained(
+        model_id,
+        torch_dtype=torch.float16 if torch.cuda.is_available() else torch.float32,
+    ).to(device).eval()
+    mdl.config.use_cache = True
+    _extra[model_id] = (mdl, tok)
+    return mdl, tok
+
 # ══════════════════════════════════════════════════════════════════════════════
 # CHESS HELPERS
 # ══════════════════════════════════════════════════════════════════════════════
 
-def board_from_state(s: dict) -> chess.Board:
-    b = chess.Board()
-    for uci in s.get("move_stack", []):
-        b.push(chess.Move.from_uci(uci))
-    return b
-
 def board_to_prompt(board: chess.Board) -> str:
     game = chess.pgn.Game()
     node = game
@@ -73,7 +81,7 @@ def parse_model_move(text: str, board: chess.Board) -> Optional[chess.Move]:
 
 @torch.no_grad()
 def ai_move(board: chess.Board, mdl=None, tok=None):
-    """Returns (move, was_legal)."""
+    """Ask a model for its next move. Returns (move, was_legal)."""
     if mdl is None:
         _ensure_main_model()
         mdl, tok = _mdl, _tok
@@ -88,119 +96,66 @@ def ai_move(board: chess.Board, mdl=None, tok=None):
     if mv: return mv, True
     return random.choice(list(board.legal_moves)), False
 
-def load_custom(model_id: str):
-    if model_id in _extra: return _extra[model_id]
-    tok = AutoTokenizer.from_pretrained(model_id)
-    if tok.pad_token is None: tok.pad_token = tok.eos_token
-    mdl = AutoModelForCausalLM.from_pretrained(
-        model_id,
-        torch_dtype=torch.float16 if torch.cuda.is_available() else torch.float32,
-    ).to(device).eval()
-    mdl.config.use_cache = True
-    _extra[model_id] = (mdl, tok)
-    return mdl, tok
-
-def legal_moves_san(board: chess.Board) -> list[str]:
-    return sorted(board.san(m) for m in board.legal_moves)
-
-def game_over_status(board: chess.Board, player_color: Optional[str],
-                     label_a="ChessSLM", label_b="Opponent") -> tuple[str, bool]:
+def game_over_status(board: chess.Board, label_w: str, label_b: str) -> tuple[str, bool]:
     if board.is_checkmate():
-        winner_white = board.turn == chess.BLACK
-        winner_name  = label_a if winner_white else label_b
-        if player_color:
-            if winner_white == (player_color == "white"):
-                return "♟ Checkmate — You win! 🎉", True
-            return f"♟ Checkmate — {label_a} wins!", True
-        return f"♟ Checkmate — {winner_name} wins!", True
+        winner = label_w if board.turn == chess.BLACK else label_b
+        return f"♟ Checkmate — {winner} wins!", True
     if board.is_stalemate():              return "½ Stalemate — Draw", True
     if board.is_insufficient_material(): return "½ Draw (material)", True
     if board.is_seventyfive_moves():     return "½ Draw (75 moves)", True
     if board.is_fivefold_repetition():   return "½ Draw (repetition)", True
-    if board.is_check():                 return "⚠ Check!", False
-    if player_color is None:
-        who = label_a if board.turn == chess.WHITE else label_b
-        return f"{who} to move…", False
-    yours = (board.turn == chess.WHITE) == (player_color == "white")
-    return ("Your turn", f"{label_a} thinking…")[not yours], False
+    if board.is_check():
+        in_check = label_w if board.turn == chess.WHITE else label_b
+        return f"⚠ Check on {in_check}!", False
+    to_move = label_w if board.turn == chess.WHITE else label_b
+    return f"{to_move} to move…", False
 
 # ══════════════════════════════════════════════════════════════════════════════
-# HALLUCINATION STATS
+# HALLUCINATION CARD
 # ══════════════════════════════════════════════════════════════════════════════
 
-def halluc_html(legal: int, halluc: int, label="ChessSLM") -> str:
-    """Render a K/D-style hallucination ratio card."""
+def _ratio_color(legal: int, halluc: int) -> str:
+    if halluc == 0:                      return "#50e090"
+    if legal / max(halluc, 1) >= 3:      return "#50e090"
+    if legal / max(halluc, 1) >= 1:      return "#e0b840"
+    return "#e05050"
+
+def halluc_side_html(legal: int, halluc: int, label: str) -> str:
     total = legal + halluc
     ratio = f"{legal/halluc:.2f}" if halluc > 0 else "∞"
     pct   = (halluc / total * 100) if total > 0 else 0
-    # colour the ratio: green if >3, amber if 1-3, red if <1
-    if halluc == 0:       col = "#50e090"
-    elif legal / max(halluc,1) >= 3: col = "#50e090"
-    elif legal / max(halluc,1) >= 1: col = "#e0b840"
-    else:                            col = "#e05050"
-
-    bar_w  = max(2, int(pct))   # fill = halluc share
+    col   = _ratio_color(legal, halluc)
+    bar_w = max(2, int(pct)) if total > 0 else 0
     return f"""
-<div style="
-    background:#0d0a05;border:1px solid #2e1f08;border-radius:8px;
-    padding:.7rem 1rem;font-family:'Cinzel',serif;
-">
-  <div style="font-size:.7em;letter-spacing:.08em;color:#6a5a38;margin-bottom:.4rem;">
-    HALLUCINATION RATIO · {label}
-  </div>
-  <div style="display:flex;align-items:baseline;gap:.6rem;margin-bottom:.5rem;">
-    <span style="font-size:1.9em;font-weight:700;color:{col};line-height:1">{ratio}</span>
-    <span style="font-size:.8em;color:#7a6a48;">legal / hallucinated</span>
-  </div>
-  <div style="display:flex;gap:1.2rem;font-size:.82em;margin-bottom:.55rem;">
-    <span>✓ <b style="color:#e8d5a3">{legal}</b> <span style="color:#555">legal</span></span>
-    <span>✗ <b style="color:#e8d5a3">{halluc}</b> <span style="color:#555">hallucinated</span></span>
-    <span style="color:#555">{pct:.1f}% halluc rate</span>
+<div style="flex:1;min-width:0;padding:0 .5rem;">
+  <div style="font-size:.68em;color:#6a5a38;letter-spacing:.06em;margin-bottom:.3rem;
+      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{label}</div>
+  <div style="font-size:2em;font-weight:700;color:{col};line-height:1;
+      font-family:'Cinzel',serif;">{ratio}</div>
+  <div style="font-size:.75em;color:#7a6a48;margin:.2rem 0 .45rem;">
+    <span style="color:#e8d5a3">{legal}</span>✓&nbsp;
+    <span style="color:#e8d5a3">{halluc}</span>✗&nbsp;
+    <span style="color:#555">{pct:.0f}% halluc</span>
   </div>
   <div style="background:#1a1408;border-radius:3px;height:5px;overflow:hidden;">
     <div style="height:100%;width:{bar_w}%;background:{col};border-radius:3px;
-        transition:width .4s ease;"></div>
+        transition:width .5s ease;"></div>
   </div>
 </div>"""
 
-def halluc_html_battle(
-    legal_a: int, halluc_a: int, label_a: str,
+def halluc_html(
+    legal_w: int, halluc_w: int, label_w: str,
     legal_b: int, halluc_b: int, label_b: str,
 ) -> str:
-    """Two-column hallucination card for battle / aivsai modes."""
-    def side(legal, halluc, label):
-        total = legal + halluc
-        ratio = f"{legal/halluc:.2f}" if halluc > 0 else "∞"
-        pct   = (halluc / total * 100) if total > 0 else 0
-        if halluc == 0:                  col = "#50e090"
-        elif legal / max(halluc,1) >= 3: col = "#50e090"
-        elif legal / max(halluc,1) >= 1: col = "#e0b840"
-        else:                            col = "#e05050"
-        bar_w = max(2, int(pct)) if total > 0 else 0
-        return f"""
-<div style="flex:1;min-width:0">
-  <div style="font-size:.68em;color:#6a5a38;letter-spacing:.06em;
-      margin-bottom:.25rem;white-space:nowrap;overflow:hidden;
-      text-overflow:ellipsis">{label}</div>
-  <div style="font-size:1.6em;font-weight:700;color:{col};line-height:1.1">{ratio}</div>
-  <div style="font-size:.76em;color:#7a6a48;margin:.15rem 0 .4rem">
-    {legal}✓ · {halluc}✗ · {pct:.0f}%
-  </div>
-  <div style="background:#1a1408;border-radius:3px;height:4px;">
-    <div style="height:100%;width:{bar_w}%;background:{col};border-radius:3px;
-        transition:width .4s ease;"></div>
-  </div>
-</div>"""
     return f"""
 <div style="background:#0d0a05;border:1px solid #2e1f08;border-radius:8px;
-    padding:.7rem 1rem;font-family:'Cinzel',serif;">
-  <div style="font-size:.7em;letter-spacing:.08em;color:#6a5a38;margin-bottom:.5rem;">
-    HALLUCINATION RATIO
-  </div>
-  <div style="display:flex;gap:1.2rem;">
-    {side(legal_a, halluc_a, label_a)}
-    <div style="width:1px;background:#2e1f08;"></div>
-    {side(legal_b, halluc_b, label_b)}
+    padding:.75rem 1rem;margin-top:.5rem;">
+  <div style="font-size:.68em;font-family:'Cinzel',serif;letter-spacing:.09em;
+      color:#5a4a28;margin-bottom:.6rem;">HALLUCINATION RATIO</div>
+  <div style="display:flex;gap:.5rem;">
+    {halluc_side_html(legal_w, halluc_w, label_w)}
+    <div style="width:1px;background:#2e1f08;align-self:stretch;"></div>
+    {halluc_side_html(legal_b, halluc_b, label_b)}
   </div>
 </div>"""
 
@@ -215,12 +170,11 @@ _SVG_COLORS = {
     "square dark lastmove":  "#aaa23a",
 }
 
-def render_board(board: chess.Board, last_move=None, flipped=False) -> str:
+def render_board(board: chess.Board, last_move=None) -> str:
     check_sq = board.king(board.turn) if board.is_check() else None
     svg = chess.svg.board(
         board, lastmove=last_move, check=check_sq,
-        flipped=flipped, size=BOARD_SZ,
-        coordinates=True, colors=_SVG_COLORS,
+        size=BOARD_SZ, coordinates=True, colors=_SVG_COLORS,
     )
     return f"""
 <div style="display:flex;justify-content:center;align-items:center;
@@ -249,227 +203,143 @@ def fmt_history(board: chess.Board) -> str:
             lines.append(
                 f"<span style='color:#555;font-size:.78em'>{n}.</span> "
                 f"<span style='color:#e8d5a3'>{w}</span>")
-    inner = "<br>".join(lines[-14:])
-    return f"<div style='font-family:\"Courier New\",mono;line-height:2;font-size:.88em'>{inner}</div>"
+    inner = "<br>".join(lines[-16:])
+    return (f"<div style='font-family:\"Courier New\",monospace;"
+            f"line-height:2;font-size:.88em'>{inner}</div>")
 
 def status_html(msg: str) -> str:
     return f"<div id='status-bar'>{msg}</div>"
 
 def log_html(lines: list[str]) -> str:
     if not lines: return "<em style='color:#555'>—</em>"
-    items = "".join(f"<div>{l}</div>" for l in lines[-6:])
-    return f"<div style='font-family:\"Crimson Text\",serif;line-height:1.8;font-size:.95em;color:#c8a96e'>{items}</div>"
-
-# ══════════════════════════════════════════════════════════════════════════════
-# MODE 1 — HUMAN vs ChessSLM
-# ══════════════════════════════════════════════════════════════════════════════
-
-def hvai_new_game(color_choice: str):
-    board        = chess.Board()
-    player_color = "white" if "White" in color_choice else "black"
-    flipped      = (player_color == "black")
-    last_move    = None
-    log_lines    = []
-    state = {
-        "mode": "hvai", "move_stack": [], "player_color": player_color,
-        "flipped": flipped, "last_move_uci": None, "game_over": False,
-        "legal_moves": 0, "halluc_moves": 0,
-    }
-
-    if player_color == "black":
-        mv, legal_flag = ai_move(board)
-        san = board.san(mv); board.push(mv); last_move = mv
-        state["move_stack"]    = [m.uci() for m in board.move_stack]
-        state["last_move_uci"] = mv.uci()
-        if legal_flag: state["legal_moves"] += 1
-        else:          state["halluc_moves"] += 1
-        flag = "" if legal_flag else " <em>(random)</em>"
-        log_lines.append(f"♟ ChessSLM opens: <b>{san}</b>{flag}")
-
-    stxt, over = game_over_status(board, player_color)
-    state["game_over"] = over
-    moves = [] if over else legal_moves_san(board)
-
-    return (
-        render_board(board, last_move, flipped),
-        gr.Dropdown(choices=moves, value=None, interactive=not over),
-        status_html(stxt),
-        fmt_history(board),
-        log_html(log_lines),
-        halluc_html(state["legal_moves"], state["halluc_moves"]),
-        state,
-    )
-
-def hvai_make_move(move_san: str, state: dict):
-    if not state or state.get("game_over") or not move_san:
-        return (gr.update(),) * 6 + (state,)
-
-    board        = board_from_state(state)
-    player_color = state["player_color"]
-    flipped      = state["flipped"]
-    log_lines    = []
-
-    try:    player_move = board.parse_san(move_san)
-    except: return (gr.update(),) * 6 + (state,)
-
-    san = board.san(player_move)
-    board.push(player_move)
-    log_lines.append(f"You played <b>{san}</b>")
-
-    stxt, over = game_over_status(board, player_color)
-
-    if not over:
-        mv, legal_flag = ai_move(board)
-        ai_san = board.san(mv); board.push(mv)
-        if legal_flag: state["legal_moves"] += 1
-        else:          state["halluc_moves"] += 1
-        flag = "" if legal_flag else " <em style='color:#e05050'>(hallucinated)</em>"
-        log_lines.append(f"♟ ChessSLM: <b>{ai_san}</b>{flag}")
-        stxt, over = game_over_status(board, player_color)
-
-    state["move_stack"]    = [m.uci() for m in board.move_stack]
-    state["last_move_uci"] = board.move_stack[-1].uci() if board.move_stack else None
-    state["game_over"]     = over
-    last_move = chess.Move.from_uci(state["last_move_uci"]) if state["last_move_uci"] else None
-    moves = [] if over else legal_moves_san(board)
-
-    return (
-        render_board(board, last_move, flipped),
-        gr.Dropdown(choices=moves, value=None, interactive=not over),
-        status_html(stxt),
-        fmt_history(board),
-        log_html(log_lines),
-        halluc_html(state["legal_moves"], state["halluc_moves"]),
-        state,
-    )
+    items = "".join(f"<div>{l}</div>" for l in lines[-8:])
+    return (f"<div style='font-family:\"Crimson Text\",serif;"
+            f"line-height:1.9;font-size:.95em;color:#c8a96e'>{items}</div>")
 
 # ══════════════════════════════════════════════════════════════════════════════
-# MODE 2 — AI vs AI
+# MODE 1 — AI vs AI  (ChessSLM self-play)
 # ══════════════════════════════════════════════════════════════════════════════
 
-def aivsai_start(delay_val: float):
-    board     = chess.Board()
+def aivsai_run(delay_val: float):
+    board = chess.Board()
+    lw, hw, lb, hb = 0, 0, 0, 0
+    label_w, label_b = "ChessSLM (W)", "ChessSLM (B)"
     log_lines = []
-    legal_w, halluc_w = 0, 0
-    legal_b, halluc_b = 0, 0
-    state = {"mode": "aivsai", "move_stack": [], "game_over": False}
-
-    yield (
-        render_board(board),
-        status_html("AI vs AI — starting…"),
-        fmt_history(board),
-        log_html([]),
-        halluc_html_battle(0, 0, "White (ChessSLM)", 0, 0, "Black (ChessSLM)"),
-        state,
-    )
+
+    yield (render_board(board),
+           status_html("Starting…"),
+           fmt_history(board),
+           log_html([]),
+           halluc_html(lw, hw, label_w, lb, hb, label_b))
 
     while not board.is_game_over() and len(board.move_stack) < 200:
-        mv, legal_flag = ai_move(board)
         is_white = board.turn == chess.WHITE
-        san = board.san(mv); board.push(mv)
+        mv, legal = ai_move(board)
+        san = board.san(mv)
+        board.push(mv)
 
         if is_white:
-            if legal_flag: legal_w += 1
-            else:          halluc_w += 1
-            side = "White ♟"
+            if legal: lw += 1
+            else:     hw += 1
+            tag = label_w
         else:
-            if legal_flag: legal_b += 1
-            else:          halluc_b += 1
-            side = "Black ♟"
-
-        flag = "" if legal_flag else " <em style='color:#e05050'>(hallucinated)</em>"
-        log_lines.append(f"<b>{side}</b>: {san}{flag}")
-        stxt, over = game_over_status(board, None, "White", "Black")
-        state = {"mode": "aivsai",
-                 "move_stack": [m.uci() for m in board.move_stack],
-                 "game_over": over}
-
-        yield (
-            render_board(board, mv),
-            status_html(stxt),
-            fmt_history(board),
-            log_html(log_lines),
-            halluc_html_battle(legal_w, halluc_w, "White (ChessSLM)",
-                               legal_b, halluc_b, "Black (ChessSLM)"),
-            state,
-        )
-        time.sleep(max(0.1, float(delay_val)))
+            if legal: lb += 1
+            else:     hb += 1
+            tag = label_b
+
+        flag = "" if legal else " <em style='color:#e05050'>(hallucinated)</em>"
+        log_lines.append(f"<b>{tag}</b>: {san}{flag}")
+        stxt, over = game_over_status(board, label_w, label_b)
+
+        yield (render_board(board, mv),
+               status_html(stxt),
+               fmt_history(board),
+               log_html(log_lines),
+               halluc_html(lw, hw, label_w, lb, hb, label_b))
+
+        if over: return
+        time.sleep(max(0.05, float(delay_val)))
+
+    if not board.is_game_over():
+        yield (render_board(board),
+               status_html("½ Draw — move limit reached"),
+               fmt_history(board),
+               log_html(log_lines),
+               halluc_html(lw, hw, label_w, lb, hb, label_b))
 
 # ══════════════════════════════════════════════════════════════════════════════
-# MODE 3 — MODEL BATTLE
+# MODE 2 — MODEL ARENA  (ChessSLM vs any HF causal LM)
 # ═════════════════════════════════════════════════════════════════��════════════
 
-def battle_load(model_id_input: str):
-    mid = model_id_input.strip()
+def arena_load(model_id: str):
+    mid = model_id.strip()
     if not mid:
-        return status_html("⚠ Enter a model ID first"), gr.update()
+        return status_html("⚠ Enter a model repo ID first"), gr.update()
     try:
         load_custom(mid)
-        return status_html(f"✓ <b>{mid}</b> loaded — press ▶ Play"), \
-               gr.update(interactive=True)
+        return (status_html(f"✓ <b>{mid}</b> loaded — press ▶ Play"),
+                gr.update(interactive=True))
     except Exception as e:
         return status_html(f"✗ Could not load <em>{mid}</em>: {e}"), gr.update()
 
-def battle_start(model_id_input: str, delay_val: float):
-    mid = model_id_input.strip()
+def arena_run(model_id: str, delay_val: float):
+    mid = model_id.strip()
     if not mid:
         yield (gr.update(), status_html("⚠ Load a model first"),
-               gr.update(), gr.update(), gr.update(), {})
+               gr.update(), gr.update(), gr.update())
         return
     try:
         mdl2, tok2 = load_custom(mid)
     except Exception as e:
         yield (gr.update(), status_html(f"✗ {e}"),
-               gr.update(), gr.update(), gr.update(), {})
+               gr.update(), gr.update(), gr.update())
         return
 
     label_w = "ChessSLM (W)"
     label_b = f"{mid.split('/')[-1]} (B)"
-    board     = chess.Board()
+    board   = chess.Board()
+    lw, hw, lb, hb = 0, 0, 0, 0
     log_lines = []
-    legal_a, halluc_a = 0, 0
-    legal_b_cnt, halluc_b_cnt = 0, 0
-    state = {"mode": "battle", "move_stack": [], "game_over": False}
-
-    yield (
-        render_board(board),
-        status_html(f"{label_w} vs {label_b}"),
-        fmt_history(board),
-        log_html([]),
-        halluc_html_battle(0, 0, label_w, 0, 0, label_b),
-        state,
-    )
+
+    yield (render_board(board),
+           status_html(f"{label_w}  vs  {label_b}"),
+           fmt_history(board),
+           log_html([]),
+           halluc_html(lw, hw, label_w, lb, hb, label_b))
 
     while not board.is_game_over() and len(board.move_stack) < 200:
         if board.turn == chess.WHITE:
-            mv, legal_flag = ai_move(board)
-            label = label_w
-            if legal_flag: legal_a += 1
-            else:          halluc_a += 1
+            mv, legal = ai_move(board)
+            tag = label_w
+            if legal: lw += 1
+            else:     hw += 1
         else:
-            mv, legal_flag = ai_move(board, mdl2, tok2)
-            label = label_b
-            if legal_flag: legal_b_cnt += 1
-            else:          halluc_b_cnt += 1
-
-        san = board.san(mv); board.push(mv)
-        flag = "" if legal_flag else " <em style='color:#e05050'>(hallucinated)</em>"
-        log_lines.append(f"<b>{label}</b>: {san}{flag}")
-        stxt, over = game_over_status(board, None, label_w, label_b)
-        state = {"mode": "battle",
-                 "move_stack": [m.uci() for m in board.move_stack],
-                 "game_over": over}
-
-        yield (
-            render_board(board, mv),
-            status_html(stxt),
-            fmt_history(board),
-            log_html(log_lines),
-            halluc_html_battle(legal_a, halluc_a, label_w,
-                               legal_b_cnt, halluc_b_cnt, label_b),
-            state,
-        )
-        time.sleep(max(0.1, float(delay_val)))
+            mv, legal = ai_move(board, mdl2, tok2)
+            tag = label_b
+            if legal: lb += 1
+            else:     hb += 1
+
+        san = board.san(mv)
+        board.push(mv)
+        flag = "" if legal else " <em style='color:#e05050'>(hallucinated)</em>"
+        log_lines.append(f"<b>{tag}</b>: {san}{flag}")
+        stxt, over = game_over_status(board, label_w, label_b)
+
+        yield (render_board(board, mv),
+               status_html(stxt),
+               fmt_history(board),
+               log_html(log_lines),
+               halluc_html(lw, hw, label_w, lb, hb, label_b))
+
+        if over: return
+        time.sleep(max(0.05, float(delay_val)))
+
+    if not board.is_game_over():
+        yield (render_board(board),
+               status_html("½ Draw — move limit reached"),
+               fmt_history(board),
+               log_html(log_lines),
+               halluc_html(lw, hw, label_w, lb, hb, label_b))
 
 # ══════════════════════════════════════════════════════════════════════════════
 # CSS
@@ -479,12 +349,13 @@ CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
 
 *, *::before, *::after { box-sizing: border-box; }
+
 body, .gradio-container {
     background: #0a0805 !important;
     color: #e8d5a3 !important;
     font-family: 'Crimson Text', Georgia, serif !important;
 }
-.gradio-container { max-width: 1160px !important; margin: 0 auto !important; }
+.gradio-container { max-width: 1180px !important; margin: 0 auto !important; }
 
 #site-header {
     text-align: center;
@@ -498,32 +369,32 @@ body, .gradio-container {
     font-family: 'Cinzel', serif;
     font-size: 1em;
     letter-spacing: 0.05em;
-    padding: 0.55rem 1rem;
+    padding: 0.6rem 1rem;
     border-radius: 5px;
     background: #110e07;
     border: 1px solid #3d2b0e;
     color: #f0c060;
-    min-height: 2.4rem;
+    min-height: 2.6rem;
 }
 
 .tabs { border: none !important; }
 .tabitem { background: transparent !important; }
 .tab-nav button {
     font-family: 'Cinzel', serif !important;
-    font-size: 0.78em !important;
+    font-size: 0.8em !important;
     letter-spacing: 0.07em !important;
     color: #8a7a5a !important;
     border-bottom: 2px solid transparent !important;
     background: transparent !important;
-    padding: 0.5rem 1rem !important;
-    transition: all 0.2s !important;
+    padding: 0.55rem 1.1rem !important;
+    transition: color .2s, border-color .2s !important;
 }
 .tab-nav button.selected {
     color: #e8c060 !important;
     border-bottom-color: #c49020 !important;
 }
 
-button.primary, .gr-button-primary {
+button.primary {
     background: linear-gradient(135deg, #7a5a10, #c4922a, #7a5a10) !important;
     border: 1px solid #c49020 !important;
     color: #fff8e8 !important;
@@ -531,11 +402,11 @@ button.primary, .gr-button-primary {
     letter-spacing: 0.07em !important;
     font-size: 0.85em !important;
     border-radius: 4px !important;
-    transition: all 0.2s !important;
+    transition: all .2s !important;
 }
 button.primary:hover {
-    box-shadow: 0 0 18px rgba(196,144,32,.45) !important;
-    filter: brightness(1.1) !important;
+    box-shadow: 0 0 20px rgba(196,144,32,.45) !important;
+    filter: brightness(1.12) !important;
 }
 button.secondary {
     background: #1a140a !important;
@@ -560,19 +431,19 @@ input, textarea, select {
 }
 label span {
     font-family: 'Cinzel', serif !important;
-    font-size: 0.74em !important;
+    font-size: 0.73em !important;
     letter-spacing: 0.07em !important;
     text-transform: uppercase !important;
     color: #8a6a30 !important;
 }
 
-.log-panel, .hist-panel {
+.panel {
     background: #0d0a05;
     border: 1px solid #2e1f08;
     border-radius: 6px;
     padding: 0.8rem 1rem;
     min-height: 80px;
-    max-height: 220px;
+    max-height: 260px;
     overflow-y: auto;
 }
 
@@ -589,121 +460,97 @@ input[type=range] { accent-color: #c49020 !important; }
 # LAYOUT
 # ══════════════════════════════════════════════════════════════════════════════
 
-_BOARD_0   = render_board(chess.Board())
-_HALLUC_0  = halluc_html(0, 0)
-_STATUS_0  = status_html("Choose a mode and press New Game")
+_BOARD_0  = render_board(chess.Board())
+_HALLUC_0 = halluc_html(0, 0, "White", 0, 0, "Black")
 
-with gr.Blocks(css=CSS, title="ChessSLM") as demo:
-
-    game_state = gr.State({})
+with gr.Blocks(css=CSS, title="ChessSLM Arena") as demo:
 
     gr.HTML("""
     <div id="site-header">
-      <h1 style="font-family:'Cinzel',serif;font-size:2.2em;font-weight:700;
-          color:#e8c060;text-shadow:0 0 28px rgba(232,180,60,.35);
-          margin:0 0 .3rem;letter-spacing:.14em;">♛ ChessSLM</h1>
+      <h1 style="font-family:'Cinzel',serif;font-size:2.3em;font-weight:700;
+          color:#e8c060;text-shadow:0 0 30px rgba(232,180,60,.35);
+          margin:0 0 .3rem;letter-spacing:.14em;">♛ ChessSLM Arena</h1>
       <p style="font-family:'Crimson Text',serif;color:#7a6a48;
           font-size:1.05em;font-style:italic;margin:0;">
-        GPT-2 pre-trained on 100,000 chess games · three ways to play</p>
+        GPT-2 pre-trained on 100,000 chess games · watch the models battle</p>
     </div>""")
 
     with gr.Row():
 
-        # ── Left: board + status + hallucination card ─────────────────────────
-        with gr.Column(scale=3, min_width=440):
+        # ── Left column: board + status + hallucination card ──────────────────
+        with gr.Column(scale=3, min_width=480):
             board_out  = gr.HTML(value=_BOARD_0)
-            status_out = gr.HTML(value=status_html("Choose a mode and press New Game"))
+            status_out = gr.HTML(value=status_html("Choose a mode and press ▶ Play"))
             halluc_out = gr.HTML(value=_HALLUC_0)
 
-        # ── Right: tabs + controls ────────────────────────────────────────────
+        # ── Right column: tabs ────────────────────────────────────────────────
         with gr.Column(scale=2, min_width=300):
 
             with gr.Tabs():
 
-                # Tab 1 — Human vs AI ──��──────────────────────────────────────
-                with gr.Tab("👤  You vs AI"):
-                    color_radio = gr.Radio(
-                        choices=["⬜ White (move first)", "⬛ Black (move second)"],
-                        value="⬜ White (move first)", label="Play as",
-                    )
-                    hvai_btn = gr.Button("♟  New Game", variant="primary")
-                    gr.HTML("<div class='div-line'></div>")
-                    move_drop = gr.Dropdown(
-                        choices=[], value=None, interactive=False,
-                        label="Your move (SAN)",
-                    )
-                    move_btn = gr.Button("▶  Make Move", variant="secondary")
-
-                # Tab 2 — AI vs AI ────────────────────────────────────────────
+                # ── Tab 1: AI vs AI ───────────────────────────────────────────
                 with gr.Tab("🤖  AI vs AI"):
-                    delay_slider = gr.Slider(
-                        minimum=0.3, maximum=3.0, value=0.8, step=0.1,
-                        label="Delay between moves (s)",
-                    )
+                    gr.HTML("<p style='font-family:Crimson Text,serif;color:#7a6a48;"
+                            "font-style:italic;font-size:.95em;margin:.3rem 0 .8rem;'>"
+                            "ChessSLM plays itself from both sides.</p>")
+                    delay1 = gr.Slider(minimum=0.1, maximum=3.0, value=0.6, step=0.1,
+                                       label="Delay between moves (s)")
                     with gr.Row():
-                        aivsai_btn  = gr.Button("▶  Play", variant="primary")
-                        aivsai_stop = gr.Button("⏹  Stop", variant="secondary",
-                                                elem_classes=["stop"])
-
-                # Tab 3 — Model Battle ────────────────────────────────────────
-                with gr.Tab("⚔️  Model Battle"):
-                    custom_id = gr.Textbox(
+                        btn1_play = gr.Button("▶  Play", variant="primary")
+                        btn1_stop = gr.Button("⏹  Stop", variant="secondary",
+                                             elem_classes=["stop"])
+
+                # ── Tab 2: Model Arena ────────────────────────────────────────
+                with gr.Tab("⚔️  Model Arena"):
+                    gr.HTML("<p style='font-family:Crimson Text,serif;color:#7a6a48;"
+                            "font-style:italic;font-size:.95em;margin:.3rem 0 .8rem;'>"
+                            "ChessSLM (White) vs any HuggingFace causal LM (Black).</p>")
+                    arena_id = gr.Textbox(
                         placeholder="e.g. another-user/chess-gpt",
-                        label="Opponent model (HF repo ID)",
+                        label="Opponent model repo ID",
                     )
-                    load_btn = gr.Button("⬇  Load Model", variant="secondary")
+                    btn_load = gr.Button("⬇  Load Opponent", variant="secondary")
                     gr.HTML("<div class='div-line'></div>")
-                    delay_battle = gr.Slider(
-                        minimum=0.3, maximum=3.0, value=0.8, step=0.1,
-                        label="Delay between moves (s)",
-                    )
+                    delay2 = gr.Slider(minimum=0.1, maximum=3.0, value=0.6, step=0.1,
+                                       label="Delay between moves (s)")
                     with gr.Row():
-                        battle_btn  = gr.Button("▶  Play", variant="primary",
-                                                interactive=False)
-                        battle_stop = gr.Button("⏹  Stop", variant="secondary",
-                                                elem_classes=["stop"])
+                        btn2_play = gr.Button("▶  Play", variant="primary",
+                                             interactive=False)
+                        btn2_stop = gr.Button("⏹  Stop", variant="secondary",
+                                             elem_classes=["stop"])
 
             gr.HTML("<div class='div-line'></div>")
-            gr.HTML("<p style='font-family:Cinzel,serif;font-size:.74em;"
-                    "color:#8a6a30;letter-spacing:.07em;margin:0 0 .4rem'>COMMENTARY</p>")
+            gr.HTML("<p style='font-family:Cinzel,serif;font-size:.73em;"
+                    "color:#8a6a30;letter-spacing:.08em;margin:0 0 .4rem;'>COMMENTARY</p>")
             log_out = gr.HTML(
-                value="<div class='log-panel'><em style='color:#555'>—</em></div>")
+                value="<div class='panel'><em style='color:#555'>—</em></div>")
 
             gr.HTML("<div class='div-line'></div>")
-            gr.HTML("<p style='font-family:Cinzel,serif;font-size:.74em;"
-                    "color:#8a6a30;letter-spacing:.07em;margin:0 0 .4rem'>MOVE LIST</p>")
+            gr.HTML("<p style='font-family:Cinzel,serif;font-size:.73em;"
+                    "color:#8a6a30;letter-spacing:.08em;margin:0 0 .4rem;'>MOVE LIST</p>")
             hist_out = gr.HTML(
-                value="<div class='hist-panel'><em style='color:#555'>No moves yet.</em></div>")
+                value="<div class='panel'><em style='color:#555'>No moves yet.</em></div>")
 
     gr.HTML("""
     <div style="text-align:center;margin-top:1.6rem;padding-top:.9rem;
         border-top:1px solid #1e1508;font-family:'Crimson Text',serif;
         font-size:.82em;color:#4a3a20;">
-      Model: <a href="https://huggingface.co/FlameF0X/ChessSLM" target="_blank"
+      <a href="https://huggingface.co/FlameF0X/ChessSLM" target="_blank"
           style="color:#7a5a28;text-decoration:none;">FlameF0X/ChessSLM</a>
-      &nbsp;·&nbsp; GPT-2 pre-trained on 100K PGN games
-      &nbsp;·&nbsp; Moves via top-k sampling (temp=0.3)
+      &nbsp;·&nbsp; GPT-2 · 100K PGN games · top-k sampling (temp=0.3)
     </div>""")
 
-    # ── Shared outputs ────────────────────────────────────────────────────────
-    _shared = [board_out, status_out, hist_out, log_out, halluc_out, game_state]
-    _hvai   = [board_out, move_drop, status_out, hist_out, log_out, halluc_out, game_state]
-
-    # Mode 1
-    hvai_btn.click(fn=hvai_new_game,   inputs=[color_radio], outputs=_hvai)
-    move_btn.click(fn=hvai_make_move,  inputs=[move_drop, game_state], outputs=_hvai)
-    move_drop.select(fn=hvai_make_move,inputs=[move_drop, game_state], outputs=_hvai)
-
-    # Mode 2
-    ev2 = aivsai_btn.click(fn=aivsai_start, inputs=[delay_slider], outputs=_shared)
-    aivsai_stop.click(fn=None, cancels=[ev2])
-
-    # Mode 3
-    load_btn.click(fn=battle_load, inputs=[custom_id],
-                   outputs=[status_out, battle_btn])
-    ev3 = battle_btn.click(fn=battle_start,
-                           inputs=[custom_id, delay_battle], outputs=_shared)
-    battle_stop.click(fn=None, cancels=[ev3])
+    # ── Event wiring ──────────────────────────────────────────────────────────
+    _outs = [board_out, status_out, hist_out, log_out, halluc_out]
+
+    ev1 = btn1_play.click(fn=aivsai_run, inputs=[delay1], outputs=_outs)
+    btn1_stop.click(fn=None, cancels=[ev1])
+
+    btn_load.click(fn=arena_load, inputs=[arena_id],
+                   outputs=[status_out, btn2_play])
+
+    ev2 = btn2_play.click(fn=arena_run, inputs=[arena_id, delay2], outputs=_outs)
+    btn2_stop.click(fn=None, cancels=[ev2])
 
 
 if __name__ == "__main__":