Spaces:

kshvchvr
/

indic-tts

Running

App Files Files Community

kshvchvr commited on Jul 13

Commit

0a34cf8

1 Parent(s): d8cfcc3

Add Indic TTS frontend

Browse files

Files changed (2) hide show

README.md +11 -6
index.html +236 -18

README.md CHANGED Viewed

@@ -1,10 +1,15 @@
 ---
-title: Indic Tts
-emoji: 😻
-colorFrom: yellow
-colorTo: purple
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Indic TTS Swadesh
+emoji: 🇮🇳
+colorFrom: blue
+colorTo: green
 sdk: static
+pinned: true
+license: apache-2.0
 ---
+# Indic TTS — Swadesh
+Free Indian Language Text-to-Speech — 21 languages, native speakers.
+Powered by [AI4Bharat Indic Parler-TTS](https://huggingface.co/spaces/ai4bharat/indic-parler-tts).

index.html CHANGED Viewed

@@ -1,19 +1,237 @@
-<!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>Indic TTS — Swadesh</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .container {
+            background: white;
+            border-radius: 16px;
+            padding: 32px;
+            max-width: 600px;
+            width: 100%;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 8px;
+            color: #333;
+            font-size: 1.6em;
+        }
+        .subtitle {
+            text-align: center;
+            color: #888;
+            margin-bottom: 24px;
+            font-size: 0.9em;
+        }
+        label {
+            display: block;
+            margin-bottom: 6px;
+            font-weight: 600;
+            color: #555;
+            font-size: 0.9em;
+        }
+        textarea {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            resize: vertical;
+            min-height: 100px;
+            font-family: inherit;
+            transition: border-color 0.2s;
+        }
+        textarea:focus { outline: none; border-color: #667eea; }
+        select {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 16px;
+            background: white;
+            cursor: pointer;
+            margin-bottom: 20px;
+        }
+        select:focus { outline: none; border-color: #667eea; }
+        .btn {
+            width: 100%;
+            padding: 14px;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: opacity 0.2s;
+        }
+        .btn:hover { opacity: 0.9; }
+        .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+        .status {
+            margin-top: 16px;
+            padding: 12px;
+            border-radius: 8px;
+            text-align: center;
+            font-size: 0.9em;
+            display: none;
+        }
+        .status.loading { display: block; background: #fff3cd; color: #856404; }
+        .status.error { display: block; background: #f8d7da; color: #721c24; }
+        .status.success { display: block; background: #d4edda; color: #155724; }
+        audio {
+            width: 100%;
+            margin-top: 16px;
+            display: none;
+        }
+        .footer {
+            text-align: center;
+            margin-top: 20px;
+            color: #aaa;
+            font-size: 0.8em;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Indic TTS — Swadesh</h1>
+        <p class="subtitle">21 Indian Languages — AI4Bharat Model</p>
+        <label for="text">Text</label>
+        <textarea id="text" placeholder="Type text here... / yahan text likhein..."></textarea>
+        <label for="lang">Language</label>
+        <select id="lang">
+            <option value="hi">Hindi</option>
+            <option value="bn">Bengali</option>
+            <option value="ta">Tamil</option>
+            <option value="te">Telugu</option>
+            <option value="mr">Marathi</option>
+            <option value="kn">Kannada</option>
+            <option value="ml">Malayalam</option>
+            <option value="gu">Gujarati</option>
+            <option value="or">Odia</option>
+            <option value="ur">Urdu</option>
+            <option value="en">English</option>
+            <option value="as">Assamese</option>
+            <option value="ne">Nepali</option>
+            <option value="sa">Sanskrit</option>
+            <option value="mai">Maithili</option>
+            <option value="brx">Bodo</option>
+            <option value="doi">Dogri</option>
+            <option value="kok">Konkani</option>
+            <option value="mni">Manipuri</option>
+            <option value="sat">Santali</option>
+            <option value="sd">Sindhi</option>
+        </select>
+        <button class="btn" id="btn" onclick="generate()">Generate Speech</button>
+        <div class="status" id="status"></div>
+        <audio id="audio" controls></audio>
+        <p class="footer">Powered by <a href="https://huggingface.co/spaces/ai4bharat/indic-parler-tts" target="_blank">AI4Bharat Indic Parler-TTS</a></p>
+    </div>
+    <script type="module">
+        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+        const LANG_NAMES = {
+            as:"Assamese", bn:"Bengali", brx:"Bodo", doi:"Dogri",
+            en:"English", gu:"Gujarati", hi:"Hindi", kn:"Kannada",
+            kok:"Konkani", mai:"Maithili", ml:"Malayalam", mni:"Manipuri",
+            mr:"Marathi", ne:"Nepali", or:"Odia", sa:"Sanskrit",
+            sat:"Santali", sd:"Sindhi", ta:"Tamil", te:"Telugu", ur:"Urdu"
+        };
+        const SPEAKER_NAMES = {
+            as:"Sita", bn:"Aditi", brx:"Maya", doi:"Karan",
+            en:"Mary", gu:"Neha", hi:"Divya", kn:"Anu",
+            kok:"Sita", mai:"Sita", ml:"Anjali", mni:"Laishram",
+            mr:"Sunita", ne:"Amrita", or:"Debjani", sa:"Aryan",
+            sat:"Sita", sd:"Sita", ta:"Jaya", te:"Lalitha", ur:"Sita"
+        };
+        let client = null;
+        async function getClient() {
+            if (!client) {
+                const status = document.getElementById("status");
+                status.className = "status loading";
+                status.textContent = "Connecting to AI4Bharat server...";
+                status.style.display = "block";
+                client = await Client.connect("ai4bharat/indic-parler-tts");
+                status.style.display = "none";
+            }
+            return client;
+        }
+        window.generate = async function() {
+            const text = document.getElementById("text").value.trim();
+            const lang = document.getElementById("lang").value;
+            const btn = document.getElementById("btn");
+            const status = document.getElementById("status");
+            const audio = document.getElementById("audio");
+            if (!text) {
+                status.className = "status error";
+                status.textContent = "Please enter some text.";
+                status.style.display = "block";
+                return;
+            }
+            btn.disabled = true;
+            btn.textContent = "Generating...";
+            audio.style.display = "none";
+            status.className = "status loading";
+            status.textContent = "Loading model & generating speech... This may take 30-60 seconds on first use.";
+            status.style.display = "block";
+            try {
+                const c = await getClient();
+                const speaker = SPEAKER_NAMES[lang] || "Divya";
+                const langName = LANG_NAMES[lang] || "Hindi";
+                const description = speaker + " speaks " + langName + " fluently with a native accent. Her voice is clear, warm, and expressive, with a moderate pace and pitch, using a friendly storytelling tone suited for children. The recording is of very high quality, with the speaker's voice sounding close up and easy to understand, in a quiet room with no background noise.";
+                const result = await c.predict("/generate_tts", [text, description]);
+                if (result.data && result.data[0]) {
+                    const audioData = result.data[0];
+                    let audioUrl;
+                    if (typeof audioData === "object" && audioData.url) {
+                        audioUrl = audioData.url;
+                    } else if (typeof audioData === "string") {
+                        audioUrl = audioData;
+                    } else {
+                        audioUrl = URL.createObjectURL(new Blob([new Uint8Array(audioData)], { type: "audio/wav" }));
+                    }
+                    audio.src = audioUrl;
+                    audio.style.display = "block";
+                    audio.play();
+                    status.className = "status success";
+                    status.textContent = "Audio generated successfully!";
+                } else {
+                    throw new Error("No audio data received");
+                }
+            } catch (err) {
+                status.className = "status error";
+                status.textContent = "Error: " + err.message + ". The AI4Bharat server may be temporarily down. Try again later.";
+                console.error(err);
+            } finally {
+                btn.disabled = false;
+                btn.textContent = "Generate Speech";
+            }
+        };
+    </script>
+</body>
 </html>