VOICECLONE

Running

App Files Files Community

luis5463 commited on Oct 8, 2025

Commit

75ba37d

verified ·

1 Parent(s): 698086c

desig like this

Browse files

Files changed (1) hide show

index.html +60 -23

index.html CHANGED Viewed

@@ -10,7 +10,11 @@
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>
 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
-    <style>
         .wave-bg {
             position: fixed;
             top: 0;
@@ -18,6 +22,15 @@
             width: 100%;
             height: 100%;
             z-index: -1;
         }
         .recording {
             animation: pulse 1.5s infinite;
@@ -27,21 +40,35 @@
             70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
             100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
         }
     </style>
 </head>
 <body class="bg-gray-50">
     <div id="wave-bg" class="wave-bg"></div>
-    <div class="min-h-screen flex flex-col items-center justify-start px-4 pt-12">
-<header class="w-full max-w-4xl mx-auto py-8">
-            <div class="flex flex-col items-center">
-                <i data-feather="user" class="w-16 h-16 text-indigo-500 mb-4"></i>
-                <h1 class="text-5xl font-bold text-gray-800 mb-3">VoiceCloneAI</h1>
-                <p class="text-xl text-gray-600">Create your digital voice clone with advanced AI</p>
 </div>
         </header>
-        <main class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-8 mb-8">
-            <div class="grid md:grid-cols-2 gap-8">
                 <div class="space-y-6">
                     <h2 class="text-2xl font-semibold text-gray-800">Create Your Voice Clone</h2>
                     <p class="text-gray-600">Record or upload samples to train your unique voice model</p>
@@ -106,12 +133,12 @@
 </div>
                     </div>
                     <div class="flex flex-wrap gap-4">
-                        <button id="trainBtn" class="px-6 py-3 bg-indigo-500 text-white rounded-lg hover:bg-indigo-600 transition flex items-center space-x-2">
-                            <i data-feather="cpu" class="w-4 h-4"></i>
                             <span>Train Model</span>
                         </button>
-                        <button id="generateBtn" class="px-6 py-3 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 transition flex items-center space-x-2">
-                            <i data-feather="play" class="w-4 h-4"></i>
                             <span>Generate Voice</span>
                         </button>
                         <button id="downloadBtn" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition flex items-center space-x-2">
@@ -122,11 +149,11 @@
 </div>
             </div>
         </main>
-        <section class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-8 mb-8">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-6">Advanced Voice Cloning Features</h2>
 <div class="grid md:grid-cols-3 gap-6">
-                <div class="bg-gray-50 p-6 rounded-lg">
-                    <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                         <i data-feather="layers" class="text-indigo-500"></i>
                     </div>
                     <h3 class="font-medium text-lg mb-2 text-gray-800">Multi-Speaker Support</h3>
@@ -148,8 +175,12 @@
                 </div>
 </div>
         </section>
         <footer class="w-full max-w-4xl py-6 text-center text-gray-500 text-sm">
             <p>© 2023 VoiceCloneAI - Advanced Voice Cloning Technology</p>
 </footer>
     </div>
@@ -161,12 +192,18 @@
         VANTA.WAVES({
             el: "#wave-bg",
             color: 0x6366f1,
-            waveHeight: 20,
             shininess: 50,
-            waveSpeed: 0.5,
-            zoom: 0.8
         });
-        // Recording and Upload
         const recordBtn = document.getElementById('recordBtn');
         const voiceUpload = document.getElementById('voiceUpload');

     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands"></script>
 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
+        <style>
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        }
         .wave-bg {
             position: fixed;
             top: 0;
             width: 100%;
             height: 100%;
             z-index: -1;
+            opacity: 0.5;
+        }
+        .glass-card {
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-radius: 16px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.3);
         }
         .recording {
             animation: pulse 1.5s infinite;
             70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
             100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
         }
+        .btn-gradient {
+            background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
+            color: white;
+            transition: all 0.3s ease;
+        }
+        .btn-gradient:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            transition: all 0.3s ease;
+        }
     </style>
 </head>
 <body class="bg-gray-50">
     <div id="wave-bg" class="wave-bg"></div>
+    <div class="min-h-screen flex flex-col items-center justify-start px-4 pt-8">
+<header class="w-full max-w-4xl mx-auto py-6">
+<div class="flex flex-col items-center">
+                <div class="w-20 h-20 bg-indigo-500 rounded-full flex items-center justify-center shadow-lg mb-6">
+                    <i data-feather="mic" class="w-10 h-10 text-white"></i>
+                </div>
+                <h1 class="text-5xl font-bold text-gray-800 mb-3 bg-gradient-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">VoiceCloneAI</h1>
+                <p class="text-xl text-gray-600 max-w-lg text-center">Transform your voice into a digital masterpiece with our cutting-edge AI technology</p>
 </div>
         </header>
+        <main class="w-full max-w-4xl glass-card p-8 mb-8">
+<div class="grid md:grid-cols-2 gap-8">
                 <div class="space-y-6">
                     <h2 class="text-2xl font-semibold text-gray-800">Create Your Voice Clone</h2>
                     <p class="text-gray-600">Record or upload samples to train your unique voice model</p>
 </div>
                     </div>
                     <div class="flex flex-wrap gap-4">
+                        <button id="trainBtn" class="px-6 py-3 btn-gradient rounded-lg flex items-center space-x-2 shadow-md">
+<i data-feather="cpu" class="w-4 h-4"></i>
                             <span>Train Model</span>
                         </button>
+                        <button id="generateBtn" class="px-6 py-3 btn-gradient rounded-lg flex items-center space-x-2 shadow-md" style="background: linear-gradient(135deg, #10B981 0%, #3B82F6 100%);">
+<i data-feather="play" class="w-4 h-4"></i>
                             <span>Generate Voice</span>
                         </button>
                         <button id="downloadBtn" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition flex items-center space-x-2">
 </div>
             </div>
         </main>
+        <section class="w-full max-w-4xl glass-card p-8 mb-8">
+<h2 class="text-2xl font-semibold text-gray-800 mb-6">Advanced Voice Cloning Features</h2>
 <div class="grid md:grid-cols-3 gap-6">
+                <div class="bg-gray-50 p-6 rounded-lg feature-card transition hover:shadow-lg">
+<div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
                         <i data-feather="layers" class="text-indigo-500"></i>
                     </div>
                     <h3 class="font-medium text-lg mb-2 text-gray-800">Multi-Speaker Support</h3>
                 </div>
 </div>
         </section>
         <footer class="w-full max-w-4xl py-6 text-center text-gray-500 text-sm">
+            <div class="flex items-center justify-center space-x-4 mb-2">
+                <a href="#" class="hover:text-indigo-500"><i data-feather="twitter"></i></a>
+                <a href="#" class="hover:text-indigo-500"><i data-feather="github"></i></a>
+                <a href="#" class="hover:text-indigo-500"><i data-feather="linkedin"></i></a>
+            </div>
             <p>© 2023 VoiceCloneAI - Advanced Voice Cloning Technology</p>
 </footer>
     </div>
         VANTA.WAVES({
             el: "#wave-bg",
             color: 0x6366f1,
+            waveHeight: 15,
             shininess: 50,
+            waveSpeed: 0.3,
+            zoom: 0.7
         });
+        // Add font
+        const link = document.createElement('link');
+        link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap';
+        link.rel = 'stylesheet';
+        document.head.appendChild(link);
+// Recording and Upload
         const recordBtn = document.getElementById('recordBtn');
         const voiceUpload = document.getElementById('voiceUpload');