Update app.py

app.py

@@ -1,4 +1,5 @@
 import gradio as gr
+from PIL import Image, ImageDraw
 
 # Othello (Reversi) logic implementation
 def initialize_board():
@@ -37,23 +38,21 @@ def apply_move(board, row, col, player):
         board[r][c] = player
     return True
 
-# Generate HTML representation
-def board_to_html(board):
-    html = '<table style="border-collapse: collapse;">'
+# 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')
+    draw = ImageDraw.Draw(img)
     for r in range(8):
-        html += '<tr>'
         for c in range(8):
-            cell = board[r][c]
-            if cell == 1:
-                color = 'white'
-            elif cell == -1:
-                color = 'black'
-            else:
-                color = 'transparent'
-            html += f'<td style="width:40px;height:40px;border:1px solid #000;text-align:center;vertical-align:middle;background:{color};"></td>'
-        html += '</tr>'
-    html += '</table>'
-    return html
+            x0, y0 = c * cell_size, r * cell_size
+            x1, y1 = x0 + cell_size, y0 + cell_size
+            draw.rectangle([x0, y0, x1, y1], outline='black')
+            if board[r][c] == 1:
+                draw.ellipse([x0+4, y0+4, x1-4, y1-4], fill='white')
+            elif board[r][c] == -1:
+                draw.ellipse([x0+4, y0+4, x1-4, y1-4], fill='black')
+    return img
 
 # Count score
 def count_score(board):
@@ -61,34 +60,32 @@ def count_score(board):
     white = sum(cell == 1 for row in board for cell in row)
     return black, white
 
-# Gradio interaction
-def play_move(row, col, state):
+# Gradio interaction with clickable board
+def play_move(evt, state):
     board, player = state
-    row, col = int(row) - 1, int(col) - 1
-    if not (0 <= row < 8 and 0 <= col < 8):
-        return board_to_html(board), f"Invalid position.", 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 apply_move(board, row, col, player):
-        return board_to_html(board), "Invalid move.", state
+        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_html(board), status, (board, player)
+    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>")
-        board_html = gr.HTML(board_to_html(initialize_board()))
+        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")
         status = gr.Text(value="Black: 2 | White: 2 | Black to move", interactive=False)
-        with gr.Row():
-            row_input = gr.Slider(1, 8, step=1, label="Row")
-            col_input = gr.Slider(1, 8, step=1, label="Column")
-            submit = gr.Button("Place")
-        state = gr.State((initialize_board(), -1))  # -1: Black, 1: White
-        submit.click(fn=play_move,
-                     inputs=[row_input, col_input, state],
-                     outputs=[board_html, status, state])
+        # Bind click event
+        board_img.select(fn=play_move,
+                         inputs=[state],
+                         outputs=[board_img, status, state])
     demo.launch()
 
 if __name__ == "__main__":