feat: introduce MCP server, cross-platform runtime, and Showcase UI reorganization
- Showcase UI Reorganization: * Move web UI dashboard from root directory into apps/showcase_ui/ for cleaner project structure * Add 'artemis ui' CLI command (artemis/interfaces/cli/commands/ui.py) and launcher scripts for the interactive showcase console - Standalone MCP Server & Notifiers (mcp_server/): * Implement dedicated MCP server package with mobile automation tools (device_state, inspect_trace, task_manager, task_runner) * Add multi-channel notifiers (AgentAPI, Desktop notifications, Webhooks, File output, and Composite routing) * Introduce background task runner and trace store for autonomous mobile execution monitoring - Cross-Platform Runtime & Toolchain Support: * Add artemis/platform/ with OS-specific implementations for Linux, macOS (Darwin), and Windows * Add artemis/runtime/supervisor.py for resilient process and agent runtime supervision * Add artemis/toolchain/ with dependency resolution and SDK descriptors * Add cross-platform launcher scripts (start.sh, start.bat) and installer scripts (scripts/install_deps.*) - Core Enhancements & Diagnostics: * Enhance coordinate normalization, OCR API fallback, and perception pipeline * Add credential validation (credentials_validator.py) and system diagnostics * Update bilingual documentation (README.md, README_CN.md) and architecture diagrams - Test Suite Expansion: * Add integration tests for cloud gateway, remote ADB, and Artemis login * Add unit tests covering core diagnostics, platform detection, toolchain, credentials validator, optional OCR, and MCP tools
No files matched your search
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 232 KiB |
|
After Width: | Height: | Size: 238 KiB |
|
After Width: | Height: | Size: 5.8 MiB |
@@ -0,0 +1,802 @@
|
||||
# Copyright 2026 Google LLC
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
#
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
import os
|
||||
import subprocess
|
||||
|
||||
|
||||
def create_banner_html():
|
||||
return """<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Google+Sans+Display:wght@400;500;600;700;800;900&family=Google+Sans+Mono:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1280px;
|
||||
height: 480px;
|
||||
background-color: #060913;
|
||||
font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
|
||||
color: #FFFFFF;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 64px 0 72px;
|
||||
}
|
||||
|
||||
/* Fine Cyber Grid */
|
||||
.grid-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 45%, transparent 100%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 45%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Refined Ambient Glows */
|
||||
.glow-blue {
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
left: -100px;
|
||||
width: 640px;
|
||||
height: 640px;
|
||||
background: radial-gradient(circle, rgba(66, 133, 244, 0.26) 0%, rgba(66, 133, 244, 0.03) 50%, transparent 70%);
|
||||
filter: blur(80px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.glow-green {
|
||||
position: absolute;
|
||||
bottom: -140px;
|
||||
right: 40px;
|
||||
width: 550px;
|
||||
height: 550px;
|
||||
background: radial-gradient(circle, rgba(52, 168, 83, 0.18) 0%, rgba(52, 168, 83, 0.02) 50%, transparent 70%);
|
||||
filter: blur(80px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.glow-yellow {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 320px;
|
||||
width: 450px;
|
||||
height: 450px;
|
||||
background: radial-gradient(circle, rgba(251, 188, 5, 0.09) 0%, transparent 65%);
|
||||
filter: blur(75px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.glow-red {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
left: 460px;
|
||||
width: 380px;
|
||||
height: 380px;
|
||||
background: radial-gradient(circle, rgba(234, 67, 53, 0.08) 0%, transparent 60%);
|
||||
filter: blur(75px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Left Column: Clean, Minimalist & Bold */
|
||||
.left-col {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 470px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Title Row */
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
position: relative;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo-halo {
|
||||
position: absolute;
|
||||
inset: -8px;
|
||||
background: radial-gradient(circle, rgba(66, 133, 244, 0.55) 0%, rgba(52, 168, 83, 0.25) 50%, transparent 75%);
|
||||
filter: blur(16px);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
position: relative;
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
filter: drop-shadow(0 4px 22px rgba(66, 133, 244, 0.6));
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
font-family: 'Google Sans Display', 'Google Sans', sans-serif;
|
||||
font-size: 78px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.025em;
|
||||
line-height: 0.95;
|
||||
color: #FFFFFF;
|
||||
filter: drop-shadow(0 0 35px rgba(66, 133, 244, 0.4));
|
||||
}
|
||||
|
||||
/* Clean Single Subtitle (Preserving Android) */
|
||||
.brand-tagline {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
color: #F8FAFC;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.brand-tagline span {
|
||||
background: linear-gradient(135deg, #60A5FA 0%, #34D399 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Prompt Input Card */
|
||||
.prompt-box {
|
||||
background: rgba(15, 23, 42, 0.75);
|
||||
border: 1px solid rgba(66, 133, 244, 0.22);
|
||||
border-radius: 14px;
|
||||
padding: 13px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.prompt-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.prompt-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
color: #64748B;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.prompt-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 9.5px;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
color: #34A853;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-pulse {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #34A853;
|
||||
box-shadow: 0 0 8px #34A853;
|
||||
}
|
||||
|
||||
.prompt-text {
|
||||
font-size: 13.5px;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
color: #E2E8F0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.prompt-text span {
|
||||
color: #60A5FA;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Right Visual Stage: Host Agent Driving Connected Phone */
|
||||
.right-stage {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
width: 630px;
|
||||
height: 440px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
/* Agent Progress Console (Host Controller) */
|
||||
.agent-console {
|
||||
position: relative;
|
||||
width: 285px;
|
||||
background: rgba(11, 17, 32, 0.92);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
backdrop-filter: blur(20px);
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 11px;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.console-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.console-title-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.console-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #4285F4;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 8px #4285F4;
|
||||
}
|
||||
|
||||
.console-title {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
letter-spacing: 0.06em;
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.console-badge {
|
||||
font-size: 9px;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
font-weight: 700;
|
||||
padding: 2px 6px;
|
||||
background: rgba(66, 133, 244, 0.15);
|
||||
color: #60A5FA;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(66, 133, 244, 0.3);
|
||||
}
|
||||
|
||||
/* Step Execution Timeline */
|
||||
.step-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.step-icon-done {
|
||||
color: #34A853;
|
||||
font-weight: 800;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.step-text-done {
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
/* Active Step Highlight Card */
|
||||
.step-active-card {
|
||||
background: linear-gradient(135deg, rgba(66, 133, 244, 0.14), rgba(52, 168, 83, 0.08));
|
||||
border: 1px solid rgba(66, 133, 244, 0.4);
|
||||
border-radius: 9px;
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
box-shadow: 0 4px 15px rgba(66, 133, 244, 0.15);
|
||||
}
|
||||
|
||||
.step-active-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.step-active-title {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #93C5FD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.step-active-time {
|
||||
font-size: 9px;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
color: #34A853;
|
||||
font-weight: 700;
|
||||
background: rgba(52, 168, 83, 0.15);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.step-active-desc {
|
||||
font-size: 9.5px;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
color: #CBD5E1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.step-active-desc span {
|
||||
color: #FBBC05;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.step-pending {
|
||||
color: #475569;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* Connected Mobile Phone Mockup */
|
||||
.phone-frame {
|
||||
position: relative;
|
||||
width: 215px;
|
||||
height: 380px;
|
||||
background: #0B0F19;
|
||||
border-radius: 36px;
|
||||
padding: 8px;
|
||||
box-shadow:
|
||||
0 25px 65px -10px rgba(0, 0, 0, 0.85),
|
||||
0 0 45px rgba(66, 133, 244, 0.25),
|
||||
inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
|
||||
inset 0 1px 3px rgba(255, 255, 255, 0.4);
|
||||
z-index: 20;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.phone-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #0D1527 0%, #060B16 100%);
|
||||
border-radius: 28px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
/* Dynamic Island */
|
||||
.phone-island {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 56px;
|
||||
height: 13px;
|
||||
background: #000;
|
||||
border-radius: 20px;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
/* Phone App UI Header */
|
||||
.screen-header {
|
||||
margin-top: 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.screen-title {
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.device-tag {
|
||||
font-size: 7.5px;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
font-weight: 700;
|
||||
padding: 2px 5px;
|
||||
background: rgba(52, 168, 83, 0.15);
|
||||
color: #34A853;
|
||||
border-radius: 4px;
|
||||
border: 1px solid rgba(52, 168, 83, 0.35);
|
||||
}
|
||||
|
||||
/* Screen Content Cards */
|
||||
.mock-item-card {
|
||||
margin-top: 10px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 11px;
|
||||
padding: 8px 9px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item-thumb {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 7px;
|
||||
background: linear-gradient(135deg, #1E293B, #334155);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #F1F5F9;
|
||||
}
|
||||
|
||||
.item-sub {
|
||||
font-size: 7.5px;
|
||||
color: #64748B;
|
||||
}
|
||||
|
||||
.item-price {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #38BDF8;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* Secondary Mock Card */
|
||||
.mock-secondary-card {
|
||||
margin-top: 7px;
|
||||
background: rgba(255, 255, 255, 0.025);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 9px;
|
||||
padding: 6px 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
font-size: 7.5px;
|
||||
color: #94A3B8;
|
||||
}
|
||||
|
||||
.secondary-val {
|
||||
font-size: 7.5px;
|
||||
font-weight: 700;
|
||||
color: #F1F5F9;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
/* Action Target Button with Vision Grounding Box */
|
||||
.action-target-wrapper {
|
||||
position: relative;
|
||||
margin-top: auto;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.mock-btn {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
background: linear-gradient(135deg, #4285F4, #2563EB);
|
||||
border-radius: 9px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
color: #FFFFFF;
|
||||
box-shadow: 0 4px 15px rgba(66, 133, 244, 0.45);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* AI Grounding Vision Box (Emerald Green) */
|
||||
.grounding-box {
|
||||
position: absolute;
|
||||
inset: -4px;
|
||||
border: 1.5px solid #34A853;
|
||||
border-radius: 12px;
|
||||
background: rgba(52, 168, 83, 0.12);
|
||||
box-shadow: 0 0 15px rgba(52, 168, 83, 0.35);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grounding-tag {
|
||||
position: absolute;
|
||||
top: -9px;
|
||||
left: 8px;
|
||||
background: #34A853;
|
||||
color: #032014;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
font-size: 7.5px;
|
||||
font-weight: 800;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* Tap Ripple Target (Amber/Yellow Accent) */
|
||||
.tap-point {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 14px;
|
||||
transform: translateY(-50%);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tap-ripple {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 2px solid #FBBC05;
|
||||
border-radius: 50%;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.tap-dot {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #FBBC05;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px #FBBC05;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Background Layer -->
|
||||
<div class="grid-bg"></div>
|
||||
<div class="glow-blue"></div>
|
||||
<div class="glow-green"></div>
|
||||
<div class="glow-yellow"></div>
|
||||
<div class="glow-red"></div>
|
||||
|
||||
<!-- Left Content Column (Clean, Focused, Minimalist) -->
|
||||
<div class="left-col">
|
||||
<div class="title-row">
|
||||
<div class="logo-wrapper">
|
||||
<div class="logo-halo"></div>
|
||||
<svg class="logo-icon" viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<radialGradient id="redGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#EA4335" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#EA4335" stop-opacity="0.95" />
|
||||
<stop offset="100%" stop-color="#EA4335" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="yellowGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FBBC05" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#FBBC05" stop-opacity="0.95" />
|
||||
<stop offset="100%" stop-color="#FBBC05" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="greenGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#34A853" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#34A853" stop-opacity="0.95" />
|
||||
<stop offset="100%" stop-color="#34A853" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<mask id="robotMeshMask">
|
||||
<rect width="240" height="240" fill="black" />
|
||||
<path d="M 90 60 Q 75 35 65 28" stroke="white" stroke-width="10" stroke-linecap="round" />
|
||||
<circle cx="62" cy="24" r="10" fill="white" />
|
||||
<path d="M 150 60 Q 165 35 175 28" stroke="white" stroke-width="10" stroke-linecap="round" />
|
||||
<circle cx="178" cy="24" r="10" fill="white" />
|
||||
<rect x="28" y="100" width="16" height="48" rx="8" fill="white" />
|
||||
<rect x="196" y="100" width="16" height="48" rx="8" fill="white" />
|
||||
<rect x="44" y="58" width="152" height="132" rx="40" fill="white" />
|
||||
<rect x="64" y="88" width="112" height="52" rx="22" fill="black" />
|
||||
<path d="M 82 118 Q 92 106 102 118" stroke="white" stroke-width="6" stroke-linecap="round" fill="none" />
|
||||
<path d="M 138 118 Q 148 106 158 118" stroke="white" stroke-width="6" stroke-linecap="round" fill="none" />
|
||||
<path d="M 104 158 Q 120 172 136 158" stroke="black" stroke-width="6" stroke-linecap="round" fill="none" />
|
||||
</mask>
|
||||
</defs>
|
||||
<g mask="url(#robotMeshMask)">
|
||||
<rect width="240" height="240" fill="#4285F4" />
|
||||
<circle cx="160" cy="50" r="100" fill="url(#redGlow)" />
|
||||
<circle cx="60" cy="120" r="95" fill="url(#yellowGlow)" />
|
||||
<circle cx="110" cy="200" r="95" fill="url(#greenGlow)" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 class="brand-title">ARTEMIS</h1>
|
||||
</div>
|
||||
|
||||
<!-- Clear, Crisp Subtitle -->
|
||||
<div class="brand-tagline">
|
||||
Control Any Android App with <span>Autonomous AI</span>
|
||||
</div>
|
||||
|
||||
<!-- User Prompt Input Example -->
|
||||
<div class="prompt-box">
|
||||
<div class="prompt-header">
|
||||
<span class="prompt-label">Goal / Prompt</span>
|
||||
<div class="prompt-status">
|
||||
<div class="status-pulse"></div>
|
||||
<span>RUNNING ON DEVICE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prompt-text">
|
||||
<span>></span> Order an iced caramel latte with oat milk
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Visual Stage: Host Agent Driving Connected Phone -->
|
||||
<div class="right-stage">
|
||||
|
||||
<!-- Agent Execution Console (Host Side) -->
|
||||
<div class="agent-console">
|
||||
<div class="console-header">
|
||||
<div class="console-title-group">
|
||||
<div class="console-dot"></div>
|
||||
<span class="console-title">Agent Execution</span>
|
||||
</div>
|
||||
<span class="console-badge">STEP 3 / 4</span>
|
||||
</div>
|
||||
|
||||
<div class="step-list">
|
||||
<div class="step-item">
|
||||
<span class="step-icon-done">✓</span>
|
||||
<span class="step-text-done">1. Open app & search catalog</span>
|
||||
</div>
|
||||
<div class="step-item">
|
||||
<span class="step-icon-done">✓</span>
|
||||
<span class="step-text-done">2. Select item & customize</span>
|
||||
</div>
|
||||
|
||||
<!-- Active Step -->
|
||||
<div class="step-active-card">
|
||||
<div class="step-active-header">
|
||||
<span class="step-active-title">▶ 3. Tap "Place Order"</span>
|
||||
<span class="step-active-time">140ms</span>
|
||||
</div>
|
||||
<div class="step-active-desc">
|
||||
Vision target grounded at <span>(540, 1680)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="step-pending">
|
||||
<span>○</span>
|
||||
<span>4. Verify receipt & return</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Real Connected Phone Executing the Tap -->
|
||||
<div class="phone-frame">
|
||||
<div class="phone-screen">
|
||||
<div class="phone-island"></div>
|
||||
|
||||
<div class="screen-header">
|
||||
<span class="screen-title">Food & Drink</span>
|
||||
<span class="device-tag">● ANDROID</span>
|
||||
</div>
|
||||
|
||||
<div class="mock-item-card">
|
||||
<div class="item-thumb">☕</div>
|
||||
<div class="item-info">
|
||||
<span class="item-title">Iced Caramel Latte</span>
|
||||
<span class="item-sub">Double Shot · Oat Milk</span>
|
||||
</div>
|
||||
<span class="item-price">$5.40</span>
|
||||
</div>
|
||||
|
||||
<div class="mock-secondary-card">
|
||||
<span class="secondary-text">Delivery Address</span>
|
||||
<span class="secondary-val">Desk #42</span>
|
||||
</div>
|
||||
|
||||
<div class="action-target-wrapper">
|
||||
<!-- AI Grounding Box on Target Button -->
|
||||
<div class="grounding-box">
|
||||
<div class="grounding-tag">🎯 GROUNDED (0.99)</div>
|
||||
</div>
|
||||
<div class="mock-btn">
|
||||
Place Order ($5.40)
|
||||
</div>
|
||||
<!-- Tap Ripple -->
|
||||
<div class="tap-point">
|
||||
<div class="tap-ripple"></div>
|
||||
<div class="tap-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
|
||||
|
||||
def render_image(html_str, output_path):
|
||||
temp_html = f"/tmp/banner_{os.path.basename(output_path)}.html"
|
||||
with open(temp_html, "w", encoding="utf-8") as f:
|
||||
f.write(html_str)
|
||||
|
||||
cmd = [
|
||||
"google-chrome",
|
||||
"--headless=new",
|
||||
"--disable-gpu",
|
||||
"--virtual-time-budget=2000",
|
||||
"--window-size=1280,480",
|
||||
"--device-scale-factor=2",
|
||||
"--hide-scrollbars",
|
||||
f"--screenshot={output_path}",
|
||||
f"file://{temp_html}",
|
||||
]
|
||||
res = subprocess.run(cmd, capture_output=True, text=True)
|
||||
if os.path.exists(output_path):
|
||||
print(f"Rendered {output_path} ({os.path.getsize(output_path)} bytes)")
|
||||
else:
|
||||
print(f"Error rendering {output_path}: {res.stderr}")
|
||||
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
assets_dir = Path(__file__).resolve().parent
|
||||
os.makedirs(assets_dir, exist_ok=True)
|
||||
|
||||
html_content = create_banner_html()
|
||||
|
||||
# Generate main banner
|
||||
render_image(html_content, str(assets_dir / "artemis-banner.png"))
|
||||
# Also update en banner for consistency
|
||||
render_image(html_content, str(assets_dir / "artemis-banner-en.png"))
|
||||
@@ -0,0 +1,542 @@
|
||||
# Copyright 2026 Google LLC
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
#
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
|
||||
import base64
|
||||
import os
|
||||
from pathlib import Path
|
||||
import subprocess
|
||||
|
||||
|
||||
def generate_showcase(lang="zh", source_image=None):
|
||||
assets_dir = Path(__file__).resolve().parent
|
||||
if source_image and os.path.exists(source_image):
|
||||
image_path = Path(source_image)
|
||||
else:
|
||||
# Default lookup order
|
||||
candidates = [
|
||||
assets_dir / "ui_raw.png",
|
||||
assets_dir.parent.parent / "image.png",
|
||||
assets_dir / "artemis-ui-showcase.png",
|
||||
]
|
||||
image_path = next((p for p in candidates if p.exists()), None)
|
||||
|
||||
if lang == "zh":
|
||||
output_path = assets_dir / "artemis-ui-showcase.png"
|
||||
else:
|
||||
output_path = assets_dir / "artemis-ui-showcase-en.png"
|
||||
|
||||
if not image_path or not image_path.exists():
|
||||
print(f"Skipping showcase generation: source image not found for {lang}")
|
||||
return
|
||||
|
||||
with open(image_path, "rb") as f:
|
||||
img_b64 = base64.b64encode(f.read()).decode("utf-8")
|
||||
|
||||
if lang == "zh":
|
||||
tag1_title, tag1_desc = "顶栏视图切换", "主页 / 工作区"
|
||||
tag2_title, tag2_desc = "运行模式与录屏回放", "Pro / Flash · 回放"
|
||||
tag3_title = "实时推理流与操作轨迹"
|
||||
tag4_title, tag4_desc = "自然语言下发胶囊", "一句话驱动真机"
|
||||
tag5_title, tag5_desc = "任务队列看板", "状态流转 · 历史回溯"
|
||||
|
||||
card3_title = "③ 实时感知推理流解析"
|
||||
card3_tag = "LIVE STREAM"
|
||||
row1_title, row1_desc = (
|
||||
"动作感知与定位",
|
||||
"捕获点击、滑动与定位坐标(如 <code>[[381, 430]]</code>)",
|
||||
)
|
||||
row2_title, row2_desc = (
|
||||
"资源开销统计",
|
||||
"记录每步耗时(<code>Worked for 13s</code>)与 Token 消耗",
|
||||
)
|
||||
row3_title, row3_desc = (
|
||||
"挂载 Outputter 结构化输出",
|
||||
"任务结束时自动调起 Outputter 进行全轨迹证据核验与提取 (<code>output.md</code> / JSON)",
|
||||
)
|
||||
|
||||
tag1_pos = "top: 20px; left: 295px;"
|
||||
tag2_pos = "top: 76px; left: 660px;"
|
||||
tag3_pos = "top: 68px; left: 24px;"
|
||||
tag4_pos = "top: 494px; left: 360px;"
|
||||
tag5_pos = "top: 70px; left: 1075px;"
|
||||
card3_width = "545px"
|
||||
else:
|
||||
tag1_title, tag1_desc = "View Switcher", "Home / Workspace"
|
||||
tag2_title, tag2_desc = "Model & Replay", "Pro / Flash · Replay"
|
||||
tag3_title = "Live Agent Execution Stream"
|
||||
tag4_title, tag4_desc = "Prompt Dock", "Autonomous Execution"
|
||||
tag5_title, tag5_desc = "Task Queue & Dashboard", "Lifecycle & History"
|
||||
|
||||
card3_title = "③ Live Agent Reasoning & Stream"
|
||||
card3_tag = "LIVE STREAM"
|
||||
row1_title, row1_desc = (
|
||||
"Action Grounding & Perception",
|
||||
"Real-time gestures, taps & coordinates (e.g. <code>[[381, 430]]</code>)",
|
||||
)
|
||||
row2_title, row2_desc = (
|
||||
"Latency & Token Metrics",
|
||||
"Per-step duration tracking (<code>Worked for 13s</code>) & token cost",
|
||||
)
|
||||
row3_title, row3_desc = (
|
||||
"Mounted Outputter Synthesis",
|
||||
"Post-execution trace verification & structured data extraction into <code>output.md</code> / JSON",
|
||||
)
|
||||
|
||||
tag1_pos = "top: 20px; left: 295px;"
|
||||
tag2_pos = "top: 76px; left: 660px;"
|
||||
tag3_pos = "top: 68px; left: 24px;"
|
||||
tag4_pos = "top: 494px; left: 350px;"
|
||||
tag5_pos = "top: 70px; left: 1075px;"
|
||||
card3_width = "550px"
|
||||
|
||||
html_content = f"""<!DOCTYPE html>
|
||||
<html lang="{"zh-CN" if lang == "zh" else "en"}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Google+Sans+Display:wght@400;500;600;700;800;900&family=Google+Sans+Mono:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
|
||||
|
||||
* {{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}}
|
||||
|
||||
body {{
|
||||
width: 1545px;
|
||||
height: 618px;
|
||||
background-color: transparent;
|
||||
font-family: 'Google Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}}
|
||||
|
||||
.canvas-container {{
|
||||
position: relative;
|
||||
width: 1545px;
|
||||
height: 618px;
|
||||
overflow: hidden;
|
||||
}}
|
||||
|
||||
.bg-screenshot {{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1545px;
|
||||
height: 618px;
|
||||
display: block;
|
||||
}}
|
||||
|
||||
/* High-Precision Grounding Bounding Boxes */
|
||||
.grounding-box {{
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
}}
|
||||
|
||||
/* Corner reticles / brackets for rectangular boxes */
|
||||
.corner-tl, .corner-tr, .corner-bl, .corner-br {{
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}}
|
||||
.corner-tl {{ top: -2px; left: -2px; border-top: 3.5px solid; border-left: 3.5px solid; border-top-left-radius: 5px; }}
|
||||
.corner-tr {{ top: -2px; right: -2px; border-top: 3.5px solid; border-right: 3.5px solid; border-top-right-radius: 5px; }}
|
||||
.corner-bl {{ bottom: -2px; left: -2px; border-bottom: 3.5px solid; border-left: 3.5px solid; border-bottom-left-radius: 5px; }}
|
||||
.corner-br {{ bottom: -2px; right: -2px; border-bottom: 3.5px solid; border-right: 3.5px solid; border-bottom-right-radius: 5px; }}
|
||||
|
||||
/* Region 1: Nav Switcher (Top Left Pill Capsule) */
|
||||
.box-nav {{
|
||||
top: 15px;
|
||||
left: 14px;
|
||||
width: 266px;
|
||||
height: 50px;
|
||||
border: 2.5px solid #2563EB;
|
||||
border-radius: 25px;
|
||||
background: rgba(37, 99, 235, 0.05);
|
||||
box-shadow: 0 0 16px rgba(37, 99, 235, 0.35), inset 0 0 10px rgba(37, 99, 235, 0.1);
|
||||
}}
|
||||
|
||||
/* Region 2: Model & Replay (Top Center-Right Pills) */
|
||||
.box-model {{
|
||||
top: 15px;
|
||||
left: 752px;
|
||||
width: 252px;
|
||||
height: 50px;
|
||||
border: 2.5px solid #7C3AED;
|
||||
border-radius: 25px;
|
||||
background: rgba(124, 58, 237, 0.05);
|
||||
box-shadow: 0 0 16px rgba(124, 58, 237, 0.35), inset 0 0 10px rgba(124, 58, 237, 0.1);
|
||||
}}
|
||||
|
||||
/* Region 3: Trajectory & Steps (Left Main Area) */
|
||||
.box-stream {{
|
||||
top: 86px;
|
||||
left: 14px;
|
||||
width: 390px;
|
||||
height: 446px;
|
||||
border: 2.5px solid #059669;
|
||||
border-radius: 12px;
|
||||
background: rgba(5, 150, 105, 0.03);
|
||||
box-shadow: 0 0 20px rgba(5, 150, 105, 0.25), inset 0 0 12px rgba(5, 150, 105, 0.08);
|
||||
}}
|
||||
|
||||
/* Region 4: Command Capsule (Bottom Center) */
|
||||
.box-command {{
|
||||
top: 546px;
|
||||
left: 432px;
|
||||
width: 165px;
|
||||
height: 60px;
|
||||
border: 2.5px solid #DB2777;
|
||||
border-radius: 30px;
|
||||
background: rgba(219, 39, 119, 0.05);
|
||||
box-shadow: 0 0 20px rgba(219, 39, 119, 0.35), inset 0 0 10px rgba(219, 39, 119, 0.1);
|
||||
}}
|
||||
|
||||
/* Region 5: Task Queue & History (Right Sidebar Panel) */
|
||||
.box-queue {{
|
||||
top: 10px;
|
||||
left: 1028px;
|
||||
width: 508px;
|
||||
height: 598px;
|
||||
border: 2.5px solid #D97706;
|
||||
border-radius: 10px;
|
||||
background: rgba(217, 119, 6, 0.03);
|
||||
box-shadow: 0 0 22px rgba(217, 119, 6, 0.25), inset 0 0 14px rgba(217, 119, 6, 0.08);
|
||||
}}
|
||||
|
||||
/* Large High-Contrast Pill Callout Tags */
|
||||
.pill-tag {{
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 15px 7px 12px;
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||
z-index: 50;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(10px);
|
||||
}}
|
||||
|
||||
.badge-num {{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: #FFFFFF;
|
||||
font-size: 13.5px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}}
|
||||
|
||||
.badge-title {{
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.2px;
|
||||
color: #FFFFFF;
|
||||
white-space: nowrap;
|
||||
}}
|
||||
|
||||
.badge-desc {{
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
opacity: 0.95;
|
||||
white-space: nowrap;
|
||||
padding-left: 7px;
|
||||
border-left: 1.5px solid rgba(255, 255, 255, 0.4);
|
||||
}}
|
||||
|
||||
/* Theme color stylings */
|
||||
.tag-blue {{
|
||||
background: #1D4ED8;
|
||||
border: 1.8px solid #93C5FD;
|
||||
}}
|
||||
.tag-blue .badge-num {{ color: #1D4ED8; }}
|
||||
.tag-blue .badge-desc {{ color: #DBEAFE; }}
|
||||
|
||||
.tag-purple {{
|
||||
background: #6D28D9;
|
||||
border: 1.8px solid #C4B5FD;
|
||||
}}
|
||||
.tag-purple .badge-num {{ color: #6D28D9; }}
|
||||
.tag-purple .badge-desc {{ color: #EDE9FE; }}
|
||||
|
||||
.tag-green {{
|
||||
background: #047857;
|
||||
border: 1.8px solid #6EE7B7;
|
||||
}}
|
||||
.tag-green .badge-num {{ color: #047857; }}
|
||||
.tag-green .badge-desc {{ color: #D1FAE5; }}
|
||||
|
||||
.tag-pink {{
|
||||
background: #BE185D;
|
||||
border: 1.8px solid #F9A8D4;
|
||||
}}
|
||||
.tag-pink .badge-num {{ color: #BE185D; }}
|
||||
.tag-pink .badge-desc {{ color: #FCE7F3; }}
|
||||
|
||||
.tag-amber {{
|
||||
background: #B45309;
|
||||
border: 1.8px solid #FCD34D;
|
||||
}}
|
||||
.tag-amber .badge-num {{ color: #B45309; }}
|
||||
.tag-amber .badge-desc {{ color: #FEF3C7; }}
|
||||
|
||||
/* Informational Floating Guide Panel in Central Empty Area */
|
||||
.center-features-panel {{
|
||||
position: absolute;
|
||||
top: 135px;
|
||||
left: 440px;
|
||||
width: {card3_width};
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 2px solid rgba(16, 185, 129, 0.45);
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.08);
|
||||
padding: 18px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 13px;
|
||||
z-index: 40;
|
||||
}}
|
||||
|
||||
.panel-header {{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1.5px solid rgba(0, 0, 0, 0.08);
|
||||
}}
|
||||
|
||||
.panel-title-group {{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
}}
|
||||
|
||||
.panel-icon {{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 7px;
|
||||
background: rgba(16, 185, 129, 0.18);
|
||||
color: #047857;
|
||||
font-size: 16px;
|
||||
}}
|
||||
|
||||
.panel-title {{
|
||||
font-size: 15.5px;
|
||||
font-weight: 900;
|
||||
color: #0F172A;
|
||||
letter-spacing: -0.2px;
|
||||
}}
|
||||
|
||||
.panel-tag {{
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: #047857;
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
padding: 3px 9px;
|
||||
border-radius: 999px;
|
||||
letter-spacing: 0.5px;
|
||||
}}
|
||||
|
||||
.panel-items {{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 11px;
|
||||
}}
|
||||
|
||||
.panel-row {{
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 9px;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.45;
|
||||
color: #1E293B;
|
||||
}}
|
||||
|
||||
.row-dot {{
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #059669;
|
||||
margin-top: 6px;
|
||||
flex-shrink: 0;
|
||||
}}
|
||||
|
||||
.row-strong {{
|
||||
font-weight: 800;
|
||||
color: #0F172A;
|
||||
}}
|
||||
|
||||
.panel-row code {{
|
||||
background: #F1F5F9;
|
||||
border: 1px solid #CBD5E1;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'Google Sans Mono', 'Roboto Mono', monospace;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
color: #0F172A;
|
||||
white-space: nowrap;
|
||||
}}
|
||||
|
||||
/* Leader connection line from Step 3 to center card */
|
||||
.leader-line {{
|
||||
position: absolute;
|
||||
top: 240px;
|
||||
left: 404px;
|
||||
width: 36px;
|
||||
height: 2.5px;
|
||||
background: #059669;
|
||||
box-shadow: 0 0 6px rgba(5, 150, 105, 0.6);
|
||||
z-index: 45;
|
||||
}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="canvas-container">
|
||||
<!-- Original Subject Image -->
|
||||
<img src="data:image/png;base64,{img_b64}" class="bg-screenshot" alt="Artemis Console" />
|
||||
|
||||
<!-- 1. Nav Switcher (Pill-shaped bounding box snugly wrapping buttons) -->
|
||||
<div class="grounding-box box-nav"></div>
|
||||
<div class="pill-tag tag-blue" style="{tag1_pos}">
|
||||
<span class="badge-num">1</span>
|
||||
<span class="badge-title">{tag1_title}</span>
|
||||
<span class="badge-desc">{tag1_desc}</span>
|
||||
</div>
|
||||
|
||||
<!-- 2. Model & Replay (Pill-shaped bounding box snugly wrapping buttons) -->
|
||||
<div class="grounding-box box-model"></div>
|
||||
<div class="pill-tag tag-purple" style="{tag2_pos}">
|
||||
<span class="badge-num">2</span>
|
||||
<span class="badge-title">{tag2_title}</span>
|
||||
<span class="badge-desc">{tag2_desc}</span>
|
||||
</div>
|
||||
|
||||
<!-- 3. Trajectory & Steps (Rectangular box with corner brackets) -->
|
||||
<div class="grounding-box box-stream" style="border-color: #059669;">
|
||||
<div class="corner-tl" style="border-color: #34D399;"></div>
|
||||
<div class="corner-tr" style="border-color: #34D399;"></div>
|
||||
<div class="corner-bl" style="border-color: #34D399;"></div>
|
||||
<div class="corner-br" style="border-color: #34D399;"></div>
|
||||
</div>
|
||||
<div class="pill-tag tag-green" style="{tag3_pos}">
|
||||
<span class="badge-num">3</span>
|
||||
<span class="badge-title">{tag3_title}</span>
|
||||
</div>
|
||||
|
||||
<!-- Floating details card in empty white space for Area 3 -->
|
||||
<div class="leader-line"></div>
|
||||
<div class="center-features-panel">
|
||||
<div class="panel-header">
|
||||
<div class="panel-title-group">
|
||||
<div class="panel-icon">⚡</div>
|
||||
<span class="panel-title">{card3_title}</span>
|
||||
</div>
|
||||
<span class="panel-tag">{card3_tag}</span>
|
||||
</div>
|
||||
<div class="panel-items">
|
||||
<div class="panel-row">
|
||||
<div class="row-dot"></div>
|
||||
<div><span class="row-strong">{row1_title}</span>: {row1_desc}</div>
|
||||
</div>
|
||||
<div class="panel-row">
|
||||
<div class="row-dot"></div>
|
||||
<div><span class="row-strong">{row2_title}</span>: {row2_desc}</div>
|
||||
</div>
|
||||
<div class="panel-row">
|
||||
<div class="row-dot"></div>
|
||||
<div><span class="row-strong">{row3_title}</span>: {row3_desc}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. Command Capsule (Pill-shaped bounding box) -->
|
||||
<div class="grounding-box box-command"></div>
|
||||
<div class="pill-tag tag-pink" style="{tag4_pos}">
|
||||
<span class="badge-num">4</span>
|
||||
<span class="badge-title">{tag4_title}</span>
|
||||
<span class="badge-desc">{tag4_desc}</span>
|
||||
</div>
|
||||
|
||||
<!-- 5. Task Queue & History (Right Panel) -->
|
||||
<div class="grounding-box box-queue" style="border-color: #D97706;">
|
||||
<div class="corner-tl" style="border-color: #FBBF24;"></div>
|
||||
<div class="corner-tr" style="border-color: #FBBF24;"></div>
|
||||
<div class="corner-bl" style="border-color: #FBBF24;"></div>
|
||||
<div class="corner-br" style="border-color: #FBBF24;"></div>
|
||||
</div>
|
||||
<div class="pill-tag tag-amber" style="{tag5_pos}">
|
||||
<span class="badge-num">5</span>
|
||||
<span class="badge-title">{tag5_title}</span>
|
||||
<span class="badge-desc">{tag5_desc}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
"""
|
||||
|
||||
temp_html = f"/tmp/ui_showcase_render_{lang}.html"
|
||||
with open(temp_html, "w", encoding="utf-8") as f:
|
||||
f.write(html_content)
|
||||
|
||||
chrome_candidates = [
|
||||
"google-chrome",
|
||||
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
|
||||
"/Applications/Chromium.app/Contents/MacOS/Chromium",
|
||||
"chromium",
|
||||
"chromium-browser",
|
||||
]
|
||||
chrome_bin = next(
|
||||
(
|
||||
c
|
||||
for c in chrome_candidates
|
||||
if os.path.exists(c)
|
||||
or subprocess.run(["which", c], capture_output=True).returncode == 0
|
||||
),
|
||||
"google-chrome",
|
||||
)
|
||||
|
||||
cmd = [
|
||||
chrome_bin,
|
||||
"--headless=new",
|
||||
"--disable-gpu",
|
||||
"--virtual-time-budget=2000",
|
||||
"--window-size=1545,618",
|
||||
"--device-scale-factor=2",
|
||||
"--hide-scrollbars",
|
||||
f"--screenshot={output_path}",
|
||||
f"file://{temp_html}",
|
||||
]
|
||||
res = subprocess.run(cmd, capture_output=True, text=True)
|
||||
if os.path.exists(output_path):
|
||||
print(f"Successfully generated {output_path} ({os.path.getsize(output_path)} bytes)")
|
||||
else:
|
||||
print(f"Error rendering: {res.stderr}")
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
generate_showcase("zh")
|
||||
generate_showcase("en")
|
||||
|
After Width: | Height: | Size: 221 KiB |
@@ -0,0 +1,56 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="240" height="240">
|
||||
<defs>
|
||||
<!-- Radial Glows for Mesh effect -->
|
||||
<radialGradient id="redGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#EA4335" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#EA4335" stop-opacity="0.95" />
|
||||
<stop offset="100%" stop-color="#EA4335" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="yellowGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FBBC05" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#FBBC05" stop-opacity="0.95" />
|
||||
<stop offset="100%" stop-color="#FBBC05" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="greenGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#34A853" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#34A853" stop-opacity="0.95" />
|
||||
<stop offset="100%" stop-color="#34A853" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
<!-- Robot Silhouette Mask -->
|
||||
<mask id="robotMeshMask">
|
||||
<rect width="240" height="240" fill="black" />
|
||||
|
||||
<!-- Antennae -->
|
||||
<path d="M 90 60 Q 75 35 65 28" stroke="white" stroke-width="10" stroke-linecap="round" />
|
||||
<circle cx="62" cy="24" r="10" fill="white" />
|
||||
<path d="M 150 60 Q 165 35 175 28" stroke="white" stroke-width="10" stroke-linecap="round" />
|
||||
<circle cx="178" cy="24" r="10" fill="white" />
|
||||
|
||||
<!-- Ears -->
|
||||
<rect x="28" y="100" width="16" height="48" rx="8" fill="white" />
|
||||
<rect x="196" y="100" width="16" height="48" rx="8" fill="white" />
|
||||
|
||||
<!-- Head -->
|
||||
<rect x="44" y="58" width="152" height="132" rx="40" fill="white" />
|
||||
|
||||
<!-- Visor Cutout -->
|
||||
<rect x="64" y="88" width="112" height="52" rx="22" fill="black" />
|
||||
|
||||
<!-- Eyes (Inside Visor) -->
|
||||
<path d="M 82 118 Q 92 106 102 118" stroke="white" stroke-width="6" stroke-linecap="round" fill="none" />
|
||||
<path d="M 138 118 Q 148 106 158 118" stroke="white" stroke-width="6" stroke-linecap="round" fill="none" />
|
||||
|
||||
<!-- Smile Cutout -->
|
||||
<path d="M 104 158 Q 120 172 136 158" stroke="black" stroke-width="6" stroke-linecap="round" fill="none" />
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<!-- Mesh Gradient applied to Mask -->
|
||||
<g mask="url(#robotMeshMask)">
|
||||
<rect width="240" height="240" fill="#4285F4" />
|
||||
<circle cx="160" cy="50" r="100" fill="url(#redGlow)" />
|
||||
<circle cx="60" cy="120" r="95" fill="url(#yellowGlow)" />
|
||||
<circle cx="110" cy="200" r="95" fill="url(#greenGlow)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,56 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240" width="240" height="240">
|
||||
<defs>
|
||||
<!-- Radial Glows for Mesh effect -->
|
||||
<radialGradient id="redGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#EA4335" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#EA4335" stop-opacity="0.95" />
|
||||
<stop offset="100%" stop-color="#EA4335" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="yellowGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#FBBC05" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#FBBC05" stop-opacity="0.95" />
|
||||
<stop offset="100%" stop-color="#FBBC05" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
<radialGradient id="greenGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" stop-color="#34A853" stop-opacity="1" />
|
||||
<stop offset="40%" stop-color="#34A853" stop-opacity="0.95" />
|
||||
<stop offset="100%" stop-color="#34A853" stop-opacity="0" />
|
||||
</radialGradient>
|
||||
|
||||
<!-- Robot Silhouette Mask -->
|
||||
<mask id="robotMeshMask">
|
||||
<rect width="240" height="240" fill="black" />
|
||||
|
||||
<!-- Antennae -->
|
||||
<path d="M 90 60 Q 75 35 65 28" stroke="white" stroke-width="10" stroke-linecap="round" />
|
||||
<circle cx="62" cy="24" r="10" fill="white" />
|
||||
<path d="M 150 60 Q 165 35 175 28" stroke="white" stroke-width="10" stroke-linecap="round" />
|
||||
<circle cx="178" cy="24" r="10" fill="white" />
|
||||
|
||||
<!-- Ears -->
|
||||
<rect x="28" y="100" width="16" height="48" rx="8" fill="white" />
|
||||
<rect x="196" y="100" width="16" height="48" rx="8" fill="white" />
|
||||
|
||||
<!-- Head -->
|
||||
<rect x="44" y="58" width="152" height="132" rx="40" fill="white" />
|
||||
|
||||
<!-- Visor Cutout -->
|
||||
<rect x="64" y="88" width="112" height="52" rx="22" fill="black" />
|
||||
|
||||
<!-- Eyes (Inside Visor) -->
|
||||
<path d="M 82 118 Q 92 106 102 118" stroke="white" stroke-width="6" stroke-linecap="round" fill="none" />
|
||||
<path d="M 138 118 Q 148 106 158 118" stroke="white" stroke-width="6" stroke-linecap="round" fill="none" />
|
||||
|
||||
<!-- Smile Cutout -->
|
||||
<path d="M 104 158 Q 120 172 136 158" stroke="black" stroke-width="6" stroke-linecap="round" fill="none" />
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<!-- Mesh Gradient applied to Mask -->
|
||||
<g mask="url(#robotMeshMask)">
|
||||
<rect width="240" height="240" fill="#4285F4" />
|
||||
<circle cx="160" cy="50" r="100" fill="url(#redGlow)" />
|
||||
<circle cx="60" cy="120" r="95" fill="url(#yellowGlow)" />
|
||||
<circle cx="110" cy="200" r="95" fill="url(#greenGlow)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 126 KiB |