From 932a21647d7b4ee037832b418501e7fb899d37f4 Mon Sep 17 00:00:00 2001 From: Khyretos Date: Thu, 4 Jan 2024 06:14:51 +0100 Subject: [PATCH] new language selector (WIP) --- backend/loquendoBot_backend.py | 2 -- src/css/chat.css | 11 +++++-- src/css/menu.css | 58 ++++++++++++++++++++++++++++++++++ src/index.html | 10 ++++-- src/js/languages.js | 2 +- src/js/renderer.js | 33 +++++++++++++++++++ src/js/twitch.js | 2 +- 7 files changed, 109 insertions(+), 9 deletions(-) diff --git a/backend/loquendoBot_backend.py b/backend/loquendoBot_backend.py index 3bbde06..19ba637 100644 --- a/backend/loquendoBot_backend.py +++ b/backend/loquendoBot_backend.py @@ -96,7 +96,6 @@ class STT: vosk_model = os.path.join( resources_folder, "speech_to_text_models", settings["STT"]["LANGUAGE"] ) - print(vosk_model) self.model = Model(rf"{vosk_model}") self.dump_fn = None @@ -137,7 +136,6 @@ class STT: self.is_running = False settings.read(settingsPath) -print(settingsPath) if settings["STT"]["USE_STT"] and bool(settings["STT"]["LANGUAGE"]): speech_recognition_service = STT() diff --git a/src/css/chat.css b/src/css/chat.css index bd32a5b..b06ebd2 100644 --- a/src/css/chat.css +++ b/src/css/chat.css @@ -517,8 +517,6 @@ h1 { .fi { position: relative; z-index: 5; - top: 45px; - left: 20px; border-radius: 50%; } @@ -540,5 +538,12 @@ h1 { position: relative; padding: 0px 0px 0px 0px; margin: -45px 0px 0px -40px; - top: -15px; + top: 30px; + left: 20px; +} + +.language-icon { + position: relative; + top: 45px; + left: 20px; } diff --git a/src/css/menu.css b/src/css/menu.css index 0c17438..7efc7f9 100644 --- a/src/css/menu.css +++ b/src/css/menu.css @@ -228,3 +228,61 @@ background-color: var(--main-color4-temp); height: 100%; } + +.btn { + background-color: blue; + color: red; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; +} +.pop { + position: relative; + display: inline-block; +} + +.pop.up { +} + +.pop-content { + display: none; + position: absolute; + background-color: black; + z-index: 1; + height: 400px; + width: max-content; + overflow: auto; + display: grid; + grid-template-columns: repeat(3, 1fr); + top: -400px; + color: white; +} +pop-content div { + color: white; + padding: 12px 16px; + text-decoration: none; + display: block; +} +.pop-content div:hover { + display: none; + /* background-color: black; */ +} +.pop:hover .pop-content { + display: grid; + /* display: none; */ + grid-template-columns: repeat(3, 1fr); + /* display: block; */ +} +.pop:hover .btn { + background-color: blue; +} + +.language-select { + margin: 5px; + position: relative; +} + +.language-select:hover { + background-color: blue; +} diff --git a/src/index.html b/src/index.html index d922dc8..be520bf 100644 --- a/src/index.html +++ b/src/index.html @@ -282,12 +282,12 @@
Broadcast translation to chat
- +
Output translation to TTS
- + +
+ +
+
diff --git a/src/js/languages.js b/src/js/languages.js index 9507f38..fa95e2f 100644 --- a/src/js/languages.js +++ b/src/js/languages.js @@ -161,7 +161,7 @@ const languages = { kisii: { IETF: 'guz-KE', ISO639: 'guz', ISO3166: 'ke' }, kongo: { IETF: 'kg-CG', ISO639: 'kg', ISO3166: 'cg' }, konkani: { IETF: 'kok-IN', ISO639: 'kok', ISO3166: 'in' }, - korean: { IETF: 'ko-KR', ISO639: 'ko', ISO3166: 'ko' }, + korean: { IETF: 'ko-KR', ISO639: 'ko', ISO3166: 'kr' }, 'northern kurdish': { IETF: 'kmr-TR', ISO639: 'kmr', ISO3166: 'tr' }, 'kurdish sorani': { IETF: 'ckb-IQ', ISO639: 'ckb', ISO3166: 'iq' }, kyrgyz: { IETF: 'ky-KG', ISO639: 'ky', ISO3166: 'kg' }, diff --git a/src/js/renderer.js b/src/js/renderer.js index db95f3a..d4e6a4c 100644 --- a/src/js/renderer.js +++ b/src/js/renderer.js @@ -163,6 +163,39 @@ async function getAudioDevices() { getAudioDevices(); +function setLanguagesinSelectx() { + const languageSelect = document.querySelector('.pop-content'); // obtain the html reference of the google voices comboBox + + for (const language in languageObject.languages) { + if (Object.prototype.hasOwnProperty.call(languageObject.languages, language)) { + const IETF = languageObject.languages[language].IETF; + const ISO639 = languageObject.languages[language].ISO639; + const ISO3166 = languageObject.languages[language].ISO3166; + + const option = document.createElement('div'); + option.classList = 'language-select'; + + const languageElement = document.createElement('span'); + languageElement.classList = `fi fi-${ISO3166} fis`; + option.setAttribute('tip', language); + + const text = document.createElement('span'); + text.innerHTML = ` - ${ISO639}`; + + option.value = IETF; + + languageSelect.appendChild(option); + option.appendChild(languageElement); + option.appendChild(text); + addSingleTooltip(option); + } + } + + // languageSelect.selectedIndex = setting; +} + +setLanguagesinSelectx(); + function setLanguagesinSelect(languageSelector, setting) { const languageSelect = document.querySelector(languageSelector); // obtain the html reference of the google voices comboBox diff --git a/src/js/twitch.js b/src/js/twitch.js index 6fe09d0..fc60778 100644 --- a/src/js/twitch.js +++ b/src/js/twitch.js @@ -136,7 +136,7 @@ async function displayTwitchMessage(logoUrl, username, messageObject, filteredMe if (settings.LANGUAGE.USE_DETECTION) { await backend.getDetectedLanguage({ message: filteredMessage, messageId, username, logoUrl, formattedMessage }).then(language => { const languageElement = document.createElement('span'); - languageElement.classList = `fi fi-${language.ISO3166} fis`; + languageElement.classList = `fi fi-${language.ISO3166} fis language-icon`; languageElement.setAttribute('tip', language.name); article.appendChild(languageElement); addSingleTooltip(languageElement);