// Enhanced story steps with educational content const storySteps = [ { type: "System Setup", icon: "⚙️", color: "#8b5cf6", label: "Setup", title: "Agent vs Simple LLM", description: "Understanding what makes this a ReAct Agent, not just a chatbot.", highlights: [ "🔧 Can use external tools (search, weather API, etc.)", "🔄 Takes actions based on observations", "💭 Reasons about its next steps", "📊 Adjusts strategy based on results", "✅ Verifies information before answering" ], agentState: { current_goal: "Initialize ReAct Agent", completed_steps: [], available_tools: ["search_destinations", "get_weather", "find_hotels", "check_events"], tool_calls_made: 0, tokens_used: 0, decision_confidence: "N/A" }, systemPrompt: "You are a ReAct agent. For each step:\n1. Thought: Analyze what you need\n2. Action: Choose and execute a tool\n3. Observation: Process the results\n4. Repeat until task complete" }, { type: "Reasoning", icon: "🧠", color: "#a78bfa", label: "Reason", title: "Initial Reasoning Phase", thought: "I need to help plan a weekend trip. Let me break down what information I need to gather.", description: "The agent begins by understanding the request and formulating a strategy.", reasoning_steps: [ "Identify available destinations within reasonable distance", "Check weather conditions for the weekend", "Evaluate activities and attractions", "Consider accommodation options" ], next_action: "I'll start by searching for destinations", agentState: { current_goal: "Plan weekend trip to France", completed_steps: ["task_analysis"], available_tools: ["search_destinations", "get_weather", "find_hotels", "check_events"], tool_calls_made: 0, tokens_used: 145, decision_confidence: "Medium - Need more data" }, systemPrompt: "Current context: User wants weekend trip\nPhase: Planning\nNext: Gather destination options" }, { type: "Action", icon: "🔧", color: "#6ee7b7", label: "Act", title: "Tool Selection & Execution", thought: "I should search for popular weekend destinations near the user's location in France.", description: "Agent selects the most appropriate tool and executes it with specific parameters.", tool_selection_reason: "Need baseline destination options before checking specific conditions", tool_call: { name: "search_destinations", parameters: { location: "France", radius_km: 800, trip_type: "weekend", min_rating: 4.0 }, expected_output: "List of destinations with details" }, agentState: { current_goal: "Find suitable destinations", completed_steps: ["task_analysis", "tool_selection"], available_tools: ["search_destinations", "get_weather", "find_hotels", "check_events"], tool_calls_made: 1, tokens_used: 287, decision_confidence: "High - Clear next step" } }, { type: "Observation", icon: "👁️", color: "#93c5fd", label: "Observe", title: "Processing Tool Results", thought: "Great! I found several interesting options. Now I need to evaluate them based on weather and activities.", description: "Agent receives and analyzes the search results to inform next decisions.", observation: { destinations_found: 4, results: [ "Normandy - Historic sites, D-Day beaches", "Loire Valley - Castles, wine tours", "Lyon - Gastronomy, museums", "Nice - Beaches, coastal views" ], quality_score: "High", processing_notes: "All destinations meet minimum criteria" }, agentState: { current_goal: "Evaluate destination options", completed_steps: ["task_analysis", "tool_selection", "initial_search"], available_tools: ["search_destinations", "get_weather", "find_hotels", "check_events"], tool_calls_made: 1, tokens_used: 412, decision_confidence: "Medium - Need weather data" } }, { type: "Reasoning", icon: "🧠", color: "#a78bfa", label: "Reason", title: "Mid-Process Analysis", thought: "I have good destination options. The user mentioned good weather is important. I should check forecasts for each location.", description: "Agent analyzes intermediate results and plans the next logical step.", reasoning_steps: [ "All destinations are viable based on distance and ratings", "Weather will be a key differentiator", "Should check this weekend's specific forecast", "May need to also verify special events" ], next_action: "Get weather forecasts for all four destinations", agentState: { current_goal: "Compare destinations by weather", completed_steps: ["task_analysis", "tool_selection", "initial_search", "mid_analysis"], available_tools: ["search_destinations", "get_weather", "find_hotels", "check_events"], tool_calls_made: 1, tokens_used: 523, decision_confidence: "High - Clear evaluation criteria" } }, { type: "Action", icon: "🔧", color: "#6ee7b7", label: "Act", title: "Weather Data Collection", thought: "Let me get weather forecasts for this weekend for all four destinations.", description: "Agent uses weather API to gather forecast data for informed decision-making.", tool_call: { name: "get_weather", parameters: { locations: ["Normandy", "Loire Valley", "Lyon", "Nice"], dates: ["2024-01-20", "2024-01-21"], metrics: ["temperature", "precipitation", "wind"] }, expected_output: "Weather conditions for each location" }, agentState: { current_goal: "Gather weather data", completed_steps: ["task_analysis", "tool_selection", "initial_search", "mid_analysis", "weather_check"], available_tools: ["search_destinations", "get_weather", "find_hotels", "check_events"], tool_calls_made: 2, tokens_used: 678, decision_confidence: "High - Gathering final data" } }, { type: "Observation", icon: "👁️", color: "#93c5fd", label: "Observe", title: "Weather Analysis Results", thought: "Perfect! Loire Valley has the best weather this weekend - sunny and warm. Let me verify there are no issues.", description: "Agent processes weather data and identifies the optimal destination.", observation: { weather_summary: { "Normandy": "Rain likely (80%), 15°C", "Loire Valley": "Sunny, 24°C, light breeze", "Lyon": "Cloudy, 18°C", "Nice": "Windy (40km/h), 20°C" }, best_option: "Loire Valley", confidence: "Very High" }, agentState: { current_goal: "Finalize recommendation", completed_steps: ["task_analysis", "tool_selection", "initial_search", "mid_analysis", "weather_check", "weather_analysis"], available_tools: ["search_destinations", "get_weather", "find_hotels", "check_events"], tool_calls_made: 2, tokens_used: 834, decision_confidence: "Very High - Clear winner" } }, { type: "Error Recovery", icon: "🔄", color: "#ef4444", label: "Retry", title: "Handling API Failure", thought: "The hotel search API timed out. Let me try an alternative approach or retry with different parameters.", description: "Demonstrating how agents handle errors and recover gracefully.", error: { tool: "find_hotels", error_type: "API Timeout", error_message: "Connection timeout after 30 seconds" }, recovery_strategy: "Retry with smaller date range, then fall back to cached data if needed", retry_action: { name: "find_hotels", parameters: { location: "Loire Valley", dates: ["2024-01-20"], max_results: 5 } }, agentState: { current_goal: "Recover from hotel API failure", completed_steps: ["task_analysis", "tool_selection", "initial_search", "mid_analysis", "weather_check", "weather_analysis", "error_recovery"], available_tools: ["search_destinations", "get_weather", "find_hotels", "check_events"], tool_calls_made: 4, tokens_used: 967, decision_confidence: "High - Have backup plan" } }, { type: "Final Answer", icon: "✅", color: "#f59e0b", label: "Answer", title: "Final Recommendation", thought: "Based on my analysis of destinations, weather, and available activities, I have a clear recommendation.", description: "Agent provides final recommendation with complete reasoning chain.", final_answer: { destination: "Loire Valley, France", reasons: [ "🌞 Best weather: Sunny, 24°C perfect for outdoor activities", "🏰 Amazing attractions: Château de Chambord, vineyards", "🍷 Wine tasting tours available", "🚴 Great cycling routes along the river", "🏨 Confirmed hotel availability" ], confidence: "95%", alternative: "Lyon (if preferring city experience)" }, agentState: { current_goal: "Task Complete", completed_steps: ["task_analysis", "tool_selection", "initial_search", "mid_analysis", "weather_check", "weather_analysis", "error_recovery", "hotel_search", "final_recommendation"], available_tools: ["search_destinations", "get_weather", "find_hotels", "check_events"], tool_calls_made: 4, tokens_used: 1243, decision_confidence: "Very High - Data-driven recommendation" } }, { type: "Summary", icon: "📊", color: "#22c55e", label: "Learn", title: "What Makes ReAct Powerful", description: "Key takeaways about ReAct agents and their advantages.", key_points: [ "✅ Combines reasoning with action-taking", "✅ Uses external tools for real information", "✅ Self-corrects when errors occur", "✅ Provides transparent decision process", "✅ More reliable than pure text generation" ], comparison: { regular_llm: "Would guess: 'Nice might be good for beaches'", react_agent: "Verified: 'Loire Valley has best weather (24°C, sunny) per API data'" }, agentState: { current_goal: "Education Complete", completed_steps: ["Full ReAct cycle demonstrated"], available_tools: ["All tools demonstrated"], tool_calls_made: 4, tokens_used: 1243, decision_confidence: "Task Successfully Completed" } } ]; // Global variables let currentStep = 0; let isPlaying = false; let animationInterval; let memoryItems = []; // Generate step indicator function generateStepIndicator() { const container = document.getElementById('step-indicator'); container.innerHTML = ''; storySteps.forEach((step, index) => { // Add step box const stepBox = document.createElement('div'); stepBox.className = 'step-box'; if (step.type === 'Error Recovery') { stepBox.className += ' error'; } stepBox.id = `step-${index}`; stepBox.innerHTML = `

${step.icon}

${step.label}

`; stepBox.addEventListener('click', () => { if (index <= Math.max(...Array.from(document.querySelectorAll('.step-box.completed')).map(el => parseInt(el.id.split('-')[1]))) || index === 0) { currentStep = index; updateDisplay(); } }); container.appendChild(stepBox); // Add arrow (except after last step) if (index < storySteps.length - 1) { const arrow = document.createElement('div'); arrow.className = 'step-arrow'; arrow.id = `arrow-${index}`; arrow.textContent = '→'; container.appendChild(arrow); } }); } // Update display function function updateDisplay() { const step = storySteps[currentStep]; const progress = ((currentStep + 1) / storySteps.length) * 100; // Update progress bar document.getElementById('progress-fill').style.width = `${progress}%`; // Update step indicators storySteps.forEach((_, index) => { const stepBox = document.getElementById(`step-${index}`); const arrow = document.getElementById(`arrow-${index}`); stepBox.classList.remove('active', 'completed'); if (arrow) arrow.classList.remove('active'); if (index === currentStep) { stepBox.classList.add('active'); if (arrow) arrow.classList.add('active'); } else if (index < currentStep) { stepBox.classList.add('completed'); if (arrow) arrow.classList.add('active'); } }); // Build step content HTML let contentHTML = `

${step.icon}

Step ${currentStep + 1} - ${step.type}

${step.title}

${step.description}

`; // Add highlights for setup step if (step.highlights) { contentHTML += `

        What makes this an Agent:
        
          ${step.highlights.map(h => `${h}
`).join('')}

`; } // Add thought bubble if (step.thought) { contentHTML += `

💭 Agent thinks: ${step.thought} ${step.reasoning_steps ? `

Reasoning steps:

${r}

` : ''} ${step.next_action ? `

Next: ${step.next_action}

` : ''}

`; } // Add tool call for action steps if (step.tool_call) { contentHTML += `

🔧 Tool Selection: ${step.tool_selection_reason ? `

${step.tool_selection_reason}

` : ''}

${step.tool_call.name}(

${JSON.stringify(step.tool_call.parameters, null, 2)}

)

${step.tool_call.expected_output ? `

Expected: ${step.tool_call.expected_output}

` : ''}

`; } // Add observation box if (step.observation) { const obs = step.observation; contentHTML += `

👁️ Observation:

${typeof obs === 'string' ? obs : ` ${obs.destinations_found ? `

Found ${obs.destinations_found} destinations:

` : ''} ${obs.results ? `

${r}

` : ''} ${obs.weather_summary ? `

Weather forecast:

${loc}: ${weather}

` : ''} ${obs.best_option ? `

Best option: ${obs.best_option}

` : ''} ${obs.confidence ? `

Confidence: ${obs.confidence}

` : ''} `}

`; // Add to memory if (!memoryItems.some(item => item.step === currentStep + 1)) { memoryItems.push({ step: currentStep + 1, type: step.type, summary: obs.best_option || obs.results?.[0] || "Data processed" }); } } // Add error recovery box if (step.error) { contentHTML += `

❌ Error Encountered:

Tool: ${step.error.tool}
Error: ${step.error.error_message}

Recovery Strategy: ${step.recovery_strategy}

${step.retry_action ? `

Retrying with adjusted parameters...

` : ''}

`; } // Add final answer if (step.final_answer) { const answer = step.final_answer; contentHTML += `

🎯 Recommendation: ${answer.destination}

${r}

Confidence: ${answer.confidence}
Alternative: ${answer.alternative}

`; } // Add summary if (step.key_points) { contentHTML += `

🎓 Key Learning Points:

${point.substring(0, 2)} ${point.substring(2)}

${step.comparison ? `

Comparison:

Regular LLM: ${step.comparison.regular_llm}
ReAct Agent: ${step.comparison.react_agent}

` : ''}

`; } contentHTML += `

`; // Update step display document.getElementById('step-display').innerHTML = contentHTML; // Update current phase document.getElementById('current-phase').textContent = step.type; // Update agent state if (step.agentState) { document.getElementById('json-state').textContent = JSON.stringify(step.agentState, null, 2); } // Update system prompt if (step.systemPrompt) { document.getElementById('prompt-content').textContent = step.systemPrompt; } // Update tools panel if (step.agentState && step.agentState.available_tools) { const toolsContent = document.getElementById('tools-content'); toolsContent.innerHTML = step.agentState.available_tools.map(tool => { let className = 'tool-item'; if (step.tool_call && step.tool_call.name === tool) { className += ' active'; } else if (step.agentState.tool_calls_made > 0) { className += ' used'; } else { className += ' inactive'; } return `

${tool}

`; }).join(''); } // Update working memory if (memoryItems.length > 0) { const memoryHTML = memoryItems.map((item, i) => `

Step ${item.step} (${item.type}): ${item.summary}

` ).join(''); document.getElementById('memory-content').innerHTML = memoryHTML; } // Update active panels document.querySelectorAll('.state-panel').forEach(panel => panel.classList.remove('active')); if (step.type === 'Reasoning') { document.getElementById('state-panel').classList.add('active'); document.getElementById('prompt-panel').classList.add('active'); } else if (step.type === 'Action') { document.getElementById('tools-panel').classList.add('active'); } else if (step.type === 'Observation') { document.getElementById('memory-panel').classList.add('active'); } else if (step.type === 'Error Recovery') { document.getElementById('state-panel').classList.add('active'); document.getElementById('tools-panel').classList.add('active'); } else if (step.type === 'System Setup') { document.getElementById('prompt-panel').classList.add('active'); document.getElementById('tools-panel').classList.add('active'); } // Update controls document.getElementById('prev-btn').disabled = currentStep === 0; document.getElementById('next-btn').disabled = currentStep === storySteps.length - 1; // Update play button const playBtn = document.getElementById('play-pause-btn'); const playBtnIcon = playBtn.querySelector('span:first-child'); const playBtnText = playBtn.querySelector('span:last-child'); if (currentStep === storySteps.length - 1 && !isPlaying) { playBtnText.textContent = 'Replay'; playBtnIcon.textContent = '🔄'; } else if (!isPlaying) { playBtnText.textContent = 'Play'; playBtnIcon.textContent = '▶️'; } } // Control functions function nextStep() { if (currentStep < storySteps.length - 1) { currentStep++; updateDisplay(); } else if (currentStep === storySteps.length - 1) { resetAnimation(); togglePlayPause(); } } function prevStep() { if (currentStep > 0) { currentStep--; updateDisplay(); } } function resetAnimation() { currentStep = 0; isPlaying = false; memoryItems = []; clearInterval(animationInterval); const playBtn = document.getElementById('play-pause-btn'); playBtn.querySelector('span:first-child').textContent = '▶️'; playBtn.querySelector('span:last-child').textContent = 'Play'; updateDisplay(); } function togglePlayPause() { const playBtn = document.getElementById('play-pause-btn'); const playBtnIcon = playBtn.querySelector('span:first-child'); const playBtnText = playBtn.querySelector('span:last-child'); if (isPlaying) { clearInterval(animationInterval); playBtnIcon.textContent = '▶️'; playBtnText.textContent = 'Play'; } else { if (currentStep === storySteps.length - 1) { resetAnimation(); } animationInterval = setInterval(() => { nextStep(); if (currentStep === storySteps.length - 1) { clearInterval(animationInterval); isPlaying = false; playBtnIcon.textContent = '🔄'; playBtnText.textContent = 'Replay'; } }, 4000); // Slower to allow reading playBtnIcon.textContent = '⏸️'; playBtnText.textContent = 'Pause'; } isPlaying = !isPlaying; } // Modal functions function showModal(modalId) { document.getElementById(modalId).classList.add('show'); } function hideModal(modalId) { document.getElementById(modalId).classList.remove('show'); } // Event listeners document.getElementById('play-pause-btn').addEventListener('click', togglePlayPause); document.getElementById('next-btn').addEventListener('click', nextStep); document.getElementById('prev-btn').addEventListener('click', prevStep); document.getElementById('reset-btn').addEventListener('click', resetAnimation); document.getElementById('help-btn').addEventListener('click', () => showModal('help-modal')); document.getElementById('compare-btn').addEventListener('click', () => showModal('compare-modal')); document.getElementById('close-modal').addEventListener('click', () => hideModal('help-modal')); document.getElementById('close-compare').addEventListener('click', () => hideModal('compare-modal')); // Close modals when clicking outside window.addEventListener('click', (e) => { if (e.target.classList.contains('modal')) { e.target.classList.remove('show'); } }); // Keyboard shortcuts document.addEventListener('keydown', (e) => { switch(e.key) { case ' ': e.preventDefault(); togglePlayPause(); break; case 'ArrowRight': nextStep(); break; case 'ArrowLeft': prevStep(); break; case 'r': resetAnimation(); break; case 'h': showModal('help-modal'); break; case 'c': showModal('compare-modal'); break; case 'Escape': document.querySelectorAll('.modal').forEach(modal => { modal.classList.remove('show'); }); break; } }); // Touch gesture support let touchStartX = 0; let touchEndX = 0; document.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }, { passive: true }); document.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }, { passive: true }); function handleSwipe() { const swipeThreshold = 50; const diff = touchEndX - touchStartX; if (Math.abs(diff) > swipeThreshold) { if (diff > 0) { prevStep(); } else { nextStep(); } } } // Initialize on load document.addEventListener('DOMContentLoaded', () => { generateStepIndicator(); updateDisplay(); }); // Handle orientation change window.addEventListener('orientationchange', () => { setTimeout(() => { updateDisplay(); }, 100); });

Applications