opt luma (#122)

Author: hyf-github-user

change/@acedatacloud-nexior-71dd2841-5a15-4d66-8a1c-3721ea51f0bc.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "opt luma",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}

src/components/luma/OperationPanel.vue

@@ -7,7 +7,7 @@
       <div class="actions">
         <el-button type="primary" class="btn w-full" round @click="onGenerate">
           <font-awesome-icon icon="fa-solid fa-magic" class="mr-2" />
-          {{ $t('qrart.button.generate') }}
+          {{ $t('luma.button.generate') }}
         </el-button>
       </div>
     </el-card>

src/components/luma/config/PromptInput.vue

@@ -29,9 +29,6 @@ export default defineComponent({
     ElInput,
     InfoIcon
   },
-  data() {
-    return {};
-  },
   computed: {
     prompt: {
       get() {
@@ -60,11 +57,15 @@ export default defineComponent({
     display: flex;
     flex-direction: row;
     align-items: center;
+    justify-content: space-between; // Add this line to move the icon to the right
     position: relative;
     .title {
       font-size: 14px;
       margin-bottom: 10px;
     }
   }
+  .info {
+    margin-left: auto; // Ensure the icon stays on the right
+  }
 }
 </style>

src/components/luma/task/Detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="preview">
     <div class="left">
-      <el-image src="https://cdn.acedata.cloud/yu04pc.png" class="avatar" />
+      <el-image src="https://cdn.acedata.cloud/ahjfwi.png" class="avatar" />
     </div>
     <div class="main">
       <div class="bot">
@@ -70,7 +70,14 @@
         </el-alert>
       </div>
       <!-- Display error message -->
-      <div v-if="!modelValue?.response" :class="{ content: true }">
+      <div
+        v-if="
+          !modelValue?.response ||
+          modelValue?.response?.data?.state === 'processing' ||
+          modelValue?.response?.data?.state === 'pending'
+        "
+        :class="{ content: true }"
+      >
         <el-alert :closable="false" class="info">
           <template #template>
             <font-awesome-icon icon="fa-solid fa-exclamation-triangle" class="mr-1" />
@@ -182,7 +189,7 @@ $left-width: 70px;
   .left {
     width: $left-width;
     .avatar {
-      background-color: white;
+      background-color: rgb(0, 0, 0);
       padding: 2px;
       width: 50px;
       height: 50px;

src/components/luma/task/Preview.vue

@@ -1,5 +1,5 @@
 export const LUMA_SERVICE_ID = 'dff45a0d-2858-4936-8e2b-3d49c52aff11';
 
-export const LUMA_DEFAULT_ENHANCEMENT = false;
+export const LUMA_DEFAULT_ENHANCEMENT = true;
 export const LUMA_DEFAULT_LOOP = false;
 export const LUMA_DEFAULT_CUSTOM = false;

src/constants/luma.ts

@@ -47,6 +47,10 @@
     "message": "支持多种音乐风格，轻松生成你想要的音乐，并支持灵活的长度扩展选项。",
     "description": "AI 音乐章节标题"
   },
+  "subtitle.luma": {
+    "message": "对接最新的 Luma 模型，一键生成自定义的视频，并支持灵活的视频扩展选项。",
+    "description": "AI 音乐章节标题"
+  },
   "subtitle.comments": {
     "message": "我们很高兴能够帮助这些客户，他们对我们的服务给予了很高的评价。",
     "description": "客户评价章节标题"

src/i18n/zh-CN/index.json

@@ -80,7 +80,7 @@
     "description": "要生成的 QR 码的高级设置"
   },
   "name.custom": {
-    "message": "自定义扩展",
+    "message": "自定义视频扩展",
     "description": "自定义扩展视频"
   },
   "name.extend": {

src/i18n/zh-CN/luma.json

@@ -49,7 +49,7 @@
           <el-col
             v-for="(capability, capabilityIndex) in capabilities"
             :key="capabilityIndex"
-            :md="24 / capabilities.length"
+            :md="6"
             :xs="24"
             class="mb-4"
           >
@@ -166,6 +166,31 @@
         </el-row>
       </div>
     </div>
+    <div
+      id="luma"
+      class="block"
+      @click="
+        $router.push({
+          path: '/luma'
+        })
+      "
+    >
+      <div class="container">
+        <el-row>
+          <el-col :md="16" :xs="24" class="preview">
+            <img src="https://cdn.acedata.cloud/gyogar.png" class="image desktop" />
+            <img src="https://cdn.acedata.cloud/5kunm0.png" class="image mobile" />
+          </el-col>
+          <el-col :md="8" :xs="24" class="info">
+            <h2 class="title">{{ $t('index.title.luma') }}</h2>
+            <p class="subtitle">{{ $t('index.subtitle.luma') }}</p>
+            <el-button type="primary" round class="btn-try">
+              {{ $t('index.button.try') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
     <div id="comments">
       <div class="container">
         <el-row class="mb-6">
@@ -287,6 +312,15 @@ export default defineComponent({
                 icon: 'fa-solid fa-music'
               }
             ]
+          : []),
+        ...(this.site?.features?.luma?.enabled
+          ? [
+              {
+                title: this.$t('index.title.luma'),
+                subtitle: this.$t('index.subtitle.luma'),
+                icon: 'fa-solid fa-film'
+              }
+            ]
           : [])
       ];
     }