Hugging Face's logo

Spaces:
francois55512
/
playlist-scraper-bot
Running

App Files Community
francois55512 commited on
Commit
6cf954a
·
verified ·
1 Parent(s): 60ff3c4

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +403 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Playlist Scraper Bot
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: playlist-scraper-bot
3
+ emoji: 🐳
4
+ colorFrom: blue
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,403 @@
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>Playlist Scraper Bot - Transform Playlists into Data</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
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#1DB954',
15
+ secondary: '#00C2FF',
16
+ dark: '#121212',
17
+ surface: '#1E1E1E'
18
+ },
19
+ animation: {
20
+ 'eating': 'eating 1s ease-in-out infinite',
21
+ 'digesting': 'digesting 2s ease-in-out infinite',
22
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite'
23
+ },
24
+ keyframes: {
25
+ eating: {
26
+ '0%, 100%': { transform: 'translateY(0)' },
27
+ '50%': { transform: 'translateY(-10px)' }
28
+ },
29
+ digesting: {
30
+ '0%, 100%': {
31
+ 'box-shadow': '0 0 0 0 rgba(29, 185, 84, 0.7)',
32
+ 'transform': 'scale(1)'
33
+ },
34
+ '50%': {
35
+ 'box-shadow': '0 0 20px 10px rgba(29, 185, 84, 0)',
36
+ 'transform': 'scale(1.05)'
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
42
+ }
43
+ </script>
44
+ <style type="text/css">
45
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Poppins:wght@300;400;500;600&display=swap');
46
+
47
+ body {
48
+ font-family: 'Poppins', sans-serif;
49
+ background-color: #121212;
50
+ color: #fff;
51
+ min-height: 100vh;
52
+ overflow-x: hidden;
53
+ }
54
+
55
+ .orbitron {
56
+ font-family: 'Orbitron', sans-serif;
57
+ letter-spacing: 1px;
58
+ }
59
+
60
+ .glow-text {
61
+ text-shadow: 0 0 10px rgba(0, 194, 255, 0.7);
62
+ }
63
+
64
+ .robot-container {
65
+ perspective: 1000px;
66
+ }
67
+
68
+ .robot-face {
69
+ transform-style: preserve-3d;
70
+ }
71
+
72
+ .input-path {
73
+ stroke-dasharray: 1000;
74
+ stroke-dashoffset: 1000;
75
+ animation: draw 5s linear forwards;
76
+ }
77
+
78
+ @keyframes draw {
79
+ to {
80
+ stroke-dashoffset: 0;
81
+ }
82
+ }
83
+
84
+ .download-pulse {
85
+ animation: pulse-slow 3s infinite;
86
+ }
87
+
88
+ .input-focus-effect:focus {
89
+ box-shadow: 0 0 0 2px #1DB954, 0 0 20px rgba(29, 185, 84, 0.5);
90
+ }
91
+ </style>
92
+ </head>
93
+ <body class="bg-dark">
94
+ <div class="min-h-screen flex flex-col">
95
+ <!-- Header -->
96
+ <header class="bg-gradient-to-r from-gray-900 to-black py-6 shadow-2xl">
97
+ <div class="container mx-auto px-4">
98
+ <div class="flex items-center justify-between">
99
+ <div class="flex items-center">
100
+ <div class="bg-primary w-12 h-12 rounded-full flex items-center justify-center mr-3">
101
+ <i class="fas fa-robot text-2xl text-white"></i>
102
+ </div>
103
+ <h1 class="orbitron text-2xl md:text-3xl font-bold glow-text">PlaylistScraperBot <span class="text-xs align-super">v2.0</span></h1>
104
+ </div>
105
+
106
+ <nav class="hidden md:flex space-x-6">
107
+ <a href="#" class="text-gray-300 hover:text-primary transition">Home</a>
108
+ <a href="#" class="text-gray-300 hover:text-primary transition">How It Works</a>
109
+ <a href="#" class="text-gray-300 hover:text-primary transition">Examples</a>
110
+ <a href="#" class="text-gray-300 hover:text-primary transition">FAQ</a>
111
+ </nav>
112
+
113
+ <button class="bg-primary hover:bg-green-500 px-4 py-2 rounded-full orbitron text-sm transition transform hover:scale-105">
114
+ <i class="fas fa-user-astronaut mr-2"></i>Bot Login
115
+ </button>
116
+ </div>
117
+ </div>
118
+ </header>
119
+
120
+ <!-- Main Content -->
121
+ <main class="flex-grow container mx-auto px-4 py-10 flex flex-col items-center">
122
+ <!-- Title Section -->
123
+ <div class="text-center mb-12 mt-4 max-w-4xl">
124
+ <h2 class="orbitron text-4xl md:text-6xl font-bold mb-6 glow-text">Transform Playlists into Data</h2>
125
+ <p class="text-gray-300 text-xl md:text-2xl mb-8">
126
+ Feed our bot any Spotify or Last.fm playlist link and receive instant analysis in your desired format
127
+ </p>
128
+
129
+ <div class="flex justify-center space-x-4 mb-12">
130
+ <div class="bg-surface rounded-xl p-4 w-40 transition transform hover:scale-105 border border-gray-800 hover:border-primary">
131
+ <i class="fab fa-spotify text-5xl text-primary mb-3"></i>
132
+ <p class="orbitron">Spotify Playlists</p>
133
+ </div>
134
+ <div class="bg-surface rounded-xl p-4 w-40 transition transform hover:scale-105 border border-gray-800 hover:border-secondary">
135
+ <i class="fab fa-lastfm text-5xl text-secondary mb-3"></i>
136
+ <p class="orbitron">Last.fm</p>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Robot Processing Area -->
142
+ <div class="w-full max-w-4xl mb-16">
143
+ <div class="flex flex-col md:flex-row items-center justify-between gap-10">
144
+ <!-- Input Section -->
145
+ <div class="flex-1">
146
+ <div class="bg-gradient-to-br from-gray-900 to-surface border border-gray-800 rounded-2xl p-8 shadow-xl">
147
+ <h3 class="orbitron text-2xl font-bold mb-6 text-center glow-text">FEED THE BOT</h3>
148
+
149
+ <div class="mb-6">
150
+ <label class="block text-gray-400 mb-2">Enter Playlist URL</label>
151
+ <div class="relative">
152
+ <input
153
+ id="playlistUrl"
154
+ type="text"
155
+ placeholder="https://open.spotify.com/playlist/..."
156
+ class="w-full bg-gray-900 text-white border border-gray-700 rounded-xl py-4 pl-4 pr-12 input-focus-effect transition focus:outline-none"
157
+ >
158
+ <i class="fas fa-link absolute right-4 top-4 text-gray-500"></i>
159
+ </div>
160
+ </div>
161
+
162
+ <div class="grid grid-cols-2 gap-4 mb-8">
163
+ <div>
164
+ <label class="block text-gray-400 mb-2">Output Format</label>
165
+ <div class="relative">
166
+ <select id="formatSelect" class="w-full bg-gray-900 text-white border border-gray-700 rounded-xl py-3 pl-4 pr-10 input-focus-effect transition focus:outline-none appearance-none">
167
+ <option value="json">JSON (.json)</option>
168
+ <option value="csv">CSV (.csv)</option>
169
+ <option value="txt">Text (.txt)</option>
170
+ </select>
171
+ <i class="fas fa-chevron-down absolute right-4 top-3.5 text-gray-500"></i>
172
+ </div>
173
+ </div>
174
+
175
+ <div>
176
+ <label class="block text-gray-400 mb-2">Data Depth</label>
177
+ <div class="relative">
178
+ <select id="depthSelect" class="w-full bg-gray-900 text-white border border-gray-700 rounded-xl py-3 pl-4 pr-10 input-focus-effect transition focus:outline-none appearance-none">
179
+ <option value="basic">Basic Info</option>
180
+ <option value="detailed">Detailed Info</option>
181
+ <option value="full">Full Metadata</option>
182
+ </select>
183
+ <i class="fas fa-layer-group absolute right-4 top-3.5 text-gray-500"></i>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <button id="scrapeBtn" class="w-full bg-gradient-to-r from-primary to-secondary text-white orbitron py-4 rounded-xl text-lg tracking-wider transition transform hover:scale-[1.02]">
189
+ SCRAPE PLAYLIST <i class="fas fa-arrow-right ml-2"></i>
190
+ </button>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Robot Visualizer -->
195
+ <div class="flex-1 flex justify-center">
196
+ <div class="robot-container">
197
+ <div id="robot" class="robot-face">
198
+ <div class="relative flex items-center justify-center">
199
+ <!-- Robot Body -->
200
+ <div class="bg-gray-800 rounded-full w-64 h-64 flex items-center justify-center relative overflow-hidden border-4 border-gray-700 shadow-xl">
201
+ <!-- Face -->
202
+ <div class="absolute top-10 left-1/2 transform -translate-x-1/2">
203
+ <div class="flex space-x-6">
204
+ <div class="eye bg-blue-500 w-8 h-8 rounded-full"></div>
205
+ <div class="eye bg-blue-500 w-8 h-8 rounded-full"></div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Mouth - Input Receiver -->
210
+ <div id="mouth" class="w-24 h-6 bg-gray-900 border-2 border-gray-700 rounded-b-xl absolute top-40 flex justify-center">
211
+ <div class="w-1/2 h-1 bg-primary rounded-full mt-2"></div>
212
+ </div>
213
+
214
+ <!-- Processing Animation -->
215
+ <div id="processing" class="absolute inset-0 rounded-full flex items-center justify-center hidden">
216
+ <div class="w-40 h-40 rounded-full absolute animate-digesting border-4 border-primary opacity-80"></div>
217
+ <div class="w-40 h-40 rounded-full absolute animate-digesting border-4 border-secondary opacity-80" style="animation-delay: -1s"></div>
218
+ </div>
219
+
220
+ <!-- Download Tray -->
221
+ <div id="tray" class="absolute bottom-0 w-full py-4 bg-gray-900 border-t-4 border-gray-700 rounded-b-full flex items-center justify-center opacity-0">
222
+ <div id="downloadElement" class="bg-white text-dark font-bold py-2 px-6 rounded-lg flex items-center justify-center orbitron">
223
+ <i class="fas fa-download mr-2 text-primary"></i>
224
+ <span id="formatLabel">JSON</span>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Path Visualization -->
230
+ <svg width="300" height="300" viewBox="0 0 300 300" class="absolute top-0 left-0 z-0">
231
+ <path id="inputPath" d="M300,150 L190,150 L150,190 L150,250 L100,250" fill="none" stroke="#00C2FF" stroke-width="4" stroke-dasharray="1000" stroke-dashoffset="1000" />
232
+ <path id="outputPath" d="M100,225 L100,250 L70,280" fill="none" stroke="#1DB954" stroke-width="4" stroke-dasharray="1000" stroke-dashoffset="1000" />
233
+ </svg>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Download Section -->
242
+ <div id="downloadSection" class="bg-surface w-full max-w-3xl rounded-2xl p-8 border border-gray-800 shadow-2xl opacity-0 transform -translate-y-10 transition-all duration-500">
243
+ <div class="flex flex-col md:flex-row items-center justify-between">
244
+ <div class="mb-6 md:mb-0 md:mr-8">
245
+ <h3 class="orbitron text-3xl font-bold mb-3 glow-text">PLAYLIST DATA READY!</h3>
246
+ <p class="text-gray-400">Your playlist has been successfully scraped and converted</p>
247
+ </div>
248
+
249
+ <div>
250
+ <div id="fileInfo" class="orbitron mb-4 p-4 bg-gray-900 rounded-lg">
251
+ <p><i class="fas fa-file-alt text-primary mr-2"></i> <span id="fileName">spotify_playlist_data.json</span></p>
252
+ <p><i class="fas fa-music text-secondary mr-2"></i> <span id="trackCount">27 tracks processed</span></p>
253
+ </div>
254
+
255
+ <div class="flex flex-wrap gap-4 justify-center">
256
+ <button id="downloadBtn" class="bg-gradient-to-r from-primary to-green-600 text-white py-3 px-8 rounded-xl font-bold flex items-center orbitron download-pulse">
257
+ <i class="fas fa-download mr-2"></i> DOWNLOAD FILE
258
+ </button>
259
+ <button id="newPlaylistBtn" class="bg-gray-700 hover:bg-gray-600 text-white py-3 px-8 rounded-xl font-bold flex items-center orbitron">
260
+ <i class="fas fa-redo mr-2"></i> NEW SCRAPE
261
+ </button>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </main>
267
+
268
+ <!-- Footer -->
269
+ <footer class="bg-gradient-to-r from-gray-900 to-black py-8 mt-auto border-t border-gray-800">
270
+ <div class="container mx-auto px-4">
271
+ <div class="text-center text-gray-500">
272
+ <p class="orbitron text-lg mb-3">PLAYLISTSCRAPERBOT v2.0</p>
273
+ <p class="mb-4">A futuristic tool for transforming streaming playlists into structured data</p>
274
+ <div class="flex justify-center space-x-4 text-gray-400 text-lg">
275
+ <a href="#"><i class="fab fa-github hover:text-white"></i></a>
276
+ <a href="#"><i class="fab fa-discord hover:text-white"></i></a>
277
+ <a href="#"><i class="fab fa-twitter hover:text-white"></i></a>
278
+ </div>
279
+ <p class="mt-6 text-sm">© 2023 PlaylistScraperBot Industries. Not affiliated with Spotify or Last.fm.</p>
280
+ </div>
281
+ </div>
282
+ </footer>
283
+ </div>
284
+
285
+ <script>
286
+ // Get DOM elements
287
+ const robot = document.getElementById('robot');
288
+ const mouth = document.getElementById('mouth');
289
+ const tray = document.getElementById('tray');
290
+ const processing = document.getElementById('processing');
291
+ const scrapeBtn = document.getElementById('scrapeBtn');
292
+ const downloadSection = document.getElementById('downloadSection');
293
+ const playlistUrl = document.getElementById('playlistUrl');
294
+ const formatSelect = document.getElementById('formatSelect');
295
+ const downloadBtn = document.getElementById('downloadBtn');
296
+ const newPlaylistBtn = document.getElementById('newPlaylistBtn');
297
+ const formatLabel = document.getElementById('formatLabel');
298
+ const fileName = document.getElementById('fileName');
299
+ const trackCount = document.getElementById('trackCount');
300
+ const inputPath = document.getElementById('inputPath');
301
+ const outputPath = document.getElementById('outputPath');
302
+
303
+ // Initialize path animation
304
+ setTimeout(() => {
305
+ inputPath.classList.add('input-path');
306
+ outputPath.classList.add('input-path');
307
+ }, 500);
308
+
309
+ // Scrape playlist
310
+ scrapeBtn.addEventListener('click', () => {
311
+ if (!playlistUrl.value) {
312
+ playlistUrl.focus();
313
+ // Add shaking effect
314
+ playlistUrl.classList.add('animate-shake');
315
+ setTimeout(() => playlistUrl.classList.remove('animate-shake'), 500);
316
+ return;
317
+ }
318
+
319
+ // Start processing animation
320
+ processing.classList.remove('hidden');
321
+ mouth.classList.add('animate-eating');
322
+ tray.classList.remove('opacity-100');
323
+
324
+ // Get selected format
325
+ const format = formatSelect.value;
326
+ const depth = document.getElementById('depthSelect').value;
327
+ const url = playlistUrl.value;
328
+
329
+ // Show file info
330
+ const service = url.includes('spotify') ? 'Spotify' : 'Last.fm';
331
+ const trackCountValue = Math.floor(Math.random() * 30) + 10; // Random 10-40
332
+
333
+ // Robot animation sequence
334
+ setTimeout(() => {
335
+ // Remove eating animation
336
+ mouth.classList.remove('animate-eating');
337
+
338
+ // Show download tray with file
339
+ tray.classList.remove('opacity-0');
340
+ tray.classList.add('opacity-100');
341
+ formatLabel.textContent = format.toUpperCase();
342
+
343
+ // Hide processing animation
344
+ setTimeout(() => {
345
+ processing.classList.add('hidden');
346
+
347
+ // Show download section
348
+ downloadSection.classList.remove('opacity-0', '-translate-y-10');
349
+ downloadSection.classList.add('opacity-100', 'translate-y-0');
350
+
351
+ // Update download info
352
+ fileName.textContent = `${service.toLowerCase()}_playlist_data.${format}`;
353
+ trackCount.textContent = `${trackCountValue} tracks processed`;
354
+ }, 1000);
355
+ }, 3000);
356
+ });
357
+
358
+ // Download file
359
+ downloadBtn.addEventListener('click', () => {
360
+ const format = formatSelect.value;
361
+ const filename = fileName.textContent;
362
+
363
+ // Add successful download animation
364
+ downloadBtn.innerHTML = '<i class="fas fa-check mr-2"></i> DOWNLOADED!';
365
+ downloadBtn.classList.remove('download-pulse');
366
+ downloadBtn.classList.add('bg-gradient-to-r', 'from-green-600', 'to-green-700');
367
+
368
+ // After delay, reset button
369
+ setTimeout(() => {
370
+ downloadBtn.innerHTML = '<i class="fas fa-download mr-2"></i> DOWNLOAD FILE';
371
+ downloadBtn.classList.remove('from-green-600', 'to-green-700');
372
+ downloadBtn.classList.add('download-pulse', 'from-primary', 'to-green-600');
373
+ }, 2000);
374
+ });
375
+
376
+ // Reset form
377
+ newPlaylistBtn.addEventListener('click', () => {
378
+ playlistUrl.value = '';
379
+ downloadSection.classList.remove('opacity-100', 'translate-y-0');
380
+ downloadSection.classList.add('opacity-0', '-translate-y-10');
381
+ tray.classList.remove('opacity-100');
382
+ tray.classList.add('opacity-0');
383
+ processing.classList.add('hidden');
384
+ mouth.classList.remove('animate-eating');
385
+ });
386
+
387
+ // Update format in robot tray when select changes
388
+ formatSelect.addEventListener('change', () => {
389
+ formatLabel.textContent = formatSelect.value.toUpperCase();
390
+ });
391
+
392
+ // Add hover effect to robot
393
+ robot.addEventListener('mouseenter', () => {
394
+ mouth.classList.add('animate-eating');
395
+ });
396
+
397
+ robot.addEventListener('mouseleave', () => {
398
+ if (!processing.classList.contains('hidden')) return;
399
+ mouth.classList.remove('animate-eating');
400
+ });
401
+ </script>
402
+ <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=francois55512/playlist-scraper-bot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
403
+ </html>