Spaces:

sohailsyed
/

echomimic-magic-mic

Running

App Files Files Community

sohailsyed commited on Oct 13, 2025

Commit

7744beb

verified ·

1 Parent(s): 69cb411

make it working please.

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +255 -18

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Echomimic Magic Mic
-emoji: 🔥
-colorFrom: purple
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: EchoMimic Magic Mic 🎤
+colorFrom: gray
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,256 @@
-<!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>EchoMimic - Voice Cloning Wizardry</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/RecordRTC/5.6.2/RecordRTC.min.js"></script>
+<style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .voice-visualizer {
+            height: 100px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 10px;
+            position: relative;
+            overflow: hidden;
+        }
+        .voice-bar {
+            position: absolute;
+            bottom: 0;
+            width: 4px;
+            background: white;
+            border-radius: 2px;
+            animation: equalizer 1s infinite alternate;
+        }
+        @keyframes equalizer {
+            0% { height: 10%; }
+            100% { height: 100%; }
+        }
+    </style>
+</head>
+<body class="gradient-bg min-h-screen text-white">
+    <div id="waves-bg" class="absolute inset-0"></div>
+    <div class="container mx-auto px-4 py-12 relative z-10">
+        <header class="text-center mb-12">
+            <h1 class="text-5xl font-bold mb-2">EchoMimic</h1>
+            <p class="text-xl opacity-90">Your voice cloning wizard ✨</p>
+            <div class="w-24 h-1 bg-white mx-auto mt-4 rounded-full"></div>
+        </header>
+        <main class="max-w-3xl mx-auto bg-white/10 backdrop-blur-md rounded-xl shadow-2xl overflow-hidden">
+            <div class="p-8">
+                <div class="flex flex-col md:flex-row gap-8">
+                    <div class="flex-1">
+                        <h2 class="text-2xl font-semibold mb-4">Record Your Voice</h2>
+                        <div class="voice-visualizer mb-6" id="visualizer">
+                            <!-- Bars will be added via JS -->
+                        </div>
+                        <div class="flex gap-4 mb-6">
+                            <button id="recordBtn" class="flex-1 bg-red-500 hover:bg-red-600 text-white py-3 px-6 rounded-lg flex items-center justify-center gap-2 transition">
+                                <i data-feather="mic"></i> Record
+                            </button>
+                            <button id="stopBtn" disabled class="flex-1 bg-gray-600 text-white py-3 px-6 rounded-lg flex items-center justify-center gap-2 transition opacity-50">
+                                <i data-feather="square"></i> Stop
+                            </button>
+                        </div>
+                        <div class="mb-6">
+                            <label class="block mb-2">Voice Name</label>
+                            <input type="text" placeholder="My Awesome Voice" class="w-full bg-white/20 border border-white/30 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-white">
+                        </div>
+                    </div>
+                    <div class="flex-1">
+                        <h2 class="text-2xl font-semibold mb-4">Clone Settings</h2>
+                        <div class="space-y-4 mb-6">
+                            <div>
+                                <label class="block mb-1">Pitch</label>
+                                <input type="range" min="0" max="100" value="50" class="w-full">
+                            </div>
+                            <div>
+                                <label class="block mb-1">Speed</label>
+                                <input type="range" min="50" max="150" value="100" class="w-full">
+                            </div>
+                            <div>
+                                <label class="block mb-1">Emotion</label>
+                                <select class="w-full bg-white/20 border border-white/30 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-white">
+                                    <option>Neutral</option>
+                                    <option>Happy</option>
+                                    <option>Sad</option>
+                                    <option>Angry</option>
+                                    <option>Excited</option>
+                                </select>
+                            </div>
+                        </div>
+                        <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-6 rounded-lg flex items-center justify-center gap-2 transition">
+                            <i data-feather="copy"></i> Clone Voice
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <section class="mt-16 max-w-4xl mx-auto">
+            <h2 class="text-2xl font-semibold mb-6 text-center">Your Voice Library</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div class="bg-white/10 backdrop-blur-md rounded-lg p-4 hover:bg-white/20 transition cursor-pointer">
+                    <div class="flex items-center gap-3 mb-3">
+                        <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center">
+                            <i data-feather="user"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium">My Normal Voice</h3>
+                            <p class="text-sm opacity-80">Recorded: 2 days ago</p>
+                        </div>
+                    </div>
+                    <audio controls class="w-full mt-2">
+                        <source src="#" type="audio/mpeg">
+                    </audio>
+                </div>
+                <div class="bg-white/10 backdrop-blur-md rounded-lg p-4 hover:bg-white/20 transition cursor-pointer">
+                    <div class="flex items-center gap-3 mb-3">
+                        <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center">
+                            <i data-feather="user"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium">Deep Voice</h3>
+                            <p class="text-sm opacity-80">Recorded: 1 week ago</p>
+                        </div>
+                    </div>
+                    <audio controls class="w-full mt-2">
+                        <source src="#" type="audio/mpeg">
+                    </audio>
+                </div>
+                <div class="bg-white/10 backdrop-blur-md rounded-lg p-4 hover:bg-white/20 transition cursor-pointer">
+                    <div class="flex items-center gap-3 mb-3">
+                        <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center">
+                            <i data-feather="user"></i>
+                        </div>
+                        <div>
+                            <h3 class="font-medium">Happy Voice</h3>
+                            <p class="text-sm opacity-80">Recorded: 3 days ago</p>
+                        </div>
+                    </div>
+                    <audio controls class="w-full mt-2">
+                        <source src="#" type="audio/mpeg">
+                    </audio>
+                </div>
+            </div>
+        </section>
+    </div>
+    <footer class="py-6 text-center text-sm opacity-80 mt-16">
+        <p>© 2023 EchoMimic - Clone voices like magic ✨</p>
+    </footer>
+    <script>
+        // Initialize Vanta.js waves background
+        VANTA.WAVES({
+            el: "#waves-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x7b72d0,
+            shininess: 77.00,
+            waveHeight: 15.00,
+            waveSpeed: 0.75,
+            zoom: 1.00
+        });
+        // Create visualizer bars
+        const visualizer = document.getElementById('visualizer');
+        for (let i = 0; i < 50; i++) {
+            const bar = document.createElement('div');
+            bar.className = 'voice-bar';
+            bar.style.left = `${i * 6}px`;
+            bar.style.animationDelay = `${i * 0.05}s`;
+            visualizer.appendChild(bar);
+        }
+        // Audio recording functionality
+        let mediaRecorder;
+        let audioChunks = [];
+        const recordBtn = document.getElementById('recordBtn');
+        const stopBtn = document.getElementById('stopBtn');
+        recordBtn.addEventListener('click', async () => {
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                mediaRecorder = new MediaRecorder(stream);
+                mediaRecorder.ondataavailable = (e) => {
+                    audioChunks.push(e.data);
+                };
+                mediaRecorder.onstop = () => {
+                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                    const audioUrl = URL.createObjectURL(audioBlob);
+                    // Create new voice entry
+                    const voiceLibrary = document.querySelector('.grid');
+                    const newVoice = document.createElement('div');
+                    newVoice.className = 'bg-white/10 backdrop-blur-md rounded-lg p-4 hover:bg-white/20 transition cursor-pointer';
+                    newVoice.innerHTML = `
+                        <div class="flex items-center gap-3 mb-3">
+                            <div class="w-12 h-12 rounded-full bg-pink-500 flex items-center justify-center">
+                                <i data-feather="user"></i>
+                            </div>
+                            <div>
+                                <h3 class="font-medium">New Recording</h3>
+                                <p class="text-sm opacity-80">Recorded: Just now</p>
+                            </div>
+                        </div>
+                        <audio controls class="w-full mt-2">
+                            <source src="${audioUrl}" type="audio/wav">
+                        </audio>
+                    `;
+                    voiceLibrary.prepend(newVoice);
+                    feather.replace();
+                    audioChunks = [];
+                };
+                mediaRecorder.start();
+                recordBtn.disabled = true;
+                recordBtn.classList.add('opacity-50');
+                stopBtn.disabled = false;
+                stopBtn.classList.remove('opacity-50');
+                // Animate visualizer while recording
+                const bars = document.querySelectorAll('.voice-bar');
+                bars.forEach(bar => {
+                    bar.style.animationDuration = '0.1s';
+                    bar.style.animationIterationCount = 'infinite';
+                });
+            } catch (err) {
+                console.error('Error accessing microphone:', err);
+                alert('Could not access microphone. Please check permissions.');
+            }
+        });
+        stopBtn.addEventListener('click', () => {
+            mediaRecorder.stop();
+            recordBtn.disabled = false;
+            recordBtn.classList.remove('opacity-50');
+            stopBtn.disabled = true;
+            stopBtn.classList.add('opacity-50');
+            // Reset visualizer animation
+            const bars = document.querySelectorAll('.voice-bar');
+            bars.forEach(bar => {
+                bar.style.animationDuration = '1s';
+                bar.style.animationIterationCount = 'infinite';
+            });
+        });
+// Initialize feather icons
+        feather.replace();
+    </script>
+</body>
 </html>