From 8fe8abd8d4fe7addf6fde9ba4a228a5a1bf2f959 Mon Sep 17 00:00:00 2001
From: Germey <germey@acedata.cloud>
Date: Sat, 27 Apr 2024 02:14:18 +0800
Subject: [PATCH] update qrart

---
 src/components/qrart/ConfigPanel.vue          |  70 +++
 .../qrart/config/AspectRatioSelector.vue      |  38 +-
 src/components/qrart/config/ContentInput.vue  |  16 +-
 src/components/qrart/config/PromptInput.vue   |  10 +-
 src/components/qrart/config/TypeSelector.vue  |  12 +-
 src/components/qrart/tasks/TaskBriefList.vue  | 140 ++++++
 src/components/qrart/tasks/TaskPreview.vue    | 408 ++++++++++++++++++
 src/i18n/en/qrart.json                        |  34 ++
 src/i18n/index.ts                             |   1 +
 src/layouts/Qrart.vue                         |   8 +-
 src/pages/qrart/Index.vue                     | 182 ++------
 src/store/common/models.ts                    |   4 +-
 src/store/index.ts                            |   5 +-
 src/store/qrart/index.ts                      |  14 +
 14 files changed, 755 insertions(+), 187 deletions(-)
 create mode 100644 src/components/qrart/ConfigPanel.vue
 create mode 100644 src/components/qrart/tasks/TaskBriefList.vue
 create mode 100644 src/components/qrart/tasks/TaskPreview.vue
 create mode 100644 src/i18n/en/qrart.json
 create mode 100644 src/store/qrart/index.ts

diff --git a/src/components/qrart/ConfigPanel.vue b/src/components/qrart/ConfigPanel.vue
new file mode 100644
index 00000000..559fa463
--- /dev/null
+++ b/src/components/qrart/ConfigPanel.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="panel">
+    <div class="config">
+      <type-selector class="mb-4" />
+      <content-input class="mb-4" />
+      <prompt-input class="mb-4" />
+      <aspect-ratio-selector class="mb-4" />
+    </div>
+    <div class="actions">
+      <el-button type="primary" class="btn" round @click="onGenerate">
+        {{ $t('qrart.button.generate') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import TypeSelector from './config/TypeSelector.vue';
+import ContentInput from './config/ContentInput.vue';
+import PromptInput from './config/PromptInput.vue';
+import AspectRatioSelector from './config/AspectRatioSelector.vue';
+import { ElButton } from 'element-plus';
+
+export default defineComponent({
+  name: 'PresetPanel',
+  components: {
+    TypeSelector,
+    ContentInput,
+    PromptInput,
+    AspectRatioSelector,
+    ElButton
+  },
+  emits: ['generate'],
+  computed: {
+    config() {
+      return this.$store.state.qrart?.config;
+    }
+  },
+  methods: {
+    onGenerate() {
+      this.$emit('generate');
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  height: 100%;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  .config {
+    width: 100%;
+    height: calc(100% - 50px);
+    flex: 1;
+    overflow-y: scroll;
+  }
+  .actions {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .btn {
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/components/qrart/config/AspectRatioSelector.vue b/src/components/qrart/config/AspectRatioSelector.vue
index 52f5ff41..752d0d1b 100644
--- a/src/components/qrart/config/AspectRatioSelector.vue
+++ b/src/components/qrart/config/AspectRatioSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title">{{ $t('qrart.name.ratio') }}</h2>
+    <h2 class="title">{{ $t('qrart.name.aspectRatio') }}</h2>
     <div class="items">
       <div
         v-for="(option, optionKey) in options"
@@ -24,39 +24,39 @@ import { defineComponent } from 'vue';
 import { MIDJOURNEY_DEFAULT_RATIO } from '@/constants';
 
 export default defineComponent({
-  name: 'RatioSelector',
+  name: 'AspectRatioSelector',
   data() {
     return {
       options: [
         {
           value: '1:1',
           label: '1:1',
-          width: 15,
-          height: 15
+          width: 30,
+          height: 30
         },
         {
           value: '4:3',
           label: '4:3',
-          width: 16,
-          height: 12
+          width: 32,
+          height: 24
         },
         {
           value: '3:4',
           label: '3:4',
-          width: 12,
-          height: 16
+          width: 24,
+          height: 32
         },
         {
           value: '16:9',
           label: '16:9',
-          width: 16,
-          height: 9
+          width: 32,
+          height: 18
         },
         {
           value: '9:16',
           label: '9:16',
-          width: 9,
-          height: 16
+          width: 18,
+          height: 32
         }
       ]
     };
@@ -67,13 +67,13 @@ export default defineComponent({
     },
     value: {
       get() {
-        return this.$store.state.qrart.preset?.ratio;
+        return this.$store.state.qrart.config?.aspect_ratio;
       },
       set(val) {
-        console.debug('set ratio', val);
-        this.$store.commit('qrart/setPreset', {
-          ...this.$store.state.qrart.preset,
-          ratio: val
+        console.debug('set aspect ratio', val);
+        this.$store.commit('qrart/setConfig', {
+          ...this.$store.state.qrart.config,
+          aspect_ratio: val
         });
       }
     }
@@ -98,8 +98,8 @@ export default defineComponent({
   justify-content: space-between;
 
   .item {
-    width: 40px;
-    height: 60px;
+    width: 65px;
+    height: 75px;
     border: 2px solid var(--el-border-color);
     display: flex;
     flex-direction: column;
diff --git a/src/components/qrart/config/ContentInput.vue b/src/components/qrart/config/ContentInput.vue
index 3e249ffa..3551b06a 100644
--- a/src/components/qrart/config/ContentInput.vue
+++ b/src/components/qrart/config/ContentInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="field">
     <h2 class="title">{{ $t('qrart.name.content') }}</h2>
-    <el-input v-model="value" size="small" class="content" />
+    <el-input v-model="value" class="content" :placeholder="$t('qrart.placeholder.content')" />
   </div>
 </template>
 
@@ -9,10 +9,10 @@
 import { defineComponent } from 'vue';
 import { ElInput } from 'element-plus';
 
-export const DEFAULT_content = '';
+export const DEFAULT_CONTENT = '';
 
 export default defineComponent({
-  name: 'contentInput',
+  name: 'ContentInput',
   components: {
     ElInput
   },
@@ -35,7 +35,7 @@ export default defineComponent({
   },
   mounted() {
     if (!this.value) {
-      this.value = DEFAULT_content;
+      this.value = DEFAULT_CONTENT;
     }
   }
 });
@@ -43,17 +43,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .field {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
   .title {
     font-size: 14px;
     margin: 0;
     width: 30%;
-  }
-  .value {
-    flex: 1;
+    margin-bottom: 10px;
   }
 }
 </style>
diff --git a/src/components/qrart/config/PromptInput.vue b/src/components/qrart/config/PromptInput.vue
index 7f82ec0b..01d1f143 100644
--- a/src/components/qrart/config/PromptInput.vue
+++ b/src/components/qrart/config/PromptInput.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="field">
     <h2 class="title">{{ $t('qrart.name.prompt') }}</h2>
-    <el-input v-model="value" size="small" class="prompt" />
+    <el-input v-model="value" :rows="3" type="textarea" class="prompt" :placeholder="$t('qrart.placeholder.prompt')" />
   </div>
 </template>
 
@@ -43,17 +43,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .field {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
   .title {
     font-size: 14px;
     margin: 0;
     width: 30%;
-  }
-  .value {
-    flex: 1;
+    margin-bottom: 10px;
   }
 }
 </style>
diff --git a/src/components/qrart/config/TypeSelector.vue b/src/components/qrart/config/TypeSelector.vue
index bcff307b..eba29138 100644
--- a/src/components/qrart/config/TypeSelector.vue
+++ b/src/components/qrart/config/TypeSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="field">
-    <h2 class="title">{{ $t('qrart.name.version') }}</h2>
+    <h2 class="title">{{ $t('qrart.name.type') }}</h2>
     <el-select v-model="value" class="value" :placeholder="$t('qrart.placeholder.select')">
       <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
     </el-select>
@@ -30,12 +30,12 @@ export default defineComponent({
     return {
       options: [
         {
-          value: 'Text',
-          label: 'text'
+          label: 'Text',
+          value: 'text'
         },
         {
-          value: 'Link',
-          label: 'link'
+          label: 'Link',
+          value: 'link'
         }
       ]
     };
@@ -43,7 +43,7 @@ export default defineComponent({
   computed: {
     value: {
       get() {
-        return this.$store.state.midjourney.config?.type;
+        return this.$store.state.qrart.config?.type;
       },
       set(val) {
         console.debug('set type', val);
diff --git a/src/components/qrart/tasks/TaskBriefList.vue b/src/components/qrart/tasks/TaskBriefList.vue
new file mode 100644
index 00000000..68cac919
--- /dev/null
+++ b/src/components/qrart/tasks/TaskBriefList.vue
@@ -0,0 +1,140 @@
+<template>
+  <div v-if="tasks === undefined" class="tasks">
+    <el-card v-for="_ in 3" :key="_" class="task">
+      <el-skeleton animated>
+        <template #template>
+          <el-skeleton-item variant="image" class="icon-placeholder" />
+          <el-skeleton-item variant="p" class="title-placeholder" />
+        </template>
+      </el-skeleton>
+    </el-card>
+  </div>
+  <div v-else-if="tasks && tasks?.length === 0">
+    <p class="p-5 description">{{ $t('midjourney.message.noTasks') }}</p>
+  </div>
+  <div v-else-if="tasks.length > 0" class="tasks">
+    <div v-for="(task, taskKey) in tasks" :key="taskKey" class="task">
+      <task-preview :full="false" :model-value="task" @custom="$emit('custom', $event)" />
+    </div>
+    <el-button type="primary" round class="btn mb-4" @click="onLoadHistory">{{
+      $t('midjourney.button.history')
+    }}</el-button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import TaskPreview from './TaskPreview.vue';
+import { ROUTE_MIDJOURNEY_HISTORY } from '@/router';
+import { ElButton, ElCard, ElSkeleton, ElSkeletonItem } from 'element-plus';
+import { Status } from '@/models';
+
+export default defineComponent({
+  name: 'TaskBriefList',
+  components: {
+    TaskPreview,
+    ElButton,
+    ElCard,
+    ElSkeleton,
+    ElSkeletonItem
+  },
+  emits: ['update:modelValue', 'custom', 'refresh'],
+  data() {
+    return {
+      job: 0
+    };
+  },
+  computed: {
+    loading() {
+      return this.$store.state.midjourney.status.getApplication === Status.Request;
+    },
+    tasks() {
+      return this.$store.state.midjourney.imagineTasks;
+    },
+    application() {
+      return this.$store.state.midjourney.application;
+    }
+  },
+  watch: {
+    tasks: {
+      handler(val, oldVal) {
+        if (val && oldVal && JSON.stringify(val) !== JSON.stringify(oldVal)) {
+          this.$emit('refresh', val);
+        }
+      },
+      deep: true
+    }
+  },
+  async mounted() {
+    await this.$store.dispatch('midjourney/setImagineTasks', undefined);
+    this.getImagineTasks();
+    // @ts-ignore
+    this.job = setInterval(() => {
+      this.getImagineTasks();
+    }, 5000);
+  },
+  unmounted() {
+    clearInterval(this.job);
+  },
+  methods: {
+    async onLoadHistory() {
+      this.$router.push({ name: ROUTE_MIDJOURNEY_HISTORY });
+    },
+    async getImagineTasks() {
+      // ensure that the previous request has been completed
+      if (this.loading) {
+        return;
+      }
+      await this.$store.dispatch('midjourney/getImagineTasks', {
+        limit: 12,
+        offset: 0
+      });
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.description {
+  font-size: 14px;
+  color: var(--el-text-color-secondary);
+}
+
+.tasks {
+  padding-top: 20px;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .task {
+    margin-bottom: 15px;
+    width: 350px;
+    margin: 8px;
+    height: fit-content;
+
+    .icon-placeholder {
+      display: flex;
+      height: 310px;
+      width: 310px;
+      margin: 0 auto 15px auto;
+      text-align: center;
+    }
+
+    .title-placeholder {
+      display: block;
+      width: 80px;
+      height: 20px;
+      margin: 0 auto 10px auto;
+    }
+
+    .operations {
+      height: fit-content !important;
+    }
+  }
+}
+
+.btn {
+  border-radius: 20px;
+}
+</style>
diff --git a/src/components/qrart/tasks/TaskPreview.vue b/src/components/qrart/tasks/TaskPreview.vue
new file mode 100644
index 00000000..c127b38f
--- /dev/null
+++ b/src/components/qrart/tasks/TaskPreview.vue
@@ -0,0 +1,408 @@
+<template>
+  <div class="preview">
+    <div class="info mb-4">
+      <div class="left">
+        <el-tag v-if="modelValue?.response?.success === true" type="success">
+          {{ $t('midjourney.button.success') }}
+        </el-tag>
+        <el-tag v-if="modelValue?.response?.success === false" type="danger">
+          {{ $t('midjourney.button.failed') }}
+        </el-tag>
+        <el-tag v-if="!modelValue?.response" type="info">
+          {{ $t('midjourney.button.generating') }}
+        </el-tag>
+      </div>
+      <div class="right">
+        <el-tag v-if="mode" type="info" class="channel">
+          <font-awesome-icon :class="{ icon: true, [mode.name]: true }" :icon="mode.icon" />
+          {{ mode?.getDisplayName() }}
+        </el-tag>
+      </div>
+    </div>
+    <div class="extra">
+      <p v-if="modelValue?.request?.prompt" class="prompt">
+        <font-awesome-icon icon="fa-solid fa-magic" class="mr-1" />
+        {{ modelValue?.request?.prompt }}
+      </p>
+    </div>
+    <div v-if="!modelValue?.response" :class="{ content: true, full: !!full }">
+      <el-image class="image">
+        <template #error>
+          <div class="image-slot">{{ $t('midjourney.message.generating') }}</div>
+        </template>
+      </el-image>
+    </div>
+    <div
+      v-else-if="modelValue?.response.success === false"
+      :class="{ content: true, full: full, failed: true, 'p-2': true }"
+    >
+      <el-alert :closable="false">
+        <template #template>
+          <font-awesome-icon icon="fa-solid fa-exclamation-triangle" class="mr-1" />
+          {{ $t('midjourney.field.failure') }}
+        </template>
+        <p class="description">
+          <font-awesome-icon icon="fa-solid fa-circle-info" class="mr-1" />
+          {{ $t('midjourney.field.failureReason') }}:
+          {{ modelValue?.response?.error?.message }}
+          <copy-to-clipboard :content="modelValue?.response?.error?.message!" class="btn-copy" />
+        </p>
+        <p class="description">
+          <font-awesome-icon icon="fa-solid fa-hashtag" class="mr-1" />
+          {{ $t('midjourney.field.traceId') }}:
+          {{ modelValue?.response?.trace_id }}
+          <copy-to-clipboard :content="modelValue?.response?.trace_id" class="btn-copy" />
+        </p>
+      </el-alert>
+    </div>
+    <div v-else :class="{ content: true, full: full }">
+      <el-image
+        v-if="modelValue?.response?.image_url"
+        :src="modelValue?.response?.image_url"
+        :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 }}%
+      </p>
+    </div>
+    <div v-if="modelValue?.response?.actions" :class="{ operations: true, full }">
+      <el-tooltip
+        v-for="(action, actionKey) in modelValue?.response?.actions"
+        :key="actionKey"
+        class="box-item"
+        effect="dark"
+        :content="descriptionMapping[action]"
+        placement="top-start"
+      >
+        <el-button type="info" size="small" class="btn-action" @click="onCustom(action)">
+          {{ actionMapping[action] }}
+        </el-button>
+      </el-tooltip>
+    </div>
+    <div v-else-if="!modelValue?.response" v-show="full" :class="{ operations: true, full }">
+      <el-skeleton :rows="1" />
+    </div>
+    <div v-else v-show="full" :class="{ operations: true, full }">
+      <p>
+        {{ $t('midjourney.message.noOperations') }}
+      </p>
+    </div>
+    <div class="extra">
+      <p v-if="modelValue?.created_at" class="datetime">
+        <font-awesome-icon icon="fa-regular fa-clock" class="mr-1" />
+        {{ $dayjs.format('' + new Date(parseFloat(modelValue?.created_at) * 1000)) }}
+      </p>
+      <p class="description">{{ $t('midjourney.field.taskId') }}: {{ modelValue?.id }}</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElImage, ElTag, ElButton, ElTooltip, ElSkeleton, ElAlert } from 'element-plus';
+import {
+  IMidjourneyImagineTask,
+  MidjourneyImagineAction,
+  MidjourneyImagineMode,
+  MidjourneyImagineState
+} from '@/models';
+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';
+
+interface IData {
+  midjourneyImagineState: typeof MidjourneyImagineState;
+  actionMapping: Record<MidjourneyImagineAction, string>;
+  descriptionMapping: Record<MidjourneyImagineAction, string>;
+}
+
+export default defineComponent({
+  name: 'TaskPreview',
+  components: {
+    ElImage,
+    ElTag,
+    ElButton,
+    FontAwesomeIcon,
+    ElTooltip,
+    ElSkeleton,
+    ElAlert,
+    CopyToClipboard
+  },
+  props: {
+    modelValue: {
+      type: Object as () => IMidjourneyImagineTask | undefined,
+      required: true
+    },
+    full: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['custom'],
+  data(): IData {
+    return {
+      midjourneyImagineState: MidjourneyImagineState,
+      actionMapping: {
+        [MidjourneyImagineAction.GENERATE]: 'Generate',
+        [MidjourneyImagineAction.UPSCALE1]: 'U1',
+        [MidjourneyImagineAction.UPSCALE2]: 'U2',
+        [MidjourneyImagineAction.UPSCALE3]: 'U3',
+        [MidjourneyImagineAction.UPSCALE4]: 'U4',
+        [MidjourneyImagineAction.VARIATION1]: 'V1',
+        [MidjourneyImagineAction.VARIATION2]: 'V2',
+        [MidjourneyImagineAction.VARIATION3]: 'V3',
+        [MidjourneyImagineAction.VARIATION4]: 'V4',
+        [MidjourneyImagineAction.VARIATION_STRONG]: 'Vary (Strong)',
+        [MidjourneyImagineAction.VARIATION_SUBTLE]: 'Vary (Subtle)',
+        [MidjourneyImagineAction.UPSCALE_CREATIVE]: 'Upscale (Creative)',
+        [MidjourneyImagineAction.UPSCALE_SUBTLE]: 'Upscale (Subtle)',
+        [MidjourneyImagineAction.ZOOM_OUT_2X]: 'Zoom Out 2x',
+        [MidjourneyImagineAction.ZOOM_OUT_1_5X]: 'Zoom Out 1.5x',
+        [MidjourneyImagineAction.UPSCALE_2X]: 'Upscale 2x',
+        [MidjourneyImagineAction.UPSCALE_4X]: 'Upscale 4x',
+        [MidjourneyImagineAction.REDO_UPSCALE_2X]: 'Redo Upscale 2x',
+        [MidjourneyImagineAction.REDO_UPSCALE_4X]: 'Redo Upscale 4x',
+        [MidjourneyImagineAction.REDO_UPSCALE_SUBTLE]: 'Redo Upscale (Subtle)',
+        [MidjourneyImagineAction.REDO_UPSCALE_CREATIVE]: 'Redo Upscale (Creative)',
+        [MidjourneyImagineAction.SQUARE]: 'Make Square',
+        [MidjourneyImagineAction.PAN_LEFT]: '⬅️',
+        [MidjourneyImagineAction.PAN_UP]: '⬆️',
+        [MidjourneyImagineAction.PAN_DOWN]: '⬇️',
+        [MidjourneyImagineAction.PAN_RIGHT]: '➡️',
+        [MidjourneyImagineAction.REROLL]: '🔄'
+      },
+      descriptionMapping: {
+        [MidjourneyImagineAction.GENERATE]: this.$t('midjourney.action.generate'),
+        [MidjourneyImagineAction.UPSCALE1]: this.$t('midjourney.action.upscale1'),
+        [MidjourneyImagineAction.UPSCALE2]: this.$t('midjourney.action.upscale2'),
+        [MidjourneyImagineAction.UPSCALE3]: this.$t('midjourney.action.upscale3'),
+        [MidjourneyImagineAction.UPSCALE4]: this.$t('midjourney.action.upscale4'),
+        [MidjourneyImagineAction.VARIATION1]: this.$t('midjourney.action.variation1'),
+        [MidjourneyImagineAction.VARIATION2]: this.$t('midjourney.action.variation2'),
+        [MidjourneyImagineAction.VARIATION3]: this.$t('midjourney.action.variation3'),
+        [MidjourneyImagineAction.VARIATION4]: this.$t('midjourney.action.variation4'),
+        [MidjourneyImagineAction.VARIATION_STRONG]: this.$t('midjourney.action.variation_strong'),
+        [MidjourneyImagineAction.VARIATION_SUBTLE]: this.$t('midjourney.action.variation_subtle'),
+        [MidjourneyImagineAction.ZOOM_OUT_2X]: this.$t('midjourney.action.zoom_out_2x'),
+        [MidjourneyImagineAction.ZOOM_OUT_1_5X]: this.$t('midjourney.action.zoom_out_1_5x'),
+        [MidjourneyImagineAction.UPSCALE_2X]: this.$t('midjourney.action.upscale_2x'),
+        [MidjourneyImagineAction.UPSCALE_4X]: this.$t('midjourney.action.upscale_4x'),
+        [MidjourneyImagineAction.UPSCALE_SUBTLE]: this.$t('midjourney.action.upscale_subtle'),
+        [MidjourneyImagineAction.UPSCALE_CREATIVE]: this.$t('midjourney.action.upscale_creative'),
+        [MidjourneyImagineAction.REDO_UPSCALE_2X]: this.$t('midjourney.action.redo_upscale_2x'),
+        [MidjourneyImagineAction.REDO_UPSCALE_4X]: this.$t('midjourney.action.redo_upscale_4x'),
+        [MidjourneyImagineAction.REDO_UPSCALE_SUBTLE]: this.$t('midjourney.action.redo_upscale_subtle'),
+        [MidjourneyImagineAction.REDO_UPSCALE_CREATIVE]: this.$t('midjourney.action.redo_upscale_creative'),
+        [MidjourneyImagineAction.SQUARE]: this.$t('midjourney.action.square'),
+        [MidjourneyImagineAction.PAN_LEFT]: this.$t('midjourney.action.pan_left'),
+        [MidjourneyImagineAction.PAN_UP]: this.$t('midjourney.action.pan_up'),
+        [MidjourneyImagineAction.PAN_DOWN]: this.$t('midjourney.action.pan_down'),
+        [MidjourneyImagineAction.PAN_RIGHT]: this.$t('midjourney.action.pan_right'),
+        [MidjourneyImagineAction.REROLL]: this.$t('midjourney.action.reroll')
+      }
+    };
+  },
+  computed: {
+    application() {
+      return this.$store.state.midjourney.application;
+    },
+    mode() {
+      switch (this.modelValue?.mode) {
+        case MidjourneyImagineMode.FAST:
+          return MIDJOURNEY_MODE_FAST;
+        case MidjourneyImagineMode.TURBO:
+          return MIDJOURNEY_MODE_TURBO;
+        case MidjourneyImagineMode.RELAX:
+          return MIDJOURNEY_MODE_RELAX;
+        default:
+          return undefined;
+      }
+    }
+  },
+  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,
+        image_id: this.modelValue?.response?.image_id
+      });
+    },
+    onDownload(url: string) {
+      // download image using javascript
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = url.split('/').pop() as string;
+      link.click();
+    },
+    getModeIcon(mode: MidjourneyImagineMode): string | undefined {
+      switch (mode) {
+        case MidjourneyImagineMode.FAST:
+          return MIDJOURNEY_MODE_FAST.icon;
+        case MidjourneyImagineMode.TURBO:
+          return MIDJOURNEY_MODE_TURBO.icon;
+        case MidjourneyImagineMode.RELAX:
+          return MIDJOURNEY_MODE_RELAX.icon;
+      }
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.preview {
+  width: 350px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 20px;
+  margin-bottom: 20px;
+  border: 1px solid var(--el-border-color);
+
+  .description {
+    font-size: 12px;
+    color: var(--el-text-color-regular);
+    margin-bottom: 10px;
+  }
+
+  .info {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    width: 100%;
+
+    .left {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      flex: 1;
+    }
+
+    .right {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      flex: 1;
+
+      .btn {
+        cursor: pointer;
+      }
+
+      .channel {
+        .icon {
+          display: inline-block;
+          margin-right: 2px;
+          &.turbo {
+            color: #ff9900;
+          }
+          &.fast {
+            color: #2dc49c;
+          }
+          &.relax {
+            color: #ce65e6;
+          }
+        }
+      }
+    }
+  }
+  .content {
+    width: 100%;
+    position: relative;
+    margin-bottom: 10px;
+    &.full {
+      height: 220px;
+      display: flex;
+      align-items: center;
+      .image {
+        min-height: 200px;
+      }
+    }
+    &.failed {
+      .image {
+        .image-slot {
+          font-size: 16px;
+          padding: 20px;
+        }
+      }
+    }
+    .image {
+      width: 100%;
+      height: 100%;
+      min-height: 100px;
+      .image-slot {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        background: var(--el-fill-color-light);
+        color: var(--el-text-color-regular);
+      }
+    }
+    .progress {
+      position: absolute;
+      top: 49%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 20px;
+      font-weight: bold;
+      color: white;
+      text-shadow: 0 0 5px black;
+    }
+  }
+
+  .operations {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+    width: 100%;
+    align-items: baseline;
+    flex-wrap: wrap;
+    overflow: hidden;
+    text-align: center;
+    color: var(--el-text-color-regular);
+    font-size: 14px;
+    overflow-y: scroll;
+
+    &.full {
+      height: 70px;
+    }
+
+    .btn-action {
+      margin-bottom: 10px;
+    }
+  }
+
+  .extra {
+    text-align: center;
+    .datetime,
+    .prompt {
+      font-size: 12px;
+      color: var(--el-text-color-regular);
+      margin-bottom: 5px;
+    }
+  }
+}
+</style>
diff --git a/src/i18n/en/qrart.json b/src/i18n/en/qrart.json
new file mode 100644
index 00000000..429e9d94
--- /dev/null
+++ b/src/i18n/en/qrart.json
@@ -0,0 +1,34 @@
+{
+  "name.type": {
+    "message": "Type",
+    "description": "The type of content for the QR code to generate, like 'Link', 'Text', etc"
+  },
+  "name.content": {
+    "message": "Content",
+    "description": "The content for the QR code to generate"
+  },
+  "name.prompt": {
+    "message": "Prompt",
+    "description": "The prompt for the content input"
+  },
+  "name.aspectRatio": {
+    "message": "Aspect Ratio",
+    "description": "The aspect ratio for the QR code to generate"
+  },
+  "placeholder.select": {
+    "message": "Please select...",
+    "description": "The placeholder for the type input"
+  },
+  "placeholder.prompt": {
+    "message": "Enter a sentence to describe the QR you want to generate",
+    "description": "The placeholder text in the prompt field"
+  },
+  "placeholder.content": {
+    "message": "Enter the content for the QR code",
+    "description": "The placeholder text in the content field"
+  },
+  "button.generate": {
+    "message": "Generate",
+    "description": "The button text to generate the QR code"
+  }
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index ad88c0a3..87320004 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -69,6 +69,7 @@ export const loadLocaleMessages = async (i18n: I18n, locale: string) => {
   const names = [
     'api',
     'application',
+    'qrart',
     'common',
     'console',
     'credential',
diff --git a/src/layouts/Qrart.vue b/src/layouts/Qrart.vue
index 01b08128..b10072fa 100644
--- a/src/layouts/Qrart.vue
+++ b/src/layouts/Qrart.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="main">
-    <div class="preset">
-      <slot name="preset" />
+    <div class="config">
+      <slot name="config" />
     </div>
     <div class="result">
       <slot name="result" />
@@ -10,7 +10,7 @@
       <font-awesome-icon icon="fa-solid fa-bars" class="icon-menu" />
     </el-button>
     <el-drawer v-model="drawer" :with-header="false" size="340px" class="drawer">
-      <slot name="preset" />
+      <slot name="config" />
     </el-drawer>
   </div>
 </template>
@@ -56,7 +56,7 @@ export default defineComponent({
   flex: 1;
   display: flex;
   flex-direction: row;
-  .preset {
+  .config {
     width: 400px;
     height: 100%;
     overflow-y: scroll;
diff --git a/src/pages/qrart/Index.vue b/src/pages/qrart/Index.vue
index 3e3729e2..4904aa82 100644
--- a/src/pages/qrart/Index.vue
+++ b/src/pages/qrart/Index.vue
@@ -1,145 +1,64 @@
 <template>
   <layout>
-    <template #preset> </template>
-    <template #result> </template>
+    <template #config>
+      <config-panel @generate="onGenerate" />
+    </template>
+    <template #result>
+      <application-status
+        :initializing="initializing"
+        :application="application"
+        :service="service"
+        :need-apply="needApply"
+        class="mb-4"
+        @refresh="onGetApplication"
+      />
+    </template>
   </layout>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Layout from '@/layouts/Qrart.vue';
-import PresetPanel from '@/components/qrart/PresetPanel.vue';
-import PromptInput from '@/components/midjourney/PromptInput.vue';
-import ElementsSelector from '@/components/midjourney/ElementsSelector.vue';
-import IgnoreSelector from '@/components/midjourney/IgnoreSelector.vue';
-import { ElButton, ElMessage } from 'element-plus';
-import ModeSelector from '@/components/midjourney/ModeSelector.vue';
-import ReferenceImage from '@/components/midjourney/ReferenceImage.vue';
-import { applicationOperator, midjourneyOperator } from '@/operators';
+import ConfigPanel from '@/components/qrart/ConfigPanel.vue';
+import { applicationOperator, qrartOperator } from '@/operators';
+import { IApplicationDetailResponse, IQrartGenerateRequest, Status } from '@/models';
+import { ElMessage } from 'element-plus';
+import { ERROR_CODE_DUPLICATION } from '@/constants';
 import ApplicationStatus from '@/components/application/Status.vue';
-import TaskBriefList from '@/components/midjourney/tasks/TaskBriefList.vue';
-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;
-  elements: string[];
-  ignore: string;
-  references: string[];
-}
 
 const CALLBACK_URL = 'https://webhook.acedata.cloud/qrart';
 
 export default defineComponent({
   name: 'QrartIndex',
   components: {
-    ModeSelector,
-    ReferenceImage,
-    PresetPanel,
-    PromptInput,
-    ElementsSelector,
-    IgnoreSelector,
-    ElButton,
-    ApplicationStatus,
-    TaskBriefList,
-    FinalPrompt,
-    Layout
+    ConfigPanel,
+    Layout,
+    ApplicationStatus
   },
-  data(): IData {
-    return {
-      prompt: '',
-      elements: [],
-      ignore: '',
-      references: []
-    };
+  data() {
+    return {};
   },
   computed: {
     service() {
-      return this.$store.state.midjourney.service;
+      return this.$store.state.qrart.service;
     },
     mode() {
-      return this.$store.state.midjourney.mode;
+      return this.$store.state.qrart.mode;
     },
     credential() {
-      return this.$store.state.midjourney.credential;
+      return this.$store.state.qrart.credential;
     },
-    preset() {
-      return this.$store.state.midjourney.preset;
+    config() {
+      return this.$store.state.qrart.config;
     },
     initializing() {
-      return this.$store.state.midjourney.status.getApplication === Status.Request;
+      return this.$store.state.qrart.status.getApplication === Status.Request;
     },
     needApply() {
-      return this.$store.state.midjourney.status.getApplication === Status.Success && !this.application;
+      return this.$store.state.qrart.status.getApplication === Status.Success && !this.application;
     },
     application() {
-      return this.$store.state.midjourney.application;
-    },
-    finalPrompt(): string {
-      let content = '';
-      if (this.references.length > 0) {
-        content += `${this.references.join(' ')} `;
-      }
-      if (this.prompt) {
-        content += this.prompt;
-      }
-      if (this.elements.length > 0) {
-        content += ',' + this.elements.join(',');
-      }
-      if (this.preset.model && !content.includes(`--${this.preset.model}`)) {
-        content += ` --${this.preset.model}`;
-      }
-      if (this.preset.version && !content.includes(`--version `) && !content.includes(`--v `)) {
-        content += ` --version ${this.preset.version}`;
-      }
-      if (this.preset.chaos && !content.includes(`--chaos `)) {
-        content += ` --chaos ${this.preset.chaos}`;
-      }
-      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 `) &&
-        this.preset.ratio !== MIDJOURNEY_DEFAULT_RATIO
-      ) {
-        content += ` --aspect ${this.preset.ratio}`;
-      }
-      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 `) &&
-        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 `) && this.preset.iw !== MIDJOURNEY_DEFAULT_IMAGE_WEIGHT) {
-        content += ` --iw ${this.preset.iw}`;
-      }
-      if (this.preset.style && !content.includes(`--style`)) {
-        content += ` --style ${this.preset.style}`;
-      }
-      return this.prompt || this.references?.length > 0 ? content : '';
+      return this.$store.state.qrart.application;
     }
   },
   methods: {
@@ -160,43 +79,32 @@ export default defineComponent({
         });
     },
     async onGetApplication() {
-      await this.$store.dispatch('midjourney/getApplication');
+      await this.$store.dispatch('qrart/getApplication');
     },
-    async onStartTask(request: IMidjourneyImagineRequest) {
+    async onGenerate() {
+      const request = {
+        type: this.config?.type,
+        content: this.config?.content,
+        prompt: this.config?.prompt,
+        aspect_ratio: this.config?.aspect_ratio,
+        callback_url: CALLBACK_URL
+      } as IQrartGenerateRequest;
       const token = this.credential?.token;
       if (!token) {
         console.error('no token specified');
         return;
       }
-      ElMessage.success(this.$t('midjourney.message.startingTask'));
-      midjourneyOperator
-        .imagine(request, {
+      ElMessage.success(this.$t('qrart.message.startingTask'));
+      qrartOperator
+        .generate(request, {
           token
         })
         .then(() => {
-          ElMessage.success(this.$t('midjourney.message.startTaskSuccess'));
+          ElMessage.success(this.$t('qrart.message.startTaskSuccess'));
         })
         .catch(() => {
-          ElMessage.error(this.$t('midjourney.message.startTaskFailed'));
+          ElMessage.error(this.$t('qrart.message.startTaskFailed'));
         });
-    },
-    async onCustom(payload: { image_id: string; action: MidjourneyImagineAction }) {
-      const request = {
-        image_id: payload.image_id,
-        action: payload.action,
-        callback_url: CALLBACK_URL
-      };
-      this.onStartTask(request);
-    },
-    async onGenerate() {
-      const request = {
-        mode: this.mode.name as MidjourneyImagineMode,
-        prompt: this.finalPrompt,
-        action: MidjourneyImagineAction.GENERATE,
-        translation: this.preset?.translation,
-        callback_url: CALLBACK_URL
-      };
-      this.onStartTask(request);
     }
   }
 });
diff --git a/src/store/common/models.ts b/src/store/common/models.ts
index 2da099f7..32cea1be 100644
--- a/src/store/common/models.ts
+++ b/src/store/common/models.ts
@@ -1,7 +1,8 @@
+import { IToken, IUser } from '@/models';
 import { IMidjourneyState } from '../midjourney/models';
 import { IChatState } from '../chat/models';
 import { IChatdocState } from '../chatdoc/models';
-import { IToken, IUser } from '@/models';
+import { IQrartState } from '../qrart/models';
 
 export interface ISetting {
   navigationCollapsed?: boolean;
@@ -19,4 +20,5 @@ export interface IRootState extends ICommonState {
   midjourney: IMidjourneyState;
   chat: IChatState;
   chatdoc: IChatdocState;
+  qrart: IQrartState;
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index 8c514e80..6d2244fe 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -3,10 +3,12 @@ import createPersistedState from 'vuex-persistedstate';
 import midjourney from './midjourney';
 import chat from './chat';
 import chatdoc from './chatdoc';
+import qrart from './qrart';
 import root from './common';
 import persistChat from './chat/persist';
 import persistMidjourney from './midjourney/persist';
 import persistChatdoc from './chatdoc/persist';
+import persistQrart from './qrart/persist';
 import persistRoot from './common/persist';
 
 const store = createStore({
@@ -14,11 +16,12 @@ const store = createStore({
   modules: {
     midjourney: midjourney,
     chat: chat,
+    qrart: qrart,
     chatdoc: chatdoc
   },
   plugins: [
     createPersistedState({
-      paths: [...persistRoot, ...persistChat, ...persistMidjourney, ...persistChatdoc]
+      paths: [...persistRoot, ...persistChat, ...persistMidjourney, ...persistChatdoc, ...persistQrart]
     })
   ]
 });
diff --git a/src/store/qrart/index.ts b/src/store/qrart/index.ts
new file mode 100644
index 00000000..4c79cdfc
--- /dev/null
+++ b/src/store/qrart/index.ts
@@ -0,0 +1,14 @@
+import { Module } from 'vuex';
+import { IQrartState } from './models';
+import actions from './actions';
+import mutations from './mutations';
+import state from './state';
+
+export const qrart: Module<IQrartState, any> = {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+};
+
+export default qrart;