Re-enable hd warning dialog and clean up settings

TNG · Nov 26, 2024 · e0daf1c · e0daf1c
1 parent 1e2f971
commit e0daf1c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 302 deletions.
diff --git a/WebUI/src/assets/js/store/imageGeneration.ts b/WebUI/src/assets/js/store/imageGeneration.ts
@@ -96,6 +96,8 @@ export const useImageGeneration = defineStore("imageGeneration", () => {
     const stableDiffusion = useStableDiffusion();
     const globalSetup = useGlobalSetup();
     const i18nState = useI18N().state;
+
+    const hdWarningDismissed = ref(false);
 
     const workflows = ref<Workflow[]>(predefinedWorkflows);
     const activeWorkflowName = ref<string | null>('Standard');
@@ -279,6 +281,7 @@ export const useImageGeneration = defineStore("imageGeneration", () => {
     loadWorkflowsFromJson();
 
     return {
+        hdWarningDismissed,
         backend,
         workflows,
         activeWorkflowName,
@@ -315,7 +318,7 @@ export const useImageGeneration = defineStore("imageGeneration", () => {
 }, {
     persist: {
         debug: true,
-        pick: ['backend', 'activeWorkflowName', 'settingsPerWorkflow']
+        pick: ['backend', 'activeWorkflowName', 'settingsPerWorkflow', 'hdWarningDismissed']
     }
 });
 

diff --git a/WebUI/src/assets/js/store/stableDiffusion.ts b/WebUI/src/assets/js/store/stableDiffusion.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { StableDiffusionSettings, useImageGeneration } from "./imageGeneration";
+import { useImageGeneration } from "./imageGeneration";
 import { useGlobalSetup } from "./globalSetup";
 import { Const } from "../const";
 import { useModels } from "./models";
@@ -27,66 +27,15 @@ type BackendParams = {
 }
 
 export const useStableDiffusion = defineStore("stableDiffusion", () => {
-    const settings = ref<StableDiffusionSettings>({
-        resolution: 'standard',
-        quality: 'standard',
-        negativePrompt: "bad hands, nsfw",
-        batchSize: 1,
-        seed: -1,
-        width: 512,
-        height: 512,
-        imageModel: "Lykon/dreamshaper-8",
-        inpaintModel: "Lykon/dreamshaper-8-inpainting",
-        guidanceScale: 7.5,
-        inferenceSteps: 20,
-        lora: null,
-        scheduler: null,
-        imagePreview: true,
-        safetyCheck: true
-    });
-
-    const manualModeSettings = ref<StableDiffusionSettings>({
-        resolution: 'standard',
-        quality: 'standard',
-        imageModel: "Lykon/dreamshaper-8",
-        inpaintModel: "Lykon/dreamshaper-8-inpainting",
-        negativePrompt: "bad hands, nsfw",
-        batchSize: 1,
-        width: 512,
-        height: 512,
-        guidanceScale: 7.5,
-        inferenceSteps: 20,
-        seed: -1,
-        lora: null,
-        scheduler: null,
-        imagePreview: true,
-        safetyCheck: true
-    });
 
     const imageGeneration = useImageGeneration();
     const globalSetup = useGlobalSetup();
     const i18nState = useI18N().state;
-    const hdWarningDismissed = ref(false);
-    const hdWarningModalActive = ref(false);
     const models = useModels();
 
     let abortContooler: AbortController | null;
     const generateParams = ref(new Array<KVObject>());
 
-    const setModel = (model: 'sd' | 'inpaint', modelId: string) => {
-        if (model === 'sd') settings.value.imageModel = modelId;
-        if (model === 'inpaint') settings.value.inpaintModel = modelId;
-    }
-
-    const setResolution = (resolution?: StableDiffusionSettings['resolution'], confirm = false) => {
-        if (resolution === 'hd' && !hdWarningDismissed.value && !confirm) {
-            hdWarningModalActive.value = true;
-            return;
-        }
-        if (resolution) settings.value.resolution = resolution;
-        hdWarningModalActive.value = false;
-    }
-
     async function generate() {
         if (imageGeneration.processing) { return; }
         try {
@@ -228,12 +177,7 @@ export const useStableDiffusion = defineStore("stableDiffusion", () => {
 
 
     return {
-        settings,
-        hdWarningDismissed,
-        hdWarningModalActive,
         generateParams,
-        setResolution,
-        setModel,
         generate,
         stop,
     }

diff --git a/WebUI/src/components/SettingsImageWorkflowSelector.vue b/WebUI/src/components/SettingsImageWorkflowSelector.vue
@@ -1,4 +1,24 @@
 <template>
+    <dialog ref="hdConfirmationDialog" class="bg-gray-600 max-w-md p-7 items-center justify-center rounded-lg shadow-lg  text-white">
+       <form method="dialog" class="items-center justify-center">
+       <p class="mb-4">
+           {{ languages.SETTINGS_MODEL_IMAGE_RESOLUTION_HD_CONFIRM }}
+       </p>
+       <div class="flex justify-between space-x-4 items-center">
+           <button class="bg-slate-700 py-1 px-4 rounded">
+               {{ languages.COM_CANCEL }}
+           </button>
+           <div class="flex-end space-x-4">
+               <button @click="() => {hdWarningOverride = true; classicModel = 'sdxl'}" class="bg-color-active py-1 px-4 rounded">
+                   {{ languages.COM_CONFIRM }}
+               </button>
+               <button @click="() => {imageGeneration.hdWarningDismissed = true; classicModel = 'sdxl'}" class="bg-blue-500 py-1 px-4 rounded">
+                   {{ languages.COM_DO_NOT_SHOW_AGAIN }}
+               </button>
+           </div>
+       </div>
+       </form>
+   </dialog>
     <div class="items-center flex-wrap grid grid-cols-1 gap-2">
         <div class="flex flex-col gap-2">
             <p>{{ "Mode" }}</p>
@@ -75,11 +95,11 @@
 import { useImageGeneration } from "@/assets/js/store/imageGeneration";
 import DropSelector from "../components/DropSelector.vue";
 import RadioBolck from "../components/RadioBlock.vue";
-import { useI18N } from '@/assets/js/store/i18n';
 
 const imageGeneration = useImageGeneration();
 
-const i18n = useI18N();
+const hdConfirmationDialog = ref<HTMLDialogElement>();
+const hdWarningOverride = ref(false);
 
 const classicModel = computed({
         get() {
@@ -95,15 +115,17 @@ const classicModel = computed({
           return 'sd1.5'
         },
         set(newValue) {
-            if (newValue === 'sd1.5') {
-                imageGeneration.activeWorkflowName = imageGeneration.workflows.find(w => w.tags.includes('sd1.5') && (classicQuality.value === 'standard' || w.tags.includes(classicQuality.value)))?.name ?? 'Standard'
-            };
-            if (newValue === 'sdxl') {
-                imageGeneration.activeWorkflowName = imageGeneration.workflows.find(w => w.tags.includes('sdxl') && (classicQuality.value === 'standard' || w.tags.includes(classicQuality.value)))?.name ?? 'Standard'
-            };
             if (newValue === 'manual') {
                 imageGeneration.activeWorkflowName = 'Manual'
             };
+            if (newValue === 'sdxl' && !imageGeneration.hdWarningDismissed && !hdWarningOverride.value) {
+                hdConfirmationDialog.value?.showModal();
+                return;
+            } else {
+                hdWarningOverride.value = false;
+            }
+            const targetWorkflow = imageGeneration.workflows.find(w => w.tags.includes(newValue) && (classicQuality.value === 'standard' || w.tags.includes(classicQuality.value)))?.name ?? 'Standard'
+            imageGeneration.activeWorkflowName = targetWorkflow;
         }
       })
 const classicQuality = computed({