every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactor/TMP2] Refactor UI components and connect to backend APIs. (Translation, Transcription models)

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-10-22 12:04:05 +09:00
parent 36fb857dbb
commit dfb08a96bb
4 changed files with 32 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
View File

@@ -246,19 +246,12 @@ const WhisperWeightType_Box = () => {
downloadWhisperWeightTypeStatus(id); downloadWhisperWeightTypeStatus(id);
}; };
const new_labels = [ const whisper_weight_types = currentWhisperWeightTypeStatus.data.map(item => {
{ id: "tiny", label: t("config_page.transcription.whisper_weight_type.model_template", {model_name: "tiny", capacity: "74.5MB"}) }, return {
{ id: "base", label: t("config_page.transcription.whisper_weight_type.recommended_model_template", {model_name: "base", capacity: "141MB"}) }, ...item,
{ id: "small", label: t("config_page.transcription.whisper_weight_type.model_template", {model_name: "small", capacity: "463MB"}) }, label: `${item.id} (${item.capacity})`,
{ id: "medium", label: t("config_page.transcription.whisper_weight_type.model_template", {model_name: "medium", capacity: "1.42GB"}) }, };
{ id: "large-v1", label: t("config_page.transcription.whisper_weight_type.model_template", {model_name: "large-v1", capacity: "2.87GB"}) }, });
{ id: "large-v2", label: t("config_page.transcription.whisper_weight_type.model_template", {model_name: "large-v2", capacity: "2.87GB"}) },
{ id: "large-v3", label: t("config_page.transcription.whisper_weight_type.model_template", {model_name: "large-v3", capacity: "2.87GB"}) },
{ id: "large-v3-turbo-int8", label: t("config_page.transcription.whisper_weight_type.model_template", {model_name: "large-v3-turbo-int8", capacity: "794MB"}) },
{ id: "large-v3-turbo", label: t("config_page.transcription.whisper_weight_type.model_template", {model_name: "large-v3-turbo", capacity: "1.58GB"}) },
];
const whisper_weight_types = updateLabelsById(currentWhisperWeightTypeStatus.data, new_labels);
return ( return (
<> <>

14
src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
View File

@@ -50,12 +50,14 @@ const CTranslate2WeightType_Box = () => {
downloadCTranslate2WeightTypeStatus(id); downloadCTranslate2WeightTypeStatus(id);
}; };
const new_labels = [
{ id: "small", label: t("config_page.translation.ctranslate2_weight_type.small", {capacity: "418MB"}) },
{ id: "large", label: t("config_page.translation.ctranslate2_weight_type.large", {capacity: "1.2GB"}) },
];
const c_translate2_weight_types = updateLabelsById(currentCTranslate2WeightTypeStatus.data, new_labels); const c_translate2_weight_types_object = currentCTranslate2WeightTypeStatus.data.map(item => {
return {
...item,
label: `${item.id} (${item.capacity})`,
};
});
return ( return (
<> <>
@@ -69,7 +71,7 @@ const CTranslate2WeightType_Box = () => {
{ctranslate2: "CTranslate2"} {ctranslate2: "CTranslate2"}
)} )}
name="ctranslate2_weight_type" name="ctranslate2_weight_type"
options={c_translate2_weight_types} options={c_translate2_weight_types_object}
checked_variable={currentSelectedCTranslate2WeightType} checked_variable={currentSelectedCTranslate2WeightType}
selectFunction={selectFunction} selectFunction={selectFunction}
downloadStartFunction={downloadStartFunction} downloadStartFunction={downloadStartFunction}

6
src-ui/app/others/splash_component/download_models_container/DownloadModelsContainer.jsx
View File

@@ -11,7 +11,7 @@ export const DownloadModelsContainer = () => {
const { currentCTranslate2WeightTypeStatus } = useTranslation(); const { currentCTranslate2WeightTypeStatus } = useTranslation();
const { currentWhisperWeightTypeStatus } = useTranscription(); const { currentWhisperWeightTypeStatus } = useTranscription();
const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "small"); const c_translate_2 = currentCTranslate2WeightTypeStatus.data.find(d => d.id === "m2m100_418M-ct2-int8");
const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base"); const whisper = currentWhisperWeightTypeStatus.data.find(d => d.id === "base");
if (c_translate_2.progress === null && whisper.progress === null) return null; if (c_translate_2.progress === null && whisper.progress === null) return null;
@@ -19,8 +19,8 @@ export const DownloadModelsContainer = () => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.progress_container}> <div className={styles.progress_container}>
<DownloadModelsProgress progress={c_translate_2.progress} type_label="CTranslate2 Model"/> <DownloadModelsProgress progress={c_translate_2.progress} type_label="Translation Model"/>
<DownloadModelsProgress progress={whisper.progress} type_label="Whisper Model"/> <DownloadModelsProgress progress={whisper.progress} type_label="Transcription Model"/>
</div> </div>
<div className={styles.labels_wrapper}> <div className={styles.labels_wrapper}>
<img src={vrct_logo_for_dark_mode} className={styles.logo_img}/> <img src={vrct_logo_for_dark_mode} className={styles.logo_img}/>

28
src-ui/ui_configs.js
View File

@@ -110,21 +110,23 @@ export const translator_status = [
]; ];
export const ctranslate2_weight_type_status = [ export const ctranslate2_weight_type_status = [
{ id: "small", label: "small", is_downloaded: false, progress: null }, { id: "m2m100_418M-ct2-int8", capacity: "418MB"},
{ id: "large", label: "large", is_downloaded: false, progress: null }, { id: "m2m100_1.2B-ct2-int8", capacity: "1.2GB"},
]; { id: "nllb-200-distilled-1.3B-ct2-int8", capacity: "1.3GB"},
{ id: "nllb-200-3.3B-ct2-int8", capacity: "3.3GB"},
].map(item => ({ ...item, is_downloaded: false, progress: null }));
export const whisper_weight_type_status = [ export const whisper_weight_type_status = [
{ id: "tiny", label: "tiny", is_downloaded: false, progress: null }, { id: "tiny", capacity: "74.5MB"},
{ id: "base", label: "base", is_downloaded: false, progress: null }, { id: "base", capacity: "141MB"},
{ id: "small", label: "small", is_downloaded: false, progress: null }, { id: "small", capacity: "463MB"},
{ id: "medium", label: "medium", is_downloaded: false, progress: null }, { id: "medium", capacity: "1.42GB"},
{ id: "large-v1", label: "large-v1", is_downloaded: false, progress: null }, { id: "large-v1", capacity: "2.87GB"},
{ id: "large-v2", label: "large-v2", is_downloaded: false, progress: null }, { id: "large-v2", capacity: "2.87GB"},
{ id: "large-v3", label: "large-v3", is_downloaded: false, progress: null }, { id: "large-v3", capacity: "2.87GB"},
{ id: "large-v3-turbo-int8", label: "large-v3-turbo-int8", is_downloaded: false, progress: null }, { id: "large-v3-turbo-int8", capacity: "794MB"},
{ id: "large-v3-turbo", label: "large-v3-turbo", is_downloaded: false, progress: null }, { id: "large-v3-turbo", capacity: "1.58GB"},
]; ].map(item => ({ ...item, is_downloaded: false, progress: null }));
export const supporters_data_url = "https://shiinasakamoto.github.io/vrct_supporters/assets/supporters/data.json"; export const supporters_data_url = "https://shiinasakamoto.github.io/vrct_supporters/assets/supporters/data.json";
export const supporters_images_url = "https://ShiinaSakamoto.github.io/vrct_supporters/assets/supporters"; export const supporters_images_url = "https://ShiinaSakamoto.github.io/vrct_supporters/assets/supporters";