a356c481ca
This commit adds a dedicated task list page to view and manage all video learning sessions, solving the issue where users couldn't find their background tasks after navigating away. Features: - New sessions.html page with card-based layout for all sessions - Real-time polling for session status updates (every 3 seconds) - Session control buttons (pause/resume/stop/delete) - localStorage integration for session persistence across page refreshes - Navigation links added to main page and video learning page - Empty state UI when no sessions exist New files: - dashboard/static/sessions.html - Task list page - dashboard/static/js/sessions.js - Sessions module with API calls - dashboard/static/css/sessions.css - Styling for sessions page Modified files: - dashboard/api/video_learning.py - Added /sessions/list endpoint - dashboard/static/index.html - Added "任务列表" button - dashboard/static/video-learning.html - Added "任务列表" button and localStorage Co-Authored-By: Claude <noreply@anthropic.com>
236 lines
13 KiB
HTML
236 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AutoGLM Dashboard</title>
|
|
<!-- Vue.js 3 -->
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<!-- Axios for API requests -->
|
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<!-- CSS -->
|
|
<link rel="stylesheet" href="/static/css/dashboard.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<h1>AutoGLM Dashboard</h1>
|
|
<div class="stats">
|
|
<span class="stat" title="Connected Devices">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
|
|
<line x1="12" y1="18" x2="12" y2="18"></line>
|
|
</svg>
|
|
{{ connectedDeviceCount }} / {{ devices.length }}
|
|
</span>
|
|
<span class="stat" title="Active Tasks">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
|
|
</svg>
|
|
{{ activeTasks.length }}
|
|
</span>
|
|
<span class="stat ws-status" :class="{ connected: wsConnected }" title="WebSocket">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="2" y1="12" x2="22" y2="12"></line>
|
|
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="/static/video-learning.html" class="btn btn-primary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polygon points="23 7 16 12 23 17 23 7"></polygon>
|
|
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
|
</svg>
|
|
Video Learning
|
|
</a>
|
|
<a href="/static/sessions.html" class="btn btn-secondary">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="3" width="7" height="7"></rect>
|
|
<rect x="14" y="14" width="7" height="7"></rect>
|
|
<rect x="3" y="14" width="7" height="7"></rect>
|
|
</svg>
|
|
任务列表
|
|
</a>
|
|
<button @click="refreshDevices" class="btn btn-secondary" :disabled="refreshing">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" :class="{ spinning: refreshing }">
|
|
<polyline points="23 4 23 10 17 10"></polyline>
|
|
<polyline points="1 20 1 14 7 14"></polyline>
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
|
</svg>
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Device Grid -->
|
|
<section class="devices-section">
|
|
<h2>Devices</h2>
|
|
<div class="device-grid" v-if="devices.length > 0">
|
|
<div
|
|
class="device-card"
|
|
v-for="device in devices"
|
|
:key="device.device_id"
|
|
:class="{ busy: device.status === 'busy', offline: !device.is_connected }"
|
|
>
|
|
<div class="device-header">
|
|
<h3>{{ device.device_id }}</h3>
|
|
<span class="status-badge" :class="device.status">
|
|
{{ device.status }}
|
|
</span>
|
|
</div>
|
|
<div class="device-info">
|
|
<p v-if="device.model">{{ device.model }}</p>
|
|
<p v-if="device.android_version" class="version">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
|
|
<path d="M2 17l10 5 10-5"></path>
|
|
<path d="M2 12l10 5 10-5"></path>
|
|
</svg>
|
|
{{ device.android_version }}
|
|
</p>
|
|
<p v-if="device.current_app" class="app">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
|
</svg>
|
|
{{ formatAppName(device.current_app) }}
|
|
</p>
|
|
</div>
|
|
<div class="screenshot" v-if="device.screenshot">
|
|
<img :src="'data:image/png;base64,' + device.screenshot" alt="Screen">
|
|
</div>
|
|
<div class="device-actions">
|
|
<input
|
|
v-model="device.taskInput"
|
|
type="text"
|
|
placeholder="Enter task..."
|
|
@keyup.enter="executeTask(device)"
|
|
:disabled="device.status === 'busy' || !device.is_connected"
|
|
>
|
|
<button
|
|
@click="executeTask(device)"
|
|
class="btn btn-primary"
|
|
:disabled="device.status === 'busy' || !device.is_connected || !device.taskInput"
|
|
>
|
|
{{ device.status === 'busy' ? 'Running...' : 'Execute' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="empty-state" v-else>
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
|
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
|
|
<line x1="12" y1="18" x2="12" y2="18"></line>
|
|
</svg>
|
|
<p>No devices found</p>
|
|
<button @click="refreshDevices" class="btn btn-secondary">Scan for Devices</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Task Queue -->
|
|
<section class="tasks-section">
|
|
<h2>Task Queue</h2>
|
|
<div class="task-list" v-if="tasks.length > 0">
|
|
<div
|
|
class="task-item"
|
|
v-for="task in tasks"
|
|
:key="task.task_id"
|
|
:class="{ active: task.status === 'running' }"
|
|
>
|
|
<div class="task-info">
|
|
<div class="task-header">
|
|
<span class="task-id">{{ task.task_id }}</span>
|
|
<span class="task-status" :class="task.status">{{ task.status }}</span>
|
|
</div>
|
|
<p class="task-description">{{ task.task }}</p>
|
|
<div class="task-meta">
|
|
<span>Device: {{ task.device_id }}</span>
|
|
<span>Step: {{ task.current_step }}/{{ task.max_steps }}</span>
|
|
</div>
|
|
<div class="task-progress" v-if="task.status === 'running'">
|
|
<div class="progress-bar" :style="{ width: (task.current_step / task.max_steps * 100) + '%' }"></div>
|
|
</div>
|
|
<!-- Current Action -->
|
|
<div class="task-action" v-if="task.current_action && task.status === 'running'">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
|
|
</svg>
|
|
<strong>{{ task.current_action.action }}</strong>
|
|
<span v-if="task.current_action.element"> on {{ task.current_action.element }}</span>
|
|
<span v-if="task.current_action.text">: "{{ task.current_action.text }}"</span>
|
|
</div>
|
|
<!-- Thinking -->
|
|
<div class="task-thinking" v-if="task.thinking">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<line x1="12" y1="16" x2="12" y2="12"></line>
|
|
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
|
</svg>
|
|
{{ task.thinking }}
|
|
</div>
|
|
<!-- Completion Message -->
|
|
<div class="task-message" v-if="task.completion_message && (task.status === 'completed' || task.status === 'failed' || task.status === 'stopped')">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path v-if="task.status === 'completed'" d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline v-if="task.status === 'completed'" points="22 4 12 14.01 9 11.01"></polyline>
|
|
<circle v-if="task.status === 'failed'" cx="12" cy="12" r="10"></circle>
|
|
<line v-if="task.status === 'failed'" x1="15" y1="9" x2="9" y2="15"></line>
|
|
<line v-if="task.status === 'failed'" x1="9" y1="9" x2="15" y2="15"></line>
|
|
</svg>
|
|
{{ task.completion_message }}
|
|
</div>
|
|
</div>
|
|
<div class="task-actions" v-if="task.status === 'running'">
|
|
<button @click="stopTask(task)" class="btn btn-danger btn-sm">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="6" y="6" width="12" height="12"></rect>
|
|
</svg>
|
|
Stop
|
|
</button>
|
|
</div>
|
|
<div class="task-actions" v-else>
|
|
<button @click="reExecuteTask(task)" class="btn btn-secondary btn-sm">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="23 4 23 10 17 10"></polyline>
|
|
<polyline points="1 20 1 14 7 14"></polyline>
|
|
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
|
</svg>
|
|
Re-execute
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="empty-state" v-else>
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
|
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
|
|
</svg>
|
|
<p>No tasks yet</p>
|
|
<p class="hint">Enter a task above to get started</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Toast notifications -->
|
|
<div class="toast-container">
|
|
<div
|
|
class="toast"
|
|
v-for="toast in toasts"
|
|
:key="toast.id"
|
|
:class="toast.type"
|
|
>
|
|
{{ toast.message }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/dashboard.js"></script>
|
|
</body>
|
|
</html>
|