Merge branch 'ui_weight_types' into for_webui

src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx

@@ -0,0 +1,79 @@
+import { useState, useEffect } from "react";
+import clsx from "clsx";
+import CircularProgress from '@mui/material/CircularProgress';
+import styles from "./DownloadModels.module.scss";
+import {
+    RadioButton,
+    // DownloadModels,
+} from "../index";
+export const DownloadModels = (props) => {
+    const options = props.options.map(item => ({
+        ...item,
+        disabled: !item.is_downloaded
+    }));
+
+    return (
+        <>
+            <RadioButton
+                selectFunction={props.selectFunction}
+                name={props.name}
+                options={options}
+                checked_variable={props.checked_variable}
+                column={true}
+                ChildComponent={ModelSelector}
+                downloadStartFunction={props.downloadStartFunction}
+            />
+        </>
+        // <div className={styles.container}>
+        //     {props.models.map((option) => (
+        //         <ModelSelector key={option.model_id} option={option} {...props}/>
+        //     ))}
+        // </div>
+    );
+};
+
+const ModelSelector = ({option, ...props}) => {
+    const [circular_color, setCircularColor] = useState("");
+    const [circular_color_2, setCircularColor2] = useState("");
+    useEffect(() => {
+        const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--dark_600_color");
+        setCircularColor(circular_color.trim());
+        const circular_color_2 = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
+        setCircularColor2(circular_color_2.trim());
+    }, []);
+
+
+    const renderContent = () => {
+        const circular_progress = Math.floor(option.progress / 10) * 10;
+
+        switch (true) {
+            case option.progress !== null:
+                return (
+                    <>
+                        <CircularProgress
+                            variant={(option.progress === 100) ? "indeterminate" : "determinate"}
+                            value={circular_progress}
+                            size="3rem"
+                            sx={{ color: circular_color_2 }}
+                        />
+                        <p className={styles.progress_label}>{`${Math.round(option.progress)}%`}</p>
+                    </>
+                );
+            case option.is_pending:
+                return <CircularProgress size="3rem" sx={{ color: circular_color }}/>;
+            case !option.is_downloaded:
+                return (
+                    <button
+                        className={styles.download_button}
+                        onClick={() => props.downloadStartFunction(option.id)}
+                    >
+                        <p className={styles.download_button_label}>Download</p>
+                    </button>
+                );
+            default:
+                return null;
+        }
+    };
+
+    return <div className={styles.download_container}>{renderContent()}</div>;
+};

src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.module.scss

@@ -0,0 +1,32 @@
+@import "@scss_mixins";
+
+.download_container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 8rem;
+}
+
+.download_button {
+    pointer-events: auto;
+    background-color: var(--dark_800_color);
+    padding: 0.8rem;
+    flex-shrink: 0;
+    &:hover {
+        background-color: var(--dark_750_color);
+    }
+    &:active {
+        background-color: var(--dark_800_color);
+    }
+}
+.download_button_label {
+    font-size: 1.2rem;
+    color: var(--dark_basic_text_color);
+}
+
+.progress_label {
+    position: absolute;
+    font-size: 1rem;
+    color: var(--dark_basic_text_color);
+}

src-ui/app/config_page/setting_section/setting_box/_components/index.js

@@ -9,3 +9,4 @@ export { Slider } from "./slider/Slider";
 export { SwitchBox } from "./switch_box/SwitchBox";
 export { ThresholdComponent } from "./threshold_component/ThresholdComponent";
 export { WordFilter, WordFilterListToggleComponent } from "./word_filter/WordFilter";
+export { DownloadModels } from "./download_models/DownloadModels";

src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
-    flex-shrink: 0;
+    // flex-shrink: 0;
 }
 
 .label {

src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.jsx

@@ -1,33 +1,42 @@
 import styles from "./RadioButton.module.scss";
+import clsx from "clsx";
 
 export const RadioButton = (props) => {
+    const containerClass = clsx(styles.container, {
+        [styles.column]: props.column === true,
+    });
+
     return (
-        <div className={styles.container}>
+        <div className={containerClass}>
-            {props.options.map((option) => (
-                <label key={option.radio_button_id} className={styles.radio_button_wrapper}>
-                    {props.checked_variable.data === option.radio_button_id
-                        ? <>
             {props.checked_variable.state === "pending" && <span className={styles.loader}></span>}
+            {props.options.map((option) => {
+                const radioWrapperClass = clsx(styles.radio_button_container, {
+                    [styles.is_selected]: props.checked_variable.data === option.id,
+                });
+
+                const labelClass = clsx(styles.radio_button_wrapper, {
+                    [styles.is_selected]: props.checked_variable.data === option.id,
+                    [styles.disabled]: option.disabled === true,
+                });
+
+                return (
+                    <div key={option.id} className={radioWrapperClass}>
+                        <label className={labelClass}>
                             <input
                                 className={styles.radio_button_input}
                                 type="radio"
                                 name={props.name}
-                                value={option.radio_button_id}
+                                value={option.id}
-                                onChange={() => props.selectFunction(option.radio_button_id)}
+                                onChange={() => props.selectFunction(option.id)}
-                                checked
+                                checked={props.checked_variable.data === option.id}
+                                disabled={option.disabled === true}
                             />
-                        </>
-                        : <input
-                            className={styles.radio_button_input}
-                            type="radio"
-                            name={props.name}
-                            value={option.radio_button_id}
-                            onChange={() => props.selectFunction(option.radio_button_id)}
-                        />
-                    }
                             <p className={styles.radio_button_label}>{option.label}</p>
                         </label>
-            ))}
+                        {props.ChildComponent && <props.ChildComponent option={option} {...props} />}
+                    </div>
+                );
+            })}
         </div>
     );
 };

src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss

@@ -2,24 +2,44 @@
 
 .container {
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     gap: 0.4rem;
+    position: relative;
+    flex-shrink: 0;
+    &.column {
+        flex-direction: column;
     }
+}
+
+.radio_button_container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+    position: relative;
+}
+
 
 .radio_button_wrapper {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     cursor: pointer;
     gap: 1rem;
     padding: 0.6rem 0.8rem;
     border-radius: 0.4rem;
-    position: relative;
+    min-width: 20rem;
     &:hover {
-        background-color: var(--dark_800_color);
+        background-color: var(--dark_850_color);
     }
     &:active {
-        background-color: var(--dark_850_color);
+        background-color: var(--dark_925_color);
+    }
+    &.is_selected {
+        pointer-events: none;
+    }
+    &.disabled {
+        pointer-events: none;
+        color: var(--dark_600_color);
     }
 }
 
@@ -28,19 +48,24 @@
     margin: 0;
     width: 2rem;
     height: 2rem;
-    border: 0.2rem solid var(--dark_600_color);
+    border: 0.3rem solid var(--dark_600_color);
     border-radius: 50%;
     transition: border-color .1s ease, border-width .1s ease;
+    flex-shrink: 0;
     cursor: inherit;
     &:checked {
         border-color: var(--primary_400_color);
         border-width: 0.6rem;
     }
+    &:disabled {
+        border-color: var(--dark_825_color);
+    }
 }
 
 .radio_button_label {
     font-size: 1.4rem;
-    font-weight: 300;
+    font-weight: 400;
+    flex-shrink: 0;
 }
 
 .loader {

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx

@@ -14,6 +14,7 @@ import {
     ActionButton,
     WordFilter,
     WordFilterListToggleComponent,
+    DownloadModels,
 } from "../_components/";
 
 export const useOnMouseLeaveDropdownMenu = () => {
@@ -119,3 +120,12 @@ export const WordFilterContainer = (props) => {
         </div>
     );
 };
+
+export const DownloadModelsContainer = (props) => {
+    return (
+        <div className={styles.container}>
+            <LabelComponent label={props.label} desc={props.desc} />
+            <DownloadModels {...props}/>
+        </div>
+    );
+};

src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss

@@ -4,7 +4,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 2rem;
-    gap: 2rem;
+    gap: 6rem;
     &.flex_column {
         flex-direction: column;
     }

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx

@@ -13,10 +13,6 @@ import {
     useTransparency,
 } from "@logics_configs";
 
-import {
-    LabelComponent
-} from "../_components/";
-
 import {
     SliderContainer,
     DropdownMenuContainer,
@@ -42,34 +38,14 @@ const UiLanguageContainer = () => {
 
     const is_not_en_lang = currentUiLanguage.data !== "en" && currentUiLanguage.data !== undefined;
     return (
-        <div className={styles.ui_language_container}>
+        <RadioButtonContainer
-            <div className={styles.ui_language_label_wrapper}>
+            label={is_not_en_lang ? "UI Language" : t("config_page.ui_language.label")}
-                {is_not_en_lang
+            desc={is_not_en_lang ? t("config_page.ui_language.label") : false}
-                ?
+            selectFunction={setUiLanguage}
-                    <>
-                        <LabelComponent label="UI Language" desc={t("config_page.ui_language.label")}/>
-                    </>
-                :
-                    <LabelComponent label={t("config_page.ui_language.label")}/>
-                }
-            </div>
-            <div className={styles.ui_language_selector_container}>
-                {currentUiLanguage.state === "pending" && <span className={styles.loader}></span>}
-                {Object.entries(ui_configs.selectable_ui_languages).map(([key, value]) => (
-                    <label key={key} className={clsx(styles.radio_button_wrapper, { [styles.is_selected]: currentUiLanguage.data === key } )}>
-                        <input
-                            className={styles.radio_button_input}
-                            type="radio"
             name="ui_language"
-                            value={key}
+            options={ui_configs.selectable_ui_languages}
-                            onChange={() => setUiLanguage(key)}
+            checked_variable={currentUiLanguage}
-                            checked={currentUiLanguage.data === key}
         />
-                        <p className={styles.radio_button_label}>{value}</p>
-                    </label>
-                ))}
-            </div>
-        </div>
     );
 };
 
@@ -166,11 +142,12 @@ const SendMessageButtonTypeContainer = () => {
             selectFunction={setSendMessageButtonType}
             name="send_message_button_type"
             options={[
-                { radio_button_id: "hide", label: t("config_page.send_message_button_type.hide") },
+                { id: "hide", label: t("config_page.send_message_button_type.hide") },
-                { radio_button_id: "show", label: t("config_page.send_message_button_type.show") },
+                { id: "show", label: t("config_page.send_message_button_type.show") },
-                { radio_button_id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
+                { id: "show_and_disable_enter_key", label: t("config_page.send_message_button_type.show_and_disable_enter_key") },
             ]}
             checked_variable={currentSendMessageButtonType}
+            column={true}
         />
     );
 };

src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.module.scss

@@ -1,66 +1 @@
 @import "@scss_mixins";
-
-.ui_language_container {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    padding: 2rem;
-    border-radius: 0.6rem;
-}
-
-.ui_language_selector_container {
-    display: flex;
-    gap: 1rem;
-    position: relative;
-}
-.ui_language_label_wrapper {
-    display: flex;
-    align-items: center;
-}
-.ui_language_secondly_label {
-    font-size: 1.2rem;
-}
-
-.radio_button_wrapper {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    gap: 0.6rem;
-    padding: 0.6rem 1rem;
-    border-radius: 0.4rem;
-    position: relative;
-    &:hover {
-        background-color: var(--dark_850_color);
-    }
-    &:active {
-        background-color: var(--dark_925_color);
-    }
-    &.is_selected {
-        pointer-events: none;
-    }
-}
-
-.radio_button_input {
-    appearance: none;
-    margin: 0;
-    width: 2rem;
-    height: 2rem;
-    border: 0.3rem solid var(--dark_600_color);
-    border-radius: 50%;
-    transition: border-color .1s ease, border-width .1s ease;
-    cursor: inherit;
-    &:checked {
-        border-color: var(--primary_400_color);
-        border-width: 0.6rem;
-    }
-}
-
-.radio_button_label {
-    font-size: 1.4rem;
-    font-weight: 400;
-}
-
-.loader {
-    @include loader(2rem, 0.2rem, right, -3rem);
-}

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

@@ -10,11 +10,15 @@ import {
     useSpeakerRecordTimeout,
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
+
+    useWhisperWeightTypeStatus,
+    useSelectedWhisperWeightType,
 } from "@logics_configs";
 
 import {
     EntryContainer,
     WordFilterContainer,
+    DownloadModelsContainer,
 } from "../_templates/Templates";
 
 export const Transcription = () => {
@@ -22,6 +26,7 @@ export const Transcription = () => {
         <>
             <Mic_Container />
             <Speaker_Container />
+            <WhisperWeightType_Box />
         </>
     );
 };
@@ -225,3 +230,40 @@ const SpeakerMaxWords_Box = () => {
         />
     );
 };
+
+
+const WhisperWeightType_Box = () => {
+    const { t } = useTranslation();
+    const {
+        currentWhisperWeightTypeStatus,
+        pendingWhisperWeightType,
+        downloadWhisperWeight,
+    } = useWhisperWeightTypeStatus();
+    const { currentSelectedWhisperWeightType, setSelectedWhisperWeightType } = useSelectedWhisperWeightType();
+
+    const selectFunction = (id) => {
+        setSelectedWhisperWeightType(id);
+    };
+
+    const downloadStartFunction = (id) => {
+        pendingWhisperWeightType(id);
+        downloadWhisperWeight(id);
+    };
+
+    return (
+        <>
+            <DownloadModelsContainer
+                label={t("config_page.whisper_weight_type.label")}
+                desc={t(
+                    "config_page.whisper_weight_type.desc",
+                    {translator: t("main_page.translator")}
+                )}
+                name="whisper_weight_type"
+                options={currentWhisperWeightTypeStatus.data}
+                checked_variable={currentSelectedWhisperWeightType}
+                selectFunction={selectFunction}
+                downloadStartFunction={downloadStartFunction}
+            />
+        </>
+    );
+};

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

@@ -4,13 +4,61 @@ import styles from "./Translation.module.scss";
 
 import {
     useDeepLAuthKey,
+    useCTranslate2WeightTypeStatus,
+    useSelectedCTranslate2WeightType,
 } from "@logics_configs";
 
 import {
+    DownloadModelsContainer,
     DeeplAuthKeyContainer,
 } from "../_templates/Templates";
 
 export const Translation = () => {
+    return (
+        <>
+            <CTranslate2WeightType_Box />
+            <DeeplAuthKey_Box />
+        </>
+    );
+};
+
+const CTranslate2WeightType_Box = () => {
+    const { t } = useTranslation();
+    const {
+        currentCTranslate2WeightTypeStatus,
+        pendingCTranslate2WeightType,
+        downloadCTranslate2Weight,
+    } = useCTranslate2WeightTypeStatus();
+    const { currentSelectedCTranslate2WeightType, setSelectedCTranslate2WeightType } = useSelectedCTranslate2WeightType();
+
+    const selectFunction = (id) => {
+        setSelectedCTranslate2WeightType(id);
+    };
+
+    const downloadStartFunction = (id) => {
+        pendingCTranslate2WeightType(id);
+        downloadCTranslate2Weight(id);
+    };
+
+    return (
+        <>
+            <DownloadModelsContainer
+                label={t("config_page.ctranslate2_weight_type.label")}
+                desc={t(
+                    "config_page.ctranslate2_weight_type.desc",
+                    {translator: t("main_page.translator")}
+                )}
+                name="ctransalte2_weight_type"
+                options={currentCTranslate2WeightTypeStatus.data}
+                checked_variable={currentSelectedCTranslate2WeightType}
+                selectFunction={selectFunction}
+                downloadStartFunction={downloadStartFunction}
+            />
+        </>
+    );
+};
+
+const DeeplAuthKey_Box = () => {
     const [input_value, seInputValue] = useState("");
     const { t } = useTranslation();
     const { currentDeepLAuthKey, setDeepLAuthKey, deleteDeepLAuthKey } = useDeepLAuthKey();

src-ui/logics/configs/index.js

@@ -31,7 +31,12 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout
 export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
 export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
 
+export { useWhisperWeightTypeStatus } from "./transcription/useWhisperWeightTypeStatus";
+export { useSelectedWhisperWeightType } from "./transcription/useSelectedWhisperWeightType";
+
 export { useDeepLAuthKey } from "./translation/useDeepLAuthKey";
+export { useCTranslate2WeightTypeStatus } from "./translation/useCTranslate2WeightTypeStatus";
+export { useSelectedCTranslate2WeightType } from "./translation/useSelectedCTranslate2WeightType";
 
 export { useIsEnabledOverlaySmallLog } from "./vr/useIsEnabledOverlaySmallLog";
 export { useOverlaySettings } from "./vr/useOverlaySettings";

src-ui/logics/configs/transcription/useSelectedWhisperWeightType.js

@@ -0,0 +1,24 @@
+import { useStore_SelectedWhisperWeightType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedWhisperWeightType = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedWhisperWeightType, updateSelectedWhisperWeightType, pendingSelectedWhisperWeightType } = useStore_SelectedWhisperWeightType();
+
+    const getSelectedWhisperWeightType = () => {
+        pendingSelectedWhisperWeightType();
+        asyncStdoutToPython("/get/data/whisper_weight_type");
+    };
+
+    const setSelectedWhisperWeightType = (selected_whisper_weight_type) => {
+        pendingSelectedWhisperWeightType();
+        asyncStdoutToPython("/set/data/whisper_weight_type", selected_whisper_weight_type);
+    };
+
+    return {
+        currentSelectedWhisperWeightType,
+        getSelectedWhisperWeightType,
+        updateSelectedWhisperWeightType,
+        setSelectedWhisperWeightType,
+    };
+};

src-ui/logics/configs/transcription/useWhisperWeightTypeStatus.js

@@ -0,0 +1,60 @@
+import { useStore_WhisperWeightTypeStatus } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useWhisperWeightTypeStatus = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentWhisperWeightTypeStatus, updateWhisperWeightTypeStatus, pendingWhisperWeightTypeStatus } = useStore_WhisperWeightTypeStatus();
+
+    const updateDownloadedWhisperWeightTypeStatus = (downloaded_weight_type_status) => {
+        updateWhisperWeightTypeStatus((old_status) =>
+            old_status.data.map((item) => ({
+                ...item,
+                is_downloaded: downloaded_weight_type_status[item.id] ?? item.is_downloaded,
+            }))
+        );
+    };
+    const updateDownloadProgressWhisperWeightTypeStatus = (payload) => {
+        if (payload === true) return console.error("fix me.");
+
+        updateWhisperWeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                payload.weight_type === item.id
+                    ? { ...item, progress: payload.progress * 100 }
+                    : item
+            )
+        );
+    };
+    const pendingWhisperWeightType = (id) => {
+        updateWhisperWeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                id === item.id
+                    ? { ...item, is_pending: true }
+                    : item
+            )
+        );
+    };
+    const downloadedWhisperWeightType = (id) => {
+        updateWhisperWeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                id === item.id
+                    ? { ...item, is_downloaded: true, is_pending: false, progress: null }
+                    : item
+            )
+        );
+    };
+
+    const downloadWhisperWeight = (weight_type) => {
+        asyncStdoutToPython("/run/download_whisper_weight", weight_type);
+    };
+
+    return {
+        currentWhisperWeightTypeStatus,
+        updateWhisperWeightTypeStatus,
+
+        updateDownloadedWhisperWeightTypeStatus,
+        updateDownloadProgressWhisperWeightTypeStatus,
+        pendingWhisperWeightType,
+        downloadedWhisperWeightType,
+        downloadWhisperWeight,
+    };
+};

src-ui/logics/configs/translation/useCTranslate2WeightTypeStatus.js

@@ -0,0 +1,60 @@
+import { useStore_CTranslate2WeightTypeStatus } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useCTranslate2WeightTypeStatus = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentCTranslate2WeightTypeStatus, updateCTranslate2WeightTypeStatus, pendingCTranslate2WeightTypeStatus } = useStore_CTranslate2WeightTypeStatus();
+
+    const updateDownloadedCTranslate2WeightTypeStatus = (downloaded_weight_type_status) => {
+        updateCTranslate2WeightTypeStatus((old_status) =>
+            old_status.data.map((item) => ({
+                ...item,
+                is_downloaded: downloaded_weight_type_status[item.id] ?? item.is_downloaded,
+            }))
+        );
+    };
+    const updateDownloadProgressCTranslate2WeightTypeStatus = (payload) => {
+        if (payload === true) return console.error("fix me.");
+
+        updateCTranslate2WeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                payload.weight_type === item.id
+                    ? { ...item, progress: payload.progress * 100 }
+                    : item
+            )
+        );
+    };
+    const pendingCTranslate2WeightType = (id) => {
+        updateCTranslate2WeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                id === item.id
+                    ? { ...item, is_pending: true }
+                    : item
+            )
+        );
+    };
+    const downloadedCTranslate2WeightType = (id) => {
+        updateCTranslate2WeightTypeStatus((old_status) =>
+            old_status.data.map((item) =>
+                id === item.id
+                    ? { ...item, is_downloaded: true, is_pending: false, progress: null }
+                    : item
+            )
+        );
+    };
+
+    const downloadCTranslate2Weight = (weight_type) => {
+        asyncStdoutToPython("/run/download_ctranslate2_weight", weight_type);
+    };
+
+    return {
+        currentCTranslate2WeightTypeStatus,
+        updateCTranslate2WeightTypeStatus,
+
+        updateDownloadedCTranslate2WeightTypeStatus,
+        updateDownloadProgressCTranslate2WeightTypeStatus,
+        pendingCTranslate2WeightType,
+        downloadedCTranslate2WeightType,
+        downloadCTranslate2Weight,
+    };
+};

src-ui/logics/configs/translation/useSelectedCTranslate2WeightType.js

@@ -0,0 +1,24 @@
+import { useStore_SelectedCTranslate2WeightType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedCTranslate2WeightType = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedCTranslate2WeightType, updateSelectedCTranslate2WeightType, pendingSelectedCTranslate2WeightType } = useStore_SelectedCTranslate2WeightType();
+
+    const getSelectedCTranslate2WeightType = () => {
+        pendingSelectedCTranslate2WeightType();
+        asyncStdoutToPython("/get/data/ctranslate2_weight_type");
+    };
+
+    const setSelectedCTranslate2WeightType = (selected_ctranslate2_weight_type) => {
+        pendingSelectedCTranslate2WeightType();
+        asyncStdoutToPython("/set/data/ctranslate2_weight_type", selected_ctranslate2_weight_type);
+    };
+
+    return {
+        currentSelectedCTranslate2WeightType,
+        getSelectedCTranslate2WeightType,
+        updateSelectedCTranslate2WeightType,
+        setSelectedCTranslate2WeightType,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -46,6 +46,10 @@ import {
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
     useDeepLAuthKey,
+    useCTranslate2WeightTypeStatus,
+    useSelectedCTranslate2WeightType,
+    useSelectedWhisperWeightType,
+    useWhisperWeightTypeStatus,
     useOverlaySettings,
     useIsEnabledOverlaySmallLog,
     useOverlaySmallLogSettings,
@@ -118,6 +122,19 @@ export const useReceiveRoutes = () => {
     const { updateSpeakerMaxWords } = useSpeakerMaxWords();
 
     const { updateDeepLAuthKey } = useDeepLAuthKey();
+    const { updateSelectedCTranslate2WeightType } = useSelectedCTranslate2WeightType();
+    const {
+        updateDownloadedCTranslate2WeightTypeStatus,
+        updateDownloadProgressCTranslate2WeightTypeStatus,
+        downloadedCTranslate2WeightType,
+    } = useCTranslate2WeightTypeStatus();
+
+    const { updateSelectedWhisperWeightType } = useSelectedWhisperWeightType();
+    const {
+        updateDownloadedWhisperWeightTypeStatus,
+        updateDownloadProgressWhisperWeightTypeStatus,
+        downloadedWhisperWeightType,
+    } = useWhisperWeightTypeStatus();
 
     const { updateOverlaySettings } = useOverlaySettings();
     const { updateOverlaySmallLogSettings } = useOverlaySmallLogSettings();
@@ -278,6 +295,14 @@ export const useReceiveRoutes = () => {
         "/set/data/deepl_auth_key": updateDeepLAuthKey,
         "/delete/data/deepl_auth_key": () => updateDeepLAuthKey(""),
 
+        "/get/data/ctranslate2_weight_type": updateSelectedCTranslate2WeightType,
+        "/set/data/ctranslate2_weight_type": updateSelectedCTranslate2WeightType,
+
+        "/get/data/selectable_ctranslate2_weight_type_dict": updateDownloadedCTranslate2WeightTypeStatus,
+
+        "/run/download_ctranslate2_weight": updateDownloadProgressCTranslate2WeightTypeStatus,
+        "/run/downloaded_ctranslate2_weight": downloadedCTranslate2WeightType,
+
         // Transcription
         "/get/data/mic_record_timeout": updateMicRecordTimeout,
         "/set/data/mic_record_timeout": updateMicRecordTimeout,
@@ -326,6 +351,14 @@ export const useReceiveRoutes = () => {
         "/get/data/speaker_max_phrases": updateSpeakerMaxWords,
         "/set/data/speaker_max_phrases": updateSpeakerMaxWords,
 
+        "/get/data/whisper_weight_type": updateSelectedWhisperWeightType,
+        "/set/data/whisper_weight_type": updateSelectedWhisperWeightType,
+
+        "/get/data/selectable_whisper_weight_type_dict": updateDownloadedWhisperWeightTypeStatus,
+
+        "/run/download_whisper_weight": updateDownloadProgressWhisperWeightTypeStatus,
+        "/run/downloaded_whisper_weight": downloadedWhisperWeightType,
+
         // VR
         "/get/data/overlay_settings": updateOverlaySettings,
         "/set/data/overlay_settings": updateOverlaySettings,

src-ui/store.js

@@ -9,6 +9,8 @@ import {
 } from "@test_data";
 import {
     translator_status,
+    ctranslate2_weight_type_status,
+    whisper_weight_type_status,
 } from "@ui_configs";
 
 export const store = {
@@ -185,6 +187,8 @@ export const { atomInstance: Atom_MicWordFilterList, useHook: useStore_MicWordFi
 
 // Translation
 export const { atomInstance: Atom_DeepLAuthKey, useHook: useStore_DeepLAuthKey } = createAtomWithHook(null, "DeepLAuthKey");
+export const { atomInstance: Atom_SelectedCTranslate2WeightType, useHook: useStore_SelectedCTranslate2WeightType } = createAtomWithHook("", "SelectedCTranslate2WeightType");
+export const { atomInstance: Atom_CTranslate2WeightTypeStatus, useHook: useStore_CTranslate2WeightTypeStatus } = createAtomWithHook(ctranslate2_weight_type_status, "CTranslate2WeightTypeStatus");
 
 // Transcription
 export const { atomInstance: Atom_MicRecordTimeout, useHook: useStore_MicRecordTimeout } = createAtomWithHook(0, "MicRecordTimeout");
@@ -195,6 +199,10 @@ export const { atomInstance: Atom_SpeakerRecordTimeout, useHook: useStore_Speake
 export const { atomInstance: Atom_SpeakerPhraseTimeout, useHook: useStore_SpeakerPhraseTimeout } = createAtomWithHook(0, "SpeakerPhraseTimeout");
 export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxWords } = createAtomWithHook(0, "SpeakerMaxWords");
 
+export const { atomInstance: Atom_SelectedWhisperWeightType, useHook: useStore_SelectedWhisperWeightType } = createAtomWithHook("", "SelectedWhisperWeightType");
+export const { atomInstance: Atom_WhisperWeightTypeStatus, useHook: useStore_WhisperWeightTypeStatus } = createAtomWithHook(whisper_weight_type_status, "WhisperWeightTypeStatus");
+
+
 // VR
 export const { atomInstance: Atom_OverlaySettings, useHook: useStore_OverlaySettings } = createAtomWithHook({
     opacity: 1.0,

src-ui/ui_configs.js

@@ -12,10 +12,25 @@ export const ui_configs = {
     mic_threshold_max: 2000,
     speaker_threshold_min: 0,
     speaker_threshold_max: 4000,
-    selectable_ui_languages: {
+    selectable_ui_languages: [
-        en: "English",
+        {id: "en", label: "English"},
-        ja: "日本語",
+        {id: "ja", label: "日本語"},
-        ko: "한국어",
+        {id: "ko", label: "한국어"},
-        "zh-Hant": "繁體中文",
+        {id: "zh-Hant", label: "繁體中文"},
-    }
+    ]
 };
+
+export const ctranslate2_weight_type_status = [
+    { id: "small", label: "small", is_downloaded: false, progress: null },
+    { id: "large", label: "large", is_downloaded: false, progress: null },
+];
+
+export const whisper_weight_type_status = [
+    { id: "tiny", label: "tiny", is_downloaded: false, progress: null },
+    { id: "base", label: "base", is_downloaded: false, progress: null },
+    { id: "small", label: "small", is_downloaded: false, progress: null },
+    { id: "medium", label: "medium", is_downloaded: false, progress: null },
+    { id: "large-v1", label: "large-v1", is_downloaded: false, progress: null },
+    { id: "large-v2", label: "large-v2", is_downloaded: false, progress: null },
+    { id: "large-v3", label: "large-v3", is_downloaded: false, progress: null },
+];