Update app.py

app.py

@@ -1,169 +1,191 @@
 import gradio as gr
-import numpy as np
-from typing import List, Tuple, Optional
+import random
 
 class TicTacToe:
     def __init__(self):
-        self.board = np.zeros((3, 3))
-        self.human_player = 1
-        self.ai_player = -1
-        
-    def reset_board(self):
-        self.board = np.zeros((3, 3))
-        return self.format_board()
-    
-    def check_winner(self) -> Optional[int]:
-        # Check rows, columns and diagonals
-        for player in [self.human_player, self.ai_player]:
-            # Rows and columns
-            for i in range(3):
-                if all(self.board[i, :] == player) or all(self.board[:, i] == player):
-                    return player
-            # Diagonals
-            if all(np.diag(self.board) == player) or all(np.diag(np.fliplr(self.board)) == player):
-                return player
-        
-        # Check for draw
-        if np.all(self.board != 0):
+        self.board = [" " for _ in range(9)]
+        self.winning_combinations = [
+            [0, 1, 2], [3, 4, 5], [6, 7, 8],  # Rows
+            [0, 3, 6], [1, 4, 7], [2, 5, 8],  # Columns
+            [0, 4, 8], [2, 4, 6]              # Diagonals
+        ]
+        self.human = "X"
+        self.ai = "O"
+        self.current_player = self.human
+
+    def reset(self):
+        self.board = [" " for _ in range(9)]
+        self.current_player = self.human
+        return self.board
+
+    def make_move(self, position):
+        if self.board[position] == " " and not self.is_game_over():
+            self.board[position] = self.current_player
+            if self.current_player == self.human:
+                self.current_player = self.ai
+                # AI makes its move after human
+                if not self.is_game_over():
+                    ai_move = self.get_best_move()
+                    self.board[ai_move] = self.ai
+                    self.current_player = self.human
+            return True
+        return False
+
+    def is_winner(self, player):
+        for combo in self.winning_combinations:
+            if all(self.board[i] == player for i in combo):
+                return True
+        return False
+
+    def is_game_over(self):
+        return self.is_winner(self.human) or self.is_winner(self.ai) or " " not in self.board
+
+    def get_status(self):
+        if self.is_winner(self.human):
+            return "You win! 🎉"
+        elif self.is_winner(self.ai):
+            return "AI wins! 🤖"
+        elif " " not in self.board:
+            return "It's a tie! 🤝"
+        return "Your turn!"
+
+    def minimax(self, depth, is_maximizing):
+        if self.is_winner(self.ai):
+            return 1
+        if self.is_winner(self.human):
+            return -1
+        if " " not in self.board:
             return 0
-        
-        return None
-    
-    def get_valid_moves(self) -> List[Tuple[int, int]]:
-        return [(i, j) for i in range(3) for j in range(3) if self.board[i, j] == 0]
-    
-    def minimax(self, depth: int, is_maximizing: bool, alpha: float = float('-inf'), beta: float = float('inf')) -> Tuple[int, Optional[Tuple[int, int]]]:
-        winner = self.check_winner()
-        if winner is not None:
-            return winner * 100, None
-        
+
         if is_maximizing:
             best_score = float('-inf')
-            best_move = None
-            for move in self.get_valid_moves():
-                self.board[move] = self.ai_player
-                score, _ = self.minimax(depth + 1, False, alpha, beta)
-                self.board[move] = 0
-                
-                if score > best_score:
-                    best_score = score
-                    best_move = move
-                
-                alpha = max(alpha, best_score)
-                if beta <= alpha:
-                    break
-                    
-            return best_score, best_move
+            for i in range(9):
+                if self.board[i] == " ":
+                    self.board[i] = self.ai
+                    score = self.minimax(depth + 1, False)
+                    self.board[i] = " "
+                    best_score = max(score, best_score)
+            return best_score
         else:
             best_score = float('inf')
-            best_move = None
-            for move in self.get_valid_moves():
-                self.board[move] = self.human_player
-                score, _ = self.minimax(depth + 1, True, alpha, beta)
-                self.board[move] = 0
-                
-                if score < best_score:
+            for i in range(9):
+                if self.board[i] == " ":
+                    self.board[i] = self.human
+                    score = self.minimax(depth + 1, True)
+                    self.board[i] = " "
+                    best_score = min(score, best_score)
+            return best_score
+
+    def get_best_move(self):
+        best_score = float('-inf')
+        best_move = None
+        for i in range(9):
+            if self.board[i] == " ":
+                self.board[i] = self.ai
+                score = self.minimax(0, False)
+                self.board[i] = " "
+                if score > best_score:
                     best_score = score
-                    best_move = move
-                    
-                beta = min(beta, best_score)
-                if beta <= alpha:
-                    break
-                    
-            return best_score, best_move
-    
-    def ai_move(self) -> str:
-        if len(self.get_valid_moves()) == 0:
-            return self.format_board()
-        
-        _, best_move = self.minimax(0, True)
-        if best_move is not None:
-            self.board[best_move] = self.ai_player
-        
-        return self.format_board()
-    
-    def format_board(self) -> str:
-        symbols = {0: " ", 1: "X", -1: "O"}
-        return "\n".join([
-            "-------------",
-            f"| {symbols[self.board[0,0]]} | {symbols[self.board[0,1]]} | {symbols[self.board[0,2]]} |",
-            "-------------",
-            f"| {symbols[self.board[1,0]]} | {symbols[self.board[1,1]]} | {symbols[self.board[1,2]]} |",
-            "-------------",
-            f"| {symbols[self.board[2,0]]} | {symbols[self.board[2,1]]} | {symbols[self.board[2,2]]} |",
-            "-------------"
-        ])
-    
-    def make_move(self, row: int, col: int) -> Tuple[str, str]:
-        # Check if move is valid
-        if self.board[row, col] != 0:
-            return self.format_board(), "Invalid move! Cell already taken."
-        
-        # Make human move
-        self.board[row, col] = self.human_player
-        
-        # Check if game is over after human move
-        winner = self.check_winner()
-        if winner is not None:
-            if winner == self.human_player:
-                return self.format_board(), "You win!"
-            elif winner == 0:
-                return self.format_board(), "It's a draw!"
-        
-        # Make AI move
-        self.ai_move()
-        
-        # Check if game is over after AI move
-        winner = self.check_winner()
-        if winner is not None:
-            if winner == self.ai_player:
-                return self.format_board(), "AI wins!"
-            elif winner == 0:
-                return self.format_board(), "It's a draw!"
-        
-        return self.format_board(), "Game in progress"
-
-# Create game instance
+                    best_move = i
+        return best_move
+
 game = TicTacToe()
 
-def play_game(row: int, col: int, board_state: str, game_status: str) -> Tuple[str, str]:
-    if "win" in game_status or "draw" in game_status:
-        return board_state, game_status
-    return game.make_move(row, col)
-
-def reset_game() -> Tuple[str, str]:
-    return game.reset_board(), "Game reset! Your turn (X)"
-
-# Create Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("# Tic Tac Toe vs AI")
-    gr.Markdown("You play as X, AI plays as O. Click the buttons to make your move!")
-    
-    with gr.Row():
-        # Game board display
-        board_display = gr.Textbox(value=game.format_board(), label="Game Board", lines=7)
-        game_status = gr.Textbox(value="Your turn (X)", label="Game Status")
-    
-    # Create 3x3 grid of buttons
-    with gr.Row():
-        for i in range(3):
-            with gr.Column():
-                for j in range(3):
-                    btn = gr.Button(f"Row {i}, Col {j}")
-                    btn.click(
-                        fn=play_game,
-                        inputs=[
-                            gr.Number(value=i, visible=False),
-                            gr.Number(value=j, visible=False),
-                            board_display,
-                            game_status
-                        ],
-                        outputs=[board_display, game_status]
-                    )
-    
-    # Reset button
-    reset_btn = gr.Button("Reset Game")
-    reset_btn.click(fn=reset_game, inputs=[], outputs=[board_display, game_status])
-
-# Launch app
+css = """
+#game-container {
+    max-width: 300px;
+    margin: 0 auto;
+    padding: 15px;
+}
+
+.board {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+    background: #ff0000;
+    padding: 4px;
+    width: 240px;
+    margin: 0 auto;
+}
+
+.cell {
+    width: 100% !important;
+    height: 75px !important;
+    font-size: 24px !important;
+    font-weight: bold !important;
+    background: white !important;
+    color: #0066cc !important;
+    border: none !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+}
+
+.cell:hover {
+    background: #f0f0f0 !important;
+}
+
+#message {
+    text-align: center;
+    margin: 15px 0;
+    font-size: 18px;
+    color: #333;
+}
+
+#reset-btn {
+    background: #e74c3c !important;
+    color: white !important;
+    border: none !important;
+    padding: 10px 20px !important;
+    border-radius: 5px !important;
+    cursor: pointer !important;
+    margin: 10px auto !important;
+    display: block !important;
+    width: 120px !important;
+}
+"""
+
+def create_interface():
+    with gr.Blocks(css=css) as demo:
+        with gr.Column(elem_id="game-container"):
+            status = gr.Markdown("Your turn!", elem_id="message")
+            
+            with gr.Column(elem_classes=["board"]):
+                cells = []
+                for i in range(9):
+                    cells.append(gr.Button(" ", elem_classes=["cell"]))
+            
+            reset = gr.Button("New Game", elem_id="reset-btn")
+
+        def handle_click(idx):
+            if game.make_move(idx):
+                return {
+                    status: game.get_status(),
+                    **{cell: game.board[i] for i, cell in enumerate(cells)}
+                }
+            return {status: "Invalid move!"}
+
+        def reset_game():
+            game.reset()
+            return {
+                status: "Your turn!",
+                **{cell: " " for cell in cells}
+            }
+
+        for i, cell in enumerate(cells):
+            cell.click(
+                handle_click,
+                inputs=[gr.State(i)],
+                outputs=[status, *cells]
+            )
+
+        reset.click(
+            reset_game,
+            outputs=[status, *cells]
+        )
+
+    return demo
+
+demo = create_interface()
 demo.launch()