Create static/JS/script.js

static/JS/script.js

@@ -0,0 +1,495 @@
+var sourceLangModal = document.getElementById('sourceLangModal');
+var targetLangModal = document.getElementById('targetLangModal');
+var selectedSourceLangSpan = document.getElementById('selected_source_language');
+var selectedTargetLangSpan = document.getElementById('selected_target_language');
+var sourceLangInput = document.getElementById('source_lang');
+var targetLangInput = document.getElementById('target_lang');
+var textInput = document.getElementById('text');
+var translatedText = document.getElementById('translated_text');
+var speakButton = document.getElementById('speak_button');
+var copyElements = document.querySelectorAll('.copy');
+var copyButton = document.getElementById('copyButton');
+var successButton = document.getElementById('successButton');
+
+
+
+
+
+function searchLanguages(inputId, modalId) {
+        var searchInput = document.getElementById(inputId);
+        var searchKeyword = searchInput.value.toLowerCase();
+        
+        var languageList = document.getElementById(modalId).getElementsByTagName('li');
+        
+        for (var i = 0; i < languageList.length; i++) {
+            var language = languageList[i].textContent.toLowerCase();
+            if (language.includes(searchKeyword)) {
+                languageList[i].style.display = 'block';
+            } else {
+                languageList[i].style.display = 'none';
+            }
+        }
+    }
+
+
+
+function copy() {
+  var copiedValues = [];
+
+  for (var i = 0; i < copyElements.length; i++) {
+    var value = copyElements[i].value;
+    copiedValues.push(value);
+  }
+
+  var copiedString = copiedValues.join('\n');
+
+  // Salin nilai yang disalin ke clipboard hanya jika tersedia izin
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(copiedString)
+      .then(function() {
+        console.log('Nilai input telah disalin ke clipboard.');
+        // Sembunyikan tombol "Copy" dan tampilkan tombol "Success"
+        copyButton.style.display = 'none';
+        successButton.style.display = 'block';
+        // Kembalikan tampilan tombol seperti semula setelah beberapa waktu (misalnya 2 detik)
+        setTimeout(function() {
+          copyButton.style.display = 'block';
+          successButton.style.display = 'none';
+        }, 2000);
+      })
+      .catch(function(error) {
+        console.error('Gagal menyalin nilai input:', error);
+      });
+  } else {
+    console.error('Penyalinan ke clipboard tidak didukung pada browser ini.');
+  }
+}
+
+copyButton.addEventListener('click', copy);
+
+
+function swapLanguages() {
+    var sourceLang = sourceLangInput.value;
+    var targetLang = targetLangInput.value;
+
+    // Menukar nilai bahasa sumber dan bahasa target
+    sourceLangInput.value = targetLang;
+    targetLangInput.value = sourceLang;
+
+    // Menukar teks di dalam textarea
+    var sourceText = document.getElementById('text').value;
+    var targetText = document.getElementById('translated_text').value;
+    document.getElementById('text').value = targetText;
+    document.getElementById('translated_text').value = sourceText;
+
+    // Menampilkan nama bahasa di dalam elemen span
+    selectedSourceLangSpan.textContent = getLanguageName(targetLang);
+    selectedTargetLangSpan.textContent = getLanguageName(sourceLang);
+  }
+
+
+function openLanguageModal(type) {
+  if (type === 'source') {
+    targetLangModal.style.display = 'none';
+    sourceLangModal.style.display = 'block';
+  } else if (type === 'target') {
+    sourceLangModal.style.display = 'none';
+    targetLangModal.style.display = 'block';
+  }
+}
+
+function selectLanguage(language, type) {
+  if (type === 'source') {
+    sourceLangInput.value = language;
+    selectedSourceLangSpan.textContent = getLanguageName(language);
+    sourceLangModal.style.display = 'none';
+  } else if (type === 'target') {
+    targetLangInput.value = language;
+    selectedTargetLangSpan.textContent = getLanguageName(language) || 'English';    
+    targetLangModal.style.display = 'none';
+  }
+}
+
+function getLanguageName(language) {
+
+   switch (language) {
+      case 'en':
+         return 'English';
+      case 'id':
+         return 'Indonesia';
+      case 'jv':
+         return 'Jawa';
+      case 'su':
+         return 'Sunda';
+      case 'ja':
+         return 'Jepang';
+      case 'is':
+         return 'Islan';
+      case 'it':
+         return 'Italia';
+      case 'de':
+         return 'Jerman';
+      case 'kn':
+         return 'Kannada';
+      case 'ko':
+         return 'Korea';
+      case 'co':
+         return 'Korsika';
+      case 'ht':
+         return 'Kreol Haiti';
+      case 'kri':
+         return 'Krio';
+      case 'hr':
+         return 'Kroat';
+      case 'ku':
+         return 'Kurdi (Kurmanji)';
+      case 'ckb':
+         return 'Kurdi (Sorani)';
+      case 'lo':
+         return 'Laos';
+      case 'la':
+         return 'Latin';
+      case 'lv':
+         return 'Latvia';
+      case 'ln':
+         return 'Lingala';
+      case 'lt':
+         return 'Lituania';
+      case 'lg':
+         return 'Luganda';
+      case 'lb':
+         return 'Luksemburg';
+      case 'hu':
+         return 'Magyar';
+      case 'mai':
+         return 'Maithili';
+      case 'mk':
+         return 'Makedonia';
+      case 'mg':
+         return 'Malagasi';
+      case 'ml':
+         return 'Malayalam';
+      case 'mt':
+         return 'Malta';
+      case 'mi':
+         return 'Maori';
+      case 'mr':
+         return 'Marathi';
+      case 'mni':
+         return 'Meiteilon (Manipuri)';
+      case 'ms':
+         return 'Melayu';
+      case 'lus':
+         return 'Mizo';
+      case 'mn':
+         return 'Mongol';
+      case 'ne':
+         return 'Nepal';
+      case 'no':
+         return 'Norsk';
+      case 'or':
+         return 'Odia (Oriya)';
+      case 'om':
+         return 'Oromo';
+      case 'ps':
+         return 'Pashto';
+      case 'pl':
+         return 'Polandia';
+      case 'pt':
+         return 'Portugis';
+      case 'fr':
+         return 'Prancis';
+      case 'pa':
+         return 'Punjabi';
+      case 'qu':
+         return 'Quechua';
+      case 'ro':
+         return 'Rumania';
+      case 'ru':
+         return 'Rusia';
+      case 'sm':
+         return 'Samoa';
+      case 'sa':
+         return 'Sanskerta';
+      case 'nso':
+         return 'Sepedi';
+      case 'sr':
+         return 'Serb';
+      case 'st':
+         return 'Sesotho';
+      case 'sn':
+         return 'Shona';
+      case 'sd':
+         return 'Sindhi';
+      case 'si':
+         return 'Sinhala';
+      case 'sk':
+         return 'Slovakia';
+      case 'sl':
+         return 'Slovenia';
+      case 'so':
+         return 'Somali';
+      case 'es':
+         return 'Spanyol';
+      case 'sw':
+         return 'Swahili';
+      case 'sv':
+         return 'Swensk';
+      case 'tl':
+         return 'Tagalog';
+      case 'tg':
+         return 'Tajik';
+      case 'ta':
+         return 'Tamil';
+      case 'tt':
+         return 'Tatar';
+      case 'te':
+         return 'Telugu';
+      case 'th':
+         return 'Thai';
+      case 'ti':
+         return 'Tigrinya';
+      case 'ts':
+         return 'Tsonga';
+      case 'tr':
+         return 'Turki';
+      case 'tk':
+         return 'Turkmen';
+      case 'tw':
+         return 'Twi';
+      case 'uk':
+         return 'Ukraina';
+      case 'ur':
+         return 'Urdu';
+      case 'ug':
+         return 'Uyghur';
+      case 'uz':
+         return 'Uzbek';
+      case 'vi':
+         return 'Vietnam';
+      case 'cy':
+         return 'Wales';
+      case 'xh':
+         return 'Xhosa';
+      case 'yi':
+         return 'Yiddi';
+      case 'yo':
+         return 'Yoruba';
+      case 'el':
+         return 'Yunani';
+      case 'zu':
+         return 'Zulu';
+      case 'af':
+         return 'Afrikans';
+      case 'sq':
+         return 'Albania';
+      case 'am':
+         return 'Amhara';
+      case 'ar':
+         return 'Arab';
+      case 'hy':
+         return 'Armenia';
+      case 'as':
+         return 'Assam';
+      case 'ay':
+         return 'Aymara';
+      case 'az':
+         return 'Azerbaijan';
+      case 'bm':
+         return 'Bambara';
+      case 'eu':
+         return 'Basque';
+      case 'nl':
+         return 'Belanda';
+      case 'be':
+         return 'Belarussia';
+      case 'bn':
+         return 'Bengali';
+      case 'bho':
+         return 'Bhojpuri';
+      case 'bs':
+         return 'Bosnia';
+      case 'bg':
+         return 'Bulgaria';
+      case 'my':
+         return 'Burma';
+      case 'ceb':
+         return 'Cebuano';
+      case 'cs':
+         return 'Ceko';
+      case 'ny':
+         return 'Chichewa';
+      case 'zh-CN':
+         return 'China (Aks. Sederhana)';
+      case 'zh-TW':
+         return 'China (Aks. Tradisional)';
+      case 'da':
+         return 'Denmark';
+      case 'dv':
+         return 'Divehi';
+      case 'doi':
+         return 'Dogri';
+      case 'eo':
+         return 'Esperanto';
+      case 'et':
+         return 'Estonia';
+      case 'ee':
+         return 'Ewe';
+      case 'fa':
+         return 'Farsi';
+      case 'fi':
+         return 'Finlandia';
+      case 'fy':
+         return 'Frisia';
+      case 'gd':
+         return 'Gaelig';
+      case 'gd':
+         return 'Gaelik Skotlandia';
+      case 'gl':
+         return 'Galisia';
+      case 'ka':
+         return 'Georgia';
+      case 'gn':
+         return 'Guarani';
+      case 'gu':
+         return 'Gujarati';
+      case 'ha':
+         return 'Hausa';
+      case 'haw':
+         return 'Hawaii';
+      case 'hi':
+         return 'Hindi';
+      case 'hmn':
+         return 'Hmong';
+      case 'he':
+         return 'Ibrani';
+      case 'ig':
+         return 'Igbo';
+      case 'ilo':
+         return 'Ilocano';
+      case 'ca':
+         return 'Katala';
+      case 'kk':
+         return 'Kazak';
+      case 'km':
+         return 'Khmer';
+      case 'rw':
+         return 'Kinyarwanda';
+      case 'ky':
+         return 'Kirghiz';
+      case 'kok':
+         return 'Konkani';
+
+
+      default:
+         return language;
+   }
+}
+
+
+function translateText() {
+   var text = textInput.value;
+   var targetLang = targetLangInput.value;
+
+   var data = {
+      text: text,
+      target_lang: targetLang
+   };
+
+
+   var xhr = new XMLHttpRequest();
+   xhr.open('POST', '/translate', true);
+   xhr.setRequestHeader('Content-Type', 'application/json');
+
+   xhr.onload = function () {
+      if (xhr.status === 200) {
+         var response = JSON.parse(xhr.responseText);
+         document.getElementById('translated_text').textContent = response.translated_text;
+      } else {
+         console.log('Error:', xhr.status);
+      }
+   };
+
+   xhr.onerror = function () {
+      console.log('Request error');
+   };
+
+   xhr.send(JSON.stringify(data));
+}
+
+
+// Add event listener to the text input
+textInput.addEventListener('textarea', translateText);
+
+
+var recognition; // Variable to hold the recognition object
+
+function toggleRecognition() {
+   if (!recognition) {
+      startRecognition();
+   } else {
+      stopRecognition();
+   }
+}
+
+function startRecognition() {
+   recognition = new webkitSpeechRecognition();
+   recognition.continuous = false;
+   recognition.interimResults = false;
+   recognition.lang = "id-ID";
+   recognition.start();
+
+   recognition.onresult = function (event) {
+      var speechResult = event.results[0][0].transcript;
+      const chatboxInput = document.querySelector('textarea');
+      chatboxInput.value = speechResult;
+      translateText();
+   };
+
+   recognition.onend = function () {
+      // Reset the recognition variable and button display
+      recognition = null;
+      var startRecognitionButton = document.getElementById('startRecognitionButton');
+      var stopRecognitionButton = document.getElementById('stopRecognitionButton');
+      startRecognitionButton.style.display = "inline-block";
+      stopRecognitionButton.style.display = "none";
+   };
+
+   // Set button display
+   var startRecognitionButton = document.getElementById('startRecognitionButton');
+   var stopRecognitionButton = document.getElementById('stopRecognitionButton');
+   startRecognitionButton.style.display = "none";
+   stopRecognitionButton.style.display = "inline-block";
+}
+
+function stopRecognition() {
+   recognition.stop();
+}
+
+
+var isSpeaking = false;
+
+function speakText(text) {
+   if (!isSpeaking) {
+      isSpeaking = true;
+
+      const speechSynthesis = window.speechSynthesis;
+      const utterance = new SpeechSynthesisUtterance(text);
+
+      utterance.lang = 'id-ID';
+      utterance.volume = 1;
+      utterance.rate = 1;
+      utterance.pitch = 1;
+
+      utterance.onend = function (event) {
+         isSpeaking = false;
+      };
+
+      speechSynthesis.speak(utterance);
+   }
+}
+
+speakButton.addEventListener('click', function () {
+   var translatedText = document.getElementById('translated_text').textContent;
+   speakText(translatedText);
+});