Performance of Open-Source Agents on GAIA-Validation Benchmark.
| " + html.escape(cell.text) + " | " else: html_table += "" + html.escape(cell.text) + " | " html_table += "
|---|
${formatted}无性能数据
'; return; } const html = `无执行流程数据
'; updateNavigationList([]); return; } // 确保每个步骤都是独立的顶级元素 const stepsContainer = document.createElement('div'); stepsContainer.className = 'execution-steps-container'; data.forEach((step, index) => { const stepElement = document.createElement('div'); stepElement.innerHTML = createStepHTML(step, index); stepsContainer.appendChild(stepElement.firstElementChild); }); elements.executionFlow.innerHTML = ''; elements.executionFlow.appendChild(stepsContainer); // 更新导航列表 updateNavigationList(data); // 绑定事件监听器 bindStepEventListeners(); } function createStepHTML(step, index) { const roleClass = step.role === 'user' ? 'user-message' : step.role === 'tool' ? 'tool-message' : step.role === 'system' ? 'system-message' : 'assistant-message'; const agentClass = step.agent.includes('browser') ? 'browser-agent' : ''; // 渲染内容 const renderedPreview = renderContent(step.content_preview); const renderedFullContent = renderContent(step.full_content); return `无Spans数据
'; return; } const html = `无步骤日志数据
'; return; } const html = `暂无步骤
'; return; } const navigationHTML = data.map((step, index) => { const summary = truncateText(step.content_preview, 50); const toolsInfo = step.tool_calls.length > 0 ? ` (${step.tool_calls.length}工具)` : ''; const browserInfo = step.browser_session ? ' [浏览器]' : ''; let html = ` `; // 添加browser子步骤 if (step.browser_flow && step.browser_flow.length > 0) { html += ` `; } return html; }).join(''); elements.navigationList.innerHTML = navigationHTML; } function scrollToStep(stepIndex) { const stepElement = document.getElementById(`step-${stepIndex}`); if (stepElement) { stepElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); // 更新活跃的导航项 updateActiveNavItem(stepIndex); // 如果步骤是收起的，自动展开 const stepContent = document.getElementById(`step-content-${stepIndex}`); if (stepContent && !stepContent.classList.contains('show')) { const collapseInstance = new bootstrap.Collapse(stepContent, { toggle: false }); collapseInstance.show(); } } } function scrollToBrowserStep(parentIndex, browserStepId) { const browserStepElement = document.getElementById(`browser-step-${parentIndex}-${browserStepId}`); if (browserStepElement) { browserStepElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); // 更新活跃的导航项 updateActiveNavItem(parentIndex, browserStepId); // 确保父步骤是展开的 const stepContent = document.getElementById(`step-content-${parentIndex}`); if (stepContent && !stepContent.classList.contains('show')) { const collapseInstance = new bootstrap.Collapse(stepContent, { toggle: false }); collapseInstance.show(); } } } function toggleBrowserNav(stepIndex, event) { event.stopPropagation(); // 阻止事件冒泡 const browserNavElement = document.getElementById(`browser-nav-${stepIndex}`); const toggleIcon = event.target.closest('.browser-toggle').querySelector('i'); if (browserNavElement.classList.contains('expanded')) { browserNavElement.classList.remove('expanded'); toggleIcon.className = 'fas fa-chevron-down'; } else { browserNavElement.classList.add('expanded'); toggleIcon.className = 'fas fa-chevron-up'; } } function updateActiveNavItem(activeIndex, browserStepId = null) { // 移除所有活跃状态 const navItems = elements.navigationList.querySelectorAll('.nav-item'); navItems.forEach(item => item.classList.remove('active')); if (browserStepId) { // 激活browser子步骤 const browserNavItem = elements.navigationList.querySelector(`[data-step-index="${activeIndex}"][data-browser-step-id="${browserStepId}"]`); if (browserNavItem) { browserNavItem.classList.add('active'); } } else { // 激活主步骤 const activeItem = elements.navigationList.querySelector(`[data-step-index="${activeIndex}"]:not([data-browser-step-id])`); if (activeItem) { activeItem.classList.add('active'); } } } // 监听滚动事件，自动更新导航激活状态 let scrollTimeout; function handleScroll() { clearTimeout(scrollTimeout); scrollTimeout = setTimeout(() => { if (!currentFlowData) return; const steps = document.querySelectorAll('.execution-step'); const browserSteps = document.querySelectorAll('.browser-step'); const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const windowHeight = window.innerHeight; let activeIndex = 0; let activeBrowserStepId = null; let minDistance = Infinity; // 检查browser子步骤 browserSteps.forEach((browserStep) => { const rect = browserStep.getBoundingClientRect(); const distance = Math.abs(rect.top - windowHeight / 3); if (distance < minDistance && rect.top < windowHeight * 0.7) { minDistance = distance; const id = browserStep.id; const matches = id.match(/browser-step-(\d+)-(\d+)/); if (matches) { activeIndex = parseInt(matches[1]); activeBrowserStepId = parseInt(matches[2]); } } }); // 如果没有找到活跃的browser步骤，检查主步骤 if (!activeBrowserStepId) { steps.forEach((step, index) => { const rect = step.getBoundingClientRect(); const distance = Math.abs(rect.top - windowHeight / 3); if (distance < minDistance && rect.top < windowHeight * 0.7) { minDistance = distance; activeIndex = index; activeBrowserStepId = null; } }); } updateActiveNavItem(activeIndex, activeBrowserStepId); }, 100); } // 绑定滚动事件 window.addEventListener('scroll', handleScroll); ================================================ FILE: apps/visualize-trace/templates/index.html ================================================Please load a trace file first
Please load a trace file first
Please load a trace file first
Please load a trace file first
Please load a trace file first
Please load a trace file first