Add features to installation management

WebUI/src/assets/i18n/en-US.json

@@ -34,6 +34,7 @@
   "COM_REQUESTING":"Requesting",
   "COM_DEFAULT":"Default",
   "COM_STOP":"Stop",
+  "COM_DEBUG": "Open Developer Logs",
   "COM_OPEN_LOCATION":"Open Location",
   "COM_OPEN_PARAMS": "Parameters Info",
   "COM_LOW": "low",
@@ -84,6 +85,9 @@
   "SETTINGS_BASIC_LANGUAGE": "Language",
   "SETTINGS_BASIC_PATHS": "Paths",
   "SETTINGS_BASIC_LLM_CHECKPOINTS": "LLM Model Path",
+  "SETTINGS_BASIC_GENERAL": "General Settings",
+  "SETTINGS_BASIC_DEVICES": "Devices",
+  "SETTINGS_BASIC_BACKEND": "Backends",
   "SETTINGS_MODEL_HUGGINGFACE": "Hugging Face",
   "SETTINGS_MODEL_HUGGINGFACE_API_TOKEN": "API Token",
   "SETTINGS_MODEL_HUGGINGFACE_INVALID_TOKEN_TEXT": "Please enter a valid token (hf_***).",
@@ -97,7 +101,6 @@
   "SETTINGS_MODEL_SD_STANDARD_INPAINT_MODEL": "Standard Default Inpaint/OutPaint Model",
   "SETTINGS_MODEL_SD_HD_MODEL": "HD Default Model",
   "SETTINGS_MODEL_RAG_MODEL": "Rag Query Model",
-  "SETTINGS_MODEL_BACKEND": "Inference Backends",
   "SETTINGS_BACKEND_STATUS": "Backend Status",
   "SETTINGS_MODEL_MANAGE_BACKEND": "Manage Backend Components",
   "SETTINGS_MODEL_EXIST": "The model already exist. Repeating the download is unnecessary.",
@@ -206,9 +209,18 @@
   "BACKEND_INFORMATION": "Information",
   "BACKEND_ENABLE": "Enable *",
   "BACKEND_ACTION": "Action",
+  "BACKEND_REQUIRED": "Required",
+  "BACKEND_OPTIONAL": "Optional",
   "BACKEND_REQUIRED_COMPONENTS_MESSAGE": "Before you can use the Intel AI Playground, we need to download some additional components. Please make sure you have a stable and unmetered internet connection.",
   "BACKEND_OPTIONAL_COMPONENTS_MESSAGE": "Optional components are not required for AI-Playground to work, but provide alternative functions. If you want to use them please click the info buttons to familiarize yourself with their terms and conditions before activating them.",
   "BACKEND_TERMS_AND_CONDITIONS": "* I have reviewed the optional component. I agree to all terms and conditions and would like to download and enable third-party software if applicable.",
+  "BACKEND_STATUS_RUNNING": "Running",
+  "BACKEND_STATUS_STOPPING": "Stopping",
+  "BACKEND_STATUS_STARTING": "Starting",
+  "BACKEND_STATUS_INSTALLED": "Installed",
+  "BACKEND_STATUS_NOT_INSTALLED": "Not Installed",
+  "BACKEND_STATUS_INSTALLING": "Installing",
+  "BACKEND_STATUS_FAILED": "Failed",
   "SETTINGS_IMAGE_MODE": "Mode",
   "SETTINGS_IMAGE_WORKFLOW": "Workflow",
   "WORKFLOW_RELOAD_INFO": "Reload workflows from disk.",

WebUI/src/components/DropSelector.vue

@@ -2,7 +2,7 @@
     <button ref="root" class="v-drop-select" :class="class" :disabled="props.disabled" @click="showList">
         <p class="v-drop-select-result">
             <span class="v-drop-select-text">
-                <slot name="selected">{{ props.value == null ? i18NSate.COM_NO_SELECTED : props.value }}</slot>
+                <slot name="selected">{{ props.value == null ? languages.COM_NO_SELECTED : props.value }}</slot>
             </span>
             <span class="v-drop-toggle"></span>
         </p>
@@ -17,9 +17,7 @@
     </Teleport>
 </template>
 <script setup lang="ts">
-import { useI18N } from '@/assets/js/store/i18n.ts';
 
-const i18NSate = useI18N().state;
 const props = defineProps<{
     array: Array<any>,
     value?: any,

WebUI/src/components/InstallationManagement.vue

@@ -20,7 +20,7 @@
           <tbody>
           <tr v-for="component in components">
             <td class="text-left">{{ mapServiceNameToDisplayName(component.serviceName) }}</td>
-            <td class="text-center">{{ component.isRequired ? "Required" : "Optional" }}</td>
+            <td class="text-center">{{ component.isRequired ? languages.BACKEND_REQUIRED : languages.BACKEND_OPTIONAL }}</td>
             <td>
               <a :href="getInfoURL(component.serviceName)" target="_blank">
               <span v-show="!!getInfoURL(component.serviceName)" style="vertical-align: middle;"
@@ -93,26 +93,29 @@
           }}
         </button>
       </div>
-
       <!-- terms and conditions -->
       <div class="dialog-container z-10 pt-10" style="display: flex">
         <p>{{ languages.BACKEND_TERMS_AND_CONDITIONS }}</p>
       </div>
+      <!-- Change Language Settings -->
+      <div class="place-content-end flex gap-2">
+        <LanguageSelector class="max-w-40"></LanguageSelector>
+        <button @click="openDebug" class="v-radio-block">{{ languages.COM_DEBUG }}</button>
+      </div>
     </div>
   </div>
-
 </template>
 
 <script setup lang="ts">
 import {mapServiceNameToDisplayName, mapStatusToColor, mapToDisplayStatus} from "@/lib/utils.ts";
 import {toast} from "@/assets/js/toast.ts";
 import {useBackendServices} from '@/assets/js/store/backendServices';
+import LanguageSelector from "@/components/LanguageSelector.vue";
 
 const emits = defineEmits<{
   (e: "close"): void
 }>();
 
-
 type ExtendedApiServiceInformation = ApiServiceInformation & { enabled: boolean, isLoading: boolean }
 
 const backendServices = useBackendServices();
@@ -207,6 +210,10 @@ function getInfoURL(serviceName: string) {
   }
 }
 
+function openDebug() {
+  window.electronAPI.openDevTools()
+}
+
 function CanCloseInstallations() {
   return components.value.every((i) => i.status === 'running' || !i.isRequired)
 }

WebUI/src/components/LanguageSelector.vue

@@ -0,0 +1,24 @@
+<template>
+  <drop-selector :array="i18n.languageOptions" @change="i18n.changeLanguage">
+    <template #selected>
+      <div class="flex gap-2 items-center">
+        <span class="rounded-full bg-green-500 w-2 h-2"></span>
+        <span>{{ i18n.currentLanguageName }}</span>
+      </div>
+    </template>
+    <template #list="slotItem">
+      <div class="flex gap-2 items-center">
+        <span class="rounded-full bg-green-500 w-2 h-2"></span>
+        <span>{{ slotItem.item.name }}</span>
+      </div>
+    </template>
+  </drop-selector>
+</template>
+
+<script setup lang="ts">
+
+import DropSelector from "../components/DropSelector.vue";
+import {useI18N} from '@/assets/js/store/i18n';
+const i18n = useI18N();
+
+</script>

WebUI/src/components/SettingsBasic.vue

@@ -1,21 +1,9 @@
 <template>
   <div class="border-b border-color-spilter flex flex-col gap-5 py-4">
+    <h2 class="text-center font-bold">{{ languages.SETTINGS_BASIC_GENERAL }}</h2>
     <div class="flex flex-col gap-2">
       <p>{{ languages.SETTINGS_BASIC_LANGUAGE }}</p>
-      <drop-selector :array="i18n.languageOptions" @change="i18n.changeLanguage">
-        <template #selected>
-          <div class="flex gap-2 items-center">
-            <span class="rounded-full bg-green-500 w-2 h-2"></span>
-            <span>{{ i18n.currentLanguageName }}</span>
-          </div>
-        </template>
-        <template #list="slotItem">
-          <div class="flex gap-2 items-center">
-            <span class="rounded-full bg-green-500 w-2 h-2"></span>
-            <span>{{ slotItem.item.name }}</span>
-          </div>
-        </template>
-      </drop-selector>
+      <LanguageSelector></LanguageSelector>
     </div>
     <div v-if="theme.availableThemes.length > 1" class="flex flex-col gap-2">
       <p>Theme</p>
@@ -26,7 +14,8 @@
       </div>
     </div>
   </div>
-  <div class="flex flex-col gap-2">
+  <div class="border-b border-color-spilter flex flex-col gap-5 py-4">
+    <h2 class="text-center font-bold">{{ languages.SETTINGS_BASIC_DEVICES }}</h2>
     <p>{{ languages.SETTINGS_INFERENCE_DEVICE }}</p>
     <div class="flex items-center gap-2 flex-wrap">
       <drop-selector :array="globalSetup.graphicsList" @change="changeGraphics">
@@ -46,7 +35,7 @@
     </div>
   </div>
   <div class="border-b border-color-spilter flex flex-col gap-5 py-4">
-    <h2 class="text-center font-bold">{{ languages.SETTINGS_MODEL_BACKEND }}</h2>
+    <h2 class="text-center font-bold">{{ languages.SETTINGS_BASIC_BACKEND }}</h2>
     <div class="flex flex-col gap-2">
       <p>{{ languages.SETTINGS_LLM_BACKEND }}</p>
       <div class="flex items-center gap-2">
@@ -77,7 +66,6 @@
     </div>
     <div class="flex flex-col gap-3">
       <p>{{ languages.SETTINGS_BACKEND_STATUS }}</p>
-      <!--   Required   -->
       <table class="text-center w-full mx-2 table-fixed">
         <tbody>
         <tr v-for="item in displayComponents">
@@ -94,7 +82,7 @@
     </div>
   </div>
   <div class="text-right my-5">
-    <button @click="openDebug" class="v-radio-block">Open Developer Logs</button>
+    <button @click="openDebug" class="v-radio-block">{{ languages.COM_DEBUG }}</button>
   </div>
 </template>
 <script setup lang="ts">
@@ -103,16 +91,16 @@ import DropSelector from "../components/DropSelector.vue";
 import RadioBlock from "../components/RadioBlock.vue";
 
 import {useGlobalSetup} from "@/assets/js/store/globalSetup";
-import {useI18N} from '@/assets/js/store/i18n';
+
 import {useTheme} from '@/assets/js/store/theme';
 import {useTextInference, backendTypes, Backend} from "@/assets/js/store/textInference";
 import {mapServiceNameToDisplayName, mapStatusToColor, mapToDisplayStatus} from "@/lib/utils.ts";
 import {useBackendServices} from "@/assets/js/store/backendServices.ts";
+import LanguageSelector from "@/components/LanguageSelector.vue";
 
 const globalSetup = useGlobalSetup();
 const textInference = useTextInference();
 const backendServices = useBackendServices();
-const i18n = useI18N();
 const theme = useTheme();
 
 const textInferenceBackendDisplayName: Record<typeof backendTypes[number], string> = {

WebUI/src/lib/utils.ts

@@ -1,5 +1,6 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
+import {useI18N} from "@/assets/js/store/i18n.ts";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -27,23 +28,24 @@ export function mapStatusToColor(componentState: BackendStatus) {
 }
 
 export function mapToDisplayStatus(componentState: BackendStatus) {
+  const i18nState = useI18N().state;
   switch (componentState) {
     case "running":
-      return "Running"
+      return i18nState.BACKEND_STATUS_RUNNING
     case "stopping":
-      return "Stopping"
+      return i18nState.BACKEND_STATUS_STOPPING
     case "starting":
-        return "Starting"
+        return i18nState.BACKEND_STATUS_STARTING
     case "stopped":
     case "notYetStarted":
-      return "Installed"
+      return i18nState.BACKEND_STATUS_INSTALLED
     case "installationFailed":
     case "failed":
-      return "Failed"
+      return i18nState.BACKEND_STATUS_FAILED
     case "notInstalled":
-      return "Not Installed"
+      return i18nState.BACKEND_STATUS_NOT_INSTALLED
     case "installing":
-      return "Installing"
+      return i18nState.BACKEND_STATUS_INSTALLING
     default:
       return componentState
   }