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

Merge branch 'ui' into develop

Browse Source
This commit is contained in:
Sakamoto Shiina
2026-01-01 23:19:55 +09:00
parent 3d71dbacce 3a009ce336
commit cab7d48de1
13 changed files with 308 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
locales/en.yml
View File

@@ -77,6 +77,12 @@ config_page:
version: "Version {{version}}"
model_download_button_label: "Download"
correct_auth_key_required: "Correct Auth Key Required"
open_auth_key_webpage: "Open Auth Key Management Webpage"
connection_check:
button_label: "Connection Check"
checking: "Checking..."
connected: "Connected"
disconnected: "Disconnected"
compute_device:
desc: "The accuracy and speed of each processing type may vary depending on your machine specs, and the compatibility with calculation methods may differ from the displayed order. Please use this as a general guideline."
label_device: "Processing Device"
@@ -147,6 +153,7 @@ config_page:
large: "High Accuracy Model ({{capacity}})"
translation_compute_device:
label: "Processing device for AI translation"
deepl_auth_key:
label: "DeepL Auth Key"
desc: "When using it, please change {{translator}} on the main screen to DeepL_API. ※Some languages may not be supported."
@@ -155,6 +162,43 @@ config_page:
edit: "Edit"
auth_key_success: "Auth key update completed."
plamo_auth_key:
label: "Plamo Auth Key"
select_plamo_model:
label: "Select Plamo Model"
gemini_auth_key:
label: "Gemini Auth Key"
select_gemini_model:
label: "Select Gemini Model"
openai_auth_key:
label: "OpenAI Auth Key"
select_openai_model:
label: "Select OpenAI Model"
groq_auth_key:
label: "Groq Auth Key"
select_groq_model:
label: "Select Groq Model"
openrouter_auth_key:
label: "OpenRouter Auth Key"
select_openrouter_model:
label: "Select OpenRouter Model"
lmstudio_connection_check:
label: "Check LM Studio Connection"
select_lmstudio_model:
label: "Select LMStudio Model"
connection_required: "LMStudio Connection Required"
ollama_connection_check:
label: "Check Ollama Connection"
select_ollama_model:
label: "Select Ollama Model"
connection_required: "Ollama Connection Required"
transcription:
section_label_mic: "Mic"
section_label_speaker: "Speaker"
@@ -271,7 +315,6 @@ config_page:
convert_message_to_hiragana:
label: "Show Hiragana"
hotkeys:
toggle_vrct_visibility:
label: "Toggle VRCT visibility"

45
locales/ja.yml
View File

@@ -76,6 +76,13 @@ config_page:
common:
version: "バージョン {{version}}"
model_download_button_label: "ダウンロード"
correct_auth_key_required: "正しい認証キーが必要"
open_auth_key_webpage: "認証キー管理ページを開く"
connection_check:
button_label: "接続確認"
checking: "確認中..."
connected: "接続済み"
disconnected: "未接続"
compute_device:
desc: "各処理タイプの精度・速度は、マシンスペックによって計算方法に相性があり、表示順とは異なる事があるため、大まかな目安としてください。"
label_device: "処理デバイス"
@@ -146,6 +153,7 @@ config_page:
large: "高精度モデル （{{capacity}}）"
translation_compute_device:
label: "AI翻訳の処理デバイス"
deepl_auth_key:
label: "DeepL APIキーの登録"
desc: "使用の際は、メイン画面にある {{translator}} をDeepL_APIに変更してください。\n※対応していない言語もあります。"
@@ -154,6 +162,43 @@ config_page:
edit: "編集"
auth_key_success: "認証キーの更新が完了しました。"
plamo_auth_key:
label: "Plamo 認証キー"
select_plamo_model:
label: "Plamo モデルを選択"
gemini_auth_key:
label: "Gemini 認証キー"
select_gemini_model:
label: "Gemini モデルを選択"
openai_auth_key:
label: "OpenAI 認証キー"
select_openai_model:
label: "OpenAI モデルを選択"
groq_auth_key:
label: "Groq 認証キー"
select_groq_model:
label: "Groq モデルを選択"
openrouter_auth_key:
label: "OpenRouter 認証キー"
select_openrouter_model:
label: "OpenRouter モデルを選択"
lmstudio_connection_check:
label: "LM Studio との接続確認"
select_lmstudio_model:
label: "LMStudio モデルを選択"
connection_required: "LMStudio との接続が必要"
ollama_connection_check:
label: "Ollama との接続確認"
select_ollama_model:
label: "Ollama モデルを選択"
connection_required: "Ollama との接続が必要"
transcription:
section_label_mic: "マイク"
section_label_speaker: "スピーカー"

47
locales/ko.yml
View File

@@ -76,6 +76,13 @@ config_page:
common:
version: "버전 {{version}}"
model_download_button_label: "다운로드"
correct_auth_key_required:
open_auth_key_webpage:
connection_check:
button_label:
checking:
connected:
disconnected:
compute_device:
desc:
label_device:
@@ -83,6 +90,8 @@ config_page:
type_template_auto:
type_template_low:
type_template_high:
warning_labels:
unable_to_use_osc_query:
side_menu_labels:
device: "장치"
@@ -144,6 +153,7 @@ config_page:
large: "정밀 모델 ({{capacity}})"
translation_compute_device:
label: "AI 번역 처리 장치"
deepl_auth_key:
label: "DeepL 인증키"
desc: "사용시 메인화면에 있는 {{translator}}를 DeepL_API로 변경해 주세요.\n지원하지 않는 언어도 있습니다."
@@ -152,6 +162,43 @@ config_page:
edit: "편집"
auth_key_success: "인증키 갱신이 완료되었습니다."
plamo_auth_key:
label:
select_plamo_model:
label:
gemini_auth_key:
label:
select_gemini_model:
label:
openai_auth_key:
label:
select_openai_model:
label:
groq_auth_key:
label:
select_groq_model:
label:
openrouter_auth_key:
label:
select_openrouter_model:
label:
lmstudio_connection_check:
label:
select_lmstudio_model:
label:
connection_required:
ollama_connection_check:
label:
select_ollama_model:
label:
connection_required:
transcription:
section_label_mic: "마이크"
section_label_speaker: "스피커"

45
locales/zh-Hans.yml
View File

@@ -76,6 +76,13 @@ config_page:
common:
version: "版本 {{version}}"
model_download_button_label: "下载"
correct_auth_key_required:
open_auth_key_webpage:
connection_check:
button_label:
checking:
connected:
disconnected:
compute_device:
desc: "各处理类型的精度和速度会因机器规格不同而有所差异，可能与显示顺序不同，请作为大致参考。"
label_device: "处理设备"
@@ -146,6 +153,7 @@ config_page:
large: "高精度模型 ({{capacity}})"
translation_compute_device:
label: "AI 翻译的处理设备"
deepl_auth_key:
label: "DeepL 授权密匙"
desc: "在使用的时候,使用时请在主屏幕上通过 DeepL_API 选择 {{translator}}\n※某些语言可能不支持"
@@ -154,6 +162,43 @@ config_page:
edit: "编辑"
auth_key_success: "授权密匙认证完成。"
plamo_auth_key:
label:
select_plamo_model:
label:
gemini_auth_key:
label:
select_gemini_model:
label:
openai_auth_key:
label:
select_openai_model:
label:
groq_auth_key:
label:
select_groq_model:
label:
openrouter_auth_key:
label:
select_openrouter_model:
label:
lmstudio_connection_check:
label:
select_lmstudio_model:
label:
connection_required:
ollama_connection_check:
label:
select_ollama_model:
label:
connection_required:
transcription:
section_label_mic: "麦克风"
section_label_speaker: "扬声器"

45
locales/zh-Hant.yml
View File

@@ -76,6 +76,13 @@ config_page:
common:
version: "版本 {{version}}"
model_download_button_label: "下載"
correct_auth_key_required:
open_auth_key_webpage:
connection_check:
button_label:
checking:
connected:
disconnected:
compute_device:
desc: "各處理類型的精度和速度會因機器規格不同而有所差異，可能與顯示順序不同，請作為大致參考。"
label_device: "處理裝置"
@@ -146,6 +153,7 @@ config_page:
large: "高準確率模型（{{capacity}}）"
translation_compute_device:
label: "AI 翻譯的處理裝置"
deepl_auth_key:
label: "DeepL 授權金鑰"
desc: "使用 DeepL API 時請在主螢幕選擇 {{translator}}。※可能不支援某些語言。"
@@ -154,6 +162,43 @@ config_page:
edit: "編輯"
auth_key_success: "授權金鑰更新完成。"
plamo_auth_key:
label:
select_plamo_model:
label:
gemini_auth_key:
label:
select_gemini_model:
label:
openai_auth_key:
label:
select_openai_model:
label:
groq_auth_key:
label:
select_groq_model:
label:
openrouter_auth_key:
label:
select_openrouter_model:
label:
lmstudio_connection_check:
label:
select_lmstudio_model:
label:
connection_required:
ollama_connection_check:
label:
select_ollama_model:
label:
connection_required:
transcription:
section_label_mic: "麥克風"
section_label_speaker: "喇叭"

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

@@ -137,6 +137,12 @@ export const whisper_weight_type_status = [
export const deepl_auth_key_url = "https://www.deepl.com/ja/your-account/keys";
export const plamo_auth_key_url = "https://plamo.preferredai.jp/api";
export const gemini_auth_key_url = "https://aistudio.google.com/api-keys";
export const openai_auth_key_url = "https://platform.openai.com/api-keys";
export const groq_auth_key_url = "https://console.groq.com/keys";
export const openrouter_auth_key_url = "https://openrouter.ai/keys";
export const vrct_document_home_url = "https://misyaguziya.github.io/VRCT-Docs";

3
src-ui/views/app/config_page/setting_section/setting_box/_components/_atoms/_open_webpage_button/_OpenWebpageButton.module.scss
View File

@@ -2,10 +2,11 @@
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
}
.open_webpage_button {
padding: 0.6rem 2.8rem;
padding: 0.6rem 1.2rem;
display: flex;
gap: 1rem;
justify-content: center;

2
src-ui/views/app/config_page/setting_section/setting_box/_components/auth_key/AuthKey.jsx
View File

@@ -38,7 +38,7 @@ export const AuthKey = (props) => {
return (
<div className={styles.container}>
<div className={styles.entry_section_wrapper}>
<_Entry ref={entryRef} width="30rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/>
<_Entry ref={entryRef} width="24rem" onChange={onchangeEntryAuthKey} ui_variable={props.variable} is_disabled={is_disabled}/>
<button className={save_button_class_names} onClick={saveAuthKey}>
{is_disabled
? <CircularProgress size="1.4rem" sx={{ color: "var(--dark_basic_text_color)" }}/>

13
src-ui/views/app/config_page/setting_section/setting_box/_components/connection_check_button/ConnectionCheckButton.jsx
View File

@@ -1,17 +1,20 @@
import styles from "./ConnectionCheckButton.module.scss";
import { useI18n } from "@useI18n";
export const ConnectionCheckButton = (props) => {
const { t } = useI18n();
const label = props.state === "pending"
? "Checking... 🌀"
? `${t("config_page.common.connection_check.checking")} 🌀`
: props.variable === true
? "Connected ✅"
: "Disconnected ❌";
? `${t("config_page.common.connection_check.connected")} ✅`
: `${t("config_page.common.connection_check.disconnected")} ❌`;
return (
<div className={styles.container}>
<p>{label}</p>
<p className={styles.status_label}>{label}</p>
<button className={styles.button_wrapper} onClick={props.checkFunction}>
<p className={styles.button_label}>Connection Check</p>
<p className={styles.button_label}>{t("config_page.common.connection_check.button_label")}</p>
</button>
</div>
);

11
src-ui/views/app/config_page/setting_section/setting_box/_components/connection_check_button/ConnectionCheckButton.module.scss
View File

@@ -9,6 +9,17 @@
}
}
.status_label {
font-size: 1.2rem;
color: var(--dark_200_color);
margin-bottom: 0.8rem;
}
.button_label {
font-size: 1.4rem;
color: var(--dark_100_color);
}
.button_svg {
width: 2.4rem;
color: var(--dark_400_color);

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

@@ -29,7 +29,15 @@ import {
ConnectionCheckButton,
} from "../_components";
import { deepl_auth_key_url } from "@ui_configs";
import {
deepl_auth_key_url,
plamo_auth_key_url,
gemini_auth_key_url,
openai_auth_key_url,
groq_auth_key_url,
openrouter_auth_key_url,
} from "@ui_configs";
import { useLLMConnection } from "@logics_common";
export const Translation = () => {
@@ -256,7 +264,7 @@ const DeepLAuthKey_Box = () => {
{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")}
open_webpage_label={t("config_page.common.open_auth_key_webpage")}
variable={variable}
state={currentDeepLAuthKey.state}
onChangeFunction={onChangeFunction}
@@ -280,10 +288,10 @@ const PlamoAuthKey_Box = () => {
return (
<>
<AuthKeyContainer
label="Plamo Auth Key"
desc="Plamo Auth Desc"
// webpage_url={deepl_auth_key_url}
// open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
label={t("config_page.translation.plamo_auth_key.label")}
// desc="Plamo Auth Desc"
webpage_url={plamo_auth_key_url}
open_webpage_label={t("config_page.common.open_auth_key_webpage")}
variable={variable}
state={currentPlamoAuthKey.state}
onChangeFunction={onChangeFunction}
@@ -316,7 +324,7 @@ const PlamoModelContainer = () => {
return (
<DropdownMenuContainer
dropdown_id="select_plamo_model"
label="Select Plamo Model"
label={t("config_page.translation.select_plamo_model.label")}
selected_id={selected_label}
list={currentSelectablePlamoModelList.data}
selectFunction={selectFunction}
@@ -342,10 +350,10 @@ const GeminiAuthKey_Box = () => {
return (
<>
<AuthKeyContainer
label="Gemini Auth Key"
desc="Gemini Auth Desc"
// webpage_url={deepl_auth_key_url}
// open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
label={t("config_page.translation.gemini_auth_key.label")}
// desc="Gemini Auth Desc"
webpage_url={gemini_auth_key_url}
open_webpage_label={t("config_page.common.open_auth_key_webpage")}
variable={variable}
state={currentGeminiAuthKey.state}
onChangeFunction={onChangeFunction}
@@ -378,7 +386,7 @@ const GeminiModelContainer = () => {
return (
<DropdownMenuContainer
dropdown_id="select_gemini_model"
label="Select Gemini Model"
label={t("config_page.translation.select_gemini_model.label")}
selected_id={selected_label}
list={currentSelectableGeminiModelList.data}
selectFunction={selectFunction}
@@ -403,10 +411,10 @@ const OpenAIAuthKey_Box = () => {
return (
<>
<AuthKeyContainer
label="OpenAI Auth Key"
desc="OpenAI Auth Desc"
// webpage_url={deepl_auth_key_url}
// open_webpage_label={t("config_page.translation.deepl_auth_key.open_auth_key_webpage")}
label={t("config_page.translation.openai_auth_key.label")}
// desc="OpenAI Auth Desc"
webpage_url={openai_auth_key_url}
open_webpage_label={t("config_page.common.open_auth_key_webpage")}
variable={variable}
state={currentOpenAIAuthKey.state}
onChangeFunction={onChangeFunction}
@@ -439,7 +447,7 @@ const OpenAIModelContainer = () => {
return (
<DropdownMenuContainer
dropdown_id="select_openai_model"
label="Select OpenAI Model"
label={t("config_page.translation.select_openai_model.label")}
selected_id={selected_label}
list={currentSelectableOpenAIModelList.data}
selectFunction={selectFunction}
@@ -464,10 +472,10 @@ const GroqAuthKey_Box = () => {
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")}
label={t("config_page.translation.groq_auth_key.label")}
// desc="Groq Auth Desc"
webpage_url={groq_auth_key_url}
open_webpage_label={t("config_page.common.open_auth_key_webpage")}
variable={variable}
state={currentGroqAuthKey.state}
onChangeFunction={onChangeFunction}
@@ -500,7 +508,7 @@ const GroqModelContainer = () => {
return (
<DropdownMenuContainer
dropdown_id="select_groq_model"
label="Select Groq Model"
label={t("config_page.translation.select_groq_model.label")}
selected_id={selected_label}
list={currentSelectableGroqModelList.data}
selectFunction={selectFunction}
@@ -525,10 +533,10 @@ const OpenRouterAuthKey_Box = () => {
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")}
label={t("config_page.translation.openrouter_auth_key.label")}
// desc="OpenRouter Auth Desc"
webpage_url={openrouter_auth_key_url}
open_webpage_label={t("config_page.common.open_auth_key_webpage")}
variable={variable}
state={currentOpenRouterAuthKey.state}
onChangeFunction={onChangeFunction}
@@ -561,7 +569,7 @@ const OpenRouterModelContainer = () => {
return (
<DropdownMenuContainer
dropdown_id="select_openrouter_model"
label="Select OpenRouter Model"
label={t("config_page.translation.select_openrouter_model.label")}
selected_id={selected_label}
list={currentSelectableOpenRouterModelList.data}
selectFunction={selectFunction}
@@ -578,7 +586,7 @@ const LMStudioConnectionCheck_Box = () => {
return (
<>
<ConnectionCheckButtonContainer
label="Check LM Studio Connection"
label={t("config_page.translation.lmstudio_connection_check.label")}
variable={currentIsLMStudioConnected.data}
state={currentIsLMStudioConnected.state}
checkFunction={checkConnection_LMStudio}
@@ -603,7 +611,8 @@ const LMStudioURL_Box = () => {
<>
<EntryWithSaveButtonContainer
label="LM Studio URL"
desc="LM Studio URL Desc"
// label={t("config_page.translation.lmstudio_url.label")}
// desc={t("config_page.translation.lmstudio_url.desc")}
variable={variable}
saveFunction={saveFunction}
onChangeFunction={onChangeFunction}
@@ -630,13 +639,13 @@ const LMStudioModelContainer = () => {
};
let selected_label = (!currentIsLMStudioConnected.data && !currentSelectedLMStudioModel.data)
? "Connection Required"
? t("config_page.translation.select_lmstudio_model.connection_required")
: currentSelectedLMStudioModel.data;
return (
<DropdownMenuContainer
dropdown_id="select_lmstudio_model"
label="Select LMStudio Model"
label={t("config_page.translation.select_lmstudio_model.label")}
selected_id={selected_label}
list={currentSelectableLMStudioModelList.data}
selectFunction={selectFunction}
@@ -653,7 +662,7 @@ const OllamaConnectionCheck_Box = () => {
return (
<>
<ConnectionCheckButtonContainer
label="Check Ollama Connection"
label={t("config_page.translation.ollama_connection_check.label")}
variable={currentIsOllamaConnected.data}
state={currentIsOllamaConnected.state}
checkFunction={checkConnection_Ollama}
@@ -679,13 +688,13 @@ const OllamaModelContainer = () => {
};
let selected_label = (!currentIsOllamaConnected.data && !currentSelectedOllamaModel.data)
? "Connection Required"
? t("config_page.translation.select_ollama_model.connection_required")
: currentSelectedOllamaModel.data;
return (
<DropdownMenuContainer
dropdown_id="select_ollama_model"
label="Select Ollama Model"
label={t("config_page.translation.select_ollama_model.label")}
selected_id={selected_label}
list={currentSelectableOllamaModelList.data}
selectFunction={selectFunction}

10
src-ui/views/app/config_page/sidebar_section/SidebarSection.jsx
View File

@@ -27,11 +27,15 @@ export const SidebarSection = () => {
import clsx from "clsx";
import { useI18n } from "@useI18n";
import { useStore_SelectedConfigTabId } from "@store";
import {
useStore_SelectedConfigTabId,
useStore_IsBreakPoint,
} from "@store";
const Tab = (props) => {
const { t } = useI18n();
const { updateSelectedConfigTabId, currentSelectedConfigTabId } = useStore_SelectedConfigTabId();
const { currentIsBreakPoint } = useStore_IsBreakPoint();
const onclickFunction = () => {
updateSelectedConfigTabId(props.tab_id);
};
@@ -54,7 +58,9 @@ const Tab = (props) => {
return (
<div className={tab_container_class_names} onClick={onclickFunction}>
<p className={styles.tab_text}>{getLabel()}</p>
<p className={clsx(styles.tab_text, {
[styles.tab_text_small]: currentIsBreakPoint.data
})}>{getLabel()}</p>
<div className={switch_indicator_class_names}></div>
</div>
);

3
src-ui/views/app/config_page/sidebar_section/SidebarSection.module.scss
View File

@@ -64,6 +64,9 @@
font-size: 1.6rem;
// text-overflow: ellipsis;
position: relative;
&.tab_text_small {
font-size: 1.4rem;
}
}
.crown_emoji {
font-size: 1.6rem;