Update index.html

index.html

@@ -94,11 +94,9 @@
                     <div class="p-6 border-b border-gray-100">
                         <h2 class="text-xl font-semibold text-gray-800 mb-4">Text Input</h2>
                         <div class="relative">
-                            <textarea 
-                                id="textInput" 
-                                class="w-full h-48 px-4 py-3 border border-gray-200 rounded-lg textarea-shadow focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition duration-200 resize-none" 
-                                placeholder="Enter the text you want to convert to speech..."
-                            ></textarea>
+                            <textarea id="textInput"
+                                      class="w-full h-48 px-4 py-3 border border-gray-200 rounded-lg textarea-shadow focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition duration-200 resize-none"
+                                      placeholder="Enter the text you want to convert to speech...">السلام عليكم كيف الحال اخبارك علومك وش مسوي بالله  وش الجديد  </textarea>
                             <div class="absolute bottom-3 right-3 flex items-center space-x-2">
                                 <span id="charCount" class="text-xs text-gray-500">0 characters</span>
                                 <button id="clearBtn" class="text-gray-400 hover:text-gray-600 transition">
@@ -106,16 +104,18 @@
                                 </button>
                             </div>
                         </div>
-                        
+
                         <div class="mt-6 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
                             <div class="flex items-center space-x-4">
                                 <div class="flex items-center">
                                     <label for="voiceSelect" class="mr-2 text-sm font-medium text-gray-700">Voice:</label>
                                     <select id="voiceSelect" class="border border-gray-200 rounded-md px-3 py-1 text-sm focus:ring-indigo-500 focus:border-indigo-500 outline-none">
+                                        <option value="SA2">Najdi Arabic Haba v2</option>
+
                                         <option value="us">American English</option>
-                                        <option value="uk">British English</option>
-                                        <option value="au">Australian English</option>
-                                        <option value="in">Indian English</option>
+                                        <option value="SA1">Najdi Arabic Haba v1</option>
+
+                                        <option value="SA3">Najdi Arabic AHmmed v1</option>
                                     </select>
                                 </div>
                                 <div class="flex items-center">
@@ -127,18 +127,18 @@
                                     </select>
                                 </div>
                             </div>
-                            
+
                             <button id="generateBtn" class="gradient-bg hover:opacity-90 text-white font-medium py-2 px-6 rounded-lg shadow-md transition duration-200 flex items-center">
                                 <i class="fas fa-play-circle mr-2"></i>
                                 Generate Voice
                             </button>
                         </div>
                     </div>
-                    
+
                     <!-- Output Section -->
                     <div class="p-6">
                         <h2 class="text-xl font-semibold text-gray-800 mb-4">Generated Audio</h2>
-                        
+
                         <!-- Loading State -->
                         <div id="loadingState" class="hidden">
                             <div class="flex flex-col items-center justify-center py-8">
@@ -147,7 +147,7 @@
                                 <p class="text-sm text-gray-500 mt-1">This may take a few moments</p>
                             </div>
                         </div>
-                        
+
                         <!-- Audio Player -->
                         <div id="audioPlayerContainer" class="hidden">
                             <div class="audio-player bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl p-4 border border-gray-200">
@@ -166,7 +166,7 @@
                                 <audio id="audioPlayer" controls class="w-full"></audio>
                             </div>
                         </div>
-                        
+
                         <!-- Empty State -->
                         <div id="emptyState" class="flex flex-col items-center justify-center py-12 text-center">
                             <i class="fas fa-comment-dots text-4xl text-gray-300 mb-4"></i>
@@ -175,7 +175,7 @@
                         </div>
                     </div>
                 </div>
-                
+
                 <!-- Features Section -->
                 <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
                     <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
@@ -218,9 +218,14 @@
             </div>
         </footer>
     </div>
+ 
+        <script type="module">
+            import {Client} from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+            document.addEventListener('DOMContentLoaded', async function () {
+            // Connect to Gradio client (must be inside async function)
+            const client = await Client.connect("wasmdashai/RunTasking");
 
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
             // DOM Elements
             const textInput = document.getElementById('textInput');
             const charCount = document.getElementById('charCount');
@@ -234,104 +239,105 @@
             const audioPlayer = document.getElementById('audioPlayer');
             const downloadBtn = document.getElementById('downloadBtn');
             const audioInfo = document.getElementById('audioInfo');
+
+            const voiceLabels = {
+                'us': 'American English',
+                'SA1': 'Najdi Arabic Haba v1',
+                'SA2': 'Najdi Arabic Haba v2',
+                'SA3': 'Najdi Arabic AHmmed v1',
             
+            };
+
+            const voiceModels = {
+                'us': 'wasmdashai/vits-en-v1',
+                'SA1': 'wasmdashai/vits-ar-sa-huba-v1',
+                'SA2': 'wasmdashai/vits-ar-sa-huba-v2',
+                'SA3': 'wasmdashai/vits-ar-sa-A',
+
+           
+            };
+
+            const speedLabels = {
+                '0.3': 'Slow',
+            '1.0': 'Normal',
+            '1.2': 'Fast'
+            };
+
             // Update character count
-            textInput.addEventListener('input', function() {
+            textInput.addEventListener('input', function () {
                 const count = textInput.value.length;
-                charCount.textContent = `${count} characters`;
-                
-                if (count > 0) {
-                    clearBtn.classList.remove('invisible');
-                } else {
-                    clearBtn.classList.add('invisible');
-                }
+            charCount.textContent = `${count} characters`;
+            clearBtn.classList.toggle('invisible', count === 0);
             });
-            
+
             // Clear text input
-            clearBtn.addEventListener('click', function() {
+            clearBtn.addEventListener('click', function () {
                 textInput.value = '';
-                charCount.textContent = '0 characters';
-                clearBtn.classList.add('invisible');
+            charCount.textContent = '0 characters';
+            clearBtn.classList.add('invisible');
             });
-            
+
             // Generate voice
-            generateBtn.addEventListener('click', function() {
+            generateBtn.addEventListener('click', async function () {
                 const text = textInput.value.trim();
-                if (!text) {
-                    alert('Please enter some text to convert to speech.');
-                    return;
+            if (!text) {
+                alert('Please enter some text to convert to speech.');
+            return;
                 }
-                
-                const voice = voiceSelect.value;
-                const speed = speedSelect.value;
-                
-                // Show loading state
-                loadingState.classList.remove('hidden');
-                audioPlayerContainer.classList.add('hidden');
-                emptyState.classList.add('hidden');
-                
-                // Simulate API call (in a real app, this would be a fetch or axios call)
-                simulateAPICall(text, voice, speed);
-            });
+
+            const voice = voiceSelect.value;
+            const speed = parseFloat(speedSelect.value);
+
+            loadingState.classList.remove('hidden');
+            audioPlayerContainer.classList.add('hidden');
+            emptyState.classList.add('hidden');
+                console.log("start result:", voice);
+
+            try {
+                    const result = await client.predict("/predict", {
+                text: text,
+                        name_model: voiceModels[voice],
+            speaking_rate: 0.9
+                    });
+                console.log("Prediction result:", result);
+
+            const audioUrl = result.data?.[0]?.url;
+            if (!audioUrl) throw new Error("No audio URL received");
             
+            audioPlayer.src = audioUrl;
+            audioInfo.textContent = `${voiceLabels[voice]} • ${speedLabels[speed.toFixed(1)]} speed`;
+
+            loadingState.classList.add('hidden');
+            audioPlayerContainer.classList.remove('hidden');
+
+                    // Auto play
+                    setTimeout(() => {
+                audioPlayer.play().catch(e => console.warn('Autoplay failed:', e));
+                    }, 300);
+                } catch (err) {
+                console.error("Error during prediction:", err);
+            loadingState.classList.add('hidden');
+            emptyState.classList.remove('hidden');
+                }
+            });
+
             // Download audio
-            downloadBtn.addEventListener('click', function() {
+            downloadBtn.addEventListener('click', function () {
                 if (audioPlayer.src) {
                     const a = document.createElement('a');
-                    a.href = audioPlayer.src;
-                    a.download = `lahja-ai-voice-${new Date().getTime()}.mp3`;
-                    document.body.appendChild(a);
-                    a.click();
-                    document.body.removeChild(a);
+            a.href = audioPlayer.src;
+            a.download = `lahja-ai-voice-${Date.now()}.mp3`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
                 }
             });
-            
-            // Simulate API call (replace with actual API call in production)
-            function simulateAPICall(text, voice, speed) {
-                console.log(`Making API call with text: "${text}", voice: ${voice}, speed: ${speed}`);
-                
-                // Simulate network delay
-                setTimeout(() => {
-                    // This is a simulation - in a real app, you would:
-                    // 1. Make a POST request to your API endpoint
-                    // 2. Handle the response with the audio URL
-                    // 3. Set the audio player source
-                    
-                    // For demo purposes, we'll use a placeholder audio
-                    const voiceLabels = {
-                        'us': 'American English',
-                        'uk': 'wasmdashai/vits-ar-sa-huba-v1',
-                        'au': 'Australian English',
-                        'in': 'Indian English'
-                    };
-                    
-                    const speedLabels = {
-                        '0.8': 'Slow',
-                        '1.0': 'Normal',
-                        '1.2': 'Fast'
-                    };
-                    
-                    // Update audio info
-                    audioInfo.textContent = `${voiceLabels[voice]} • ${speedLabels[speed]} speed`;
-                    
-                    // Set audio source (in a real app, this would come from the API response)
-                    audioPlayer.src = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
-                    
-                    // Hide loading, show audio player
-                    loadingState.classList.add('hidden');
-                    audioPlayerContainer.classList.remove('hidden');
-                    
-                    // Play audio automatically
-                    setTimeout(() => {
-                        audioPlayer.play().catch(e => console.log('Autoplay prevented:', e));
-                    }, 300);
-                    
-                }, 2000);
-            }
-            
-            // Initialize
+
+            // Initialize char count
             textInput.dispatchEvent(new Event('input'));
         });
     </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=wasmdashai/mywap" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+
+    <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=wasmdashai/mywap" style="color: #fff;text-decoration: underline;" target="_blank">Remix</a></p>
+</body>
 </html>