Add support for renew credentials (#27)

change/@acedatacloud-hub-2036b5ab-7ee3-404b-bf2b-085dfff320ce.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add support for renew credentials",
+  "packageName": "@acedatacloud/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

src/components/application/Status.vue

@@ -94,6 +94,16 @@ export default defineComponent({
       }
     }
   },
+  mounted() {
+    // check if the credential is created
+    if (
+      this.application &&
+      !this.application?.credentials?.find((credential) => credential.host === window.location.origin)
+    ) {
+      console.log('create extra credential');
+      this.onCreateCredential(this.application);
+    }
+  },
   methods: {
     onBuyMore(application: IApplication) {
       this.$router.push({
@@ -103,6 +113,22 @@ export default defineComponent({
         }
       });
     },
+    onCreateCredential(application: IApplication | undefined) {
+      credentialOperator
+        .create({
+          application_id: application?.id,
+          host: window.location.origin
+        })
+        .then(() => {
+          setTimeout(() => {
+            this.$emit('refresh');
+          }, 2000);
+          this.confirming = false;
+        })
+        .finally(() => {
+          this.$emit('applied');
+        });
+    },
     onApply() {
       applicationOperator
         .create({
@@ -111,19 +137,7 @@ export default defineComponent({
         })
         .then(({ data: data }: { data: IApplicationDetailResponse }) => {
           ElMessage.success(this.$t('application.message.applySuccessfully'));
-          credentialOperator
-            .create({
-              application_id: data.id
-            })
-            .then(() => {
-              setTimeout(() => {
-                this.$emit('refresh');
-              }, 2000);
-              this.confirming = false;
-            })
-            .finally(() => {
-              this.$emit('applied');
-            });
+          this.onCreateCredential(data);
         })
         .catch((error) => {
           if (error?.response?.data?.code === ERROR_CODE_DUPLICATION) {

src/components/chat/InputBox.vue

@@ -159,7 +159,7 @@ textarea.input {
   background: none;
   box-shadow: none;
   resize: none;
-  line-height: 30px;
+  line-height: 35px;
   width: calc(100% - 80px);
   margin-left: 30px;
 }
@@ -176,7 +176,7 @@ textarea.input:focus {
       background: none;
       box-shadow: none;
       resize: none;
-      line-height: 30px;
+      line-height: 35px;
     }
   }
   .el-upload-list {

src/components/chat/SidePanel.vue

@@ -96,7 +96,7 @@ export default defineComponent({
       return this.$store.state.chat.status.getConversations === Status.Request;
     },
     token() {
-      return this.application?.credentials?.[0].token;
+      return this.$store.state.chat?.credential?.token;
     }
   },
   methods: {

src/components/midjourney/preset/ImageWeightSelector.vue

@@ -10,8 +10,7 @@
 import { defineComponent } from 'vue';
 import { ElSlider } from 'element-plus';
 import InfoIcon from '@/components/common/InfoIcon.vue';
-
-const DEFAULT_IW = 1.0;
+import { MIDJOURNEY_DEFAULT_IMAGE_WEIGHT } from '@/constants';
 
 export default defineComponent({
   name: 'ImageWeightSelector',
@@ -35,7 +34,7 @@ export default defineComponent({
   },
   mounted() {
     if (!this.value) {
-      this.value = DEFAULT_IW;
+      this.value = MIDJOURNEY_DEFAULT_IMAGE_WEIGHT;
     }
   }
 });

src/components/midjourney/preset/RatioSelector.vue

@@ -21,8 +21,7 @@
 
 <script>
 import { defineComponent } from 'vue';
-
-const DEFAULT_RATIO = '1:1';
+import { MIDJOURNEY_DEFAULT_RATIO } from '@/constants';
 
 export default defineComponent({
   name: 'RatioSelector',
@@ -81,7 +80,7 @@ export default defineComponent({
   },
   mounted() {
     if (!this.value) {
-      this.value = DEFAULT_RATIO;
+      this.value = MIDJOURNEY_DEFAULT_RATIO;
     }
   }
 });

src/components/midjourney/preset/StylizeSelector.vue

@@ -10,8 +10,7 @@
 import { defineComponent } from 'vue';
 import { ElSlider } from 'element-plus';
 import InfoIcon from '@/components/common/InfoIcon.vue';
-
-const DEFAULT_STYLIZE = 100;
+import { MIDJOURNEY_DEFAULT_STYLIZE } from '@/constants';
 
 export default defineComponent({
   name: 'StylizeSelector',
@@ -35,7 +34,7 @@ export default defineComponent({
   },
   mounted() {
     if (!this.value) {
-      this.value = DEFAULT_STYLIZE;
+      this.value = MIDJOURNEY_DEFAULT_STYLIZE;
     }
   }
 });

src/components/midjourney/preset/WeirdSelector.vue

@@ -10,8 +10,7 @@
 import { defineComponent } from 'vue';
 import { ElSlider } from 'element-plus';
 import InfoIcon from '@/components/common/InfoIcon.vue';
-
-const DEFAULT_WEIRD = 0;
+import { MIDJOURNEY_DEFAULT_WIRED } from '@/constants';
 
 export default defineComponent({
   name: 'WeirdSelector',
@@ -35,7 +34,7 @@ export default defineComponent({
   },
   mounted() {
     if (!this.value) {
-      this.value = DEFAULT_WEIRD;
+      this.value = MIDJOURNEY_DEFAULT_WIRED;
     }
   }
 });

src/components/midjourney/tasks/TaskPreview.vue

@@ -63,6 +63,8 @@
         :preview-src-list="[modelValue?.response?.raw_image_url as string]"
         fit="contain"
         class="image"
+        :lazy="true"
+        @error="onReload($event)"
       />
       <p v-if="modelValue?.response?.progress !== undefined && modelValue?.response?.progress !== 100" class="progress">
         {{ modelValue?.response?.progress }}%
@@ -111,6 +113,7 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
 import { MIDJOURNEY_MODE_FAST, MIDJOURNEY_MODE_RELAX, MIDJOURNEY_MODE_TURBO } from '@/constants';
+import { parse } from 'path';
 
 interface IData {
   midjourneyImagineState: typeof MidjourneyImagineState;
@@ -222,6 +225,25 @@ export default defineComponent({
     }
   },
   methods: {
+    onReload(event: Event) {
+      const target = event.target as HTMLImageElement;
+      // append a random url query to existing url query, to force reload the image
+      // extract exiting url query
+      const url = new URL(target.src);
+      // extract `retry` query
+      const retry = url.searchParams.get('retry');
+      if (!retry) {
+        // if no retry query, set it as random string
+        url.searchParams.set('retry', '1');
+      } else if (parseInt(retry) < 2) {
+        // if retry < 3, increase it by 1
+        url.searchParams.set('retry', (parseInt(retry) + 1).toString());
+      } else {
+        return;
+      }
+      // set the new url
+      target.src = url.toString();
+    },
     onCustom(action: string) {
       this.$emit('custom', {
         action,

src/constants/midjourney.ts

@@ -24,3 +24,8 @@ export const MIDJOURNEY_MODE_TURBO: IMidjourneyMode = {
   name: MIDJOURNEY_MODE_NAME_TURBO,
   getDisplayName: () => i18n.global.t('midjourney.button.turbo')
 };
+
+export const MIDJOURNEY_DEFAULT_RATIO = '1:1';
+export const MIDJOURNEY_DEFAULT_IMAGE_WEIGHT = 1.0;
+export const MIDJOURNEY_DEFAULT_STYLIZE = 100;
+export const MIDJOURNEY_DEFAULT_WIRED = 0;

src/models/credential.ts

@@ -10,6 +10,7 @@ export interface ICredential {
   name?: string;
   type?: ICredentialType;
   limited_amount?: number;
+  host?: string;
   used_amount?: number;
   expired_at?: string;
   token?: string;

src/pages/chat/Conversation.vue

@@ -99,6 +99,9 @@ export default defineComponent({
     application() {
       return this.$store.state.chat.application;
     },
+    credential() {
+      return this.$store.state.chat?.credential;
+    },
     needApply() {
       return this.$store.state.chat.status.getApplication === Status.Success && !this.application;
     },
@@ -178,7 +181,7 @@ export default defineComponent({
       }, 0);
     },
     async onFetchAnswer() {
-      const token = this.application?.credentials?.[0]?.token;
+      const token = this.credential?.token;
       const question = this.question;
       const references = this.references;
       log(this.onFetchAnswer, 'validated', question, references);

src/pages/chatdoc/Conversation.vue

@@ -101,6 +101,9 @@ export default defineComponent({
     application() {
       return this.$store.state.chatdoc.application;
     },
+    credential() {
+      return this.$store.state.chatdoc.credential;
+    },
     needApply() {
       return this.$store.state.chatdoc.status.getApplication === Status.Success && !this.application;
     },
@@ -136,7 +139,7 @@ export default defineComponent({
       }, 0);
     },
     async onFetchAnswer() {
-      const token = this.application?.credentials?.[0]?.token;
+      const token = this.credential?.token;
       const question = this.question;
       log(this.onFetchAnswer, 'validated', question);
       // reset question and references

src/pages/midjourney/History.vue

@@ -63,6 +63,9 @@ export default defineComponent({
     application() {
       return this.$store.state.midjourney.application;
     },
+    credential() {
+      return this.$store.state.midjourney.credential;
+    },
     initializing() {
       return this.$store.state.midjourney.status.getApplication === Status.Request;
     },
@@ -83,7 +86,7 @@ export default defineComponent({
       await this.$store.dispatch('midjourney/getApplication');
     },
     async onStartTask(request: IMidjourneyImagineRequest) {
-      const token = this.application?.credentials?.[0]?.token;
+      const token = this.credential?.token;
       if (!token) {
         console.error('no token found');
         return;

src/pages/midjourney/Index.vue

@@ -47,6 +47,12 @@ import FinalPrompt from '@/components/midjourney/FinalPrompt.vue';
 import { ERROR_CODE_DUPLICATION } from '@/constants/errorCode';
 import { MidjourneyImagineMode, Status } from '@/models';
 import { IMidjourneyImagineRequest, IApplicationDetailResponse, MidjourneyImagineAction } from '@/models';
+import {
+  MIDJOURNEY_DEFAULT_IMAGE_WEIGHT,
+  MIDJOURNEY_DEFAULT_RATIO,
+  MIDJOURNEY_DEFAULT_STYLIZE,
+  MIDJOURNEY_DEFAULT_WIRED
+} from '@/constants';
 
 interface IData {
   prompt: string;
@@ -87,6 +93,9 @@ export default defineComponent({
     mode() {
       return this.$store.state.midjourney.mode;
     },
+    credential() {
+      return this.$store.state.midjourney.credential;
+    },
     preset() {
       return this.$store.state.midjourney.preset;
     },
@@ -122,19 +131,34 @@ export default defineComponent({
       if (this.preset.quality && !content.includes(`--quality `) && !content.includes(`--q `)) {
         content += ` --quality ${this.preset.quality}`;
       }
-      if (this.preset.ratio && !content.includes(`--aspect `) && !content.includes(`--ar `)) {
+      if (
+        this.preset.ratio &&
+        !content.includes(`--aspect `) &&
+        !content.includes(`--ar `) &&
+        this.preset.ratio !== MIDJOURNEY_DEFAULT_RATIO
+      ) {
         content += ` --aspect ${this.preset.ratio}`;
       }
-      if (this.preset.stylize && !content.includes(`--stylize `) && !content.includes(`--s `)) {
+      if (
+        this.preset.stylize &&
+        !content.includes(`--stylize `) &&
+        !content.includes(`--s `) &&
+        this.preset.stylize !== MIDJOURNEY_DEFAULT_STYLIZE
+      ) {
         content += ` --stylize ${this.preset.stylize}`;
       }
-      if (this.preset.weird && !content.includes(`--weird `) && !content.includes(`--w `)) {
+      if (
+        this.preset.weird &&
+        !content.includes(`--weird `) &&
+        !content.includes(`--w `) &&
+        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 && !content.includes(`--iw `)) {
+      if (this.preset.iw && !content.includes(`--iw `) && this.preset.iw !== MIDJOURNEY_DEFAULT_IMAGE_WEIGHT) {
         content += ` --iw ${this.preset.iw}`;
       }
       if (this.preset.style && !content.includes(`--style`)) {
@@ -164,7 +188,7 @@ export default defineComponent({
       await this.$store.dispatch('midjourney/getApplication');
     },
     async onStartTask(request: IMidjourneyImagineRequest) {
-      const token = this.application?.credentials?.[0]?.token;
+      const token = this.credential?.token;
       if (!token) {
         console.error('no token specified');
         return;