[Update] Add connection check functionality and new auth key labels in translation files.

locales/en.yml

@@ -78,6 +78,11 @@ config_page:
         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"
@@ -148,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."
@@ -156,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"

locales/ja.yml

@@ -76,7 +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: "処理デバイス"
@@ -147,6 +153,7 @@ config_page:
             large: "高精度モデル （{{capacity}}）"
         translation_compute_device:
             label: "AI翻訳の処理デバイス"
+
         deepl_auth_key:
             label: "DeepL APIキーの登録"
             desc: "使用の際は、メイン画面にある {{translator}} をDeepL_APIに変更してください。\n※対応していない言語もあります。"
@@ -155,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: "スピーカー"

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

@@ -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 ✅"
+            ? `${t("config_page.common.connection_check.connected")} ✅`
-            : "Disconnected ❌";
+            : `${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>
     );

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

@@ -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);

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

@@ -288,8 +288,8 @@ const PlamoAuthKey_Box = () => {
     return (
         <>
             <AuthKeyContainer
-                label="Plamo Auth Key"
+                label={t("config_page.translation.plamo_auth_key.label")}
-                desc="Plamo Auth Desc"
+                // desc="Plamo Auth Desc"
                 webpage_url={plamo_auth_key_url}
                 open_webpage_label={t("config_page.common.open_auth_key_webpage")}
                 variable={variable}
@@ -324,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}
@@ -350,8 +350,8 @@ const GeminiAuthKey_Box = () => {
     return (
         <>
             <AuthKeyContainer
-                label="Gemini Auth Key"
+                label={t("config_page.translation.gemini_auth_key.label")}
-                desc="Gemini Auth Desc"
+                // desc="Gemini Auth Desc"
                 webpage_url={gemini_auth_key_url}
                 open_webpage_label={t("config_page.common.open_auth_key_webpage")}
                 variable={variable}
@@ -386,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}
@@ -411,8 +411,8 @@ const OpenAIAuthKey_Box = () => {
     return (
         <>
             <AuthKeyContainer
-                label="OpenAI Auth Key"
+                label={t("config_page.translation.openai_auth_key.label")}
-                desc="OpenAI Auth Desc"
+                // desc="OpenAI Auth Desc"
                 webpage_url={openai_auth_key_url}
                 open_webpage_label={t("config_page.common.open_auth_key_webpage")}
                 variable={variable}
@@ -447,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}
@@ -472,8 +472,8 @@ const GroqAuthKey_Box = () => {
     return (
         <>
             <AuthKeyContainer
-                label="Groq Auth Key"
+                label={t("config_page.translation.groq_auth_key.label")}
-                desc="Groq Auth Desc"
+                // desc="Groq Auth Desc"
                 webpage_url={groq_auth_key_url}
                 open_webpage_label={t("config_page.common.open_auth_key_webpage")}
                 variable={variable}
@@ -508,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}
@@ -533,8 +533,8 @@ const OpenRouterAuthKey_Box = () => {
     return (
         <>
             <AuthKeyContainer
-                label="OpenRouter Auth Key"
+                label={t("config_page.translation.openrouter_auth_key.label")}
-                desc="OpenRouter Auth Desc"
+                // desc="OpenRouter Auth Desc"
                 webpage_url={openrouter_auth_key_url}
                 open_webpage_label={t("config_page.common.open_auth_key_webpage")}
                 variable={variable}
@@ -569,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}
@@ -586,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}
@@ -611,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}
@@ -638,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}
@@ -661,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}
@@ -687,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}