Spaces:

pollen-robotics
/

marionette

Running

File size: 21,732 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Marionette - Manual performance recorder for Reachy Mini</title>
  <meta name="description" content="Manually guide Reachy Mini to create natural motions, record movement and audio in real time.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --background: hsl(220, 13%, 8%);
      --foreground: hsl(210, 40%, 98%);
      --card: hsl(220, 13%, 12%);
      --card-foreground: hsl(210, 40%, 98%);
      --primary: hsl(36, 100%, 50%);
      --primary-foreground: hsl(0, 0%, 100%);
      --muted: hsl(220, 13%, 18%);
      --muted-foreground: hsl(215, 16%, 60%);
      --border: hsl(220, 13%, 20%);
      --radius: 0.5rem;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: var(--background);
      color: var(--foreground);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* Hero Section */
    .hero {
      padding: 4rem 0;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 3rem;
      align-items: center;
    }

    @media (min-width: 768px) {
      .hero-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .hero video {
      width: 100%;
      max-width: 700px;
      border-radius: 0.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    .hero-content {
      text-align: center;
    }

    @media (min-width: 768px) {
      .hero-content {
        text-align: left;
      }
    }

    .hero-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 768px) {
      .hero-title {
        justify-content: flex-start;
      }
    }

    .hero-title span {
      font-size: 3.75rem;
    }

    .hero-title h1 {
      font-size: 3rem;
      font-weight: 700;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
    }

    @media (min-width: 768px) {
      .tags {
        justify-content: flex-start;
      }
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.75rem;
      font-size: 0.75rem;
      font-weight: 500;
      border-radius: 9999px;
      background-color: hsla(36, 100%, 50%, 0.15);
      color: var(--primary);
    }

    .hero-description {
      font-size: 1.125rem;
      color: var(--muted-foreground);
      max-width: 36rem;
    }

    .hero-description strong {
      color: var(--foreground);
    }

    /* Technical Section */
    .technical {
      padding: 4rem 0;
      background-color: var(--card);
    }

    .technical-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
      align-items: flex-start;
    }

    @media (min-width: 768px) {
      .technical-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .technical h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 1rem;
      margin-top: 2rem;
    }

    .steps {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      list-style: none;
    }

    .step {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }

    .step-number {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 1.75rem;
      height: 1.75rem;
      border-radius: 9999px;
      background-color: var(--primary);
      color: var(--primary-foreground);
      font-size: 0.875rem;
      font-weight: 600;
    }

    .step-content {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .step-title {
      font-size: 0.875rem;
      font-weight: 600;
    }

    .step-body {
      font-size: 0.875rem;
      color: var(--muted-foreground);
    }

    .step-body a {
      text-decoration: underline;
      color: var(--muted-foreground);
      transition: color 0.2s;
    }

    .step-body a:hover {
      color: var(--primary);
    }

    .technical video {
      width: 100%;
      border-radius: 0.5rem;
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4);
    }

    /* Footer */
    footer {
      border-top: 1px solid var(--border);
      padding: 3rem 0;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
      margin-bottom: 2rem;
    }

    @media (min-width: 768px) {
      .footer-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .footer-column {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .author-section {
      display: flex;
      align-items: center;
      gap: 1.25rem;
    }

    .author-link {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
      color: inherit;
    }

    .author-link:hover .author-name {
      color: var(--primary);
    }

    .author-link:hover .author-avatar {
      border-color: var(--primary);
    }

    .author-avatar {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 9999px;
      border: 2px solid white;
      transition: border-color 0.2s;
    }

    .author-intro {
      font-size: 0.875rem;
      color: var(--muted-foreground);
    }

    .author-name {
      font-size: 1.125rem;
      font-weight: 600;
      transition: color 0.2s;
    }

    .follow-btn {
      display: inline-flex;
      align-items: center;
      padding: 0.375rem 0.75rem;
      font-size: 0.75rem;
      font-weight: 500;
      border-radius: 9999px;
      border: 1px solid var(--border);
      background-color: var(--card);
      color: var(--foreground);
      text-decoration: none;
      transition: background-color 0.2s;
    }

    .follow-btn:hover {
      background-color: var(--muted);
    }

    .social-links {
      display: flex;
      gap: 0.75rem;
    }

    .social-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 9999px;
      background-color: var(--muted);
      color: var(--muted-foreground);
      text-decoration: none;
      transition: all 0.2s;
    }

    .social-link:hover {
      background-color: var(--primary);
      color: var(--primary-foreground);
    }

    .social-link svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    .footer-title {
      font-size: 0.875rem;
      font-weight: 600;
    }

    .footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .footer-link {
      font-size: 0.875rem;
      color: var(--muted-foreground);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-link:hover {
      color: var(--primary);
    }

    .credits-text {
      font-size: 0.875rem;
      color: var(--muted-foreground);
    }

    .credits-text a {
      color: var(--muted-foreground);
      text-decoration: none;
      transition: color 0.2s;
    }

    .credits-text a:hover {
      color: var(--primary);
    }

    /* Test Coverage Section */
    .test-coverage {
      padding: 4rem 0;
    }

    .test-coverage h2 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
    }

    .test-coverage .section-subtitle {
      font-size: 0.9rem;
      color: var(--muted-foreground);
      margin-bottom: 1.75rem;
    }

    .tc-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin-bottom: 1rem;
    }

    .tc-table {
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.8rem;
      width: 100%;
    }

    .tc-table th {
      padding: 0.5rem 0.75rem;
      text-align: center;
      font-size: 0.65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--muted-foreground);
      border-bottom: 1px solid var(--border);
    }

    .tc-table th:first-child {
      text-align: left;
    }

    .tc-table td {
      padding: 0.5rem 0.75rem;
      text-align: center;
      white-space: nowrap;
      border-bottom: 1px solid hsla(220, 13%, 20%, 0.5);
    }

    .tc-table .tc-platform {
      text-align: left;
      font-weight: 600;
      font-size: 0.8rem;
    }

    .tc-table .tc-robot-label {
      font-weight: 400;
      color: var(--muted-foreground);
      font-size: 0.75rem;
    }

    .tc-ok {
      color: hsl(160, 84%, 55%);
      font-weight: 600;
    }

    .tc-fail {
      color: hsl(0, 84%, 70%);
      font-weight: 600;
    }

    .tc-untested {
      color: hsla(220, 13%, 50%, 0.4);
      font-size: 0.7rem;
    }

    .tc-date {
      display: block;
      font-size: 0.65rem;
      color: var(--muted-foreground);
      margin-top: 1px;
    }

    .tc-legend {
      display: flex;
      gap: 1.25rem;
      font-size: 0.7rem;
      color: var(--muted-foreground);
      margin-bottom: 1rem;
    }

    .tc-legend span {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
    }

    .tc-cta {
      font-size: 0.8rem;
      color: var(--muted-foreground);
      line-height: 1.5;
      max-width: 44rem;
    }

    .tc-cta a {
      color: var(--primary);
      text-decoration: none;
    }

    .tc-cta a:hover {
      text-decoration: underline;
    }

    .tc-footnote {
      font-size: 0.65rem;
      color: hsla(215, 16%, 60%, 0.5);
      margin-top: 0.75rem;
    }

    .tc-updated {
      font-size: 0.7rem;
      color: hsla(215, 16%, 60%, 0.6);
      margin-top: 0.5rem;
    }
  </style>
</head>
<body>
  <div class="min-h-screen">
    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <div class="hero-grid">
          <div>
            <video autoplay loop muted playsinline>
              <source src="marionette/assets/reachy-mini-demo-app-marionette.mp4" type="video/mp4">
            </video>
          </div>
          <div class="hero-content">
            <div class="hero-title">
              <span>🎭</span>
              <h1>Marionette</h1>
            </div>
            <div class="tags">
              <span class="tag">motion</span>
              <span class="tag">dataset</span>
              <span class="tag">Kids</span>
            </div>
            <p class="hero-description">
              <strong>Manual performance recorder for Reachy Mini</strong><br>
              Manually guide Reachy Mini to create natural motions, record movement and audio in real time, and automatically save everything in a share-ready format compatible with Hugging Face.
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Technical Section -->
    <section class="technical">
      <div class="container">
        <div class="technical-grid">
          <div>
            <h2>How it works</h2>
            <ol class="steps">
              <li class="step">
                <span class="step-number">1</span>
                <div class="step-content">
                  <div class="step-title">Connect Reachy Mini & launch the app</div>
                  <div class="step-body">Connect to your Reachy Mini, navigate to the "Applications" tab, find "Marionette" and click "Launch" (make sure you already have the <a href="https://hf.co/reachy-mini/#download" target="_blank" rel="noreferrer">dashboard</a> installed).</div>
                </div>
              </li>
              <li class="step">
                <span class="step-number">2</span>
                <div class="step-content">
                  <div class="step-title">Pick duration & audio</div>
                  <div class="step-body">Choose the recording length, enable or disable sound, and label your motion.</div>
                </div>
              </li>
              <li class="step">
                <span class="step-number">3</span>
                <div class="step-content">
                  <div class="step-title">Guide the motion</div>
                  <div class="step-body">After a 3-2-1 countdown, gently move Reachy Mini's head by hand. Marionette disables torque to give you full manual control, while encoder data and FK poses are recorded at 100 Hz.</div>
                </div>
              </li>
              <li class="step">
                <span class="step-number">4</span>
                <div class="step-content">
                  <div class="step-title">Replay & share</div>
                  <div class="step-body">Review and refine each take directly in the app, then export it automatically to local_dataset/ using the Reachy Mini emotions format (JSON + WAV), ready to share or upload.</div>
                </div>
              </li>
            </ol>
          </div>
          <div>
            <video autoplay loop muted playsinline>
              <source src="marionette/assets/reachy-mini-demo-marionette-dashboard.mp4" type="video/mp4">
            </video>
          </div>
        </div>
      </div>
    </section>

    <!-- Test Coverage Section -->
    <section class="test-coverage" id="test-coverage-section" style="display:none">
      <div class="container">
        <h2>Test Coverage</h2>
        <p class="section-subtitle" id="tc-subtitle"></p>
        <div class="tc-table-wrap" id="tc-matrix"></div>
        <div class="tc-legend" id="tc-legend"></div>
        <p class="tc-cta">
          Help us expand coverage! Run the test suite on your setup and submit a PR with the results.
          See <a href="https://huggingface.co/spaces/RemiFabre/marionette/blob/main/marionette/TESTING.md" target="_blank" rel="noopener noreferrer">TESTING.md</a> for instructions.
        </p>
        <p class="tc-footnote">Safari tested via Playwright's WebKit engine. Chromium covers Chrome, Edge, Brave, and similar browsers.</p>
        <p class="tc-updated" id="tc-updated"></p>
      </div>
    </section>

    <script>
    (function() {
      var ALL_PLATFORMS = [
        { os: 'Linux', robot: 'None' },
        { os: 'Linux', robot: 'Wireless' },
        { os: 'Linux', robot: 'Lite' },
        { os: 'macOS', robot: 'None' },
        { os: 'macOS', robot: 'Wireless' },
        { os: 'macOS', robot: 'Lite' },
        { os: 'Windows', robot: 'None' },
        { os: 'Windows', robot: 'Wireless' },
        { os: 'Windows', robot: 'Lite' }
      ];

      var COLUMNS = [
        { suite: 'unit', browser: null, label: 'Unit' },
        { suite: 'e2e', browser: 'chromium', label: 'Chromium' },
        { suite: 'e2e', browser: 'firefox', label: 'Firefox' },
        { suite: 'e2e', browser: 'webkit', label: 'Safari' }
      ];

      var ROBOT_LABELS = { 'None': 'no robot', 'Wireless': 'Wireless', 'Lite': 'Lite' };

      fetch('marionette/static/test_coverage.json', { cache: 'no-store' })
        .then(function(r) { return r.ok ? r.json() : Promise.reject(); })
        .then(render)
        .catch(function() {});

      function render(data) {
        var matrix = data.matrix || [];
        if (!matrix.length) return;

        document.getElementById('test-coverage-section').style.display = '';

        // Build lookup from actual results
        var lookup = {};
        matrix.forEach(function(m) {
          lookup[m.os + '|' + m.robot + '|' + m.suite + '|' + (m.browser || '')] = m;
        });

        // Count tested vs total platforms
        var testedCount = 0;
        ALL_PLATFORMS.forEach(function(p) {
          var hasAny = COLUMNS.some(function(c) {
            return !!lookup[p.os + '|' + p.robot + '|' + c.suite + '|' + (c.browser || '')];
          });
          if (hasAny) testedCount++;
        });

        var catalog = data.test_catalog || [];
        var totalTests = catalog.reduce(function(s, c) { return s + c.count; }, 0);

        document.getElementById('tc-subtitle').textContent =
          totalTests + ' automated tests \u2014 ' + testedCount + ' of ' + ALL_PLATFORMS.length + ' platform combinations verified so far.';

        // Build table
        var h = '<table class="tc-table"><thead><tr><th>Platform</th>';
        COLUMNS.forEach(function(c) { h += '<th>' + c.label + '</th>'; });
        h += '</tr></thead><tbody>';

        ALL_PLATFORMS.forEach(function(p) {
          h += '<tr><td class="tc-platform">' + p.os + ' <span class="tc-robot-label">' + ROBOT_LABELS[p.robot] + '</span></td>';
          COLUMNS.forEach(function(c) {
            var m = lookup[p.os + '|' + p.robot + '|' + c.suite + '|' + (c.browser || '')];
            if (m) {
              var ok = m.status === 'pass';
              h += '<td><span class="' + (ok ? 'tc-ok' : 'tc-fail') + '">';
              h += (ok ? '\u2713' : '\u2717') + ' ' + m.passed + '/' + m.total;
              h += '</span><span class="tc-date">' + m.date + '</span></td>';
            } else {
              h += '<td class="tc-untested">\u2014</td>';
            }
          });
          h += '</tr>';
        });

        h += '</tbody></table>';
        document.getElementById('tc-matrix').innerHTML = h;

        // Legend
        document.getElementById('tc-legend').innerHTML =
          '<span><span class="tc-ok">\u2713</span> Passing</span>' +
          '<span><span class="tc-fail">\u2717</span> Failing</span>' +
          '<span><span class="tc-untested">\u2014</span> Not yet tested</span>';

        if (data.generated_at) {
          var d = new Date(data.generated_at);
          document.getElementById('tc-updated').textContent =
            'Last run: ' + d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' });
        }
      }
    })();
    </script>

    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="footer-grid">
          <!-- Author -->
          <div class="footer-column">
            <div class="author-section">
              <a href="https://huggingface.co/RemiFabre" target="_blank" rel="noopener noreferrer" class="author-link">
                <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/noauth/AkX9RbZqzzQlz797iJeqL.jpeg" alt="RemiFabre" class="author-avatar">
                <div>
                  <p class="author-intro">Hey, I'm</p>
                  <p class="author-name">RemiFabre</p>
                </div>
              </a>
              <a href="https://huggingface.co/RemiFabre" target="_blank" rel="noopener noreferrer" class="follow-btn">Follow</a>
            </div>
            <div class="social-links">
              <a href="https://twitter.com/RemiFabreRobot" target="_blank" rel="noopener noreferrer" aria-label="Twitter" class="social-link">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
              </a>
              <a href="https://github.com/RemiFabre" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="social-link">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg>
              </a>
              <a href="https://www.linkedin.com/in/remifabre" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="social-link">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="4" r="2"></circle></svg>
              </a>
            </div>
          </div>

          <!-- Resources -->
          <div class="footer-column">
            <h4 class="footer-title">Resources</h4>
            <ul class="footer-links">
              <li><a href="https://huggingface.co/docs/reachy_mini/index" target="_blank" rel="noopener noreferrer" class="footer-link">Read the documentation & FAQ</a></li>
              <li><a href="https://hf.co/reachy-mini/#apps" target="_blank" rel="noopener noreferrer" class="footer-link">Browse other apps</a></li>
              <li><a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener noreferrer" class="footer-link">Make your own app</a></li>
            </ul>
          </div>

          <!-- Credits -->
          <div class="footer-column">
            <h4 class="footer-title">Credits</h4>
            <p class="credits-text">This app was created with <a href="https://huggingface.co/RemiFabre" target="_blank" rel="noopener noreferrer">love</a>.</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</body>
</html>