add luma video preview

src/components/luma/ConfigPanel.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="panel">
     <div class="config">
+      <extend-from-input v-if="config?.action === 'extend'" class="mb-4" />
       <prompt-input class="mb-4" />
-      <start-image-url-input class="mb-4" />
+      <start-image-url-input v-if="!config?.action === 'extend'" class="mb-4" />
       <end-image-url-input class="mb-4" />
       <enhancement-selector class="mb-4" />
       <loop-selector class="mb-4" />
@@ -29,6 +30,7 @@ import LoopSelector from './config/LoopSelector.vue';
 import EndImageUrlInput from './config/EndImageUrlInput.vue';
 import StartImageUrlInput from './config/StartImageUrlInput.vue';
 import PromptInput from './config/PromptInput.vue';
+import ExtendFromInput from './config/ExtendFromInput.vue';
 export default defineComponent({
   name: 'PresetPanel',
   components: {
@@ -38,7 +40,8 @@ export default defineComponent({
     EnhancementSelector,
     ElButton,
     FontAwesomeIcon,
-    PromptInput
+    PromptInput,
+    ExtendFromInput
   },
   emits: ['generate'],
   computed: {

src/components/luma/config/ExtendFromInput.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="field">
+    <div class="box">
+      <h2 class="title">{{ $t('luma.name.extend') }}</h2>
+    </div>
+    <div class="task">
+      <div>
+        <vue-plyr :options="options" class="video">
+          <video controls crossorigin playsinline :data-poster="config?.thumbnail_url">
+            <source size="1080" :src="config?.video_url" type="video/mp4" />
+            <a download="" href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"> Download </a>
+          </video>
+        </vue-plyr>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+// @ts-ignore
+import VuePlyr from '@skjnldsv/vue-plyr';
+// @ts-ignore
+import { ILumaTask } from '@/models';
+import '@skjnldsv/vue-plyr/dist/vue-plyr.css';
+export default defineComponent({
+  name: 'ExtendFromInput',
+  components: { VuePlyr },
+  props: {
+    modelValue: {
+      type: Object as () => ILumaTask | undefined,
+      required: true
+    }
+  },
+  data() {
+    return {
+      options: { quality: { default: '1080p' } }
+    };
+  },
+  computed: {
+    config() {
+      return this.$store.state.luma?.config;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.field {
+  .box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between; // 添加这行
+    position: relative;
+    .title {
+      font-size: 14px;
+      margin-bottom: 10px;
+    }
+    .input-wrapper {
+      width: 150px; // 根据需要调整宽度
+      margin-left: 30px; // 增加左边距
+    }
+  }
+}
+</style>

src/components/luma/task/Preview.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="preview">
     <div class="left">
-      <el-image src="https://cdn.acedata.cloud/bcml67.png" class="avatar" />
+      <el-image src="https://cdn.acedata.cloud/yu04pc.png" class="avatar" />
     </div>
     <div class="main">
       <div class="bot">
@@ -125,7 +125,9 @@ export default defineComponent({
         ...this.$store.state.luma?.config,
         video_id: response.video_id,
         prompt: response.prompt,
-        action: 'extend'
+        action: 'extend',
+        thumbnail_url: response.thumbnail_url,
+        video_url: response.video_url
       });
     },
     onReload(event: Event) {

src/i18n/zh-CN/luma.json

@@ -75,6 +75,10 @@
     "message": "提示词增强",
     "description": "要生成的 QR 码的高级设置"
   },
+  "name.extend": {
+    "message": "扩展视频来自",
+    "description": "内容输入的提示"
+  },
   "name.loop": {
     "message": "视频循环播放",
     "description": "要生成的 QR 码的高级设置"

src/models/luma.ts

@@ -7,6 +7,7 @@ export interface ILumaConfig {
   end_image_url?: string;
   enhancement?: boolean;
   loop?: boolean;
+  thumbnail_url?: string;
 }
 
 export interface ILumaGenerateRequest {