Hugging Face's logo

Spaces:
enzer1992
/
Ytm-downloader
Runtime error

App Files Community
enzer1992 commited on
Commit
deb60bf
·
verified ·
1 Parent(s): 7cbe46d

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +102 -0
index.html ADDED
@@ -0,0 +1,102 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>YouTube Music Downloader</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ .download-card {
10
+ margin: 20px 0;
11
+ padding: 15px;
12
+ border-radius: 8px;
13
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
14
+ }
15
+ .progress {
16
+ height: 25px;
17
+ }
18
+ </style>
19
+ </head>
20
+ <body>
21
+ <div class="container mt-5">
22
+ <h1 class="text-center mb-4">YouTube Music Downloader</h1>
23
+
24
+ <div class="row justify-content-center">
25
+ <div class="col-md-8">
26
+ <div class="card">
27
+ <div class="card-body">
28
+ <form id="downloadForm">
29
+ <div class="input-group mb-3">
30
+ <input type="text" class="form-control" id="url" placeholder="Enter YouTube URL" required>
31
+ <button class="btn btn-primary" type="submit">Download</button>
32
+ </div>
33
+ </form>
34
+ </div>
35
+ </div>
36
+
37
+ <div id="downloads"></div>
38
+ </div>
39
+ </div>
40
+ </div>
41
+
42
+ <script>
43
+ document.getElementById('downloadForm').onsubmit = async (e) => {
44
+ e.preventDefault();
45
+ const url = document.getElementById('url').value;
46
+
47
+ const response = await fetch('/download', {
48
+ method: 'POST',
49
+ headers: {'Content-Type': 'application/json'},
50
+ body: JSON.stringify({url: url})
51
+ });
52
+
53
+ const data = await response.json();
54
+ if (data.download_id) {
55
+ createDownloadCard(data.download_id);
56
+ document.getElementById('url').value = '';
57
+ }
58
+ };
59
+
60
+ function createDownloadCard(downloadId) {
61
+ const card = document.createElement('div');
62
+ card.className = 'download-card bg-light';
63
+ card.id = `download-${downloadId}`;
64
+ card.innerHTML = `
65
+ <div class="progress mb-3">
66
+ <div class="progress-bar progress-bar-striped progress-bar-animated"
67
+ role="progressbar" style="width: 0%">0%</div>
68
+ </div>
69
+ <div class="status">Downloading...</div>
70
+ `;
71
+ document.getElementById('downloads').prepend(card);
72
+
73
+ pollStatus(downloadId);
74
+ }
75
+
76
+ async function pollStatus(downloadId) {
77
+ while (true) {
78
+ const response = await fetch(`/status/${downloadId}`);
79
+ const data = await response.json();
80
+
81
+ const card = document.getElementById(`download-${downloadId}`);
82
+ const progressBar = card.querySelector('.progress-bar');
83
+ const statusDiv = card.querySelector('.status');
84
+
85
+ progressBar.style.width = data.progress;
86
+ progressBar.textContent = data.progress;
87
+
88
+ if (data.status === 'completed') {
89
+ statusDiv.innerHTML = `Download complete! <a href="/download/${downloadId}" class="btn btn-success btn-sm">Download MP3</a>`;
90
+ break;
91
+ } else if (data.status === 'failed') {
92
+ statusDiv.innerHTML = `Error: ${data.error}`;
93
+ progressBar.className = 'progress-bar bg-danger';
94
+ break;
95
+ }
96
+
97
+ await new Promise(resolve => setTimeout(resolve, 1000));
98
+ }
99
+ }
100
+ </script>
101
+ </body>
102
+ </html>