sumanthd/IndicTrans-MultilingualTranslation
6
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta http-equiv="X-UA-Compatible" content="IE=edge">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>AI4B Translation API</title>8 <!-- production version, optimized for size and speed -->9 <script defer src="https://use.fontawesome.com/6da64fcf5b.js"></script>10 <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>11 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>12 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">13 14</head>15<body>16 <section class="section container has-text-centered" id="app">17 <figure class="image is-64x64 is-centered">18 <img src="logo.png">19 </figure>20 <p class="title is-1" style="color: #E78A28">21 IndicTrans API22 </p>23 <p class="subtitle">24 Real-time Indian Language Text Translation with IndicTrans! 25 </p>26 27 <hr>28 29 <div class=""> 30 <!-- <p>31 Select Model:32 </p> -->33 <div class="buttons has-addons is-centered">34 <button class="button" v-on:click="load_indic_en" v-bind:class="indicEnClass">Indic → English</button>35 <button class="button" v-on:click="load_en_indic" v-bind:class="enIndicClass">English → Indic</button>36 <button class="button" v-on:click="load_m2m" v-bind:class="m2mClass">Indic → Indic</button>37 </div>38 39 <div class="field is-horizontal is-grouped is-grouped-centered">40 <p class="control">41 <span class="tag is-rounded">From</span>42 <div class="select is-rounded">43 <select v-model="source_language">44 <option v-for="option in source_options" v-bind:value="option">45 {{ option }}46 </option>47 </select>48 </div>49 </p>50 <p class="control">51 52 <span class="tag is-rounded">To</span>53 <div class="select is-rounded">54 <select class="select is-rounded" v-model="target_language">55 <option v-for="option in target_options" v-bind:value="option">56 {{ option }}57 </option>58 </select>59 </div>60 </p>61 </div>62 63 <br><br>64 <div class="field is-horizontal is-grouped">65 <p class="control is-expanded">66 <textarea v-model="source_text" class="textarea is-link is-medium" placeholder="Enter Source Text"></textarea>67 </p>68 <p class="control is-expanded">69 <textarea v-model="target_text" class="textarea is-link is-medium" placeholder="Target Text will appear here" readonly></textarea>70 </p>71 </div>72 73 <div class="field is-grouped is-grouped-centered">74 <div class="control">75 <button class="button is-link" v-on:click="translate">Translate</button>76 </div>77 <div class="control">78 <button class="button is-link is-light" v-on:click="clear">Clear</button>79 </div>80 </div>81 82 <div v-if="process">83 <progress class="progress is-small is-warning" max="100">15%</progress>84 </div>85 86 <br><br>87 88 <div>{{ transcription_time }}</div>89 90 91 </div>92 93 </section>94</body>95 96<!-- inserting these scripts at the end to be able to use all the elements in the DOM --> 97<script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>98 99<script>100 var app = new Vue({101 el: '#app',102 data: {103 message: 'Hello Vue!',104 source_language: 'English',105 target_language: 'Hindi',106 source_options: ['English'],107 model_type: 'en-indic',108 target_options: ['Assamese', 'Hindi', 'Marathi', 'Tamil', 'Bengali', 'Kannada', 'Oriya', 'Telugu', 'Gujarati', 'Malayalam', 'Punjabi'],109 indicEnClass: {110 'is-link': false,111 'is-selected': false112 },113 enIndicClass: {114 'is-link': true,115 'is-selected': true116 },117 m2mClass: {118 'is-link': false,119 'is-selected': false120 },121 source_text: '',122 target_text: '',123 process: false,124 transcription_time: '',125 },126 methods: {127 load_indic_en: function(){128 this.indicEnClass['is-link']=true;129 this.indicEnClass['is-selected']=true;130 this.enIndicClass['is-link']=false;131 this.enIndicClass['is-selected']=false;132 this.m2mClass['is-link']=false;133 this.m2mClass['is-selected']=false;134 this.source_options=['Assamese', 'Hindi', 'Marathi', 'Tamil', 'Bengali', 'Kannada', 'Oriya', 'Telugu', 'Gujarati', 'Malayalam', 'Punjabi'];135 this.target_options=['English'];136 this.source_language='Hindi';137 this.target_language='English';138 this.model_type='indic-en';139 this.target_text='';140 },141 load_en_indic: function(){142 this.indicEnClass['is-link']=false;143 this.indicEnClass['is-selected']=false;144 this.enIndicClass['is-link']=true;145 this.enIndicClass['is-selected']=true;146 this.m2mClass['is-link']=false;147 this.m2mClass['is-selected']=false;148 this.source_options=['English'];149 this.target_options=['Assamese', 'Hindi', 'Marathi', 'Tamil', 'Bengali', 'Kannada', 'Oriya', 'Telugu', 'Gujarati', 'Malayalam', 'Punjabi'];150 this.source_language='English';151 this.target_language='Hindi';152 this.model_type='en-indic';153 this.target_text='';154 },155 load_m2m: function(){156 this.indicEnClass['is-link']=false;157 this.indicEnClass['is-selected']=false;158 this.enIndicClass['is-link']=false;159 this.enIndicClass['is-selected']=false;160 this.m2mClass['is-link']=true;161 this.m2mClass['is-selected']=true;162 this.source_options=['Assamese', 'Hindi', 'Marathi', 'Tamil', 'Bengali', 'Kannada', 'Oriya', 'Telugu', 'Gujarati', 'Malayalam', 'Punjabi'];163 this.target_options=['Assamese', 'Hindi', 'Marathi', 'Tamil', 'Bengali', 'Kannada', 'Oriya', 'Telugu', 'Gujarati', 'Malayalam', 'Punjabi'];164 this.source_language='Hindi';165 this.target_language='Tamil';166 this.model_type='m2m';167 this.target_text='';168 },169 translate: function(){170 let formData = new FormData();171 this.process=true;172 formData.append('model_type', this.model_type);173 formData.append('source_language', this.source_language);174 formData.append('target_language', this.target_language);175 formData.append('text', this.source_text);176 console.log(this.source_text);177 axios.post('http://164.52.218.27:5050/translate',178 formData, {179 headers: {180 'Content-Type': 'multipart/form-data'181 }182 })183 .then(response => {184 console.log(response.data.text)185 this.target_text=response.data.text186 this.transcription_time = 'The inference took '+response.data.duration+' seconds.'187 this.process=false188 })189 .catch(error => {190 console.log(error);191 this.target_text='Please check console'192 this.process=false193 });194 },195 clear: function(){196 this.source_text='';197 this.target_text='';198 }199 }200 })201</script>202 203</html>