Update app.py

app.py

@@ -2,16 +2,16 @@ import streamlit as st
 import os
 from connect_four_game import ConnectFour
 from minimax_ai import MinimaxAI
-from llm_explanation import MoveExplainer
+from llm_explanation_hf import MoveExplainer
 
 # Page configuration
 st.set_page_config(
-    page_title="Connect Four AI",
+    page_title="Connect Four AI Pro",
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS with monospace for board
+# Enhanced CSS with modern design
 st.markdown('''
 <style>
     .board-display {
@@ -20,41 +20,132 @@ st.markdown('''
         line-height: 1.4;
         font-size: 16px;
         padding: 20px;
-        background-color: #f8f9fa;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 12px;
+        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+    }
+    .stats-card {
+        background: white;
+        padding: 15px;
         border-radius: 10px;
-        border: 2px solid #667eea;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        margin: 10px 0;
+        border-left: 4px solid #667eea;
+    }
+    .stat-number {
+        font-size: 24px;
+        font-weight: bold;
+        color: #667eea;
+    }
+    .stat-label {
+        font-size: 12px;
+        color: #666;
+        text-transform: uppercase;
+    }
+    .move-card {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        color: white;
+        padding: 20px;
+        border-radius: 12px;
+        margin: 10px 0;
+        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+    }
+    .mode-badge {
+        display: inline-block;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: bold;
+        margin-right: 8px;
+    }
+    .ultra-fast {
+        background: #10b981;
+        color: white;
+    }
+    .balanced {
+        background: #3b82f6;
+        color: white;
+    }
+    .two-player {
+        background: #f59e0b;
+        color: white;
     }
-    .stMetric { background-color: #f0f2f6; padding: 10px; border-radius: 8px; }
-    .move-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
-                 color: white; padding: 20px; border-radius: 10px; margin: 10px 0; }
-    .success-box { background-color: #d4edda; padding: 15px; border-radius: 8px; }
-    .info-box { background-color: #d1ecf1; padding: 15px; border-radius: 8px; }
 </style>
 ''', unsafe_allow_html=True)
 
 # Initialize session state
 if 'game' not in st.session_state:
     st.session_state.game = ConnectFour()
-    st.session_state.ai = MinimaxAI(st.session_state.game, depth=5)
+    st.session_state.ai_mode = "Ultra-Fast"
+    st.session_state.game_mode = "vs AI"
+    st.session_state.ai_ultra = MinimaxAI(st.session_state.game, depth=5)
+    st.session_state.ai_balanced = MinimaxAI(st.session_state.game, depth=6)
 
     hf_token = os.getenv('HF_TOKEN')
-    if hf_token:
-        st.session_state.explainer = MoveExplainer(hf_token=hf_token)
-    else:
-        st.session_state.explainer = None
+    st.session_state.explainer = MoveExplainer(hf_token=hf_token) if hf_token else None
 
     st.session_state.move_history = []
     st.session_state.game_over = False
     st.session_state.winner = None
+    st.session_state.current_player = 1
     st.session_state.hf_token_missing = hf_token is None
 
-# Title
-st.title("🎮 Connect Four AI with Explainability")
-st.markdown("Play against an intelligent AI powered by **Minimax Algorithm** ⚡")
+# Title with mode badge
+col_title1, col_title2 = st.columns([3, 1])
+with col_title1:
+    st.title("🎮 Connect Four AI Pro")
+with col_title2:
+    if st.session_state.game_mode == "vs AI":
+        mode_class = "ultra-fast" if st.session_state.ai_mode == "Ultra-Fast" else "balanced"
+        st.markdown(f'<span class="mode-badge {mode_class}">{st.session_state.ai_mode} AI</span>', 
+                   unsafe_allow_html=True)
+    else:
+        st.markdown('<span class="mode-badge two-player">Two Player</span>', 
+                   unsafe_allow_html=True)
+
+st.markdown("**Advanced Connect Four with AI Analysis & Multiple Modes**")
 
 # Sidebar
-st.sidebar.header("⚙️ Game Controls")
+st.sidebar.header("⚙️ Game Settings")
+
+# Game Mode Selection
+game_mode = st.sidebar.radio(
+    "🎮 Game Mode",
+    ["vs AI", "Two Player"],
+    index=0 if st.session_state.game_mode == "vs AI" else 1
+)
+
+if game_mode != st.session_state.game_mode:
+    st.session_state.game_mode = game_mode
+    st.session_state.game.reset()
+    st.session_state.move_history = []
+    st.session_state.game_over = False
+    st.session_state.current_player = 1
+    st.rerun()
+
+# AI Mode Selection (only for vs AI)
+if st.session_state.game_mode == "vs AI":
+    st.sidebar.markdown("---")
+    st.sidebar.subheader("🤖 AI Difficulty")
+
+    ai_mode = st.sidebar.radio(
+        "Select AI Mode",
+        ["Ultra-Fast ⚡", "Balanced 🎯"],
+        index=0 if st.session_state.ai_mode == "Ultra-Fast" else 1,
+        help="Ultra-Fast: ~200ms, Depth 5\nBalanced: ~400ms, Depth 6, Better analysis"
+    )
+
+    if "Ultra-Fast" in ai_mode:
+        st.session_state.ai_mode = "Ultra-Fast"
+        st.session_state.current_ai = st.session_state.ai_ultra
+    else:
+        st.session_state.ai_mode = "Balanced"
+        st.session_state.current_ai = st.session_state.ai_balanced
 
+st.sidebar.markdown("---")
+
+# Game Controls
 col1, col2 = st.sidebar.columns(2)
 with col1:
     if st.button("🔄 New Game", use_container_width=True):
@@ -62,20 +153,24 @@ with col1:
         st.session_state.move_history = []
         st.session_state.game_over = False
         st.session_state.winner = None
+        st.session_state.current_player = 1
         st.rerun()
 
 with col2:
     if st.button("↩️ Undo", use_container_width=True, 
-                disabled=len(st.session_state.move_history) < 2):
-        if len(st.session_state.move_history) >= 2:
-            st.session_state.game.undo_move(st.session_state.move_history[-1])
-            st.session_state.game.undo_move(st.session_state.move_history[-2])
-            st.session_state.move_history = st.session_state.move_history[:-2]
-            st.session_state.game_over = False
-            st.rerun()
+                disabled=len(st.session_state.move_history) == 0):
+        if st.session_state.game_mode == "vs AI":
+            undo_count = min(2, len(st.session_state.move_history))
+        else:
+            undo_count = 1
 
-search_depth = st.sidebar.slider("🧠 AI Search Depth", 3, 7, 5)
-st.session_state.ai.depth = search_depth
+        for _ in range(undo_count):
+            if st.session_state.move_history:
+                st.session_state.game.undo_move(st.session_state.move_history[-1])
+                st.session_state.move_history.pop()
+
+        st.session_state.game_over = False
+        st.rerun()
 
 st.sidebar.markdown("---")
 
@@ -84,34 +179,43 @@ with st.sidebar.expander("📋 Game Rules"):
     st.markdown('''
     **Objective:** Get 4 pieces in a row!
 
-    **Rules:**
-    - Drop your piece in any column
-    - Pieces fall to the lowest spot
+    **How to Play:**
+    - Select a column (0-6)
+    - Piece falls to lowest spot
     - First to 4 in a row wins
 
     **Winning Patterns:**
     - Horizontal ←→
     - Vertical ↕️
     - Diagonal ↗️ ↖️
+
+    **Game Modes:**
+    - **vs AI:** Play against intelligent AI
+    - **Two Player:** Play with a friend
     ''')
 
-# Concepts
+# AI Concepts
 with st.sidebar.expander("🧠 AI Concepts"):
     st.markdown('''
-    **Minimax:** AI evaluates all moves recursively
-
-    **Alpha-Beta:** Prunes bad branches (saves 80%+ time)
-
-    **Heuristic:** Scores positions without playing to end
-
-    **Search Depth:** Moves ahead AI thinks (5 = 3 moves)
+    **Ultra-Fast AI ⚡**
+    - Speed: ~200ms
+    - Depth: 5 (analyzes 3 moves ahead)
+    - Best for quick games
+
+    **Balanced AI 🎯**
+    - Speed: ~400ms
+    - Depth: 6 (analyzes 4 moves ahead)
+    - Better strategic analysis
+    - Richer explanations
+
+    **Two Player Mode**
+    - AI analyzes each move
+    - Shows strategy for both players
+    - Learn from AI insights
     ''')
 
 st.sidebar.markdown("---")
-st.sidebar.write(f"**Moves:** {len(st.session_state.move_history)}")
-
-if st.session_state.hf_token_missing:
-    st.warning("⚠️ HF Token not set. Using fallback explanations.")
+st.sidebar.write(f"**Moves Played:** {len(st.session_state.move_history)}")
 
 # Main area
 col1, col2 = st.columns([2, 3])
@@ -119,84 +223,193 @@ col1, col2 = st.columns([2, 3])
 with col1:
     st.subheader("🎯 Game Board")
 
-    # Display board with monospace formatting
+    # Display board
     board_str = st.session_state.game.board_to_string()
     st.markdown(f'<div class="board-display">{board_str}</div>', unsafe_allow_html=True)
 
     if not st.session_state.game_over:
-        st.markdown("### Your Move")
+        if st.session_state.game_mode == "Two Player":
+            player_name = "Player 1 (🔴)" if st.session_state.current_player == 1 else "Player 2 (🟡)"
+            st.markdown(f"### {player_name}'s Turn")
+        else:
+            st.markdown("### Your Move (🔴)")
+
         valid_cols = st.session_state.game.get_valid_moves()
 
         if valid_cols:
-            human_move = st.selectbox("Column:", valid_cols)
+            human_move = st.selectbox("Choose column:", valid_cols, key="move_select")
 
             if st.button("📍 Play", use_container_width=True):
-                st.session_state.game.make_move(human_move, player=1)
+                # Make move
+                current_player = st.session_state.current_player if st.session_state.game_mode == "Two Player" else 1
+                st.session_state.game.make_move(human_move, player=current_player)
                 st.session_state.move_history.append(human_move)
 
-                if st.session_state.game.check_winner(1):
+                # Analyze move with AI
+                if st.session_state.game_mode == "Two Player":
+                    ai_analysis = st.session_state.ai_balanced.get_best_move()
+                    st.session_state.latest_move_analysis = {
+                        'player': current_player,
+                        'move': human_move,
+                        'analysis': ai_analysis
+                    }
+
+                # Check winner
+                if st.session_state.game.check_winner(current_player):
                     st.session_state.game_over = True
-                    st.session_state.winner = "Human"
+                    if st.session_state.game_mode == "Two Player":
+                        st.session_state.winner = f"Player {current_player}"
+                    else:
+                        st.session_state.winner = "Human"
                 elif st.session_state.game.is_board_full():
                     st.session_state.game_over = True
                     st.session_state.winner = "Draw"
                 else:
-                    with st.spinner("🤖 AI thinking..."):
-                        ai_result = st.session_state.ai.get_best_move()
-
-                    st.session_state.game.make_move(ai_result['move'], player=2)
-                    st.session_state.move_history.append(ai_result['move'])
-                    st.session_state.latest_ai_move = ai_result
-
-                    if st.session_state.game.check_winner(2):
-                        st.session_state.game_over = True
-                        st.session_state.winner = "AI"
-                    elif st.session_state.game.is_board_full():
-                        st.session_state.game_over = True
-                        st.session_state.winner = "Draw"
+                    # AI move (only in vs AI mode)
+                    if st.session_state.game_mode == "vs AI":
+                        with st.spinner(f"🤖 {st.session_state.ai_mode} AI thinking..."):
+                            ai_result = st.session_state.current_ai.get_best_move()
+
+                        st.session_state.game.make_move(ai_result['move'], player=2)
+                        st.session_state.move_history.append(ai_result['move'])
+                        st.session_state.latest_ai_move = ai_result
+
+                        if st.session_state.game.check_winner(2):
+                            st.session_state.game_over = True
+                            st.session_state.winner = "AI"
+                        elif st.session_state.game.is_board_full():
+                            st.session_state.game_over = True
+                            st.session_state.winner = "Draw"
+                    else:
+                        # Switch player in Two Player mode
+                        st.session_state.current_player = 2 if current_player == 1 else 1
 
                 st.rerun()
 
 with col2:
     st.subheader("🤖 AI Analysis")
 
-    if hasattr(st.session_state, 'latest_ai_move'):
+    # Display analysis based on mode
+    if st.session_state.game_mode == "vs AI" and hasattr(st.session_state, 'latest_ai_move'):
         ai_move = st.session_state.latest_ai_move
 
+        # Get explanation
         if st.session_state.explainer:
             explanation = st.session_state.explainer.explain_move(ai_move)
         else:
             explanation = {
                 'explanation': f"Column {ai_move['move']} scores {ai_move['score']} points.",
-                'threat_analysis': "; ".join(ai_move['threats']) if ai_move['threats'] else "Good move",
-                'key_insight': "Strategic move",
+                'threat_analysis': "; ".join(ai_move['threats']) if ai_move['threats'] else "Strategic move",
+                'key_insight': "Good positioning",
                 'success': False
             }
 
-        st.markdown(f"**Move:** Column {ai_move['move']} | **Score:** {ai_move['score']}")
-        st.success(explanation['explanation'])
-        st.warning(f"**Threats:** {explanation['threat_analysis']}")
-
-        with st.expander("📊 Algorithm Stats"):
-            col1, col2, col3 = st.columns(3)
-            with col1:
-                st.metric("Explored", f"{ai_move['nodes_explored']:,}")
-            with col2:
-                st.metric("Pruned", f"{ai_move['nodes_pruned']:,}")
-            with col3:
-                st.metric("Efficiency", f"{ai_move['pruning_efficiency']:.0f}%")
-
-            col4, col5 = st.columns(2)
-            with col4:
-                st.metric("Depth", ai_move['depth'])
-            with col5:
-                st.metric("Time", f"{ai_move['time_ms']:.0f}ms")
-
+        # Move card
+        st.markdown(f'''
+        <div class="move-card">
+            <h3>🎯 AI Played: Column {ai_move['move']}</h3>
+            <p><strong>Evaluation Score:</strong> {ai_move['score']} points</p>
+            <p><strong>Mode:</strong> {st.session_state.ai_mode}</p>
+        </div>
+        ''', unsafe_allow_html=True)
+
+        st.success(f"💡 **Why This Move:**\n{explanation['explanation']}")
+        st.warning(f"⚔️ **Strategic Analysis:**\n{explanation['threat_analysis']}")
+        st.info(f"🔑 **Key Insight:**\n{explanation['key_insight']}")
+
+        # Professional stats UI
+        st.markdown("### 📊 Algorithm Performance")
+
+        stat_col1, stat_col2, stat_col3 = st.columns(3)
+        with stat_col1:
+            st.markdown(f'''
+            <div class="stats-card">
+                <div class="stat-number">{ai_move['nodes_explored']:,}</div>
+                <div class="stat-label">Nodes Explored</div>
+            </div>
+            ''', unsafe_allow_html=True)
+        with stat_col2:
+            st.markdown(f'''
+            <div class="stats-card">
+                <div class="stat-number">{ai_move['nodes_pruned']:,}</div>
+                <div class="stat-label">Nodes Pruned</div>
+            </div>
+            ''', unsafe_allow_html=True)
+        with stat_col3:
+            st.markdown(f'''
+            <div class="stats-card">
+                <div class="stat-number">{ai_move['pruning_efficiency']:.1f}%</div>
+                <div class="stat-label">Efficiency</div>
+            </div>
+            ''', unsafe_allow_html=True)
+
+        stat_col4, stat_col5 = st.columns(2)
+        with stat_col4:
+            st.markdown(f'''
+            <div class="stats-card">
+                <div class="stat-number">{ai_move['depth']}</div>
+                <div class="stat-label">Search Depth</div>
+            </div>
+            ''', unsafe_allow_html=True)
+        with stat_col5:
+            st.markdown(f'''
+            <div class="stats-card">
+                <div class="stat-number">{ai_move['time_ms']:.0f}ms</div>
+                <div class="stat-label">Response Time</div>
+            </div>
+            ''', unsafe_allow_html=True)
+
+    elif st.session_state.game_mode == "Two Player" and hasattr(st.session_state, 'latest_move_analysis'):
+        analysis = st.session_state.latest_move_analysis
+        player = analysis['player']
+        player_name = f"Player {player} ({'🔴' if player == 1 else '🟡'})"
+
+        st.markdown(f'''
+        <div class="move-card">
+            <h3>📊 {player_name} Move Analysis</h3>
+            <p><strong>Column Played:</strong> {analysis['move']}</p>
+        </div>
+        ''', unsafe_allow_html=True)
+
+        ai_data = analysis['analysis']
+
+        # AI's recommended move vs actual
+        if ai_data['move'] == analysis['move']:
+            st.success(f"✅ **Excellent Move!** AI would play the same (Column {ai_data['move']})")
+        else:
+            st.warning(f"🤔 **Alternative:** AI suggests Column {ai_data['move']} (Score: {ai_data['score']})")
+
+        # Threats
+        if ai_data['threats']:
+            st.info(f"⚔️ **Strategic Info:** {'; '.join(ai_data['threats'])}")
+
+        # Stats
+        st.markdown("### 📊 Position Analysis")
+
+        stat_col1, stat_col2 = st.columns(2)
+        with stat_col1:
+            st.markdown(f'''
+            <div class="stats-card">
+                <div class="stat-number">{ai_data['nodes_explored']:,}</div>
+                <div class="stat-label">Positions Analyzed</div>
+            </div>
+            ''', unsafe_allow_html=True)
+        with stat_col2:
+            st.markdown(f'''
+            <div class="stats-card">
+                <div class="stat-number">{ai_data['time_ms']:.0f}ms</div>
+                <div class="stat-label">Analysis Time</div>
+            </div>
+            ''', unsafe_allow_html=True)
+
+# Game outcome
 if st.session_state.game_over:
     st.markdown("---")
     if st.session_state.winner == "Human":
-        st.success("🎉 You won!")
+        st.success("🎉 **You Won! Congratulations!**")
     elif st.session_state.winner == "AI":
-        st.info("🤖 AI won!")
+        st.info(f"🤖 **{st.session_state.ai_mode} AI Won! Well played!**")
+    elif "Player" in st.session_state.winner:
+        st.success(f"🎉 **{st.session_state.winner} Won!**")
     else:
-        st.info("🤝 Draw!")
+        st.info("🤝 **It's a Draw! Board is full.**")