Spaces:

Offex
/

11lab_via_api

Running

App Files Files Community

Offex commited on Feb 18

Commit

ef89a6f

verified ·

1 Parent(s): c34d857

Update index.html

Browse files

Files changed (1) hide show

index.html +136 -18

index.html CHANGED Viewed

@@ -1,19 +1,137 @@
-<!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>11Labs Safe TTS Tool</title>
+    <style>
+        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>
+<div class="container">
+    <h2>11Labs Safe TTS (No IP Block)</h2>
+    <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">
+        <option value="eleven_multilingual_v2">Multilingual v2 (Best for most)</option>
+        <option value="eleven_multilingual_v1">Multilingual v1</option>
+        <option value="eleven_monolingual_v1">Monolingual v1 (English only)</option>
+    </select>
+    <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>
+    <div id="audioContainer">
+        <audio id="audioPlayer" controls style="width: 100%;"></audio>
+        <br><br>
+        <a id="downloadLink" download="generated_audio.mp3" style="text-decoration: none; background: #007bff; color: white; padding: 10px 20px; border-radius: 5px; display: inline-block;">Download MP3</a>
+    </div>
+</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...";
+        try {
+            const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
+                method: 'POST',
+                headers: {
+                    'Accept': 'audio/mpeg',
+                    'xi-api-key': apiKey,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    text: text,
+                    model_id: modelId,
+                    voice_settings: {
+                        stability: 0.5,
+                        similarity_boost: 0.5
+                    }
+                })
+            });
+            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');
+        } finally {
+            generateBtn.disabled = false;
+            generateBtn.innerText = "Generate Audio";
+        }
+    }
+    // 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');
+        if(type === 'error') statusBox.classList.add('status-error');
+    }
+</script>
+</body>
 </html>