add luma upload (#116)

AceDataCloud · Aug 17, 2024 · fd8eb9f · fd8eb9f
1 parent 301f1d0
commit fd8eb9f
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 31 deletions.
diff --git a/change/@acedatacloud-nexior-59c75e48-34b6-4d51-99fe-dabc1f30bfa6.json b/change/@acedatacloud-nexior-59c75e48-34b6-4d51-99fe-dabc1f30bfa6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add luma upload",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/luma/config/EndImageUrlInput.vue b/src/components/luma/config/EndImageUrlInput.vue
@@ -1,34 +1,72 @@
 <template>
   <div class="field">
     <h2 class="title">{{ $t('luma.name.endImageUrl') }}</h2>
-    <el-input v-model="value" class="value" :placeholder="$t('luma.placeholder.endImageUrl')" />
+    <div class="upload-wrapper">
+      <el-upload
+        v-model:file-list="fileList"
+        accept=".png,.jpg,.jpeg,.gif,.bmp,.webp"
+        name="file"
+        class="value"
+        :show-file-list="true"
+        :limit="1"
+        :multiple="false"
+        :action="uploadUrl"
+        :on-exceed="onExceed"
+        :on-error="onError"
+        :on-success="onSuccess"
+        :headers="headers"
+      >
+        <el-button size="small" type="primary" round>{{ $t('luma.button.uploadEndImageUrl') }}</el-button>
+      </el-upload>
+    </div>
     <info-icon :content="$t('luma.description.endImageUrl')" class="info" />
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
-import { ElInput } from 'element-plus';
+import { ElButton, ElUpload, ElMessage, UploadFiles } from 'element-plus';
+import { getBaseUrlPlatform } from '@/utils';
 import InfoIcon from '@/components/common/InfoIcon.vue';
+export const DEFAULT_CONTENT = '';
+
+interface IData {
+  fileList: UploadFiles;
+  uploadUrl: string;
+}
+
 export default defineComponent({
-  name: 'EndImageUrlInput',
+  name: 'ContentInput',
   components: {
-    ElInput,
+    ElUpload,
+    ElButton,
     InfoIcon
   },
-  data() {
-    return {};
+  data(): IData {
+    return {
+      fileList: [],
+      uploadUrl: getBaseUrlPlatform() + '/api/v1/files/'
+    };
   },
   computed: {
+    headers() {
+      return {
+        Authorization: `Bearer ${this.$store.state.token.access}`
+      };
+    },
+    urls(): string[] {
+      // @ts-ignore
+      return this.fileList.map((file: UploadFile) => file?.response?.file_url);
+    },
     value: {
       get() {
         return this.$store.state.luma?.config?.end_image_url;
       },
-      set(val) {
-        console.debug('set end_image_url', val);
+      set(val: string) {
+        const url = this.urls?.[0];
         this.$store.commit('luma/setConfig', {
           ...this.$store.state.luma?.config,
-          end_image_url: val
+          end_image_url: url
         });
       }
     }
@@ -37,6 +75,25 @@ export default defineComponent({
     if (!this.value) {
       this.value = undefined;
     }
+    this.onSetEndImageUrl();
+  },
+  methods: {
+    onExceed() {
+      ElMessage.warning(this.$t('luma.message.uploadEndImageExceed'));
+    },
+    onError() {
+      ElMessage.error(this.$t('luma.message.uploadEndImageError'));
+    },
+    onSetEndImageUrl() {
+      const url = this.urls?.[0];
+      this.$store.commit('luma/setConfig', {
+        ...this.$store.state.luma?.config,
+        end_image_url: url
+      });
+    },
+    async onSuccess() {
+      this.onSetEndImageUrl();
+    }
   }
 });
 </script>
@@ -46,14 +103,21 @@ export default defineComponent({
   display: flex;
   flex-direction: row;
   align-items: center;
-
+  justify-content: space-between; // Distribute space evenly
   .title {
     font-size: 14px;
     margin: 0;
     width: 30%;
   }
   .value {
     flex: 1;
+    margin-left: 60px; // Adjust this value as needed
+  }
+  .upload-wrapper {
+    transform: translate(-26px, 5px); // Move left and down
+  }
+  .info {
+    margin-left: auto; // Pushes the info icon to the right
   }
 }
 </style>
diff --git a/src/components/luma/config/PromptInput.vue b/src/components/luma/config/PromptInput.vue
@@ -35,12 +35,12 @@ export default defineComponent({
   computed: {
     prompt: {
       get() {
-        return this.$store.state.suno?.config?.prompt;
+        return this.$store.state.luma?.config?.prompt;
       },
       set(val) {
         console.debug('set prompt', val);
-        this.$store.commit('suno/setConfig', {
-          ...this.$store.state.suno?.config,
+        this.$store.commit('luma/setConfig', {
+          ...this.$store.state.luma?.config,
           prompt: val
         });
       }

diff --git a/src/components/luma/config/StartImageUrlInput.vue b/src/components/luma/config/StartImageUrlInput.vue
@@ -1,34 +1,73 @@
 <template>
   <div class="field">
     <h2 class="title">{{ $t('luma.name.startImageUrl') }}</h2>
-    <el-input v-model="value" class="value" :placeholder="$t('luma.placeholder.startImageUrl')" />
+    <div class="upload-wrapper">
+      <el-upload
+        v-model:file-list="fileList"
+        accept=".png,.jpg,.jpeg,.gif,.bmp,.webp"
+        name="file"
+        class="value"
+        :show-file-list="true"
+        :limit="1"
+        :multiple="false"
+        :action="uploadUrl"
+        :on-exceed="onExceed"
+        :on-error="onError"
+        :on-remove="onRemove"
+        :on-success="onSuccess"
+        :headers="headers"
+      >
+        <el-button size="small" type="primary" round>{{ $t('luma.button.uploadStartImageUrl') }}</el-button>
+      </el-upload>
+    </div>
     <info-icon :content="$t('luma.description.startImageUrl')" class="info" />
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
-import { ElInput } from 'element-plus';
+import { ElButton, ElUpload, ElMessage, UploadFiles } from 'element-plus';
+import { getBaseUrlPlatform } from '@/utils';
 import InfoIcon from '@/components/common/InfoIcon.vue';
+export const DEFAULT_CONTENT = '';
+
+interface IData {
+  fileList: UploadFiles;
+  uploadUrl: string;
+}
+
 export default defineComponent({
   name: 'StartImageUrlInput',
   components: {
-    ElInput,
+    ElUpload,
+    ElButton,
     InfoIcon
   },
-  data() {
-    return {};
+  data(): IData {
+    return {
+      fileList: [],
+      uploadUrl: getBaseUrlPlatform() + '/api/v1/files/'
+    };
   },
   computed: {
+    headers() {
+      return {
+        Authorization: `Bearer ${this.$store.state.token.access}`
+      };
+    },
+    urls(): string[] {
+      // @ts-ignore
+      return this.fileList.map((file: UploadFile) => file?.response?.file_url);
+    },
     value: {
       get() {
         return this.$store.state.luma?.config?.start_image_url;
       },
-      set(val) {
-        console.debug('set start_image_url', val);
+      set(val: string) {
+        const url = this.urls?.[0];
         this.$store.commit('luma/setConfig', {
           ...this.$store.state.luma?.config,
-          start_image_url: val
+          start_image_url: url
         });
       }
     }
@@ -37,6 +76,28 @@ export default defineComponent({
     if (!this.value) {
       this.value = undefined;
     }
+    this.onSetStartImageUrl();
+  },
+  methods: {
+    onExceed() {
+      ElMessage.warning(this.$t('luma.message.uploadStartImageExceed'));
+    },
+    onError() {
+      ElMessage.error(this.$t('luma.message.uploadStartImageError'));
+    },
+    async onRemove() {
+      ElMessage.error(this.$t('luma.message.uploadStartImageError'));
+    },
+    onSetStartImageUrl() {
+      const url = this.urls?.[0];
+      this.$store.commit('luma/setConfig', {
+        ...this.$store.state.luma?.config,
+        start_image_url: url
+      });
+    },
+    async onSuccess() {
+      this.onSetStartImageUrl();
+    }
   }
 });
 </script>
@@ -46,14 +107,21 @@ export default defineComponent({
   display: flex;
   flex-direction: row;
   align-items: center;
-
+  justify-content: space-between; // Distribute space evenly
   .title {
     font-size: 14px;
     margin: 0;
     width: 30%;
   }
   .value {
     flex: 1;
+    margin-left: 60px; // Adjust this value as needed
+  }
+  .upload-wrapper {
+    transform: translate(-26px, 5px); // Move left and down
+  }
+  .info {
+    margin-left: auto; // Pushes the info icon to the right
   }
 }
 </style>
diff --git a/src/components/luma/task/Preview.vue b/src/components/luma/task/Preview.vue
@@ -7,15 +7,13 @@
       <div class="bot">
         {{ $t('luma.name.lumaBot') }}
         <span class="datetime">
-          <!-- {{ $dayjs.format('' + new Date(parseFloat(modelValue?.created_at || '') * 1000)) }} -->
+          {{ $dayjs.format('' + new Date(parseFloat(modelValue?.created_at || '') * 1000)) }}
         </span>
       </div>
       <div class="info">
         <p v-if="modelValue?.request?.prompt" class="prompt mt-2">
           {{ modelValue?.request?.prompt }}
-          <span v-if="modelValue?.response && Object.keys(modelValue.response).length === 0">
-            - ({{ $t('luma.status.pending') }})
-          </span>
+          <span v-if="!modelValue?.response"> - ({{ $t('luma.status.pending') }}) </span>
         </p>
       </div>
       <!-- Display success message -->

diff --git a/src/i18n/zh-CN/luma.json b/src/i18n/zh-CN/luma.json
@@ -199,8 +199,12 @@
     "message": "继续生成",
     "description": "继续生成按钮文本"
   },
-  "button.uploadQr": {
-    "message": "上传二维码",
+  "button.uploadStartImageUrl": {
+    "message": "上传图片",
+    "description": "上传二维码的按钮文本"
+  },
+  "button.uploadEndImageUrl": {
+    "message": "上传图片",
     "description": "上传二维码的按钮文本"
   },
   "preset.sunset": {
@@ -343,6 +347,26 @@
     "message": "生成图像失败",
     "description": "图像生成失败时的消息"
   },
+  "message.uploadStartImageExceed": {
+    "message": "上传首帧图片数量超过限制",
+    "description": "上传首帧图片数量超过限制时的错误信息"
+  },
+  "message.uploadEndImageExceed": {
+    "message": "上传尾帧图片数量超过限制",
+    "description": "上传首帧图片数量超过限制时的错误信息"
+  },
+  "message.uploadStartImageError": {
+    "message": "上传首帧图片失败",
+    "description": "上传首帧图片失败时的错误信息"
+  },
+  "message.uploadEndImageError": {
+    "message": "上传尾帧图片失败",
+    "description": "上传尾帧图片失败时的错误信息"
+  },
+  "message.uploadDocumentsError": {
+    "message": "上传文档失败",
+    "description": "上传文档失败时的错误信息"
+  },
   "message.noOperations": {
     "message": "没有可用操作",
     "description": "没有可用操作时的消息"

diff --git a/src/store/luma/actions.ts b/src/store/luma/actions.ts
@@ -44,7 +44,7 @@ export const getApplications = async ({
       .then((response) => {
         console.debug('get applications success', response?.data);
         state.status.getApplications = Status.Success;
-        commit('setApplications', response.data.items);
+        commit('setApplication', response.data.items);
         // check if there is any application with 'Period' type
         const application = response.data.items?.find((application) => application?.type === IApplicationType.PERIOD);
         const application2 = response.data.items?.find((application) => application?.type === IApplicationType.USAGE);