From b503c843b2cd901d3c2b3566f2a08d0d25d9d89d Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:05:15 +0900 Subject: [PATCH 1/6] [bugfix] fix the radio button width. --- .../setting_box/_components/radio_button/RadioButton.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss index e464460c..081e892a 100644 --- a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss +++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss @@ -27,7 +27,6 @@ gap: 1rem; padding: 0.6rem 0.8rem; border-radius: 0.4rem; - min-width: 20rem; &:hover { background-color: var(--dark_850_color); } From f835a3be8053c60b9435d5adbc2b58de2ee05ce5 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Tue, 12 Nov 2024 15:23:02 +0900 Subject: [PATCH 2/6] [Refactor] ui_configs: rename the keys. --- .../TranslatorSelectorOpenButton.jsx | 10 +++++----- .../translator_selector/TranslatorSelector.jsx | 18 +++++++++--------- src-ui/logics/useReceiveRoutes.js | 4 ++-- src-ui/ui_configs.js | 18 +++++++++--------- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx index a82b9f90..1a09c034 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx @@ -13,11 +13,11 @@ export const TranslatorSelectorOpenButton = () => { currentSelectedTranslationEngines, } = useLanguageSettings(); - const selected_translator_name = (currentTranslationEngines.state === "pending") + const selected_label = (currentTranslationEngines.state === "pending") ? "Loading..." : currentTranslationEngines.data.find( - translator_data => translator_data.translator_id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] - )?.translator_name; + translator_data => translator_data.id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] + )?.label; const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector(); @@ -30,11 +30,11 @@ export const TranslatorSelectorOpenButton = () => {

{t("main_page.translator")}:

-

{selected_translator_name}

+

{selected_label}

{currentIsOpenedTranslatorSelector.data && } diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx index 53f893fb..bbbe616f 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx @@ -5,7 +5,7 @@ import { chunkArray } from "@utils/chunkArray"; import { useStore_IsOpenedTranslatorSelector } from "@store"; import { useLanguageSettings } from "@logics_main"; -export const TranslatorSelector = ({selected_translator_id, translation_engines}) => { +export const TranslatorSelector = ({selected_id, translation_engines}) => { const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : []; return ( @@ -13,13 +13,13 @@ export const TranslatorSelector = ({selected_translator_id, translation_engines}
{columns.map((column, column_index) => (
- {column.map(({ translator_id, translator_name, is_available }) => ( + {column.map(({ id, label, is_available }) => ( ))}
@@ -35,17 +35,17 @@ const TranslatorBox = (props) => { const box_class_name = clsx( styles.box, - { [styles["is_selected"]]: (currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] === props.translator_id) ? true : false }, + { [styles["is_selected"]]: (currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] === props.id) ? true : false }, { [styles["is_available"]]: (props.is_available === true) ? true : false } ); const selectTranslator = () => { - setSelectedTranslationEngines(props.translator_id); + setSelectedTranslationEngines(props.id); updateIsOpenedTranslatorSelector(false); }; return (
-

{props.translator_name}

+

{props.label}

); }; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index bb8e08cf..e00effaf 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -177,7 +177,7 @@ export const useReceiveRoutes = () => { const updateTranslatorAvailability = (keys) => { return translator_status.map(translator => ({ ...translator, - is_available: keys.includes(translator.translator_id), + is_available: keys.includes(translator.id), })); }; const updated_list = updateTranslatorAvailability(payload); @@ -187,7 +187,7 @@ export const useReceiveRoutes = () => { const updateTranslatorAvailability = (keys) => { return translator_status.map(translator => ({ ...translator, - is_available: keys.includes(translator.translator_id), + is_available: keys.includes(translator.id), })); }; const updated_list = updateTranslatorAvailability(payload); diff --git a/src-ui/ui_configs.js b/src-ui/ui_configs.js index c232505d..eaf3896f 100644 --- a/src-ui/ui_configs.js +++ b/src-ui/ui_configs.js @@ -1,12 +1,3 @@ -export const translator_status = [ - { translator_id: "DeepL", translator_name: "DeepL", is_available: false }, - { translator_id: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false }, - { translator_id: "Google", translator_name: "Google", is_available: false }, - { translator_id: "Bing", translator_name: "Bing", is_available: false }, - { translator_id: "Papago", translator_name: "Papago", is_available: false }, - { translator_id: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: false }, -]; - export const ui_configs = { mic_threshold_min: 0, mic_threshold_max: 2000, @@ -20,6 +11,15 @@ export const ui_configs = { ] }; +export const translator_status = [ + { id: "DeepL", label: "DeepL", is_available: false }, + { id: "DeepL_API", label: `DeepL\nAPI`, is_available: false }, + { id: "Google", label: "Google", is_available: false }, + { id: "Bing", label: "Bing", is_available: false }, + { id: "Papago", label: "Papago", is_available: false }, + { id: "CTranslate2", label: `Internal\n(Default)`, is_available: false }, +]; + export const ctranslate2_weight_type_status = [ { id: "small", label: "small", is_downloaded: false, progress: null }, { id: "large", label: "large", is_downloaded: false, progress: null }, From dd21623b599b48859b8d5681a03e3e196dacd88e Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 13 Nov 2024 06:54:28 +0900 Subject: [PATCH 3/6] [Update/Refactor] Main Page: Translation Engines. Apply Localization. --- .../TranslatorSelectorOpenButton.jsx | 25 +++++++++++++------ .../TranslatorSelector.jsx | 2 +- src-ui/utils/updateLabelsById.js | 6 +++++ 3 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 src-ui/utils/updateLabelsById.js diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx index 1a09c034..1c803415 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx @@ -1,5 +1,5 @@ import { useTranslation } from "react-i18next"; - +import { updateLabelsById } from "@utils/updateLabelsById"; import styles from "./TranslatorSelectorOpenButton.module.scss"; import { TranslatorSelector } from "./translator_selector/TranslatorSelector"; import { useStore_IsOpenedTranslatorSelector } from "@store"; @@ -13,11 +13,22 @@ export const TranslatorSelectorOpenButton = () => { currentSelectedTranslationEngines, } = useLanguageSettings(); - const selected_label = (currentTranslationEngines.state === "pending") - ? "Loading..." - : currentTranslationEngines.data.find( - translator_data => translator_data.id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] - )?.label; + const new_labels = [ + {id: "CTranslate2", label: t("main_page.translator_ctranslate2")} + ]; + + const translation_engines = updateLabelsById(currentTranslationEngines.data, new_labels); + + const getSelectedLabel = () => { + const selected_engine_id = currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data]; + const selected_engine = translation_engines.find( + d => d.id === selected_engine_id + ); + return selected_engine?.label; + }; + + const is_loading = currentTranslationEngines.state === "pending"; + const selected_label = is_loading ? "Loading..." : getSelectedLabel(); const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector(); @@ -35,7 +46,7 @@ export const TranslatorSelectorOpenButton = () => { {currentIsOpenedTranslatorSelector.data && }
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx index bbbe616f..8ea0f98c 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx @@ -6,7 +6,7 @@ import { useStore_IsOpenedTranslatorSelector } from "@store"; import { useLanguageSettings } from "@logics_main"; export const TranslatorSelector = ({selected_id, translation_engines}) => { - const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : []; + const columns = chunkArray(translation_engines, 2); return (
diff --git a/src-ui/utils/updateLabelsById.js b/src-ui/utils/updateLabelsById.js new file mode 100644 index 00000000..496adbf8 --- /dev/null +++ b/src-ui/utils/updateLabelsById.js @@ -0,0 +1,6 @@ +export const updateLabelsById = (data_array, updates) => { + return data_array.map(item => { + const update = updates.find(update_item => update_item.id === item.id); + return update ? { ...item, label: update.label } : item; + }); +}; \ No newline at end of file From 6c0c67ab40225c39e81da0c05ae5ddd598a53ac0 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 13 Nov 2024 09:31:27 +0900 Subject: [PATCH 4/6] [Refactor] Tidy up utils' files and functions. --- src-ui/app/App.jsx | 2 +- src-ui/{utils => app/_index_css}/reset.css | 0 src-ui/{utils => app/_index_css}/root.css | 0 .../{utils => app/_index_css}/variables.css | 0 .../PosterShowcaseWorldsContents.jsx | 4 +- src-ui/app/index.jsx | 2 +- .../message_container/log_box/LogBox.jsx | 2 +- .../message_input_box/MessageInputBox.jsx | 2 +- .../language_settings/LanguageSettings.jsx | 4 +- .../LanguageSelectorOpenButton.jsx | 13 ++-- .../TranslatorSelectorOpenButton.jsx | 2 +- .../TranslatorSelector.jsx | 2 +- src-ui/{utils => common_css}/mixins.scss | 0 src-ui/logics/main/useMessageInputBoxRatio.js | 2 +- src-ui/logics/useReceiveRoutes.js | 2 +- src-ui/utils.js | 67 +++++++++++++++++++ src-ui/utils/arrayToObject.js | 6 -- src-ui/utils/chunkArray.js | 7 -- src-ui/utils/clampMinMax.js | 8 --- src-ui/utils/randomIntMinMax.js | 9 --- src-ui/utils/scrollToBottom.js | 27 -------- src-ui/utils/updateLabelsById.js | 6 -- src-ui/utils/useSvg.jsx | 9 --- vite.config.js | 4 +- 24 files changed, 86 insertions(+), 94 deletions(-) rename src-ui/{utils => app/_index_css}/reset.css (100%) rename src-ui/{utils => app/_index_css}/root.css (100%) rename src-ui/{utils => app/_index_css}/variables.css (100%) rename src-ui/{utils => common_css}/mixins.scss (100%) create mode 100644 src-ui/utils.js delete mode 100644 src-ui/utils/arrayToObject.js delete mode 100644 src-ui/utils/chunkArray.js delete mode 100644 src-ui/utils/clampMinMax.js delete mode 100644 src-ui/utils/randomIntMinMax.js delete mode 100644 src-ui/utils/scrollToBottom.js delete mode 100644 src-ui/utils/updateLabelsById.js delete mode 100644 src-ui/utils/useSvg.jsx diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx index b9b59e6f..b74393d4 100644 --- a/src-ui/app/App.jsx +++ b/src-ui/app/App.jsx @@ -145,7 +145,7 @@ const FontFamilyController = () => { }; import { useStore_SelectableFontFamilyList } from "@store"; -import { arrayToObject } from "@utils/arrayToObject"; +import { arrayToObject } from "@utils"; import { invoke } from "@tauri-apps/api/tauri"; const useAsyncFetchFonts = () => { diff --git a/src-ui/utils/reset.css b/src-ui/app/_index_css/reset.css similarity index 100% rename from src-ui/utils/reset.css rename to src-ui/app/_index_css/reset.css diff --git a/src-ui/utils/root.css b/src-ui/app/_index_css/root.css similarity index 100% rename from src-ui/utils/root.css rename to src-ui/app/_index_css/root.css diff --git a/src-ui/utils/variables.css b/src-ui/app/_index_css/variables.css similarity index 100% rename from src-ui/utils/variables.css rename to src-ui/app/_index_css/variables.css diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx index 520bff17..abfa7a40 100644 --- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx @@ -9,7 +9,7 @@ const getImageByFileName = (file_name) => { }; import poster_showcase_worlds_settings from "./poster_showcase_worlds_settings"; -import { chunkArray } from "@utils/chunkArray"; +import { chunkArray } from "@utils"; export const PosterShowcaseWorldsContents = () => { const { currentPosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex(); @@ -57,7 +57,7 @@ export const PosterShowcaseWorldsContents = () => { import chat_white_square from "@images/chato_white_square.png"; import { useEffect } from "react"; -import { randomIntMinMax } from "@utils/randomIntMinMax"; +import { randomIntMinMax } from "@utils"; const PosterShowcaseWorldsPagination = ({ page_length }) => { const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex(); diff --git a/src-ui/app/index.jsx b/src-ui/app/index.jsx index ab108afa..03c4e13a 100644 --- a/src-ui/app/index.jsx +++ b/src-ui/app/index.jsx @@ -1,7 +1,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import "@root/locales/config.js"; -import "@utils/root.css"; +import "./_index_css/root.css"; import { App } from "./App"; diff --git a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx index ac886269..b5f24918 100644 --- a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx +++ b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx @@ -2,7 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react"; import styles from "./LogBox.module.scss"; import { store } from "@store"; import { MessageContainer } from "./message_container/MessageContainer"; -import { scrollToBottom } from "@utils/scrollToBottom"; +import { scrollToBottom } from "@utils"; import { useMessage } from "@logics_common"; export const LogBox = () => { diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx index 6329f3d1..007c3a67 100644 --- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx +++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx @@ -3,7 +3,7 @@ import styles from "./MessageInputBox.module.scss"; import SendMessageSvg from "@images/send_message.svg?react"; import { useMessage } from "@logics_common"; import { store } from "@store"; -import { scrollToBottom } from "@utils/scrollToBottom"; +import { scrollToBottom } from "@utils"; import { useSendMessageButtonType, useEnableAutoClearMessageInputBox, diff --git a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx index 03715d9c..a36ce73c 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx @@ -66,7 +66,7 @@ const PresetContainer = () => { title: t("main_page.your_language"), is_opened: currentIsOpenedLanguageSelector.data.your_language, onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.data.your_language, updateIsOpenedLanguageSelector), - TurnedOnSvgComponent: , + TurnedOnSvgComponent: MicSvg, is_turned_on: currentTranscriptionSendStatus.data, variable: your_language_data?.primary, }; @@ -75,7 +75,7 @@ const PresetContainer = () => { title: t("main_page.target_language"), is_opened: currentIsOpenedLanguageSelector.data.target_language, onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.data.target_language, updateIsOpenedLanguageSelector), - TurnedOnSvgComponent: , + TurnedOnSvgComponent: HeadphonesSvg, is_turned_on: currentTranscriptionReceiveStatus.data, variable: target_language_data?.primary, }; diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx index 7d080914..4139c057 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx @@ -1,17 +1,14 @@ import clsx from "clsx"; import styles from "./LanguageSelectorOpenButton.module.scss"; import ArrowLeftSvg from "@images/arrow_left.svg?react"; -import { useSvg } from "@utils/useSvg"; export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened, TurnedOnSvgComponent, is_turned_on, variable }) => { - const classNames = clsx(styles.arrow_left_svg, { + const arrow_class_names = clsx(styles.arrow_left_svg, { [styles.reverse]: is_opened, }); - const SvgComponent = useSvg(TurnedOnSvgComponent, { - className: clsx(styles.category_svg, { - [styles.is_turned_on]: is_turned_on, - }), + const category_class_names = clsx(styles.category_svg, { + [styles.is_turned_on]: is_turned_on, }); const languageText = variable?.language ?? "Loading..."; @@ -20,13 +17,13 @@ export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened, return (
- {SvgComponent} +

{title}

{languageText}

({countryText})

- +
); diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx index 1c803415..13708b1c 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx @@ -1,5 +1,5 @@ import { useTranslation } from "react-i18next"; -import { updateLabelsById } from "@utils/updateLabelsById"; +import { updateLabelsById } from "@utils"; import styles from "./TranslatorSelectorOpenButton.module.scss"; import { TranslatorSelector } from "./translator_selector/TranslatorSelector"; import { useStore_IsOpenedTranslatorSelector } from "@store"; diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx index 8ea0f98c..77f945f6 100644 --- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx +++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx @@ -1,6 +1,6 @@ import clsx from "clsx"; import styles from "./TranslatorSelector.module.scss"; -import { chunkArray } from "@utils/chunkArray"; +import { chunkArray } from "@utils"; import { useStore_IsOpenedTranslatorSelector } from "@store"; import { useLanguageSettings } from "@logics_main"; diff --git a/src-ui/utils/mixins.scss b/src-ui/common_css/mixins.scss similarity index 100% rename from src-ui/utils/mixins.scss rename to src-ui/common_css/mixins.scss diff --git a/src-ui/logics/main/useMessageInputBoxRatio.js b/src-ui/logics/main/useMessageInputBoxRatio.js index 14d5d57c..466fc02b 100644 --- a/src-ui/logics/main/useMessageInputBoxRatio.js +++ b/src-ui/logics/main/useMessageInputBoxRatio.js @@ -1,7 +1,7 @@ import { appWindow } from "@tauri-apps/api/window"; import { useStore_MessageInputBoxRatio } from "@store"; import { useStdoutToPython } from "@logics/useStdoutToPython"; -import { clampMinMax } from "@utils/clampMinMax"; +import { clampMinMax } from "@utils"; export const useMessageInputBoxRatio = () => { const { asyncStdoutToPython } = useStdoutToPython(); const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio(); diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index e00effaf..c194062e 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -1,5 +1,5 @@ import { translator_status } from "@ui_configs"; -import { arrayToObject } from "@utils/arrayToObject"; +import { arrayToObject } from "@utils"; import { useWindow, diff --git a/src-ui/utils.js b/src-ui/utils.js new file mode 100644 index 00000000..a2d38fc9 --- /dev/null +++ b/src-ui/utils.js @@ -0,0 +1,67 @@ +export const arrayToObject = (array) => { + return array.reduce((obj, item) => { + obj[item] = item; + return obj; + }, {}); +}; + +export const chunkArray = (array, size) => { + const chunked = []; + for (let i = 0; i < array.length; i += size) { + chunked.push(array.slice(i, i + size)); + } + return chunked; +}; + +export const clampMinMax = (value, min, max) => { + return Math.min(Math.max(value, min), max); +}; +// console.log(clamp(5, 1, 10)); // 5 (範囲内) +// console.log(clamp(-3, 0, 10)); // 0 (minより小さい) +// console.log(clamp(15, 1, 10)); // 10 (maxより大きい) +// console.log(clamp(7.5, 1, 10)); // 7.5 (範囲内、少数) + +export const randomIntMinMax = (min, max) => { + if (min === max) return min; + if (max === undefined) { + max = min; + min = 0; + } + const int = Math.floor(Math.random() * (max - min + 1)) + min; + return int; +}; + +export const scrollToBottom = (ref, smooth = false) => { + const element = ref.current; + const scroll_height = element.scrollHeight - element.clientHeight; + + if (smooth) { + const duration = 300; // スクロールにかける時間（ミリ秒） + const start_time = performance.now(); + const scroll_top = element.scrollTop; + + const scroll = (current_time) => { + const elapsed = current_time - start_time; + const progress = Math.min(elapsed / duration, 1); + const ease_in_out_quad = (t) => t < 0.5 + ? 2 * t * t + : -1 + (4 - 2 * t) * t; + element.scrollTop = scroll_top + (scroll_height - scroll_top) * ease_in_out_quad(progress); + + if (progress < 1) { + requestAnimationFrame(scroll); + } + }; + + requestAnimationFrame(scroll); + } else { + element.scrollTop = scroll_height; + } +}; + +export const updateLabelsById = (data_array, updates) => { + return data_array.map(item => { + const update = updates.find(update_item => update_item.id === item.id); + return update ? { ...item, label: update.label } : item; + }); +}; \ No newline at end of file diff --git a/src-ui/utils/arrayToObject.js b/src-ui/utils/arrayToObject.js deleted file mode 100644 index 69e7b597..00000000 --- a/src-ui/utils/arrayToObject.js +++ /dev/null @@ -1,6 +0,0 @@ -export const arrayToObject = (array) => { - return array.reduce((obj, item) => { - obj[item] = item; - return obj; - }, {}); -}; \ No newline at end of file diff --git a/src-ui/utils/chunkArray.js b/src-ui/utils/chunkArray.js deleted file mode 100644 index ee3d47cb..00000000 --- a/src-ui/utils/chunkArray.js +++ /dev/null @@ -1,7 +0,0 @@ -export const chunkArray = (array, size) => { - const chunked = []; - for (let i = 0; i < array.length; i += size) { - chunked.push(array.slice(i, i + size)); - } - return chunked; -}; \ No newline at end of file diff --git a/src-ui/utils/clampMinMax.js b/src-ui/utils/clampMinMax.js deleted file mode 100644 index 1eced3f0..00000000 --- a/src-ui/utils/clampMinMax.js +++ /dev/null @@ -1,8 +0,0 @@ -export const clampMinMax = (value, min, max) => { - return Math.min(Math.max(value, min), max); -}; - -// console.log(clamp(5, 1, 10)); // 5 (範囲内) -// console.log(clamp(-3, 0, 10)); // 0 (minより小さい) -// console.log(clamp(15, 1, 10)); // 10 (maxより大きい) -// console.log(clamp(7.5, 1, 10)); // 7.5 (範囲内、少数) \ No newline at end of file diff --git a/src-ui/utils/randomIntMinMax.js b/src-ui/utils/randomIntMinMax.js deleted file mode 100644 index f0882ea6..00000000 --- a/src-ui/utils/randomIntMinMax.js +++ /dev/null @@ -1,9 +0,0 @@ -export const randomIntMinMax = (min, max) => { - if (min === max) return min; - if (max === undefined) { - max = min; - min = 0; - } - const int = Math.floor(Math.random() * (max - min + 1)) + min; - return int; -}; diff --git a/src-ui/utils/scrollToBottom.js b/src-ui/utils/scrollToBottom.js deleted file mode 100644 index a2cb2a48..00000000 --- a/src-ui/utils/scrollToBottom.js +++ /dev/null @@ -1,27 +0,0 @@ -export const scrollToBottom = (ref, smooth = false) => { - const element = ref.current; - const scroll_height = element.scrollHeight - element.clientHeight; - - if (smooth) { - const duration = 300; // スクロールにかける時間（ミリ秒） - const start_time = performance.now(); - const scroll_top = element.scrollTop; - - const scroll = (current_time) => { - const elapsed = current_time - start_time; - const progress = Math.min(elapsed / duration, 1); - const ease_in_out_quad = (t) => t < 0.5 - ? 2 * t * t - : -1 + (4 - 2 * t) * t; - element.scrollTop = scroll_top + (scroll_height - scroll_top) * ease_in_out_quad(progress); - - if (progress < 1) { - requestAnimationFrame(scroll); - } - }; - - requestAnimationFrame(scroll); - } else { - element.scrollTop = scroll_height; - } -}; diff --git a/src-ui/utils/updateLabelsById.js b/src-ui/utils/updateLabelsById.js deleted file mode 100644 index 496adbf8..00000000 --- a/src-ui/utils/updateLabelsById.js +++ /dev/null @@ -1,6 +0,0 @@ -export const updateLabelsById = (data_array, updates) => { - return data_array.map(item => { - const update = updates.find(update_item => update_item.id === item.id); - return update ? { ...item, label: update.label } : item; - }); -}; \ No newline at end of file diff --git a/src-ui/utils/useSvg.jsx b/src-ui/utils/useSvg.jsx deleted file mode 100644 index 2da6e814..00000000 --- a/src-ui/utils/useSvg.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -export const useSvg = (svg_component, ...props) => { - const svgWithClass = svg_component - ? React.cloneElement(svg_component, ...props) - : null; - - return svgWithClass; -}; \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 4412baeb..a2b46140 100644 --- a/vite.config.js +++ b/vite.config.js @@ -36,10 +36,10 @@ export default defineConfig(async () => ({ "@test_data": path.resolve(__dirname, "./test_data.js"), "@ui_configs": path.resolve(__dirname, "src-ui/ui_configs.js"), - "@scss_mixins": path.resolve(__dirname, "src-ui/utils/mixins.scss"), + "@scss_mixins": path.resolve(__dirname, "src-ui/common_css/mixins.scss"), "@store": path.resolve(__dirname, "src-ui/store.js"), "@images": path.resolve(__dirname, "src-ui/assets"), - "@utils": path.resolve(__dirname, "src-ui/utils"), + "@utils": path.resolve(__dirname, "src-ui/utils.js"), "@logics": path.resolve(__dirname, "src-ui/logics"), "@logics_common": path.resolve(__dirname, "src-ui/logics/common"), "@logics_main": path.resolve(__dirname, "src-ui/logics/main"), From 4db530617853e2ef6d544c04f9ff698bd629d4c8 Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 13 Nov 2024 09:50:21 +0900 Subject: [PATCH 5/6] [Update] Config Page: Translation, Transcription Tab: CTranslate2, Whisper. Apply Localization. --- .../setting_box/transcription/Transcription.jsx | 15 ++++++++++++++- .../setting_box/translation/Translation.jsx | 10 +++++++++- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx index b8c0e604..162e20b9 100644 --- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import styles from "./Transcription.module.scss"; +import { updateLabelsById } from "@utils"; import { useMicRecordTimeout, @@ -250,6 +251,18 @@ const WhisperWeightType_Box = () => { downloadWhisperWeight(id); }; + const new_labels = [ + { id: "tiny", label: t("config_page.whisper_weight_type.model_template", {model_name: "tiny", capacity: "74.5MB"}) }, + { id: "base", label: t("config_page.whisper_weight_type.recommended_model_template", {model_name: "base", capacity: "141MB"}) }, + { id: "small", label: t("config_page.whisper_weight_type.model_template", {model_name: "small", capacity: "463MB"}) }, + { id: "medium", label: t("config_page.whisper_weight_type.model_template", {model_name: "medium", capacity: "1.42GB"}) }, + { id: "large-v1", label: t("config_page.whisper_weight_type.model_template", {model_name: "large-v1", capacity: "2.87GB"}) }, + { id: "large-v2", label: t("config_page.whisper_weight_type.model_template", {model_name: "large-v2", capacity: "2.87GB"}) }, + { id: "large-v3", label: t("config_page.whisper_weight_type.model_template", {model_name: "large-v3", capacity: "2.87GB"}) }, + ]; + + const whisper_weight_types = updateLabelsById(currentWhisperWeightTypeStatus.data, new_labels); + return ( <> { {translator: t("main_page.translator")} )} name="whisper_weight_type" - options={currentWhisperWeightTypeStatus.data} + options={whisper_weight_types} checked_variable={currentSelectedWhisperWeightType} selectFunction={selectFunction} downloadStartFunction={downloadStartFunction} diff --git a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx index f9ec52be..cd714270 100644 --- a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import styles from "./Translation.module.scss"; +import { updateLabelsById } from "@utils"; import { useDeepLAuthKey, @@ -40,6 +41,13 @@ const CTranslate2WeightType_Box = () => { downloadCTranslate2Weight(id); }; + const new_labels = [ + { id: "small", label: t("config_page.ctranslate2_weight_type.small", {capacity: "418MB"}) }, + { id: "large", label: t("config_page.ctranslate2_weight_type.large", {capacity: "1.2GB"}) }, + ]; + + const c_translate2_weight_types = updateLabelsById(currentCTranslate2WeightTypeStatus.data, new_labels); + return ( <> { {translator: t("main_page.translator")} )} name="ctransalte2_weight_type" - options={currentCTranslate2WeightTypeStatus.data} + options={c_translate2_weight_types} checked_variable={currentSelectedCTranslate2WeightType} selectFunction={selectFunction} downloadStartFunction={downloadStartFunction} From 9d620e98343c720ed280f9d01cdef34bee54552f Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Wed, 13 Nov 2024 12:35:09 +0900 Subject: [PATCH 6/6] [Update] Config Page: Transcription Tab. Add SelectedTranscriptionEngine. --- locales/en.json | 5 ++- .../transcription/Transcription.jsx | 32 ++++++++++++++++++- src-ui/logics/configs/index.js | 1 + .../useSelectedTranscriptionEngine.js | 24 ++++++++++++++ src-ui/logics/useReceiveRoutes.js | 5 +++ src-ui/store.js | 1 + 6 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js diff --git a/locales/en.json b/locales/en.json index 56835543..f3399a70 100644 --- a/locales/en.json +++ b/locales/en.json @@ -203,9 +203,8 @@ "desc": "It is the lower limit for the number of transcribed words, and only when this number is exceeded will the transcription results be displayed logs.", "error_message": "You can set a number equal to or greater than 0." }, - "use_whisper_feature": { - "label": "Use Whisper Model As Transcription", - "desc": "In some languages, the accuracy of speech recognition may improve. During speech recognition usage, CPU usage increases, so please consider your PC specs before using this feature." + "select_transcription_engine": { + "label": "Select Transcription Engine" }, "whisper_weight_type": { "label": "Select Whisper Model", diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx index 162e20b9..9d11bd9f 100644 --- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx @@ -12,6 +12,7 @@ import { useSpeakerPhraseTimeout, useSpeakerMaxWords, + useSelectedTranscriptionEngine, useWhisperWeightTypeStatus, useSelectedWhisperWeightType, } from "@logics_configs"; @@ -20,6 +21,7 @@ import { EntryContainer, WordFilterContainer, DownloadModelsContainer, + RadioButtonContainer, } from "../_templates/Templates"; export const Transcription = () => { @@ -27,7 +29,7 @@ export const Transcription = () => { <> - + ); }; @@ -233,6 +235,34 @@ const SpeakerMaxWords_Box = () => { }; + +const TranscriptionEngine_Container = () => { + return ( + <> + + + + ); +}; + +const TranscriptionEngine_Box = () => { + const { t } = useTranslation(); + const { currentSelectedTranscriptionEngine, setSelectedTranscriptionEngine } = useSelectedTranscriptionEngine(); + + return ( + + ); +}; + const WhisperWeightType_Box = () => { const { t } = useTranslation(); const { diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index 4a3399ee..989621c2 100644 --- a/src-ui/logics/configs/index.js +++ b/src-ui/logics/configs/index.js @@ -31,6 +31,7 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout"; export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords"; +export { useSelectedTranscriptionEngine } from "./transcription/useSelectedTranscriptionEngine"; export { useWhisperWeightTypeStatus } from "./transcription/useWhisperWeightTypeStatus"; export { useSelectedWhisperWeightType } from "./transcription/useSelectedWhisperWeightType"; diff --git a/src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js b/src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js new file mode 100644 index 00000000..43f0b6ab --- /dev/null +++ b/src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js @@ -0,0 +1,24 @@ +import { useStore_SelectedTranscriptionEngine } from "@store"; +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useSelectedTranscriptionEngine = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const { currentSelectedTranscriptionEngine, updateSelectedTranscriptionEngine, pendingSelectedTranscriptionEngine } = useStore_SelectedTranscriptionEngine(); + + const getSelectedTranscriptionEngine = () => { + pendingSelectedTranscriptionEngine(); + asyncStdoutToPython("/get/data/selected_transcription_engine"); + }; + + const setSelectedTranscriptionEngine = (selected_transcription_engine) => { + pendingSelectedTranscriptionEngine(); + asyncStdoutToPython("/set/data/selected_transcription_engine", selected_transcription_engine); + }; + + return { + currentSelectedTranscriptionEngine, + getSelectedTranscriptionEngine, + updateSelectedTranscriptionEngine, + setSelectedTranscriptionEngine, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js index c194062e..6f1a4df4 100644 --- a/src-ui/logics/useReceiveRoutes.js +++ b/src-ui/logics/useReceiveRoutes.js @@ -48,6 +48,7 @@ import { useDeepLAuthKey, useCTranslate2WeightTypeStatus, useSelectedCTranslate2WeightType, + useSelectedTranscriptionEngine, useSelectedWhisperWeightType, useWhisperWeightTypeStatus, useOverlaySettings, @@ -129,6 +130,7 @@ export const useReceiveRoutes = () => { downloadedCTranslate2WeightType, } = useCTranslate2WeightTypeStatus(); + const { updateSelectedTranscriptionEngine } = useSelectedTranscriptionEngine(); const { updateSelectedWhisperWeightType } = useSelectedWhisperWeightType(); const { updateDownloadedWhisperWeightTypeStatus, @@ -351,6 +353,9 @@ export const useReceiveRoutes = () => { "/get/data/speaker_max_phrases": updateSpeakerMaxWords, "/set/data/speaker_max_phrases": updateSpeakerMaxWords, + "/get/data/selected_transcription_engine": updateSelectedTranscriptionEngine, + "/set/data/selected_transcription_engine": updateSelectedTranscriptionEngine, + "/get/data/whisper_weight_type": updateSelectedWhisperWeightType, "/set/data/whisper_weight_type": updateSelectedWhisperWeightType, diff --git a/src-ui/store.js b/src-ui/store.js index 84d364f3..4fd682fc 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -201,6 +201,7 @@ export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxW export const { atomInstance: Atom_SelectedWhisperWeightType, useHook: useStore_SelectedWhisperWeightType } = createAtomWithHook("", "SelectedWhisperWeightType"); export const { atomInstance: Atom_WhisperWeightTypeStatus, useHook: useStore_WhisperWeightTypeStatus } = createAtomWithHook(whisper_weight_type_status, "WhisperWeightTypeStatus"); +export const { atomInstance: Atom_SelectedTranscriptionEngine, useHook: useStore_SelectedTranscriptionEngine } = createAtomWithHook(whisper_weight_type_status, "SelectedTranscriptionEngine"); // VR