Improve midjourney experience (#45)

ZhiShuYun · Jan 8, 2024 · 8cadaa3 · 8cadaa3
1 parent 0da0b76
commit 8cadaa3
Show file tree

Hide file tree

Showing 23 changed files with 295 additions and 396 deletions.
diff --git a/change/@zhishuyun-hub-6a046fde-3937-4118-b9e7-cc81277ea1e0.json b/change/@zhishuyun-hub-6a046fde-3937-4118-b9e7-cc81277ea1e0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "improve mj experience",
+  "packageName": "@zhishuyun/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/midjourney/FinalPrompt.vue b/src/components/midjourney/FinalPrompt.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-4">
     <h2 class="title">{{ $t('midjourney.field.finalPrompt') }}</h2>
-    <el-alert :title="modelValue" :closable="false" />
+    <el-alert :title="modelValue" :closable="false" class="pt-3" />
   </div>
 </template>
 
@@ -27,7 +27,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .title {
   font-size: 14px;
-  margin-bottom: 0;
+  margin-bottom: 10px;
   width: 30%;
 }
 .prompt {

diff --git a/src/components/midjourney/PresetPanel.vue b/src/components/midjourney/PresetPanel.vue
@@ -1,17 +1,16 @@
 <template>
   <div class="panel">
-    <model-selector v-model="preset.model" class="mb-4" />
-    <ratio-selector v-model="preset.ratio" class="mb-4" />
-    <quality-selector v-model="preset.quality" class="mb-4" />
-    <version-selector v-model="preset.version" class="mb-4" />
-    <translation-selector v-model="preset.translation" class="mb-4" />
-    <advanced-selector v-model="preset.advanced" class="mb-4" />
-    <stylize-selector v-if="preset.advanced" v-model="preset.stylize" class="mb-4" />
-    <weird-selector v-if="preset.advanced" v-model="preset.wired" class="mb-4" />
-    <chaos-selector v-if="preset.advanced" v-model="preset.chaos" class="mb-4" />
-    <image-weight-selector v-if="preset.advanced" v-model="preset.iw" class="mb-4" />
-    <niji-selector v-if="false" v-model="preset.niji" class="mb-4" />
-    <raw-selector v-if="!preset.model && preset.advanced" v-model="preset.raw" class="mb-4" />
+    <model-selector class="mb-4" />
+    <ratio-selector class="mb-4" />
+    <quality-selector class="mb-4" />
+    <version-selector class="mb-4" />
+    <translation-selector class="mb-4" />
+    <advanced-selector class="mb-4" />
+    <stylize-selector v-if="preset.advanced" class="mb-4" />
+    <weird-selector v-if="preset.advanced" class="mb-4" />
+    <chaos-selector v-if="preset.advanced" class="mb-4" />
+    <image-weight-selector v-if="preset.advanced" class="mb-4" />
+    <style-selector v-if="preset.advanced" class="mb-4" />
   </div>
 </template>
 
@@ -25,40 +24,28 @@ import ModelSelector from './preset/ModelSelector.vue';
 import QualitySelector from './preset/QualitySelector.vue';
 import ImageWeightSelector from './preset/ImageWeightSelector.vue';
 import WeirdSelector from './preset/WeirdSelector.vue';
-import RawSelector from './preset/RawSelector.vue';
 import AdvancedSelector from './preset/AdvancedSelector.vue';
 import TranslationSelector from './preset/TranslationSelector.vue';
-import NijiSelector from './preset/NijiSelector.vue';
+import StyleSelector from './preset/StyleSelector.vue';
+
 export default defineComponent({
   name: 'PresetPanel',
   components: {
     ModelSelector,
+    StyleSelector,
     QualitySelector,
     RatioSelector,
     VersionSelector,
     StylizeSelector,
     ChaosSelector,
     WeirdSelector,
-    RawSelector,
     AdvancedSelector,
     ImageWeightSelector,
-    TranslationSelector,
-    NijiSelector
-  },
-  data() {
-    return {
-      preset: this.$store.state.midjourney.preset
-    };
+    TranslationSelector
   },
-  watch: {
-    preset: {
-      handler(val) {
-        this.$store.dispatch('midjourney/setPreset', {
-          ...val
-        });
-      },
-      deep: true,
-      immediate: true
+  computed: {
+    preset() {
+      return this.$store.state.midjourney.preset;
     }
   }
 });

diff --git a/src/components/midjourney/PromptInput.vue b/src/components/midjourney/PromptInput.vue
@@ -2,6 +2,9 @@
   <div>
     <h2 class="title">{{ $t('midjourney.name.prompt') }}</h2>
     <el-input v-model="value" :rows="3" type="textarea" :placeholder="$t('midjourney.placeholder.prompt')" />
+    <p class="description">
+      {{ $t('midjourney.description.prompt') }}
+    </p>
   </div>
 </template>
 
@@ -54,4 +57,9 @@ export default defineComponent({
     flex: 1;
   }
 }
+.description {
+  font-size: 12px;
+  margin-top: 10px;
+  color: var(--el-text-color-regular);
+}
 </style>
diff --git a/src/components/midjourney/preset/AdvancedSelector.vue b/src/components/midjourney/preset/AdvancedSelector.vue
@@ -8,7 +8,6 @@
 <script>
 import { defineComponent } from 'vue';
 import { ElSwitch } from 'element-plus';
-import InfoIcon from '@/components/common/InfoIcon.vue';
 
 const DEFAULT_ADVANCED = false;
 
@@ -17,33 +16,24 @@ export default defineComponent({
   components: {
     ElSwitch
   },
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      value: this.modelValue
-    };
-  },
-  watch: {
-    modelValue(val) {
-      if (val !== this.value) {
-        this.value = val;
+  computed: {
+    value: {
+      get() {
+        return this.$store.state.midjourney.preset?.advanced;
+      },
+      set(val) {
+        console.debug('set advanced', val);
+        this.$store.commit('midjourney/setPreset', {
+          ...this.$store.state.midjourney.preset,
+          advanced: val
+        });
       }
-    },
-    value(val) {
-      this.$emit('update:modelValue', val);
     }
   },
   mounted() {
     if (this.value === undefined) {
       this.value = DEFAULT_ADVANCED;
     }
-    this.$emit('update:modelValue', this.value);
   }
 });
 </script>
@@ -56,7 +46,7 @@ export default defineComponent({
 
   .title {
     font-size: 14px;
-    margin-bottom: 0;
+    margin: 0;
     width: 30%;
   }
   .value {

diff --git a/src/components/midjourney/preset/ChaosSelector.vue b/src/components/midjourney/preset/ChaosSelector.vue
@@ -19,33 +19,24 @@ export default defineComponent({
     ElSlider,
     InfoIcon
   },
-  props: {
-    modelValue: {
-      type: String,
-      default: undefined
-    }
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      value: this.modelValue
-    };
-  },
-  watch: {
-    modelValue(val) {
-      if (val !== this.value) {
-        this.value = val;
+  computed: {
+    value: {
+      get() {
+        return this.$store.state.midjourney.preset?.chaos;
+      },
+      set(val) {
+        console.debug('set quality', val);
+        this.$store.commit('midjourney/setPreset', {
+          ...this.$store.state.midjourney.preset,
+          chaos: val
+        });
       }
-    },
-    value(val) {
-      this.$emit('update:modelValue', val);
     }
   },
   mounted() {
     if (!this.value) {
       this.value = DEFAULT_CHAOS;
     }
-    this.$emit('update:modelValue', this.value);
   }
 });
 </script>
@@ -58,7 +49,7 @@ export default defineComponent({
 
   .title {
     font-size: 14px;
-    margin-bottom: 0;
+    margin: 0;
     width: 30%;
   }
   .value {

diff --git a/src/components/midjourney/preset/ImageWeightSelector.vue b/src/components/midjourney/preset/ImageWeightSelector.vue
@@ -19,33 +19,24 @@ export default defineComponent({
     ElSlider,
     InfoIcon
   },
-  props: {
-    modelValue: {
-      type: String,
-      default: undefined
-    }
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      value: this.modelValue
-    };
-  },
-  watch: {
-    modelValue(val) {
-      if (val !== this.value) {
-        this.value = val;
+  computed: {
+    value: {
+      get() {
+        return this.$store.state.midjourney.preset?.iw;
+      },
+      set(val) {
+        console.debug('set iw', val);
+        this.$store.commit('midjourney/setPreset', {
+          ...this.$store.state.midjourney.preset,
+          iw: val
+        });
       }
-    },
-    value(val) {
-      this.$emit('update:modelValue', val);
     }
   },
   mounted() {
     if (!this.value) {
       this.value = DEFAULT_IW;
     }
-    this.$emit('update:modelValue', this.value);
   }
 });
 </script>
@@ -58,7 +49,7 @@ export default defineComponent({
 
   .title {
     font-size: 14px;
-    margin-bottom: 0;
+    margin: 0;
     width: 30%;
   }
   .value {

diff --git a/src/components/midjourney/preset/ModelSelector.vue b/src/components/midjourney/preset/ModelSelector.vue
@@ -6,10 +6,7 @@
         v-for="(option, optionKey) in options"
         :key="optionKey"
         :class="{ active: active === optionKey, item: true }"
-        @click="
-          active = optionKey;
-          value = option.value;
-        "
+        @click="value = option.value"
       >
         <el-image :src="option.image" fit="cover" class="image" />
         <p class="name">
@@ -23,22 +20,14 @@
 <script>
 import { defineComponent } from 'vue';
 import { ElImage } from 'element-plus';
+
 export default defineComponent({
   name: 'ModelSelector',
   components: {
     ElImage
   },
-  props: {
-    modelValue: {
-      type: String,
-      default: undefined
-    }
-  },
-  emits: ['update:modelValue'],
   data() {
     return {
-      value: this.modelValue,
-      active: 0,
       options: [
         {
           value: '',
@@ -53,18 +42,27 @@ export default defineComponent({
       ]
     };
   },
-  watch: {
-    modelValue(val) {
-      if (val !== this.value) {
-        this.value = val;
-      }
+  computed: {
+    active() {
+      return this.options.findIndex((option) => option.value === this.value);
     },
-    value(val) {
-      this.$emit('update:modelValue', val);
+    value: {
+      get() {
+        return this.$store.state.midjourney.preset?.model;
+      },
+      set(val) {
+        console.debug('set model', val);
+        this.$store.commit('midjourney/setPreset', {
+          ...this.$store.state.midjourney.preset,
+          model: val
+        });
+      }
     }
   },
   mounted() {
-    this.$emit('update:modelValue', this.value);
+    if (this.value === undefined) {
+      this.value = '';
+    }
   }
 });
 </script>