Spaces:

airabbitX
/

code-simulator

Running

App Files Files Community

airabbitX commited on May 23, 2025

Commit

843c692

verified ·

1 Parent(s): 39bfa61

Create index.html

Browse files

Files changed (1) hide show

index.html +702 -18

index.html CHANGED Viewed

@@ -1,19 +1,703 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
 <html>
+<head>
+    <title>Surf Spot Finder (Animated Workflow Simulation)</title>
+    <style>
+        :root {
+            --primary-color: #00d230; /* theme.primaryColor */
+            --background-color: #FFFFFF; /* theme.backgroundColor */
+            --secondary-background-color: #F0F2F6; /* theme.secondaryBackgroundColor */
+            --text-color: #161616; /* theme.textColor */
+            --font-family: "sans serif", Arial, sans-serif;
+            --sidebar-width: 360px;
+            --border-radius: 6px;
+            --input-border-color: #ccc;
+            --input-focus-border-color: var(--primary-color);
+        }
+        body {
+            display: flex;
+            flex-direction: column;
+            font-family: var(--font-family);
+            background-color: var(--background-color);
+            color: var(--text-color);
+            margin: 0;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .app-header {
+            padding: 10px 20px;
+            background-color: var(--secondary-background-color);
+            border-bottom: 1px solid #ddd;
+            font-size: 1.2em;
+            color: var(--primary-color);
+            text-align: center;
+        }
+        .app-container {
+            display: flex;
+            flex-grow: 1;
+            overflow: hidden;
+        }
+        /* Animation Controls */
+        #animation-controls {
+            padding: 15px 20px;
+            background-color: #e0f7fa;
+            border-bottom: 1px solid #b2ebf2;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        #animation-controls button { background-color: #00796b; }
+        #animation-controls button:hover:not(:disabled) { background-color: #004d40; }
+        #animation-status { font-style: italic; color: #004d40; }
+        /* Sidebar */
+        .sidebar {
+            width: var(--sidebar-width);
+            min-width: var(--sidebar-width);
+            background-color: var(--secondary-background-color);
+            padding: 20px;
+            overflow-y: auto;
+            border-right: 1px solid #ddd;
+        }
+        .sidebar h3 { color: var(--primary-color); margin-top: 0; border-bottom: 1px solid #ddd; padding-bottom: 5px;}
+        .sidebar .st-input-container, .sidebar .st-selectbox-container, .sidebar .st-date-input-container, .sidebar .st-time-input-container, .sidebar .st-checkbox-container {
+            margin-bottom: 18px;
+        }
+        .sidebar label {
+            display: block;
+            margin-bottom: 5px;
+            font-size: 0.9em;
+            font-weight: bold;
+        }
+        .sidebar input[type="text"], .sidebar input[type="number"], .sidebar input[type="date"], .sidebar select {
+            width: 100%;
+            padding: 8px 10px;
+            border-radius: var(--border-radius);
+            border: 1px solid var(--input-border-color);
+            box-sizing: border-box;
+            font-family: var(--font-family);
+        }
+        .sidebar input:focus, .sidebar select:focus {
+            border-color: var(--input-focus-border-color);
+            box-shadow: 0 0 0 2px rgba(0, 210, 48, 0.2);
+            outline: none;
+        }
+        .sidebar .st-button {
+            width: 100%;
+            padding: 10px;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            font-size: 1em;
+            transition: background-color 0.2s;
+        }
+        .sidebar .st-button:hover:not(:disabled) { background-color: #00a020; }
+        .sidebar .st-button:disabled { background-color: #ccc; cursor: not-allowed; }
+        .sidebar .st-expander {
+            border: 1px solid #ddd;
+            border-radius: var(--border-radius);
+            margin-bottom: 15px;
+            background-color: #fff;
+        }
+        .sidebar .st-expander-header {
+            padding: 10px;
+            cursor: pointer;
+            font-weight: bold;
+            border-bottom: 1px solid #eee;
+            display: flex; justify-content: space-between; align-items: center;
+        }
+        .sidebar .st-expander-header::after { content: '▼'; font-size: 0.8em; }
+        .sidebar .st-expander.expanded .st-expander-header::after { content: '▲'; }
+        .sidebar .st-expander-content {
+            padding: 10px;
+            display: none; /* Toggled by JS */
+        }
+        .sidebar .st-expander.expanded .st-expander-content { display: block; }
+        .sidebar .st-data-editor { border: 1px solid #ccc; padding: 5px; min-height: 80px; background-color: #f9f9f9; font-size:0.9em; }
+        /* Main Content Area */
+        .main-content {
+            flex-grow: 1;
+            padding: 25px;
+            overflow-y: auto;
+        }
+        .main-content h1, .main-content h2, .main-content h3 {
+            color: #1B365D; /* From previous simulation, good for headers */
+        }
+        .main-content .st-info, .main-content .st-success, .main-content .st-error, .main-content .st-code, .main-content .st-status {
+            padding: 12px 15px;
+            margin: 15px 0;
+            border-radius: var(--border-radius);
+            border-left-width: 5px;
+            border-left-style: solid;
+        }
+        .main-content .st-info { background-color: #e7f3fe; border-left-color: #2196F3; }
+        .main-content .st-success { background-color: #e8f5e9; border-left-color: #4CAF50; }
+        .main-content .st-error { background-color: #ffebee; border-left-color: #f44336; }
+        .main-content .st-code { background-color: #f5f5f5; border: 1px solid #e0e0e0; padding: 10px; white-space: pre-wrap; font-family: monospace;}
+        .main-content .st-status { background-color: #fff8e1; border-left-color: #ffc107; }
+        .main-content .st-expander {
+            border: 1px solid #ddd; border-radius: var(--border-radius); margin: 20px 0;
+        }
+        .main-content .st-expander-header {
+            padding: 12px 15px; cursor: pointer; font-weight: bold; background-color: #f9f9f9;
+            border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;
+        }
+        .main-content .st-expander-header::after { content: '▼'; font-size: 0.8em; }
+        .main-content .st-expander.expanded .st-expander-header::after { content: '▲'; }
+        .main-content .st-expander-content { padding: 15px; display: none; }
+        .main-content .st-expander.expanded .st-expander-content { display: block; }
+        .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;}
+        .trace-span { border: 1px solid #eee; padding: 10px; margin-bottom: 10px; border-radius: var(--border-radius); }
+        .trace-span-header { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 5px; }
+        .trace-span-status-ok { color: green; }
+        .trace-span-status-error { color: red; }
+        .trace-span-details { font-size: 0.9em; color: #555; white-space: pre-wrap; word-break: break-all;}
+        .evaluation-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+        .progress-bar-container { background-color: #e0e0e0; border-radius: var(--border-radius); overflow: hidden; height: 20px; margin: 5px 0;}
+        .progress-bar { background-color: var(--primary-color); height: 100%; width: 0%; transition: width 0.5s ease-out; }
+        /* Animation specific styles */
+        .sim-focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(0, 210, 48, 0.3) !important; }
+        .sim-active-button { background-color: #00a020 !important; transform: scale(0.98); }
+        .sim-selectbox-option { background-color: #e0ffe0 !important; }
+        .sim-expander-toggle { background-color: #f0f0f0; }
+        .gif-simulation-overlay {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-color: rgba(0,0,0,0.5); color: white;
+            display: flex; flex-direction: column; justify-content: center; align-items: center;
+            z-index: 1000; font-size: 1.5em;
+        }
+        .gif-simulation-overlay .progress-bar-container { width: 50%; margin-top: 20px; }
+    </style>
+</head>
+<body>
+    <div class="app-header">🏄 Surf Spot Finder - Animated Simulation</div>
+    <div id="animation-controls">
+        <button id="start-animation-btn">Run Full Workflow Animation</button>
+        <button id="download-gif-btn">Download GIF (Simulated)</button>
+        <span id="animation-status"></span>
+    </div>
+    <div class="app-container">
+        <div class="sidebar" id="sidebar">
+            <!-- Sidebar content will be rendered here by JS -->
+        </div>
+        <div class="main-content" id="main-content">
+            <!-- Main content will be rendered here by JS -->
+        </div>
+    </div>
+    <script>
+        // --- State Variables ---
+        let simState = {
+            location: "Los Angeles California, US",
+            maxDrivingHours: 2,
+            date: new Date(new Date().setDate(new Date().getDate() + 1)), // Tomorrow
+            time: "09:00",
+            framework: "OPENAI", // Default, assuming AgentFramework.OPENAI.name
+            modelId: "openai/gpt-4.1-mini",
+            evalModelId: "openai/gpt-4o",
+            evalCheckpoints: [
+                { criteria: "Agent considered at least three surf spots", points: 1, id: "cp1" },
+                { criteria: "Agent gathered wind forecasts", points: 1, id: "cp2" },
+            ],
+            runEvaluation: true,
+            // For agent run
+            currentQuery: "",
+            agentTraceSpans: [],
+            finalAgentOutput: "",
+            executionTime: 0,
+            estimatedCost: 0,
+            totalTokens: 0,
+            evaluationResults: null
+        };
+        let isAnimating = false;
+        let currentStatusMessages = [];
+        // --- DOM Elements ---
+        const animationStatusEl = document.getElementById('animation-status');
+        const sidebarEl = document.getElementById('sidebar');
+        const mainContentEl = document.getElementById('main-content');
+        const startAnimationBtn = document.getElementById('start-animation-btn');
+        const downloadGifBtn = document.getElementById('download-gif-btn');
+        // --- Helper & Simulation Functions ---
+        async function simulateDelay(ms) { /* ... as before ... */
+            if (!isAnimating) return;
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+        async function simulateType(element, text, charDelay = 50) { /* ... as before ... */
+             if (!isAnimating) { element.value = text; return; }
+            element.classList.add('sim-focus');
+            element.value = '';
+            for (const char of text) {
+                element.value += char;
+                await simulateDelay(charDelay + Math.random() * 10);
+            }
+            element.classList.remove('sim-focus');
+        }
+        async function simulateClick(buttonElement, actionDelay = 200) { /* ... as before ... */
+            if (!isAnimating) return;
+            buttonElement.classList.add('sim-active-button');
+            await simulateDelay(actionDelay);
+            buttonElement.classList.remove('sim-active-button');
+            await simulateDelay(50);
+        }
+         async function simulateSelect(selectElement, value, displayDelay = 500) {
+            if (!isAnimating) { selectElement.value = value; return; }
+            selectElement.classList.add('sim-focus');
+            // Briefly show each option leading up to the target for visual effect
+            const options = Array.from(selectElement.options);
+            const targetIndex = options.findIndex(opt => opt.value === value);
+            if (targetIndex === -1) {
+                console.warn(`Value ${value} not found in select`);
+                selectElement.value = value; // try to set it anyway
+                selectElement.classList.remove('sim-focus');
+                return;
+            }
+            for (let i = 0; i <= targetIndex; i++) {
+                selectElement.value = options[i].value;
+                options[i].classList.add('sim-selectbox-option');
+                await simulateDelay(50 + Math.random()*20);
+                if (i < targetIndex) options[i].classList.remove('sim-selectbox-option');
+            }
+            await simulateDelay(displayDelay);
+            options[targetIndex].classList.remove('sim-selectbox-option');
+            selectElement.classList.remove('sim-focus');
+        }
+        async function simulateCheckbox(checkboxElement, checked, displayDelay = 300) {
+            if (!isAnimating) { checkboxElement.checked = checked; return; }
+            checkboxElement.classList.add('sim-focus');
+            await simulateDelay(displayDelay / 2);
+            checkboxElement.checked = checked;
+            await simulateDelay(displayDelay / 2);
+            checkboxElement.classList.remove('sim-focus');
+        }
+        async function simulateExpanderToggle(expanderHeaderElement, expand = true) {
+            if (!isAnimating) {
+                const content = expanderHeaderElement.nextElementSibling;
+                expanderHeaderElement.parentElement.classList.toggle('expanded', expand);
+                if (content) content.style.display = expand ? 'block' : 'none';
+                return;
+            }
+            expanderHeaderElement.classList.add('sim-expander-toggle');
+            await simulateDelay(200);
+            const content = expanderHeaderElement.nextElementSibling;
+            expanderHeaderElement.parentElement.classList.toggle('expanded', expand);
+             if (content) content.style.display = expand ? 'block' : 'none';
+            await simulateDelay(200);
+            expanderHeaderElement.classList.remove('sim-expander-toggle');
+        }
+        function downloadFile(filename, content, mimeType) { /* ... as before ... */
+            const blob = new Blob([content], { type: mimeType });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = filename;
+            document.body.appendChild(a);
+            a.click();
+            URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+            if(!isAnimating) alert(`Simulated download: ${filename}`);
+        }
+        // --- UI Rendering Functions ---
+        function renderSidebar() {
+            // Simplified: In a real Streamlit app, these are Python calls. Here, we build HTML.
+            sidebarEl.innerHTML = `
+                <h3>Configuration</h3>
+                <div class="st-input-container">
+                    <label for="sim-location">Enter a location</label>
+                    <input type="text" id="sim-location" value="${simState.location}">
+                    <div id="sim-location-status" style="font-size:0.8em; text-align:right;"></div>
+                </div>
+                <div class="st-input-container">
+                    <label for="sim-maxDrivingHours">Enter the maximum driving hours</label>
+                    <input type="number" id="sim-maxDrivingHours" value="${simState.maxDrivingHours}" min="1">
+                </div>
+                <div style="display: flex; gap: 10px;">
+                    <div class="st-date-input-container" style="flex:2;">
+                        <label for="sim-date">Select a date</label>
+                        <input type="date" id="sim-date" value="${simState.date.toISOString().split('T')[0]}">
+                    </div>
+                    <div class="st-time-input-container" style="flex:1;">
+                        <label for="sim-time">Select a time</label>
+                        <select id="sim-time">
+                            ${Array.from({length: 24}, (_, i) => i).map(h =>
+                                `<option value="${String(h).padStart(2, '0')}:00" ${simState.time === `${String(h).padStart(2, '0')}:00` ? 'selected' : ''}>${String(h).padStart(2, '0')}:00</option>`
+                            ).join('')}
+                        </select>
+                    </div>
+                </div>
+                <div class="st-selectbox-container">
+                    <label for="sim-framework">Select the agent framework to use</label>
+                    <select id="sim-framework">
+                        <option value="ANYAGENT" ${simState.framework === 'ANYAGENT' ? 'selected':''}>ANYAGENT</option>
+                        <option value="OPENAI" ${simState.framework === 'OPENAI' ? 'selected':''}>OPENAI</option>
+                        <option value="LANGCHAIN" ${simState.framework === 'LANGCHAIN' ? 'selected':''}>LANGCHAIN</option>
+                    </select>
+                </div>
+                <div class="st-selectbox-container">
+                    <label for="sim-modelId">Select the model to use</label>
+                    <select id="sim-modelId">
+                        <option value="openai/gpt-4.1-nano" ${simState.modelId === 'openai/gpt-4.1-nano' ? 'selected':''}>openai/gpt-4.1-nano</option>
+                        <option value="openai/gpt-4.1-mini" ${simState.modelId === 'openai/gpt-4.1-mini' ? 'selected':''}>openai/gpt-4.1-mini</option>
+                        <option value="openai/gpt-4o" ${simState.modelId === 'openai/gpt-4o' ? 'selected':''}>openai/gpt-4o</option>
+                    </select>
+                </div>
+                <div class="st-expander" id="sim-eval-expander">
+                    <div class="st-expander-header" onclick="toggleExpander('sim-eval-expander')">Custom Evaluation</div>
+                    <div class="st-expander-content">
+                        <div class="st-selectbox-container">
+                            <label for="sim-evalModelId">Evaluation Model</label>
+                            <select id="sim-evalModelId">
+                               <option value="openai/gpt-4.1-mini" ${simState.evalModelId === 'openai/gpt-4.1-mini' ? 'selected':''}>openai/gpt-4.1-mini</option>
+                               <option value="openai/gpt-4o" ${simState.evalModelId === 'openai/gpt-4o' ? 'selected':''}>openai/gpt-4o</option>
+                            </select>
+                        </div>
+                        <label>Checkpoints (Simplified Edit):</label>
+                        <div class="st-data-editor" id="sim-evalCheckpoints">
+                            ${simState.evalCheckpoints.map(cp => `<div>- ${cp.criteria} (${cp.points} pts) <input type="text" value="${cp.criteria}" data-id="${cp.id}" class="sim-checkpoint-crit"><input type="number" value="${cp.points}" data-id="${cp.id}" class="sim-checkpoint-pts" style="width:50px;"></div>`).join('')}
+                        </div>
+                         <div class="st-checkbox-container">
+                            <input type="checkbox" id="sim-runEvaluation" ${simState.runEvaluation ? 'checked' : ''}>
+                            <label for="sim-runEvaluation">Run Evaluation</label>
+                        </div>
+                    </div>
+                </div>
+                <button class="st-button" id="sim-run-agent-btn">Run Agent 🤖</button>
+            `;
+            // Add event listeners for manual interaction (if not animating)
+            document.getElementById('sim-run-agent-btn').onclick = () => { if (!isAnimating) manualRunAgent(); };
+            // More listeners for inputs can be added if full manual mode is desired
+        }
+        function toggleExpander(expanderId) { // For manual clicks
+            if (isAnimating) return;
+            const expander = document.getElementById(expanderId);
+            expander.classList.toggle('expanded');
+            const content = expander.querySelector('.st-expander-content');
+            if (content) content.style.display = expander.classList.contains('expanded') ? 'block' : 'none';
+        }
+        function renderInitialMainContent() {
+            mainContentEl.innerHTML = `
+                <h1>🏄 Surf Spot Finder</h1>
+                <p>Find the best surfing spots based on your location and preferences! This is a simulation of the <a href="#" target="_blank" rel="noopener noreferrer">[Original Github Repo]</a>.</p>
+                <div class="st-info">👈 Configure your search parameters in the sidebar and click Run Agent to start (or run the full animation)!</div>
+                <h3>🛠️ Available Tools (Simulated)</h3>
+                <div class="st-expander">
+                    <div class="st-expander-header" onclick="toggleExpander(this.parentElement)">🌤️ Weather Tools</div>
+                    <div class="st-expander-content">
+                        <p><strong>get_wind_forecast:</strong> Gets wind conditions for a spot.</p>
+                        <p><strong>get_wave_forecast:</strong> Gets wave conditions for a spot.</p>
+                    </div>
+                </div>
+                <div class="st-expander">
+                    <div class="st-expander-header" onclick="toggleExpander(this.parentElement)">📍 Location Tools</div>
+                    <div class="st-expander-content">
+                        <p><strong>get_area_lat_lon:</strong> Converts area name to lat/lon.</p>
+                        <p><strong>get_surfing_spots:</strong> Finds surf spots near lat/lon.</p>
+                        <p><strong>driving_hours_to_meters:</strong> Converts driving hours to meters.</p>
+                    </div>
+                </div>
+                 <h3>📊 Custom Evaluation</h3>
+                <p>The Surf Spot Finder includes a powerful evaluation system. Configure it in the sidebar!</p>
+            `;
+        }
+        function renderAgentRunView() {
+            let html = `<h2>🔍 Running Surf Spot Finder...</h2>`;
+            html += `<div class="st-code" id="sim-query-display">Query: ${simState.currentQuery}</div>`;
+            html += `<div class="st-status" id="sim-status-display">Agent is running...</div>`;
+            // After run is complete
+            if (simState.finalAgentOutput) {
+                html = `<h2>🏄 Results</h2>`; // Overwrite "Running..."
+                html += `<div class="results-grid">
+                            <div class="st-info">⏱️ Execution Time: ${simState.executionTime.toFixed(2)}s</div>
+                            <div class="st-info">💰 Estimated Cost: $${simState.estimatedCost.toFixed(6)}</div>
+                            <div class="st-info">📦 Total Tokens: ${simState.totalTokens}</div>
+                         </div>`;
+                html += `<h3>Final Output</h3><div class="st-success">${simState.finalAgentOutput}</div>`;
+                html += `<div class="st-expander expanded" id="sim-agent-trace-expander">
+                            <div class="st-expander-header" onclick="toggleExpander('sim-agent-trace-expander')">🧩 Agent Trace</div>
+                            <div class="st-expander-content" id="sim-agent-trace-content">
+                                ${simState.agentTraceSpans.map(span => `
+                                    <div class="trace-span">
+                                        <div class="trace-span-header">
+                                            <span>${span.name}</span>
+                                            <span class="${span.status === 'OK' ? 'trace-span-status-ok' : 'trace-span-status-error'}">● ${span.status}</span>
+                                        </div>
+                                        <div class="trace-span-details">
+                                            ${span.input ? `<strong>Input:</strong> ${JSON.stringify(span.input).substring(0,150)}...<br>` : ''}
+                                            ${span.output ? `<strong>Output:</strong> ${JSON.stringify(span.output).substring(0,150)}...` : ''}
+                                        </div>
+                                    </div>
+                                `).join('')}
+                            </div>
+                         </div>`;
+                if (simState.runEvaluation && simState.evaluationResults) {
+                    const { criteriaResults, overallScore, totalPossiblePoints } = simState.evaluationResults;
+                    html += `<h2>📊 Evaluation Results</h2>
+                             <div class="evaluation-results-grid">
+                                <div><h4>Criteria Results</h4>
+                                    ${criteriaResults.map(cr => `
+                                        <div class="${cr.passed ? 'st-success' : 'st-error'}" style="margin-bottom:5px; padding:8px;">
+                                            ${cr.passed ? '✅' : '❌'} ${cr.criteria} (${cr.points} pts)
+                                        </div>`).join('')}
+                                </div>
+                                <div><h4>Overall Score</h4>
+                                    <h3>${overallScore} / ${totalPossiblePoints}</h3>
+                                    <div class="progress-bar-container"><div class="progress-bar" style="width:${(overallScore/totalPossiblePoints)*100}%"></div></div>
+                                    <strong>${((overallScore/totalPossiblePoints)*100).toFixed(1)}%</strong>
+                                </div>
+                             </div>`;
+                }
+            }
+            mainContentEl.innerHTML = html;
+        }
+        function updateStatusDisplay(message, isRunning = true) {
+            const statusEl = document.getElementById('sim-status-display');
+            if (statusEl) {
+                currentStatusMessages.push(message);
+                if (currentStatusMessages.length > 3) currentStatusMessages.shift(); // Keep last 3
+                statusEl.innerHTML = currentStatusMessages.join('<br>') + (isRunning ? '<br><em>Agent is active...</em>' : '<br><strong>Agent run finished!</strong>');
+                if (!isRunning) statusEl.classList.replace('st-status', 'st-success');
+            }
+        }
+        // --- Core Simulation Logic ---
+        async function manualRunAgent() { // For manual button click
+            if (isAnimating) return;
+            // Gather inputs from DOM
+            simState.location = document.getElementById('sim-location').value;
+            simState.maxDrivingHours = parseInt(document.getElementById('sim-maxDrivingHours').value);
+            simState.date = new Date(document.getElementById('sim-date').value + 'T' + document.getElementById('sim-time').value);
+            simState.framework = document.getElementById('sim-framework').value;
+            simState.modelId = document.getElementById('sim-modelId').value;
+            simState.evalModelId = document.getElementById('sim-evalModelId').value;
+            // Simplified checkpoint reading for manual
+            simState.evalCheckpoints = Array.from(document.querySelectorAll('#sim-evalCheckpoints .sim-checkpoint-crit')).map((inp,idx) => ({
+                id: `cp${idx+1}`,
+                criteria: inp.value,
+                points: parseInt(document.querySelectorAll('#sim-evalCheckpoints .sim-checkpoint-pts')[idx].value) || 1
+            }));
+            simState.runEvaluation = document.getElementById('sim-runEvaluation').checked;
+            await _runAgentLogic();
+        }
+        async function _runAgentLogic() {
+            simState.currentQuery = `Find surf spots near ${simState.location} within ${simState.maxDrivingHours} hours drive for ${simState.date.toDateString()} at ${simState.time}.`;
+            simState.agentTraceSpans = [];
+            simState.finalAgentOutput = "";
+            simState.executionTime = 0;
+            simState.estimatedCost = 0;
+            simState.totalTokens = 0;
+            simState.evaluationResults = null;
+            currentStatusMessages = [];
+            renderAgentRunView(); // Initial view with query and "Running..."
+            const startTime = Date.now();
+            // Simulate agent steps
+            await simulateAgentStep("Tool: get_area_lat_lon", {location: simState.location}, {lat: 36.97, lon: -122.03}, "OK"); // Santa Cruz approx
+            await simulateAgentStep("Tool: driving_hours_to_meters", {hours: simState.maxDrivingHours}, {meters: simState.maxDrivingHours * 50000}, "OK"); // Rough conversion
+            await simulateAgentStep("Tool: get_surfing_spots", {lat: 36.97, lon: -122.03, radius: simState.maxDrivingHours * 50000}, {spots: ["Steamer Lane", "Cowell's Beach", "Pleasure Point"]}, "OK");
+            await simulateAgentStep("Tool: get_wave_forecast", {spot: "Steamer Lane", date: simState.date.toISOString()}, {waveHeight: "4-6ft", period: "12s"}, "OK");
+            await simulateAgentStep("Tool: get_wind_forecast", {spot: "Steamer Lane", date: simState.date.toISOString()}, {speed: "10mph", direction: "NW"}, "OK");
+            simState.finalAgentOutput = `Recommended Spot: Steamer Lane. Forecast for ${simState.date.toDateString()} ${simState.time}: Waves 4-6ft (12s period), Wind 10mph NW. Other options: Cowell's Beach, Pleasure Point.`;
+            simState.executionTime = (Date.now() - startTime) / 1000 + (Math.random() * 2); // Add some randomness
+            simState.estimatedCost = 0.0015 + Math.random() * 0.001;
+            simState.totalTokens = 1200 + Math.floor(Math.random() * 500);
+            updateStatusDisplay("Agent finished processing.", false);
+            if (simState.runEvaluation) {
+                await _runEvaluationLogic();
+            }
+            renderAgentRunView(); // Final render with all results
+        }
+        async function simulateAgentStep(name, input, output, status) {
+            if (!isAnimating && !document.hidden) await simulateDelay(500 + Math.random() * 500); // Only delay if visible and not animating full flow
+            else if (isAnimating) await simulateDelay(300 + Math.random() * 200);
+            const span = { name, input, output, status };
+            simState.agentTraceSpans.push(span);
+            updateStatusDisplay(`Step: ${name} (${status}) - Input: ${JSON.stringify(input).substring(0,30)}... Output: ${JSON.stringify(output).substring(0,30)}...`);
+            if (isAnimating) renderAgentRunView(); // Re-render trace during animation
+        }
+        async function _runEvaluationLogic() {
+            if (isAnimating) await simulateDelay(1000); // Simulate evaluation time
+            let overallScore = 0;
+            let totalPossiblePoints = 0;
+            const criteriaResults = simState.evalCheckpoints.map(cp => {
+                const passed = Math.random() > 0.3; // 70% chance of passing for simulation
+                if (passed) overallScore += cp.points;
+                totalPossiblePoints += cp.points;
+                return { criteria: cp.criteria, points: cp.points, passed };
+            });
+            simState.evaluationResults = { criteriaResults, overallScore, totalPossiblePoints };
+        }
+        // --- Animation Workflow ---
+        startAnimationBtn.addEventListener('click', async () => {
+            if (isAnimating) {
+                isAnimating = false;
+                animationStatusEl.textContent = "Animation stopped by user.";
+                startAnimationBtn.textContent = "Run Full Workflow Animation";
+                document.querySelectorAll('.sidebar button, .sidebar input, .sidebar select').forEach(el => el.disabled = false);
+                return;
+            }
+            isAnimating = true;
+            startAnimationBtn.textContent = "Stop Animation";
+            animationStatusEl.textContent = "Animation running...";
+            document.querySelectorAll('.sidebar button, .sidebar input, .sidebar select').forEach(el => el.disabled = true);
+            startAnimationBtn.disabled = false; // Keep stop button enabled
+            _resetSimStateForAnimation();
+            renderSidebar(); // Initial render for animation
+            renderInitialMainContent();
+            try {
+                await animateFullWorkflow();
+                if (isAnimating) animationStatusEl.textContent = "Animation completed!";
+            } catch (error) {
+                if (isAnimating) {
+                    console.error("Animation error:", error);
+                    animationStatusEl.textContent = "Animation encountered an error: " + error.message;
+                }
+            } finally {
+                isAnimating = false;
+                startAnimationBtn.textContent = "Run Full Workflow Animation";
+                document.querySelectorAll('.sidebar button, .sidebar input, .sidebar select').forEach(el => el.disabled = false);
+                startAnimationBtn.disabled = false;
+            }
+        });
+        function _resetSimStateForAnimation() {
+             simState = { // Reset to defaults
+                location: "", maxDrivingHours: 1, date: new Date(new Date().setDate(new Date().getDate() + 2)), time: "10:00",
+                framework: "ANYAGENT", modelId: "openai/gpt-4o", evalModelId: "openai/gpt-4o",
+                evalCheckpoints: [ { criteria: "Agent used location tool", points: 1, id: "acp1" }, { criteria: "Agent found spots", points: 2, id: "acp2" } ],
+                runEvaluation: true, currentQuery: "", agentTraceSpans: [], finalAgentOutput: "",
+                executionTime: 0, estimatedCost: 0, totalTokens: 0, evaluationResults: null
+            };
+            currentStatusMessages = [];
+        }
+        async function animateFullWorkflow() {
+            animationStatusEl.textContent = "Animating: Sidebar Inputs...";
+            // Location
+            const locationInput = document.getElementById('sim-location');
+            await simulateType(locationInput, "Santa Cruz, California");
+            simState.location = locationInput.value;
+            document.getElementById('sim-location-status').textContent = '✅ Validated'; // Simulate validation
+            await simulateDelay(300);
+            // Max Driving Hours
+            const hoursInput = document.getElementById('sim-maxDrivingHours');
+            await simulateType(hoursInput, "1"); // Type "1"
+            simState.maxDrivingHours = parseInt(hoursInput.value);
+            await simulateDelay(300);
+            // Date & Time (simplified selection for animation)
+            const dateInput = document.getElementById('sim-date');
+            const futureDate = new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString().split('T')[0]; // 3 days in future
+            dateInput.value = futureDate; // Just set it
+            simState.date = new Date(futureDate);
+            dateInput.classList.add('sim-focus'); await simulateDelay(200); dateInput.classList.remove('sim-focus');
+            const timeSelect = document.getElementById('sim-time');
+            await simulateSelect(timeSelect, "10:00");
+            simState.time = timeSelect.value;
+            simState.date.setHours(10,0,0,0); // Update date object with time
+            // Framework & Model
+            await simulateSelect(document.getElementById('sim-framework'), "OPENAI");
+            simState.framework = document.getElementById('sim-framework').value;
+            await simulateSelect(document.getElementById('sim-modelId'), "openai/gpt-4o");
+            simState.modelId = document.getElementById('sim-modelId').value;
+            // Custom Evaluation
+            const evalExpanderHeader = document.getElementById('sim-eval-expander').firstElementChild;
+            await simulateExpanderToggle(evalExpanderHeader, true); // Expand
+            await simulateDelay(200);
+            await simulateSelect(document.getElementById('sim-evalModelId'), "openai/gpt-4o");
+            simState.evalModelId = document.getElementById('sim-evalModelId').value;
+            // Simulate editing a checkpoint
+            const firstCritInput = document.querySelector('#sim-evalCheckpoints .sim-checkpoint-crit');
+            if (firstCritInput) {
+                await simulateType(firstCritInput, "Agent correctly identified tide times");
+                simState.evalCheckpoints[0].criteria = firstCritInput.value;
+            }
+            await simulateCheckbox(document.getElementById('sim-runEvaluation'), true);
+            simState.runEvaluation = true;
+            await simulateDelay(500);
+            await simulateExpanderToggle(evalExpanderHeader, false); // Collapse
+            animationStatusEl.textContent = "Animating: Running Agent...";
+            await simulateClick(document.getElementById('sim-run-agent-btn'));
+            await _runAgentLogic(); // This will handle rendering the main content
+            if (isAnimating) animationStatusEl.textContent = "Animation: Workflow Complete!";
+        }
+        // --- GIF Download Simulation ---
+        downloadGifBtn.addEventListener('click', async () => {
+            if (isAnimating) {
+                alert("Please stop the main animation before simulating GIF download.");
+                return;
+            }
+            animationStatusEl.textContent = "Simulating GIF Download...";
+            downloadGifBtn.disabled = true;
+            const overlay = document.createElement('div');
+            overlay.className = 'gif-simulation-overlay';
+            overlay.innerHTML = `
+                <div>🎥 Simulating GIF Recording...</div>
+                <div class="progress-bar-container" style="width:300px; height: 20px; background: #555;">
+                    <div class="progress-bar" id="gif-sim-progress" style="background: lightgreen; width:0%;"></div>
+                </div>
+                <p style="font-size:0.7em;">(This is a placeholder. Actual GIF generation is complex.)</p>
+            `;
+            document.body.appendChild(overlay);
+            const progressBar = document.getElementById('gif-sim-progress');
+            for (let i = 0; i <= 100; i+=10) {
+                progressBar.style.width = i + '%';
+                await new Promise(r => setTimeout(r, 150));
+            }
+            downloadFile("simulated_animation.txt", "This is a placeholder for an animated GIF of the workflow.\nActual client-side GIF generation of complex animations is computationally intensive.", "text/plain");
+            document.body.removeChild(overlay);
+            animationStatusEl.textContent = "GIF Download Simulation Complete.";
+            downloadGifBtn.disabled = false;
+        });
+        // --- Initial Page Load ---
+        renderSidebar();
+        renderInitialMainContent();
+    </script>
+</body>
+</html>