File size: 3,822 Bytes
e1c010e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | """
src/ui/components.py — Reusable HTML components for the Codevally VLA UI.
Each constant is a self-contained HTML string ready to drop into a
``gr.HTML()`` call. Keeping HTML here avoids polluting layout.py with
long inline strings.
"""
HEADER_HTML: str = """
<div class="cv-header">
<div style="display:flex; align-items:center; gap:16px; margin-bottom:14px;
position:relative; z-index:1;">
<div style="width:44px; height:44px;
background:linear-gradient(135deg,#1A4BDB,#00D4FF);
border-radius:12px; display:flex; align-items:center;
justify-content:center; font-size:22px; flex-shrink:0;
box-shadow:0 4px 16px rgba(0,212,255,0.3);">🤖</div>
<div>
<div style="font-size:22px; font-weight:700; color:#fff;
letter-spacing:-0.01em; line-height:1.2;">
Vision Language Action
</div>
<div style="font-size:13px; color:rgba(255,255,255,0.5); margin-top:2px;">
Powered by
<a href="https://www.codevally.com" target="_blank"
style="color:#00D4FF; font-weight:600; text-decoration:none;">
Codevally
</a>
· Open Vocabulary Detection + LLM Reasoning
</div>
</div>
<div style="margin-left:auto; display:flex; flex-direction:column;
align-items:flex-end; gap:6px; position:relative; z-index:1;">
<a href="https://www.codevally.com" target="_blank"
style="background:rgba(0,212,255,0.12); border:1px solid rgba(0,212,255,0.35);
border-radius:8px; padding:7px 18px; color:#00D4FF; font-size:13px;
font-weight:600; text-decoration:none; letter-spacing:0.02em;
transition:background 0.2s;"
onmouseover="this.style.background='rgba(0,212,255,0.2)'"
onmouseout="this.style.background='rgba(0,212,255,0.12)'">
🌐 codevally.com
</a>
</div>
</div>
<p style="font-size:14px; color:rgba(255,255,255,0.6); max-width:760px;
line-height:1.7; margin:0 0 14px; position:relative; z-index:1;">
An enterprise-grade
<strong style="color:rgba(255,255,255,0.85);">
Vision Language Action (VLA) pipeline
</strong>
that understands any natural-language instruction, detects objects using
open vocabulary AI, generates structured action plans, and visualizes
robotic task execution — all in real time.
</p>
<div style="display:flex; flex-wrap:wrap; gap:6px;
position:relative; z-index:1; margin-bottom:0;">
<span class="cv-badge">🔍 Grounding DINO</span>
<span class="cv-badge">🧠 GPT-4o</span>
<span class="cv-badge">🎯 Open Vocabulary</span>
<span class="cv-badge">⚡ Real-time Inference</span>
<span class="cv-badge">🤖 Action Planning</span>
<span class="cv-badge">🏭 Industrial AI</span>
</div>
<div class="how-it-works">
<div class="hiw-step">
<span class="hiw-icon">📸</span>
<span class="hiw-label">Vision</span>
Open vocabulary object detection
</div>
<div class="hiw-step">
<span class="hiw-icon">🧠</span>
<span class="hiw-label">Language</span>
LLM command interpretation
</div>
<div class="hiw-step">
<span class="hiw-icon">📋</span>
<span class="hiw-label">Planning</span>
Structured action steps
</div>
<div class="hiw-step">
<span class="hiw-icon">🎬</span>
<span class="hiw-label">Action</span>
Annotated visualization
</div>
</div>
</div>
"""
FOOTER_HTML: str = """
<div class="cv-footer">
Built by
<a href="https://www.codevally.com" target="_blank">Codevally</a>
· Vision Language Action AI Platform
· © 2026 Codevally Technologies
</div>
"""
|