Update app.py

app.py

@@ -4,12 +4,11 @@ from llama_cpp import Llama
 from huggingface_hub import hf_hub_download
 import numpy as np
 from typing import List
-import time
 
 model = Llama(
     model_path=hf_hub_download(
-        repo_id=os.environ.get("REPO_ID", "Lyte/QuadConnect2.5-1.5B-v0.1.0b"),
-        filename=os.environ.get("MODEL_FILE", "unsloth.Q8_0.gguf"),
+        repo_id=os.environ.get("REPO_ID", "Lyte/QuadConnect2.5-1.5B-v0.1.0b"), #"Lyte/QuadConnect2.5-0.5B-v0.0.9b"),#"Lyte/QuadConnect2.5-0.5B-v0.0.8b"), #"Lyte/QuadConnect2.5-0.5B-v0.0.6b"), #"Lyte/QuadConnect-Llama-1B-v0.0.7b"),#"
+        filename=os.environ.get("MODEL_FILE", "unsloth.Q8_0.gguf"), #"quadconnect.Q8_0.gguf"),
     ),
     n_ctx=16384
 )
@@ -48,9 +47,9 @@ def extract_xml_move(text: str) -> str:
         return match.group(1)
     return ""
 
-def extract_reasoning(text: str) -> str:
+def extract_xml_reasoning(text: str) -> str:
     """
-    Extract the reasoning part from the XML response.
+    Extracts the reasoning section from the XML format.
     """
     import re
     match = re.search(r'<reasoning>(.*?)</reasoning>', text, re.DOTALL)
@@ -302,9 +301,7 @@ def create_interface():
         margin: 15px 0;
         font-family: monospace;
         min-height: 100px;
-        max-height: 400px;
-        overflow-y: auto;
-        white-space: pre-wrap;
+        color: white;
     }
     .reasoning-box {
         border-left: 4px solid #2196F3;
@@ -312,6 +309,7 @@ def create_interface():
         margin: 10px 0;
         background: #22004d;
         border-radius: 0 10px 10px 0;
+        color: white;
     }
     #column-buttons {
         display: flex;
@@ -328,8 +326,12 @@ def create_interface():
       display: block;
     }
     .thinking-indicator {
-      color: #ffc107;
-      font-style: italic;
+        color: #ffc107;
+        font-style: italic;
+    }
+    .move-highlight {
+        font-weight: bold;
+        color: #4CAF50;
     }
     """
 
@@ -370,7 +372,7 @@ def create_interface():
                 info="Lower values make AI more deterministic, higher values more creative"
             )
 
-        def handle_player_move(col, temperature=0.8):
+        def handle_move(col, temperature=0.8):
             if game.game_over:
                 return [
                     render_board(game.board),
@@ -402,49 +404,17 @@ def create_interface():
             
             # Use the new game state formatting
             game_state = game.format_game_state()
-            print(game_state)
             
-            # Prepare for AI's turn
-            reasoning_html = '''
-            <div id="ai-reasoning">
-                <div class="reasoning-box">
-                    <p><strong>🤔 Reasoning:</strong></p>
-                    <p class="thinking-indicator">AI is thinking...</p>
-                </div>
-            </div>
-            '''
+            # Initialize the reasoning display with a "thinking" message
+            reasoning_html = '<div id="ai-reasoning"><p class="thinking-indicator">Thinking...</p></div>'
+            yield [render_board(game.board), "AI is thinking...", reasoning_html]
             
-            return [
-                render_board(game.board),
-                "AI is thinking...",
-                reasoning_html
-            ]
-        
-        def process_ai_response(temperature=0.8):
-            if game.game_over or game.current_player != 2:
-                return [
-                    render_board(game.board),
-                    "Your turn!" if not game.game_over else "Game is over! Click New Game to play again.",
-                    reasoning_display.value
-                ]
-            
-            game_state = game.format_game_state()
-            
-            # Start streaming response
+            # Prepare to stream AI's response
             full_response = ""
-            reasoning_content = ""
-            move_str = ""
+            current_reasoning = ""
             
-            # Begin HTML
-            reasoning_html = '''
-            <div id="ai-reasoning">
-                <div class="reasoning-box">
-                    <p><strong>🤔 Reasoning:</strong></p>
-                    <p>
-            '''
-            
-            # Create streaming session
-            response_stream = model.create_chat_completion(
+            # Get AI response with streaming
+            for chunk in model.create_chat_completion(
                 messages=[
                     {"role": "system", "content": SYSTEM_PROMPT},
                     {"role": "user", "content": game_state}
@@ -452,97 +422,93 @@ def create_interface():
                 temperature=temperature,
                 top_p=0.95,
                 max_tokens=1024,
-                stream=True
-            )
-            
-            # Process stream
-            collected_text = ""
-            for chunk in response_stream:
+                stream=True  # Enable streaming!
+            ):
                 if 'choices' in chunk and len(chunk['choices']) > 0:
-                    delta = chunk['choices'][0]['delta']
-                    if 'content' in delta:
-                        content = delta['content']
-                        if content:
-                            collected_text += content
-                            full_response += content
-                            
-                            # Extract and update reasoning
-                            if "<reasoning>" in collected_text and "</reasoning>" not in collected_text:
-                                # Still collecting reasoning
-                                parts = collected_text.split("<reasoning>")
-                                if len(parts) > 1:
-                                    reasoning_content = parts[1]
-                                    current_html = reasoning_html + reasoning_content + '</p>'
-                                    if not move_str:
-                                        current_html += '</div></div>'
-                                    yield [
-                                        render_board(game.board),
-                                        "AI is thinking...",
-                                        current_html
-                                    ]
-                            
-                            # Check for complete reasoning
-                            if "<reasoning>" in collected_text and "</reasoning>" in collected_text:
-                                reasoning_content = extract_reasoning(collected_text)
-                            
-                            # Check for move
-                            new_move = extract_xml_move(collected_text)
-                            if new_move and not move_str:
-                                move_str = new_move
-                                current_html = reasoning_html + reasoning_content + '</p>'
-                                current_html += f'<p><strong>📍 Move chosen:</strong> Column {move_str.upper()}</p>'
-                                current_html += '</div></div>'
-                                yield [
-                                    render_board(game.board),
-                                    "AI is making a move...",
-                                    current_html
-                                ]
+                    content = chunk['choices'][0].get('delta', {}).get('content', '')
+                    if content:
+                        full_response += content
+                        
+                        # Try to extract current reasoning for display
+                        try:
+                            # Update the displayed reasoning as it comes in
+                            current_reasoning = extract_xml_reasoning(full_response)
+                            if current_reasoning:
+                                # Format reasoning for display
+                                reasoning_html = f'''
+                                <div id="ai-reasoning">
+                                    <div class="reasoning-box">
+                                        <p><strong>🤔 Reasoning:</strong></p>
+                                        <p>{current_reasoning}</p>
+                                        <p class="thinking-indicator">Deciding on next move...</p>
+                                    </div>
+                                </div>
+                                '''
+                                yield [render_board(game.board), "AI is thinking...", reasoning_html]
+                        except:
+                            # If we can't extract reasoning yet, just show what we have
+                            reasoning_html = f'''
+                            <div id="ai-reasoning">
+                                <div class="reasoning-box">
+                                    <p><strong>🤔 Reasoning:</strong></p>
+                                    <p class="thinking-indicator">Analyzing the board...</p>
+                                </div>
+                            </div>
+                            '''
+                            yield [render_board(game.board), "AI is thinking...", reasoning_html]
             
-            # Final formatting
-            final_reasoning_html = f'''
-            <div id="ai-reasoning">
-                <div class="reasoning-box">
-                    <p><strong>🤔 Reasoning:</strong></p>
-                    <p>{reasoning_content if reasoning_content else "AI couldn't provide clear reasoning."}</p>
-                    <p><strong>📍 Move chosen:</strong> Column {move_str.upper() if move_str else "?"}</p>
-                </div>
-            </div>
-            '''
-            
-            # Make AI move
-            if move_str:
+            # Process the complete response
+            try:
+                reasoning = extract_xml_reasoning(full_response)
+                move_str = extract_xml_move(full_response)
+                
+                if not move_str:
+                    raise ValueError("Invalid move format from AI")
+                
                 ai_col = game.parse_ai_move(move_str)
                 
-                if ai_col != -1:
-                    success, _ = game.make_move(ai_col)
-                    if success:
-                        # Check for AI winner
-                        winner = game.check_winner()
-                        if winner == 2:
-                            game.game_over = True
-                            yield [
-                                render_board(game.board),
-                                "🤖 AI wins! Better luck next time!",
-                                final_reasoning_html
-                            ]
-                            return
-                        else:
-                            # AI made a valid move but didn't win
-                            game.current_player = 1
-                            yield [
-                                render_board(game.board), 
-                                "Your turn!", 
-                                final_reasoning_html
-                            ]
-                            return
+                if ai_col == -1:
+                    raise ValueError("Invalid move format from AI")
+                
+                # Format final reasoning with move for display
+                reasoning_html = f'''
+                <div id="ai-reasoning">
+                    <div class="reasoning-box">
+                        <p><strong>🤔 Reasoning:</strong></p>
+                        <p>{reasoning}</p>
+                        <p><strong>📍 Move chosen:</strong> <span class="move-highlight">Column {move_str.upper()}</span></p>
+                    </div>
+                </div>
+                '''
+                
+                # Make the AI's move
+                success, _ = game.make_move(ai_col)
+                if success:
+                    # Check for AI winner
+                    winner = game.check_winner()
+                    if winner == 2:
+                        game.game_over = True
+                        return [
+                            render_board(game.board),
+                            "🤖 AI wins! Better luck next time!",
+                            reasoning_html
+                        ]
+                else:
+                    return [
+                        render_board(game.board),
+                        "AI made invalid move! You win by default!",
+                        '<div id="ai-reasoning">AI made an invalid move!</div>'
+                    ]
+            except Exception as e:
+                game.game_over = True
+                return [
+                    render_board(game.board),
+                    "AI error occurred! You win by default!",
+                    f'<div id="ai-reasoning">Error: {str(e)}</div>'
+                ]
             
-            # If we get here, something went wrong with the AI move
-            game.game_over = True
-            yield [
-                render_board(game.board),
-                "AI made an invalid move! You win by default!",
-                '<div id="ai-reasoning">AI made an invalid move or provided an invalid response!</div>'
-            ]
+            game.current_player = 1
+            return [render_board(game.board), "Your turn!", reasoning_html]
 
         def reset_game():
             game.board = np.zeros((6, 7))
@@ -558,20 +524,13 @@ def create_interface():
 
         # Event handlers
         for i, btn in enumerate(col_buttons):
-            # First handle player move
             btn.click(
-                fn=handle_player_move,
+                fn=handle_move,
                 inputs=[
                     gr.Number(value=i, visible=False),
                     temperature_slider
                 ],
-                outputs=[board_display, status, reasoning_display],
-                #queue=False  # Process player move immediately
-            ).then(  # Then process AI response with streaming
-                fn=process_ai_response,
-                inputs=[temperature_slider],
-                outputs=[board_display, status, reasoning_display],
-                #streaming=True  # Enable streaming for AI response
+                outputs=[board_display, status, reasoning_display]
             )
         
         reset_btn.click(