Update app.py

app.py

@@ -20,10 +20,8 @@ def format_board(board):
 
 def check_winner(board):
     """Check if there's a winner"""
-    # Convert to numpy array for easier checking
     board = np.array(board)
     
-    # Check horizontal, vertical and diagonal wins
     def check_line(line):
         return (len(line) >= 4 and 
                 (any(np.all(line[i:i+4] == 1) for i in range(len(line)-3)) or
@@ -58,7 +56,7 @@ def play_game(board, col, state):
     board = make_move(board, col, 1)
     if check_winner(board):
         state["game_over"] = True
-        return board, "You win! 🎉"
+        return format_board(board), "You win! 🎉"
     
     # AI move
     config = Configuration({"rows": 6, "columns": 7, "inarow": 4})
@@ -69,9 +67,9 @@ def play_game(board, col, state):
     
     if check_winner(board):
         state["game_over"] = True
-        return board, "AI wins! 🤖"
+        return format_board(board), "AI wins! 🤖"
     
-    return board, "Your turn!"
+    return format_board(board), "Your turn!"
 
 def create_ui():
     with gr.Blocks() as demo:
@@ -79,12 +77,17 @@ def create_ui():
         gr.Markdown("You are Red (🔴), AI is Yellow (🟡)")
         
         state = gr.State({"game_over": False})
-        board = gr.DataFrame(
-            format_board(initialize_game()),
-            headers=False,
+        
+        # Using Grid instead of DataFrame
+        board = gr.Dataframe(
+            value=format_board(initialize_game()),
             interactive=False,
-            show_label=False
+            show_label=False,
+            headers=None,
+            wrap=True,
+            elem_id="board"
         )
+        
         message = gr.Textbox(value="Your turn!", label="Status")
         
         with gr.Row():
@@ -94,7 +97,7 @@ def create_ui():
         
         def reset_game():
             state = {"game_over": False}
-            return initialize_game(), "Your turn!", state
+            return format_board(initialize_game()), "Your turn!", state
         
         new_game.click(
             reset_game,
@@ -110,5 +113,18 @@ def create_ui():
     
     return demo
 
+# Add some CSS to make the board look better
+css = """
+#board {
+    max-width: 400px;
+    margin: 0 auto;
+}
+#board td {
+    text-align: center;
+    font-size: 24px;
+    padding: 8px;
+}
+"""
+
 demo = create_ui()
-demo.launch()
+demo.launch(css=css)