[Update] UI: Implement LLM connection handling and add connection check UI components.(Test UI)

src-ui/logics/_useBackendErrorHandling.js

@@ -2,6 +2,7 @@ import { useI18n } from "@useI18n";
 
 import {
     useNotificationStatus,
+    useLLMConnection,
 } from "@logics_common";
 
 import {
@@ -46,6 +47,11 @@ export const _useBackendErrorHandling = () => {
         updateWebsocketPort,
     } = useAdvancedSettings();
 
+    const {
+        updateIsOllamaConnected,
+        updateIsLMStudioConnected,
+    } = useLLMConnection();
+
     const errorHandling_Backend = ({message, data, endpoint, result}) => {
         switch (endpoint) {
             case "/run/error_device":
@@ -221,6 +227,18 @@ export const _useBackendErrorHandling = () => {
                 }
                 return;
 
+            case "/run/lmstudio_connection":
+                updateIsLMStudioConnected(data);
+                showNotification_Error(message);
+                console.error(message);
+                return;
+
+            case "/run/ollama_connection":
+                updateIsOllamaConnected(data);
+                showNotification_Error(message);
+                console.error(message);
+                return;
+
             default:
                 console.error(`Invalid endpoint or message: ${endpoint}\nmessage: ${message}\nresult: ${JSON.stringify(result)}`);
                 return;

src-ui/logics/common/index.js

@@ -14,4 +14,5 @@ export { useHandleNetworkConnection } from "./useHandleNetworkConnection";
 export { useHandleOscQuery } from "./useHandleOscQuery";
 export { useIsOscAvailable } from "./useIsOscAvailable";
 export { useIsVrctAvailable } from "./useIsVrctAvailable";
-export { useFetch } from "./useFetch";
+export { useFetch } from "./useFetch";
+export { useLLMConnection } from "./useLLMConnection";

src-ui/logics/common/useLLMConnection.js

@@ -0,0 +1,47 @@
+import { useStdoutToPython } from "@useStdoutToPython";
+import {
+    useStore_IsLMStudioConnected,
+    useStore_IsOllamaConnected,
+} from "@store";
+
+export const useLLMConnection = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const {
+        currentIsLMStudioConnected,
+        updateIsLMStudioConnected,
+        pendingIsLMStudioConnected,
+    } = useStore_IsLMStudioConnected();
+    const {
+        currentIsOllamaConnected,
+        updateIsOllamaConnected,
+        pendingIsOllamaConnected,
+    } = useStore_IsOllamaConnected();
+
+    const checkConnection_LMStudio = () => {
+        pendingIsLMStudioConnected();
+        asyncStdoutToPython("/run/lmstudio_connection");
+    };
+    const setConnectionStatus_LMStudio = (is_connected) => {
+        updateIsLMStudioConnected(is_connected);
+    };
+
+    const checkConnection_Ollama = () => {
+        pendingIsOllamaConnected();
+        asyncStdoutToPython("/run/ollama_connection");
+    };
+    const setConnectionStatus_Ollama = (is_connected) => {
+        updateIsOllamaConnected(is_connected);
+    };
+
+    return {
+        currentIsLMStudioConnected,
+        updateIsLMStudioConnected,
+        setConnectionStatus_LMStudio,
+        checkConnection_LMStudio,
+
+        currentIsOllamaConnected,
+        updateIsOllamaConnected,
+        setConnectionStatus_Ollama,
+        checkConnection_Ollama,
+    };
+};

src-ui/logics/store.js

@@ -167,6 +167,8 @@ export const { atomInstance: Atom_NotificationStatus, useHook: useStore_Notifica
     key: 0,
     message: "",
 }, "NotificationStatus");
+export const { atomInstance: Atom_IsLMStudioConnected, useHook: useStore_IsLMStudioConnected } = createAtomWithHook(false, "IsLMStudioConnected", {is_state_ok: true});
+export const { atomInstance: Atom_IsOllamaConnected, useHook: useStore_IsOllamaConnected } = createAtomWithHook(false, "IsOllamaConnected", {is_state_ok: true});
 
 // Main Page
 // Common

src-ui/logics/useReceiveRoutes.js

@@ -20,6 +20,9 @@ export const STATIC_ROUTE_META_LIST = [
     { endpoint: "/run/open_filepath_logs", ns: common, hook_name: "useOpenFolder", method_name: "openedFolder_MessageLogs" },
     { endpoint: "/run/open_filepath_config_file", ns: common, hook_name: "useOpenFolder", method_name: "openedFolder_ConfigFile" },
 
+    { endpoint: "/run/lmstudio_connection", ns: common, hook_name: "useLLMConnection", method_name: "setConnectionStatus_LMStudio" },
+    { endpoint: "/run/ollama_connection", ns: common, hook_name: "useLLMConnection", method_name: "setConnectionStatus_Ollama" },
+
     // Software Version
     { endpoint: "/get/data/version", ns: common, hook_name: "useSoftwareVersion", method_name: "updateSoftwareVersion" },
     // Latest Software Version Info