Upload 3 files

app.py

@@ -1,6 +1,5 @@
 # app.py
 import os
-import base64
 import gradio as gr
 import chess
 import chess.svg
@@ -15,20 +14,15 @@ DEFAULT_MOVETIME_MS = 1500   # engine denktijd per zet
 
 # -------- Helpers --------
 def board_svg(board: chess.Board, last_move=None) -> str:
-    """Geef een SVG-string van het bord terug."""
+    """Geef een inline SVG van het bord terug (direct renderbaar in gr.HTML)."""
     return chess.svg.board(
         board=board,
         lastmove=last_move,
         check=board.is_check(),
         coordinates=True,
-        size=480,
+        size=520,
     )
 
-def svg_to_data_url(svg_text: str) -> str:
-    """Returneer data-URL van SVG (zodat Gradio 'm kan tonen in HTML)."""
-    b64 = base64.b64encode(svg_text.encode("utf-8")).decode("ascii")
-    return f"data:image/svg+xml;base64,{b64}"
-
 def new_engine(threads=DEFAULT_THREADS, hash_mb=DEFAULT_HASH_MB, ponder=False):
     engine = chess.engine.SimpleEngine.popen_uci(STOCKFISH_PATH)
     # Sterke UCI-opts
@@ -70,7 +64,8 @@ def engine_limit(state):
 
 def render(state):
     svg = board_svg(state["board"], last_move=state["last_move"])
-    return svg_to_data_url(svg), state["board"].fen()
+    # Geef inline SVG terug; gr.HTML rendert dit direct
+    return svg, state["board"].fen()
 
 # -------- Acties --------
 def new_game(engine_color, movetime_ms, depth, threads, hash_mb):
@@ -84,6 +79,7 @@ def make_move(state, user_move):
         return state, *render(state), f"Partij is al afgelopen: {board.result()}."
 
     try:
+        # UCI notatie (b.v. e2e4 of e7e8q)
         mv = chess.Move.from_uci(user_move.strip())
         if mv not in board.legal_moves:
             return state, *render(state), "Ongeldige zet (niet legaal in deze stelling)."
@@ -96,6 +92,7 @@ def make_move(state, user_move):
         img, fen = render(state)
         return state, img, fen, f"Partij afgelopen: {board.result()}."
 
+    # engine aan zet?
     side_to_move = "white" if board.turn == chess.WHITE else "black"
     if side_to_move == state["engine_color"]:
         msg = engine_move(state)
@@ -124,6 +121,7 @@ def undo_move(state):
     board: chess.Board = state["board"]
     if len(board.move_stack) == 0:
         return state, *render(state), "Geen zetten om terug te nemen."
+    # Neem 1 of 2 zetten terug zodat jij weer aan zet bent
     board.pop()
     if state["engine_color"] == ("white" if board.turn == chess.WHITE else "black") and len(board.move_stack) > 0:
         board.pop()
@@ -143,11 +141,16 @@ def stop_engine(state):
     return "Engine gestopt."
 
 # -------- Gradio UI --------
-with gr.Blocks(title="Boss Chess (Stockfish)") as demo:
+CSS = """
+#board { display: flex; justify-content: center; }
+#board svg { max-width: 100%; height: auto; }
+"""
+
+with gr.Blocks(title="Boss Chess (Stockfish)", css=CSS) as demo:
     gr.Markdown("# ♟️ Boss Chess (Stockfish)\nSpeel tegen een sterke NNUE-engine (Stockfish) in je browser.")
 
     with gr.Row():
-        board_html = gr.HTML(label="Bord")
+        board_html = gr.HTML(label="Bord", elem_id="board")
         fen_out = gr.Textbox(label="FEN", interactive=False)
 
     with gr.Row():
@@ -168,12 +171,14 @@ with gr.Blocks(title="Boss Chess (Stockfish)") as demo:
 
     state = gr.State()
 
+    # Callbacks
     btn_new.click(new_game, [engine_color, movetime, depth, threads, hash_mb],
                   [state, board_html, fen_out, status])
     btn_move.click(make_move, [state, user_move], [state, board_html, fen_out, status])
     btn_undo.click(undo_move, [state], [state, board_html, fen_out, status])
     btn_resign.click(resign, [state], [state, board_html, fen_out, status])
 
+    # Auto-start een partij
     demo.load(new_game, [engine_color, movetime, depth, threads, hash_mb],
               [state, board_html, fen_out, status])