Update app.py

app.py

@@ -5,6 +5,7 @@ from connect_four_game import ConnectFour
 from minimax_ai import MinimaxAI
 from llm_explanation import MoveExplainer
 from report_generator import generate_match_report
+import random
 
 st.set_page_config(
     page_title="Connect Four AI Pro",
@@ -83,7 +84,7 @@ st.markdown('''
         margin-top: 1.5rem !important;
     }
     
-    /* Game Board Container - Fixed to prevent overlap */
+    /* Game Board Container */
     .board-container {
         background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
         border-radius: 20px;
@@ -118,6 +119,36 @@ st.markdown('''
         position: static !important;
     }
     
+    /* Learning Insights Container */
+    .learning-insights {
+        background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+        border-radius: 12px;
+        padding: 1rem;
+        margin-top: 1rem;
+        border-left: 4px solid #00D4FF;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    }
+    
+    .insight-title {
+        color: #00D4FF !important;
+        font-family: 'Orbitron', sans-serif !important;
+        font-weight: 700 !important;
+        font-size: 0.95rem !important;
+        text-shadow: 0 0 8px rgba(0, 212, 255, 0.5) !important;
+        margin-bottom: 0.8rem !important;
+    }
+    
+    .insight-item {
+        background: rgba(0, 0, 0, 0.2);
+        border-left: 3px solid #00D4FF;
+        padding: 0.6rem 0.8rem;
+        margin: 0.5rem 0;
+        border-radius: 6px;
+        color: #E0E0E0 !important;
+        font-size: 0.9rem !important;
+        line-height: 1.4 !important;
+    }
+    
     /* Buttons - Gaming Style */
     .stButton button {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
@@ -393,6 +424,25 @@ st.markdown('''
 </style>
 ''', unsafe_allow_html=True)
 
+# Academic insights from the learning guides
+LEARNING_INSIGHTS = [
+    "💡 Minimax: Plans moves ahead like a chess master, evaluating all possibilities recursively",
+    "🚀 Alpha-Beta Pruning: Eliminates 60-70% of unnecessary branches, making deep search practical",
+    "🎮 Perfect Information: Connect Four has no hidden cards—AI can calculate optimal play",
+    "🌳 Search Depth: Each level deeper exponentially increases positions (7^d growth)",
+    "⚔️ Threat Detection: AI identifies winning opportunities AND blocks opponent threats",
+    "⏱️ Terminal States: When AI finds winning move immediately (depth 0), no deeper search needed",
+    "🔄 Recursion: Minimax calls itself to evaluate all game futures before deciding",
+    "📊 Big-O Notation: O(b^d) without pruning, O(b^d/2) with pruning—theory meets practice",
+    "🎯 Game Theory: Minimax chooses moves that maximize AI score, minimize opponent score",
+    "💾 State Management: Session state persists game across page refreshes—no data loss",
+    "🏆 Optimal Play: Depth 5 proves strong enough to block your best strategies",
+    "⏳ Time Trade-off: Deeper search = more thinking but slower response time",
+    "🤖 Heuristics: Evaluation function rates positions without exploring every possibility",
+    "🌐 DFS vs BFS: Game AI uses depth-first search (memory efficient) not breadth-first",
+    "📈 Exponential Growth: Why depth 8 takes 10x longer than depth 5",
+]
+
 # Initialize Session State
 if 'game' not in st.session_state:
     st.session_state.game = ConnectFour()
@@ -416,6 +466,7 @@ if 'game' not in st.session_state:
     st.session_state.last_ai_algo_perf = None
     st.session_state.last_p1_algo_perf = None
     st.session_state.last_p2_algo_perf = None
+    st.session_state.current_insight_index = 0
 
 # Header
 col_title1, col_title2 = st.columns([3, 1])
@@ -542,6 +593,9 @@ if st.session_state.game_mode == "vs AI":
         board_str = st.session_state.game.board_to_string()
         st.markdown(f'<div class="board-container"><div class="board-display">{board_str}</div></div>', unsafe_allow_html=True)
         
+        # Learning Insights Section
+        st.markdown(f'<div class="learning-insights"><div class="insight-title">📚 QUICK INSIGHT</div><div class="insight-item">{random.choice(LEARNING_INSIGHTS)}</div></div>', unsafe_allow_html=True)
+        
         # Column Selection
         st.markdown("### 🎲 SELECT YOUR MOVE")
         cols = st.columns(7)
@@ -707,6 +761,9 @@ else:  # Two Player Mode
         board_str = st.session_state.game.board_to_string()
         st.markdown(f'<div class="board-container"><div class="board-display">{board_str}</div></div>', unsafe_allow_html=True)
         
+        # Learning Insights Section
+        st.markdown(f'<div class="learning-insights"><div class="insight-title">📚 QUICK INSIGHT</div><div class="insight-item">{random.choice(LEARNING_INSIGHTS)}</div></div>', unsafe_allow_html=True)
+        
         # Current Player Indicator
         current_player_symbol = "🔴 RED" if st.session_state.current_player == 1 else "🟡 YELLOW"
         st.markdown(f'<div class="info-card"><h3 style="text-align: center;">Current Turn: {current_player_symbol}</h3></div>', unsafe_allow_html=True)
@@ -861,4 +918,4 @@ if st.session_state.game_over and st.session_state.move_history_detailed:
         file_name=f"connect_four_match_report_{timestamp}.txt",
         mime="text/plain",
         use_container_width=True
-    )
+    )