📝 ✨ thêm hoàn tác và chế độ AI tự động chơi

- Triển khai chức năng hoàn tác nước đi, lưu trữ lịch sử trạng thái game.
- Bổ sung chế độ AI tự động chơi theo gợi ý của mô hình với tốc độ điều chỉnh được.
- Hiển thị lịch sử các nước đi và trạng thái hoạt động của AI trong giao diện người dùng.
- Đánh dấu nước đi cuối cùng trên bảng game để người chơi dễ dàng theo dõi.
- Cập nhật UI định kỳ và ngăn người dùng thao tác khi AI đang chạy tự động.

app.py

@@ -22,6 +22,7 @@ class WaterSortEnv:
         self.num_bottles = num_bottles
         self.bottles = np.zeros((num_bottles, bottle_height), dtype=int)
         self.move_history = []
+        self.state_history = []  # Lưu lịch sử các state
         self.game_started = False
         self.game_finished = False
     
@@ -40,6 +41,7 @@ class WaterSortEnv:
                     color_idx += 1
         
         self.move_history = []
+        self.state_history = [self.bottles.copy()]  # Lưu state ban đầu
         self.game_started = True
         self.game_finished = False
         return self.get_state()
@@ -87,6 +89,8 @@ class WaterSortEnv:
         
         self._pour_liquid(from_idx, to_idx)
         self.move_history.append((from_idx, to_idx))
+        self.state_history.append(self.bottles.copy())  # Lưu state sau mỗi nước
+        
         done = self.is_solved()
         
         if done:
@@ -95,6 +99,21 @@ class WaterSortEnv:
         reward = 10.0 if done else 0.1
         return self.get_state(), reward, done
     
+    def undo_last_move(self) -> bool:
+        """Quay lại nước đi trước đó"""
+        if len(self.state_history) <= 1:  # Chỉ còn state ban đầu
+            return False
+        
+        # Xóa state hiện tại
+        self.state_history.pop()
+        self.move_history.pop()
+        
+        # Khôi phục state trước đó
+        self.bottles = self.state_history[-1].copy()
+        self.game_finished = False
+        
+        return True
+    
     def _pour_liquid(self, from_idx: int, to_idx: int):
         """Pour liquid from one bottle to another"""
         from_bottle = self.bottles[from_idx]
@@ -228,6 +247,8 @@ class GameStateManager:
         self.processor = DataProcessor()
         self.current_model_name = None
         self.ai_running = False
+        self.ai_thread = None
+        self.ai_delay = 1.0  # Delay giữa các nước (giây)
         self.selected_bottles = None
         self.game_stats = {
             'moves_count': 0,
@@ -264,13 +285,28 @@ class GameStateManager:
             'valid_moves': self.env.get_valid_moves()
         }
         self.selected_bottles = None
+        self.ai_running = False
         return self.env.get_state()
     
     def reset_game(self):
         """Reset game"""
+        self.ai_running = False
         self.env.game_finished = False
         return self.start_game()
     
+    def undo_move(self) -> Tuple[bool, str]:
+        """Quay lại nước đi trước"""
+        if self.ai_running:
+            return False, "❌ Không thể undo khi AI đang chơi!"
+        
+        success = self.env.undo_last_move()
+        if success:
+            self.game_stats['moves_count'] = len(self.env.move_history)
+            self.game_stats['valid_moves'] = self.env.get_valid_moves()
+            return True, f"✅ Đã quay lại! Tổng bước: {self.game_stats['moves_count']}"
+        else:
+            return False, "❌ Không thể quay lại thêm!"
+    
     def get_next_move_suggestion(self) -> Optional[Tuple[int, int]]:
         """Lấy gợi ý từ AI"""
         if self.model is None:
@@ -334,12 +370,36 @@ class GameStateManager:
             to_bottle = bottle_idx
             success, message = self.make_move(from_bottle, to_bottle)
             return message
+    
+    def start_ai_autoplay(self):
+        """Bắt đầu AI tự động chơi"""
+        if self.ai_running:
+            return False, "AI đã đang chạy!"
+        
+        if self.model is None:
+            return False, "Vui lòng tải model trước!"
+        
+        if self.env.game_finished:
+            return False, "Game đã kết thúc!"
+        
+        self.ai_running = True
+        return True, "✅ AI bắt đầu tự động chơi!"
+    
+    def stop_ai_autoplay(self):
+        """Dừng AI tự động chơi"""
+        self.ai_running = False
+        return "⏸️ AI đã dừng!"
+    
+    def set_ai_speed(self, delay: float):
+        """Đặt tốc độ AI (delay giữa các nước)"""
+        self.ai_delay = delay
 
 # =============================================================================
 # 5. VISUALIZATION
 # =============================================================================
 
-def draw_game_board(state: np.ndarray, selected_bottle: Optional[int] = None) -> str:
+def draw_game_board(state: np.ndarray, selected_bottle: Optional[int] = None, 
+                    last_move: Optional[Tuple[int, int]] = None) -> str:
     """Vẽ bảng game dưới dạng HTML"""
     colors_map = {
         0: '#ffffff',
@@ -359,10 +419,17 @@ def draw_game_board(state: np.ndarray, selected_bottle: Optional[int] = None) ->
     for bottle_idx in range(num_bottles):
         bottle = state[bottle_idx]
         is_selected = bottle_idx == selected_bottle
-        border_style = 'border: 3px solid #FFD700;' if is_selected else 'border: 2px solid #333;'
+        
+        # Highlight nếu là nước vừa chơi
+        is_last_move = False
+        if last_move:
+            is_last_move = bottle_idx in last_move
+        
+        border_color = '#FFD700' if is_selected else ('#00FF00' if is_last_move else '#333')
+        border_width = '3' if (is_selected or is_last_move) else '2'
         
         html += f'<div style="text-align: center; margin: 10px;">'
-        html += f'<div style="width: 60px; height: 150px; {border_style} background: #f0f0f0; margin-bottom: 10px; display: flex; flex-direction: column-reverse; overflow: hidden;">'
+        html += f'<div style="width: 60px; height: 150px; border: {border_width}px solid {border_color}; background: #f0f0f0; margin-bottom: 10px; display: flex; flex-direction: column-reverse; overflow: hidden;">'
         
         for height_idx in range(bottle_height):
             color_val = int(bottle[height_idx])
@@ -381,6 +448,9 @@ def get_game_stats_html(game_manager: GameStateManager) -> str:
     stats = game_manager.game_stats
     model_info = game_manager.current_model_name if game_manager.current_model_name else "Chưa tải"
     
+    ai_status = "🤖 Đang chơi..." if game_manager.ai_running else "⏸️ Dừng"
+    history_count = len(game_manager.env.move_history)
+    
     html = f"""
     <div style="background: #f5f5f5; padding: 15px; border-radius: 8px; margin: 10px 0;">
         <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px;">
@@ -397,6 +467,16 @@ def get_game_stats_html(game_manager: GameStateManager) -> str:
                 <p style="margin: 5px 0; font-size: 14px; font-weight: bold;">{'GPU' if torch.cuda.is_available() else 'CPU'}</p>
             </div>
         </div>
+        <div style="margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+            <div>
+                <p style="margin: 0; font-size: 12px; color: #666;">📜 Lịch sử</p>
+                <p style="margin: 5px 0; font-size: 16px; font-weight: bold;">{history_count} nước đi</p>
+            </div>
+            <div>
+                <p style="margin: 0; font-size: 12px; color: #666;">🎮 Trạng thái AI</p>
+                <p style="margin: 5px 0; font-size: 16px; font-weight: bold;">{ai_status}</p>
+            </div>
+        </div>
         <p style="margin: 10px 0; font-size: 12px; color: #999;">
             Nước hợp lệ: {len(stats['valid_moves'])} nước
         </p>
@@ -404,6 +484,31 @@ def get_game_stats_html(game_manager: GameStateManager) -> str:
     """
     return html
 
+def get_move_history_html(game_manager: GameStateManager) -> str:
+    """Hiển thị lịch sử các nước đi"""
+    moves = game_manager.env.move_history
+    
+    if not moves:
+        return "<p style='text-align: center; color: #999;'>Chưa có nước đi nào</p>"
+    
+    html = "<div style='max-height: 300px; overflow-y: auto; padding: 10px;'>"
+    html += "<table style='width: 100%; border-collapse: collapse;'>"
+    html += "<tr style='background: #f0f0f0; font-weight: bold;'>"
+    html += "<th style='padding: 8px; border: 1px solid #ddd;'>Bước</th>"
+    html += "<th style='padding: 8px; border: 1px solid #ddd;'>Từ chai</th>"
+    html += "<th style='padding: 8px; border: 1px solid #ddd;'>Đến chai</th>"
+    html += "</tr>"
+    
+    for i, (from_idx, to_idx) in enumerate(moves, 1):
+        html += f"<tr style='background: {'#fff' if i % 2 == 0 else '#f9f9f9'};'>"
+        html += f"<td style='padding: 8px; border: 1px solid #ddd; text-align: center;'>{i}</td>"
+        html += f"<td style='padding: 8px; border: 1px solid #ddd; text-align: center;'>{from_idx}</td>"
+        html += f"<td style='padding: 8px; border: 1px solid #ddd; text-align: center;'>{to_idx}</td>"
+        html += "</tr>"
+    
+    html += "</table></div>"
+    return html
+
 # =============================================================================
 # 6. MAIN GRADIO APP
 # =============================================================================
@@ -430,19 +535,21 @@ def load_model_ui(selected_model: str) -> Tuple[str, str]:
     else:
         return f"❌ Lỗi khi tải model: {selected_model}", ""
 
-def start_game_ui() -> Tuple[str, str, str]:
+def start_game_ui() -> Tuple[str, str, str, str]:
     """Bắt đầu game mới"""
     state = game_manager.start_game()
     board = draw_game_board(state)
     stats = get_game_stats_html(game_manager)
-    return stats, board, "✅ Bắt đầu game mới!"
+    history = get_move_history_html(game_manager)
+    return stats, board, "✅ Bắt đầu game mới!", history
 
-def reset_game_ui() -> Tuple[str, str, str]:
+def reset_game_ui() -> Tuple[str, str, str, str]:
     """Reset game"""
     state = game_manager.reset_game()
     board = draw_game_board(state)
     stats = get_game_stats_html(game_manager)
-    return stats, board, "🔄 Game đã được reset!"
+    history = get_move_history_html(game_manager)
+    return stats, board, "🔄 Game đã được reset!", history
 
 def suggest_move_ui() -> Tuple[str, str]:
     """Gợi ý di chuyển từ AI"""
@@ -460,30 +567,120 @@ def suggest_move_ui() -> Tuple[str, str]:
     else:
         return "", "❌ Không thể tìm được nước gợi ý"
 
-def bottle_click_ui(bottle_idx: int) -> Tuple[str, str, str]:
+def bottle_click_ui(bottle_idx: int) -> Tuple[str, str, str, str]:
     """Xử lý click bottle"""
     if not game_manager.env.game_started:
-        return "", draw_game_board(game_manager.env.get_state()), "❌ Vui lòng bắt đầu game!"
+        return "", draw_game_board(game_manager.env.get_state()), "❌ Vui lòng bắt đầu game!", ""
     
     if game_manager.env.game_finished:
-        return "", draw_game_board(game_manager.env.get_state()), "🎉 Game đã kết thúc!"
+        return "", draw_game_board(game_manager.env.get_state()), "🎉 Game đã kết thúc!", ""
+    
+    if game_manager.ai_running:
+        return "", draw_game_board(game_manager.env.get_state()), "❌ AI đang chơi, không thể thao tác!", ""
     
     if game_manager.selected_bottles is None:
         game_manager.selected_bottles = bottle_idx
         state = game_manager.env.get_state()
         board = draw_game_board(state, bottle_idx)
         stats = get_game_stats_html(game_manager)
-        return stats, board, f"✓ Chọn chai {bottle_idx}. Chọn chai đích."
+        history = get_move_history_html(game_manager)
+        return stats, board, f"✓ Chọn chai {bottle_idx}. Chọn chai đích.", history
     else:
         from_bottle = game_manager.selected_bottles
         to_bottle = bottle_idx
         success, message = game_manager.make_move(from_bottle, to_bottle)
         
         state = game_manager.env.get_state()
-        board = draw_game_board(state)
+        last_move = (from_bottle, to_bottle) if success else None
+        board = draw_game_board(state, last_move=last_move)
         stats = get_game_stats_html(game_manager)
+        history = get_move_history_html(game_manager)
+        
+        return stats, board, message, history
+
+def undo_move_ui() -> Tuple[str, str, str, str]:
+    """Undo nước đi trước"""
+    success, message = game_manager.undo_move()
+    
+    state = game_manager.env.get_state()
+    board = draw_game_board(state)
+    stats = get_game_stats_html(game_manager)
+    history = get_move_history_html(game_manager)
+    
+    return stats, board, message, history
+
+def ai_autoplay_ui() -> Tuple[str, str, str, str]:
+    """Bắt đầu AI tự động chơi"""
+    success, message = game_manager.start_ai_autoplay()
+    
+    state = game_manager.env.get_state()
+    board = draw_game_board(state)
+    stats = get_game_stats_html(game_manager)
+    history = get_move_history_html(game_manager)
+    
+    return stats, board, message, history
+
+def stop_ai_ui() -> Tuple[str, str, str, str]:
+    """Dừng AI"""
+    message = game_manager.stop_ai_autoplay()
+    
+    state = game_manager.env.get_state()
+    board = draw_game_board(state)
+    stats = get_game_stats_html(game_manager)
+    history = get_move_history_html(game_manager)
+    
+    return stats, board, message, history
+
+def ai_step_loop():
+    """Vòng lặp AI tự động chơi (chạy trong background)"""
+    while game_manager.ai_running:
+        if game_manager.env.game_finished:
+            game_manager.ai_running = False
+            break
+        
+        # Lấy nước đi từ AI
+        move = game_manager.get_next_move_suggestion()
+        
+        if move is None:
+            game_manager.ai_running = False
+            break
         
-        return stats, board, message
+        from_bottle, to_bottle = move
+        success, message = game_manager.make_move(from_bottle, to_bottle)
+        
+        if not success:
+            game_manager.ai_running = False
+            break
+        
+        # Delay để người xem thấy được
+        time.sleep(game_manager.ai_delay)
+    
+    game_manager.ai_running = False
+
+def update_ai_speed_ui(speed_value: float) -> str:
+    """Cập nhật tốc độ AI"""
+    game_manager.set_ai_speed(speed_value)
+    return f"⚡ Tốc độ AI: {speed_value:.1f}s/bước"
+
+def get_current_state():
+    """Lấy trạng thái hiện tại để refresh UI"""
+    state = game_manager.env.get_state()
+    
+    # Highlight nước vừa chơi nếu có
+    last_move = None
+    if len(game_manager.env.move_history) > 0:
+        last_move = game_manager.env.move_history[-1]
+    
+    board = draw_game_board(state, last_move=last_move)
+    stats = get_game_stats_html(game_manager)
+    history = get_move_history_html(game_manager)
+    
+    if game_manager.env.game_finished:
+        message = f"🎉 Hoàn thành trong {game_manager.game_stats['moves_count']} bước!"
+    else:
+        message = f"📊 Bước hiện tại: {game_manager.game_stats['moves_count']}"
+    
+    return stats, board, message, history
 
 def create_bottle_buttons():
     """Tạo buttons cho các chai"""
@@ -515,10 +712,32 @@ with gr.Blocks(title="Water Sort Puzzle", theme=gr.themes.Soft()) as demo:
             gr.Markdown("### 🎮 Điều khiển")
             start_btn = gr.Button("🎮 B���t đầu", variant="primary", size="lg")
             reset_btn = gr.Button("🔄 Reset", size="lg")
-            suggest_btn = gr.Button("💡 Gợi ý", size="lg")
+            
+            with gr.Row():
+                undo_btn = gr.Button("↩️ Undo", size="lg", scale=1)
+                suggest_btn = gr.Button("💡 Gợi ý", size="lg", scale=1)
+            
+            gr.Markdown("### 🤖 AI Auto Play")
+            
+            ai_speed_slider = gr.Slider(
+                minimum=0.1,
+                maximum=3.0,
+                value=1.0,
+                step=0.1,
+                label="Tốc độ AI (giây/bước)",
+                interactive=True
+            )
+            speed_status = gr.Textbox(label="Trạng thái tốc độ", value="⚡ Tốc độ AI: 1.0s/bước", interactive=False)
+            
+            with gr.Row():
+                ai_play_btn = gr.Button("▶️ AI Tự Chơi", variant="primary", size="lg", scale=1)
+                ai_stop_btn = gr.Button("⏸️ Dừng AI", variant="stop", size="lg", scale=1)
             
             gr.Markdown("### 📊 Thống kê")
             game_stats = gr.HTML()
+            
+            gr.Markdown("### 📜 Lịch sử nước đi")
+            move_history = gr.HTML()
         
         with gr.Column(scale=2):
             gr.Markdown("### 🎯 Bảng trò chơi")
@@ -538,6 +757,10 @@ with gr.Blocks(title="Water Sort Puzzle", theme=gr.themes.Soft()) as demo:
                 label="Gợi ý từ AI",
                 interactive=False
             )
+            
+            # Thêm nút refresh để cập nhật UI khi AI đang chạy
+            with gr.Row():
+                refresh_btn = gr.Button("🔄 Refresh", size="sm")
     
     # Event handlers
     load_model_btn.click(
@@ -548,12 +771,12 @@ with gr.Blocks(title="Water Sort Puzzle", theme=gr.themes.Soft()) as demo:
     
     start_btn.click(
         fn=start_game_ui,
-        outputs=[game_stats, game_board, message_display]
+        outputs=[game_stats, game_board, message_display, move_history]
     )
     
     reset_btn.click(
         fn=reset_game_ui,
-        outputs=[game_stats, game_board, message_display]
+        outputs=[game_stats, game_board, message_display, move_history]
     )
     
     suggest_btn.click(
@@ -561,11 +784,54 @@ with gr.Blocks(title="Water Sort Puzzle", theme=gr.themes.Soft()) as demo:
         outputs=[suggestion_display, message_display]
     )
     
+    undo_btn.click(
+        fn=undo_move_ui,
+        outputs=[game_stats, game_board, message_display, move_history]
+    )
+    
+    ai_speed_slider.change(
+        fn=update_ai_speed_ui,
+        inputs=[ai_speed_slider],
+        outputs=[speed_status]
+    )
+    
+    ai_play_btn.click(
+        fn=ai_autoplay_ui,
+        outputs=[game_stats, game_board, message_display, move_history]
+    )
+    
+    ai_stop_btn.click(
+        fn=stop_ai_ui,
+        outputs=[game_stats, game_board, message_display, move_history]
+    )
+    
+    refresh_btn.click(
+        fn=get_current_state,
+        outputs=[game_stats, game_board, message_display, move_history]
+    )
+    
     for i, btn in enumerate(bottle_buttons):
         btn.click(
             fn=lambda idx=i: bottle_click_ui(idx),
-            outputs=[game_stats, game_board, message_display]
+            outputs=[game_stats, game_board, message_display, move_history]
         )
+    
+    # Timer để tự động refresh khi AI đang chạy
+    demo.load(
+        fn=get_current_state,
+        outputs=[game_stats, game_board, message_display, move_history],
+        every=1  # Refresh mỗi 1 giây
+    )
 
 if __name__ == "__main__":
+    # Khởi chạy AI thread
+    def run_ai_background():
+        while True:
+            if game_manager.ai_running:
+                ai_step_loop()
+            time.sleep(0.1)
+    
+    ai_thread = threading.Thread(target=run_ai_background, daemon=True)
+    ai_thread.start()
+    
     demo.launch(share=True)