yaoyao-open-source
2fd70465e6
Introduces the full-featured, modern Angular 19 web dashboard for ARTEMIS. Provides real-time multimodal agent stream visualization, live device feeds, interactive step inspection, task queue management, and model telemetry. Key Features & UI Architecture: - Workspace & Layout: * Split-pane responsive layout with draggable resizer bar for execution stream and chat/task panel. * Standalone Angular components powered by Signals and reactive computed state. - Real-Time Multimodal Agent Stream: * SSE connection (/api/stream/:session_id) for live streaming of thoughts, actions, and tool calls. * Hierarchical phase grouping (Planning -> Execution -> Verification -> Summary). * Interactive step viewer with before/after screenshot overlays, coordinate pins, bounding boxes, and OCR text highlights. * Live planning loader, error diagnostics banner, retry status indicator, and token usage metrics. - Task Queue & Chat Interface: * Goal submission with instant dispatch to backend runner (/api/run). * Active task queue tracker (running, pending queue in FIFO order, completed/failed historical sessions). * Session switcher with model info badges and Markdown notes viewer (e.g. task_plan.md). - Floating Video Player & Live Stream: * Draggable, floating video player overlay for reviewing session recordings and live device feeds (/api/stream/device-live). * Playback controls: play/pause, seek scrubber, speed multipliers (0.5x - 4.0x), looping, and theater mode. - Formatting & Parsing Utilities: * Android UI action formatter (tap, type, swipe, drag, keyevent, app launch). * Tool call formatter for ADB commands, note management, video inspection, and failure recovery. * Markdown parsing and milestone checklist rendering.
46 lines
2.0 KiB
XML
46 lines
2.0 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="158 183 204 137" width="204" height="137">
|
|
<defs>
|
|
<!-- Red Glow -->
|
|
<radialGradient id="redGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#EA4335" stop-opacity="1" />
|
|
<stop offset="30%" stop-color="#EA4335" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#EA4335" stop-opacity="0" />
|
|
</radialGradient>
|
|
<!-- Yellow Glow -->
|
|
<radialGradient id="yellowGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#FBBC05" stop-opacity="1" />
|
|
<stop offset="30%" stop-color="#FBBC05" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#FBBC05" stop-opacity="0" />
|
|
</radialGradient>
|
|
<!-- Green Glow -->
|
|
<radialGradient id="greenGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#34A853" stop-opacity="1" />
|
|
<stop offset="30%" stop-color="#34A853" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#34A853" stop-opacity="0" />
|
|
</radialGradient>
|
|
|
|
<!-- Logo Silhouette Mask -->
|
|
<mask id="logoMask">
|
|
<!-- Cup Body (Filled) with stroke to smooth corners -->
|
|
<path d="M 170 195 L 310 195 L 310 255 C 310 325 170 325 170 255 Z" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="22" stroke-linejoin="round" />
|
|
<!-- Handle (Outline Only) -->
|
|
<path d="M 310 220 L 350 220 L 350 270 L 310 270" fill="none" stroke="#FFFFFF" stroke-width="22" stroke-linecap="round" stroke-linejoin="round" />
|
|
</mask>
|
|
</defs>
|
|
|
|
<!-- Logo with Mesh Gradient (No Background) -->
|
|
<g mask="url(#logoMask)">
|
|
<!-- Base background: solid Blue on the right and center -->
|
|
<rect x="158" y="183" width="204" height="137" fill="#4285F4" />
|
|
|
|
<!-- Red glow on the top-center/left -->
|
|
<circle cx="230" cy="180" r="105" fill="url(#redGlow)" />
|
|
|
|
<!-- Yellow glow on the middle-left -->
|
|
<circle cx="150" cy="235" r="90" fill="url(#yellowGlow)" />
|
|
|
|
<!-- Green glow on the bottom-left -->
|
|
<circle cx="170" cy="305" r="85" fill="url(#greenGlow)" />
|
|
</g>
|
|
</svg>
|