Fix for QR Art blank page issue (#43)

Co-authored-by: Germey <[email protected]>
AceDataCloud · May 14, 2024 · a61674f · a61674f
1 parent 3ceae8c
commit a61674f
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 32 deletions.
diff --git a/change/@acedatacloud-hub-b1393626-2995-46dd-b535-966f45576c3f.json b/change/@acedatacloud-hub-b1393626-2995-46dd-b535-966f45576c3f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix for qrart blank issue",
+  "packageName": "@acedatacloud/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/qrart/ConfigPanel.vue b/src/components/qrart/ConfigPanel.vue
@@ -9,15 +9,15 @@
       <steps-selector class="mb-4" />
       <preset-selector class="mb-4" />
       <advanced-selector class="mb-4" />
-      <seed-input v-if="config.advanced" class="mb-4" />
-      <position-selector v-if="config.advanced" class="mb-4" />
-      <pixel-style-selector v-if="config.advanced" class="mb-4" />
-      <marker-shape-selector v-if="config.advanced" class="mb-4" />
-      <sub-marker-selector v-if="config.advanced" class="mb-4" />
-      <rotate-selector v-if="config.advanced" class="mb-4" />
-      <ecl-selector v-if="config.advanced" class="mb-4" />
-      <padding-level-selector v-if="config.advanced" class="mb-4" />
-      <padding-noise-selector v-if="config.advanced" class="mb-4" />
+      <seed-input v-if="config?.advanced" class="mb-4" />
+      <position-selector v-if="config?.advanced" class="mb-4" />
+      <pixel-style-selector v-if="config?.advanced" class="mb-4" />
+      <marker-shape-selector v-if="config?.advanced" class="mb-4" />
+      <sub-marker-selector v-if="config?.advanced" class="mb-4" />
+      <rotate-selector v-if="config?.advanced" class="mb-4" />
+      <ecl-selector v-if="config?.advanced" class="mb-4" />
+      <padding-level-selector v-if="config?.advanced" class="mb-4" />
+      <padding-noise-selector v-if="config?.advanced" class="mb-4" />
     </div>
     <div class="actions">
       <el-button type="primary" class="btn" round @click="onGenerate">

diff --git a/src/components/qrart/config/AdvancedSelector.vue b/src/components/qrart/config/AdvancedSelector.vue
@@ -18,12 +18,12 @@ export default defineComponent({
   computed: {
     value: {
       get() {
-        return this.$store.state.qrart.config?.advanced;
+        return this.$store.state.qrart?.config?.advanced;
       },
       set(val) {
         console.debug('set advanced', val);
         this.$store.commit('qrart/setConfig', {
-          ...this.$store.state.qrart.config,
+          ...this.$store.state.qrart?.config,
           advanced: val
         });
       }

diff --git a/src/components/qrart/config/RawurlSelector.vue b/src/components/qrart/config/RawurlSelector.vue
@@ -8,7 +8,6 @@
 <script>
 import { defineComponent } from 'vue';
 import { ElSwitch } from 'element-plus';
-import { QRART_DEFAULT_ADVANCED } from '@/constants';
 
 export default defineComponent({
   name: 'RawurlSelector',
@@ -18,12 +17,12 @@ export default defineComponent({
   computed: {
     value: {
       get() {
-        return this.$store.state.qrart.config?.rawurl;
+        return this.$store.state.qrart?.config?.rawurl;
       },
       set(val) {
         console.debug('set rawurl', val);
         this.$store.commit('qrart/setConfig', {
-          ...this.$store.state.qrart.config,
+          ...this.$store.state.qrart?.config,
           rawurl: val
         });
       }

diff --git a/src/pages/midjourney/Index.vue b/src/pages/midjourney/Index.vue
@@ -124,57 +124,57 @@ export default defineComponent({
       if (this.elements.length > 0) {
         content += ',' + this.elements.join(',');
       }
-      if (this.preset.model && !content.includes(`--${this.preset.model}`)) {
+      if (this.preset?.model && !content.includes(`--${this.preset.model}`)) {
         content += ` --${this.preset.model}`;
       }
-      if (this.preset.version && !content.includes(`--version `) && !content.includes(`--v `)) {
+      if (this.preset?.version && !content.includes(`--version `) && !content.includes(`--v `)) {
         content += ` --version ${this.preset.version}`;
       }
-      if (this.preset.chaos && this.preset.advanced && !content.includes(`--chaos `)) {
+      if (this.preset?.chaos && this.preset?.advanced && !content.includes(`--chaos `)) {
         content += ` --chaos ${this.preset.chaos}`;
       }
-      if (this.preset.quality && !content.includes(`--quality `) && !content.includes(`--q `)) {
+      if (this.preset?.quality && !content.includes(`--quality `) && !content.includes(`--q `)) {
         content += ` --quality ${this.preset.quality}`;
       }
       if (
-        this.preset.ratio &&
+        this.preset?.ratio &&
         !content.includes(`--aspect `) &&
         !content.includes(`--ar `) &&
-        this.preset.ratio !== MIDJOURNEY_DEFAULT_RATIO
+        this.preset?.ratio !== MIDJOURNEY_DEFAULT_RATIO
       ) {
         content += ` --aspect ${this.preset.ratio}`;
       }
       if (
-        this.preset.stylize &&
+        this.preset?.stylize &&
         !content.includes(`--stylize `) &&
         !content.includes(`--s `) &&
-        this.preset.advanced &&
-        this.preset.stylize !== MIDJOURNEY_DEFAULT_STYLIZE
+        this.preset?.advanced &&
+        this.preset?.stylize !== MIDJOURNEY_DEFAULT_STYLIZE
       ) {
-        content += ` --stylize ${this.preset.stylize}`;
+        content += ` --stylize ${this.preset?.stylize}`;
       }
       if (
-        this.preset.weird &&
+        this.preset?.weird &&
         !content.includes(`--weird `) &&
         !content.includes(`--w `) &&
-        this.preset.advanced &&
-        this.preset.weird !== MIDJOURNEY_DEFAULT_WIRED
+        this.preset?.advanced &&
+        this.preset?.weird !== MIDJOURNEY_DEFAULT_WIRED
       ) {
         content += ` --weird ${this.preset.weird}`;
       }
       if (this.ignore && !content.includes(`--no `)) {
         content += ` --no ${this.ignore}`;
       }
       if (
-        this.preset.iw &&
+        this.preset?.iw &&
         !content.includes(`--iw `) &&
-        this.preset.advanced &&
-        this.preset.iw !== MIDJOURNEY_DEFAULT_IMAGE_WEIGHT
+        this.preset?.advanced &&
+        this.preset?.iw !== MIDJOURNEY_DEFAULT_IMAGE_WEIGHT
       ) {
         content += ` --iw ${this.preset.iw}`;
       }
-      if (this.preset.style && this.preset.advanced && !content.includes(`--style`)) {
-        content += ` --style ${this.preset.style}`;
+      if (this.preset?.style && this.preset?.advanced && !content.includes(`--style`)) {
+        content += ` --style ${this.preset?.style}`;
       }
       return this.prompt || this.references?.length > 0 ? content : '';
     }