From 9d49eae291e8dec2fcf364c099d54837ee37c027 Mon Sep 17 00:00:00 2001
From: marijnvg-tng <marijn.vangeest@tngtech.com>
Date: Tue, 17 Dec 2024 10:15:26 +0100
Subject: [PATCH 1/4] Add Debug Button

A button under the Basics settings tab that opens the developer tools in a separate window

Signed-off-by: marijnvg-tng <marijn.vangeest@tngtech.com>
---
 WebUI/src/components/SettingsBasic.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/WebUI/src/components/SettingsBasic.vue b/WebUI/src/components/SettingsBasic.vue
index 1373f48f..55a687d3 100644
--- a/WebUI/src/components/SettingsBasic.vue
+++ b/WebUI/src/components/SettingsBasic.vue
@@ -82,6 +82,9 @@
       </div>
     </div>
   </div>
+  <div class="text-right my-7">
+    <button @click="openDebug" class="v-radio-block">Open Developer Logs</button>
+  </div>
 </template>
 <script setup lang="ts">
 
@@ -129,6 +132,10 @@ const graphicsName = computed(() => {
   return globalSetup.graphicsList.find(item => modelSettings.graphics as number == item.index)?.name || "";
 })
 
+function openDebug() {
+  window.electronAPI.openDevTools()
+}
+
 function changeGraphics(value: any, index: number) {
   globalSetup.applyModelSettings({graphics: (value as GraphicsItem).index});
 }

From a405d81100bf02f14f41d0a75bbc74d2e637689a Mon Sep 17 00:00:00 2001
From: marijnvg-tng <marijn.vangeest@tngtech.com>
Date: Tue, 17 Dec 2024 10:27:47 +0100
Subject: [PATCH 2/4] Add Experimental tag to LlamaCpp backend

Signed-off-by: marijnvg-tng <marijn.vangeest@tngtech.com>
---
 WebUI/src/components/SettingsBasic.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/WebUI/src/components/SettingsBasic.vue b/WebUI/src/components/SettingsBasic.vue
index 55a687d3..f17846d1 100644
--- a/WebUI/src/components/SettingsBasic.vue
+++ b/WebUI/src/components/SettingsBasic.vue
@@ -52,13 +52,22 @@
           <template #selected>
             <div class="flex gap-2 items-center">
               <span class="rounded-full bg-green-500 w-2 h-2"></span>
-              <span>{{ textInferenceBackendDisplayName[textInference.backend] }}</span>
+            <span>{{ textInferenceBackendDisplayName[textInference.backend] }}</span>
+            <!--       Flag LlamaCpp as experimental       -->
+            <span v-if="textInference.backend=='LLAMA.CPP'"
+                class="rounded-lg h-4 px-1 text-xs"
+                :style="{ 'background-color': '#cc00ff88' }">
+                                Experimental</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>{{ textInferenceBackendDisplayName[slotItem.item as typeof backendTypes[number]] }}</span>
+              <span v-if="slotItem.item=='LLAMA.CPP'"
+                    class="rounded-lg h-4 px-1 text-xs"
+                    :style="{ 'background-color': '#cc00ff88' }">
+                                Experimental</span>
             </div>
           </template>
         </drop-selector>

From a984b1e3d041b523a7bb19719ae4a9bcb611dc6d Mon Sep 17 00:00:00 2001
From: marijnvg-tng <marijn.vangeest@tngtech.com>
Date: Tue, 17 Dec 2024 10:44:14 +0100
Subject: [PATCH 3/4] Minor UI improvement in the Basics tab under AppSettings

Signed-off-by: marijnvg-tng <marijn.vangeest@tngtech.com>
---
 WebUI/src/components/SettingsBasic.vue | 60 +++++++++++++-------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/WebUI/src/components/SettingsBasic.vue b/WebUI/src/components/SettingsBasic.vue
index f17846d1..9b46fc0a 100644
--- a/WebUI/src/components/SettingsBasic.vue
+++ b/WebUI/src/components/SettingsBasic.vue
@@ -1,27 +1,29 @@
 <template>
-  <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>
-  </div>
-  <div v-if="theme.availableThemes.length > 1" class="flex flex-col gap-2">
-    <p>Theme</p>
-    <div class="grid gap-2" :class="{[`grid-cols-${theme.availableThemes.length}`]: true}">
-      <radio-block v-for="themeName in theme.availableThemes" :checked="theme.active === themeName"
-                   :text="themeToDisplayName(themeName)"
-                   @click="() => theme.selected = themeName"></radio-block>
+  <div class="border-b border-color-spilter flex flex-col gap-5 py-4">
+    <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>
+    </div>
+    <div v-if="theme.availableThemes.length > 1" class="flex flex-col gap-2">
+      <p>Theme</p>
+      <div class="grid gap-2" :class="{[`grid-cols-${theme.availableThemes.length}`]: true}">
+        <radio-block v-for="themeName in theme.availableThemes" :checked="theme.active === themeName"
+                     :text="themeToDisplayName(themeName)"
+                     @click="() => theme.selected = themeName"></radio-block>
+      </div>
     </div>
   </div>
   <div class="flex flex-col gap-2">
@@ -52,11 +54,11 @@
           <template #selected>
             <div class="flex gap-2 items-center">
               <span class="rounded-full bg-green-500 w-2 h-2"></span>
-            <span>{{ textInferenceBackendDisplayName[textInference.backend] }}</span>
-            <!--       Flag LlamaCpp as experimental       -->
-            <span v-if="textInference.backend=='LLAMA.CPP'"
-                class="rounded-lg h-4 px-1 text-xs"
-                :style="{ 'background-color': '#cc00ff88' }">
+              <span>{{ textInferenceBackendDisplayName[textInference.backend] }}</span>
+              <!--       Flag LlamaCpp as experimental       -->
+              <span v-if="textInference.backend=='LLAMA.CPP'"
+                    class="rounded-lg h-4 px-1 text-xs"
+                    :style="{ 'background-color': '#cc00ff88' }">
                                 Experimental</span>
             </div>
           </template>
@@ -91,7 +93,7 @@
       </div>
     </div>
   </div>
-  <div class="text-right my-7">
+  <div class="text-right my-5">
     <button @click="openDebug" class="v-radio-block">Open Developer Logs</button>
   </div>
 </template>

From 52089230f133e0a3c6c409cad4870bf44f91b66d Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Tue, 17 Dec 2024 14:18:15 +0100
Subject: [PATCH 4/4] Add activity on dropdown menu in basic tab

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/js/store/textInference.ts |  3 +--
 WebUI/src/components/SettingsBasic.vue     | 24 +++++++++++++++++++---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/WebUI/src/assets/js/store/textInference.ts b/WebUI/src/assets/js/store/textInference.ts
index fdf6eca9..9afc2aba 100644
--- a/WebUI/src/assets/js/store/textInference.ts
+++ b/WebUI/src/assets/js/store/textInference.ts
@@ -5,13 +5,12 @@ import { useBackendServices } from "./backendServices";
 
 export const backendTypes = ['IPEX-LLM', 'LLAMA.CPP'] as const;
 const backend = z.enum(backendTypes);
-type Backend = z.infer<typeof backend>;
+export type Backend = z.infer<typeof backend>;
 
 const backendModelKey = {
     'IPEX-LLM': 'llm_model',
     'LLAMA.CPP': 'ggufLLM_model',
 }
-
 export const useTextInference = defineStore("textInference", () => {
 
     const globalSetup = useGlobalSetup();
diff --git a/WebUI/src/components/SettingsBasic.vue b/WebUI/src/components/SettingsBasic.vue
index 9b46fc0a..f25e2c5e 100644
--- a/WebUI/src/components/SettingsBasic.vue
+++ b/WebUI/src/components/SettingsBasic.vue
@@ -53,7 +53,7 @@
         <drop-selector :array="[...backendTypes]" @change="(item) => textInference.backend = item">
           <template #selected>
             <div class="flex gap-2 items-center">
-              <span class="rounded-full bg-green-500 w-2 h-2"></span>
+              <span class="rounded-full w-2 h-2" :class="{ 'bg-green-500': isRunning(textInference.backend), 'bg-gray-500': !isRunning(textInference.backend) }"></span>
               <span>{{ textInferenceBackendDisplayName[textInference.backend] }}</span>
               <!--       Flag LlamaCpp as experimental       -->
               <span v-if="textInference.backend=='LLAMA.CPP'"
@@ -64,7 +64,7 @@
           </template>
           <template #list="slotItem">
             <div class="flex gap-2 items-center">
-              <span class="rounded-full bg-green-500 w-2 h-2"></span>
+              <span class="rounded-full w-2 h-2" :class="{ 'bg-green-500': isRunning(slotItem.item), 'bg-gray-500': !isRunning(slotItem.item) }"></span>
               <span>{{ textInferenceBackendDisplayName[slotItem.item as typeof backendTypes[number]] }}</span>
               <span v-if="slotItem.item=='LLAMA.CPP'"
                     class="rounded-lg h-4 px-1 text-xs"
@@ -105,12 +105,15 @@ 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} from "@/assets/js/store/textInference";
+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";
+
 
 const apiServiceInformation = ref<ApiServiceInformation[]>([])
 const globalSetup = useGlobalSetup();
 const textInference = useTextInference();
+const backendServices = useBackendServices();
 const i18n = useI18N();
 const theme = useTheme();
 
@@ -151,4 +154,19 @@ function changeGraphics(value: any, index: number) {
   globalSetup.applyModelSettings({graphics: (value as GraphicsItem).index});
 }
 
+function mapBackendNames(name : Backend) : BackendServiceName | undefined {
+  if(name === "IPEX-LLM") {
+    return "ai-backend" as BackendServiceName
+  } else if(name === "LLAMA.CPP") {
+      return 'llamacpp-backend' as BackendServiceName
+  } else {
+      return undefined
+  }
+}
+
+function isRunning(name : Backend) {
+  const backendName : BackendServiceName | undefined =  mapBackendNames(name)
+  return backendServices.info.find((item) => item.serviceName === backendName)?.status === "running";
+}
+
 </script>
\ No newline at end of file