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

[Update] UI: Add Plamo, OpenAI and Gemini authentication key components and integrate them into the Translation section.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-11-14 09:40:25 +09:00
parent 3105df3486
commit 11c16fadbd
4 changed files with 324 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src-ui/logics/configs/config_page_setter/ui_config_setter.js
View File

@@ -221,6 +221,7 @@ export const SETTINGS_ARRAY = [
logics_template_id: "get_set",
base_endpoint_name: "selected_translation_compute_device",
},
// DeepL
{
Category: "Translation",
Base_Name: "DeepLAuthKey",
@@ -229,6 +230,90 @@ export const SETTINGS_ARRAY = [
logics_template_id: "get_set_delete",
base_endpoint_name: "deepl_auth_key",
},
// Plamo
{
Category: "Translation",
Base_Name: "PlamoAuthKey",
default_value: "",
ui_template_id: "input",
logics_template_id: "get_set_delete",
base_endpoint_name: "plamo_auth_key",
},
{
Category: "Translation",
Base_Name: "SelectablePlamoModelList",
default_value: [],
ui_template_id: "list",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selectable_plamo_model_list",
response_transform: "arrayToObject",
},
{
Category: "Translation",
Base_Name: "SelectedPlamoModel",
default_value: "",
ui_template_id: "select",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selected_plamo_model",
},
// Gemini
{
Category: "Translation",
Base_Name: "GeminiAuthKey",
default_value: "",
ui_template_id: "input",
logics_template_id: "get_set_delete",
base_endpoint_name: "gemini_auth_key",
},
{
Category: "Translation",
Base_Name: "SelectableGeminiModelList",
default_value: [],
ui_template_id: "list",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selectable_gemini_model_list",
response_transform: "arrayToObject",
},
{
Category: "Translation",
Base_Name: "SelectedGeminiModel",
default_value: "",
ui_template_id: "select",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selected_gemini_model",
},
// OpenAI
{
Category: "Translation",
Base_Name: "OpenAIAuthKey",
default_value: "",
ui_template_id: "input",
logics_template_id: "get_set_delete",
base_endpoint_name: "openai_auth_key",
},
{
Category: "Translation",
Base_Name: "SelectableOpenAIModelList",
default_value: [],
ui_template_id: "list",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selectable_openai_model_list",
response_transform: "arrayToObject",
},
{
Category: "Translation",
Base_Name: "SelectedOpenAIModel",
default_value: "",
ui_template_id: "select",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selected_openai_model",
},
// Transcription
// Mic

4
src-ui/logics/configs/config_page_setter/useSettingsLogics.js
View File

@@ -1,7 +1,7 @@
import * as stores from "@store";
import { useStdoutToPython } from "@useStdoutToPython";
import { useNotificationStatus } from "@logics_common";
import { arrayToObject } from "@utils";
import { arrayToObject, arrayToIdLabel } from "@utils";
const transformResponse = (transformName, payload) => {
if (!transformName) return payload;
@@ -9,6 +9,8 @@ const transformResponse = (transformName, payload) => {
switch (transformName) {
case "arrayToObject":
return arrayToObject(payload);
case "arrayToIdLabel":
return arrayToIdLabel(payload);
default:
return payload;
}

7
src-ui/logics/utils.js
View File

@@ -5,6 +5,13 @@ export const arrayToObject = (array) => {
}, {});
};
export const arrayToIdLabel = (array) => {
return array.map((element) => ({
id: element,
label: element,
}));
};
export const chunkArray = (array, size) => {
const chunked = [];
for (let i = 0; i < array.length; i += size) {

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

@@ -12,6 +12,8 @@ import {
DownloadModelsContainer,
AuthKeyContainer,
MultiDropdownMenuContainer,
RadioButtonContainer,
DropdownMenuContainer,
useOnMouseLeaveDropdownMenu,
} from "../_templates/Templates";
@@ -29,7 +31,17 @@ export const Translation = () => {
<>
<CTranslate2WeightType_Box />
<TranslationComputeDevice_Box />
<DeeplAuthKey_Box />
<PlamoAuthKey_Box />
<PlamoModelContainer />
<GeminiAuthKey_Box />
<GeminiModelContainer />
<OpenAIAuthKey_Box />
<OpenAIModelContainer />
</>
);
};
@@ -245,6 +257,223 @@ const DeeplAuthKey_Box = () => {
);
};
const PlamoAuthKey_Box = () => {
const { t } = useI18n();
const { currentPlamoAuthKey, setPlamoAuthKey, deletePlamoAuthKey } = useTranslation();
const [input_value, seInputValue] = useState(currentPlamoAuthKey.data);
const onChangeFunction = (value) => {
seInputValue(value);
};
const saveFunction = () => {
if (input_value === "" || input_value === null) {
return deletePlamoAuthKey();
};
setPlamoAuthKey(input_value);
};
useEffect(() => {
if (currentPlamoAuthKey.state === "pending") return;
seInputValue(currentPlamoAuthKey.data);
}, [currentPlamoAuthKey]);
return (
<>
<AuthKeyContainer
label="Plamo Auth Key"
desc="Plamo Auth Desc"
// label={t("config_page.translation.deepl_auth_key.label")}
// desc={t(
// "config_page.translation.deepl_auth_key.desc",
// {translator: t("main_page.translator")}
// )}
// webpage_url={deepl_auth_key_url}
// open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
variable={input_value}
state={currentPlamoAuthKey.state}
onChangeFunction={onChangeFunction}
saveFunction={saveFunction}
remove_border_bottom={true}
/>
</>
);
};
const PlamoModelContainer = () => {
const { t } = useI18n();
const {
currentSelectablePlamoModelList,
currentSelectedPlamoModel,
setSelectedPlamoModel,
} = useTranslation();
if (currentSelectablePlamoModelList.data.length === 0) return null;
const selectFunction = (selected_data) => {
setSelectedPlamoModel(selected_data.selected_id);
};
return (
<DropdownMenuContainer
dropdown_id="select_plamo_model"
label="Select Plamo Model"
// label={t("config_page.transcription.mic_phrase_timeout.label")}
// desc={t("config_page.transcription.mic_phrase_timeout.desc")}
selected_id={currentSelectedPlamoModel.data}
list={currentSelectablePlamoModelList.data}
selectFunction={selectFunction}
state={currentSelectedPlamoModel.state}
/>
);
};
const GeminiAuthKey_Box = () => {
const { t } = useI18n();
const { currentGeminiAuthKey, setGeminiAuthKey, deleteGeminiAuthKey } = useTranslation();
const [input_value, seInputValue] = useState(currentGeminiAuthKey.data);
const onChangeFunction = (value) => {
seInputValue(value);
};
const saveFunction = () => {
if (input_value === "" || input_value === null) {
return deleteGeminiAuthKey();
};
setGeminiAuthKey(input_value);
};
useEffect(() => {
if (currentGeminiAuthKey.state === "pending") return;
seInputValue(currentGeminiAuthKey.data);
}, [currentGeminiAuthKey]);
return (
<>
<AuthKeyContainer
label="Gemini Auth Key"
desc="Gemini Auth Desc"
// label={t("config_page.translation.deepl_auth_key.label")}
// desc={t(
// "config_page.translation.deepl_auth_key.desc",
// {translator: t("main_page.translator")}
// )}
// webpage_url={deepl_auth_key_url}
// open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
variable={input_value}
state={currentGeminiAuthKey.state}
onChangeFunction={onChangeFunction}
saveFunction={saveFunction}
remove_border_bottom={true}
/>
</>
);
};
const GeminiModelContainer = () => {
const { t } = useI18n();
const {
currentSelectableGeminiModelList,
currentSelectedGeminiModel,
setSelectedGeminiModel,
} = useTranslation();
if (currentSelectableGeminiModelList.data.length === 0) return null;
const selectFunction = (selected_data) => {
setSelectedGeminiModel(selected_data.selected_id);
};
return (
<DropdownMenuContainer
dropdown_id="select_gemini_model"
label="Select Gemini Model"
// label={t("config_page.transcription.mic_phrase_timeout.label")}
// desc={t("config_page.transcription.mic_phrase_timeout.desc")}
selected_id={currentSelectedGeminiModel.data}
list={currentSelectableGeminiModelList.data}
selectFunction={selectFunction}
state={currentSelectedGeminiModel.state}
/>
);
};
const OpenAIAuthKey_Box = () => {
const { t } = useI18n();
const { currentOpenAIAuthKey, setOpenAIAuthKey, deleteOpenAIAuthKey } = useTranslation();
const [input_value, seInputValue] = useState(currentOpenAIAuthKey.data);
const onChangeFunction = (value) => {
seInputValue(value);
};
const saveFunction = () => {
if (input_value === "" || input_value === null) {
return deleteOpenAIAuthKey();
};
setOpenAIAuthKey(input_value);
};
useEffect(() => {
if (currentOpenAIAuthKey.state === "pending") return;
seInputValue(currentOpenAIAuthKey.data);
}, [currentOpenAIAuthKey]);
return (
<>
<AuthKeyContainer
label="OpenAI Auth Key"
desc="OpenAI Auth Desc"
// label={t("config_page.translation.deepl_auth_key.label")}
// desc={t(
// "config_page.translation.deepl_auth_key.desc",
// {translator: t("main_page.translator")}
// )}
// webpage_url={deepl_auth_key_url}
// open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
variable={input_value}
state={currentOpenAIAuthKey.state}
onChangeFunction={onChangeFunction}
saveFunction={saveFunction}
remove_border_bottom={true}
/>
</>
);
};
const OpenAIModelContainer = () => {
const { t } = useI18n();
const {
currentSelectableOpenAIModelList,
currentSelectedOpenAIModel,
setSelectedOpenAIModel,
} = useTranslation();
if (currentSelectableOpenAIModelList.data.length === 0) return null;
const selectFunction = (selected_data) => {
setSelectedOpenAIModel(selected_data.selected_id);
};
return (
<DropdownMenuContainer
dropdown_id="select_openai_model"
label="Select OpenAI Model"
// label={t("config_page.transcription.mic_phrase_timeout.label")}
// desc={t("config_page.transcription.mic_phrase_timeout.desc")}
selected_id={currentSelectedOpenAIModel.data}
list={currentSelectableOpenAIModelList.data}
selectFunction={selectFunction}
state={currentSelectedOpenAIModel.state}
/>
);
};
// Duplicate
const transformDeviceArray = (devices) => {
const name_counts = Object.values(devices).reduce((counts, device) => {