/
OS-World3b1540e<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Task Detail: {{ task_id }}</title>
<link rel="icon" href="/static/favicon.png" type="image/x-icon">
<link rel="shortcut icon" href="/static/favicon.png" type="image/x-icon">
<link rel="apple-touch-icon" href="/static/favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="/static/task_detail.css">
</head>
<body>
<div class="container">
<a href="/" class="back-link"><i class="fas fa-arrow-left"></i> Back to Home</a>
<h1>Task Detail <span class="task-id">{{ task_id }}</span></h1>
<div class="task-info">
<h2><i class="fas fa-info-circle"></i> Basic Information</h2>
<dl>
<dt>Task ID</dt>
<dd>{{ task_id }}</dd>
<dt>Task Type</dt>
<dd>{{ task_type }}</dd>
<dt>Instruction</dt>
<dd>{{ task_info.instruction }}</dd>
<dt>Status</dt>
<dd class="status status-{{ task_status.status|lower|replace(' ', '-')|replace('(', '')|replace(')', '') }}">
{{ task_status.status }}
{% if task_status.status == 'Error' %}
<span class="tooltip">
<i class="fas fa-question-circle"></i>
<span class="tooltip-text">Error occurred during task execution</span>
</span>
{% elif task_status.status == 'Done (Message Exit)' %}
<span class="tooltip">
<i class="fas fa-question-circle"></i>
<span class="tooltip-text">Task completed with a message exit condition</span>
</span>
{% elif task_status.status == 'Done (Max Steps)' %}
<span class="tooltip">
<i class="fas fa-question-circle"></i>
<span class="tooltip-text">Maximum steps reached, task completed</span>
</span>
{% elif task_status.status == 'Done (Thought Exit)' %}
<span class="tooltip">
<i class="fas fa-question-circle"></i>
<span class="tooltip-text">Task completed with a thought exit condition</span>
</span>
{% endif %}
</dd>
<dt>Current Step</dt>
<dd>{{ task_status.progress }}</dd>
<dt>Last Update</dt>
<dd>{{ task_status.last_update or 'None' }}</dd>
{% if task_status.log_data and task_status.log_data.exit_condition %}
<dt>Exit Condition</dt>
<dd class="exit-condition">
{{ task_status.log_data.exit_condition }}
</dd>
{% endif %}
{% if task_status.status == 'Done (Message Exit)' and task_status.log_data and task_status.log_data.last_message %}
<dt>Exit Message</dt>
<dd class="exit-message">
{{ task_status.log_data.last_message }}
</dd>
{% endif %}
<dt>Result</dt>
<dd>{{ task_status.result }}</dd>
{% if task_status.status.startswith('Done') %}
<dt>Recording</dt>
<dd id="recording-container">
<div class="video-player">
<video id="task-recording" controls playsinline webkit-playsinline
preload="metadata" width="100%" controlslist="nodownload">
<source src="/task/{{ task_type }}/{{ task_id }}/recording" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="video-status" class="video-status">Loading video...</div>
</div>
</dd>
{% endif %}
</dl>
</div>
<div class="task-steps">
<h2><i class="fas fa-list-ol"></i> Execution Steps</h2>
<div id="steps-container">
{% if task_status.steps %}
{% for step in task_status.steps %}
<div class="step-card">
<div class="step-header">
<div class="step-title"><i class="fas fa-check-circle"></i> Step {{ step.step_num }}</div>
<div class="step-time"><i class="far fa-clock"></i> {{ step.action_timestamp }}</div>
</div>
{% if task_status.log_data and task_status.log_data.agent_responses and loop.index0 < task_status.log_data.agent_responses|length %}
<div class="step-intent">
<i class="fas fa-comment"></i> <strong>Agent Intent:</strong> {{ task_status.log_data.agent_responses[loop.index0] }}
</div>
{% endif %}
<pre>{% if step.action and step.action.action %}{{ step.action.action }}
{% elif step.Error %}Error: {{ step.Error }}
{% else %}{{ step|tojson }}
{% endif %}</pre>
{% if step.screenshot_file %}
<div>
<img src="/task/{{ task_type }}/{{ task_id }}/screenshot/{{ step.screenshot_file }}"
alt="Step {{ step.step_num }} Screenshot" class="step-image">
</div>
{% endif %}
</div>
{% endfor %}
{% else %}
<div class="no-steps"><i class="far fa-frown"></i> No step data available</div>
{% endif %}
</div>
</div>
</div>
<button class="fab fab-refresh" onclick="refreshPage()" title="Refresh"><i class="fas fa-sync-alt"></i></button>
<script>
function refreshPage() {
window.location.reload();
}
// Handle video player with enhanced mobile support
document.addEventListener('DOMContentLoaded', function() {
const videoElement = document.getElementById('task-recording');
const videoStatus = document.getElementById('video-status');
if (videoElement) {
// Function to update status on successful video load
function updateSuccessStatus() {
videoStatus.textContent = 'Recording available';
videoStatus.className = 'video-status video-success';
}
// Multiple event listeners for different browser implementations
// The 'loadeddata' event might not fire on all mobile browsers
videoElement.addEventListener('loadeddata', updateSuccessStatus);
videoElement.addEventListener('loadedmetadata', updateSuccessStatus);
videoElement.addEventListener('canplay', updateSuccessStatus);
// Error handling for video
videoElement.addEventListener('error', function(e) {
console.error('Video error:', e);
videoStatus.textContent = 'Recording not available';
videoStatus.className = 'video-status video-error';
});
// Timeout for slow connections or browser issues
setTimeout(function() {
// If video is playable but events didn't fire correctly
if (videoElement.readyState >= 2 && videoStatus.textContent === 'Loading video...') {
updateSuccessStatus();
}
}, 2000);
// Directly check video source availability with fetch API
fetch('/task/{{ task_type }}/{{ task_id }}/recording', {method: 'HEAD'})
.then(function(response) {
if (response.ok && videoStatus.textContent === 'Loading video...') {
// If HEAD request succeeds but video events haven't fired
setTimeout(updateSuccessStatus, 500);
}
})
.catch(function() {
// Network error or CORS issue
if (videoStatus.textContent === 'Loading video...') {
videoStatus.textContent = 'Recording check failed';
videoStatus.className = 'video-status video-error';
}
});
}
});
</script>
</body>
</html>