SahilCodevally/codevally-vision-language-action

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