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

[Update] UI: Add Groq and OpenRouter components.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-12-22 15:18:30 +09:00
parent 4f2401551a
commit 22e6af860d
3 changed files with 184 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -314,6 +314,62 @@ export const SETTINGS_ARRAY = [
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selected_openai_model",
},
// Groq
{
Category: "Translation",
Base_Name: "GroqAuthKey",
default_value: "",
ui_template_id: "input",
logics_template_id: "get_set_delete",
base_endpoint_name: "groq_auth_key",
},
{
Category: "Translation",
Base_Name: "SelectableGroqModelList",
default_value: [],
ui_template_id: "list",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selectable_groq_model_list",
response_transform: "arrayToObject",
},
{
Category: "Translation",
Base_Name: "SelectedGroqModel",
default_value: "",
ui_template_id: "select",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selected_groq_model",
},
// Open Router
{
Category: "Translation",
Base_Name: "OpenRouterAuthKey",
default_value: "",
ui_template_id: "input",
logics_template_id: "get_set_delete",
base_endpoint_name: "openrouter_auth_key",
},
{
Category: "Translation",
Base_Name: "SelectableOpenRouterModelList",
default_value: [],
ui_template_id: "list",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selectable_openrouter_model_list",
response_transform: "arrayToObject",
},
{
Category: "Translation",
Base_Name: "SelectedOpenRouterModel",
default_value: "",
ui_template_id: "select",
logics_template_id: "get_set",
add_endpoint_run_array: ["from_backend"],
base_endpoint_name: "selected_openrouter_model",
},
// LM Studio
{
Category: "Translation",

2
src-ui/logics/ui_configs.js
View File

@@ -110,6 +110,8 @@ export const translator_status = [
{ id: "Plamo_API", label: `Plamo API`, is_available: false },
{ id: "Gemini_API", label: `Gemini API`, is_available: false },
{ id: "OpenAI_API", label: `OpenAI API`, is_available: false },
{ id: "Groq_API", label: `Groq API`, is_available: false },
{ id: "OpenRouter_API", label: `OpenRouter API`, is_available: false },
{ id: "LMStudio", label: `LMStudio`, is_available: false },
{ id: "Ollama", label: `Ollama`, is_available: false },
];

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

@@ -49,6 +49,12 @@ export const Translation = () => {
<OpenAIAuthKey_Box />
<OpenAIModelContainer />
<GroqAuthKey_Box />
<GroqModelContainer />
<OpenRouterAuthKey_Box />
<OpenRouterModelContainer />
<LMStudioConnectionCheck_Box />
<LMStudioURL_Box />
<LMStudioModelContainer />
@@ -444,6 +450,126 @@ const OpenAIModelContainer = () => {
};
const GroqAuthKey_Box = () => {
const { t } = useI18n();
const { currentGroqAuthKey, setGroqAuthKey, deleteGroqAuthKey } = useTranslation();
const { variable, onChangeFunction, saveFunction } = useSaveButtonLogic({
variable: currentGroqAuthKey.data,
state: currentGroqAuthKey.state,
setFunction: setGroqAuthKey,
deleteFunction: deleteGroqAuthKey,
});
return (
<>
<AuthKeyContainer
label="Groq Auth Key"
desc="Groq Auth Desc"
// webpage_url={deepl_auth_key_url}
// open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
variable={variable}
state={currentGroqAuthKey.state}
onChangeFunction={onChangeFunction}
saveFunction={saveFunction}
remove_border_bottom={true}
/>
</>
);
};
const GroqModelContainer = () => {
const { t } = useI18n();
const {
currentSelectableGroqModelList,
currentSelectedGroqModel,
setSelectedGroqModel,
currentGroqAuthKey,
} = useTranslation();
const selectFunction = (selected_data) => {
setSelectedGroqModel(selected_data.selected_id);
};
let selected_label = (!currentGroqAuthKey.data && !currentSelectedGroqModel.data)
? t("config_page.common.correct_auth_key_required")
: currentSelectedGroqModel.data;
return (
<DropdownMenuContainer
dropdown_id="select_groq_model"
label="Select Groq Model"
selected_id={selected_label}
list={currentSelectableGroqModelList.data}
selectFunction={selectFunction}
state={currentSelectedGroqModel.state}
is_disabled={!currentGroqAuthKey.data}
/>
);
};
const OpenRouterAuthKey_Box = () => {
const { t } = useI18n();
const { currentOpenRouterAuthKey, setOpenRouterAuthKey, deleteOpenRouterAuthKey } = useTranslation();
const { variable, onChangeFunction, saveFunction } = useSaveButtonLogic({
variable: currentOpenRouterAuthKey.data,
state: currentOpenRouterAuthKey.state,
setFunction: setOpenRouterAuthKey,
deleteFunction: deleteOpenRouterAuthKey,
});
return (
<>
<AuthKeyContainer
label="OpenRouter Auth Key"
desc="OpenRouter Auth Desc"
// webpage_url={deepl_auth_key_url}
// open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
variable={variable}
state={currentOpenRouterAuthKey.state}
onChangeFunction={onChangeFunction}
saveFunction={saveFunction}
remove_border_bottom={true}
/>
</>
);
};
const OpenRouterModelContainer = () => {
const { t } = useI18n();
const {
currentSelectableOpenRouterModelList,
currentSelectedOpenRouterModel,
setSelectedOpenRouterModel,
currentOpenRouterAuthKey,
} = useTranslation();
const selectFunction = (selected_data) => {
setSelectedOpenRouterModel(selected_data.selected_id);
};
let selected_label = (!currentOpenRouterAuthKey.data && !currentSelectedOpenRouterModel.data)
? t("config_page.common.correct_auth_key_required")
: currentSelectedOpenRouterModel.data;
return (
<DropdownMenuContainer
dropdown_id="select_openrouter_model"
label="Select OpenRouter Model"
selected_id={selected_label}
list={currentSelectableOpenRouterModelList.data}
selectFunction={selectFunction}
state={currentSelectedOpenRouterModel.state}
is_disabled={!currentOpenRouterAuthKey.data}
/>
);
};
const LMStudioConnectionCheck_Box = () => {
const { t } = useI18n();