Merge pull request #31 from TNG/debug_button_and_experimental_tag

Debug button and experimental tag
TNG · Dec 17, 2024 · 220b9aa · 220b9aa
2 parents d3eb229 + 5208923
commit 220b9aa
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 28 deletions.
diff --git 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
@@ -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">
@@ -51,14 +53,23 @@
         <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'"
+                    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 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"
+                    :style="{ 'background-color': '#cc00ff88' }">
+                                Experimental</span>
             </div>
           </template>
         </drop-selector>
@@ -82,6 +93,9 @@
       </div>
     </div>
   </div>
+  <div class="text-right my-5">
+    <button @click="openDebug" class="v-radio-block">Open Developer Logs</button>
+  </div>
 </template>
 <script setup lang="ts">
 
@@ -91,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();
 
@@ -129,8 +146,27 @@ 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});
 }
 
+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>