Hugging Face's logo

Spaces:
MagicBullets
/
deepsite-test
Running

App Files Community
MagicBullets commited on
Commit
1272c82
·
verified ·
1 Parent(s): fa67f77

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +369 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite Test
3
- emoji: 👀
4
- colorFrom: red
5
- colorTo: indigo
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: deepsite-test
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
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,369 @@
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>Anzers: Whisper Core</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: #0a0a0a;
15
+ color: #e5e5e5;
16
+ margin: 0;
17
+ padding: 0;
18
+ height: 100vh;
19
+ overflow: hidden;
20
+ }
21
+
22
+ .glow-effect {
23
+ box-shadow: 0 0 15px rgba(56, 182, 255, 0.5);
24
+ }
25
+
26
+ .glow-text {
27
+ text-shadow: 0 0 8px rgba(56, 182, 255, 0.7);
28
+ }
29
+
30
+ .sidebar-item:hover {
31
+ background-color: rgba(56, 182, 255, 0.1);
32
+ border-left: 3px solid #38b6ff;
33
+ }
34
+
35
+ .progress-bar {
36
+ background: linear-gradient(90deg, #38b6ff 0%, #1e40af 100%);
37
+ animation: progressAnimation 2s ease-in-out infinite;
38
+ background-size: 200% 100%;
39
+ }
40
+
41
+ @keyframes progressAnimation {
42
+ 0% { background-position: 0% 50%; }
43
+ 50% { background-position: 100% 50%; }
44
+ 100% { background-position: 0% 50%; }
45
+ }
46
+
47
+ .dropzone {
48
+ border: 2px dashed #38b6ff;
49
+ background-color: rgba(56, 182, 255, 0.05);
50
+ transition: all 0.3s ease;
51
+ }
52
+
53
+ .dropzone.active {
54
+ background-color: rgba(56, 182, 255, 0.15);
55
+ border-color: #38b6ff;
56
+ }
57
+
58
+ .macos-window {
59
+ border-radius: 12px;
60
+ overflow: hidden;
61
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
62
+ }
63
+
64
+ .macos-title-bar {
65
+ background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
66
+ height: 28px;
67
+ }
68
+
69
+ .macos-traffic-lights {
70
+ display: flex;
71
+ gap: 8px;
72
+ padding-left: 12px;
73
+ }
74
+
75
+ .traffic-light {
76
+ width: 12px;
77
+ height: 12px;
78
+ border-radius: 50%;
79
+ }
80
+
81
+ .close { background-color: #ff5f56; }
82
+ .minimize { background-color: #ffbd2e; }
83
+ .maximize { background-color: #27c93f; }
84
+
85
+ .code-block {
86
+ background-color: #1a1a1a;
87
+ font-family: 'Courier New', monospace;
88
+ color: #38b6ff;
89
+ }
90
+
91
+ .transcription-text {
92
+ background-color: #121212;
93
+ border-left: 3px solid #38b6ff;
94
+ }
95
+ </style>
96
+ </head>
97
+ <body class="flex items-center justify-center p-8">
98
+ <div class="macos-window w-full max-w-6xl h-[90vh] flex overflow-hidden">
99
+ <!-- Sidebar -->
100
+ <div class="w-64 bg-gray-900 border-r border-gray-800 flex flex-col">
101
+ <div class="p-4 border-b border-gray-800">
102
+ <h1 class="text-xl font-bold glow-text text-blue-400">Anzers Suite</h1>
103
+ <p class="text-xs text-gray-400 mt-1">Whisper Core v1.0.0</p>
104
+ </div>
105
+
106
+ <div class="flex-1 overflow-y-auto">
107
+ <div class="p-2">
108
+ <div class="sidebar-item p-3 rounded-md cursor-pointer flex items-center space-x-3 text-blue-400">
109
+ <i class="fas fa-microphone"></i>
110
+ <span>Whisper Core</span>
111
+ </div>
112
+
113
+ <div class="sidebar-item p-3 rounded-md cursor-pointer flex items-center space-x-3 text-gray-400 hover:text-blue-400">
114
+ <i class="fas fa-robot"></i>
115
+ <span>AI Assistant (Coming Soon)</span>
116
+ </div>
117
+
118
+ <div class="sidebar-item p-3 rounded-md cursor-pointer flex items-center space-x-3 text-gray-400 hover:text-blue-400">
119
+ <i class="fas fa-video"></i>
120
+ <span>Video Editor (Coming Soon)</span>
121
+ </div>
122
+
123
+ <div class="sidebar-item p-3 rounded-md cursor-pointer flex items-center space-x-3 text-gray-400 hover:text-blue-400">
124
+ <i class="fas fa-file-audio"></i>
125
+ <span>Audio Tools (Coming Soon)</span>
126
+ </div>
127
+ </div>
128
+
129
+ <div class="p-4 border-t border-gray-800 mt-auto">
130
+ <div class="text-xs text-gray-400 mb-2">System Status</div>
131
+ <div class="space-y-2">
132
+ <div class="flex justify-between text-xs">
133
+ <span>CPU Usage</span>
134
+ <span class="text-blue-400">12%</span>
135
+ </div>
136
+ <div class="h-1 w-full bg-gray-800 rounded-full">
137
+ <div class="h-1 bg-blue-500 rounded-full" style="width: 12%"></div>
138
+ </div>
139
+
140
+ <div class="flex justify-between text-xs mt-2">
141
+ <span>Memory</span>
142
+ <span class="text-blue-400">3.2/16GB</span>
143
+ </div>
144
+ <div class="h-1 w-full bg-gray-800 rounded-full">
145
+ <div class="h-1 bg-blue-500 rounded-full" style="width: 20%"></div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ <!-- Main Content -->
153
+ <div class="flex-1 flex flex-col bg-gray-950">
154
+ <!-- Title Bar -->
155
+ <div class="macos-title-bar flex items-center justify-between px-4">
156
+ <div class="macos-traffic-lights">
157
+ <div class="traffic-light close"></div>
158
+ <div class="traffic-light minimize"></div>
159
+ <div class="traffic-light maximize"></div>
160
+ </div>
161
+ <div class="text-xs text-gray-400">Anzers: Whisper Core</div>
162
+ <div class="w-12"></div> <!-- Spacer -->
163
+ </div>
164
+
165
+ <!-- Content Area -->
166
+ <div class="flex-1 overflow-hidden flex flex-col p-6">
167
+ <h2 class="text-2xl font-bold mb-6 text-blue-400">Audio Transcription</h2>
168
+
169
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 overflow-hidden">
170
+ <!-- Left Column -->
171
+ <div class="space-y-6 col-span-1">
172
+ <div class="bg-gray-900 rounded-xl p-5 shadow-lg">
173
+ <h3 class="font-medium mb-4 text-blue-400">Input Settings</h3>
174
+
175
+ <div class="space-y-4">
176
+ <div>
177
+ <label class="block text-sm font-medium mb-1">Whisper Model</label>
178
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
179
+ <option value="tiny">Tiny (Fastest, lowest accuracy)</option>
180
+ <option value="base">Base</option>
181
+ <option value="small" selected>Small (Recommended)</option>
182
+ <option value="medium">Medium</option>
183
+ <option value="large">Large (Slowest, highest accuracy)</option>
184
+ </select>
185
+ </div>
186
+
187
+ <div>
188
+ <label class="block text-sm font-medium mb-1">Language</label>
189
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
190
+ <option value="auto" selected>Auto-detect</option>
191
+ <option value="en">English</option>
192
+ <option value="es">Spanish</option>
193
+ <option value="fr">French</option>
194
+ <option value="de">German</option>
195
+ <option value="ja">Japanese</option>
196
+ <!-- More languages would be here -->
197
+ </select>
198
+ </div>
199
+
200
+ <div class="pt-2">
201
+ <label class="flex items-center space-x-2">
202
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 bg-gray-800 border-gray-700 rounded focus:ring-blue-500">
203
+ <span class="text-sm">Include timestamps</span>
204
+ </label>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="bg-gray-900 rounded-xl p-5 shadow-lg">
210
+ <h3 class="font-medium mb-4 text-blue-400">Output Format</h3>
211
+
212
+ <div class="space-y-3">
213
+ <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-800 cursor-pointer">
214
+ <input type="radio" name="output-format" class="form-radio h-4 w-4 text-blue-500" checked>
215
+ <span class="text-sm">Plain Text (.txt)</span>
216
+ </label>
217
+
218
+ <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-800 cursor-pointer">
219
+ <input type="radio" name="output-format" class="form-radio h-4 w-4 text-blue-500">
220
+ <span class="text-sm">SubRip (.srt)</span>
221
+ </label>
222
+
223
+ <label class="flex items-center space-x-3 p-2 rounded hover:bg-gray-800 cursor-pointer">
224
+ <input type="radio" name="output-format" class="form-radio h-4 w-4 text-blue-500">
225
+ <span class="text-sm">JSON (.json)</span>
226
+ </label>
227
+ </div>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Middle Column -->
232
+ <div class="col-span-1 lg:col-span-2 flex flex-col space-y-6">
233
+ <div id="dropzone" class="dropzone rounded-xl p-8 flex-1 flex flex-col items-center justify-center text-center cursor-pointer transition-all">
234
+ <i class="fas fa-cloud-upload-alt text-4xl text-blue-400 mb-4"></i>
235
+ <h3 class="text-lg font-medium mb-1">Drag & Drop Audio/Video Files</h3>
236
+ <p class="text-sm text-gray-400 mb-4">or click to browse files</p>
237
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors">
238
+ Select Files
239
+ </button>
240
+ <input type="file" id="fileInput" class="hidden" accept="audio/*,video/*">
241
+ </div>
242
+
243
+ <div class="bg-gray-900 rounded-xl p-5 shadow-lg">
244
+ <h3 class="font-medium mb-4 text-blue-400">Transcription Progress</h3>
245
+
246
+ <div id="progressContainer" class="hidden">
247
+ <div class="flex justify-between text-sm mb-1">
248
+ <span>Processing...</span>
249
+ <span id="progressPercent">0%</span>
250
+ </div>
251
+ <div class="h-2 w-full bg-gray-800 rounded-full overflow-hidden">
252
+ <div id="progressBar" class="progress-bar h-full rounded-full" style="width: 0%"></div>
253
+ </div>
254
+ <div class="text-xs text-gray-400 mt-2" id="progressStatus">Initializing Whisper model...</div>
255
+ </div>
256
+
257
+ <div id="idleState" class="text-center py-4 text-gray-400">
258
+ <i class="fas fa-microphone-alt text-2xl mb-2"></i>
259
+ <p>No file selected for transcription</p>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Status Bar -->
267
+ <div class="bg-gray-900 border-t border-gray-800 px-4 py-2 text-xs flex justify-between items-center">
268
+ <div class="text-gray-400">
269
+ <span id="statusMessage">Ready</span>
270
+ </div>
271
+ <div class="flex space-x-4">
272
+ <span class="text-blue-400">CPU: 12%</span>
273
+ <span class="text-blue-400">MEM: 3.2GB</span>
274
+ <span class="text-gray-400">Whisper v3</span>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+
280
+ <script>
281
+ // Dropzone functionality
282
+ const dropzone = document.getElementById('dropzone');
283
+ const fileInput = document.getElementById('fileInput');
284
+ const progressContainer = document.getElementById('progressContainer');
285
+ const progressBar = document.getElementById('progressBar');
286
+ const progressPercent = document.getElementById('progressPercent');
287
+ const progressStatus = document.getElementById('progressStatus');
288
+ const idleState = document.getElementById('idleState');
289
+ const statusMessage = document.getElementById('statusMessage');
290
+
291
+ // Handle drag and drop
292
+ dropzone.addEventListener('dragover', (e) => {
293
+ e.preventDefault();
294
+ dropzone.classList.add('active');
295
+ });
296
+
297
+ dropzone.addEventListener('dragleave', () => {
298
+ dropzone.classList.remove('active');
299
+ });
300
+
301
+ dropzone.addEventListener('drop', (e) => {
302
+ e.preventDefault();
303
+ dropzone.classList.remove('active');
304
+
305
+ if (e.dataTransfer.files.length) {
306
+ handleFiles(e.dataTransfer.files);
307
+ }
308
+ });
309
+
310
+ // Handle file selection
311
+ dropzone.addEventListener('click', () => {
312
+ fileInput.click();
313
+ });
314
+
315
+ fileInput.addEventListener('change', () => {
316
+ if (fileInput.files.length) {
317
+ handleFiles(fileInput.files);
318
+ }
319
+ });
320
+
321
+ // Simulate file processing
322
+ function handleFiles(files) {
323
+ const file = files[0];
324
+ statusMessage.textContent = `Processing: ${file.name}`;
325
+ idleState.classList.add('hidden');
326
+ progressContainer.classList.remove('hidden');
327
+
328
+ // Simulate transcription progress
329
+ let progress = 0;
330
+ const interval = setInterval(() => {
331
+ progress += Math.random() * 5;
332
+ if (progress > 100) progress = 100;
333
+
334
+ progressBar.style.width = `${progress}%`;
335
+ progressPercent.textContent = `${Math.floor(progress)}%`;
336
+
337
+ if (progress < 30) {
338
+ progressStatus.textContent = "Loading Whisper model...";
339
+ } else if (progress < 70) {
340
+ progressStatus.textContent = "Transcribing audio...";
341
+ } else {
342
+ progressStatus.textContent = "Finalizing transcription...";
343
+ }
344
+
345
+ if (progress === 100) {
346
+ clearInterval(interval);
347
+ setTimeout(() => {
348
+ statusMessage.textContent = `Transcription complete: ${file.name}`;
349
+ progressStatus.textContent = "Done! Transcription ready.";
350
+
351
+ // Show success message
352
+ alert(`Transcription complete!\n\nFile: ${file.name}\nModel: Small\nDuration: 2m 45s`);
353
+ }, 500);
354
+ }
355
+ }, 300);
356
+ }
357
+
358
+ // Simulate system status updates
359
+ setInterval(() => {
360
+ const cpu = Math.floor(Math.random() * 15) + 5;
361
+ const mem = (Math.random() * 0.5 + 3).toFixed(1);
362
+ document.querySelectorAll('.text-blue-400').forEach(el => {
363
+ if (el.textContent.includes('CPU')) el.textContent = `CPU: ${cpu}%`;
364
+ if (el.textContent.includes('MEM')) el.textContent = `MEM: ${mem}GB`;
365
+ });
366
+ }, 3000);
367
+ </script>
368
+ <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=MagicBullets/deepsite-test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
369
+ </html>