Hugging Face's logo

Spaces:
RyeCatcher
/
dj_reactor
Running

App Files Community
RyeCatcher commited on
Commit
40deaa6
·
verified ·
1 Parent(s): 210d94f

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +232 -18
index.html CHANGED
@@ -1,19 +1,233 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DJ Reactor - Reachy Mini App</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
11
+ </head>
12
+ <body>
13
+ <div class="container">
14
+ <header>
15
+ <a href="https://www.runreachyrun.com" class="logo-link">
16
+ <img src="logo.png" alt="runreachyrun" class="logo">
17
+ </a>
18
+ <div class="badge-wrapper">
19
+ <span class="badge">Reachy Mini App</span>
20
+ </div>
21
+ <h1>DJ Reactor</h1>
22
+ <p class="tagline">Your Reachy Mini dances to the music</p>
23
+ </header>
24
+
25
+ <main>
26
+ <!-- Animated Robot Demo -->
27
+ <section class="demo-section">
28
+ <div class="demo-box">
29
+ <div class="robot-icon">🤖</div>
30
+ <div class="music-waves">
31
+ <span></span><span></span><span></span><span></span><span></span>
32
+ </div>
33
+ </div>
34
+ </section>
35
+
36
+ <!-- Hero with 6 feature cards -->
37
+ <section class="hero">
38
+ <div class="feature-grid">
39
+ <div class="feature">
40
+ <div class="icon-box purple">
41
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
42
+ </div>
43
+ <h3>Real-time Audio</h3>
44
+ <p>Analyzes bass, mid, and treble frequencies from any audio input</p>
45
+ </div>
46
+ <div class="feature">
47
+ <div class="icon-box cyan">
48
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-6M6 20V10M18 20V4"/></svg>
49
+ </div>
50
+ <h3>Beat Detection</h3>
51
+ <p>Detects beats and estimates BPM for synchronized movements</p>
52
+ </div>
53
+ <div class="feature">
54
+ <div class="icon-box amber">
55
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg>
56
+ </div>
57
+ <h3>Full Body Dance</h3>
58
+ <p>Sweeping body sway, head bob, and expressive antenna movements</p>
59
+ </div>
60
+ <div class="feature">
61
+ <div class="icon-box green">
62
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
63
+ </div>
64
+ <h3>Multiple Inputs</h3>
65
+ <p>Works with microphones, system audio loopback, or any audio device</p>
66
+ </div>
67
+ <div class="feature">
68
+ <div class="icon-box purple">
69
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
70
+ </div>
71
+ <h3>BPM Sync</h3>
72
+ <p>Dance groove adjusts automatically to match the music tempo</p>
73
+ </div>
74
+ <div class="feature">
75
+ <div class="icon-box cyan">
76
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
77
+ </div>
78
+ <h3>Adjustable Intensity</h3>
79
+ <p>Control how dramatic the movements are with a simple slider</p>
80
+ </div>
81
+ </div>
82
+ </section>
83
+
84
+ <!-- Install Section -->
85
+ <section class="install">
86
+ <h2>Install on Your Reachy Mini</h2>
87
+ <div class="install-steps">
88
+ <div class="step">
89
+ <span class="step-num">1</span>
90
+ <div class="step-content">
91
+ <h4>Install the package</h4>
92
+ <div class="code-block">
93
+ <code>pip install git+https://huggingface.co/spaces/RyeCatcher/dj-reactor</code>
94
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ <div class="step">
99
+ <span class="step-num">2</span>
100
+ <div class="step-content">
101
+ <h4>Start the Reachy Mini daemon</h4>
102
+ <div class="code-block">
103
+ <code>reachy-mini-daemon</code>
104
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ <div class="step">
109
+ <span class="step-num">3</span>
110
+ <div class="step-content">
111
+ <h4>Launch from dashboard</h4>
112
+ <p>Find DJ Reactor in Applications at <strong>localhost:8000</strong></p>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- How it works -->
119
+ <section class="how-it-works">
120
+ <h2>How It Works</h2>
121
+ <div class="workflow">
122
+ <div class="workflow-step">
123
+ <div class="workflow-icon">
124
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
125
+ </div>
126
+ <p>Select audio input</p>
127
+ </div>
128
+ <div class="workflow-arrow">→</div>
129
+ <div class="workflow-step">
130
+ <div class="workflow-icon">
131
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20v-6M6 20V10M18 20V4"/></svg>
132
+ </div>
133
+ <p>Audio analyzed in real-time</p>
134
+ </div>
135
+ <div class="workflow-arrow">→</div>
136
+ <div class="workflow-step">
137
+ <div class="workflow-icon">
138
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
139
+ </div>
140
+ <p>Beats detected</p>
141
+ </div>
142
+ <div class="workflow-arrow">→</div>
143
+ <div class="workflow-step">
144
+ <div class="workflow-icon">
145
+ <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="10" x="3" y="11" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" x2="8" y1="16" y2="16"/><line x1="16" x2="16" y1="16" y2="16"/></svg>
146
+ </div>
147
+ <p>Reachy dances!</p>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <!-- Audio Setup -->
153
+ <section class="audio-setup">
154
+ <h2>System Audio Setup (macOS)</h2>
155
+ <p>To capture system audio (Spotify, YouTube, etc.) instead of microphone:</p>
156
+ <ol>
157
+ <li>Install <a href="https://existential.audio/blackhole/" target="_blank" rel="noopener">BlackHole</a> audio driver</li>
158
+ <li>Open <strong>Audio MIDI Setup</strong> and create a Multi-Output Device</li>
159
+ <li>Add your speakers + BlackHole to the Multi-Output</li>
160
+ <li>Set Multi-Output as system output in Sound preferences</li>
161
+ <li>Select "BlackHole 2ch" as input in DJ Reactor</li>
162
+ </ol>
163
+ </section>
164
+
165
+ <!-- About -->
166
+ <section class="about">
167
+ <h2>About This Project</h2>
168
+ <p>
169
+ DJ Reactor transforms your Reachy Mini into a physical music visualizer.
170
+ Play your favorite tunes and watch your robot companion groove along with
171
+ sweeping body movements, head bobs, and antenna bounces synced to the beat.
172
+ </p>
173
+ <p>
174
+ Part of the <strong>Run Reachy Run</strong> project — documenting the journey
175
+ of building apps with Reachy Mini. Built with Claude Code.
176
+ </p>
177
+ <div class="about-links">
178
+ <a href="https://www.runreachyrun.com/apps/dj-reactor" target="_blank" rel="noopener">Learn more on runreachyrun.com →</a>
179
+ <a href="https://huggingface.co/spaces/RyeCatcher/dj-reactor/tree/main" target="_blank" rel="noopener">View Source Code →</a>
180
+ </div>
181
+ </section>
182
+ </main>
183
+
184
+ <footer>
185
+ <a href="https://www.runreachyrun.com" class="footer-logo-link">
186
+ <img src="logo.png" alt="runreachyrun" class="footer-logo">
187
+ <span class="footer-site-name">runreachyrun.com</span>
188
+ </a>
189
+ <div class="footer-links">
190
+ <a href="https://github.com/BioInfo/reachy" target="_blank" rel="noopener">
191
+ <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon">
192
+ <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
193
+ </svg>
194
+ GitHub
195
+ </a>
196
+ <a href="https://twitter.com/bioinfo" target="_blank" rel="noopener">
197
+ <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon">
198
+ <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
199
+ </svg>
200
+ Twitter
201
+ </a>
202
+ <a href="https://huggingface.co/spaces/RyeCatcher/dj-reactor" target="_blank" rel="noopener">
203
+ <svg viewBox="0 0 24 24" fill="currentColor" class="social-icon">
204
+ <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.342-3.369-1.342-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
205
+ </svg>
206
+ HuggingFace
207
+ </a>
208
+ <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener">
209
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="social-icon">
210
+ <rect x="3" y="11" width="18" height="10" rx="2"/>
211
+ <circle cx="12" cy="5" r="3"/>
212
+ </svg>
213
+ Reachy Mini SDK
214
+ </a>
215
+ </div>
216
+ <p class="copyright">MIT License · Built with Claude Code</p>
217
+ </footer>
218
+ </div>
219
+ <script>
220
+ function copyCode(btn) {
221
+ const code = btn.parentElement.querySelector('code').textContent;
222
+ navigator.clipboard.writeText(code).then(() => {
223
+ btn.textContent = 'Copied!';
224
+ btn.classList.add('copied');
225
+ setTimeout(() => {
226
+ btn.textContent = 'Copy';
227
+ btn.classList.remove('copied');
228
+ }, 2000);
229
+ });
230
+ }
231
+ </script>
232
+ </body>
233
  </html>