Update app.py

app.py

@@ -1,19 +1,16 @@
 import gradio as gr
 from PIL import Image, ImageDraw
 
-# Othello (Reversi) logic implementation
 def initialize_board():
     board = [[0 for _ in range(8)] for _ in range(8)]
-    board[3][3], board[4][4] = 1, 1  # White
-    board[3][4], board[4][3] = -1, -1  # Black
+    board[3][3], board[4][4] = 1, 1
+    board[3][4], board[4][3] = -1, -1
     return board
 
-# Directions for flipping
 DIRECTIONS = [(-1, -1), (-1, 0), (-1, 1),
               (0, -1),           (0, 1),
               (1, -1),  (1, 0),  (1, 1)]
 
-# Check if a move is valid and collect flips
 def get_flips(board, row, col, player):
     if board[row][col] != 0:
         return []
@@ -23,12 +20,12 @@ def get_flips(board, row, col, player):
         buffer = []
         while 0 <= r < 8 and 0 <= c < 8 and board[r][c] == -player:
             buffer.append((r, c))
-            r += dr; c += dc
+            r += dr
+            c += dc
         if buffer and 0 <= r < 8 and 0 <= c < 8 and board[r][c] == player:
             flips.extend(buffer)
     return flips
 
-# Apply move if valid
 def apply_move(board, row, col, player):
     flips = get_flips(board, row, col, player)
     if not flips:
@@ -38,7 +35,6 @@ def apply_move(board, row, col, player):
         board[r][c] = player
     return True
 
-# Generate PIL image representation
 def board_to_image(board, img_size=320):
     cell_size = img_size // 8
     img = Image.new('RGB', (img_size, img_size), 'green')
@@ -54,39 +50,37 @@ def board_to_image(board, img_size=320):
                 draw.ellipse([x0+4, y0+4, x1-4, y1-4], fill='black')
     return img
 
-# Count score
 def count_score(board):
     black = sum(cell == -1 for row in board for cell in row)
     white = sum(cell == 1 for row in board for cell in row)
     return black, white
 
-# Gradio interaction with clickable board
-def play_move(evt, state):
+def play_move(x, y, state):
     board, player = state
     img_size = 320
     cell_size = img_size / 8
-    x, y = evt['x'], evt['y']
     col, row = int(x // cell_size), int(y // cell_size)
+    if not (0 <= row < 8 and 0 <= col < 8):
+        return board_to_image(board), f"Click inside the board.", state
     if not apply_move(board, row, col, player):
         return board_to_image(board), f"Invalid move at ({row+1},{col+1})", state
-    # Switch player
     player = -player
     black_score, white_score = count_score(board)
     status = f"Black: {black_score} | White: {white_score} | {'Black' if player == -1 else 'White'} to move"
     return board_to_image(board), status, (board, player)
 
-# Initialize Gradio app
 def main():
     with gr.Blocks() as demo:
         gr.HTML("<h2>Othello (Reversi) Game</h2>")
-        state = gr.State((initialize_board(), -1))  # -1: Black starts
-        board_img = gr.Image(value=board_to_image(initialize_board()), interactive=True, tool="click", label="Click to place a stone")
+        state = gr.State((initialize_board(), -1))
+        image_box = gr.Image(value=board_to_image(initialize_board()), interactive=True, label="Click to place a stone")
         status = gr.Text(value="Black: 2 | White: 2 | Black to move", interactive=False)
-        # Bind click event
-        board_img.select(fn=play_move,
-                         inputs=[state],
-                         outputs=[board_img, status, state])
+
+        def click_handler(evt: gr.SelectData, state):
+            return play_move(evt.index[0], evt.index[1], state)
+
+        image_box.select(click_handler, inputs=[state], outputs=[image_box, status, state])
     demo.launch()
 
 if __name__ == "__main__":
-    main()
+    main()