Spaces:
Paused
Paused
| <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&family=Manrope:wght@300;400;500;600;700;800&family=Space+Mono&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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 & 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> |