| <!DOCTYPE html> |
| <html> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> |
|
|
| |
| <script defer src="https://use.fontawesome.com/6da64fcf5b.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> |
| |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> |
| <link rel="stylesheet" href="styles.css"> |
| </head> |
|
|
| <body> |
| <div id="app"> |
|
|
| <nav class="navbar is-orange"> |
| </nav> |
|
|
| <section class="section"> |
| <div class="container"> |
| <h1 class="title is-1"> |
| <span class="orange-color">AI4Bharat</span> Text to Speech <span class="tag is-warning">Beta</span> |
| </h1> |
| <p class="subtitle"> |
| <strong>TTS</strong> for Indian Languages! |
| </p> |
| </div> |
| </section> |
|
|
| <section class="section"> |
| <div class="container"> |
|
|
| <div v-if="process"> |
| <progress class="progress is-small is-warning" max="100">15%</progress> |
| </div> |
|
|
| <br> |
|
|
| <h1 class="title is-4">Input</h1> |
|
|
| <div class="select is-link"> |
| <select id="option-language"> |
| <option value="as">Assamese - অসমীয়া</option> |
| <option value="bn">Bangla - বাংলা</option> |
| <option value="brx">Boro - बड़ो</option> |
| <option value="gu">Gujarati - ગુજરાતી</option> |
| <option value="hi">Hindi - हिंदी</option> |
| <option value="kn">Kannada - ಕನ್ನಡ</option> |
| <option value="ml">Malayalam - മലയാളം</option> |
| <option value="mni">Manipuri - মিতৈলোন</option> |
| <option value="mr">Marathi - मराठी</option> |
| <option value="or">Oriya - ଓଡ଼ିଆ</option> |
| <option value="raj">Rajasthani - राजस्थानी</option> |
| <option value="ta">Tamil - தமிழ்</option> |
| <option value="te">Telugu - తెలుగు</option> |
| </select> |
| </div> |
|
|
| <div class="select is-link"> |
| <select id="option-speaker"> |
| <option value="female">Female</option> |
| <option value="male">Male</option> |
| </select> |
| </div> |
|
|
| <br><br> |
|
|
| <textarea id="transcript" class="textarea is-link is-large" |
| placeholder="">{{ transcription }}</textarea> |
|
|
| <br><br> |
|
|
| <div class="file is-centered is-medium has-name is-boxed" id="text_submit"> |
| <label class="file-label" style="align-items: center"> |
| <input class="file-input" type="submit" v-on:click="handleText"> |
| <span class="file-cta is-orange"> |
| <span class="file-label"> |
| Convert |
| </span> |
| </span> |
| </label> |
| </div> |
|
|
| <br><br> |
|
|
| <h1 class="title is-4">Output</h1> |
|
|
| <audio id="audio-output" controls style="display: none"> |
| <source src="" type="audio/wav"> |
| Your browser does not support the audio element. |
| </audio> |
|
|
| </div> |
| </section> |
|
|
|
|
| </div> |
| </body> |
|
|
|
|
| <script src="node_modules/socket.io/client-dist/socket.io.js"></script> |
| <script src="main.js"></script> |
| <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script> |
|
|
| <script> |
| var app = new Vue({ |
| el: '#app', |
| data: { |
| message: 'Hello Vue!', |
| file_message: 'No file uploaded', |
| picked: 'Testing', |
| transcription: '', |
| statusClass: 'is-primary', |
| recordStatusClass: 'is-link', |
| process: false, |
| record: 'Record', |
| isRecording: false, |
| rec: null, |
| imageSource: 'https://gist.githubusercontent.com/bietkul/20f702276adff150f3cc4502254665d2/raw/02a339636df69878b48608468f4f25333d3ef8c9/mic.gif', |
| reader: new FileReader(), |
| type: 'text', |
| number_mode: false |
| }, |
| methods: { |
| |
| |
| |
| |
| |
| |
| |
| handleText: function () { |
| this.statusClass = 'is-warning'; |
| this.transcription = 'Processing..'; |
| this.process = true; |
| var transcript = document.getElementById("transcript"); |
| var language = document.getElementById("option-language").value |
| var speaker = document.getElementById("option-speaker").value |
| |
| |
| |
| |
| |
| |
| this.request = { |
| "input": [ |
| { |
| "source": transcript.value, |
| } |
| ], |
| "config": { |
| "gender": speaker, |
| "language": { |
| "sourceLanguage": language |
| } |
| } |
| } |
| |
| |
| |
| |
| socket_tts.emit('infer', this.request, (response) => { |
| if (response["audio"]) { |
| this.statusClass = 'is-success' |
| this.statusText = 'Upload text' |
| this.process = false |
| let arrayString = 'data:audio/wav;base64,' + response["audio"][0]["audioContent"] |
| console.log(arrayString) |
| |
| |
| |
| |
| audioElement = document.getElementById("audio-output") |
| audioElement.src = arrayString; |
| audioElement.style.display = 'block' |
| } |
| else { |
| |
| transcript.value = 'Error' |
| this.statusClass = 'is-danger' |
| this.statusText = 'Upload text' |
| this.transcription = 'Please check console.' |
| this.process = false |
| } |
| }) |
| }, |
| |
| } |
| }) |
| </script> |
|
|
|
|
| </html> |
