| """ |
| 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> |
| """ |
|
|
