Add Web Dashboard with multi-device control and callback hooks
Features: - Web Dashboard: FastAPI-based dashboard with Vue.js frontend - Multi-device support (ADB, HDC, iOS) - Real-time WebSocket updates for task progress - Device management with status tracking - Task queue with execution controls (start/stop/re-execute) - Detailed task information display (thinking, actions, completion messages) - Screenshot viewing per device - LAN deployment support with configurable CORS - Callback Hooks: Interrupt and modify task execution - step_callback: Called after each step with StepResult - before_action_callback: Called before executing action - Support for task interruption and dynamic task switching - Example scripts demonstrating callback usage - Configuration: Environment-based configuration - .env file support for all settings - .env.example template with documentation - Model API configuration (base URL, model name, API key) - Dashboard configuration (host, port, CORS, device type) - Phone agent configuration (delays, max steps, language) Technical improvements: - Fixed forward reference issue with StepResult - Added package exports for callback types and configs - Enhanced dependencies with FastAPI, WebSocket support - Thread-safe task execution with device locking - Async WebSocket broadcasting from sync thread pool Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
let5sne.win10
219
dashboard/static/index.html
Normal file
219
dashboard/static/index.html
Normal file
@@ -0,0 +1,219 @@
|
||||
<!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">
|
||||
<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>
|
||||
Reference in New Issue
Block a user