Hugging Face's logo

Spaces:
jonhwolf
/
beats
Running

App Files Community
jonhwolf commited on
Commit
e22d75f
·
verified ·
1 Parent(s): 05117a6

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +629 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Beats
3
- emoji: 🐨
4
- colorFrom: gray
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: beats
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,629 @@
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>DiffRhythm-full | AI Music Generation</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
19
+ }
20
+
21
+ .model-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+
26
+ .waveform {
27
+ background: linear-gradient(90deg, #e0e7ff 0%, #c7d2fe 50%, #a5b4fc 100%);
28
+ height: 60px;
29
+ border-radius: 8px;
30
+ position: relative;
31
+ overflow: hidden;
32
+ }
33
+
34
+ .waveform::after {
35
+ content: "";
36
+ position: absolute;
37
+ top: 0;
38
+ left: 0;
39
+ right: 0;
40
+ bottom: 0;
41
+ background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
42
+ animation: shimmer 2s infinite;
43
+ }
44
+
45
+ @keyframes shimmer {
46
+ 0% { transform: translateX(-100%); }
47
+ 100% { transform: translateX(100%); }
48
+ }
49
+
50
+ .animate-pulse-slow {
51
+ animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
52
+ }
53
+
54
+ @keyframes pulse {
55
+ 0%, 100% { opacity: 1; }
56
+ 50% { opacity: 0.5; }
57
+ }
58
+
59
+ .code-block {
60
+ background-color: #1e293b;
61
+ color: #f8fafc;
62
+ border-radius: 0.5rem;
63
+ padding: 1.5rem;
64
+ font-family: 'Courier New', Courier, monospace;
65
+ position: relative;
66
+ }
67
+
68
+ .copy-btn {
69
+ position: absolute;
70
+ top: 0.5rem;
71
+ right: 0.5rem;
72
+ background-color: #334155;
73
+ color: #f8fafc;
74
+ border: none;
75
+ border-radius: 0.25rem;
76
+ padding: 0.25rem 0.5rem;
77
+ cursor: pointer;
78
+ font-size: 0.75rem;
79
+ }
80
+ </style>
81
+ </head>
82
+ <body class="min-h-screen">
83
+ <!-- Navigation -->
84
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
85
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
86
+ <div class="flex justify-between h-16">
87
+ <div class="flex items-center">
88
+ <div class="flex-shrink-0 flex items-center">
89
+ <svg class="h-8 w-8 text-indigo-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
90
+ <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
91
+ <path d="M12 8V16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
92
+ <path d="M8 12H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
93
+ </svg>
94
+ <span class="ml-2 text-xl font-bold text-gray-900">DiffRhythm</span>
95
+ </div>
96
+ </div>
97
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
98
+ <a href="#demo" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-indigo-500 text-sm font-medium">Demo</a>
99
+ <a href="#features" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-indigo-500 text-sm font-medium">Features</a>
100
+ <a href="#api" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-indigo-500 text-sm font-medium">API</a>
101
+ <a href="#research" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-indigo-500 text-sm font-medium">Research</a>
102
+ </div>
103
+ <div class="flex items-center">
104
+ <a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
105
+ <i class="fab fa-github mr-2"></i> View on Hugging Face
106
+ </a>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </nav>
111
+
112
+ <!-- Hero Section -->
113
+ <div class="gradient-bg text-white">
114
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
115
+ <div class="text-center">
116
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
117
+ DiffRhythm-full
118
+ </h1>
119
+ <p class="mt-6 max-w-2xl mx-auto text-xl">
120
+ A diffusion-based model for high-quality rhythm generation in music
121
+ </p>
122
+ <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
123
+ <a href="#try-it" class="bg-white text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-md font-medium transition-colors duration-200">
124
+ <i class="fas fa-play mr-2"></i> Try Demo
125
+ </a>
126
+ <a href="https://arxiv.org/abs/2305.18874" target="_blank" class="bg-indigo-800 hover:bg-indigo-900 text-white px-6 py-3 rounded-md font-medium transition-colors duration-200">
127
+ <i class="fas fa-file-alt mr-2"></i> Research Paper
128
+ </a>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+
134
+ <!-- Model Info Section -->
135
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8" id="demo">
136
+ <div class="text-center mb-12">
137
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
138
+ AI-Powered Rhythm Generation
139
+ </h2>
140
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
141
+ DiffRhythm-full generates realistic and diverse rhythm patterns for music composition
142
+ </p>
143
+ </div>
144
+
145
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
146
+ <div class="p-6">
147
+ <div class="flex flex-col md:flex-row gap-6">
148
+ <div class="md:w-1/2">
149
+ <h3 class="text-lg font-medium text-gray-900">Live Demo</h3>
150
+ <p class="mt-2 text-gray-500">
151
+ Generate rhythm patterns by specifying your preferences:
152
+ </p>
153
+
154
+ <div class="mt-6 space-y-4">
155
+ <div>
156
+ <label class="block text-sm font-medium text-gray-700">Genre</label>
157
+ <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
158
+ <option>Pop</option>
159
+ <option>Rock</option>
160
+ <option>Jazz</option>
161
+ <option>Electronic</option>
162
+ <option>Hip Hop</option>
163
+ <option>Classical</option>
164
+ </select>
165
+ </div>
166
+
167
+ <div>
168
+ <label class="block text-sm font-medium text-gray-700">Tempo (BPM)</label>
169
+ <input type="range" min="60" max="200" value="120" class="mt-1 block w-full">
170
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
171
+ <span>60</span>
172
+ <span>120</span>
173
+ <span>200</span>
174
+ </div>
175
+ </div>
176
+
177
+ <div>
178
+ <label class="block text-sm font-medium text-gray-700">Complexity</label>
179
+ <select class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
180
+ <option>Simple</option>
181
+ <option selected>Medium</option>
182
+ <option>Complex</option>
183
+ </select>
184
+ </div>
185
+
186
+ <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium transition-colors duration-200">
187
+ Generate Rhythm
188
+ </button>
189
+ </div>
190
+ </div>
191
+
192
+ <div class="md:w-1/2">
193
+ <h3 class="text-lg font-medium text-gray-900">Output Preview</h3>
194
+ <div class="mt-6 bg-gray-50 rounded-lg p-4">
195
+ <div class="flex justify-between items-center mb-4">
196
+ <div>
197
+ <h4 class="font-medium">Generated Rhythm</h4>
198
+ <p class="text-sm text-gray-500">Pop • 120 BPM • Medium complexity</p>
199
+ </div>
200
+ <button class="text-indigo-600 hover:text-indigo-800">
201
+ <i class="fas fa-download"></i>
202
+ </button>
203
+ </div>
204
+
205
+ <div class="waveform"></div>
206
+
207
+ <div class="mt-4 grid grid-cols-4 gap-2">
208
+ <div class="bg-indigo-100 h-8 rounded flex items-center justify-center">
209
+ <i class="fas fa-drum text-indigo-600"></i>
210
+ </div>
211
+ <div class="bg-indigo-100 h-8 rounded flex items-center justify-center">
212
+ <i class="fas fa-drum text-indigo-600"></i>
213
+ </div>
214
+ <div class="bg-indigo-100 h-8 rounded flex items-center justify-center">
215
+ <i class="fas fa-drum text-indigo-600"></i>
216
+ </div>
217
+ <div class="bg-indigo-100 h-8 rounded flex items-center justify-center">
218
+ <i class="fas fa-drum text-indigo-600"></i>
219
+ </div>
220
+ <div class="bg-indigo-100 h-8 rounded flex items-center justify-center">
221
+ <i class="fas fa-drum text-indigo-600"></i>
222
+ </div>
223
+ <div class="bg-gray-200 h-8 rounded"></div>
224
+ <div class="bg-indigo-100 h-8 rounded flex items-center justify-center">
225
+ <i class="fas fa-drum text-indigo-600"></i>
226
+ </div>
227
+ <div class="bg-gray-200 h-8 rounded"></div>
228
+ </div>
229
+
230
+ <div class="mt-4 flex justify-between">
231
+ <button class="text-indigo-600 hover:text-indigo-800 flex items-center">
232
+ <i class="fas fa-play mr-2"></i> Play
233
+ </button>
234
+ <button class="text-indigo-600 hover:text-indigo-800 flex items-center">
235
+ <i class="fas fa-redo mr-2"></i> Regenerate
236
+ </button>
237
+ <button class="text-indigo-600 hover:text-indigo-800 flex items-center">
238
+ <i class="fas fa-music mr-2"></i> Add to Project
239
+ </button>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Features Section -->
249
+ <div class="bg-gray-50 py-16" id="features">
250
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
251
+ <div class="lg:text-center">
252
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
253
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
254
+ Why Choose DiffRhythm-full?
255
+ </p>
256
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
257
+ Advanced AI capabilities for professional music production
258
+ </p>
259
+ </div>
260
+
261
+ <div class="mt-20">
262
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
263
+ <div class="relative">
264
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
265
+ <i class="fas fa-brain"></i>
266
+ </div>
267
+ <div class="ml-16">
268
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Diffusion-Based</h3>
269
+ <p class="mt-2 text-base text-gray-500">
270
+ Utilizes state-of-the-art diffusion models for high-quality rhythm generation
271
+ </p>
272
+ </div>
273
+ </div>
274
+
275
+ <div class="relative">
276
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
277
+ <i class="fas fa-sliders-h"></i>
278
+ </div>
279
+ <div class="ml-16">
280
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Parameter Control</h3>
281
+ <p class="mt-2 text-base text-gray-500">
282
+ Fine-tune generation with tempo, genre, and complexity parameters
283
+ </p>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="relative">
288
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
289
+ <i class="fas fa-music"></i>
290
+ </div>
291
+ <div class="ml-16">
292
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Multi-Instrument</h3>
293
+ <p class="mt-2 text-base text-gray-500">
294
+ Generates coordinated rhythms across drum kits and percussion instruments
295
+ </p>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="relative">
300
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
301
+ <i class="fas fa-file-export"></i>
302
+ </div>
303
+ <div class="ml-16">
304
+ <h3 class="text-lg leading-6 font-medium text-gray-900">MIDI Export</h3>
305
+ <p class="mt-2 text-base text-gray-500">
306
+ Export generated rhythms as MIDI files for use in any DAW
307
+ </p>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="relative">
312
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
313
+ <i class="fas fa-random"></i>
314
+ </div>
315
+ <div class="ml-16">
316
+ <h3 class="text-lg leading-6 font-medium text-gray-900">Diverse Styles</h3>
317
+ <p class="mt-2 text-base text-gray-500">
318
+ Capable of generating everything from simple beats to complex polyrhythms
319
+ </p>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="relative">
324
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
325
+ <i class="fas fa-robot"></i>
326
+ </div>
327
+ <div class="ml-16">
328
+ <h3 class="text-lg leading-6 font-medium text-gray-900">AI-Powered</h3>
329
+ <p class="mt-2 text-base text-gray-500">
330
+ Trained on extensive datasets of professional rhythm patterns
331
+ </p>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </div>
338
+
339
+ <!-- API Section -->
340
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8" id="api">
341
+ <div class="text-center mb-12">
342
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
343
+ API Integration
344
+ </h2>
345
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
346
+ Easily integrate DiffRhythm-full into your applications
347
+ </p>
348
+ </div>
349
+
350
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
351
+ <div class="p-6">
352
+ <div class="flex flex-col md:flex-row gap-6">
353
+ <div class="md:w-1/2">
354
+ <h3 class="text-lg font-medium text-gray-900">Python Example</h3>
355
+ <p class="mt-2 text-gray-500">
356
+ Generate rhythms programmatically with our Python API:
357
+ </p>
358
+
359
+ <div class="mt-6 code-block">
360
+ <button class="copy-btn" onclick="copyCode()">
361
+ <i class="fas fa-copy mr-1"></i> Copy
362
+ </button>
363
+ <pre><code>from diffrhythm import DiffRhythmGenerator
364
+
365
+ # Initialize the generator
366
+ generator = DiffRhythmGenerator.from_pretrained("ASLP-lab/DiffRhythm-full")
367
+
368
+ # Generate a rhythm pattern
369
+ params = {
370
+ "genre": "rock",
371
+ "tempo": 110,
372
+ "complexity": "medium",
373
+ "duration": 8 # bars
374
+ }
375
+
376
+ rhythm = generator.generate(**params)
377
+
378
+ # Save as MIDI
379
+ rhythm.save("output.mid")</code></pre>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="md:w-1/2">
384
+ <h3 class="text-lg font-medium text-gray-900">API Parameters</h3>
385
+ <div class="mt-6 space-y-4">
386
+ <div class="border-b border-gray-200 pb-4">
387
+ <h4 class="font-medium text-gray-900">genre</h4>
388
+ <p class="text-sm text-gray-500 mt-1">Specifies the musical genre for the rhythm (e.g., pop, rock, jazz, electronic)</p>
389
+ </div>
390
+
391
+ <div class="border-b border-gray-200 pb-4">
392
+ <h4 class="font-medium text-gray-900">tempo</h4>
393
+ <p class="text-sm text-gray-500 mt-1">Beats per minute (BPM) for the generated rhythm (range: 60-200)</p>
394
+ </div>
395
+
396
+ <div class="border-b border-gray-200 pb-4">
397
+ <h4 class="font-medium text-gray-900">complexity</h4>
398
+ <p class="text-sm text-gray-500 mt-1">Controls the rhythmic complexity (simple, medium, complex)</p>
399
+ </div>
400
+
401
+ <div class="border-b border-gray-200 pb-4">
402
+ <h4 class="font-medium text-gray-900">duration</h4>
403
+ <p class="text-sm text-gray-500 mt-1">Length of the generated rhythm in musical bars</p>
404
+ </div>
405
+
406
+ <div class="border-b border-gray-200 pb-4">
407
+ <h4 class="font-medium text-gray-900">instruments</h4>
408
+ <p class="text-sm text-gray-500 mt-1">Optional list of percussion instruments to include</p>
409
+ </div>
410
+
411
+ <a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-4">
412
+ <i class="fas fa-book mr-2"></i> Full API Documentation
413
+ </a>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <!-- Research Section -->
422
+ <div class="bg-gray-50 py-16" id="research">
423
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
424
+ <div class="lg:text-center">
425
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Research</h2>
426
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
427
+ The Science Behind DiffRhythm
428
+ </p>
429
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
430
+ Cutting-edge AI research in music generation
431
+ </p>
432
+ </div>
433
+
434
+ <div class="mt-12 grid gap-8 lg:grid-cols-2">
435
+ <div class="bg-white overflow-hidden shadow rounded-lg">
436
+ <div class="p-5">
437
+ <div class="flex items-center">
438
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
439
+ <i class="fas fa-file-alt text-white text-xl"></i>
440
+ </div>
441
+ <div class="ml-5 w-0 flex-1">
442
+ <h3 class="text-lg font-medium text-gray-900">Research Paper</h3>
443
+ <p class="mt-1 text-sm text-gray-500">
444
+ Learn about the architecture and training methodology
445
+ </p>
446
+ <a href="https://arxiv.org/abs/2305.18874" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-2">
447
+ Read paper <i class="fas fa-external-link-alt ml-1 text-xs"></i>
448
+ </a>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="bg-white overflow-hidden shadow rounded-lg">
455
+ <div class="p-5">
456
+ <div class="flex items-center">
457
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
458
+ <i class="fas fa-chart-bar text-white text-xl"></i>
459
+ </div>
460
+ <div class="ml-5 w-0 flex-1">
461
+ <h3 class="text-lg font-medium text-gray-900">Model Performance</h3>
462
+ <p class="mt-1 text-sm text-gray-500">
463
+ Evaluation metrics and comparative analysis
464
+ </p>
465
+ <a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-2">
466
+ View details <i class="fas fa-external-link-alt ml-1 text-xs"></i>
467
+ </a>
468
+ </div>
469
+ </div>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="bg-white overflow-hidden shadow rounded-lg">
474
+ <div class="p-5">
475
+ <div class="flex items-center">
476
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
477
+ <i class="fas fa-code-branch text-white text-xl"></i>
478
+ </div>
479
+ <div class="ml-5 w-0 flex-1">
480
+ <h3 class="text-lg font-medium text-gray-900">Model Architecture</h3>
481
+ <p class="mt-1 text-sm text-gray-500">
482
+ Technical details of the diffusion model implementation
483
+ </p>
484
+ <a href="https://github.com/ASLP-Lab/DiffRhythm" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-2">
485
+ GitHub repository <i class="fas fa-external-link-alt ml-1 text-xs"></i>
486
+ </a>
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="bg-white overflow-hidden shadow rounded-lg">
493
+ <div class="p-5">
494
+ <div class="flex items-center">
495
+ <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
496
+ <i class="fas fa-users text-white text-xl"></i>
497
+ </div>
498
+ <div class="ml-5 w-0 flex-1">
499
+ <h3 class="text-lg font-medium text-gray-900">Research Team</h3>
500
+ <p class="mt-1 text-sm text-gray-500">
501
+ ASLP-Lab at Peking University
502
+ </p>
503
+ <a href="https://aslp-kx-pku.github.io/" target="_blank" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 mt-2">
504
+ Visit lab website <i class="fas fa-external-link-alt ml-1 text-xs"></i>
505
+ </a>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- CTA Section -->
515
+ <div class="bg-indigo-700">
516
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
517
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
518
+ <span class="block">Ready to integrate DiffRhythm?</span>
519
+ <span class="block">Start generating professional rhythms today.</span>
520
+ </h2>
521
+ <p class="mt-4 text-lg leading-6 text-indigo-200">
522
+ Available on Hugging Face for easy integration into your projects.
523
+ </p>
524
+ <a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto transition-colors duration-200">
525
+ <i class="fab fa-hubspot mr-2"></i> Get the Model
526
+ </a>
527
+ </div>
528
+ </div>
529
+
530
+ <!-- Footer -->
531
+ <footer class="bg-white">
532
+ <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
533
+ <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
534
+ <div class="px-5 py-2">
535
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
536
+ Home
537
+ </a>
538
+ </div>
539
+ <div class="px-5 py-2">
540
+ <a href="#demo" class="text-base text-gray-500 hover:text-gray-900">
541
+ Demo
542
+ </a>
543
+ </div>
544
+ <div class="px-5 py-2">
545
+ <a href="#features" class="text-base text-gray-500 hover:text-gray-900">
546
+ Features
547
+ </a>
548
+ </div>
549
+ <div class="px-5 py-2">
550
+ <a href="#api" class="text-base text-gray-500 hover:text-gray-900">
551
+ API
552
+ </a>
553
+ </div>
554
+ <div class="px-5 py-2">
555
+ <a href="#research" class="text-base text-gray-500 hover:text-gray-900">
556
+ Research
557
+ </a>
558
+ </div>
559
+ <div class="px-5 py-2">
560
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">
561
+ Terms
562
+ </a>
563
+ </div>
564
+ </nav>
565
+ <div class="mt-8 flex justify-center space-x-6">
566
+ <a href="https://github.com/ASLP-Lab/DiffRhythm" target="_blank" class="text-gray-400 hover:text-gray-500">
567
+ <span class="sr-only">GitHub</span>
568
+ <i class="fab fa-github"></i>
569
+ </a>
570
+ <a href="https://arxiv.org/abs/2305.18874" target="_blank" class="text-gray-400 hover:text-gray-500">
571
+ <span class="sr-only">arXiv</span>
572
+ <i class="fas fa-file-alt"></i>
573
+ </a>
574
+ <a href="https://huggingface.co/ASLP-lab/DiffRhythm-full" target="_blank" class="text-gray-400 hover:text-gray-500">
575
+ <span class="sr-only">Hugging Face</span>
576
+ <i class="fab fa-hubspot"></i>
577
+ </a>
578
+ <a href="https://aslp-kx-pku.github.io/" target="_blank" class="text-gray-400 hover:text-gray-500">
579
+ <span class="sr-only">ASLP-Lab</span>
580
+ <i class="fas fa-university"></i>
581
+ </a>
582
+ </div>
583
+ <p class="mt-8 text-center text-base text-gray-400">
584
+ &copy; 2023 ASLP-Lab, Peking University. All rights reserved.
585
+ </p>
586
+ </div>
587
+ </footer>
588
+
589
+ <script>
590
+ // Copy code block
591
+ function copyCode() {
592
+ const code = document.querySelector('.code-block code').innerText;
593
+ navigator.clipboard.writeText(code).then(() => {
594
+ const btn = document.querySelector('.copy-btn');
595
+ btn.innerHTML = '<i class="fas fa-check mr-1"></i> Copied!';
596
+ setTimeout(() => {
597
+ btn.innerHTML = '<i class="fas fa-copy mr-1"></i> Copy';
598
+ }, 2000);
599
+ });
600
+ }
601
+
602
+ // Simple demo functionality
603
+ document.addEventListener('DOMContentLoaded', function() {
604
+ const generateBtn = document.querySelector('button:contains("Generate Rhythm")');
605
+ if (generateBtn) {
606
+ generateBtn.addEventListener('click', function() {
607
+ const genre = document.querySelector('select').value;
608
+ const tempo = document.querySelector('input[type="range"]').value;
609
+ const complexity = document.querySelectorAll('select')[1].value;
610
+
611
+ document.querySelector('.waveform').classList.add('animate-pulse-slow');
612
+
613
+ setTimeout(() => {
614
+ document.querySelector('.waveform').classList.remove('animate-pulse-slow');
615
+
616
+ const outputTitle = document.querySelector('.bg-gray-50 h4');
617
+ const outputDesc = document.querySelector('.bg-gray-50 p');
618
+
619
+ outputTitle.textContent = "Generated " + genre + " Rhythm";
620
+ outputDesc.textContent = genre + " • " + tempo + " BPM • " + complexity + " complexity";
621
+
622
+ alert('Rhythm generated successfully! Click "Play" to listen.');
623
+ }, 2000);
624
+ });
625
+ }
626
+ });
627
+ </script>
628
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jonhwolf/beats" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
629
+ </html>
prompts.txt ADDED
File without changes