Refactored AppSettings.vue to enhance readability and the code structure

Signed-off-by: julianbollig <[email protected]>

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

@@ -39,7 +39,8 @@
   "COM_FULLSCREEN_EXIT": "FullScreen Exit",
   "COM_DO_NOT_SHOW_AGAIN": "Do not show again",
   "SETTINGS_MODEL_IMAGE_RESOLUTION_HD_CONFIRM": "HD Mode can result in slower than normal performance on systems with less than 12 GB of VRAM or 24GB of system memory for Intel Core Ultra PCs",
-  "SETTINGS_TAB_BASIC": "Basic Settings",
+  "SETTINGS_TAB_IMAGE": "Image",
+  "SETTINGS_TAB_BASIC": "Basic",
   "SETTINGS_TAB_MODEL": "Models",
   "SETTINGS_INFERENCE_DEVICE": "Inference Device",
   "SETTINGS_MODEL_IMAGE_SIZE": "Image Size",

WebUI/src/components/SettingsUi.vue → WebUI/src/components/SettingsBasic.vue

@@ -19,8 +19,8 @@
     <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-bolck v-for="themeName in theme.availableThemes" :checked="theme.active === themeName" :text="themeToDisplayName(themeName)"
-                @click="() => theme.selected = themeName"></radio-bolck>
+            <radio-block v-for="themeName in theme.availableThemes" :checked="theme.active === themeName" :text="themeToDisplayName(themeName)"
+                @click="() => theme.selected = themeName"></radio-block>
         </div>
     </div>
     <div class="flex flex-col gap-2">
@@ -44,13 +44,17 @@
     </div>
 </template>
 <script setup lang="ts">
-import { useGlobalSetup } from "@/assets/js/store/globalSetup";
+
 import DropSelector from "../components/DropSelector.vue";
-import RadioBolck from "../components/RadioBlock.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';
 
 const globalSetup = useGlobalSetup();
+const i18n = useI18N();
+const theme = useTheme();
 
 const themeToDisplayName = (theme: Theme) => {
     switch (theme) {
@@ -61,14 +65,34 @@ const themeToDisplayName = (theme: Theme) => {
     }
 }
 
-
 const modelSettings = reactive<KVObject>(Object.assign({}, toRaw(globalSetup.modelSettings)));
+
+const modelSettingsWatcher = watchEffect(() => {
+  modelSettings.llm = globalSetup.modelSettings.llm;
+  modelSettings.sd_model = globalSetup.modelSettings.sd_model;
+  modelSettings.lora = globalSetup.modelSettings.lora;
+});
+
+onMounted(() => {
+  cancelModelSettingsChange();
+})
+
+onUnmounted(() => {
+  modelSettingsWatcher();
+})
+
 const graphicsName = computed(() => {
     return globalSetup.graphicsList.find(item => modelSettings.graphics as number == item.index)?.name || "";
 })
+
 function changeGraphics(value: any, index: number) {
     globalSetup.applyModelSettings({ graphics: (value as GraphicsItem).index });
 }
-const theme = useTheme();
-const i18n = useI18N();
+
+function cancelModelSettingsChange() {
+  Object.keys(modelSettings).forEach((key) => {
+    modelSettings[key] = globalSetup.modelSettings[key];
+  });
+}
+
 </script>

WebUI/src/components/SettingsImageGeneration.vue

@@ -125,14 +125,15 @@
         <button class="mt-4" @click="imageGeneration.resetActiveWorkflowSettings"><div class="svg-icon i-refresh">Reset</div>Load workflow defaults</button>
     </div>
 </template>
+
+
 <script setup lang="ts">
 import { Setting, useImageGeneration } from "@/assets/js/store/imageGeneration";
 import WorkflowSelector from "../components/SettingsImageWorkflowSelector.vue";
 import SlideBar from "../components/SlideBar.vue";
 import ResolutionPicker from "../components/ui/slider/ResolutionPicker.vue";
 import RandomNumber from "../components/RandomNumber.vue";
 import DropSelector from "../components/DropSelector.vue";
-import { useI18N } from '@/assets/js/store/i18n';
 import { useGlobalSetup } from "@/assets/js/store/globalSetup";
 
 const imageGeneration = useImageGeneration();
@@ -142,6 +143,4 @@ const anyModifiableOrDisplayed = (settings: Setting[]) => settings.some(setting
 const modifiableOrDisplayed = (setting: Setting) => imageGeneration.activeWorkflow.modifiableSettings.includes(setting) || imageGeneration.activeWorkflow.displayedSettings.includes(setting)
 const modifiable = (setting: Setting) => imageGeneration.activeWorkflow.modifiableSettings.includes(setting)
 
-const i18n = useI18N();
-
 </script>