AceDataCloud · Germey · Jul 2, 2024 · Jul 2, 2024 · Jul 2, 2024
diff --git a/change/@acedatacloud-nexior-fce842ed-a4a3-44c6-b113-d9963a2af010.json b/change/@acedatacloud-nexior-fce842ed-a4a3-44c6-b113-d9963a2af010.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "upgrade to use tasks for mj",
+  "packageName": "@acedatacloud/nexior",
+  "email": "germey@acedata.cloud",
+  "dependentChangeType": "patch"
+}
diff --git a/src/assets/scss/_common.scss b/src/assets/scss/_common.scss
@@ -42,6 +42,10 @@ html.dark,
     color: var(--el-text-color-regular);
   }
 
+  .el-radio-group {
+    --el-border-radius-base: 15px;
+  }
+
   .el-textarea {
     border-radius: 10px;
     textarea {

diff --git a/src/components/chat/Message.vue b/src/components/chat/Message.vue
@@ -199,7 +199,7 @@ export default defineComponent({
       background-color: var(--el-bg-color-page);
       color: var(--el-text-color-primary);
       width: fit-content;
-      text-align: right;
+      text-align: left;
       max-width: 100%;
       padding: 8px 15px;
     }

diff --git a/src/components/midjourney/tasks/TaskItem.vue b/src/components/midjourney/tasks/TaskItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="item">
+  <div v-if="modelValue?.type === 'imagine'" class="item">
     <div class="left">
       <el-image src="https://cdn.acedata.cloud/05daz4.png" class="avatar" />
     </div>
@@ -121,7 +121,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { ElImage, ElButton, ElTooltip, ElAlert } from 'element-plus';
-import { IMidjourneyImagineTask, MidjourneyImagineAction, MidjourneyImagineState } from '@/models';
+import { IMidjourneyTask, MidjourneyImagineAction, MidjourneyImagineState } from '@/models';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import CopyToClipboard from '@/components/common/CopyToClipboard.vue';
 
@@ -143,7 +143,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: Object as () => IMidjourneyImagineTask | undefined,
+      type: Object as () => IMidjourneyTask | undefined,
       required: true
     },
     full: {
@@ -241,10 +241,12 @@ export default defineComponent({
       target.src = url.toString();
     },
     onCustom(action: string) {
-      this.$emit('custom', {
-        action,
-        image_id: this.modelValue?.response?.image_id
-      });
+      if (this.modelValue?.type === 'imagine') {
+        this.$emit('custom', {
+          action,
+          image_id: this.modelValue?.response?.image_id
+        });
+      }
     },
     onOpenUrl(url: string) {
       window.open(url, '_blank');
@@ -332,7 +334,6 @@ $left-width: 70px;
         }
       }
     }
-
     .content {
       width: 100%;
       position: relative;

diff --git a/src/components/midjourney/tasks/TaskList.vue b/src/components/midjourney/tasks/TaskList.vue
@@ -54,7 +54,7 @@ export default defineComponent({
     },
     tasks() {
       // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      return this.$store.state.midjourney.imagineTasks?.reverse();
+      return this.$store.state.midjourney.tasks?.items?.reverse();
     },
     application() {
       return this.$store.state.midjourney.application;
@@ -71,11 +71,11 @@ export default defineComponent({
     }
   },
   async mounted() {
-    await this.$store.dispatch('midjourney/setImagineTasks', undefined);
-    this.getImagineTasks();
+    await this.$store.dispatch('midjourney/setTasks', undefined);
+    this.getTasks();
     // @ts-ignore
     this.job = setInterval(() => {
-      this.getImagineTasks();
+      this.getTasks();
     }, 5000);
   },
   unmounted() {
@@ -85,12 +85,12 @@ export default defineComponent({
     async onLoadHistory() {
       this.$router.push({ name: ROUTE_MIDJOURNEY_HISTORY });
     },
-    async getImagineTasks() {
+    async getTasks() {
       // ensure that the previous request has been completed
       if (this.loading) {
         return;
       }
-      await this.$store.dispatch('midjourney/getImagineTasks', {
+      await this.$store.dispatch('midjourney/getTasks', {
         limit: 30,
         offset: 0
       });
@@ -133,7 +133,7 @@ export default defineComponent({
       .main {
         width: calc(100% - 70px);
         flex: 1;
-        padding: 0 10px;
+        padding: 10px;
 
         .icon {
           display: flex;

diff --git a/src/components/qrart/RecentPanel.vue b/src/components/qrart/RecentPanel.vue
@@ -1,6 +1,27 @@
 <template>
-  <div class="panel recent tasks">
-    <task-preview v-for="(task, taskIndex) in tasks?.items" :key="taskIndex" :model-value="task" class="preview" />
+  <div class="panel recent">
+    <div v-if="tasks?.items === undefined" class="tasks">
+      <div v-for="_ in 3" :key="_" class="task placeholder">
+        <div class="left">
+          <el-skeleton animated>
+            <template #template>
+              <el-skeleton-item variant="image" class="avatar" />
+            </template>
+          </el-skeleton>
+        </div>
+        <div class="main">
+          <el-skeleton animated>
+            <template #template>
+              <el-skeleton-item variant="p" class="title" />
+              <el-skeleton-item variant="image" class="icon" />
+            </template>
+          </el-skeleton>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="tasks?.items?.length && tasks?.items?.length > 0" class="tasks">
+      <task-preview v-for="(task, taskIndex) in tasks?.items" :key="taskIndex" :model-value="task" class="preview" />
+    </div>
     <p v-if="tasks?.items?.length === 0" class="description">
       {{ $t('qrart.message.noTasks') }}
     </p>
@@ -11,11 +32,14 @@
 import { defineComponent } from 'vue';
 import TaskPreview from './task/Preview.vue';
 import { Status } from '@/models';
+import { ElSkeleton, ElSkeletonItem } from 'element-plus';
 
 export default defineComponent({
   name: 'RecentPanel',
   components: {
-    TaskPreview
+    TaskPreview,
+    ElSkeleton,
+    ElSkeletonItem
   },
   data() {
     return {
@@ -49,8 +73,8 @@ export default defineComponent({
   methods: {
     async onScrollDown() {
       setTimeout(() => {
-        // scroll to bottom for `.tasks`
-        const el = document.querySelector('.tasks');
+        // scroll to bottom for `.recent`
+        const el = document.querySelector('.recent');
         if (el) {
           el.scrollTop = el.scrollHeight;
         }
@@ -91,6 +115,54 @@ export default defineComponent({
       font-size: 14px;
       color: var(--el-text-color-secondary);
     }
+    .tasks {
+      width: 100%;
+      .task {
+        margin-bottom: 15px;
+        width: 100%;
+        height: fit-content;
+        text-align: left;
+
+        &.placeholder {
+          display: flex;
+          flex-direction: row;
+          .left {
+            width: 70px;
+            padding: 10px;
+
+            .avatar {
+              width: 50px;
+              height: 50px;
+              border-radius: 50%;
+            }
+          }
+
+          .main {
+            width: calc(100% - 70px);
+            flex: 1;
+            padding: 10px;
+            margin-bottom: 10px;
+
+            .icon {
+              display: flex;
+              height: 200px;
+              width: 300px;
+            }
+
+            .title {
+              display: block;
+              width: 200px;
+              height: 20px;
+              margin-bottom: 15px;
+            }
+          }
+        }
+
+        .operations {
+          height: fit-content !important;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/models/midjourney.ts b/src/models/midjourney.ts
@@ -60,6 +60,11 @@ export interface IMidjourneyImagineRequest {
   application_id?: string;
 }
 
+export interface IMidjourneyDescribeRequest {
+  image_url: string;
+  application_id?: string;
+}
+
 export interface IMidjourneyImagineResponse {
   task_id: string;
   progress: number;
@@ -75,18 +80,33 @@ export interface IMidjourneyImagineResponse {
   success?: boolean;
 }
 
+export interface IMidjourneyDescribeResponse {
+  descriptions: string[];
+}
+
 export interface IMidjourneyImagineTask {
   id: string;
+  type: 'imagine';
   created_at?: string;
   request?: IMidjourneyImagineRequest;
   response?: IMidjourneyImagineResponse;
   state?: MidjourneyImagineState;
 }
 
-export type IMidjourneyImagineTaskResponse = IMidjourneyImagineTask;
+export interface IMidjourneyDescribeTask {
+  id: string;
+  type: 'describe';
+  created_at?: string;
+  request?: IMidjourneyDescribeRequest;
+  response?: IMidjourneyDescribeResponse;
+}
+
+export type IMidjourneyTask = IMidjourneyImagineTask | IMidjourneyDescribeTask;
+
+export type IMidjourneyTaskResponse = IMidjourneyTask;
 
-export interface IMidjourneyImagineTasksResponse {
-  items: IMidjourneyImagineTask[];
+export interface IMidjourneyTasksResponse {
+  items: IMidjourneyTask[];
   count: number;
 }
 

diff --git a/src/operators/midjourney.ts b/src/operators/midjourney.ts
@@ -2,13 +2,13 @@ import axios, { AxiosResponse } from 'axios';
 import {
   IMidjourneyImagineRequest,
   IMidjourneyImagineResponse,
-  IMidjourneyImagineTaskResponse,
-  IMidjourneyImagineTasksResponse
+  IMidjourneyTaskResponse,
+  IMidjourneyTasksResponse
 } from '@/models';
 import { BASE_URL_API } from '@/constants';
 
 class MidjourneyOperator {
-  async task(id: string, options: { token: string }): Promise<AxiosResponse<IMidjourneyImagineTaskResponse>> {
+  async task(id: string, options: { token: string }): Promise<AxiosResponse<IMidjourneyTaskResponse>> {
     return await axios.post(
       `/midjourney/tasks`,
       {
@@ -30,7 +30,7 @@ class MidjourneyOperator {
   async tasks(
     filter: { ids?: string[]; applicationId?: string; limit?: number; offset?: number },
     options: { token: string }
-  ): Promise<AxiosResponse<IMidjourneyImagineTasksResponse>> {
+  ): Promise<AxiosResponse<IMidjourneyTasksResponse>> {
     return await axios.post(
       `/midjourney/tasks`,
       {

diff --git a/src/pages/distribution/Index.vue b/src/pages/distribution/Index.vue
@@ -434,4 +434,10 @@ export default defineComponent({
   bottom: 40px;
   z-index: 1000;
 }
+
+@media (max-width: 767px) {
+  .help {
+    top: 40px;
+  }
+}
 </style>
diff --git a/src/pages/midjourney/Index.vue b/src/pages/midjourney/Index.vue
@@ -94,8 +94,8 @@ export default defineComponent({
     };
   },
   computed: {
-    imagineTasks() {
-      return this.$store.state.midjourney.imagineTasks;
+    tasks() {
+      return this.$store.state.midjourney.tasks;
     },
     service() {
       return this.$store.state.midjourney.service;
@@ -189,7 +189,7 @@ export default defineComponent({
     }
   },
   watch: {
-    imagineTasks: {
+    tasks: {
       handler(val, oldVal) {
         if (oldVal === undefined && val) {
           this.onScrollDown();
@@ -272,7 +272,7 @@ export default defineComponent({
       }, 500);
     },
     async onSyncTasks() {
-      await this.$store.dispatch('midjourney/getImagineTasks', {
+      await this.$store.dispatch('midjourney/getTasks', {
         limit: 30,
         offset: 0
       });

diff --git a/src/pages/profile/Index.vue b/src/pages/profile/Index.vue
@@ -73,6 +73,9 @@ export default defineComponent({
     user() {
       return this.$store.getters.user;
     },
+    showSite() {
+      return this.$store?.state?.site?.admins?.includes(this.$store.getters.user?.id);
+    },
     links(): ILink[] {
       let links: ILink[] = [
         {
@@ -105,12 +108,16 @@ export default defineComponent({
           name: ROUTE_DISTRIBUTION_INDEX,
           icon: 'fa-solid fa-coins'
         },
-        {
-          key: 'site-index',
-          text: this.$t('common.nav.site'),
-          name: ROUTE_SITE_INDEX,
-          icon: 'fa-solid fa-gear'
-        },
+        ...(this.showSite
+          ? [
+              {
+                key: 'site-index',
+                text: this.$t('common.nav.site'),
+                name: ROUTE_SITE_INDEX,
+                icon: 'fa-solid fa-gear'
+              }
+            ]
+          : []),
         {
           key: 'dark-setting',
           text: this.$t('common.nav.darkMode'),