Hugging Face's logo

Spaces:
COLTO50
/
dx
Paused

App Files Community
COLTO50 commited on
Commit
ad9949b
·
verified ·
1 Parent(s): 11b3431

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +128 -0
index.html ADDED
@@ -0,0 +1,128 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Video Uploader for Hugging Face Spaces</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ max-width: 800px;
11
+ margin: 0 auto;
12
+ padding: 20px;
13
+ background-color: #f0f0f0;
14
+ }
15
+ h1 {
16
+ color: #333;
17
+ text-align: center;
18
+ }
19
+ #upload-form {
20
+ background-color: white;
21
+ padding: 20px;
22
+ border-radius: 8px;
23
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
24
+ }
25
+ #file-input {
26
+ display: none;
27
+ }
28
+ #file-label {
29
+ display: inline-block;
30
+ padding: 10px 20px;
31
+ background-color: #007bff;
32
+ color: white;
33
+ cursor: pointer;
34
+ border-radius: 4px;
35
+ }
36
+ #file-name {
37
+ margin-top: 10px;
38
+ }
39
+ #upload-button {
40
+ display: block;
41
+ width: 100%;
42
+ padding: 10px;
43
+ background-color: #28a745;
44
+ color: white;
45
+ border: none;
46
+ border-radius: 4px;
47
+ cursor: pointer;
48
+ margin-top: 10px;
49
+ }
50
+ #progress-bar {
51
+ width: 100%;
52
+ height: 20px;
53
+ background-color: #e0e0e0;
54
+ border-radius: 4px;
55
+ margin-top: 10px;
56
+ overflow: hidden;
57
+ }
58
+ #progress {
59
+ width: 0%;
60
+ height: 100%;
61
+ background-color: #28a745;
62
+ transition: width 0.3s ease;
63
+ }
64
+ #status {
65
+ margin-top: 10px;
66
+ text-align: center;
67
+ font-weight: bold;
68
+ }
69
+ </style>
70
+ </head>
71
+ <body>
72
+ <h1>Video Uploader for Hugging Face Spaces</h1>
73
+ <div id="upload-form">
74
+ <input type="file" id="file-input" accept=".mp4,.mkv,.avi,.mov">
75
+ <label for="file-input" id="file-label">Choose File</label>
76
+ <div id="file-name"></div>
77
+ <button id="upload-button" disabled>Upload</button>
78
+ <div id="progress-bar">
79
+ <div id="progress"></div>
80
+ </div>
81
+ <div id="status"></div>
82
+ </div>
83
+
84
+ <script>
85
+ const fileInput = document.getElementById('file-input');
86
+ const fileLabel = document.getElementById('file-label');
87
+ const fileName = document.getElementById('file-name');
88
+ const uploadButton = document.getElementById('upload-button');
89
+ const progressBar = document.getElementById('progress');
90
+ const status = document.getElementById('status');
91
+
92
+ fileInput.addEventListener('change', (e) => {
93
+ if (e.target.files.length > 0) {
94
+ fileName.textContent = `Selected file: ${e.target.files[0].name}`;
95
+ uploadButton.disabled = false;
96
+ } else {
97
+ fileName.textContent = '';
98
+ uploadButton.disabled = true;
99
+ }
100
+ });
101
+
102
+ uploadButton.addEventListener('click', async () => {
103
+ const file = fileInput.files[0];
104
+ if (!file) return;
105
+
106
+ const formData = new FormData();
107
+ formData.append('file', file);
108
+
109
+ try {
110
+ status.textContent = 'Uploading...';
111
+ const response = await fetch('/upload', {
112
+ method: 'POST',
113
+ body: formData
114
+ });
115
+
116
+ if (response.ok) {
117
+ status.textContent = 'Upload successful!';
118
+ progressBar.style.width = '100%';
119
+ } else {
120
+ throw new Error('Upload failed');
121
+ }
122
+ } catch (error) {
123
+ status.textContent = `Error: ${error.message}`;
124
+ }
125
+ });
126
+ </script>
127
+ </body>
128
+ </html>