[Update/Chore] Config Page: Put the selectors 'Compute Device' and 'Compute Type' to the same section.
Rename: UI: CTranslate2/Whisper Compute Type to Translation/Transcription Compute Type.
This commit is contained in:
@@ -133,7 +133,7 @@ config_page:
|
||||
desc: "You can choose the translation model when using the {{ctranslate2}} translation engine."
|
||||
small: "Basic Model ({{capacity}})"
|
||||
large: "High Accuracy Model ({{capacity}})"
|
||||
ctranslate2_compute_type:
|
||||
translation_compute_type:
|
||||
label: "Processing type for AI translation {{ctranslate2}}"
|
||||
translation_compute_device:
|
||||
label: "Processing device for AI translation"
|
||||
@@ -179,7 +179,7 @@ config_page:
|
||||
desc: "Larger models have higher accuracy, but they also consume more CPU or GPU resources.\nEspecially for models larger than medium, it may be difficult or even impossible to use them depending on the performance of your CPU/GPU."
|
||||
model_template: "{{model_name}} model ({{capacity}})"
|
||||
recommended_model_template: "{{model_name}} model ({{capacity}}) (Recommended)"
|
||||
whisper_compute_type:
|
||||
transcription_compute_type:
|
||||
label: "Processing type for AI transcription {{whisper}}"
|
||||
transcription_compute_device:
|
||||
label: "Processing Device Used For AI transcription"
|
||||
|
||||
@@ -133,7 +133,7 @@ config_page:
|
||||
desc: "翻訳エンジン「{{ctranslate2}}」で翻訳する際に、使用する翻訳モデルを選択できます。"
|
||||
small: "通常モデル ({{capacity}})"
|
||||
large: "高精度モデル ({{capacity}})"
|
||||
ctranslate2_compute_type:
|
||||
translation_compute_type:
|
||||
label: "AI翻訳 {{ctranslate2}} の処理タイプ"
|
||||
translation_compute_device:
|
||||
label: "AI翻訳の処理デバイス"
|
||||
@@ -179,7 +179,7 @@ config_page:
|
||||
desc: "容量が大きいモデルほど精度は高いですが、その分CPUやGPUを占有します。\n※特にmediumより容量の大きいモデルは、CPU/GPUの性能によっては使用すらも困難です。"
|
||||
model_template: "{{model_name}} モデル ({{capacity}})"
|
||||
recommended_model_template: "{{model_name}} モデル ({{capacity}}) [推奨]"
|
||||
whisper_compute_type:
|
||||
transcription_compute_type:
|
||||
label: "AI音声認識 {{whisper}} の処理タイプ"
|
||||
transcription_compute_device:
|
||||
label: "AI音声認識で使用する処理デバイス"
|
||||
|
||||
@@ -133,7 +133,7 @@ config_page:
|
||||
desc: "오프라인 번역 시의 번역 모델을 변경합니다."
|
||||
small: "일반 모델 ({{capacity}})"
|
||||
large: "정밀 모델 ({{capacity}})"
|
||||
ctranslate2_compute_type:
|
||||
translation_compute_type:
|
||||
label:
|
||||
translation_compute_device:
|
||||
label: "AI 번역 처리 장치"
|
||||
@@ -179,7 +179,7 @@ config_page:
|
||||
desc: "용량이 큰 모델일수록 정확도는 높지만, 그만큼 CPU나 GPU를 많이 차지합니다. * 특히 medium보다 용량이 큰 모델은 CPU/GPU 성능에 따라 사용 자체가 어려울 수 있습니다."
|
||||
model_template: "{{model_name}} 모델 ({{capacity}})"
|
||||
recommended_model_template: "{{model_name}} 모델 ({{capacity}}) (권장)"
|
||||
whisper_compute_type:
|
||||
transcription_compute_type:
|
||||
label:
|
||||
transcription_compute_device:
|
||||
label:
|
||||
|
||||
@@ -133,7 +133,7 @@ config_page:
|
||||
desc: "可以选择用于离线翻译的翻译模型"
|
||||
small: "普通模型 ({{capacity}})"
|
||||
large: "高精度模型 ({{capacity}})"
|
||||
ctranslate2_compute_type:
|
||||
translation_compute_type:
|
||||
label:
|
||||
translation_compute_device:
|
||||
label:
|
||||
@@ -179,7 +179,7 @@ config_page:
|
||||
desc:
|
||||
model_template: "{{model_name}} 模型 ({{capacity}})"
|
||||
recommended_model_template: "{{model_name}} 模型 ({{capacity}}) (推荐)"
|
||||
whisper_compute_type:
|
||||
transcription_compute_type:
|
||||
label:
|
||||
transcription_compute_device:
|
||||
label:
|
||||
|
||||
@@ -133,7 +133,7 @@ config_page:
|
||||
desc: "你可以選擇用於離線翻譯引擎的翻譯模型。"
|
||||
small: "基本模型({{capacity}})"
|
||||
large: "高準確率模型({{capacity}})"
|
||||
ctranslate2_compute_type:
|
||||
translation_compute_type:
|
||||
label:
|
||||
translation_compute_device:
|
||||
label:
|
||||
@@ -179,7 +179,7 @@ config_page:
|
||||
desc:
|
||||
model_template: "{{model_name}}模型({{capacity}})"
|
||||
recommended_model_template: "{{model_name}}模型({{capacity}})(推薦)"
|
||||
whisper_compute_type:
|
||||
transcription_compute_type:
|
||||
label:
|
||||
transcription_compute_device:
|
||||
label:
|
||||
|
||||
@@ -53,6 +53,7 @@ const Mic_Container = () => {
|
||||
setSelectedMicDevice(selected_data.selected_id);
|
||||
};
|
||||
|
||||
// [Fix me] currentEnableAutoMicSelect.data === "pending"; ? not currentEnableAutoMicSelect.state === "pending"; ??(.state)
|
||||
const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "pending";
|
||||
|
||||
const getLabels = () => {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useI18n } from "@useI18n";
|
||||
import styles from "./Transcription.module.scss";
|
||||
import { updateLabelsById, genNumObjArray } from "@utils";
|
||||
import { updateLabelsById, genNumObjArray, arrayToObject } from "@utils";
|
||||
import { useStore_IsBreakPoint } from "@store";
|
||||
|
||||
import {
|
||||
useTranscription,
|
||||
@@ -12,11 +13,14 @@ import {
|
||||
DownloadModelsContainer,
|
||||
RadioButtonContainer,
|
||||
DropdownMenuContainer,
|
||||
ComputeDeviceContainer,
|
||||
SliderContainer,
|
||||
|
||||
useOnMouseLeaveDropdownMenu,
|
||||
} from "../_templates/Templates";
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
LabelComponent,
|
||||
SectionLabelComponent,
|
||||
} from "../_components/";
|
||||
|
||||
@@ -201,7 +205,6 @@ const TranscriptionEngine_Container = () => {
|
||||
<SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} />
|
||||
<TranscriptionEngine_Box />
|
||||
<WhisperWeightType_Box />
|
||||
<WhisperComputeType_Box />
|
||||
<TranscriptionComputeDevice_Box />
|
||||
</div>
|
||||
);
|
||||
@@ -275,71 +278,76 @@ const WhisperWeightType_Box = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const WhisperComputeType_Box = () => {
|
||||
const { t } = useI18n();
|
||||
const { currentSelectableWhisperComputeTypeList } = useTranscription();
|
||||
const { currentSelectedWhisperComputeType, setSelectedWhisperComputeType } = useTranscription();
|
||||
|
||||
const selectFunction = (selected_data) => {
|
||||
setSelectedWhisperComputeType(selected_data.selected_id);
|
||||
};
|
||||
|
||||
const whisper_compute_type_label = t("config_page.transcription.whisper_compute_type.label", {
|
||||
whisper: "Whisper"
|
||||
});
|
||||
|
||||
return (
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="whisper_compute_type"
|
||||
label={whisper_compute_type_label}
|
||||
selected_id={currentSelectedWhisperComputeType.data}
|
||||
list={currentSelectableWhisperComputeTypeList.data}
|
||||
selectFunction={selectFunction}
|
||||
state={currentSelectedWhisperComputeType.state}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// Duplicate
|
||||
import { useComputeMode } from "@logics_common";
|
||||
const TranscriptionComputeDevice_Box = () => {
|
||||
const { t } = useI18n();
|
||||
const { currentSelectedTranscriptionComputeDevice, setSelectedTranscriptionComputeDevice } = useTranscription();
|
||||
const { currentSelectableTranscriptionComputeDeviceList } = useTranscription();
|
||||
|
||||
const selectFunction = (selected_data) => {
|
||||
const target_obj = currentSelectableTranscriptionComputeDeviceList.data[selected_data.selected_id];
|
||||
setSelectedTranscriptionComputeDevice(target_obj);
|
||||
};
|
||||
const {
|
||||
currentSelectableTranscriptionComputeDeviceList,
|
||||
currentSelectedTranscriptionComputeDevice,
|
||||
setSelectedTranscriptionComputeDevice,
|
||||
currentSelectedTranscriptionComputeType,
|
||||
setSelectedTranscriptionComputeType,
|
||||
} = useTranscription();
|
||||
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
|
||||
const { currentIsBreakPoint } = useStore_IsBreakPoint();
|
||||
|
||||
const list_for_ui = transformDeviceArray(currentSelectableTranscriptionComputeDeviceList.data);
|
||||
|
||||
const target_index = findKeyByDeviceValue(currentSelectableTranscriptionComputeDeviceList.data, currentSelectedTranscriptionComputeDevice.data);
|
||||
|
||||
const selectable_compute_types = arrayToObject(currentSelectableTranscriptionComputeDeviceList.data[target_index].compute_types);
|
||||
|
||||
const { currentComputeMode } = useComputeMode();
|
||||
if (currentComputeMode.data === "cpu") {
|
||||
return (
|
||||
<ComputeDeviceContainer
|
||||
label={t("config_page.transcription.transcription_compute_device.label")}
|
||||
selected_id={target_index}
|
||||
list={list_for_ui}
|
||||
selectFunction={selectFunction}
|
||||
state={currentSelectedTranscriptionComputeDevice.state}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const selectFunction_ComputeDevice = (selected_data) => {
|
||||
const target_obj = currentSelectableTranscriptionComputeDeviceList.data[selected_data.selected_id];
|
||||
setSelectedTranscriptionComputeDevice(target_obj);
|
||||
};
|
||||
|
||||
const selectFunction_ComputeType = (selected_data) => {
|
||||
setSelectedTranscriptionComputeType(selected_data.selected_id);
|
||||
};
|
||||
|
||||
const device_container_class = clsx(styles.device_container, {
|
||||
[styles.is_break_point]: currentIsBreakPoint.data,
|
||||
});
|
||||
|
||||
const is_disabled_selector = currentSelectedTranscriptionComputeDevice.state === "pending" || currentSelectedTranscriptionComputeType.state === "pending";
|
||||
|
||||
return (
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="transcription_compute_device"
|
||||
label={t("config_page.transcription.transcription_compute_device.label")}
|
||||
// desc={t("config_page.transcription.transcription_compute_device.label")}
|
||||
selected_id={target_index}
|
||||
list={list_for_ui}
|
||||
selectFunction={selectFunction}
|
||||
state={currentSelectedTranscriptionComputeDevice.state}
|
||||
/>
|
||||
<div className={styles.mic_container}>
|
||||
<div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
|
||||
<LabelComponent label={t("config_page.transcription.transcription_compute_device.label")} />
|
||||
<div className={styles.device_contents}>
|
||||
|
||||
<div className={styles.device_dropdown_wrapper}>
|
||||
<div className={styles.device_dropdown}>
|
||||
<p className={styles.device_secondary_label}>{t("config_page.transcription.transcription_compute_device.label")}</p>
|
||||
<DropdownMenu
|
||||
dropdown_id="transcription_compute_device"
|
||||
selected_id={target_index}
|
||||
list={list_for_ui}
|
||||
selectFunction={selectFunction_ComputeDevice}
|
||||
state={currentSelectedTranscriptionComputeDevice.state}
|
||||
style={{ maxWidth: "20rem", minWidth: "10rem" }}
|
||||
is_disabled={is_disabled_selector}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.device_dropdown}>
|
||||
<p className={styles.device_secondary_label}>{t("config_page.transcription.transcription_compute_type.label")}</p>
|
||||
<DropdownMenu
|
||||
dropdown_id="transcription_compute_type"
|
||||
selected_id={currentSelectedTranscriptionComputeType.data}
|
||||
list={selectable_compute_types}
|
||||
selectFunction={selectFunction_ComputeType}
|
||||
state={currentSelectedTranscriptionComputeType.state}
|
||||
is_disabled={is_disabled_selector}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -399,8 +407,6 @@ const Advanced_Container = () => {
|
||||
<SpeakerNoSpeechProbContainer />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
};
|
||||
|
||||
export const MicAvgLogprobContainer = () => {
|
||||
|
||||
@@ -3,3 +3,119 @@
|
||||
flex-direction: column;
|
||||
gap: 6.4rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// [Fix me] Need refactor.
|
||||
.mic_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: solid 0.1rem var(--dark_800_color);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.speaker_container {
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
.device_container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
margin-bottom: 0rem;
|
||||
&.is_break_point {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
& .device_contents {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding-left: 0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.threshold_container {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.threshold_container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.threshold_switch_section {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.threshold_section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.device_label {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.device_contents {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: end;
|
||||
padding-left: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.device_auto_select_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device_dropdown_wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2.8rem;
|
||||
}
|
||||
|
||||
.device_dropdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
white-space: nowrap;
|
||||
max-width: 24rem;
|
||||
&.is_disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.device_secondary_label {
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.4rem;
|
||||
font-size: 1.4rem;
|
||||
color: var(--dark_500_color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useI18n } from "@useI18n";
|
||||
import styles from "./Translation.module.scss";
|
||||
import { updateLabelsById } from "@utils";
|
||||
import { updateLabelsById, arrayToObject } from "@utils";
|
||||
import { useStore_IsBreakPoint } from "@store";
|
||||
|
||||
import {
|
||||
useTranslation,
|
||||
@@ -10,15 +11,19 @@ import {
|
||||
import {
|
||||
DownloadModelsContainer,
|
||||
DeeplAuthKeyContainer,
|
||||
DropdownMenuContainer,
|
||||
ComputeDeviceContainer,
|
||||
|
||||
useOnMouseLeaveDropdownMenu,
|
||||
} from "../_templates/Templates";
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
LabelComponent,
|
||||
} from "../_components/";
|
||||
|
||||
export const Translation = () => {
|
||||
return (
|
||||
<>
|
||||
<CTranslate2WeightType_Box />
|
||||
<CTranslate2ComputeType_Box />
|
||||
<TranslationComputeDevice_Box />
|
||||
<DeeplAuthKey_Box />
|
||||
</>
|
||||
@@ -73,73 +78,75 @@ const CTranslate2WeightType_Box = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const CTranslate2ComputeType_Box = () => {
|
||||
const { t } = useI18n();
|
||||
const { currentSelectableCTranslate2ComputeTypeList } = useTranslation();
|
||||
const { currentSelectedCTranslate2ComputeType, setSelectedCTranslate2ComputeType } = useTranslation();
|
||||
|
||||
const selectFunction = (selected_data) => {
|
||||
setSelectedCTranslate2ComputeType(selected_data.selected_id);
|
||||
};
|
||||
|
||||
const ctranslate2_compute_type_label = t("config_page.translation.ctranslate2_compute_type.label", {
|
||||
ctranslate2: "CTranslate2"
|
||||
});
|
||||
|
||||
return (
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="ctranslate2_compute_type"
|
||||
label={ctranslate2_compute_type_label}
|
||||
selected_id={currentSelectedCTranslate2ComputeType.data}
|
||||
list={currentSelectableCTranslate2ComputeTypeList.data}
|
||||
selectFunction={selectFunction}
|
||||
state={currentSelectedCTranslate2ComputeType.state}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// Duplicate
|
||||
import { useComputeMode } from "@logics_common";
|
||||
const TranslationComputeDevice_Box = () => {
|
||||
const { t } = useI18n();
|
||||
const { currentSelectedTranslationComputeDevice, setSelectedTranslationComputeDevice } = useTranslation();
|
||||
const { currentSelectableTranslationComputeDeviceList } = useTranslation();
|
||||
|
||||
const selectFunction = (selected_data) => {
|
||||
const target_obj = currentSelectableTranslationComputeDeviceList.data[selected_data.selected_id];
|
||||
setSelectedTranslationComputeDevice(target_obj);
|
||||
};
|
||||
const {
|
||||
currentSelectableTranslationComputeDeviceList,
|
||||
currentSelectedTranslationComputeDevice,
|
||||
setSelectedTranslationComputeDevice,
|
||||
currentSelectedTranslationComputeType,
|
||||
setSelectedTranslationComputeType,
|
||||
} = useTranslation();
|
||||
const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
|
||||
const { currentIsBreakPoint } = useStore_IsBreakPoint();
|
||||
|
||||
const list_for_ui = transformDeviceArray(currentSelectableTranslationComputeDeviceList.data);
|
||||
|
||||
const target_index = findKeyByDeviceValue(currentSelectableTranslationComputeDeviceList.data, currentSelectedTranslationComputeDevice.data);
|
||||
|
||||
const selectable_compute_types = arrayToObject(currentSelectableTranslationComputeDeviceList.data[target_index].compute_types);
|
||||
|
||||
const { currentComputeMode } = useComputeMode();
|
||||
const translation_compute_device_label = t("config_page.translation.translation_compute_device.label", {
|
||||
ctranslate2: "CTranslate2"
|
||||
|
||||
const selectFunction_ComputeDevice = (selected_data) => {
|
||||
const target_obj = currentSelectableTranslationComputeDeviceList.data[selected_data.selected_id];
|
||||
setSelectedTranslationComputeDevice(target_obj);
|
||||
};
|
||||
|
||||
const selectFunction_ComputeType = (selected_data) => {
|
||||
setSelectedTranslationComputeType(selected_data.selected_id);
|
||||
};
|
||||
|
||||
const device_container_class = clsx(styles.device_container, {
|
||||
[styles.is_break_point]: currentIsBreakPoint.data,
|
||||
});
|
||||
if (currentComputeMode.data === "cpu") {
|
||||
return (
|
||||
<ComputeDeviceContainer
|
||||
label={translation_compute_device_label}
|
||||
selected_id={target_index}
|
||||
list={list_for_ui}
|
||||
selectFunction={selectFunction}
|
||||
state={currentSelectedTranslationComputeDevice.state}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const is_disabled_selector = currentSelectedTranslationComputeDevice.state === "pending" || currentSelectedTranslationComputeType.state === "pending";
|
||||
|
||||
return (
|
||||
<DropdownMenuContainer
|
||||
dropdown_id="translation_compute_device"
|
||||
label={translation_compute_device_label}
|
||||
selected_id={target_index}
|
||||
list={list_for_ui}
|
||||
selectFunction={selectFunction}
|
||||
state={currentSelectedTranslationComputeDevice.state}
|
||||
/>
|
||||
<div className={styles.mic_container}>
|
||||
<div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
|
||||
<LabelComponent label={t("config_page.translation.translation_compute_device.label")} />
|
||||
<div className={styles.device_contents}>
|
||||
|
||||
<div className={styles.device_dropdown_wrapper}>
|
||||
<div className={styles.device_dropdown}>
|
||||
<p className={styles.device_secondary_label}>{t("config_page.translation.translation_compute_device.label")}</p>
|
||||
<DropdownMenu
|
||||
dropdown_id="translation_compute_device"
|
||||
selected_id={target_index}
|
||||
list={list_for_ui}
|
||||
selectFunction={selectFunction_ComputeDevice}
|
||||
state={currentSelectedTranslationComputeDevice.state}
|
||||
style={{ maxWidth: "20rem", minWidth: "10rem" }}
|
||||
is_disabled={is_disabled_selector}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.device_dropdown}>
|
||||
<p className={styles.device_secondary_label}>{t("config_page.translation.translation_compute_type.label")}</p>
|
||||
<DropdownMenu
|
||||
dropdown_id="translation_compute_type"
|
||||
selected_id={currentSelectedTranslationComputeType.data}
|
||||
list={selectable_compute_types}
|
||||
selectFunction={selectFunction_ComputeType}
|
||||
state={currentSelectedTranslationComputeType.state}
|
||||
is_disabled={is_disabled_selector}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
// [Fix me] Need refactor.
|
||||
.mic_container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: solid 0.1rem var(--dark_800_color);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.speaker_container {
|
||||
padding-top: 0rem;
|
||||
}
|
||||
|
||||
.device_container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
margin-bottom: 0rem;
|
||||
&.is_break_point {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
& .device_contents {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding-left: 0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.threshold_container {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.threshold_container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.threshold_switch_section {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.threshold_section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.device_label {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.device_contents {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: end;
|
||||
padding-left: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.device_auto_select_wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device_dropdown_wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2.8rem;
|
||||
}
|
||||
|
||||
.device_dropdown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
white-space: nowrap;
|
||||
max-width: 24rem;
|
||||
&.is_disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.device_secondary_label {
|
||||
padding-left: 0.2rem;
|
||||
padding-right: 0.4rem;
|
||||
font-size: 1.4rem;
|
||||
color: var(--dark_500_color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -14,8 +14,7 @@ import {
|
||||
|
||||
useStore_WhisperWeightTypeStatus,
|
||||
useStore_SelectedWhisperWeightType,
|
||||
useStore_SelectedWhisperComputeType,
|
||||
useStore_SelectableWhisperComputeTypeList,
|
||||
useStore_SelectedTranscriptionComputeType,
|
||||
|
||||
useStore_MicAvgLogprob,
|
||||
useStore_MicNoSpeechProb,
|
||||
@@ -48,8 +47,7 @@ export const useTranscription = () => {
|
||||
const { currentSelectedWhisperWeightType, updateSelectedWhisperWeightType, pendingSelectedWhisperWeightType } = useStore_SelectedWhisperWeightType();
|
||||
|
||||
|
||||
const { currentSelectableWhisperComputeTypeList, updateSelectableWhisperComputeTypeList, pendingSelectableWhisperComputeTypeList } = useStore_SelectableWhisperComputeTypeList();
|
||||
const { currentSelectedWhisperComputeType, updateSelectedWhisperComputeType, pendingSelectedWhisperComputeType } = useStore_SelectedWhisperComputeType();
|
||||
const { currentSelectedTranscriptionComputeType, updateSelectedTranscriptionComputeType, pendingSelectedTranscriptionComputeType } = useStore_SelectedTranscriptionComputeType();
|
||||
|
||||
const { currentSelectableTranscriptionComputeDeviceList, updateSelectableTranscriptionComputeDeviceList, pendingSelectableTranscriptionComputeDeviceList } = useStore_SelectableTranscriptionComputeDeviceList();
|
||||
const { currentSelectedTranscriptionComputeDevice, updateSelectedTranscriptionComputeDevice, pendingSelectedTranscriptionComputeDevice } = useStore_SelectedTranscriptionComputeDevice();
|
||||
@@ -255,28 +253,19 @@ export const useTranscription = () => {
|
||||
};
|
||||
|
||||
|
||||
const getSelectableWhisperComputeTypeList = () => {
|
||||
pendingSelectableWhisperComputeTypeList();
|
||||
asyncStdoutToPython("/get/data/whisper_compute_type_list");
|
||||
|
||||
const getSelectedTranscriptionComputeType = () => {
|
||||
pendingSelectedTranscriptionComputeType();
|
||||
asyncStdoutToPython("/get/data/transcription_compute_type");
|
||||
};
|
||||
|
||||
const updateSelectableWhisperComputeTypeList_FromBackend = (payload) => {
|
||||
updateSelectableWhisperComputeTypeList(arrayToObject(payload));
|
||||
const setSelectedTranscriptionComputeType = (selected_transcription_compute_type) => {
|
||||
pendingSelectedTranscriptionComputeType();
|
||||
asyncStdoutToPython("/set/data/transcription_compute_type", selected_transcription_compute_type);
|
||||
};
|
||||
|
||||
|
||||
const getSelectedWhisperComputeType = () => {
|
||||
pendingSelectedWhisperComputeType();
|
||||
asyncStdoutToPython("/get/data/whisper_compute_type");
|
||||
};
|
||||
|
||||
const setSelectedWhisperComputeType = (selected_whisper_compute_type) => {
|
||||
pendingSelectedWhisperComputeType();
|
||||
asyncStdoutToPython("/set/data/whisper_compute_type", selected_whisper_compute_type);
|
||||
};
|
||||
|
||||
const setSuccessSelectedWhisperComputeType = (selected_whisper_compute_type) => {
|
||||
updateSelectedWhisperComputeType(selected_whisper_compute_type);
|
||||
const setSuccessSelectedTranscriptionComputeType = (selected_transcription_compute_type) => {
|
||||
updateSelectedTranscriptionComputeType(selected_transcription_compute_type);
|
||||
showNotification_SaveSuccess();
|
||||
};
|
||||
|
||||
@@ -452,16 +441,11 @@ export const useTranscription = () => {
|
||||
setSuccessSelectedWhisperWeightType,
|
||||
|
||||
|
||||
currentSelectableWhisperComputeTypeList,
|
||||
getSelectableWhisperComputeTypeList,
|
||||
updateSelectableWhisperComputeTypeList,
|
||||
updateSelectableWhisperComputeTypeList_FromBackend,
|
||||
|
||||
currentSelectedWhisperComputeType,
|
||||
getSelectedWhisperComputeType,
|
||||
updateSelectedWhisperComputeType,
|
||||
setSelectedWhisperComputeType,
|
||||
setSuccessSelectedWhisperComputeType,
|
||||
currentSelectedTranscriptionComputeType,
|
||||
getSelectedTranscriptionComputeType,
|
||||
updateSelectedTranscriptionComputeType,
|
||||
setSelectedTranscriptionComputeType,
|
||||
setSuccessSelectedTranscriptionComputeType,
|
||||
|
||||
|
||||
currentSelectableTranscriptionComputeDeviceList,
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import {
|
||||
useStore_CTranslate2WeightTypeStatus,
|
||||
useStore_SelectedCTranslate2WeightType,
|
||||
useStore_SelectableCTranslate2ComputeTypeList,
|
||||
useStore_SelectedCTranslate2ComputeType,
|
||||
useStore_SelectedTranslationComputeType,
|
||||
useStore_SelectableTranslationComputeDeviceList,
|
||||
useStore_SelectedTranslationComputeDevice,
|
||||
useStore_DeepLAuthKey,
|
||||
@@ -20,8 +19,7 @@ export const useTranslation = () => {
|
||||
const { currentCTranslate2WeightTypeStatus, updateCTranslate2WeightTypeStatus, pendingCTranslate2WeightTypeStatus } = useStore_CTranslate2WeightTypeStatus();
|
||||
const { currentSelectedCTranslate2WeightType, updateSelectedCTranslate2WeightType, pendingSelectedCTranslate2WeightType } = useStore_SelectedCTranslate2WeightType();
|
||||
|
||||
const { currentSelectableCTranslate2ComputeTypeList, updateSelectableCTranslate2ComputeTypeList, pendingSelectableCTranslate2ComputeTypeList } = useStore_SelectableCTranslate2ComputeTypeList();
|
||||
const { currentSelectedCTranslate2ComputeType, updateSelectedCTranslate2ComputeType, pendingSelectedCTranslate2ComputeType } = useStore_SelectedCTranslate2ComputeType();
|
||||
const { currentSelectedTranslationComputeType, updateSelectedTranslationComputeType, pendingSelectedTranslationComputeType } = useStore_SelectedTranslationComputeType();
|
||||
|
||||
const { currentSelectableTranslationComputeDeviceList, updateSelectableTranslationComputeDeviceList, pendingSelectableTranslationComputeDeviceList } = useStore_SelectableTranslationComputeDeviceList();
|
||||
const { currentSelectedTranslationComputeDevice, updateSelectedTranslationComputeDevice, pendingSelectedTranslationComputeDevice } = useStore_SelectedTranslationComputeDevice();
|
||||
@@ -87,29 +85,18 @@ export const useTranslation = () => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
const getSelectableCTranslate2ComputeTypeList = () => {
|
||||
pendingSelectableCTranslate2ComputeTypeList();
|
||||
asyncStdoutToPython("/get/data/ctranslate2_compute_type_list");
|
||||
const getSelectedTranslationComputeType = () => {
|
||||
pendingSelectedTranslationComputeType();
|
||||
asyncStdoutToPython("/get/data/translation_compute_type");
|
||||
};
|
||||
|
||||
const updateSelectableCTranslate2ComputeTypeList_FromBackend = (payload) => {
|
||||
updateSelectableCTranslate2ComputeTypeList(arrayToObject(payload));
|
||||
const setSelectedTranslationComputeType = (selected_translation_compute_type) => {
|
||||
pendingSelectedTranslationComputeType();
|
||||
asyncStdoutToPython("/set/data/translation_compute_type", selected_translation_compute_type);
|
||||
};
|
||||
|
||||
|
||||
const getSelectedCTranslate2ComputeType = () => {
|
||||
pendingSelectedCTranslate2ComputeType();
|
||||
asyncStdoutToPython("/get/data/ctranslate2_compute_type");
|
||||
};
|
||||
|
||||
const setSelectedCTranslate2ComputeType = (selected_ctranslate2_compute_type) => {
|
||||
pendingSelectedCTranslate2ComputeType();
|
||||
asyncStdoutToPython("/set/data/ctranslate2_compute_type", selected_ctranslate2_compute_type);
|
||||
};
|
||||
|
||||
const setSuccessSelectedCTranslate2ComputeType = (selected_ctranslate2_compute_type) => {
|
||||
updateSelectedCTranslate2ComputeType(selected_ctranslate2_compute_type);
|
||||
const setSuccessSelectedTranslationComputeType = (selected_translation_compute_type) => {
|
||||
updateSelectedTranslationComputeType(selected_translation_compute_type);
|
||||
showNotification_SaveSuccess();
|
||||
};
|
||||
|
||||
@@ -182,16 +169,11 @@ export const useTranslation = () => {
|
||||
setSuccessSelectedCTranslate2WeightType,
|
||||
|
||||
|
||||
currentSelectableCTranslate2ComputeTypeList,
|
||||
getSelectableCTranslate2ComputeTypeList,
|
||||
updateSelectableCTranslate2ComputeTypeList,
|
||||
updateSelectableCTranslate2ComputeTypeList_FromBackend,
|
||||
|
||||
currentSelectedCTranslate2ComputeType,
|
||||
getSelectedCTranslate2ComputeType,
|
||||
updateSelectedCTranslate2ComputeType,
|
||||
setSelectedCTranslate2ComputeType,
|
||||
setSuccessSelectedCTranslate2ComputeType,
|
||||
currentSelectedTranslationComputeType,
|
||||
getSelectedTranslationComputeType,
|
||||
updateSelectedTranslationComputeType,
|
||||
setSelectedTranslationComputeType,
|
||||
setSuccessSelectedTranslationComputeType,
|
||||
|
||||
|
||||
currentSelectableTranslationComputeDeviceList,
|
||||
|
||||
@@ -172,9 +172,8 @@ export const ROUTE_META_LIST = [
|
||||
{ endpoint: "/get/data/ctranslate2_weight_type", ns: configs, hook_name: "useTranslation", method_name: "updateSelectedCTranslate2WeightType" },
|
||||
{ endpoint: "/set/data/ctranslate2_weight_type", ns: configs, hook_name: "useTranslation", method_name: "setSuccessSelectedCTranslate2WeightType" },
|
||||
|
||||
{ endpoint: "/get/data/ctranslate2_compute_type_list", ns: configs, hook_name: "useTranslation", method_name: "updateSelectableCTranslate2ComputeTypeList_FromBackend" },
|
||||
{ endpoint: "/get/data/ctranslate2_compute_type", ns: configs, hook_name: "useTranslation", method_name: "updateSelectedCTranslate2ComputeType" },
|
||||
{ endpoint: "/set/data/ctranslate2_compute_type", ns: configs, hook_name: "useTranslation", method_name: "setSuccessSelectedCTranslate2ComputeType" },
|
||||
{ endpoint: "/get/data/translation_compute_type", ns: configs, hook_name: "useTranslation", method_name: "updateSelectedTranslationComputeType" },
|
||||
{ endpoint: "/set/data/translation_compute_type", ns: configs, hook_name: "useTranslation", method_name: "setSuccessSelectedTranslationComputeType" },
|
||||
|
||||
{ endpoint: "/run/downloaded_ctranslate2_weight", ns: configs, hook_name: "useTranslation", method_name: "downloadedCTranslate2WeightType" },
|
||||
{ endpoint: "/run/download_ctranslate2_weight", ns: null, hook_name: null, method_name: null },
|
||||
@@ -218,9 +217,8 @@ export const ROUTE_META_LIST = [
|
||||
{ endpoint: "/get/data/whisper_weight_type", ns: configs, hook_name: "useTranscription", method_name: "updateSelectedWhisperWeightType" },
|
||||
{ endpoint: "/set/data/whisper_weight_type", ns: configs, hook_name: "useTranscription", method_name: "setSuccessSelectedWhisperWeightType" },
|
||||
|
||||
{ endpoint: "/get/data/whisper_compute_type_list", ns: configs, hook_name: "useTranscription", method_name: "updateSelectableWhisperComputeTypeList_FromBackend" },
|
||||
{ endpoint: "/get/data/whisper_compute_type", ns: configs, hook_name: "useTranscription", method_name: "updateSelectedWhisperComputeType" },
|
||||
{ endpoint: "/set/data/whisper_compute_type", ns: configs, hook_name: "useTranscription", method_name: "setSuccessSelectedWhisperComputeType" },
|
||||
{ endpoint: "/get/data/transcription_compute_type", ns: configs, hook_name: "useTranscription", method_name: "updateSelectedTranscriptionComputeType" },
|
||||
{ endpoint: "/set/data/transcription_compute_type", ns: configs, hook_name: "useTranscription", method_name: "setSuccessSelectedTranscriptionComputeType" },
|
||||
|
||||
|
||||
{ endpoint: "/run/downloaded_whisper_weight", ns: configs, hook_name: "useTranscription", method_name: "downloadedWhisperWeightType" },
|
||||
|
||||
@@ -220,12 +220,9 @@ export const { atomInstance: Atom_DeepLAuthKey, useHook: useStore_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");
|
||||
|
||||
export const { atomInstance: Atom_SelectableCTranslate2ComputeTypeList, useHook: useStore_SelectableCTranslate2ComputeTypeList } = createAtomWithHook({}, "SelectableCTranslate2ComputeTypeList");
|
||||
export const { atomInstance: Atom_SelectedCTranslate2ComputeType, useHook: useStore_SelectedCTranslate2ComputeType } = createAtomWithHook("", "SelectedCTranslate2ComputeType");
|
||||
|
||||
|
||||
export const { atomInstance: Atom_SelectableTranslationComputeDeviceList, useHook: useStore_SelectableTranslationComputeDeviceList } = createAtomWithHook({}, "SelectableTranslationComputeDeviceList");
|
||||
export const { atomInstance: Atom_SelectedTranslationComputeDevice, useHook: useStore_SelectedTranslationComputeDevice } = createAtomWithHook("", "SelectedTranslationComputeDevice");
|
||||
export const { atomInstance: Atom_SelectedTranslationComputeType, useHook: useStore_SelectedTranslationComputeType } = createAtomWithHook("", "SelectedTranslationComputeType");
|
||||
|
||||
// Transcription
|
||||
export const { atomInstance: Atom_MicRecordTimeout, useHook: useStore_MicRecordTimeout } = createAtomWithHook(0, "MicRecordTimeout");
|
||||
@@ -240,12 +237,9 @@ export const { atomInstance: Atom_SelectedWhisperWeightType, useHook: useStore_S
|
||||
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");
|
||||
|
||||
export const { atomInstance: Atom_SelectableWhisperComputeTypeList, useHook: useStore_SelectableWhisperComputeTypeList } = createAtomWithHook({}, "SelectableWhisperComputeTypeList");
|
||||
export const { atomInstance: Atom_SelectedWhisperComputeType, useHook: useStore_SelectedWhisperComputeType } = createAtomWithHook("", "SelectedWhisperComputeType");
|
||||
|
||||
|
||||
export const { atomInstance: Atom_SelectableTranscriptionComputeDeviceList, useHook: useStore_SelectableTranscriptionComputeDeviceList } = createAtomWithHook({}, "SelectableTranscriptionComputeDeviceList");
|
||||
export const { atomInstance: Atom_SelectedTranscriptionComputeDevice, useHook: useStore_SelectedTranscriptionComputeDevice } = createAtomWithHook("", "SelectedTranscriptionComputeDevice");
|
||||
export const { atomInstance: Atom_SelectedTranscriptionComputeType, useHook: useStore_SelectedTranscriptionComputeType } = createAtomWithHook("", "SelectedTranscriptionComputeType");
|
||||
|
||||
export const { atomInstance: Atom_MicAvgLogprob, useHook: useStore_MicAvgLogprob } = createAtomWithHook(-0.8, "MicAvgLogprob");
|
||||
export const { atomInstance: Atom_MicNoSpeechProb, useHook: useStore_MicNoSpeechProb } = createAtomWithHook(0.6, "MicNoSpeechProb");
|
||||
|
||||
Reference in New Issue
Block a user