Spaces:

Offex
/

11lab_via_api

Running

App Files Files Community

Offex commited on Feb 18

Commit

5169bfd

verified ·

1 Parent(s): ef89a6f

Update index.html

Browse files

Files changed (1) hide show

index.html +97 -19

index.html CHANGED Viewed

@@ -8,19 +8,24 @@
         body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background-color: #f4f4f9; }
         .container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
         h2 { text-align: center; color: #333; }
-        label { font-weight: bold; display: block; margin-top: 10px; }
         input, textarea, select { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
-        button { width: 100%; background-color: #28a745; color: white; padding: 12px; border: none; border-radius: 5px; margin-top: 15px; cursor: pointer; font-size: 16px; font-weight: bold; transition: 0.3s; }
-        button:disabled { background-color: #6c757d; cursor: not-allowed; }
-        button:hover:not(:disabled) { background-color: #218838; }
         #audioContainer { margin-top: 20px; text-align: center; display: none; padding: 15px; background: #e9ecef; border-radius: 8px; }
-        /* Status Box Styling */
         .status-box { text-align: center; margin-top: 15px; padding: 10px; border-radius: 5px; font-weight: bold; display: none; transition: 0.3s; }
         .status-loading { background-color: #fff3cd; color: #856404; display: block; }
         .status-success { background-color: #d4edda; color: #155724; display: block; }
         .status-error { background-color: #f8d7da; color: #721c24; display: block; }
     </style>
 </head>
 <body>
@@ -30,9 +35,18 @@
     <label for="apiKey">ElevenLabs API Key:</label>
     <input type="password" id="apiKey" placeholder="Apni API key yahan daalein..." required>
-    <label for="voiceId">Voice ID:</label>
-    <input type="text" id="voiceId" value="EXAVITQu4vr4xnSDxMaL" placeholder="Voice ID (e.g., Bella)">
     <label for="modelSelect">Select Model:</label>
     <select id="modelSelect">
@@ -44,7 +58,7 @@
     <label for="text">Text to Speech:</label>
     <textarea id="text" rows="5" placeholder="Jo bulwana hai yahan type karein..." required></textarea>
-    <button onclick="generateAudio()" id="generateBtn">Generate Audio</button>
     <div id="statusBox" class="status-box"></div>
@@ -56,27 +70,93 @@
 </div>
 <script>
     async function generateAudio() {
         const apiKey = document.getElementById('apiKey').value.trim();
-        const voiceId = document.getElementById('voiceId').value.trim();
         const modelId = document.getElementById('modelSelect').value;
         const text = document.getElementById('text').value.trim();
-        const statusBox = document.getElementById('statusBox');
         const audioContainer = document.getElementById('audioContainer');
         const audioPlayer = document.getElementById('audioPlayer');
         const downloadLink = document.getElementById('downloadLink');
         const generateBtn = document.getElementById('generateBtn');
-        // Validation
         if (!apiKey || !text || !voiceId) {
-            showStatus('Bhai, pehle API Key, Voice ID aur Text dalo!', 'error');
             return;
         }
-        // Reset UI for new request
         audioContainer.style.display = "none";
-        showStatus('Audio generate ho raha hai, thoda wait karo... ⏳', 'loading');
         generateBtn.disabled = true;
         generateBtn.innerText = "Processing...";
@@ -100,18 +180,17 @@
             if (!response.ok) {
                 const errData = await response.json();
-                throw new Error(errData.detail.message || "API request fail ho gayi!");
             }
             const blob = await response.blob();
             const audioUrl = URL.createObjectURL(blob);
-            // Set audio URL to player and download link
             audioPlayer.src = audioUrl;
             downloadLink.href = audioUrl;
             audioContainer.style.display = "block";
-            showStatus('Audio Ready! Ab play karo ya download karo 🎉', 'success');
         } catch (error) {
             showStatus('Error: ' + error.message, 'error');
@@ -121,11 +200,10 @@
         }
     }
-    // Status dikhane ka function
     function showStatus(message, type) {
         const statusBox = document.getElementById('statusBox');
         statusBox.innerText = message;
-        statusBox.className = 'status-box'; // Purani classes hatane ke liye
         if(type === 'loading') statusBox.classList.add('status-loading');
         if(type === 'success') statusBox.classList.add('status-success');

         body { font-family: Arial, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background-color: #f4f4f9; }
         .container { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
         h2 { text-align: center; color: #333; }
+        label { font-weight: bold; display: block; margin-top: 15px; }
         input, textarea, select { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; }
+        .btn { width: 100%; color: white; padding: 12px; border: none; border-radius: 5px; margin-top: 15px; cursor: pointer; font-size: 16px; font-weight: bold; transition: 0.3s; }
+        .btn-blue { background-color: #007bff; }
+        .btn-blue:hover { background-color: #0056b3; }
+        .btn-green { background-color: #28a745; }
+        .btn-green:hover:not(:disabled) { background-color: #218838; }
+        .btn:disabled { background-color: #6c757d; cursor: not-allowed; }
         #audioContainer { margin-top: 20px; text-align: center; display: none; padding: 15px; background: #e9ecef; border-radius: 8px; }
         .status-box { text-align: center; margin-top: 15px; padding: 10px; border-radius: 5px; font-weight: bold; display: none; transition: 0.3s; }
         .status-loading { background-color: #fff3cd; color: #856404; display: block; }
         .status-success { background-color: #d4edda; color: #155724; display: block; }
         .status-error { background-color: #f8d7da; color: #721c24; display: block; }
+        #customVoiceDiv { display: none; margin-top: 10px; padding: 10px; background: #fff8e1; border-left: 4px solid #ffc107; border-radius: 4px; }
     </style>
 </head>
 <body>
     <label for="apiKey">ElevenLabs API Key:</label>
     <input type="password" id="apiKey" placeholder="Apni API key yahan daalein..." required>
+    <button class="btn btn-blue" onclick="connectAPI()" id="connectBtn">Connect API & Load Voices</button>
+    <label for="voiceDropdown">Select Voice:</label>
+    <select id="voiceDropdown" onchange="toggleCustomVoice()">
+        <option value="">-- Pehle API Connect Karein --</option>
+        <option value="custom">✏️ Enter Custom Voice ID</option>
+    </select>
+    <div id="customVoiceDiv">
+        <label for="customVoiceId">Custom Voice ID:</label>
+        <input type="text" id="customVoiceId" placeholder="Voice ID paste karein (e.g., EXAVITQu4vr4xnSDxMaL)">
+    </div>
     <label for="modelSelect">Select Model:</label>
     <select id="modelSelect">
     <label for="text">Text to Speech:</label>
     <textarea id="text" rows="5" placeholder="Jo bulwana hai yahan type karein..." required></textarea>
+    <button class="btn btn-green" onclick="generateAudio()" id="generateBtn">Generate Audio</button>
     <div id="statusBox" class="status-box"></div>
 </div>
 <script>
+    // API Connect karke Voices load karna
+    async function connectAPI() {
+        const apiKey = document.getElementById('apiKey').value.trim();
+        const connectBtn = document.getElementById('connectBtn');
+        const voiceDropdown = document.getElementById('voiceDropdown');
+        if (!apiKey) {
+            showStatus('कृपया पहले API Key डालें!', 'error');
+            return;
+        }
+        showStatus('Voices लोड हो रही हैं... ⏳', 'loading');
+        connectBtn.disabled = true;
+        try {
+            const response = await fetch('https://api.elevenlabs.io/v1/voices', {
+                method: 'GET',
+                headers: { 'xi-api-key': apiKey }
+            });
+            if (!response.ok) {
+                throw new Error("API Key गलत है या नेटवर्क समस्या है!");
+            }
+            const data = await response.json();
+            // Dropdown clear karke naye options daalna
+            voiceDropdown.innerHTML = '<option value="custom">✏️ Enter Custom Voice ID</option>';
+            data.voices.forEach(voice => {
+                const option = document.createElement('option');
+                option.value = voice.voice_id;
+                option.textContent = voice.name;
+                voiceDropdown.appendChild(option);
+            });
+            // Default pehli voice select karna agar available ho
+            if (data.voices.length > 0) {
+                voiceDropdown.value = data.voices[0].voice_id;
+            }
+            toggleCustomVoice(); // Custom box ko hide karne ke liye
+            showStatus('API Connected! ' + data.voices.length + ' Voices लोड हो गईं ✅', 'success');
+        } catch (error) {
+            showStatus('Error: ' + error.message, 'error');
+        } finally {
+            connectBtn.disabled = false;
+        }
+    }
+    // Custom Voice ID box ko dikhana ya chhupana
+    function toggleCustomVoice() {
+        const dropdown = document.getElementById('voiceDropdown');
+        const customDiv = document.getElementById('customVoiceDiv');
+        if (dropdown.value === 'custom') {
+            customDiv.style.display = 'block';
+        } else {
+            customDiv.style.display = 'none';
+        }
+    }
+    // Audio Generate karna
     async function generateAudio() {
         const apiKey = document.getElementById('apiKey').value.trim();
         const modelId = document.getElementById('modelSelect').value;
         const text = document.getElementById('text').value.trim();
+        const dropdown = document.getElementById('voiceDropdown');
+        let voiceId = dropdown.value;
+        if (voiceId === 'custom') {
+            voiceId = document.getElementById('customVoiceId').value.trim();
+        }
         const audioContainer = document.getElementById('audioContainer');
         const audioPlayer = document.getElementById('audioPlayer');
         const downloadLink = document.getElementById('downloadLink');
         const generateBtn = document.getElementById('generateBtn');
         if (!apiKey || !text || !voiceId) {
+            showStatus('कृपया API Key, Voice ID और Text भरें!', 'error');
             return;
         }
         audioContainer.style.display = "none";
+        showStatus('Audio जनरेट हो रहा है, कृपया प्रतीक्षा करें... ⏳', 'loading');
         generateBtn.disabled = true;
         generateBtn.innerText = "Processing...";
             if (!response.ok) {
                 const errData = await response.json();
+                throw new Error(errData.detail.message || "API request फेल हो गई!");
             }
             const blob = await response.blob();
             const audioUrl = URL.createObjectURL(blob);
             audioPlayer.src = audioUrl;
             downloadLink.href = audioUrl;
             audioContainer.style.display = "block";
+            showStatus('Audio तैयार है! 🎉', 'success');
         } catch (error) {
             showStatus('Error: ' + error.message, 'error');
         }
     }
     function showStatus(message, type) {
         const statusBox = document.getElementById('statusBox');
         statusBox.innerText = message;
+        statusBox.className = 'status-box';
         if(type === 'loading') statusBox.classList.add('status-loading');
         if(type === 'success') statusBox.classList.add('status-success');