Hugging Face's logo

Spaces:
johny6969
/
music-sampler-gen
Running

App Files Community
johny6969 commited on
Commit
3200cdc
·
verified ·
1 Parent(s): 5a43b1f

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +431 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Music Sampler Gen
3
- emoji: 😻
4
- colorFrom: red
5
- colorTo: pink
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: music-sampler-gen
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: yellow
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,431 @@
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>Hip Hop Sample Generator</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
+ .waveform {
11
+ background: linear-gradient(90deg, #4f46e5 0%, #10b981 100%);
12
+ height: 100px;
13
+ border-radius: 8px;
14
+ position: relative;
15
+ overflow: hidden;
16
+ }
17
+
18
+ .waveform::before {
19
+ content: "";
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
23
+ right: 0;
24
+ bottom: 0;
25
+ background: repeating-linear-gradient(
26
+ 90deg,
27
+ rgba(255, 255, 255, 0.1),
28
+ rgba(255, 255, 255, 0.1) 2px,
29
+ transparent 2px,
30
+ transparent 4px
31
+ );
32
+ animation: wave 2s linear infinite;
33
+ }
34
+
35
+ @keyframes wave {
36
+ 0% { transform: translateX(0); }
37
+ 100% { transform: translateX(-4px); }
38
+ }
39
+
40
+ .playhead {
41
+ position: absolute;
42
+ top: 0;
43
+ bottom: 0;
44
+ width: 2px;
45
+ background-color: white;
46
+ z-index: 10;
47
+ box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
48
+ }
49
+
50
+ .audio-controls button {
51
+ transition: all 0.2s ease;
52
+ }
53
+
54
+ .audio-controls button:hover {
55
+ transform: scale(1.1);
56
+ }
57
+
58
+ .audio-controls button:active {
59
+ transform: scale(0.95);
60
+ }
61
+
62
+ .glow {
63
+ box-shadow: 0 0 15px rgba(79, 70, 229, 0.7);
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-gray-900 text-white min-h-screen">
68
+ <div class="container mx-auto px-4 py-8">
69
+ <header class="mb-12 text-center">
70
+ <h1 class="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-emerald-400 mb-4">
71
+ Hip Hop Sample Generator
72
+ </h1>
73
+ <p class="text-gray-300 max-w-2xl mx-auto">
74
+ Extract random samples from your favorite songs and create unique hip hop beats with just a few clicks.
75
+ </p>
76
+ </header>
77
+
78
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
79
+ <div class="bg-gray-800 rounded-xl p-6 shadow-xl">
80
+ <h2 class="text-2xl font-semibold mb-4 flex items-center">
81
+ <i class="fas fa-music mr-2 text-purple-400"></i> Source Track
82
+ </h2>
83
+
84
+ <div class="mb-6">
85
+ <label class="block text-gray-300 mb-2">Upload MP3 File</label>
86
+ <div class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center hover:border-purple-500 transition-colors cursor-pointer" id="dropZone">
87
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-500 mb-2"></i>
88
+ <p class="text-gray-400">Drag & drop your file here or click to browse</p>
89
+ <input type="file" id="fileInput" class="hidden" accept="audio/mp3,audio/*">
90
+ </div>
91
+ <div id="fileInfo" class="mt-2 text-sm text-gray-400 hidden">
92
+ <span id="fileName"></span> (<span id="fileSize"></span>)
93
+ </div>
94
+ </div>
95
+
96
+ <div class="mb-6">
97
+ <label class="block text-gray-300 mb-2">Or enter YouTube URL</label>
98
+ <div class="flex">
99
+ <input type="text" placeholder="https://www.youtube.com/watch?v=..." class="flex-grow bg-gray-700 border border-gray-600 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
100
+ <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-r-lg font-medium transition-colors">
101
+ <i class="fas fa-download mr-2"></i> Import
102
+ </button>
103
+ </div>
104
+ </div>
105
+
106
+ <div class="waveform mb-4 relative" id="sourceWaveform">
107
+ <div class="playhead" id="sourcePlayhead" style="left: 0;"></div>
108
+ </div>
109
+
110
+ <div class="flex justify-between items-center text-sm text-gray-400 mb-2">
111
+ <span id="sourceCurrentTime">0:00</span>
112
+ <span id="sourceDuration">0:00</span>
113
+ </div>
114
+
115
+ <div class="audio-controls flex justify-center space-x-4">
116
+ <button class="bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center">
117
+ <i class="fas fa-backward"></i>
118
+ </button>
119
+ <button class="bg-purple-600 hover:bg-purple-700 w-12 h-12 rounded-full flex items-center justify-center glow" id="playSource">
120
+ <i class="fas fa-play"></i>
121
+ </button>
122
+ <button class="bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center">
123
+ <i class="fas fa-forward"></i>
124
+ </button>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="bg-gray-800 rounded-xl p-6 shadow-xl">
129
+ <h2 class="text-2xl font-semibold mb-4 flex items-center">
130
+ <i class="fas fa-random mr-2 text-emerald-400"></i> Generated Sample
131
+ </h2>
132
+
133
+ <div class="mb-6">
134
+ <label class="block text-gray-300 mb-2">Sample Length</label>
135
+ <div class="flex items-center space-x-4">
136
+ <input type="range" min="5" max="60" value="30" class="flex-grow accent-purple-500" id="sampleLength">
137
+ <span class="bg-gray-700 px-3 py-1 rounded-md text-sm font-mono" id="sampleLengthValue">30s</span>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="mb-6">
142
+ <label class="block text-gray-300 mb-2">Effects</label>
143
+ <div class="grid grid-cols-2 gap-3">
144
+ <label class="flex items-center space-x-2 cursor-pointer">
145
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600 rounded" checked>
146
+ <span>Fade In</span>
147
+ </label>
148
+ <label class="flex items-center space-x-2 cursor-pointer">
149
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600 rounded" checked>
150
+ <span>Fade Out</span>
151
+ </label>
152
+ <label class="flex items-center space-x-2 cursor-pointer">
153
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600 rounded">
154
+ <span>Reverse</span>
155
+ </label>
156
+ <label class="flex items-center space-x-2 cursor-pointer">
157
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600 rounded">
158
+ <span>Pitch Shift</span>
159
+ </label>
160
+ </div>
161
+ </div>
162
+
163
+ <div class="waveform mb-4 relative" id="sampleWaveform">
164
+ <div class="playhead" id="samplePlayhead" style="left: 0;"></div>
165
+ </div>
166
+
167
+ <div class="flex justify-between items-center text-sm text-gray-400 mb-2">
168
+ <span id="sampleCurrentTime">0:00</span>
169
+ <span id="sampleDuration">0:00</span>
170
+ </div>
171
+
172
+ <div class="audio-controls flex justify-center space-x-4 mb-6">
173
+ <button class="bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center">
174
+ <i class="fas fa-redo"></i>
175
+ </button>
176
+ <button class="bg-emerald-600 hover:bg-emerald-700 w-12 h-12 rounded-full flex items-center justify-center glow" id="playSample">
177
+ <i class="fas fa-play"></i>
178
+ </button>
179
+ <button class="bg-gray-700 hover:bg-gray-600 w-12 h-12 rounded-full flex items-center justify-center">
180
+ <i class="fas fa-download"></i>
181
+ </button>
182
+ </div>
183
+
184
+ <button class="w-full bg-gradient-to-r from-purple-600 to-emerald-600 hover:from-purple-700 hover:to-emerald-700 py-3 px-6 rounded-lg font-bold text-lg transition-all transform hover:scale-105" id="generateBtn">
185
+ <i class="fas fa-magic mr-2"></i> Generate Random Sample
186
+ </button>
187
+ </div>
188
+ </div>
189
+
190
+ <div class="bg-gray-800 rounded-xl p-6 shadow-xl">
191
+ <h2 class="text-2xl font-semibold mb-4 flex items-center">
192
+ <i class="fas fa-history mr-2 text-amber-400"></i> Sample History
193
+ </h2>
194
+
195
+ <div class="overflow-x-auto">
196
+ <table class="min-w-full divide-y divide-gray-700">
197
+ <thead class="bg-gray-700">
198
+ <tr>
199
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Date</th>
200
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Source</th>
201
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Duration</th>
202
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
203
+ </tr>
204
+ </thead>
205
+ <tbody class="bg-gray-800 divide-y divide-gray-700">
206
+ <tr>
207
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Just now</td>
208
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">Sample_001.wav</td>
209
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">30s</td>
210
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
211
+ <button class="text-purple-400 hover:text-purple-300 mr-3">
212
+ <i class="fas fa-play"></i>
213
+ </button>
214
+ <button class="text-emerald-400 hover:text-emerald-300 mr-3">
215
+ <i class="fas fa-download"></i>
216
+ </button>
217
+ <button class="text-red-400 hover:text-red-300">
218
+ <i class="fas fa-trash"></i>
219
+ </button>
220
+ </td>
221
+ </tr>
222
+ <tr>
223
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">2 minutes ago</td>
224
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">Sample_002.wav</td>
225
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">25s</td>
226
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
227
+ <button class="text-purple-400 hover:text-purple-300 mr-3">
228
+ <i class="fas fa-play"></i>
229
+ </button>
230
+ <button class="text-emerald-400 hover:text-emerald-300 mr-3">
231
+ <i class="fas fa-download"></i>
232
+ </button>
233
+ <button class="text-red-400 hover:text-red-300">
234
+ <i class="fas fa-trash"></i>
235
+ </button>
236
+ </td>
237
+ </tr>
238
+ </tbody>
239
+ </table>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <script>
245
+ // DOM elements
246
+ const dropZone = document.getElementById('dropZone');
247
+ const fileInput = document.getElementById('fileInput');
248
+ const fileInfo = document.getElementById('fileInfo');
249
+ const fileName = document.getElementById('fileName');
250
+ const fileSize = document.getElementById('fileSize');
251
+ const sampleLength = document.getElementById('sampleLength');
252
+ const sampleLengthValue = document.getElementById('sampleLengthValue');
253
+ const generateBtn = document.getElementById('generateBtn');
254
+ const playSource = document.getElementById('playSource');
255
+ const playSample = document.getElementById('playSample');
256
+
257
+ // Event listeners
258
+ dropZone.addEventListener('click', () => fileInput.click());
259
+
260
+ fileInput.addEventListener('change', (e) => {
261
+ if (e.target.files.length) {
262
+ const file = e.target.files[0];
263
+ updateFileInfo(file);
264
+ }
265
+ });
266
+
267
+ dropZone.addEventListener('dragover', (e) => {
268
+ e.preventDefault();
269
+ dropZone.classList.add('border-purple-500');
270
+ dropZone.classList.remove('border-gray-600');
271
+ });
272
+
273
+ dropZone.addEventListener('dragleave', () => {
274
+ dropZone.classList.remove('border-purple-500');
275
+ dropZone.classList.add('border-gray-600');
276
+ });
277
+
278
+ dropZone.addEventListener('drop', (e) => {
279
+ e.preventDefault();
280
+ dropZone.classList.remove('border-purple-500');
281
+ dropZone.classList.add('border-gray-600');
282
+
283
+ if (e.dataTransfer.files.length) {
284
+ const file = e.dataTransfer.files[0];
285
+ fileInput.files = e.dataTransfer.files;
286
+ updateFileInfo(file);
287
+ }
288
+ });
289
+
290
+ sampleLength.addEventListener('input', () => {
291
+ sampleLengthValue.textContent = `${sampleLength.value}s`;
292
+ });
293
+
294
+ generateBtn.addEventListener('click', () => {
295
+ // Simulate generation
296
+ generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...';
297
+ generateBtn.disabled = true;
298
+
299
+ setTimeout(() => {
300
+ generateBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Sample Generated!';
301
+ setTimeout(() => {
302
+ generateBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Generate Random Sample';
303
+ generateBtn.disabled = false;
304
+ }, 2000);
305
+
306
+ // Simulate adding to history
307
+ const historyTable = document.querySelector('tbody');
308
+ const newRow = document.createElement('tr');
309
+ newRow.innerHTML = `
310
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">Just now</td>
311
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">Sample_${Math.floor(Math.random() * 1000)}.wav</td>
312
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">${sampleLength.value}s</td>
313
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
314
+ <button class="text-purple-400 hover:text-purple-300 mr-3">
315
+ <i class="fas fa-play"></i>
316
+ </button>
317
+ <button class="text-emerald-400 hover:text-emerald-300 mr-3">
318
+ <i class="fas fa-download"></i>
319
+ </button>
320
+ <button class="text-red-400 hover:text-red-300">
321
+ <i class="fas fa-trash"></i>
322
+ </button>
323
+ </td>
324
+ `;
325
+ historyTable.prepend(newRow);
326
+ }, 2000);
327
+ });
328
+
329
+ playSource.addEventListener('click', function() {
330
+ const icon = this.querySelector('i');
331
+ if (icon.classList.contains('fa-play')) {
332
+ icon.classList.remove('fa-play');
333
+ icon.classList.add('fa-pause');
334
+ // Simulate playing
335
+ animatePlayhead('sourcePlayhead', 'sourceWaveform', 'sourceCurrentTime', 30);
336
+ } else {
337
+ icon.classList.remove('fa-pause');
338
+ icon.classList.add('fa-play');
339
+ // Stop animation
340
+ stopPlayhead('sourcePlayhead');
341
+ }
342
+ });
343
+
344
+ playSample.addEventListener('click', function() {
345
+ const icon = this.querySelector('i');
346
+ if (icon.classList.contains('fa-play')) {
347
+ icon.classList.remove('fa-play');
348
+ icon.classList.add('fa-pause');
349
+ // Simulate playing
350
+ animatePlayhead('samplePlayhead', 'sampleWaveform', 'sampleCurrentTime', sampleLength.value);
351
+ } else {
352
+ icon.classList.remove('fa-pause');
353
+ icon.classList.add('fa-play');
354
+ // Stop animation
355
+ stopPlayhead('samplePlayhead');
356
+ }
357
+ });
358
+
359
+ // Helper functions
360
+ function updateFileInfo(file) {
361
+ fileName.textContent = file.name;
362
+ fileSize.textContent = formatFileSize(file.size);
363
+ fileInfo.classList.remove('hidden');
364
+
365
+ // Simulate waveform display
366
+ setTimeout(() => {
367
+ document.getElementById('sourceDuration').textContent = '3:45';
368
+ }, 500);
369
+ }
370
+
371
+ function formatFileSize(bytes) {
372
+ if (bytes === 0) return '0 Bytes';
373
+ const k = 1024;
374
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
375
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
376
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
377
+ }
378
+
379
+ function animatePlayhead(playheadId, waveformId, timeId, duration) {
380
+ const playhead = document.getElementById(playheadId);
381
+ const waveform = document.getElementById(waveformId);
382
+ const timeDisplay = document.getElementById(timeId);
383
+
384
+ const waveformWidth = waveform.offsetWidth;
385
+ let progress = 0;
386
+ const startTime = Date.now();
387
+ const durationMs = duration * 1000;
388
+
389
+ function update() {
390
+ const elapsed = Date.now() - startTime;
391
+ progress = Math.min(elapsed / durationMs, 1);
392
+
393
+ const position = progress * waveformWidth;
394
+ playhead.style.left = `${position}px`;
395
+
396
+ // Update time display
397
+ const currentTime = progress * duration;
398
+ timeDisplay.textContent = formatTime(currentTime);
399
+
400
+ if (progress < 1) {
401
+ requestAnimationFrame(update);
402
+ } else {
403
+ // Reset when finished
404
+ const playButton = playheadId === 'sourcePlayhead' ? playSource : playSample;
405
+ const icon = playButton.querySelector('i');
406
+ icon.classList.remove('fa-pause');
407
+ icon.classList.add('fa-play');
408
+ playhead.style.left = '0';
409
+ timeDisplay.textContent = '0:00';
410
+ }
411
+ }
412
+
413
+ update();
414
+ }
415
+
416
+ function stopPlayhead(playheadId) {
417
+ // In a real implementation, we would stop the audio and animation
418
+ // For this demo, we just reset the playhead
419
+ document.getElementById(playheadId).style.left = '0';
420
+ const timeId = playheadId === 'sourcePlayhead' ? 'sourceCurrentTime' : 'sampleCurrentTime';
421
+ document.getElementById(timeId).textContent = '0:00';
422
+ }
423
+
424
+ function formatTime(seconds) {
425
+ const mins = Math.floor(seconds / 60);
426
+ const secs = Math.floor(seconds % 60);
427
+ return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
428
+ }
429
+ </script>
430
+ <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=johny6969/music-sampler-gen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
431
+ </html>