specialized-agents

Sleeping

App Files Files Community

pvanand commited on Sep 9

Commit

f317957

•

1 Parent(s): 508be3f

Update static/indic-text-to-speech.html

Browse files

Files changed (1) hide show

static/indic-text-to-speech.html +143 -8

static/indic-text-to-speech.html CHANGED Viewed

@@ -3,20 +3,71 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Indic Text-to-Speech</title>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@sanskrit-coders/[email protected]/sanscript.min.js"></script>
     <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
-    <!-- Plyr CSS -->
     <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
-    <!-- Plyr JS -->
     <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
 </head>
 <body class="bg-gray-100">
     <div id="app" class="container mx-auto px-4 py-8">
-        <h1 class="text-3xl font-bold text-center mb-8 text-indigo-600">Indic Text-to-Speech</h1>
-        <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6">
             <div class="mb-4">
                 <label for="language" class="block text-sm font-medium text-gray-700 mb-2">Select Language</label>
                 <select id="language" v-model="selectedLanguage" @change="updateExample" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
@@ -56,11 +107,22 @@
     new Vue({
         el: '#app',
         data: {
             languages: [],
             selectedLanguage: '',
             inputText: '',
             audioUrl: null,
-            isLoading: false,
             player: null,
             examples: {
                 hin: "भारत विविधता में एकता का देश है। यहाँ अनेक भाषाएँ, धर्म और संस्कृतियाँ एक साथ फलती-फूलती हैं।",
@@ -93,6 +155,81 @@
             });
         },
         methods: {
             fetchLanguages() {
                 axios.get('https://pvanand-audio-chat-indic.hf.space/languages')
                     .then(response => {
@@ -113,7 +250,6 @@
                 this.isLoading = true;
                 let text = this.inputText.trim() || this.currentExample;
                 let lang = this.selectedLanguage;
                 if (this.selectedLanguage === 'san') {
                     if (typeof Sanscript !== 'undefined') {
                         text = Sanscript.t(text, 'devanagari', 'kannada');
@@ -125,7 +261,6 @@
                         return;
                     }
                 }
                 const url = `https://pvanand-audio-chat-indic.hf.space/tts?text=${encodeURIComponent(text)}&lang=${lang}`;
                 axios.get(url, { responseType: 'blob' })
                     .then(response => {

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Indic Audio Tools</title>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@sanskrit-coders/[email protected]/sanscript.min.js"></script>
     <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
     <script src="https://cdn.plyr.io/3.6.8/plyr.polyfilled.js"></script>
 </head>
 <body class="bg-gray-100">
     <div id="app" class="container mx-auto px-4 py-8">
+        <h1 class="text-3xl font-bold text-center mb-8 text-indigo-600">Indic Audio Tools</h1>
+        <!-- Tabs -->
+        <div class="flex justify-center mb-6">
+            <div class="inline-flex rounded-md shadow-sm" role="group">
+                <button @click="activeTab = 'transcription'"
+                    :class="{ 'bg-indigo-600 text-white': activeTab === 'transcription', 'bg-white text-indigo-600': activeTab !== 'transcription' }"
+                    class="px-4 py-2 text-sm font-medium border border-indigo-600 rounded-l-lg focus:z-10 focus:ring-2 focus:ring-indigo-500 focus:text-indigo-100 transition-colors duration-200">
+                    Audio Transcription
+                </button>
+                <button @click="activeTab = 'tts'"
+                    :class="{ 'bg-indigo-600 text-white': activeTab === 'tts', 'bg-white text-indigo-600': activeTab !== 'tts' }"
+                    class="px-4 py-2 text-sm font-medium border border-indigo-600 rounded-r-lg focus:z-10 focus:ring-2 focus:ring-indigo-500 focus:text-indigo-100 transition-colors duration-200">
+                    Text-to-Speech
+                </button>
+            </div>
+        </div>
+        <!-- Transcription Tab Content -->
+        <div v-if="activeTab === 'transcription'" class="max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6">
+            <!-- Transcription content here -->
+            <div class="mb-4">
+                <label for="audioFile" class="block text-sm font-medium text-gray-700 mb-2">Select Audio File</label>
+                <input type="file" id="audioFile" @change="handleFileChange" accept="audio/*" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+            </div>
+            <div class="mb-4 flex items-center">
+                <button @click="toggleRecording" class="mr-4 px-4 py-2 bg-red-500 text-white rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" :class="{ 'bg-gray-600 hover:bg-gray-700': isRecording }">
+                    <i class="fas" :class="isRecording ? 'fa-stop' : 'fa-microphone'"></i>
+                    {{ isRecording ? 'Stop Recording' : 'Record Audio' }}
+                </button>
+                <span v-if="isRecording" class="text-red-500">Recording... {{ recordingTime }}s</span>
+                <span v-else-if="audioBlob" class="text-green-600">Recording complete ({{ recordingTime }}s)</span>
+            </div>
+            <div class="flex justify-center" v-if="audioFile">
+                <button @click="transcribeAudio" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" :disabled="isLoading">
+                    <span v-if="!isLoading">Transcribe Uploaded Audio</span>
+                    <span v-else class="flex items-center">
+                        <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                        Transcribing...
+                    </span>
+                </button>
+            </div>
+            <div v-if="transcription" class="mt-6 bg-gray-100 p-4 rounded-lg">
+                <h3 class="text-lg font-semibold text-gray-700 mb-2">Transcription Result</h3>
+                <p class="text-gray-600">{{ transcription }}</p>
+            </div>
+        </div>
+        <!-- Text-to-Speech Tab Content -->
+        <div v-if="activeTab === 'tts'" class="max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6">
+            <!-- TTS content here -->
             <div class="mb-4">
                 <label for="language" class="block text-sm font-medium text-gray-700 mb-2">Select Language</label>
                 <select id="language" v-model="selectedLanguage" @change="updateExample" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
     new Vue({
         el: '#app',
         data: {
+            activeTab: 'transcription',
+            // Transcription data
+            audioFile: null,
+            audioBlob: null,
+            transcription: '',
+            isLoading: false,
+            isRecording: false,
+            mediaRecorder: null,
+            audioChunks: [],
+            recordingTime: 0,
+            recordingInterval: null,
+            // TTS data
             languages: [],
             selectedLanguage: '',
             inputText: '',
             audioUrl: null,
             player: null,
             examples: {
                 hin: "भारत विविधता में एकता का देश है। यहाँ अनेक भाषाएँ, धर्म और संस्कृतियाँ एक साथ फलती-फूलती हैं।",
             });
         },
         methods: {
+            // Transcription methods
+            handleFileChange(event) {
+                this.audioFile = event.target.files[0];
+                this.audioBlob = null;
+                this.transcription = '';
+            },
+            async toggleRecording() {
+                if (this.isRecording) {
+                    this.stopRecording();
+                } else {
+                    await this.startRecording();
+                }
+            },
+            async startRecording() {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    this.mediaRecorder = new MediaRecorder(stream);
+                    this.audioChunks = [];
+                    this.mediaRecorder.ondataavailable = (event) => {
+                        this.audioChunks.push(event.data);
+                    };
+                    this.mediaRecorder.onstop = () => {
+                        this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
+                        this.audioFile = null;
+                        this.transcribeAudio(); // Automatically transcribe after recording stops
+                    };
+                    this.mediaRecorder.start();
+                    this.isRecording = true;
+                    this.recordingTime = 0;
+                    this.recordingInterval = setInterval(() => {
+                        this.recordingTime++;
+                    }, 1000);
+                } catch (error) {
+                    console.error('Error accessing microphone:', error);
+                    alert('Unable to access the microphone. Please make sure it\'s connected and you\'ve granted permission.');
+                }
+            },
+            stopRecording() {
+                if (this.mediaRecorder) {
+                    this.mediaRecorder.stop();
+                    this.isRecording = false;
+                    clearInterval(this.recordingInterval);
+                }
+            },
+            transcribeAudio() {
+                if (!this.audioFile && !this.audioBlob) {
+                    alert('Please select an audio file or record audio');
+                    return;
+                }
+                this.isLoading = true;
+                const formData = new FormData();
+                if (this.audioFile) {
+                    formData.append('file', this.audioFile);
+                } else {
+                    formData.append('file', this.audioBlob, 'recorded_audio.wav');
+                }
+                axios.post('https://pvanand-audio-chat-indic.hf.space/transcribe/', formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    }
+                })
+                .then(response => {
+                    this.transcription = response.data.transcript;
+                    this.isLoading = false;
+                })
+                .catch(error => {
+                    console.error('Error transcribing audio:', error);
+                    alert('Error transcribing audio. Please try again.');
+                    this.isLoading = false;
+                });
+            },
+            // TTS methods
             fetchLanguages() {
                 axios.get('https://pvanand-audio-chat-indic.hf.space/languages')
                     .then(response => {
                 this.isLoading = true;
                 let text = this.inputText.trim() || this.currentExample;
                 let lang = this.selectedLanguage;
                 if (this.selectedLanguage === 'san') {
                     if (typeof Sanscript !== 'undefined') {
                         text = Sanscript.t(text, 'devanagari', 'kannada');
                         return;
                     }
                 }
                 const url = `https://pvanand-audio-chat-indic.hf.space/tts?text=${encodeURIComponent(text)}&lang=${lang}`;
                 axios.get(url, { responseType: 'blob' })
                     .then(response => {