Hugging Face's logo

Spaces:
smolagents
/
computer-agent
Paused

App Files Community
17
computer-agent / templates /viewer.html
lvwerra's picture
lvwerra HF Staff
add vis
e781603
raw
history blame
30.6 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Computer Agent Evaluation Viewer</title>
<style>
/* CSS styles here */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1, h2, h3 {
color: #333;
}
select, input, button {
padding: 8px 12px;
margin: 5px 0;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #4a6cf7;
color: white;
cursor: pointer;
border: none;
}
button:hover {
background-color: #3a5ce5;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.row {
display: flex;
margin-bottom: 20px;
}
.col {
flex: 1;
padding: 0 10px;
}
.image-viewer {
width: 100%;
max-height: 500px;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
.image-viewer img {
max-width: 100%;
max-height: 450px;
display: block;
margin: 0 auto;
}
.image-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
}
.nav-buttons {
display: flex;
gap: 10px;
}
.step {
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
overflow: hidden;
}
.step-header {
background-color: #f0f0f0;
padding: 10px;
font-weight: bold;
cursor: pointer;
display: flex;
justify-content: space-between;
}
.step-content {
padding: 15px;
white-space: pre-wrap;
font-family: monospace;
background-color: #f9f9f9;
max-height: 300px;
overflow-y: auto;
}
.hidden {
display: none;
}
.status-success {
color: #22c55e;
font-weight: bold;
}
.status-failure {
color: #ef4444;
font-weight: bold;
}
.tabs {
display: flex;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
.tab {
padding: 10px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab.active {
border-bottom-color: #4a6cf7;
font-weight: bold;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
pre {
background-color: #f0f0f0;
padding: 10px;
border-radius: 4px;
overflow-x: auto;
white-space: pre-wrap;
}
.error-message {
background-color: #fee2e2;
color: #b91c1c;
padding: 10px;
border-radius: 4px;
margin: 10px 0;
}
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>Computer Agent Evaluation Viewer</h1>
<!-- Path and Eval Selection -->
<div style="margin-bottom: 20px; padding: 15px; background-color: #f0f0f0; border-radius: 8px;">
<h2>Load Evaluation Data</h2>
<div style="display: flex; gap: 10px; margin-top: 10px;">
<input type="text" id="base-path" placeholder="Base directory path (leave empty for default)"
style="flex-grow: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
<button id="refresh-evals-btn">Refresh</button>
</div>
<div style="margin-top: 10px;">
<label for="eval-select">Select Evaluation:</label>
<select id="eval-select" style="min-width: 300px;"></select>
</div>
<div id="load-status" style="margin-top: 10px; font-style: italic;"></div>
</div>
<!-- Example and Run Selectors -->
<div class="row">
<div class="col">
<label for="example-select">Select Example:</label>
<select id="example-select">
<option value="">-- Select Example --</option>
</select>
</div>
<div class="col">
<label for="run-select">Select Run:</label>
<select id="run-select" disabled>
<option value="">-- Select Run --</option>
</select>
</div>
</div>
<!-- Task & Status Display -->
<div id="run-details" class="hidden">
<div>
<h2>Task</h2>
<pre id="task-text"></pre>
</div>
<div>
<h2>Run Status</h2>
<div id="status-display"></div>
</div>
<!-- Tabs -->
<div class="tabs">
<div class="tab active" data-tab="screenshots">Screenshots</div>
<div class="tab" data-tab="agent-trace">Agent Trace</div>
<div class="tab" data-tab="raw-json">Raw JSON</div>
</div>
<!-- Screenshots Tab -->
<div id="screenshots-tab" class="tab-content active">
<div id="no-images" class="hidden">
<p>No screenshots available for this run.</p>
</div>
<div id="image-container" class="image-viewer hidden">
<img id="current-image" src="" alt="Screenshot">
<p id="image-caption" class="text-center"></p>
</div>
<div class="image-controls hidden" id="image-controls">
<div class="nav-buttons">
<button id="prev-image">Previous</button>
<span id="image-counter">0 / 0</span>
<button id="next-image">Next</button>
</div>
<input type="range" id="image-slider" min="0" max="0" value="0" style="width: 100%">
</div>
</div>
<!-- Agent Trace Tab -->
<div id="agent-trace-tab" class="tab-content">
<div id="agent-steps"></div>
</div>
<!-- Raw JSON Tab -->
<div id="raw-json-tab" class="tab-content">
<div id="json-loading-indicator" class="hidden">
<p>Loading metadata... <span class="loading"></span></p>
</div>
<div id="json-error" class="error-message hidden"></div>
<pre id="raw-json"></pre>
</div>
</div>
</div>
<script>
// Application state
const appState = {
basePath: '',
evalId: null,
currentExampleId: null,
currentRunId: null,
currentImages: [],
currentImageIndex: 0,
loadedData: {
examples: {},
runs: {},
metadata: {},
screenshots: {}
}
};
// DOM elements
const basePathInput = document.getElementById('base-path');
const refreshEvalsBtn = document.getElementById('refresh-evals-btn');
const evalSelect = document.getElementById('eval-select');
const loadStatusDisplay = document.getElementById('load-status');
const exampleSelect = document.getElementById('example-select');
const runSelect = document.getElementById('run-select');
const runDetails = document.getElementById('run-details');
const taskText = document.getElementById('task-text');
const statusDisplay = document.getElementById('status-display');
const imageContainer = document.getElementById('image-container');
const noImages = document.getElementById('no-images');
const imageControls = document.getElementById('image-controls');
const currentImage = document.getElementById('current-image');
const imageCaption = document.getElementById('image-caption');
const imageCounter = document.getElementById('image-counter');
const imageSlider = document.getElementById('image-slider');
const prevImage = document.getElementById('prev-image');
const nextImage = document.getElementById('next-image');
const agentSteps = document.getElementById('agent-steps');
const rawJson = document.getElementById('raw-json');
const jsonLoadingIndicator = document.getElementById('json-loading-indicator');
const jsonError = document.getElementById('json-error');
// Initialize by loading available evaluations
refreshEvalsBtn.addEventListener('click', loadEvaluations);
// Load evaluations from server
async function loadEvaluations() {
appState.basePath = basePathInput.value.trim();
loadStatusDisplay.textContent = 'Loading evaluations...';
refreshEvalsBtn.disabled = true;
try {
const response = await fetch(`/api/evals?path=${encodeURIComponent(appState.basePath)}`);
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || 'Failed to load evaluations');
}
const evals = await response.json();
// Clear existing options
evalSelect.innerHTML = '<option value="">-- Select Evaluation --</option>';
// Add new options
evals.forEach(evalId => {
const option = document.createElement('option');
option.value = evalId;
option.textContent = evalId;
evalSelect.appendChild(option);
});
loadStatusDisplay.textContent = `Loaded ${evals.length} evaluations`;
// AUTO-SELECT LATEST EVALUATION
if (evals.length > 0) {
// Sort evaluations to get the latest one
evals.sort().reverse();
evalSelect.value = evals[0];
// Trigger change event to load examples
evalSelect.dispatchEvent(new Event('change'));
}
} catch (err) {
console.error('Error loading evaluations:', err);
loadStatusDisplay.textContent = `Error: ${err.message}`;
} finally {
refreshEvalsBtn.disabled = false;
}
}
// Handle evaluation selection
evalSelect.addEventListener('change', async () => {
appState.evalId = evalSelect.value;
if (!appState.evalId) {
exampleSelect.innerHTML = '<option value="">-- Select Example --</option>';
exampleSelect.disabled = true;
runSelect.innerHTML = '<option value="">-- Select Run --</option>';
runSelect.disabled = true;
runDetails.classList.add('hidden');
return;
}
try {
loadStatusDisplay.textContent = 'Loading examples...';
evalSelect.disabled = true;
const response = await fetch(`/api/eval/${appState.evalId}/examples?path=${encodeURIComponent(appState.basePath)}`);
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || 'Failed to load examples');
}
const examples = await response.json();
appState.loadedData.examples = examples;
// Update example dropdown
exampleSelect.innerHTML = '<option value="">-- Select Example --</option>';
for (const [exampleId, task] of Object.entries(examples)) {
const option = document.createElement('option');
option.value = exampleId;
option.textContent = exampleId;
option.title = task; // Show task as tooltip
exampleSelect.appendChild(option);
}
exampleSelect.disabled = false;
runSelect.innerHTML = '<option value="">-- Select Run --</option>';
runSelect.disabled = true;
runDetails.classList.add('hidden');
loadStatusDisplay.textContent = `Loaded ${Object.keys(examples).length} examples`;
// AUTO-SELECT FIRST EXAMPLE
if (Object.keys(examples).length > 0) {
const firstExampleId = Object.keys(examples)[0];
exampleSelect.value = firstExampleId;
// Trigger change event to load runs
exampleSelect.dispatchEvent(new Event('change'));
}
} catch (err) {
console.error('Error loading examples:', err);
loadStatusDisplay.textContent = `Error: ${err.message}`;
} finally {
evalSelect.disabled = false;
}
});
// Example selection
exampleSelect.addEventListener('change', async () => {
appState.currentExampleId = exampleSelect.value;
// Reset run selection
runSelect.innerHTML = '<option value="">-- Select Run --</option>';
if (!appState.currentExampleId) {
runSelect.disabled = true;
runDetails.classList.add('hidden');
return;
}
try {
loadStatusDisplay.textContent = 'Loading runs...';
exampleSelect.disabled = true;
const response = await fetch(`/api/eval/${appState.evalId}/example/${appState.currentExampleId}/runs?path=${encodeURIComponent(appState.basePath)}`);
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || 'Failed to load runs');
}
const runs = await response.json();
appState.loadedData.runs[appState.currentExampleId] = runs;
// SORT RUNS by ID (assuming run IDs have timestamps or sequence numbers)
runs.sort((a, b) => a.id.localeCompare(b.id, undefined, {numeric: true}));
// Update run dropdown with sorted runs
runSelect.innerHTML = '<option value="">-- Select Run --</option>';
runs.forEach(run => {
const option = document.createElement('option');
option.value = run.id;
option.textContent = `${run.id} (${run.status})`;
option.dataset.status = run.status;
runSelect.appendChild(option);
});
runSelect.disabled = false;
runDetails.classList.add('hidden');
loadStatusDisplay.textContent = `Loaded ${runs.length} runs`;
// AUTO-SELECT FIRST RUN
if (runs.length > 0) {
runSelect.value = runs[0].id;
// Trigger change event to load run data
runSelect.dispatchEvent(new Event('change'));
}
} catch (err) {
console.error('Error loading runs:', err);
loadStatusDisplay.textContent = `Error: ${err.message}`;
} finally {
exampleSelect.disabled = false;
}
});
// Run selection
runSelect.addEventListener('change', () => {
appState.currentRunId = runSelect.value;
if (appState.currentRunId && appState.currentExampleId) {
loadRunData(appState.currentExampleId, appState.currentRunId);
runDetails.classList.remove('hidden');
} else {
runDetails.classList.add('hidden');
}
});
// Load run data
async function loadRunData(exampleId, runId) {
loadStatusDisplay.textContent = 'Loading run data...';
runSelect.disabled = true;
jsonLoadingIndicator.classList.remove('hidden');
jsonError.classList.add('hidden');
try {
// Get metadata
const metadataResponse = await fetch(`/api/eval/${appState.evalId}/example/${exampleId}/run/${runId}/metadata?path=${encodeURIComponent(appState.basePath)}`);
let metadata;
if (metadataResponse.ok) {
metadata = await metadataResponse.json();
} else {
const errorData = await metadataResponse.json();
console.error('Error loading metadata:', errorData);
jsonError.textContent = `Error loading metadata: ${errorData.error || 'Unknown error'}`;
jsonError.classList.remove('hidden');
metadata = null;
}
appState.loadedData.metadata[exampleId] = appState.loadedData.metadata[exampleId] || {};
appState.loadedData.metadata[exampleId][runId] = metadata;
// Display task
const task = appState.loadedData.examples[exampleId];
taskText.textContent = task || "No task available";
// Display status
let statusHtml = "";
if (metadata) {
if (metadata.status === 'completed') {
statusHtml = `<p><span class="status-success">✓ Completed successfully</span></p>`;
} else {
statusHtml = `<p><span class="status-failure">✗ Failed</span></p>`;
if (metadata.error_message) {
statusHtml += `<p>Error: ${metadata.error_message}</p>`;
}
}
} else {
statusHtml = "<p>Status information not available</p>";
}
statusDisplay.innerHTML = statusHtml;
// Get screenshots
const screenshotsResponse = await fetch(`/api/eval/${appState.evalId}/example/${exampleId}/run/${runId}/screenshots?path=${encodeURIComponent(appState.basePath)}`);
const screenshots = await screenshotsResponse.json();
appState.loadedData.screenshots[exampleId] = appState.loadedData.screenshots[exampleId] || {};
appState.loadedData.screenshots[exampleId][runId] = screenshots;
// Load screenshots
loadScreenshots(exampleId, runId);
// Load agent trace
renderAgentTrace(metadata);
// Display raw JSON
if (metadata) {
rawJson.textContent = JSON.stringify(metadata, null, 2);
} else {
rawJson.textContent = "No metadata available";
}
// Show screenshots tab by default
document.querySelector('.tab[data-tab="screenshots"]').click();
loadStatusDisplay.textContent = 'Run data loaded successfully';
} catch (err) {
console.error('Error loading run data:', err);
loadStatusDisplay.textContent = `Error: ${err.message}`;
jsonError.textContent = `Error loading data: ${err.message}`;
jsonError.classList.remove('hidden');
} finally {
jsonLoadingIndicator.classList.add('hidden');
runSelect.disabled = false;
}
}
// Load screenshots
function loadScreenshots(exampleId, runId) {
appState.currentImages = appState.loadedData.screenshots[exampleId]?.[runId] || [];
if (appState.currentImages.length === 0) {
imageContainer.classList.add('hidden');
imageControls.classList.add('hidden');
noImages.classList.remove('hidden');
return;
}
// Setup image viewer
noImages.classList.add('hidden');
imageContainer.classList.remove('hidden');
imageControls.classList.remove('hidden');
// Configure slider
imageSlider.min = 0;
imageSlider.max = appState.currentImages.length - 1;
imageSlider.value = 0;
// Reset to first image
appState.currentImageIndex = 0;
updateImageDisplay();
}
// Update image display
function updateImageDisplay() {
if (appState.currentImages.length === 0) return;
const image = appState.currentImages[appState.currentImageIndex];
currentImage.src = image.path;
imageCaption.textContent = image.name;
imageCounter.textContent = `${appState.currentImageIndex + 1} / ${appState.currentImages.length}`;
imageSlider.value = appState.currentImageIndex;
// Update button states
prevImage.disabled = appState.currentImageIndex === 0;
nextImage.disabled = appState.currentImageIndex === appState.currentImages.length - 1;
}
// Image navigation
prevImage.addEventListener('click', () => {
if (appState.currentImageIndex > 0) {
appState.currentImageIndex--;
updateImageDisplay();
}
});
nextImage.addEventListener('click', () => {
if (appState.currentImageIndex < appState.currentImages.length - 1) {
appState.currentImageIndex++;
updateImageDisplay();
}
});
imageSlider.addEventListener('input', () => {
appState.currentImageIndex = parseInt(imageSlider.value);
updateImageDisplay();
});
// Tab handling
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
// Set active tab
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
// Show active content
const tabId = tab.getAttribute('data-tab');
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});
document.getElementById(`${tabId}-tab`).classList.add('active');
});
});
// Render agent trace - UPDATED to show all sections expanded and remove duplicated task title
function renderAgentTrace(metadata) {
agentSteps.innerHTML = '';
if (!metadata || !metadata.summary || metadata.summary.length === 0) {
agentSteps.innerHTML = '<p>No agent trace data available</p>';
return;
}
// Process each step
metadata.summary.forEach((step, index) => {
const stepDiv = document.createElement('div');
stepDiv.className = 'step';
// Create step header
const headerDiv = document.createElement('div');
headerDiv.className = 'step-header';
let headerText = `Step ${index}`;
if (index === 0 && step.task) {
headerText = 'Task';
} else if (step.model_output_message) {
headerText = 'Planning';
} else if (step.tool_calls) {
headerText = `Action ${index}`;
} else if (step.error) {
headerText = 'Error';
}
headerDiv.innerHTML = `<span>${headerText}</span><span>▲</span>`;
stepDiv.appendChild(headerDiv);
// Create step content
const contentDiv = document.createElement('div');
contentDiv.className = 'step-content';
// Make all sections visible by default
contentDiv.style.display = 'block';
let contentHtml = '';
// Task information - don't duplicate the title
if (index === 0 && step.task) {
// Just show the task content without the "Task:" title
contentHtml += `${step.task}\n\n`;
}
// Model output and planning
if (step.model_output_message && step.model_output_message.content) {
contentHtml += `<strong>Model Output:</strong>\n${step.model_output_message.content}\n\n`;
if (step.plan) {
contentHtml += `<strong>Plan:</strong>\n${step.plan}\n\n`;
}
}
// Tool calls
if (step.tool_calls && step.tool_calls.length > 0) {
step.tool_calls.forEach(toolCall => {
if (toolCall.function) {
contentHtml += `<strong>Tool Call:</strong> ${toolCall.function.name}\n`;
if (toolCall.function.arguments) {
contentHtml += `<strong>Arguments:</strong>\n${toolCall.function.arguments}\n\n`;
}
}
});
}
// Model reasoning
if (step.model_output) {
contentHtml += `<strong>Model Reasoning:</strong>\n${step.model_output}\n\n`;
}
// Observations
if (step.observations) {
contentHtml += `<strong>Observations:</strong>\n${step.observations}\n\n`;
}
// Action output
if (step.action_output) {
contentHtml += `<strong>Action Output:</strong>\n${step.action_output}\n\n`;
}
// Errors
if (step.error) {
contentHtml += `<strong>Error Type:</strong> ${step.error.type || 'Unknown'}\n`;
if (step.error.message) {
contentHtml += `<strong>Error Message:</strong> ${step.error.message}\n`;
}
}
contentDiv.textContent = contentHtml || "No content available for this step";
stepDiv.appendChild(contentDiv);
// Add click handler to toggle content
headerDiv.addEventListener('click', () => {
const isHidden = contentDiv.style.display === 'none';
contentDiv.style.display = isHidden ? 'block' : 'none';
headerDiv.querySelector('span:last-child').textContent = isHidden ? '▲' : '▼';
});
agentSteps.appendChild(stepDiv);
});
// No need to expand the first step by default since all are now expanded
}
// Handle keyboard navigation for images
document.addEventListener('keydown', (e) => {
if (!appState.currentImages || appState.currentImages.length === 0) return;
// Check if the screenshots tab is active
const screenshotsTab = document.getElementById('screenshots-tab');
if (!screenshotsTab.classList.contains('active')) return;
if (e.key === 'ArrowLeft' && appState.currentImageIndex > 0) {
appState.currentImageIndex--;
updateImageDisplay();
} else if (e.key === 'ArrowRight' && appState.currentImageIndex < appState.currentImages.length - 1) {
appState.currentImageIndex++;
updateImageDisplay();
}
});
// Load evaluations on page load
document.addEventListener('DOMContentLoaded', loadEvaluations);
</script>
</body>
</html>