Update app.py

app.py

@@ -1,7 +1,5 @@
-# app.py - Final Polished Version
 import streamlit as st
 import os
-import time
 from datetime import datetime
 from connect_four_game import ConnectFour
 from minimax_ai import MinimaxAI
@@ -15,7 +13,7 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Enhanced CSS with animations and better styling
+# Enhanced CSS
 st.markdown('''
 <style>
     .board-display {
@@ -84,32 +82,6 @@ st.markdown('''
     .ultra-fast { background: #10b981; color: white; }
     .balanced { background: #3b82f6; color: white; }
     .two-player { background: #f59e0b; color: white; }
-    
-    /* Winner popup animation */
-    @keyframes confetti {
-        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
-        100% { transform: translateY(1000px) rotate(720deg); opacity: 0; }
-    }
-    @keyframes slideDown {
-        from { transform: translateY(-100%); opacity: 0; }
-        to { transform: translateY(0); opacity: 1; }
-    }
-    .winner-popup {
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        padding: 40px 60px;
-        border-radius: 20px;
-        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-        z-index: 9999;
-        animation: slideDown 0.5s ease-out;
-        text-align: center;
-        font-size: 32px;
-        font-weight: bold;
-    }
 </style>
 ''', unsafe_allow_html=True)
 
@@ -166,17 +138,18 @@ if game_mode != st.session_state.game_mode:
     st.session_state.move_count = 0
     st.rerun()
 
-# AI Mode (vs AI only)
+# AI Mode
 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)
+                               index=0 if st.session_state.ai_mode == "Ultra-Fast" else 1,
+                               help="Ultra-Fast: ~200ms | Balanced: ~400ms, deeper analysis")
     
     st.session_state.ai_mode = "Ultra-Fast" if "Ultra-Fast" in ai_mode else "Balanced"
     st.session_state.current_ai = st.session_state.ai_ultra if st.session_state.ai_mode == "Ultra-Fast" else st.session_state.ai_balanced
     
-    # Depth slider for AI mode
+    # Depth slider
     st.sidebar.markdown("---")
     st.sidebar.subheader("🎚️ Search Depth")
     if st.session_state.ai_mode == "Ultra-Fast":
@@ -227,14 +200,12 @@ with col2:
 
 st.sidebar.markdown("---")
 
-# Additional features
+# Game Stats
 st.sidebar.subheader("📊 Game Stats")
 st.sidebar.write(f"**Moves Played:** {st.session_state.move_count}")
 if st.session_state.game_mode == "Two Player":
-    p1_moves = len(st.session_state.player1_analyses)
-    p2_moves = len(st.session_state.player2_analyses)
-    st.sidebar.write(f"**Player 1 Moves:** {p1_moves}")
-    st.sidebar.write(f"**Player 2 Moves:** {p2_moves}")
+    st.sidebar.write(f"**Player 1:** {len(st.session_state.player1_analyses)}")
+    st.sidebar.write(f"**Player 2:** {len(st.session_state.player2_analyses)}")
 
 st.sidebar.markdown("---")
 
@@ -250,12 +221,24 @@ with st.sidebar.expander("📋 Rules"):
     st.markdown('''
     **Objective:** Get 4 in a row!
     
-    **Patterns:** ←→ ↕️ ↗️ ↖️
+    **Patterns:** Horizontal ←→, Vertical ↕️, Diagonal ↗️ ↖️
     
     **Players:** 🔴 Red, 🟡 Yellow
     ''')
 
-# Main game area
+# AI Concepts
+with st.sidebar.expander("🧠 AI Concepts"):
+    st.markdown('''
+    **Minimax:** AI evaluates all possible moves
+    
+    **Alpha-Beta:** Prunes bad branches (saves 80%+ time)
+    
+    **Heuristic:** Scores positions intelligently
+    
+    **Search Depth:** Moves ahead AI thinks
+    ''')
+
+# Main area
 col1, col2 = st.columns([2, 3])
 
 with col1:
@@ -353,47 +336,98 @@ with col1:
                 st.rerun()
 
 with col2:
-    st.subheader("🤖 Analysis & Insights")
+    st.subheader("🤖 AI Analysis & Insights")
     
     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 FULL 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 "Strategic"
+                'threat_analysis': "; ".join(ai_move['threats']) if ai_move['threats'] else "Strategic move",
+                'key_insight': "Good positioning",
+                'success': False
             }
         
-        st.markdown(f'<div class="move-card"><h3>🎯 AI Played: Column {ai_move["move"]}</h3>'
-                   f'<p><strong>Score:</strong> {ai_move["score"]} points</p></div>', 
-                   unsafe_allow_html=True)
-        st.success(f"💡 **Strategy:** {explanation['explanation']}")
+        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)
+        
+        # FULL analysis display (like before)
+        st.success(f"💡 **Why This Move:**\n{explanation['explanation']}")
+        
+        if explanation.get('threat_analysis'):
+            st.warning(f"⚔️ **Threat Analysis:**\n{explanation['threat_analysis']}")
+        
+        if explanation.get('key_insight'):
+            st.info(f"🔑 **Strategic Insight:**\n{explanation['key_insight']}")
+        
+        # Complete 5 metrics
+        st.markdown("### 📊 Algorithm Performance")
         
-        st.markdown("### 📊 Performance Metrics")
         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>'
-                       f'<div class="stat-label">Explored</div></div>', unsafe_allow_html=True)
+            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>'
-                       f'<div class="stat-label">Pruned</div></div>', unsafe_allow_html=True)
+            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["time_ms"]:.0f}ms</div>'
-                       f'<div class="stat-label">Time</div></div>', unsafe_allow_html=True)
+            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)
+        
+        if not explanation.get('success', True):
+            st.info("ℹ️ Using fallback explanation (HF API unavailable)")
     
     elif st.session_state.game_mode == "Two Player":
-        # Separate sections for each player
+        # Separate player sections
         if st.session_state.player1_analyses:
             st.markdown("### 🔴 Player 1 Analysis")
             latest_p1 = st.session_state.player1_analyses[-1]
             st.markdown('<div class="player-section player1-section">', unsafe_allow_html=True)
             st.write(f"**Last Move:** Column {latest_p1['column']}")
             if latest_p1['recommendation']['is_optimal']:
-                st.success("✅ Excellent Move!")
+                st.success("✅ Excellent Move! Matches AI recommendation")
             else:
-                st.warning(f"🤔 AI suggests Column {latest_p1['recommendation']['suggested_column']}")
+                st.warning(f"🤔 AI suggests Column {latest_p1['recommendation']['suggested_column']} (Score difference: {latest_p1['recommendation']['score_diff']})")
+            
+            if latest_p1['analysis']['threats']:
+                st.info(f"⚔️ **Threats:** {', '.join(latest_p1['analysis']['threats'])}")
             st.markdown('</div>', unsafe_allow_html=True)
         
         if st.session_state.player2_analyses:
@@ -402,9 +436,12 @@ with col2:
             st.markdown('<div class="player-section player2-section">', unsafe_allow_html=True)
             st.write(f"**Last Move:** Column {latest_p2['column']}")
             if latest_p2['recommendation']['is_optimal']:
-                st.success("✅ Excellent Move!")
+                st.success("✅ Excellent Move! Matches AI recommendation")
             else:
-                st.warning(f"🤔 AI suggests Column {latest_p2['recommendation']['suggested_column']}")
+                st.warning(f"🤔 AI suggests Column {latest_p2['recommendation']['suggested_column']} (Score difference: {latest_p2['recommendation']['score_diff']})")
+            
+            if latest_p2['analysis']['threats']:
+                st.info(f"⚔️ **Threats:** {', '.join(latest_p2['analysis']['threats'])}")
             st.markdown('</div>', unsafe_allow_html=True)
 
 # Winner popup
@@ -422,11 +459,11 @@ if st.session_state.show_winner_popup and st.session_state.game_over:
     
     st.session_state.show_winner_popup = False
 
-# Game over - show report download
+# Game over - report download
 if st.session_state.game_over:
     st.markdown("---")
     st.markdown("### 📄 Download Match Report")
-    st.info("📥 Get a detailed analysis of this match")
+    st.info("📥 Get a detailed analysis of this match including move-by-move breakdown")
     
     report = generate_match_report(
         st.session_state.game_mode,