Hugging Face's logo

Spaces:
Ryanrealaf
/
Midi
Paused

App Files Community
Midi
File size: 14,596 Bytes
1b55b02
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>

<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>STEMFORGE | Processing</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Manrope:wght@300;400;500;600;700;800&amp;family=Space+Mono&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "on-tertiary-container": "#003554",
                    "on-surface-variant": "#e0c0b1",
                    "on-background": "#e5e1e4",
                    "on-error": "#690005",
                    "primary-container": "#f97316",
                    "primary-fixed-dim": "#ffb690",
                    "inverse-surface": "#e5e1e4",
                    "surface-container": "#201f22",
                    "outline": "#a78b7d",
                    "on-tertiary-fixed": "#001d32",
                    "outline-variant": "#584237",
                    "tertiary-fixed-dim": "#93ccff",
                    "secondary-fixed-dim": "#adc6ff",
                    "on-secondary": "#002e6a",
                    "on-tertiary": "#003351",
                    "on-surface": "#e5e1e4",
                    "tertiary": "#93ccff",
                    "on-primary-fixed-variant": "#783200",
                    "surface": "#131315",
                    "on-error-container": "#ffdad6",
                    "on-secondary-fixed": "#001a42",
                    "error": "#ffb4ab",
                    "background": "#131315",
                    "secondary": "#adc6ff",
                    "surface-container-lowest": "#0e0e10",
                    "inverse-primary": "#9d4300",
                    "on-primary": "#552100",
                    "on-primary-fixed": "#341100",
                    "error-container": "#93000a",
                    "inverse-on-surface": "#313032",
                    "surface-variant": "#353437",
                    "surface-dim": "#131315",
                    "on-tertiary-fixed-variant": "#004b74",
                    "secondary-container": "#0566d9",
                    "tertiary-container": "#00a2f4",
                    "surface-container-low": "#1c1b1d",
                    "surface-bright": "#39393b",
                    "on-secondary-container": "#e6ecff",
                    "on-primary-container": "#582200",
                    "on-secondary-fixed-variant": "#004395",
                    "secondary-fixed": "#d8e2ff",
                    "surface-container-high": "#2a2a2c",
                    "surface-tint": "#ffb690",
                    "primary-fixed": "#ffdbca",
                    "tertiary-fixed": "#cde5ff",
                    "primary": "#ffb690",
                    "surface-container-highest": "#353437"
            },
            "borderRadius": {
                    "DEFAULT": "0.125rem",
                    "lg": "0.25rem",
                    "xl": "0.5rem",
                    "full": "0.75rem"
            },
            "fontFamily": {
                    "headline": ["Space Grotesk"],
                    "body": ["Manrope"],
                    "label": ["Space Grotesk"]
            }
          },
        },
      }
    </script>
<style>
        body { font-family: 'Manrope', sans-serif; }
        .font-headline { font-family: 'Space Grotesk', sans-serif; }
        .font-label { font-family: 'Space Grotesk', sans-serif; }
        .glass-panel {
            background: rgba(14, 14, 16, 0.6);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }
        .grain-overlay {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 999;
            opacity: 0.03;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
            animation: spin-slow 8s linear infinite;
        }
        .ghost-edge {
            border-top: 1px solid rgba(167, 139, 125, 0.1);
            border-left: 1px solid rgba(167, 139, 125, 0.1);
        }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-background text-on-background overflow-hidden selection:bg-primary-container selection:text-on-primary-container">
<div class="grain-overlay"></div>
<!-- Background Content (Blurred) -->
<main class="fixed inset-0 grid grid-cols-12 gap-6 p-6 opacity-40 blur-xl pointer-events-none">
<aside class="col-span-3 flex flex-col gap-4">
<div class="h-64 bg-surface-container-low rounded-lg ghost-edge"></div>
<div class="flex-1 bg-surface-container-low rounded-lg ghost-edge"></div>
</aside>
<div class="col-span-9 flex flex-col gap-6">
<div class="h-32 bg-surface-container-high rounded-lg ghost-edge"></div>
<div class="flex-1 bg-surface-container-low rounded-lg ghost-edge relative overflow-hidden">
<div class="absolute inset-0 flex items-center justify-around px-12">
<div class="w-1 bg-secondary opacity-20 h-3/4 rounded-full"></div>
<div class="w-1 bg-secondary opacity-20 h-1/2 rounded-full"></div>
<div class="w-1 bg-primary opacity-20 h-2/3 rounded-full"></div>
<div class="w-1 bg-secondary opacity-20 h-3/4 rounded-full"></div>
</div>
</div>
<div class="h-48 bg-surface-container-high rounded-lg ghost-edge"></div>
</div>
</main>
<!-- Top Navigation Anchor -->
<header class="fixed top-0 left-0 w-full z-10 flex justify-between items-center px-6 py-4 bg-[#131315]">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-orange-500 text-2xl" data-icon="graphic_eq">graphic_eq</span>
<span class="text-2xl font-bold tracking-tighter text-orange-500 font-headline">STEMFORGE</span>
</div>
<div class="flex items-center gap-6">
<nav class="hidden md:flex gap-8">
<span class="text-orange-500 font-label text-xs tracking-widest font-bold">EXTRACT</span>
<span class="text-zinc-400 font-label text-xs tracking-widest font-bold hover:text-orange-400 transition-colors cursor-pointer">MIXER</span>
<span class="text-zinc-400 font-label text-xs tracking-widest font-bold hover:text-orange-400 transition-colors cursor-pointer">DRUMS</span>
<span class="text-zinc-400 font-label text-xs tracking-widest font-bold hover:text-orange-400 transition-colors cursor-pointer">LIBRARY</span>
</nav>
<div class="w-10 h-10 rounded-full overflow-hidden border-2 border-surface-container-highest">
<img alt="User Profile" class="w-full h-full object-cover" data-alt="close-up studio portrait of a young man with neutral expression on a dark background, cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBi4TSlQWsjb9-amgu5PqUf9aTHpkv2SRdwRY4slXqwzfAtzdvoXoGrzFiSiCfrH5Jat-D4pm6WsLThD_WLm6toN_ifZMec_RZiMAItfWw1lZjgLi0o7kurE-BAdWqjB73NfCqpyK69mYyBPXJNphmO2-0JcLEAHfGYNntR5apnir4l32-9S7gRDSREFI_H6pKLyvWJA1ZjvhVxKvsqEOR8RAkV8nHUb19s-KgZUKmawmG944mHDTMHfZKZ1MTY1r2oawl3qa_coA"/>
</div>
</div>
</header>
<!-- Processing Overlay Canvas -->
<section class="fixed inset-0 z-50 flex items-center justify-center glass-panel">
<div class="max-w-2xl w-full px-8 flex flex-col items-center">
<!-- Tactical Console Container -->
<div class="w-full bg-surface-container-low ghost-edge p-12 rounded-xl flex flex-col items-center shadow-2xl shadow-primary/5 relative overflow-hidden">
<!-- Decorative Corner Accents -->
<div class="absolute top-0 left-0 w-4 h-4 border-t-2 border-l-2 border-primary/30"></div>
<div class="absolute top-0 right-0 w-4 h-4 border-t-2 border-r-2 border-primary/30"></div>
<div class="absolute bottom-0 left-0 w-4 h-4 border-b-2 border-l-2 border-primary/30"></div>
<div class="absolute bottom-0 right-0 w-4 h-4 border-b-2 border-r-2 border-primary/30"></div>
<!-- Spinning Core -->
<div class="relative mb-12">
<!-- Glow Layer -->
<div class="absolute inset-0 bg-primary-container blur-[64px] opacity-20 rounded-full animate-pulse"></div>
<!-- Hardware Logo Frame -->
<div class="relative w-48 h-48 rounded-full border border-outline-variant/30 flex items-center justify-center bg-surface-container-highest/40 backdrop-blur-sm shadow-inner">
<div class="absolute inset-0 rounded-full border-t-2 border-primary-container opacity-60 animate-spin-slow"></div>
<div class="absolute inset-4 rounded-full border border-secondary/20 border-dashed animate-spin-slow" style="animation-direction: reverse;"></div>
<div class="flex items-center justify-center">
<span class="material-symbols-outlined text-primary-container text-7xl" data-icon="graphic_eq" style="font-variation-settings: 'FILL' 1;">graphic_eq</span>
</div>
</div>
</div>
<!-- Technical Readout -->
<div class="w-full text-center space-y-2 mb-10">
<h2 class="text-on-surface font-headline font-bold text-3xl tracking-tight">ISOLATING SIGNAL STEMS</h2>
<div class="flex items-center justify-center gap-3">
<span class="bg-surface-container-highest px-3 py-1 rounded text-[10px] font-label font-bold tracking-tighter text-secondary border border-outline-variant/20 uppercase">Core: Demucs v4 htdemucs_ft</span>
<span class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"></span>
<span class="text-on-surface-variant font-label text-[11px] font-medium tracking-widest uppercase">isolating 7 stems</span>
</div>
</div>
<!-- Progress Section -->
<div class="w-full space-y-6">
<div class="flex justify-between items-end mb-1">
<div class="flex flex-col">
<span class="text-[10px] font-label font-bold text-outline uppercase tracking-[0.2em]">Process Status</span>
<span class="text-primary font-headline font-extrabold text-2xl tracking-tighter italic">80% COMPLETE</span>
</div>
<div class="flex flex-col items-end">
<span class="text-[10px] font-label font-bold text-outline uppercase tracking-[0.2em]">Estimated Time</span>
<span class="text-on-surface font-headline font-bold text-lg tracking-tight">00:14 REMAINING</span>
</div>
</div>
<!-- Modern Progress Bar -->
<div class="relative h-4 w-full bg-surface-container-lowest rounded-full overflow-hidden shadow-inner border border-outline-variant/10 p-0.5">
<div class="h-full bg-primary-container rounded-full relative overflow-hidden" style="width: 80%">
<!-- Diagonal Shine -->
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent w-full skew-x-12 translate-x-full"></div>
</div>
</div>
<!-- Task List Readout -->
<div class="grid grid-cols-2 gap-4 pt-4 border-t border-outline-variant/10">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-secondary text-sm" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="text-[10px] font-label text-on-surface-variant font-bold uppercase tracking-widest">Drums &amp; Percussion</span>
</div>
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-secondary text-sm" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="text-[10px] font-label text-on-surface-variant font-bold uppercase tracking-widest">Bassline Synthesis</span>
</div>
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full border-2 border-primary animate-ping"></div>
<span class="text-[10px] font-label text-primary font-bold uppercase tracking-widest">Vocal Separation</span>
</div>
<div class="flex items-center gap-2 opacity-30">
<span class="material-symbols-outlined text-on-surface-variant text-sm" data-icon="radio_button_unchecked">radio_button_unchecked</span>
<span class="text-[10px] font-label text-on-surface-variant font-bold uppercase tracking-widest">Melodic Texture</span>
</div>
</div>
</div>
<!-- Control Footer -->
<div class="mt-12 w-full flex justify-between items-center">
<div class="flex items-center gap-4 text-outline">
<span class="material-symbols-outlined text-lg" data-icon="settings_input_component">settings_input_component</span>
<span class="text-[10px] font-label font-medium uppercase tracking-[0.3em]">Device: GPU_CUDA_0</span>
</div>
<button class="px-6 py-2 bg-surface-container-highest hover:bg-error-container/20 text-on-surface-variant hover:text-error transition-all rounded-lg font-label text-[10px] font-bold tracking-widest uppercase border border-outline-variant/20 active:scale-95">
                        Abort Sequence
                    </button>
</div>
</div>
</div>
</section>
<!-- Bottom Nav Anchor -->
<nav class="fixed bottom-0 left-0 w-full z-[60] bg-[#131315]/80 backdrop-blur-xl flex justify-around items-center px-4 pb-6 pt-2">
<div class="flex flex-col items-center justify-center text-orange-500 bg-orange-500/10 rounded-xl p-2 scale-90 transition-all cursor-pointer">
<span class="material-symbols-outlined text-2xl" data-icon="blur_on">blur_on</span>
<span class="text-[10px] font-bold font-label tracking-widest">EXTRACT</span>
</div>
<div class="flex flex-col items-center justify-center text-zinc-500 p-2 hover:text-orange-400 transition-colors cursor-pointer">
<span class="material-symbols-outlined text-2xl" data-icon="tune">tune</span>
<span class="text-[10px] font-bold font-label tracking-widest">MIXER</span>
</div>
<div class="flex flex-col items-center justify-center text-zinc-500 p-2 hover:text-orange-400 transition-colors cursor-pointer">
<span class="material-symbols-outlined text-2xl" data-icon="drum_set">article</span>
<span class="text-[10px] font-bold font-label tracking-widest uppercase">DRUMS</span>
</div>
<div class="flex flex-col items-center justify-center text-zinc-500 p-2 hover:text-orange-400 transition-colors cursor-pointer">
<span class="material-symbols-outlined text-2xl" data-icon="library_music">library_music</span>
<span class="text-[10px] font-bold font-label tracking-widest">LIBRARY</span>
</div>
</nav>
</body></html>