Spaces:

smolagents
/

computer-agent

Paused

App Files Files Community

computer-agent / templates /viewer.html

lvwerra HF Staff

add vis

e781603 12 months ago

raw

history blame contribute delete

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>