-
{t("main_page.translator")}:
+
{t("main_page.translator")}:
{selected_label}
{is_selected_same_language
?
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 45a45fad..54e50f3e 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
@@ -33,7 +33,7 @@ export const TranslatorSelector = ({selected_id, translation_engines, is_selecte
{t("main_page.translator_selector.is_selected_same_language", {
your_language: t("main_page.your_language"),
target_language: t("main_page.target_language"),
- translator_ctranslate2: t("main_page.translator_ctranslate2"),
+ ctranslate2: "CTranslate2",
})}
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
index efdd0854..b33d0782 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss
@@ -34,9 +34,9 @@
gap: 1rem;
}
-$box_size: 6.8rem;
+$box_size: 6rem;
.box {
- width: $box_size;
+ width: 9.2rem;
height: $box_size;
background-color: var(--dark_875_color);
display: flex;
@@ -44,7 +44,7 @@ $box_size: 6.8rem;
align-items: center;
white-space: pre-wrap;
text-align: center;
- border-radius: 0.6rem;
+ border-radius: 0.2rem;
cursor: pointer;
&:hover {
background-color: var(--dark_825_color);
diff --git a/src-ui/ui_configs.js b/src-ui/ui_configs.js
index ef58fba8..4bee9957 100644
--- a/src-ui/ui_configs.js
+++ b/src-ui/ui_configs.js
@@ -54,11 +54,11 @@ 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: "DeepL_API", label: `DeepL API`, 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 },
+ { id: "CTranslate2", label: `AI\nCTranslate2`, is_available: false, is_default: true },
];
export const ctranslate2_weight_type_status = [
From fa2c851c5bfb138ddb18931b03ebc840280a2c9c Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sat, 15 Mar 2025 15:06:50 +0900
Subject: [PATCH 2/3] [bugfix] Main Page: LanguageSelector: Go back button: add
min width for prevent to shrink its width too much. Config Page:
SidebarSection: to not scroll x axis even if its label overflowed.
---
.../config_page/sidebar_section/SidebarSection.module.scss | 3 +++
.../LanguageSelectorTopBar.module.scss | 7 ++++++-
2 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
index 383ef8cb..2e27f0a8 100644
--- a/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
+++ b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
@@ -9,6 +9,7 @@
flex-direction: column;
justify-content: space-between;
overflow-y: auto;
+ // overflow-x: hidden;
height: 100%;
max-height: 60rem;
}
@@ -59,7 +60,9 @@
}
.tab_text {
+ overflow: hidden;
font-size: 1.6rem;
+ text-overflow: ellipsis;
}
.separated_tabs_wrapper {
diff --git a/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss b/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss
index b2e7d219..9d0bc94a 100644
--- a/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss
+++ b/src-ui/app/main_page/main_section/language_selector/language_selector_top_bar/LanguageSelectorTopBar.module.scss
@@ -16,7 +16,12 @@
position: absolute;
left: 0;
background-color: var(--dark_800_color);
- padding: 1.2rem;
+ padding: 0 2rem 0 1.6rem;
+ height: 100%;
+ min-width: 8rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
cursor: pointer;
&:hover{
background-color: var(--dark_750_color);
From ab39421c79dbf458f133b706b076bf987e300bad Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 16 Mar 2025 09:56:30 +0900
Subject: [PATCH 3/3] [Update/bugfix] Config Page: Transcription: Change the
input design entry to dropdowns. It will fix the bug that cant put e.g. the
user wanna put "10" actually, then, type "1" at first, but validation says
"1" is not allowed.
---
.../transcription/Transcription.jsx | 157 +++++++-----------
src-ui/utils.js | 8 +
2 files changed, 64 insertions(+), 101 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 e7294a18..c7c9368d 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,7 +1,6 @@
-import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import styles from "./Transcription.module.scss";
-import { updateLabelsById } from "@utils";
+import { updateLabelsById, genNumObjArray } from "@utils";
import {
useMicRecordTimeout,
@@ -21,7 +20,6 @@ import {
} from "@logics_configs";
import {
- EntryContainer,
WordFilterContainer,
DownloadModelsContainer,
RadioButtonContainer,
@@ -59,82 +57,61 @@ const Mic_Container = () => {
const MicRecordTimeout_Box = () => {
const { t } = useTranslation();
- const [ui_variable, setUiVariable] = useState("");
const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout();
- const onChangeFunction = (e) => {
- const value = e.currentTarget.value;
- if (value === "") {
- setUiVariable("");
- } else {
- setUiVariable(value);
- setMicRecordTimeout(value);
- }
+
+ const selectFunction = (selected_data) => {
+ setMicRecordTimeout(selected_data.selected_id);
};
- useEffect(()=> {
- setUiVariable(currentMicRecordTimeout.data);
- }, [currentMicRecordTimeout]);
-
return (
-
);
};
const MicPhraseTimeout_Box = () => {
const { t } = useTranslation();
- const [ui_variable, setUiVariable] = useState("");
const { currentMicPhraseTimeout, setMicPhraseTimeout } = useMicPhraseTimeout();
- const onChangeFunction = (e) => {
- const value = e.currentTarget.value;
- if (value === "") {
- setUiVariable("");
- } else {
- setUiVariable(value);
- setMicPhraseTimeout(value);
- }
+
+ const selectFunction = (selected_data) => {
+ setMicPhraseTimeout(selected_data.selected_id);
};
- useEffect(()=> {
- setUiVariable(currentMicPhraseTimeout.data);
- }, [currentMicPhraseTimeout]);
-
return (
-
);
};
const MicMaxWords_Box = () => {
const { t } = useTranslation();
- const [ui_variable, setUiVariable] = useState("");
const { currentMicMaxWords, setMicMaxWords } = useMicMaxWords();
- const onChangeFunction = (e) => {
- const value = e.currentTarget.value;
- if (value === "") {
- setUiVariable("");
- } else {
- setUiVariable(value);
- setMicMaxWords(value);
- }
+
+ const selectFunction = (selected_data) => {
+ setMicMaxWords(selected_data.selected_id);
};
- useEffect(()=> {
- setUiVariable(currentMicMaxWords.data);
- }, [currentMicMaxWords]);
-
return (
-
);
};
@@ -167,82 +144,60 @@ const Speaker_Container = () => {
const SpeakerRecordTimeout_Box = () => {
const { t } = useTranslation();
- const [ui_variable, setUiVariable] = useState("");
const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout();
- const onChangeFunction = (e) => {
- const value = e.currentTarget.value;
- if (value === "") {
- setUiVariable("");
- } else {
- setUiVariable(value);
- setSpeakerRecordTimeout(value);
- }
+
+ const selectFunction = (selected_data) => {
+ setSpeakerRecordTimeout(selected_data.selected_id);
};
- useEffect(()=> {
- setUiVariable(currentSpeakerRecordTimeout.data);
- }, [currentSpeakerRecordTimeout]);
-
return (
-
);
};
const SpeakerPhraseTimeout_Box = () => {
const { t } = useTranslation();
- const [ui_variable, setUiVariable] = useState("");
const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
- const onChangeFunction = (e) => {
- const value = e.currentTarget.value;
- if (value === "") {
- setUiVariable("");
- } else {
- setUiVariable(value);
- setSpeakerPhraseTimeout(value);
- }
+
+ const selectFunction = (selected_data) => {
+ setSpeakerPhraseTimeout(selected_data.selected_id);
};
-
- useEffect(()=> {
- setUiVariable(currentSpeakerPhraseTimeout.data);
- }, [currentSpeakerPhraseTimeout]);
-
return (
-
);
};
const SpeakerMaxWords_Box = () => {
const { t } = useTranslation();
- const [ui_variable, setUiVariable] = useState("");
const { currentSpeakerMaxWords, setSpeakerMaxWords } = useSpeakerMaxWords();
- const onChangeFunction = (e) => {
- const value = e.currentTarget.value;
- if (value === "") {
- setUiVariable("");
- } else {
- setUiVariable(value);
- setSpeakerMaxWords(value);
- }
+
+ const selectFunction = (selected_data) => {
+ setSpeakerMaxWords(selected_data.selected_id);
};
- useEffect(()=> {
- setUiVariable(currentSpeakerMaxWords.data);
- }, [currentSpeakerMaxWords]);
-
return (
-
);
};
diff --git a/src-ui/utils.js b/src-ui/utils.js
index 145dc403..96a87c75 100644
--- a/src-ui/utils.js
+++ b/src-ui/utils.js
@@ -49,4 +49,12 @@ export const updateLabelsById = (data_array, updates) => {
const update = updates.find(update_item => update_item.id === item.id);
return update ? { ...item, label: update.label } : item;
});
+};
+
+export const genNumArray = (count, start_from = 0) => {
+ return [...Array(count).keys()].map(i => i + start_from);
+};
+
+export const genNumObjArray = (count, start_from = 0) => {
+ return arrayToObject(genNumArray(count, start_from));
};
\ No newline at end of file