Spaces:

AhBoh
/

prova

Running

App Files Files Community

AhBoh commited on Apr 26, 2025

Commit

775375a

verified ·

1 Parent(s): a3434ec

Add 2 files

Browse files

Files changed (2) hide show

index.html +480 -38
prompts.txt +1 -0

index.html CHANGED Viewed

@@ -1,41 +1,483 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
     <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        height: 100dvh;
-        font-family: "Arial", sans-serif;
-        text-align: center;
-      }
-      .arrow {
-        position: absolute;
-        bottom: 32px;
-        left: 0px;
-        width: 100px;
-        transform: rotate(30deg);
-      }
-      h1 {
-        font-size: 50px;
-      }
-      h1 span {
-        color: #acacac;
-        font-size: 32px;
-      }
     </style>
-  </head>
-  <body>
-    <h1>
-      <span>I'm ready to work,</span><br />
-      Ask me anything.
-    </h1>
-    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
-    <script></script>
-  <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=AhBoh/prova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NEXUS Audio Processor</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;500&display=swap');
+        :root {
+            --primary: #6d28d9;
+            --secondary: #10b981;
+            --dark: #1e293b;
+            --light: #f8fafc;
+        }
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: #0f172a;
+            color: var(--light);
+            overflow-x: hidden;
+        }
+        .title-font {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .visualizer {
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+            border-radius: 12px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+        }
+        .audio-bar {
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            height: 4px;
+            transition: all 0.1s ease;
+            transform-origin: left;
+        }
+        .knob {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #1e293b, #0f172a);
+            box-shadow: 5px 5px 15px #0a101a, -5px -5px 15px #334155;
+            position: relative;
+            cursor: pointer;
+        }
+        .knob::after {
+            content: '';
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            background-color: var(--secondary);
+            border-radius: 50%;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .effect-card {
+            background: rgba(30, 41, 59, 0.5);
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+        }
+        .effect-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        }
+        .led {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: #4b5563;
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
+        }
+        .led.active {
+            background-color: var(--secondary);
+            box-shadow: 0 0 10px var(--secondary);
+        }
+        @keyframes pulse {
+            0% { opacity: 0.6; }
+            50% { opacity: 1; }
+            100% { opacity: 0.6; }
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        canvas {
+            border-radius: 12px;
+        }
     </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <header class="py-6 px-6 border-b border-slate-800">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center">
+                    <i class="fas fa-wave-square text-white"></i>
+                </div>
+                <h1 class="title-font text-2xl font-bold bg-gradient-to-r from-purple-500 to-emerald-400 bg-clip-text text-transparent">NEXUS</h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#" class="text-slate-300 hover:text-white transition">Dashboard</a>
+                <a href="#" class="text-slate-300 hover:text-white transition">Effects</a>
+                <a href="#" class="text-slate-300 hover:text-white transition">Presets</a>
+                <a href="#" class="text-slate-300 hover:text-white transition">Settings</a>
+            </nav>
+            <button class="md:hidden text-slate-300">
+                <i class="fas fa-bars text-xl"></i>
+            </button>
+        </div>
+    </header>
+    <main class="flex-grow container mx-auto px-6 py-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Left Panel -->
+            <div class="lg:col-span-2 space-y-8">
+                <!-- Visualizer -->
+                <div class="visualizer p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="title-font text-xl font-semibold">Audio Visualizer</h2>
+                        <div class="flex space-x-2">
+                            <button class="px-3 py-1 bg-slate-700 rounded-md text-sm">Waveform</button>
+                            <button class="px-3 py-1 bg-slate-800 rounded-md text-sm">Frequency</button>
+                            <button class="px-3 py-1 bg-slate-800 rounded-md text-sm">Spectrum</button>
+                        </div>
+                    </div>
+                    <div class="h-64 relative">
+                        <canvas id="visualizerCanvas" class="w-full h-full"></canvas>
+                        <div class="absolute bottom-0 left-0 right-0 h-1 bg-slate-700">
+                            <div class="audio-bar" id="progressBar"></div>
+                        </div>
+                    </div>
+                    <div class="mt-4 flex justify-between items-center">
+                        <div class="text-sm text-slate-400">00:00</div>
+                        <div class="flex items-center space-x-4">
+                            <button class="text-slate-300 hover:text-white">
+                                <i class="fas fa-backward"></i>
+                            </button>
+                            <button class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center text-white">
+                                <i class="fas fa-play"></i>
+                            </button>
+                            <button class="text-slate-300 hover:text-white">
+                                <i class="fas fa-forward"></i>
+                            </button>
+                        </div>
+                        <div class="text-sm text-slate-400">03:42</div>
+                    </div>
+                </div>
+                <!-- Equalizer -->
+                <div class="visualizer p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="title-font text-xl font-semibold">10-Band Equalizer</h2>
+                        <div class="flex items-center space-x-2">
+                            <div class="led"></div>
+                            <span class="text-sm text-slate-400">Flat</span>
+                            <button class="px-3 py-1 bg-slate-800 rounded-md text-sm">Presets</button>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-10 gap-2 h-40">
+                        <!-- EQ Bands -->
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-3/4 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">60Hz</div>
+                        </div>
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-2/3 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">150Hz</div>
+                        </div>
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/2 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">300Hz</div>
+                        </div>
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/3 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">600Hz</div>
+                        </div>
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/4 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">1.2kHz</div>
+                        </div>
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/5 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">2.4kHz</div>
+                        </div>
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/6 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">4.8kHz</div>
+                        </div>
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/4 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">9.6kHz</div>
+                        </div>
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/3 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">14kHz</div>
+                        </div>
+                        <div class="flex flex-col items-center justify-end">
+                            <div class="w-full bg-gradient-to-t from-purple-500 to-transparent h-1/2 rounded-t-sm"></div>
+                            <div class="text-xs text-slate-400 mt-1">18kHz</div>
+                        </div>
+                    </div>
+                    <div class="mt-4 grid grid-cols-10 gap-2">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                        <input type="range" min="-12" max="12" value="0" class="w-full h-1 bg-slate-700 rounded-full appearance-none" orient="vertical">
+                    </div>
+                </div>
+            </div>
+            <!-- Right Panel -->
+            <div class="space-y-8">
+                <!-- Input Controls -->
+                <div class="visualizer p-6">
+                    <h2 class="title-font text-xl font-semibold mb-4">Input Controls</h2>
+                    <div class="space-y-6">
+                        <div>
+                            <label class="block text-sm text-slate-400 mb-2">Input Source</label>
+                            <select class="w-full bg-slate-800 border border-slate-700 rounded-md px-3 py-2 text-sm">
+                                <option>Microphone</option>
+                                <option>System Audio</option>
+                                <option>Audio File</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm text-slate-400 mb-2">Input Gain</label>
+                            <div class="flex items-center space-x-4">
+                                <div class="knob"></div>
+                                <div class="flex-grow">
+                                    <input type="range" min="0" max="100" value="75" class="w-full h-1 bg-slate-700 rounded-full appearance-none">
+                                </div>
+                                <span class="text-sm w-10 text-right">75%</span>
+                            </div>
+                        </div>
+                        <div class="flex justify-between">
+                            <button class="px-4 py-2 bg-slate-800 rounded-md text-sm flex items-center space-x-2">
+                                <i class="fas fa-cog"></i>
+                                <span>Settings</span>
+                            </button>
+                            <button class="px-4 py-2 bg-gradient-to-r from-purple-600 to-emerald-500 rounded-md text-sm flex items-center space-x-2">
+                                <i class="fas fa-sliders-h"></i>
+                                <span>Calibrate</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Effects Rack -->
+                <div class="visualizer p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h2 class="title-font text-xl font-semibold">Effects Rack</h2>
+                        <button class="px-3 py-1 bg-gradient-to-r from-purple-600 to-emerald-500 rounded-md text-sm">
+                            <i class="fas fa-plus mr-1"></i> Add
+                        </button>
+                    </div>
+                    <div class="space-y-4">
+                        <!-- Effect Cards -->
+                        <div class="effect-card p-4 rounded-lg border border-slate-700">
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-8 h-8 rounded bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center">
+                                        <i class="fas fa-volume-up text-xs text-white"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="font-medium">Compressor</h3>
+                                        <p class="text-xs text-slate-400">Threshold: -12dB</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <div class="led active"></div>
+                                    <button class="text-slate-400 hover:text-white">
+                                        <i class="fas fa-ellipsis-v"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="effect-card p-4 rounded-lg border border-slate-700">
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-8 h-8 rounded bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center">
+                                        <i class="fas fa-robot text-xs text-white"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="font-medium">Vocoder</h3>
+                                        <p class="text-xs text-slate-400">Band: 16</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <div class="led active"></div>
+                                    <button class="text-slate-400 hover:text-white">
+                                        <i class="fas fa-ellipsis-v"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="effect-card p-4 rounded-lg border border-slate-700">
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-8 h-8 rounded bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center">
+                                        <i class="fas fa-echo text-xs text-white"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="font-medium">Delay</h3>
+                                        <p class="text-xs text-slate-400">Feedback: 30%</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <div class="led"></div>
+                                    <button class="text-slate-400 hover:text-white">
+                                        <i class="fas fa-ellipsis-v"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="effect-card p-4 rounded-lg border border-slate-700">
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center space-x-3">
+                                    <div class="w-8 h-8 rounded bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center">
+                                        <i class="fas fa-mountain text-xs text-white"></i>
+                                    </div>
+                                    <div>
+                                        <h3 class="font-medium">Reverb</h3>
+                                        <p class="text-xs text-slate-400">Decay: 2.4s</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center space-x-2">
+                                    <div class="led"></div>
+                                    <button class="text-slate-400 hover:text-white">
+                                        <i class="fas fa-ellipsis-v"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="py-4 px-6 border-t border-slate-800">
+        <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
+            <div class="flex items-center space-x-2 mb-4 md:mb-0">
+                <div class="w-6 h-6 rounded-full bg-gradient-to-br from-purple-600 to-emerald-400 flex items-center justify-center">
+                    <i class="fas fa-wave-square text-xs text-white"></i>
+                </div>
+                <span class="title-font text-sm">NEXUS Audio Processor</span>
+            </div>
+            <div class="flex space-x-4">
+                <span class="text-xs text-slate-400">v1.0.0</span>
+                <span class="text-xs text-slate-400">CPU: 12%</span>
+                <span class="text-xs text-slate-400">Latency: 4.2ms</span>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Visualizer animation
+        const canvas = document.getElementById('visualizerCanvas');
+        const ctx = canvas.getContext('2d');
+        // Set canvas dimensions
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        // Animation variables
+        let animationId;
+        let dataArray = new Array(128).fill(0);
+        function drawVisualizer() {
+            animationId = requestAnimationFrame(drawVisualizer);
+            // Clear canvas
+            ctx.fillStyle = 'rgba(15, 23, 42, 0.2)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw waveform
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = '#6d28d9';
+            ctx.beginPath();
+            const sliceWidth = canvas.width / dataArray.length;
+            let x = 0;
+            for(let i = 0; i < dataArray.length; i++) {
+                // Simulate audio data
+                dataArray[i] = Math.random() * 0.4 + 0.1;
+                const v = dataArray[i];
+                const y = canvas.height / 2 + v * canvas.height / 2 * (i % 2 === 0 ? 1 : -1);
+                if(i === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+                x += sliceWidth;
+            }
+            ctx.stroke();
+            // Draw gradient overlay
+            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+            gradient.addColorStop(0, 'rgba(109, 40, 217, 0.1)');
+            gradient.addColorStop(1, 'rgba(16, 185, 129, 0.1)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        }
+        // Start animation
+        drawVisualizer();
+        // Simulate progress bar movement
+        let progress = 0;
+        setInterval(() => {
+            progress = (progress + 0.5) % 100;
+            document.getElementById('progressBar').style.width = `${progress}%`;
+        }, 100);
+        // Knob rotation interaction
+        const knobs = document.querySelectorAll('.knob');
+        knobs.forEach(knob => {
+            let isDragging = false;
+            let startY = 0;
+            let rotation = 0;
+            knob.addEventListener('mousedown', (e) => {
+                isDragging = true;
+                startY = e.clientY;
+                knob.style.cursor = 'grabbing';
+            });
+            document.addEventListener('mousemove', (e) => {
+                if(!isDragging) return;
+                const deltaY = e.clientY - startY;
+                rotation = Math.min(Math.max(rotation + deltaY * 0.5, -90), 90);
+                knob.style.transform = `rotate(${rotation}deg)`;
+                startY = e.clientY;
+            });
+            document.addEventListener('mouseup', () => {
+                isDragging = false;
+                knob.style.cursor = 'pointer';
+            });
+        });
+        // Toggle effect LEDs
+        const effectCards = document.querySelectorAll('.effect-card');
+        effectCards.forEach(card => {
+            const led = card.querySelector('.led');
+            card.addEventListener('click', () => {
+                led.classList.toggle('active');
+            });
+        });
+        // Responsive adjustments
+        window.addEventListener('resize', () => {
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+        });
+    </script>
+<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=AhBoh/prova" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt CHANGED Viewed

	@@ -0,0 +1 @@


1	+ Create a software Audio processor called NEXUS