Spaces:

panny247
/

hello_world

Running

PanGalactic Claude Opus 4.6 commited on Feb 16

Commit

981199c

1 Parent(s): b59fd08

Replace landing page with detailed feature showcase

22 annotated screenshots, demo video walkthrough,
full feature descriptions for all dashboard tabs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Files changed (24) hide show

demo_video.mp4 +3 -0
frames/01_status_dashboard.jpg +3 -0
frames/03_3d_simulation.jpg +3 -0
frames/04_joystick_cameras.jpg +3 -0
frames/05_telemetry.jpg +3 -0
frames/06_emotions_gallery.jpg +3 -0
frames/07_oscillations.jpg +3 -0
frames/08_conversation_ai.jpg +3 -0
frames/09_scratchpad_diagrams.jpg +3 -0
frames/10_scratchpad_recipe.jpg +3 -0
frames/11_ai_tool_use.jpg +3 -0
frames/12_timers_ambient.jpg +3 -0
frames/13_shell_terminal.jpg +3 -0
frames/14_vision_settings.jpg +3 -0
frames/15_pose_detection.jpg +3 -0
frames/16_audio_settings.jpg +3 -0
frames/17_tuning_llm.jpg +3 -0
frames/18_scenes_skins.jpg +3 -0
frames/21_media_tab.jpg +3 -0
frames/22_brazil_skin.jpg +3 -0
frames/24_crystal_cave.jpg +3 -0
frames/25_clouds_full.jpg +3 -0
frames/26_floating_panels.jpg +3 -0
index.html +1059 -83

demo_video.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:2d7847eeae9bf20dd708e8d0e49abc26b014660574848076b6821041e39de7fe
+size 28259684

frames/01_status_dashboard.jpg ADDED Viewed

Git LFS Details

SHA256: 93227a0b909b7b20e8e0a536a413f28fb70e5c263a01a70beae614621008c2d0
Pointer size: 131 Bytes
Size of remote file: 362 kB

frames/03_3d_simulation.jpg ADDED Viewed

Git LFS Details

SHA256: 4350dc8591c9559a246bab8acc190213014e2aba3051cb7c095fb4186511ffa9
Pointer size: 131 Bytes
Size of remote file: 376 kB

frames/04_joystick_cameras.jpg ADDED Viewed

Git LFS Details

SHA256: 88452d2d934a9b3188ef4e0cfd5272e725f4a2695d5f3a79d4393cefbafd930d
Pointer size: 131 Bytes
Size of remote file: 360 kB

frames/05_telemetry.jpg ADDED Viewed

Git LFS Details

SHA256: 078824502fd86cbaee25f3b18fe875efbb50066e7c616e0748a69e815373b216
Pointer size: 131 Bytes
Size of remote file: 384 kB

frames/06_emotions_gallery.jpg ADDED Viewed

Git LFS Details

SHA256: 65b897e04a9ae0079b114a1b319616af72018f879536c57c16f1100c0dcd66e8
Pointer size: 131 Bytes
Size of remote file: 573 kB

frames/07_oscillations.jpg ADDED Viewed

Git LFS Details

SHA256: 6ba118b026559f3681b0f11bf88cfe8543cd85d01eef8fe36f3dfd153971556b
Pointer size: 131 Bytes
Size of remote file: 243 kB

frames/08_conversation_ai.jpg ADDED Viewed

Git LFS Details

SHA256: 74d2f56286ee4597fc0e068fcb72f8e69bb205e188dceea339d189b9910d5106
Pointer size: 131 Bytes
Size of remote file: 366 kB

frames/09_scratchpad_diagrams.jpg ADDED Viewed

Git LFS Details

SHA256: d180ec796cb8d49c8107dbdee6884c3cadb61e7845d697e9269e827a6a1fefd8
Pointer size: 131 Bytes
Size of remote file: 285 kB

frames/10_scratchpad_recipe.jpg ADDED Viewed

Git LFS Details

SHA256: f635860b85a0a3f3baa2eabcecd46fb0415b8a57c60b347088598bbd0674446c
Pointer size: 131 Bytes
Size of remote file: 482 kB

frames/11_ai_tool_use.jpg ADDED Viewed

Git LFS Details

SHA256: c706152309c68927aecd21bd94c0c3cc5e68dddb0208f744224dd638889e43a1
Pointer size: 131 Bytes
Size of remote file: 236 kB

frames/12_timers_ambient.jpg ADDED Viewed

Git LFS Details

SHA256: c93c55cbc1816b2d68709c47fbb39538a4e82de836207a6b30f640b8a1e3e047
Pointer size: 131 Bytes
Size of remote file: 358 kB

frames/13_shell_terminal.jpg ADDED Viewed

Git LFS Details

SHA256: ee50321f6f75bc88e5fd24ae90a398058b4a534ff49a85ac67980463b35e5f7d
Pointer size: 131 Bytes
Size of remote file: 473 kB

frames/14_vision_settings.jpg ADDED Viewed

Git LFS Details

SHA256: 471a4fe9ee36b9321ab7ef52b98463d565cc358c1f628d8c5a16ad2af37ba2f1
Pointer size: 131 Bytes
Size of remote file: 253 kB

frames/15_pose_detection.jpg ADDED Viewed

Git LFS Details

SHA256: 87a3365ddef36e86268c2f4797bd2abd2e389b42ef0390bdf852e8f517550925
Pointer size: 131 Bytes
Size of remote file: 378 kB

frames/16_audio_settings.jpg ADDED Viewed

Git LFS Details

SHA256: e10458ca6620c62a37132e5ca792d87ee2e36d5d4addf329e9c49ea898632d03
Pointer size: 131 Bytes
Size of remote file: 212 kB

frames/17_tuning_llm.jpg ADDED Viewed

Git LFS Details

SHA256: aa573750d0aa1c46e42be0f9a720dbad4c20dee373c27c27e8a6f43ca412ded5
Pointer size: 131 Bytes
Size of remote file: 242 kB

frames/18_scenes_skins.jpg ADDED Viewed

Git LFS Details

SHA256: b98353cd959622817623dbc91603b68329f6331c73f2902ea1b6ae0ef7204ad3
Pointer size: 131 Bytes
Size of remote file: 241 kB

frames/21_media_tab.jpg ADDED Viewed

Git LFS Details

SHA256: 1b944b2f049f7e8ecf5a9ea98a98dab02c9ed51f71ccd82451727f87d0d08d08
Pointer size: 131 Bytes
Size of remote file: 607 kB

frames/22_brazil_skin.jpg ADDED Viewed

Git LFS Details

SHA256: 2b16b6ed225a482013b4899173509d4f3fa6e868b793a988ec103de734a103d4
Pointer size: 131 Bytes
Size of remote file: 260 kB

frames/24_crystal_cave.jpg ADDED Viewed

Git LFS Details

SHA256: 831b980136a0f634d555d1971331b2f884445218bf4315f8d0bd5334f5b4c7d4
Pointer size: 131 Bytes
Size of remote file: 227 kB

frames/25_clouds_full.jpg ADDED Viewed

Git LFS Details

SHA256: bdd40bd14fbb5b2c55f7431826291f209fafc66669dcffe9d874959e4d6fcbdb
Pointer size: 131 Bytes
Size of remote file: 208 kB

frames/26_floating_panels.jpg ADDED Viewed

Git LFS Details

SHA256: b2b11f10fb9aaee97fc2ecbd13e9739888c64bf8ee42def7d9659d9880989b02
Pointer size: 131 Bytes
Size of remote file: 370 kB

index.html CHANGED Viewed

@@ -1,115 +1,1091 @@
-<!doctype html>
 <html lang="en">
 <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Hello World — Reachy Mini DevKit</title>
-    <meta name="description" content="The complete web dashboard for Reachy Mini. AI conversation, real-time vision, 81 emotions, 146 API endpoints. Pure Python + vanilla JS." />
-    <link rel="stylesheet" href="style.css" />
 </head>
 <body>
-<nav class="nav">
-    <div class="nav-inner">
-        <span class="nav-brand">Hello World</span>
-        <div class="nav-links">
-            <a href="#features">Features</a>
-            <a href="#setup">Install</a>
-            <a href="docs.html" class="nav-docs">Docs</a>
         </div>
     </div>
-</nav>
-<section class="hero">
-    <div class="hero-content">
-        <div class="badge">Reachy Mini Community App</div>
-        <h1>One app to<br>rule them all.</h1>
-        <p class="hero-sub">The complete web dashboard for Reachy Mini.</p>
-        <div class="stats">
-            <div class="stat"><strong>146</strong> endpoints</div>
-            <div class="stat"><strong>31</strong> AI tools</div>
-            <div class="stat"><strong>81</strong> emotions</div>
-            <div class="stat"><strong>0</strong> frameworks</div>
-        </div>
-        <div class="tech-row">
-            <span>Python</span>
-            <span>FastAPI</span>
-            <span>LiteLLM</span>
-            <span>ONNX Runtime</span>
-            <span>WebGPU</span>
-            <span>Vanilla JS</span>
-            <span>MuJoCo</span>
-        </div>
-    </div>
-    <div class="hero-img">
-        <img src="screenshots/dashboard-overview.png" alt="Hello World dashboard" />
     </div>
 </section>
-<section class="showcase" id="features">
-    <div class="grid">
-        <div class="card wide">
-            <img src="screenshots/conversation-active.png" alt="AI conversation with tool calls" loading="lazy" />
-            <div class="label"><strong>AI Conversation</strong><span>Voice + text chat with 31 callable tools</span></div>
         </div>
-        <div class="card">
-            <video autoplay loop muted playsinline>
-                <source src="screenshots/status-tab.mp4" type="video/mp4" />
-            </video>
-            <div class="label"><strong>System Telemetry</strong><span>CPU, RAM, disk, network, WiFi, fan</span></div>
         </div>
-        <div class="card">
-            <img src="screenshots/head-telemetry.png" alt="Head telemetry charts with joystick control" loading="lazy" />
-            <div class="label"><strong>Head Telemetry + Joystick</strong><span>Roll, pitch, yaw, Stewart platform, body control</span></div>
         </div>
-        <div class="card">
-            <img src="screenshots/vision-pose.png" alt="YOLO pose estimation with multiple cameras" loading="lazy" />
-            <div class="label"><strong>YOLO Vision</strong><span>Pose, detection, segmentation &mdash; CM4 + WebGPU</span></div>
         </div>
-        <div class="card">
-            <video autoplay loop muted playsinline>
-                <source src="screenshots/telemetry-tab.mp4" type="video/mp4" />
-            </video>
-            <div class="label"><strong>3D Digital Twin</strong><span>MuJoCo + Three.js</span></div>
         </div>
-        <div class="card wide">
-            <img src="screenshots/moves-gallery.png" alt="81 emotions and 19 dances" loading="lazy" />
-            <div class="label"><strong>81 Emotions + 19 Dances</strong><span>Searchable gallery with live preview</span></div>
         </div>
-        <div class="card">
-            <img src="screenshots/scratchpad-diagrams.png" alt="AI-generated diagrams and visualizations" loading="lazy" />
-            <div class="label"><strong>Generative UI</strong><span>AI-created charts, diagrams, recipes</span></div>
         </div>
-        <div class="card">
-            <img src="screenshots/scene-3d.png" alt="Procedural 3D scene with robot" loading="lazy" />
-            <div class="label"><strong>19 Scenes + 21 Skins</strong><span>Procedural environments</span></div>
         </div>
     </div>
 </section>
-<section class="install" id="setup">
-    <h2>Up and running in 2 steps</h2>
-    <div class="install-row">
-        <div class="install-step">
-            <span class="step-n">1</span>
-            <code>pip install -e .</code>
-            <span class="step-note">In the apps venv on your Reachy Mini</span>
         </div>
-        <div class="install-step">
-            <span class="step-n">2</span>
-            <code>http://reachy-mini.local:8042</code>
-            <span class="step-note">Open in any browser</span>
         </div>
     </div>
 </section>
-<footer class="footer">
     <p>
-        <strong>Hello World</strong> for Reachy Mini
-        &middot; Built with <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank">reachy-mini SDK</a>
-        &middot; <a href="https://pollen-robotics-reachy-mini.hf.space/#/apps" target="_blank">Browse Apps</a>
     </p>
-    <p class="footer-sub">Solo project &middot; Python 3.10+ &middot; Vanilla JS &middot; FastAPI &middot; No build step &middot; <a href="https://huggingface.co/spaces/panny247/hello_world/discussions">Feedback welcome</a></p>
 </footer>
 </body>

+<!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello World - One App to Rule Them All | Reachy Mini Dashboard</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        :root {
+            --bg-primary: #0a0a0f;
+            --bg-secondary: #12121a;
+            --bg-card: #1a1a26;
+            --bg-card-hover: #222233;
+            --accent: #7c5cfc;
+            --accent-glow: rgba(124, 92, 252, 0.3);
+            --accent-secondary: #5ce0d8;
+            --text-primary: #e8e8f0;
+            --text-secondary: #9090a8;
+            --text-muted: #606078;
+            --border: #2a2a3a;
+            --success: #4ade80;
+            --warning: #fbbf24;
+            --danger: #f87171;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        /* Hero Section */
+        .hero {
+            position: relative;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 2rem;
+            overflow: hidden;
+        }
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: radial-gradient(ellipse at 30% 20%, rgba(124, 92, 252, 0.08) 0%, transparent 50%),
+                        radial-gradient(ellipse at 70% 80%, rgba(92, 224, 216, 0.06) 0%, transparent 50%);
+            animation: drift 20s ease-in-out infinite alternate;
+        }
+        @keyframes drift {
+            0% { transform: translate(0, 0) rotate(0deg); }
+            100% { transform: translate(-2%, -1%) rotate(1deg); }
+        }
+        .hero-content {
+            position: relative;
+            z-index: 1;
+            max-width: 900px;
+        }
+        .hero-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.4rem 1rem;
+            border-radius: 100px;
+            background: rgba(124, 92, 252, 0.1);
+            border: 1px solid rgba(124, 92, 252, 0.3);
+            font-size: 0.85rem;
+            color: var(--accent);
+            margin-bottom: 1.5rem;
+            letter-spacing: 0.02em;
+        }
+        .hero-badge .dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: var(--success);
+            animation: pulse-dot 2s ease-in-out infinite;
+        }
+        @keyframes pulse-dot {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.4; }
+        }
+        h1 {
+            font-size: clamp(2.5rem, 6vw, 4.5rem);
+            font-weight: 700;
+            letter-spacing: -0.03em;
+            line-height: 1.1;
+            margin-bottom: 1rem;
+        }
+        h1 .gradient {
+            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .hero-subtitle {
+            font-size: 1.2rem;
+            color: var(--text-secondary);
+            max-width: 650px;
+            margin: 0 auto 2rem;
+        }
+        .hero-stats {
+            display: flex;
+            gap: 2rem;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-bottom: 3rem;
+        }
+        .stat {
+            text-align: center;
+        }
+        .stat-number {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--accent);
+            font-variant-numeric: tabular-nums;
+        }
+        .stat-label {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+        /* Video Section */
+        .video-section {
+            max-width: 1100px;
+            margin: -2rem auto 4rem;
+            padding: 0 2rem;
+            position: relative;
+            z-index: 1;
+        }
+        .video-container {
+            position: relative;
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid var(--border);
+            box-shadow: 0 0 80px rgba(124, 92, 252, 0.15), 0 20px 60px rgba(0, 0, 0, 0.5);
+        }
+        .video-container video {
+            width: 100%;
+            display: block;
+        }
+        .video-label {
+            text-align: center;
+            margin-top: 1rem;
+            color: var(--text-muted);
+            font-size: 0.85rem;
+        }
+        /* Section Layout */
+        .section {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 4rem 2rem;
+        }
+        .section-header {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+        .section-tag {
+            display: inline-block;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.15em;
+            color: var(--accent);
+            margin-bottom: 0.5rem;
+        }
+        h2 {
+            font-size: clamp(1.8rem, 4vw, 2.5rem);
+            font-weight: 700;
+            letter-spacing: -0.02em;
+            margin-bottom: 0.5rem;
+        }
+        .section-desc {
+            color: var(--text-secondary);
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        /* Feature Cards */
+        .feature-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+            gap: 2rem;
+        }
+        .feature-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            overflow: hidden;
+            transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
+        }
+        .feature-card:hover {
+            transform: translateY(-4px);
+            border-color: rgba(124, 92, 252, 0.4);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+        }
+        .feature-card.wide {
+            grid-column: 1 / -1;
+        }
+        .feature-card img {
+            width: 100%;
+            display: block;
+            border-bottom: 1px solid var(--border);
+        }
+        .feature-card-body {
+            padding: 1.5rem;
+        }
+        .feature-card h3 {
+            font-size: 1.2rem;
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .feature-card p {
+            color: var(--text-secondary);
+            font-size: 0.92rem;
+        }
+        .tag-row {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.4rem;
+            margin-top: 0.75rem;
+        }
+        .tag {
+            display: inline-block;
+            padding: 0.2rem 0.6rem;
+            border-radius: 6px;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+        .tag-purple { background: rgba(124, 92, 252, 0.15); color: var(--accent); }
+        .tag-teal { background: rgba(92, 224, 216, 0.15); color: var(--accent-secondary); }
+        .tag-green { background: rgba(74, 222, 128, 0.15); color: var(--success); }
+        .tag-yellow { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
+        .tag-red { background: rgba(248, 113, 113, 0.15); color: var(--danger); }
+        /* Full-width Feature */
+        .feature-full {
+            margin-bottom: 4rem;
+        }
+        .feature-full-inner {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 3rem;
+            align-items: center;
+        }
+        .feature-full-inner.reverse {
+            direction: rtl;
+        }
+        .feature-full-inner.reverse > * {
+            direction: ltr;
+        }
+        .feature-full-img {
+            border-radius: 16px;
+            overflow: hidden;
+            border: 1px solid var(--border);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
+        }
+        .feature-full-img img {
+            width: 100%;
+            display: block;
+        }
+        .feature-full-text h3 {
+            font-size: 1.6rem;
+            font-weight: 700;
+            margin-bottom: 0.75rem;
+        }
+        .feature-full-text p {
+            color: var(--text-secondary);
+            margin-bottom: 1rem;
+        }
+        .feature-list {
+            list-style: none;
+            padding: 0;
+        }
+        .feature-list li {
+            padding: 0.35rem 0;
+            color: var(--text-secondary);
+            font-size: 0.92rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .feature-list li::before {
+            content: '';
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: var(--accent);
+            flex-shrink: 0;
+        }
+        /* Divider */
+        .divider {
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--border), transparent);
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        /* Scene Gallery */
+        .scene-gallery {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1rem;
+        }
+        .scene-gallery img {
+            width: 100%;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            transition: transform 0.3s, box-shadow 0.3s;
+        }
+        .scene-gallery img:hover {
+            transform: scale(1.03);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
+        }
+        .scene-label {
+            text-align: center;
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            margin-top: 0.4rem;
+        }
+        /* Tech Stack */
+        .tech-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+        .tech-item {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1.2rem;
+            text-align: center;
+            transition: border-color 0.3s;
+        }
+        .tech-item:hover {
+            border-color: rgba(124, 92, 252, 0.4);
+        }
+        .tech-icon {
+            font-size: 1.8rem;
+            margin-bottom: 0.5rem;
+        }
+        .tech-item h4 {
+            font-size: 0.95rem;
+            margin-bottom: 0.25rem;
+        }
+        .tech-item p {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+        }
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 3rem 2rem;
+            border-top: 1px solid var(--border);
+            color: var(--text-muted);
+            font-size: 0.85rem;
+        }
+        footer a {
+            color: var(--accent);
+            text-decoration: none;
+        }
+        footer a:hover {
+            text-decoration: underline;
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .feature-grid { grid-template-columns: 1fr; }
+            .feature-full-inner,
+            .feature-full-inner.reverse { grid-template-columns: 1fr; direction: ltr; }
+            .scene-gallery { grid-template-columns: 1fr 1fr; }
+            .hero-stats { gap: 1.5rem; }
+        }
+        @media (max-width: 500px) {
+            .feature-grid { grid-template-columns: 1fr; }
+            .scene-gallery { grid-template-columns: 1fr; }
+        }
+    </style>
 </head>
 <body>
+<!-- Hero -->
+<section class="hero">
+    <div class="hero-content">
+        <div class="hero-badge">
+            <span class="dot"></span>
+            Open Source on HuggingFace
+        </div>
+        <h1>
+            <span class="gradient">Hello World</span><br>
+            One App to Rule Them All
+        </h1>
+        <p class="hero-subtitle">
+            The most complete web dashboard for Pollen Robotics' Reachy Mini.
+            146 APIs, 31 AI tools, computer vision, 81 emotions, MuJoCo 3D simulation,
+            voice pipeline, and full system telemetry &mdash; all from your browser.
+        </p>
+        <div class="hero-stats">
+            <div class="stat">
+                <div class="stat-number">146</div>
+                <div class="stat-label">API Endpoints</div>
+            </div>
+            <div class="stat">
+                <div class="stat-number">81</div>
+                <div class="stat-label">Emotions</div>
+            </div>
+            <div class="stat">
+                <div class="stat-number">31</div>
+                <div class="stat-label">AI Tools</div>
+            </div>
+            <div class="stat">
+                <div class="stat-number">20</div>
+                <div class="stat-label">Dances</div>
+            </div>
+            <div class="stat">
+                <div class="stat-number">20</div>
+                <div class="stat-label">3D Scenes</div>
+            </div>
+            <div class="stat">
+                <div class="stat-number">21</div>
+                <div class="stat-label">Robot Skins</div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- Demo Video -->
+<div class="video-section">
+    <div class="video-container">
+        <video controls autoplay muted loop>
+            <source src="demo_video.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+    <p class="video-label">Full dashboard walkthrough &mdash; every feature in under 2 minutes</p>
+</div>
+<div class="divider"></div>
+<!-- System Monitoring -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">System Monitoring</div>
+        <h2>Real-Time System Telemetry</h2>
+        <p class="section-desc">Complete visibility into your robot's hardware state with live-updating charts and diagnostics.</p>
+    </div>
+    <div class="feature-full">
+        <div class="feature-full-inner">
+            <div class="feature-full-img">
+                <img src="frames/01_status_dashboard.jpg" alt="Status Dashboard">
+            </div>
+            <div class="feature-full-text">
+                <h3>Status Dashboard</h3>
+                <p>Nine real-time charts streaming over WebSocket at configurable rates. See your robot's health at a glance.</p>
+                <ul class="feature-list">
+                    <li>CPU temperature, load average, and per-core utilization</li>
+                    <li>RAM breakdown (Used, Buffer, Cache) and disk I/O</li>
+                    <li>Network throughput and WiFi signal strength</li>
+                    <li>Fan RPM, thread count (App vs Daemon)</li>
+                    <li>Top processes with CPU/memory usage</li>
+                    <li>Full hardware inventory (board, serial, kernel, firmware)</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-green">WebSocket</span>
+                    <span class="tag tag-purple">15Hz Robot / 1Hz Stats</span>
+                    <span class="tag tag-teal">Raspberry Pi CM4</span>
+                </div>
+            </div>
         </div>
     </div>
+    <div class="feature-full">
+        <div class="feature-full-inner reverse">
+            <div class="feature-full-img">
+                <img src="frames/05_telemetry.jpg" alt="Head Telemetry">
+            </div>
+            <div class="feature-full-text">
+                <h3>Head Telemetry</h3>
+                <p>Live streaming charts for every degree of freedom in Reachy's Stewart platform head mechanism.</p>
+                <ul class="feature-list">
+                    <li>Roll, Pitch, Yaw rotation with real-time graphing</li>
+                    <li>X, Y, Z translation position tracking</li>
+                    <li>Left and Right antenna angle monitoring</li>
+                    <li>Stewart Platform actuator visualization (6 motors)</li>
+                    <li>Head Pose summary with numeric readout</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">6-DOF Stewart Platform</span>
+                    <span class="tag tag-teal">9 Dynamixel Servos</span>
+                </div>
+            </div>
+        </div>
     </div>
 </section>
+<div class="divider"></div>
+<!-- Control & Visualization -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Control & Visualization</div>
+        <h2>Floating Panels & 3D Simulation</h2>
+        <p class="section-desc">Draggable, resizable floating panels let you compose your ideal workspace.</p>
+    </div>
+    <div class="feature-full" style="margin-bottom: 2rem;">
+        <div class="feature-full-inner">
+            <div class="feature-full-img">
+                <img src="frames/26_floating_panels.jpg" alt="Floating Panels">
+            </div>
+            <div class="feature-full-text">
+                <h3>Composable Floating Panels</h3>
+                <p>Two persistent panels hover above every tab, creating a fully customisable workspace.</p>
+                <ul class="feature-list">
+                    <li><strong>Camera Panel</strong> &mdash; Live WebRTC feed, snapshot, video/audio recording, listen/speak</li>
+                    <li><strong>Joystick Panel</strong> &mdash; 5-axis head control with return-to-center toggle</li>
+                    <li>Supports robot camera, laptop webcam, iPhone Continuity Camera</li>
+                    <li>Draggable, resizable, minimisable &mdash; position remembered across sessions</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">Draggable</span>
+                    <span class="tag tag-teal">Resizable</span>
+                    <span class="tag tag-green">Multi-Camera</span>
+                </div>
+            </div>
         </div>
+    </div>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <img src="frames/03_3d_simulation.jpg" alt="MuJoCo 3D Simulation">
+            <div class="feature-card-body">
+                <h3>MuJoCo 3D Simulation</h3>
+                <p>Real-time 3D visualization of Reachy Mini powered by MuJoCo and Three.js. The robot's pose mirrors the physical hardware in real time with smooth-shaded GLB meshes.</p>
+                <div class="tag-row">
+                    <span class="tag tag-purple">MuJoCo</span>
+                    <span class="tag tag-teal">Three.js</span>
+                    <span class="tag tag-green">Real-time Sync</span>
+                </div>
+            </div>
         </div>
+        <div class="feature-card">
+            <img src="frames/04_joystick_cameras.jpg" alt="Joystick & Cameras">
+            <div class="feature-card-body">
+                <h3>Joystick & Multi-Camera</h3>
+                <p>Intuitive joystick controls for head movement (L/XY/R), look direction, Z/Roll, body rotation, and a reset button. Multiple camera feeds in floating panels &mdash; robot camera, FaceTime, and iPhone via WebRTC.</p>
+                <div class="tag-row">
+                    <span class="tag tag-purple">6-axis Control</span>
+                    <span class="tag tag-teal">WebRTC Cameras</span>
+                    <span class="tag tag-yellow">Return to Center</span>
+                </div>
+            </div>
         </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- Expressive Movement -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Expressive Movement</div>
+        <h2>81 Emotions, 20 Dances, 6 Oscillations</h2>
+        <p class="section-desc">A rich library of pre-built movements organized by mood category, with live preview in the 3D simulation.</p>
+    </div>
+    <div class="feature-full">
+        <div class="feature-full-inner">
+            <div class="feature-full-img">
+                <img src="frames/06_emotions_gallery.jpg" alt="Emotions Gallery">
+            </div>
+            <div class="feature-full-text">
+                <h3>Emotions Gallery</h3>
+                <p>Browse and trigger 81 unique emotional expressions, filterable by mood categories.</p>
+                <ul class="feature-list">
+                    <li>Categories: Angry, Confused, Curious, Dance, Fear, Happy, Mood, Response</li>
+                    <li>Each emotion card shows name, duration, and description</li>
+                    <li>Auto-fit toggle adapts motion to robot's range</li>
+                    <li>Real-time preview in 3D simulation and on physical robot</li>
+                    <li>Search bar for quick access to specific emotions</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">81 Emotions</span>
+                    <span class="tag tag-teal">20 Dances</span>
+                    <span class="tag tag-green">HuggingFace Datasets</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="feature-full">
+        <div class="feature-full-inner reverse">
+            <div class="feature-full-img">
+                <img src="frames/07_oscillations.jpg" alt="Oscillation Patterns">
+            </div>
+            <div class="feature-full-text">
+                <h3>Oscillation Patterns</h3>
+                <p>Continuous, looping head movement patterns with adjustable amplitude and speed for natural idle behaviour.</p>
+                <ul class="feature-list">
+                    <li><strong>Sway</strong> &mdash; Gentle side-to-side head movement</li>
+                    <li><strong>Nod</strong> &mdash; Slow vertical nodding</li>
+                    <li><strong>Circle</strong> &mdash; Circular head motion</li>
+                    <li><strong>Breathe</strong> &mdash; Subtle breathing-like oscillation</li>
+                    <li><strong>Figure 8</strong> &mdash; Figure-eight head pattern</li>
+                    <li><strong>Look Around</strong> &mdash; Curious, exploratory movement</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">Amplitude Control</span>
+                    <span class="tag tag-teal">Speed Control</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- AI Conversation -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">AI-Powered</div>
+        <h2>Conversational AI with Tool Use</h2>
+        <p class="section-desc">Chat with Reachy using multi-provider LLMs. The AI can express emotions, set timers, create content, and control the robot.</p>
+    </div>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <img src="frames/08_conversation_ai.jpg" alt="AI Conversation">
+            <div class="feature-card-body">
+                <h3>Multi-Provider AI Chat</h3>
+                <p>Full conversation interface with timestamped message log showing confidence and volume. Powered by LiteLLM for unified access to Anthropic, OpenAI, Ollama, and more. The AI triggers emotional expressions automatically based on context.</p>
+                <div class="tag-row">
+                    <span class="tag tag-purple">Claude</span>
+                    <span class="tag tag-teal">OpenAI</span>
+                    <span class="tag tag-green">Ollama</span>
+                    <span class="tag tag-yellow">LiteLLM</span>
+                </div>
+            </div>
+        </div>
+        <div class="feature-card">
+            <img src="frames/12_timers_ambient.jpg" alt="AI Tool Use">
+            <div class="feature-card-body">
+                <h3>31 Built-in AI Tools</h3>
+                <p>The LLM can call robot-native tools: set timers, trigger emotions, create scratchpad content, play music, control lights, take snapshots, detect objects, and more. Tool calls are displayed inline in the conversation with full transparency.</p>
+                <div class="tag-row">
+                    <span class="tag tag-purple">set_timer</span>
+                    <span class="tag tag-teal">create_scratchpad</span>
+                    <span class="tag tag-green">play_emotion</span>
+                    <span class="tag tag-yellow">31 Tools Total</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- Scratchpad & Generative UI -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Generative UI</div>
+        <h2>Scratchpad &mdash; Rich Content from Conversation</h2>
+        <p class="section-desc">The AI creates rich HTML content on demand: recipes, diagrams, charts, and more &mdash; all rendered beautifully in the Scratchpad tab.</p>
+    </div>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <img src="frames/10_scratchpad_recipe.jpg" alt="Scratchpad Recipe">
+            <div class="feature-card-body">
+                <h3>AI-Generated Content</h3>
+                <p>Ask Reachy for a pancake recipe and it creates a beautifully formatted page with ingredients, step-by-step instructions, and tips &mdash; complete with a themed robot illustration.</p>
+                <div class="tag-row">
+                    <span class="tag tag-purple">Markdown Rendering</span>
+                    <span class="tag tag-teal">Theme-Aware</span>
+                </div>
+            </div>
+        </div>
+        <div class="feature-card">
+            <img src="frames/09_scratchpad_diagrams.jpg" alt="Scratchpad Diagrams">
+            <div class="feature-card-body">
+                <h3>Mermaid Diagrams & Charts</h3>
+                <p>Interactive architecture diagrams rendered with Mermaid.js, pie charts, activity heatmaps, and more. The AI can generate visual documentation of the robot's own architecture.</p>
+                <div class="tag-row">
+                    <span class="tag tag-purple">Mermaid.js</span>
+                    <span class="tag tag-teal">Charts</span>
+                    <span class="tag tag-green">Searchable</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- Timers & Ambient -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Smart Assistant</div>
+        <h2>Timers, Alarms & Ambient Sounds</h2>
+        <p class="section-desc">Set timers via conversation or the UI. Built-in ambient sound library for focus, relaxation, or atmosphere.</p>
+    </div>
+    <div class="feature-full">
+        <div class="feature-full-inner">
+            <div class="feature-full-img">
+                <img src="frames/11_ai_tool_use.jpg" alt="Timers and Ambient Sounds">
+            </div>
+            <div class="feature-full-text">
+                <h3>Timers, Alarms & Soundscapes</h3>
+                <p>A complete timer and alarm system with rich sound options.</p>
+                <ul class="feature-list">
+                    <li>Create timers via AI conversation ("Set a timer for 5 mins")</li>
+                    <li>Named alarms with one-shot or recurring schedules</li>
+                    <li>9 ambient sounds: Rain, Ocean, Forest, Crickets, Fireplace, Wind, White/Pink/Brown Noise</li>
+                    <li>3 timer sounds: Bell, Ding, Success</li>
+                    <li>6 alarm sounds: Birds, Classic Bell, Digital, Gentle Chime, Harp, Marimba</li>
+                    <li>Upload custom sounds with Add Sound</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">Voice-Activated</span>
+                    <span class="tag tag-teal">9 Ambient Sounds</span>
+                    <span class="tag tag-green">Custom Upload</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- Computer Vision -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Computer Vision</div>
+        <h2>YOLO Vision &mdash; Real-Time Detection</h2>
+        <p class="section-desc">On-device and in-browser computer vision with pose estimation, object detection, and segmentation.</p>
+    </div>
+    <div class="feature-grid">
+        <div class="feature-card">
+            <img src="frames/14_vision_settings.jpg" alt="Vision Settings">
+            <div class="feature-card-body">
+                <h3>YOLO Vision Configuration</h3>
+                <p>Three processing modes: Off, CM4 (on-robot), and WebGPU (in-browser via WASM). Choose from pose keypoints, detection, or segmentation tasks. Adjustable FPS, confidence threshold, and model size selection.</p>
+                <div class="tag-row">
+                    <span class="tag tag-purple">WebGPU / WASM</span>
+                    <span class="tag tag-teal">CM4 On-Device</span>
+                    <span class="tag tag-green">YOLO Nano</span>
+                </div>
+            </div>
+        </div>
+        <div class="feature-card">
+            <img src="frames/15_pose_detection.jpg" alt="Pose Detection">
+            <div class="feature-card-body">
+                <h3>Real-Time Pose Detection</h3>
+                <p>Blue skeleton overlay tracks body keypoints in real time from any connected camera. Supports Follow mode where the robot tracks detected poses. Works with robot camera, FaceTime, or iPhone sources.</p>
+                <div class="tag-row">
+                    <span class="tag tag-purple">Pose Keypoints</span>
+                    <span class="tag tag-teal">Follow Mode</span>
+                    <span class="tag tag-yellow">Multi-Camera Source</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- Shell Terminal -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Developer Tools</div>
+        <h2>In-Browser Shell Terminal</h2>
+        <p class="section-desc">Full bash terminal access via WebSocket PTY with shared tmux sessions.</p>
+    </div>
+    <div class="feature-full">
+        <div class="feature-full-inner">
+            <div class="feature-full-img">
+                <img src="frames/13_shell_terminal.jpg" alt="Shell Terminal">
+            </div>
+            <div class="feature-full-text">
+                <h3>WebSocket Terminal</h3>
+                <p>A fully interactive terminal embedded in the dashboard, powered by tmux for persistent, shared sessions.</p>
+                <ul class="feature-list">
+                    <li>Bidirectional PTY via WebSocket</li>
+                    <li>Terminal and Tmux tab modes</li>
+                    <li>Shared sessions &mdash; multiple users, same terminal</li>
+                    <li>Connection status indicator</li>
+                    <li>Full process visibility (ps aux)</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">WebSocket PTY</span>
+                    <span class="tag tag-teal">tmux</span>
+                    <span class="tag tag-green">Shared Sessions</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- Media Library -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Media Management</div>
+        <h2>Snapshots, Recordings & Music</h2>
+        <p class="section-desc">Capture, record, and playback media directly from the dashboard with thumbnail previews and metadata.</p>
+    </div>
+    <div class="feature-full">
+        <div class="feature-full-inner reverse">
+            <div class="feature-full-img">
+                <img src="frames/21_media_tab.jpg" alt="Media Library">
+            </div>
+            <div class="feature-full-text">
+                <h3>Media Library</h3>
+                <p>A built-in media manager for all your robot's captures and audio content.</p>
+                <ul class="feature-list">
+                    <li>Camera snapshots with preview grid</li>
+                    <li>Video recordings with duration and thumbnails</li>
+                    <li>Audio recordings with waveform visualization</li>
+                    <li>Music library with ID3 metadata and cover art</li>
+                    <li>Upload, download, and delete with drag-and-drop</li>
+                    <li>NVR (Network Video Recorder) camera snapshots</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">Snapshots</span>
+                    <span class="tag tag-teal">Video Recording</span>
+                    <span class="tag tag-green">Music Playback</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- Audio & Bluetooth -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Audio & Connectivity</div>
+        <h2>Volume Mixer, Audio Routing & Bluetooth</h2>
+        <p class="section-desc">Fine-grained audio control with channel mixing and Bluetooth A2DP device management.</p>
+    </div>
+    <div class="feature-full">
+        <div class="feature-full-inner reverse">
+            <div class="feature-full-img">
+                <img src="frames/16_audio_settings.jpg" alt="Audio Settings">
+            </div>
+            <div class="feature-full-text">
+                <h3>Audio Routing & Volume Mixer</h3>
+                <p>Complete audio pipeline management with per-channel volume control.</p>
+                <ul class="feature-list">
+                    <li>Mic Input and Speaker routing (Robot Mic / Robot Speaker)</li>
+                    <li>6 volume channels: Hardware, Master, Speech, Music, Effects, Ambient</li>
+                    <li>Bluetooth device scanning and pairing</li>
+                    <li>A2DP (high-quality music) and HSP (voice) profiles</li>
+                    <li>AuraBox LED speaker integration</li>
+                    <li>Test button for audio output verification</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">6 Volume Channels</span>
+                    <span class="tag tag-teal">Bluetooth A2DP</span>
+                    <span class="tag tag-green">GStreamer Pipeline</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- LLM Configuration -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Configurability</div>
+        <h2>Tuning & LLM Behaviour</h2>
+        <p class="section-desc">Full control over voice recognition thresholds and the LLM's personality through an editable system prompt.</p>
+    </div>
+    <div class="feature-full">
+        <div class="feature-full-inner">
+            <div class="feature-full-img">
+                <img src="frames/17_tuning_llm.jpg" alt="Tuning and LLM Settings">
+            </div>
+            <div class="feature-full-text">
+                <h3>Tuning & System Prompt</h3>
+                <p>Adjust voice recognition sensitivity and customise Reachy's AI personality.</p>
+                <ul class="feature-list">
+                    <li>Confidence threshold for speech recognition</li>
+                    <li>Volume threshold to filter background noise</li>
+                    <li>Microphone gain control</li>
+                    <li>Editable system prompt defining Reachy's personality</li>
+                    <li>TTS speech output rules built into the prompt</li>
+                    <li>Save/Reset prompt functionality</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">Whisper STT</span>
+                    <span class="tag tag-teal">Kokoro TTS</span>
+                    <span class="tag tag-green">Editable Prompt</span>
+                </div>
+            </div>
         </div>
+    </div>
+</section>
+<div class="divider"></div>
+<!-- 3D Scenes & Skins -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Customisation</div>
+        <h2>20 Scenes & 21 Robot Skins</h2>
+        <p class="section-desc">Personalise the 3D simulation with procedural environments and paint Reachy in country flags, metallic finishes, or vibrant gradients.</p>
+    </div>
+    <div class="feature-full" style="margin-bottom: 2rem;">
+        <div class="feature-full-inner">
+            <div class="feature-full-img">
+                <img src="frames/18_scenes_skins.jpg" alt="3D Scenes and Robot Skins">
+            </div>
+            <div class="feature-full-text">
+                <h3>Scenes & Skins Gallery</h3>
+                <p>A rich collection of 3D environments and robot textures, instantly switchable from the Appearance settings.</p>
+                <ul class="feature-list">
+                    <li><strong>20 scenes:</strong> Default, Studio, Sunset, Ocean, Night Sky, Forest, Neon, Rainy City, Winter, Desert, Underwater Cave, Mars, Crystal Cave, Volcano, Candy Land, Zen Garden, Haunted, Space Station, Clouds</li>
+                    <li><strong>21 skins:</strong> Default, France, Japan, USA, Brazil, Germany, Italy, UK, India, Australia, Gold, Chrome, Matte Black, Carbon, Rainbow, Neon, Sunset, Ocean, Forest, Pollen, Robot</li>
+                </ul>
+                <div class="tag-row">
+                    <span class="tag tag-purple">20 Scenes</span>
+                    <span class="tag tag-teal">21 Skins</span>
+                    <span class="tag tag-green">Instant Switch</span>
+                </div>
+            </div>
         </div>
+    </div>
+    <div class="scene-gallery">
+        <div>
+            <img src="frames/24_crystal_cave.jpg" alt="Crystal Cave Scene">
+            <p class="scene-label">Crystal Cave</p>
         </div>
+        <div>
+            <img src="frames/25_clouds_full.jpg" alt="Clouds Scene">
+            <p class="scene-label">Clouds</p>
         </div>
+        <div>
+            <img src="frames/22_brazil_skin.jpg" alt="Brazil Skin">
+            <p class="scene-label">Brazil Skin</p>
         </div>
     </div>
 </section>
+<div class="divider"></div>
+<!-- Tech Stack -->
+<section class="section">
+    <div class="section-header">
+        <div class="section-tag">Architecture</div>
+        <h2>Built With</h2>
+        <p class="section-desc">Pure Python + vanilla JavaScript. No framework, no bundler, no build step.</p>
+    </div>
+    <div class="tech-grid">
+        <div class="tech-item">
+            <div class="tech-icon">&#9889;</div>
+            <h4>FastAPI</h4>
+            <p>146 REST endpoints + 6 WebSockets</p>
+        </div>
+        <div class="tech-item">
+            <div class="tech-icon">&#127760;</div>
+            <h4>Vanilla JS</h4>
+            <p>Zero dependencies, SPA</p>
+        </div>
+        <div class="tech-item">
+            <div class="tech-icon">&#129302;</div>
+            <h4>MuJoCo + Three.js</h4>
+            <p>Physics-accurate 3D simulation</p>
         </div>
+        <div class="tech-item">
+            <div class="tech-icon">&#128065;</div>
+            <h4>YOLO + WebGPU</h4>
+            <p>Real-time vision in browser</p>
+        </div>
+        <div class="tech-item">
+            <div class="tech-icon">&#128483;</div>
+            <h4>Whisper STT</h4>
+            <p>Voice recognition pipeline</p>
+        </div>
+        <div class="tech-item">
+            <div class="tech-icon">&#128264;</div>
+            <h4>Kokoro TTS</h4>
+            <p>Text-to-speech engine</p>
+        </div>
+        <div class="tech-item">
+            <div class="tech-icon">&#129504;</div>
+            <h4>LiteLLM</h4>
+            <p>Multi-provider AI (Claude, GPT, Ollama)</p>
+        </div>
+        <div class="tech-item">
+            <div class="tech-icon">&#128268;</div>
+            <h4>WebSocket-First</h4>
+            <p>All real-time data, zero polling</p>
         </div>
     </div>
 </section>
+<!-- Footer -->
+<footer>
     <p>
+        Hello World &mdash; One App to Rule Them All &mdash; Built by
+        <a href="https://huggingface.co/spaces/panny247/hello_world" target="_blank">panny247</a>
+        for the Pollen Robotics community
+    </p>
+    <p style="margin-top: 0.5rem;">
+        <a href="https://huggingface.co/spaces/panny247/hello_world" target="_blank">View on HuggingFace</a>
     </p>
 </footer>
 </body>