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

src-ui/logics/configs/config_page_setter/ui_config_setter.js

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

src-ui/logics/configs/config_page_setter/useSettingsLogics.js

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

src-ui/logics/utils.js

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