Spaces:

Assad3l
/

ebala

Running

App Files Files Community

Assad3l commited on Apr 1

Commit

aba68f0

verified ·

1 Parent(s): 20a6bc5

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +523 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ebala
-emoji: 📚
-colorFrom: purple
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ebala
+emoji: 🐳
+colorFrom: blue
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,523 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FruitLoop Sound Machine</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>
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .pulse {
+            animation: pulse 0.5s ease-in-out;
+        }
+        .fruit-btn {
+            transition: all 0.2s ease;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .fruit-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+        }
+        .fruit-btn:active {
+            transform: translateY(1px);
+        }
+        .knob {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
+            position: relative;
+            cursor: pointer;
+        }
+        .knob:after {
+            content: '';
+            position: absolute;
+            width: 5px;
+            height: 15px;
+            background: #e74c3c;
+            top: 5px;
+            left: 50%;
+            transform: translateX(-50%);
+            border-radius: 3px;
+        }
+        .slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 10px;
+            border-radius: 5px;
+            background: linear-gradient(to right, #f39c12, #e74c3c);
+            outline: none;
+        }
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #fff;
+            cursor: pointer;
+            box-shadow: 0 0 5px rgba(0,0,0,0.3);
+        }
+        .visualizer {
+            height: 100px;
+            background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
+            border-radius: 5px;
+            position: relative;
+            overflow: hidden;
+        }
+        .bar {
+            position: absolute;
+            bottom: 0;
+            width: 5px;
+            background: linear-gradient(to top, #f39c12, #e74c3c);
+            border-radius: 3px 3px 0 0;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-purple-900 to-indigo-800 min-h-screen text-white p-6">
+    <div class="max-w-4xl mx-auto">
+        <header class="text-center mb-8">
+            <h1 class="text-4xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-pink-500">
+                <i class="fas fa-music mr-2"></i>FruitLoop Sound Machine
+            </h1>
+            <p class="text-lg text-purple-200">Create funky beats with fruity sounds!</p>
+        </header>
+        <div class="bg-gray-900 bg-opacity-70 rounded-xl p-6 shadow-2xl border border-purple-500 border-opacity-30">
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+                <!-- Fruit Sound Buttons -->
+                <button class="fruit-btn bg-gradient-to-br from-red-500 to-pink-600 rounded-lg p-4 flex flex-col items-center justify-center h-32"
+                        data-sound="apple" onclick="playSound('apple')">
+                    <i class="fas fa-apple-alt text-4xl mb-2"></i>
+                    <span class="font-bold">Apple</span>
+                </button>
+                <button class="fruit-btn bg-gradient-to-br from-yellow-500 to-orange-500 rounded-lg p-4 flex flex-col items-center justify-center h-32"
+                        data-sound="banana" onclick="playSound('banana')">
+                    <i class="fas fa-banana text-4xl mb-2"></i>
+                    <span class="font-bold">Banana</span>
+                </button>
+                <button class="fruit-btn bg-gradient-to-br from-green-500 to-lime-400 rounded-lg p-4 flex flex-col items-center justify-center h-32"
+                        data-sound="watermelon" onclick="playSound('watermelon')">
+                    <i class="fas fa-watermelon text-4xl mb-2"></i>
+                    <span class="font-bold">Melon</span>
+                </button>
+                <button class="fruit-btn bg-gradient-to-br from-purple-500 to-indigo-500 rounded-lg p-4 flex flex-col items-center justify-center h-32"
+                        data-sound="grape" onclick="playSound('grape')">
+                    <i class="fas fa-grapes text-4xl mb-2"></i>
+                    <span class="font-bold">Grape</span>
+                </button>
+                <button class="fruit-btn bg-gradient-to-br from-orange-500 to-red-500 rounded-lg p-4 flex flex-col items-center justify-center h-32"
+                        data-sound="orange" onclick="playSound('orange')">
+                    <i class="fas fa-orange text-4xl mb-2"></i>
+                    <span class="font-bold">Orange</span>
+                </button>
+                <button class="fruit-btn bg-gradient-to-br from-pink-500 to-red-400 rounded-lg p-4 flex flex-col items-center justify-center h-32"
+                        data-sound="strawberry" onclick="playSound('strawberry')">
+                    <i class="fas fa-strawberry text-4xl mb-2"></i>
+                    <span class="font-bold">Strawberry</span>
+                </button>
+                <button class="fruit-btn bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg p-4 flex flex-col items-center justify-center h-32"
+                        data-sound="blueberry" onclick="playSound('blueberry')">
+                    <i class="fas fa-berry text-4xl mb-2"></i>
+                    <span class="font-bold">Blueberry</span>
+                </button>
+                <button class="fruit-btn bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-lg p-4 flex flex-col items-center justify-center h-32"
+                        data-sound="lemon" onclick="playSound('lemon')">
+                    <i class="fas fa-lemon text-4xl mb-2"></i>
+                    <span class="font-bold">Lemon</span>
+                </button>
+            </div>
+            <!-- Controls -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold mb-3 text-center text-yellow-300">
+                        <i class="fas fa-sliders-h mr-2"></i>Sound Controls
+                    </h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block mb-1 text-sm">Volume</label>
+                            <input type="range" min="0" max="1" step="0.01" value="0.7"
+                                   class="slider" id="volumeSlider" oninput="updateVolume()">
+                        </div>
+                        <div>
+                            <label class="block mb-1 text-sm">Playback Rate</label>
+                            <input type="range" min="0.5" max="2" step="0.1" value="1"
+                                   class="slider" id="rateSlider" oninput="updateRate()">
+                        </div>
+                        <div>
+                            <label class="block mb-1 text-sm">Filter Frequency</label>
+                            <input type="range" min="20" max="20000" step="10" value="20000"
+                                   class="slider" id="filterSlider" oninput="updateFilter()">
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold mb-3 text-center text-green-300">
+                        <i class="fas fa-random mr-2"></i>Effects
+                    </h3>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block mb-1 text-sm">Reverb</label>
+                            <input type="range" min="0" max="1" step="0.1" value="0"
+                                   class="slider" id="reverbSlider" oninput="updateReverb()">
+                        </div>
+                        <div>
+                            <label class="block mb-1 text-sm">Delay</label>
+                            <input type="range" min="0" max="1" step="0.1" value="0"
+                                   class="slider" id="delaySlider" oninput="updateDelay()">
+                        </div>
+                        <div>
+                            <label class="block mb-1 text-sm">Distortion</label>
+                            <input type="range" min="0" max="1" step="0.1" value="0"
+                                   class="slider" id="distortionSlider" oninput="updateDistortion()">
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg">
+                    <h3 class="text-lg font-semibold mb-3 text-center text-blue-300">
+                        <i class="fas fa-wave-square mr-2"></i>Visualizer
+                    </h3>
+                    <div class="visualizer" id="visualizer">
+                        <!-- Bars will be added dynamically -->
+                    </div>
+                    <div class="mt-4 flex justify-center">
+                        <button onclick="toggleVisualizer()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">
+                            <i class="fas fa-play mr-2"></i>Toggle Visualizer
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Sequencer -->
+            <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg mb-6">
+                <h3 class="text-lg font-semibold mb-3 text-center text-purple-300">
+                    <i class="fas fa-drum mr-2"></i>Fruit Sequencer
+                </h3>
+                <div class="overflow-x-auto">
+                    <table class="w-full">
+                        <thead>
+                            <tr>
+                                <th class="px-2 py-1 text-sm">Fruit</th>
+                                <th class="px-2 py-1 text-sm">Steps</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td class="px-2 py-1 text-center">🍎</td>
+                                <td class="px-2 py-1">
+                                    <div class="flex space-x-1">
+                                        <input type="checkbox" class="step-checkbox" data-sound="apple" data-step="1">
+                                        <input type="checkbox" class="step-checkbox" data-sound="apple" data-step="2">
+                                        <input type="checkbox" class="step-checkbox" data-sound="apple" data-step="3">
+                                        <input type="checkbox" class="step-checkbox" data-sound="apple" data-step="4">
+                                        <input type="checkbox" class="step-checkbox" data-sound="apple" data-step="5">
+                                        <input type="checkbox" class="step-checkbox" data-sound="apple" data-step="6">
+                                        <input type="checkbox" class="step-checkbox" data-sound="apple" data-step="7">
+                                        <input type="checkbox" class="step-checkbox" data-sound="apple" data-step="8">
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr class="bg-gray-700 bg-opacity-30">
+                                <td class="px-2 py-1 text-center">🍌</td>
+                                <td class="px-2 py-1">
+                                    <div class="flex space-x-1">
+                                        <input type="checkbox" class="step-checkbox" data-sound="banana" data-step="1">
+                                        <input type="checkbox" class="step-checkbox" data-sound="banana" data-step="2">
+                                        <input type="checkbox" class="step-checkbox" data-sound="banana" data-step="3">
+                                        <input type="checkbox" class="step-checkbox" data-sound="banana" data-step="4">
+                                        <input type="checkbox" class="step-checkbox" data-sound="banana" data-step="5">
+                                        <input type="checkbox" class="step-checkbox" data-sound="banana" data-step="6">
+                                        <input type="checkbox" class="step-checkbox" data-sound="banana" data-step="7">
+                                        <input type="checkbox" class="step-checkbox" data-sound="banana" data-step="8">
+                                    </div>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="px-2 py-1 text-center">🍉</td>
+                                <td class="px-2 py-1">
+                                    <div class="flex space-x-1">
+                                        <input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="1">
+                                        <input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="2">
+                                        <input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="3">
+                                        <input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="4">
+                                        <input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="5">
+                                        <input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="6">
+                                        <input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="7">
+                                        <input type="checkbox" class="step-checkbox" data-sound="watermelon" data-step="8">
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="mt-4 flex justify-center space-x-4">
+                    <button onclick="startSequencer()" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg transition">
+                        <i class="fas fa-play mr-2"></i>Start
+                    </button>
+                    <button onclick="stopSequencer()" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition">
+                        <i class="fas fa-stop mr-2"></i>Stop
+                    </button>
+                    <button onclick="randomizeSequencer()" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg transition">
+                        <i class="fas fa-random mr-2"></i>Randomize
+                    </button>
+                </div>
+            </div>
+        </div>
+        <footer class="text-center mt-8 text-purple-300 text-sm">
+            <p>Made with <i class="fas fa-heart text-red-400"></i> for music lovers | FruitLoop Sound Machine © 2023</p>
+        </footer>
+    </div>
+    <script>
+        // Audio context and nodes
+        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        let sounds = {};
+        let gainNode = audioContext.createGain();
+        let filterNode = audioContext.createBiquadFilter();
+        let convolverNode = audioContext.createConvolver();
+        let delayNode = audioContext.createDelay();
+        let feedbackNode = audioContext.createGain();
+        let distortionNode = audioContext.createWaveShaper();
+        // Connect nodes
+        gainNode.connect(filterNode);
+        filterNode.connect(distortionNode);
+        distortionNode.connect(delayNode);
+        delayNode.connect(feedbackNode);
+        feedbackNode.connect(delayNode);
+        delayNode.connect(convolverNode);
+        convolverNode.connect(audioContext.destination);
+        // Set initial values
+        gainNode.gain.value = 0.7;
+        filterNode.type = "lowpass";
+        filterNode.frequency.value = 20000;
+        feedbackNode.gain.value = 0;
+        delayNode.delayTime.value = 0.5;
+        // Create distortion curve
+        function makeDistortionCurve(amount) {
+            const k = typeof amount === 'number' ? amount : 50;
+            const n_samples = 44100;
+            const curve = new Float32Array(n_samples);
+            const deg = Math.PI / 180;
+            for (let i = 0; i < n_samples; i++) {
+                const x = (i * 2) / n_samples - 1;
+                curve[i] = ((3 + k) * x * 20 * deg) / (Math.PI + k * Math.abs(x));
+            }
+            return curve;
+        }
+        // Load sounds
+        const soundFiles = {
+            apple: 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3',
+            banana: 'https://assets.mixkit.co/sfx/preview/mixkit-unlock-game-notification-253.mp3',
+            watermelon: 'https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3',
+            grape: 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-retro-game-over-213.mp3',
+            orange: 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-mechanical-bling-210.mp3',
+            strawberry: 'https://assets.mixkit.co/sfx/preview/mixkit-bonus-earned-in-video-game-2058.mp3',
+            blueberry: 'https://assets.mixkit.co/sfx/preview/mixkit-extra-bonus-points-arcade-2043.mp3',
+            lemon: 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-video-game-bonus-2044.mp3'
+        };
+        // Load all sounds
+        function loadSounds() {
+            Object.keys(soundFiles).forEach(key => {
+                fetch(soundFiles[key])
+                    .then(response => response.arrayBuffer())
+                    .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
+                    .then(audioBuffer => {
+                        sounds[key] = audioBuffer;
+                    })
+                    .catch(error => {
+                        console.error('Error loading sound:', key, error);
+                    });
+            });
+        }
+        // Play sound function
+        function playSound(soundName) {
+            if (!sounds[soundName]) return;
+            const source = audioContext.createBufferSource();
+            source.buffer = sounds[soundName];
+            source.playbackRate.value = parseFloat(document.getElementById('rateSlider').value);
+            source.connect(gainNode);
+            source.start();
+            // Add pulse animation to button
+            const button = document.querySelector(`[data-sound="${soundName}"]`);
+            button.classList.add('pulse');
+            setTimeout(() => button.classList.remove('pulse'), 500);
+            // Visualizer effect
+            if (visualizerActive) {
+                triggerVisualizer();
+            }
+        }
+        // Control functions
+        function updateVolume() {
+            gainNode.gain.value = parseFloat(document.getElementById('volumeSlider').value);
+        }
+        function updateRate() {
+            // This will be applied when sounds are played
+        }
+        function updateFilter() {
+            filterNode.frequency.value = parseFloat(document.getElementById('filterSlider').value);
+        }
+        function updateReverb() {
+            const amount = parseFloat(document.getElementById('reverbSlider').value);
+            if (amount > 0) {
+                // Create a simple impulse response for reverb
+                const length = audioContext.sampleRate * 2;
+                const impulse = audioContext.createBuffer(2, length, audioContext.sampleRate);
+                const left = impulse.getChannelData(0);
+                const right = impulse.getChannelData(1);
+                for (let i = 0; i < length; i++) {
+                    const n = length - i;
+                    left[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, amount * 10);
+                    right[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, amount * 10);
+                }
+                convolverNode.buffer = impulse;
+            } else {
+                // Bypass reverb
+                convolverNode.buffer = null;
+            }
+        }
+        function updateDelay() {
+            const amount = parseFloat(document.getElementById('delaySlider').value);
+            feedbackNode.gain.value = amount * 0.8;
+            delayNode.delayTime.value = amount * 0.5;
+        }
+        function updateDistortion() {
+            const amount = parseFloat(document.getElementById('distortionSlider').value);
+            distortionNode.curve = makeDistortionCurve(amount * 100);
+            distortionNode.oversample = amount > 0.5 ? '4x' : 'none';
+        }
+        // Visualizer
+        let visualizerActive = false;
+        let bars = [];
+        function initVisualizer() {
+            const visualizer = document.getElementById('visualizer');
+            visualizer.innerHTML = '';
+            bars = [];
+            for (let i = 0; i < 32; i++) {
+                const bar = document.createElement('div');
+                bar.className = 'bar';
+                bar.style.left = `${i * 6}px`;
+                bar.style.height = '0px';
+                visualizer.appendChild(bar);
+                bars.push(bar);
+            }
+        }
+        function triggerVisualizer() {
+            for (let i = 0; i < bars.length; i++) {
+                const randomHeight = Math.random() * 80 + 20;
+                bars[i].style.height = `${randomHeight}px`;
+                bars[i].style.transition = 'height 0.1s ease-out';
+                setTimeout(() => {
+                    bars[i].style.height = '0px';
+                    bars[i].style.transition = 'height 0.3s ease-out';
+                }, 100);
+            }
+        }
+        function toggleVisualizer() {
+            visualizerActive = !visualizerActive;
+            if (visualizerActive) {
+                initVisualizer();
+            }
+        }
+        // Sequencer
+        let sequencerInterval;
+        let currentStep = 0;
+        function startSequencer() {
+            if (sequencerInterval) clearInterval(sequencerInterval);
+            const bpm = 120;
+            const stepDuration = (60 / bpm) / 2; // 8th notes
+            sequencerInterval = setInterval(() => {
+                currentStep = (currentStep % 8) + 1;
+                // Highlight current step
+                document.querySelectorAll('.step-checkbox').forEach(checkbox => {
+                    checkbox.parentElement.style.backgroundColor =
+                        parseInt(checkbox.dataset.step) === currentStep ? 'rgba(255, 255, 255, 0.2)' : '';
+                });
+                // Play sounds for current step
+                document.querySelectorAll(`.step-checkbox[data-step="${currentStep}"]:checked`).forEach(checkbox => {
+                    playSound(checkbox.dataset.sound);
+                });
+            }, stepDuration * 1000);
+        }
+        function stopSequencer() {
+            clearInterval(sequencerInterval);
+            document.querySelectorAll('.step-checkbox').forEach(checkbox => {
+                checkbox.parentElement.style.backgroundColor = '';
+            });
+            currentStep = 0;
+        }
+        function randomizeSequencer() {
+            document.querySelectorAll('.step-checkbox').forEach(checkbox => {
+                checkbox.checked = Math.random() > 0.7;
+            });
+        }
+        // Initialize
+        window.addEventListener('load', () => {
+            loadSounds();
+            initVisualizer();
+            // Keyboard controls
+            document.addEventListener('keydown', (e) => {
+                const keyMap = {
+                    '1': 'apple',
+                    '2': 'banana',
+                    '3': 'watermelon',
+                    '4': 'grape',
+                    '5': 'orange',
+                    '6': 'strawberry',
+                    '7': 'blueberry',
+                    '8': 'lemon'
+                };
+                if (keyMap[e.key]) {
+                    playSound(keyMap[e.key]);
+                }
+            });
+        });
+    </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=Assad3l/ebala" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>