Hugging Face's logo

Spaces:
jrubiosainz
/
spotify_manager
Running

App Files Community
spotify_manager
File size: 5,024 Bytes
9d7cbf2
9e29ba2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26a54c3
 
 
 
9e29ba2
 
 
26a54c3
 
 
 
9e29ba2
 
 
26a54c3
9e29ba2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9d7cbf2
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Spotify Manager</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <nav>
    <a href="#" class="nav-brand"><span class="dot"></span> jrubiosainz</a>
    <div class="nav-links">
      <a href="#features">Features</a>
      <a href="#gestures">Gestures</a>
      <a href="#install">Install</a>
      <a href="https://huggingface.co/reachy-mini#/apps">App Store</a>
    </div>
  </nav>

  <section class="hero">
    <div class="badge">Reachy Mini App</div>
    <div class="hero-title">
      <svg class="spotify-logo" viewBox="0 0 168 168" width="48" height="48"><path fill="#1DB954" d="M83.996.277C37.747.277.253 37.77.253 84.019c0 46.251 37.494 83.741 83.743 83.741 46.254 0 83.744-37.49 83.744-83.741 0-46.246-37.49-83.738-83.745-83.738l.001-.004zm38.404 120.78a5.217 5.217 0 01-7.18 1.73c-19.662-12.01-44.414-14.73-73.564-8.07a5.222 5.222 0 01-6.249-3.93 5.213 5.213 0 013.926-6.25c31.9-7.291 59.263-4.15 81.337 9.34 2.46 1.51 3.24 4.72 1.73 7.18zm10.25-22.805c-1.89 3.075-5.91 4.045-8.98 2.155-22.51-13.839-56.823-17.846-83.448-9.764-3.453 1.043-7.1-.903-8.148-4.35a6.538 6.538 0 014.354-8.143c30.413-9.228 68.222-4.758 94.072 11.127 3.07 1.89 4.04 5.91 2.15 8.976zm.88-23.744c-26.99-16.031-71.52-17.505-97.289-9.684-4.138 1.255-8.514-1.081-9.768-5.219a7.835 7.835 0 015.221-9.771c29.581-8.98 78.756-7.245 109.83 11.202a7.823 7.823 0 012.74 10.733c-2.2 3.722-7.02 4.949-10.73 2.739z"/></svg>
      <h1>Spotify Manager</h1>
    </div>
    <p class="tagline">Your robot DJ — control Spotify with gestures, voice, and personality.</p>
  </section>

  <div class="app-icon-showcase">
    <img src="reachy_icon.png" alt="Reachy Mini" class="app-icon-img"/>
  </div>

  <div class="video-showcase">
    <div class="video-frame">
      <video autoplay loop muted playsinline>
        <source src="caelum_spotify_manager.mp4" type="video/mp4">
      </video>
    </div>
    <p class="video-label">MuJoCo simulator — gesture control, voice commands, robot feedback</p>
  </div>

  <section class="features" id="features">
    <h2>Features</h2>
    <p class="subtitle">Three ways to control your music</p>
    <div class="feature-grid">
        <div class="feature-card">
          <div class="icon">🖐️</div>
          <h3>Gesture Control</h3>
          <p>6 hand gestures via MediaPipe — wave to skip, thumbs up to like, open palm to play/pause.</p>
        </div>
        <div class="feature-card">
          <div class="icon">🎤</div>
          <h3>Voice Commands</h3>
          <p>Say "pon Arctic Monkeys" or "next" — Whisper STT understands Spanish and English naturally.</p>
        </div>
        <div class="feature-card">
          <div class="icon">🤖</div>
          <h3>Robot Personality</h3>
          <p>Every action triggers unique physical feedback — head flicks, antenna spreads, curious tilts, and beat pulses.</p>
        </div>
    </div>
  </section>

  <section class="gestures" id="gestures">
    <h2>Gesture Map</h2>
    <p class="subtitle">Your hands are the remote</p>
    <div class="feature-grid">
        <div class="feature-card">
          <div class="icon">🖐️</div>
          <h3>Open Palm</h3>
          <p>Play / Pause toggle</p>
        </div>
        <div class="feature-card">
          <div class="icon">👆</div>
          <h3>Point Right</h3>
          <p>Next track</p>
        </div>
        <div class="feature-card">
          <div class="icon">👈</div>
          <h3>Point Left</h3>
          <p>Previous track</p>
        </div>
        <div class="feature-card">
          <div class="icon">👍</div>
          <h3>Thumbs Up</h3>
          <p>Like current track</p>
        </div>
        <div class="feature-card">
          <div class="icon">✊</div>
          <h3>Fist</h3>
          <p>Volume down</p>
        </div>
        <div class="feature-card">
          <div class="icon">👋</div>
          <h3>Wave</h3>
          <p>Skip track</p>
        </div>
    </div>
  </section>

  <section class="install" id="install">
    <h2>Get Started</h2>
    <div class="steps">
      <div class="step">
        <div class="step-num">1</div>
        <div><h4>Install spogo</h4><p>The CLI handles Spotify auth via browser cookies — no OAuth dance needed.</p></div>
      </div>
      <div class="step">
        <div class="step-num">2</div>
        <div><h4>Install App</h4><p>From the Reachy Mini dashboard, search "Spotify Manager" and install.</p></div>
      </div>
      <div class="step">
        <div class="step-num">3</div>
        <div><h4>Play Music</h4><p>Wave your hand or say "play" — your robot takes over as DJ.</p></div>
      </div>
    </div>
  </section>

  <footer>
    🎵 Spotify Manager · Built by <a href="https://huggingface.co/jrubiosainz">jrubiosainz</a> · <a href="https://huggingface.co/reachy-mini#/apps">Browse More Apps</a>
  </footer>
</body>
</html>