Create app.py

app.py

@@ -0,0 +1,572 @@
+"""
+ChessSLM — Play against FlameF0X/ChessSLM
+Hugging Face Space  |  Gradio app
+"""
+
+import re
+import random
+import time
+import chess
+import chess.svg
+import chess.pgn
+import gradio as gr
+import torch
+from transformers import GPT2LMHeadModel, GPT2Tokenizer
+
+# ──────────────────────────────────────────────────────────────────────────────
+# Model loading (once at startup)
+# ──────────────────────────────────────────────────────────────────────────────
+
+MODEL_ID = "FlameF0X/ChessSLM"
+
+print(f"Loading {MODEL_ID}...")
+device    = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+tokenizer = GPT2Tokenizer.from_pretrained(MODEL_ID)
+tokenizer.pad_token = tokenizer.eos_token
+model     = GPT2LMHeadModel.from_pretrained(MODEL_ID)
+model.to(device)
+model.eval()
+model.config.use_cache = True
+print(f"✓ Model ready on {device}")
+
+# ──────────────────────────────────────────────────────────────────────────────
+# Chess / model logic
+# ──────────────────────────────────────────────────────────────────────────────
+
+def board_to_prompt(board: chess.Board) -> str:
+    game = chess.pgn.Game()
+    node = game
+    for move in board.move_stack:
+        node = node.add_variation(move)
+    exporter = chess.pgn.StringExporter(headers=False, variations=False, comments=False)
+    pgn = game.accept(exporter).strip()
+    pgn = re.sub(r"\s*[\*\d][-\d/]*\s*$", "", pgn).strip()
+    full_move = board.fullmove_number
+    pgn += f" {full_move}." if board.turn == chess.WHITE else f" {full_move}..."
+    return f"<|endoftext|>{pgn}"
+
+
+def extract_move(text: str, board: chess.Board):
+    text = re.sub(r"^\s*\d+\.+\s*", "", text).strip()
+    for token in text.split()[:5]:
+        clean = re.sub(r"[!?+#,;]+$", "", token)
+        try:
+            move = board.parse_san(clean)
+            if move in board.legal_moves:
+                return move
+        except Exception:
+            pass
+        try:
+            move = chess.Move.from_uci(clean.lower()[:4])
+            if move in board.legal_moves:
+                return move
+        except Exception:
+            pass
+    return None
+
+
+@torch.no_grad()
+def get_model_move(board: chess.Board):
+    prompt  = board_to_prompt(board)
+    inputs  = tokenizer(prompt, return_tensors="pt").to(device)
+    outputs = model.generate(
+        inputs.input_ids,
+        max_new_tokens=12,
+        do_sample=True,
+        temperature=0.3,
+        top_k=40,
+        top_p=0.9,
+        repetition_penalty=1.1,
+        pad_token_id=tokenizer.eos_token_id,
+        eos_token_id=tokenizer.eos_token_id,
+    )
+    new_tokens = outputs[0][inputs.input_ids.shape[1]:]
+    generated  = tokenizer.decode(new_tokens, skip_special_tokens=True)
+    move       = extract_move(generated, board)
+    if move:
+        return move, True
+    return random.choice(list(board.legal_moves)), False
+
+# ──────────────────────────────────────────────────────────────────────────────
+# Board rendering
+# ──────────────────────────────────────────────────────────────────────────────
+
+PIECE_COLORS = {
+    "square light":        "#f0d9b5",
+    "square dark":         "#b58863",
+    "square light lastmove": "#cdd16e",
+    "square dark lastmove":  "#aaa23a",
+}
+
+def render_board_html(board: chess.Board, last_move=None, flipped=False, size=480):
+    check_square = None
+    if board.is_check():
+        check_square = board.king(board.turn)
+
+    svg = chess.svg.board(
+        board,
+        lastmove=last_move,
+        check=check_square,
+        flipped=flipped,
+        size=size,
+        colors=PIECE_COLORS,
+    )
+    return f"""
+    <div style="
+        display:flex; justify-content:center; align-items:center;
+        padding: 16px;
+        background: radial-gradient(ellipse at center, #1a1208 0%, #0d0d0d 100%);
+        border-radius: 12px;
+        box-shadow: 0 0 60px rgba(0,0,0,0.8), inset 0 0 30px rgba(0,0,0,0.4);
+    ">
+        <div style="
+            border-radius: 4px;
+            overflow: hidden;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 3px #3d2b0e, 0 0 0 5px #6b4c1e;
+        ">
+            {svg}
+        </div>
+    </div>
+    """
+
+
+def get_legal_moves_san(board: chess.Board):
+    moves = []
+    for move in board.legal_moves:
+        try:
+            moves.append(board.san(move))
+        except Exception:
+            pass
+    return sorted(moves)
+
+
+def format_move_history(board: chess.Board):
+    if not board.move_stack:
+        return "<em style='color:#666'>No moves yet.</em>"
+
+    temp  = chess.Board()
+    lines = []
+    moves = list(board.move_stack)
+    i     = 0
+
+    while i < len(moves):
+        move_num = temp.fullmove_number
+        white_san = temp.san(moves[i])
+        temp.push(moves[i])
+        i += 1
+
+        if i < len(moves):
+            black_san = temp.san(moves[i])
+            temp.push(moves[i])
+            i += 1
+            lines.append(
+                f"<span style='color:#8a7a5a;font-size:0.8em'>{move_num}.</span> "
+                f"<span style='color:#e8d5a3'>{white_san}</span> "
+                f"<span style='color:#c4b48a'>{black_san}</span>"
+            )
+        else:
+            lines.append(
+                f"<span style='color:#8a7a5a;font-size:0.8em'>{move_num}.</span> "
+                f"<span style='color:#e8d5a3'>{white_san}</span>"
+            )
+
+    # Last 10 pairs
+    visible = lines[-10:]
+    html = "<div style='font-family:\"Courier New\",monospace; line-height:2; font-size:0.92em;'>"
+    html += "<br>".join(visible)
+    html += "</div>"
+    return html
+
+
+def game_status(board: chess.Board, player_color: str):
+    if board.is_checkmate():
+        loser  = "White" if board.turn == chess.WHITE else "Black"
+        winner = "Black" if board.turn == chess.WHITE else "White"
+        if (winner == "White") == (player_color == "white"):
+            return "♟ Checkmate — You win! 🎉", "win"
+        else:
+            return "♟ Checkmate — ChessSLM wins!", "loss"
+    if board.is_stalemate():
+        return "½ Stalemate — Draw", "draw"
+    if board.is_insufficient_material():
+        return "½ Insufficient material — Draw", "draw"
+    if board.is_seventyfive_moves():
+        return "½ 75-move rule — Draw", "draw"
+    if board.is_fivefold_repetition():
+        return "½ Fivefold repetition — Draw", "draw"
+    if board.is_check():
+        return "⚠ Check!", "check"
+    whose = "Your turn" if (board.turn == chess.WHITE) == (player_color == "white") else "ChessSLM is thinking..."
+    return whose, "playing"
+
+# ──────────────────────────────────────────────────────────────────────────────
+# Gradio callbacks
+# ──────────────────────────────────────────────────────────────────────────────
+
+def new_game(player_color_choice: str):
+    """Reset the board and, if player chose Black, let the model move first."""
+    board       = chess.Board()
+    player_color = "white" if player_color_choice == "⬜ White (move first)" else "black"
+    flipped      = (player_color == "black")
+    last_move    = None
+    log_lines    = []
+
+    # If player chose Black, model plays White first
+    if player_color == "black":
+        move, legal = get_model_move(board)
+        san         = board.san(move)
+        board.push(move)
+        last_move   = move
+        log_lines.append(f"ChessSLM opens with **{san}**")
+
+    legal_moves = get_legal_moves_san(board)
+    status_text, _  = game_status(board, player_color)
+    board_html      = render_board_html(board, last_move=last_move, flipped=flipped)
+    history_html    = format_move_history(board)
+    log_html        = "<br>".join(log_lines) if log_lines else "<em style='color:#666'>Game started.</em>"
+
+    # Serialise state
+    state = {
+        "fen":          board.fen(),
+        "move_stack":   [m.uci() for m in board.move_stack],
+        "player_color": player_color,
+        "last_move_uci": last_move.uci() if last_move else None,
+        "game_over":    False,
+    }
+
+    return (
+        board_html,
+        gr.Dropdown(choices=legal_moves, value=None, interactive=True, label="Your move"),
+        status_text,
+        history_html,
+        log_html,
+        state,
+    )
+
+
+def make_player_move(move_san: str, state: dict):
+    """Apply the player's chosen move, then let the model respond."""
+    if not state or state.get("game_over"):
+        return (
+            gr.update(), gr.update(), "Game is over. Start a new game.", gr.update(), gr.update(), state
+        )
+    if not move_san:
+        return (
+            gr.update(), gr.update(), "Please select a move first.", gr.update(), gr.update(), state
+        )
+
+    # Rebuild board from state
+    board = chess.Board()
+    for uci in state["move_stack"]:
+        board.push(chess.Move.from_uci(uci))
+
+    player_color = state["player_color"]
+    flipped      = (player_color == "black")
+    log_lines    = []
+
+    # Apply player move
+    try:
+        player_move = board.parse_san(move_san)
+    except Exception:
+        return (
+            gr.update(), gr.update(), f"Invalid move: {move_san}", gr.update(), gr.update(), state
+        )
+
+    board.push(player_move)
+    log_lines.append(f"You played **{move_san}**")
+    last_move = player_move
+
+    # Check game over after player move
+    status_text, status_key = game_status(board, player_color)
+    game_over = status_key in ("win", "loss", "draw")
+
+    model_san = None
+    if not game_over:
+        # Model responds
+        model_move_obj, legal = get_model_move(board)
+        model_san = board.san(model_move_obj)
+        board.push(model_move_obj)
+        last_move = model_move_obj
+        flag = "" if legal else " *(random fallback)*"
+        log_lines.append(f"ChessSLM plays **{model_san}**{flag}")
+
+        status_text, status_key = game_status(board, player_color)
+        game_over = status_key in ("win", "loss", "draw")
+
+    # Update state
+    state = {
+        "fen":           board.fen(),
+        "move_stack":    [m.uci() for m in board.move_stack],
+        "player_color":  player_color,
+        "last_move_uci": last_move.uci() if last_move else None,
+        "game_over":     game_over,
+    }
+
+    legal_moves  = [] if game_over else get_legal_moves_san(board)
+    board_html   = render_board_html(board, last_move=last_move, flipped=flipped)
+    history_html = format_move_history(board)
+    log_html     = "<br>".join(
+        [f"<span style='color:#c8a96e'>{l}</span>" for l in log_lines]
+    )
+
+    return (
+        board_html,
+        gr.Dropdown(choices=legal_moves, value=None, interactive=not game_over, label="Your move"),
+        status_text,
+        history_html,
+        log_html,
+        state,
+    )
+
+# ──────────────────────────────────────────────────────────────────────────────
+# CSS
+# ──────────────────────────────────────────────────────────────────────────────
+
+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');
+
+body, .gradio-container {
+    background: #0d0d0d !important;
+    color: #e8d5a3 !important;
+}
+
+.gradio-container {
+    max-width: 1100px !important;
+    margin: 0 auto !important;
+    font-family: 'Crimson Text', Georgia, serif !important;
+}
+
+h1, h2, h3 {
+    font-family: 'Cinzel', serif !important;
+    letter-spacing: 0.08em;
+}
+
+/* Title */
+#title-block {
+    text-align: center;
+    padding: 2rem 0 1rem;
+    border-bottom: 1px solid #3d2b0e;
+    margin-bottom: 1.5rem;
+}
+
+/* Panels */
+.panel {
+    background: #141008 !important;
+    border: 1px solid #3d2b0e !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+}
+
+/* Status bar */
+#status-bar {
+    text-align: center;
+    font-family: 'Cinzel', serif;
+    font-size: 1.1em;
+    letter-spacing: 0.05em;
+    padding: 0.6rem 1rem;
+    border-radius: 6px;
+    background: #1a1208;
+    border: 1px solid #4a3520;
+    color: #f0c060;
+}
+
+/* Buttons */
+button.primary {
+    background: linear-gradient(135deg, #8b6914 0%, #c4922a 50%, #8b6914 100%) !important;
+    border: 1px solid #d4a843 !important;
+    color: #fff8e8 !important;
+    font-family: 'Cinzel', serif !important;
+    letter-spacing: 0.06em !important;
+    font-size: 0.9em !important;
+    border-radius: 4px !important;
+    transition: all 0.2s ease !important;
+}
+button.primary:hover {
+    background: linear-gradient(135deg, #a07820 0%, #d4a843 50%, #a07820 100%) !important;
+    box-shadow: 0 0 16px rgba(212,168,67,0.4) !important;
+}
+
+button.secondary {
+    background: #1e1810 !important;
+    border: 1px solid #5a4020 !important;
+    color: #c8a96e !important;
+    font-family: 'Cinzel', serif !important;
+    letter-spacing: 0.04em !important;
+    border-radius: 4px !important;
+}
+
+/* Dropdown */
+select, .gr-dropdown select {
+    background: #1a1208 !important;
+    border: 1px solid #5a4020 !important;
+    color: #e8d5a3 !important;
+    font-family: 'Crimson Text', serif !important;
+    font-size: 1em !important;
+}
+
+/* Move log */
+#move-log {
+    background: #0f0c06 !important;
+    border: 1px solid #3d2b0e !important;
+    border-radius: 6px;
+    padding: 0.8rem 1rem;
+    font-family: 'Crimson Text', serif;
+    font-size: 0.95em;
+    line-height: 1.8;
+    min-height: 80px;
+    color: #c8a96e;
+}
+
+/* History panel */
+#history-panel {
+    background: #0f0c06 !important;
+    border: 1px solid #3d2b0e !important;
+    border-radius: 6px;
+    padding: 0.8rem 1rem;
+    min-height: 200px;
+    max-height: 320px;
+    overflow-y: auto;
+}
+
+/* Radio buttons */
+.gr-radio label {
+    color: #e8d5a3 !important;
+    font-family: 'Crimson Text', serif !important;
+}
+
+/* Labels */
+label span {
+    color: #a08050 !important;
+    font-family: 'Cinzel', serif !important;
+    font-size: 0.8em !important;
+    letter-spacing: 0.06em !important;
+    text-transform: uppercase !important;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #0d0d0d; }
+::-webkit-scrollbar-thumb { background: #5a4020; border-radius: 3px; }
+"""
+
+# ──────────────────────────────────────────────────────────────────────────────
+# Layout
+# ──────────────────────────────────────────────────────────────────────────────
+
+with gr.Blocks(css=CSS, title="ChessSLM — Play vs AI") as demo:
+
+    state = gr.State({})
+
+    # ── Header ────────────────────────────────────────────────────────────────
+    gr.HTML("""
+    <div id="title-block">
+        <h1 style="
+            font-family:'Cinzel',serif;
+            font-size:2.4em;
+            font-weight:700;
+            color:#e8c96e;
+            text-shadow: 0 0 30px rgba(232,180,80,0.4);
+            margin:0 0 0.3rem;
+            letter-spacing:0.12em;
+        ">♛ ChessSLM</h1>
+        <p style="
+            font-family:'Crimson Text',serif;
+            color:#8a7a5a;
+            font-size:1.1em;
+            font-style:italic;
+            margin:0;
+        ">Play against a GPT-2 model trained on 100,000 chess games</p>
+    </div>
+    """)
+
+    # ── Main layout ───────────────────────────────────────────────────────────
+    with gr.Row():
+
+        # Left: board
+        with gr.Column(scale=3):
+            board_display = gr.HTML(
+                value=render_board_html(chess.Board()),
+                label="Board"
+            )
+            status_display = gr.HTML(
+                value="<div id='status-bar'>Choose your colour and press New Game</div>"
+            )
+
+        # Right: controls + history
+        with gr.Column(scale=2):
+
+            gr.HTML("<h3 style='font-family:Cinzel,serif;color:#c8a96e;font-size:1em;letter-spacing:0.1em;margin:0 0 0.5rem;'>NEW GAME</h3>")
+
+            color_choice = gr.Radio(
+                choices=["⬜ White (move first)", "⬛ Black (move second)"],
+                value="⬜ White (move first)",
+                label="Play as",
+            )
+
+            new_game_btn = gr.Button("♟  New Game", variant="primary", size="lg")
+
+            gr.HTML("<div style='height:1px;background:#3d2b0e;margin:1rem 0;'></div>")
+
+            gr.HTML("<h3 style='font-family:Cinzel,serif;color:#c8a96e;font-size:1em;letter-spacing:0.1em;margin:0 0 0.5rem;'>YOUR MOVE</h3>")
+
+            move_dropdown = gr.Dropdown(
+                choices=[],
+                value=None,
+                label="Select move (SAN notation)",
+                interactive=False,
+            )
+
+            move_btn = gr.Button("▶  Make Move", variant="secondary")
+
+            gr.HTML("<div style='height:1px;background:#3d2b0e;margin:1rem 0;'></div>")
+
+            gr.HTML("<h3 style='font-family:Cinzel,serif;color:#c8a96e;font-size:1em;letter-spacing:0.1em;margin:0 0 0.5rem;'>MOVE LOG</h3>")
+
+            log_display = gr.HTML(
+                value="<div id='move-log'><em style='color:#555'>Start a new game to begin.</em></div>",
+            )
+
+            gr.HTML("<div style='height:1px;background:#3d2b0e;margin:1rem 0;'></div>")
+
+            gr.HTML("<h3 style='font-family:Cinzel,serif;color:#c8a96e;font-size:1em;letter-spacing:0.1em;margin:0 0 0.5rem;'>GAME HISTORY</h3>")
+
+            history_display = gr.HTML(
+                value="<div id='history-panel'><em style='color:#555'>No moves yet.</em></div>",
+            )
+
+    # ── Footer ────────────────────────────────────────────────────────────────
+    gr.HTML("""
+    <div style="
+        text-align:center; margin-top:2rem; padding-top:1rem;
+        border-top:1px solid #2a1e0a;
+        font-family:'Crimson Text',serif; font-size:0.85em; color:#5a4a30;
+    ">
+        Model: <a href="https://huggingface.co/FlameF0X/ChessSLM" target="_blank"
+            style="color:#8a6a30; text-decoration:none;">FlameF0X/ChessSLM</a>
+        &nbsp;·&nbsp; GPT-2 pre-trained on 100K PGN games
+        &nbsp;·&nbsp; Move selection uses top-k sampling (temp=0.3)
+    </div>
+    """)
+
+    # ── Wiring ────────────────────────────────────────────────────────────────
+    new_game_btn.click(
+        fn=new_game,
+        inputs=[color_choice],
+        outputs=[board_display, move_dropdown, status_display, history_display, log_display, state],
+    )
+
+    move_btn.click(
+        fn=make_player_move,
+        inputs=[move_dropdown, state],
+        outputs=[board_display, move_dropdown, status_display, history_display, log_display, state],
+    )
+
+    move_dropdown.select(
+        fn=make_player_move,
+        inputs=[move_dropdown, state],
+        outputs=[board_display, move_dropdown, status_display, history_display, log_display, state],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()