Merge branch 'ui' into develop

src-ui/logics/_useBackendErrorHandling.js

@@ -115,7 +115,7 @@ export const _useBackendErrorHandling = () => {
                 }
                 return;
 
-            case "/run/enable_transcription_send":
+            case "/run/enable_transcription_receive":
                 if (message === "Transcription receive disabled due to VRAM overflow") {
                     updateTranscriptionReceiveStatus(data);
                     showNotification_Error("Transcription receive disabled due to VRAM overflow");
@@ -211,7 +211,6 @@ export const _useBackendErrorHandling = () => {
                 return;
 
             case "/set/data/selected_openai_model":
-                console.log(data);
                 if (message === "OpenAI model is not valid") {
                     updateSelectedOpenAIModel(data);
                     showNotification_Error(message, { category_id: "selected_openai_model" });
@@ -344,15 +343,23 @@ export const _useBackendErrorHandling = () => {
                 return;
 
             case "/run/lmstudio_connection":
+                if (message === "Cannot connect to LMStudio server") {
                     updateIsLMStudioConnected(data);
-                showNotification_Error(message);
+                    showNotification_Error(message, { category_id: "lmstudio_connection" });
-                console.error(message);
+                } else {
+                    updateIsLMStudioConnected(data);
+                    showNotification_Error(message, { category_id: "lmstudio_connection" });
+                }
                 return;
 
             case "/run/ollama_connection":
+                if (message === "Cannot connect to ollama server") {
                     updateIsOllamaConnected(data);
-                showNotification_Error(message);
+                    showNotification_Error(message, { category_id: "ollama_connection" });
-                console.error(message);
+                } else {
+                    updateIsOllamaConnected(data);
+                    showNotification_Error(message, { category_id: "ollama_connection" });
+                }
                 return;
 
             default:

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",
     },
+    // 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",

src-ui/logics/ui_configs.js

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

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

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