From 430c9f5da2f25f12b6bbcf7cb57e59b557fd9d49 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 14 Nov 2025 12:41:05 +0900
Subject: [PATCH] [Update] UI: Add LM Studio and Ollama model components to the
 Translation section.

---
 .../config_page_setter/ui_config_setter.js    | 56 ++++++++++++
 .../setting_box/translation/Translation.jsx   | 88 +++++++++++++++++++
 2 files changed, 144 insertions(+)

diff --git a/src-ui/logics/configs/config_page_setter/ui_config_setter.js b/src-ui/logics/configs/config_page_setter/ui_config_setter.js
index a59b8e2b..f3790a6c 100644
--- a/src-ui/logics/configs/config_page_setter/ui_config_setter.js
+++ b/src-ui/logics/configs/config_page_setter/ui_config_setter.js
@@ -314,6 +314,62 @@ export const SETTINGS_ARRAY = [
         add_endpoint_run_array: ["from_backend"],
         base_endpoint_name: "selected_openai_model",
     },
+    // LM Studio
+    {
+        Category: "Translation",
+        Base_Name: "LMStudioURL",
+        default_value: "",
+        ui_template_id: "input",
+        logics_template_id: "get_set",
+        base_endpoint_name: "lmstudio_url",
+    },
+    {
+        Category: "Translation",
+        Base_Name: "SelectableLMStudioModelList",
+        default_value: [],
+        ui_template_id: "list",
+        logics_template_id: "get_set",
+        add_endpoint_run_array: ["from_backend"],
+        base_endpoint_name: "selectable_lmstudio_model_list",
+        response_transform: "arrayToObject",
+    },
+    {
+        Category: "Translation",
+        Base_Name: "SelectedLMStudioModel",
+        default_value: "",
+        ui_template_id: "select",
+        logics_template_id: "get_set",
+        add_endpoint_run_array: ["from_backend"],
+        base_endpoint_name: "selected_lmstudio_model",
+    },
+    // Ollama
+    {
+        Category: "Translation",
+        Base_Name: "OllamaURL",
+        default_value: "",
+        ui_template_id: "input",
+        logics_template_id: "get_set",
+        base_endpoint_name: "ollama_url",
+    },
+    {
+        Category: "Translation",
+        Base_Name: "SelectableOllamaModelList",
+        default_value: [],
+        ui_template_id: "list",
+        logics_template_id: "get_set",
+        add_endpoint_run_array: ["from_backend"],
+        base_endpoint_name: "selectable_ollama_model_list",
+        response_transform: "arrayToObject",
+    },
+    {
+        Category: "Translation",
+        Base_Name: "SelectedOllamaModel",
+        default_value: "",
+        ui_template_id: "select",
+        logics_template_id: "get_set",
+        add_endpoint_run_array: ["from_backend"],
+        base_endpoint_name: "selected_ollama_model",
+    },
 
     // Transcription
     // Mic
diff --git a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
index b7bdf99f..7ad243ff 100644
--- a/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
+++ b/src-ui/views/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -14,6 +14,7 @@ import {
     DownloadModelsContainer,
     AuthKeyContainer,
     MultiDropdownMenuContainer,
+    EntryWithSaveButtonContainer,
     RadioButtonContainer,
     DropdownMenuContainer,
 
@@ -44,6 +45,11 @@ export const Translation = () => {
 
             <OpenAIAuthKey_Box />
             <OpenAIModelContainer />
+
+            <LMStudioURL_Box />
+            <LMStudioModelContainer />
+
+            <OllamaModelContainer />
         </>
     );
 };
@@ -415,6 +421,88 @@ const OpenAIModelContainer = () => {
 };
 
 
+
+const LMStudioURL_Box = () => {
+    const { t } = useI18n();
+    const { currentLMStudioURL, setLMStudioURL, deleteLMStudioURL } = useTranslation();
+
+    const { variable, onChangeFunction, saveFunction } = useSaveButtonLogic({
+        variable: currentLMStudioURL.data,
+        state: currentLMStudioURL.state,
+        setFunction: setLMStudioURL,
+        deleteFunction: deleteLMStudioURL,
+    });
+
+    return (
+        <>
+            <EntryWithSaveButtonContainer
+                label="LM Studio URL"
+                desc="LM Studio URL Desc"
+                variable={variable}
+                saveFunction={saveFunction}
+                onChangeFunction={onChangeFunction}
+                state={currentLMStudioURL.state}
+                remove_border_bottom={true}
+                // width="10rem"
+            />
+        </>
+    );
+};
+const LMStudioModelContainer = () => {
+    const { t } = useI18n();
+    const {
+        currentSelectableLMStudioModelList,
+
+        currentSelectedLMStudioModel,
+        setSelectedLMStudioModel,
+    } = useTranslation();
+
+    if (currentSelectableLMStudioModelList.data.length === 0) return null;
+
+    const selectFunction = (selected_data) => {
+        setSelectedLMStudioModel(selected_data.selected_id);
+    };
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="select_lmstudio_model"
+            label="Select LMStudio Model"
+            selected_id={currentSelectedLMStudioModel.data}
+            list={currentSelectableLMStudioModelList.data}
+            selectFunction={selectFunction}
+            state={currentSelectedLMStudioModel.state}
+        />
+    );
+};
+
+const OllamaModelContainer = () => {
+    const { t } = useI18n();
+    const {
+        currentSelectableOllamaModelList,
+
+        currentSelectedOllamaModel,
+        setSelectedOllamaModel,
+    } = useTranslation();
+
+    if (currentSelectableOllamaModelList.data.length === 0) return null;
+
+    const selectFunction = (selected_data) => {
+        setSelectedOllamaModel(selected_data.selected_id);
+    };
+
+    return (
+        <DropdownMenuContainer
+            dropdown_id="select_ollama_model"
+            label="Select Ollama Model"
+            selected_id={currentSelectedOllamaModel.data}
+            list={currentSelectableOllamaModelList.data}
+            selectFunction={selectFunction}
+            state={currentSelectedOllamaModel.state}
+        />
+    );
+};
+
+
 // Duplicate
 const transformDeviceArray = (devices) => {
     const name_counts = Object.values(devices).reduce((counts, device) => {