Explorar o código

1、视频预览高度100%
2、ai视频新增多张图片生成
3、合并ai视频请求接口

liyanbo hai 7 meses
pai
achega
879acd7e8e

+ 1 - 0
src/types/auto-components.d.ts

@@ -184,6 +184,7 @@ declare module 'vue' {
     VerifyPoints: typeof import('./../components/Verifition/src/Verify/VerifyPoints.vue')['default']
     VerifyPoints: typeof import('./../components/Verifition/src/Verify/VerifyPoints.vue')['default']
     VerifySlide: typeof import('./../components/Verifition/src/Verify/VerifySlide.vue')['default']
     VerifySlide: typeof import('./../components/Verifition/src/Verify/VerifySlide.vue')['default']
     VerticalButtonGroup: typeof import('./../components/VerticalButtonGroup/index.vue')['default']
     VerticalButtonGroup: typeof import('./../components/VerticalButtonGroup/index.vue')['default']
+    VideoImages: typeof import('./../views/ai/video/index/components/videoImages/index.vue')['default']
     XButton: typeof import('./../components/XButton/src/XButton.vue')['default']
     XButton: typeof import('./../components/XButton/src/XButton.vue')['default']
     XTextButton: typeof import('./../components/XButton/src/XTextButton.vue')['default']
     XTextButton: typeof import('./../components/XButton/src/XTextButton.vue')['default']
   }
   }

+ 1 - 0
src/views/ai/utils/constants.ts

@@ -30,6 +30,7 @@ export const AiModelTypeEnum = {
   IMAGE: 2, // 图像
   IMAGE: 2, // 图像
   IMAGE_EDIT: 7, // 图像编辑
   IMAGE_EDIT: 7, // 图像编辑
   VOICE: 3, // 音频
   VOICE: 3, // 音频
+  IMAGE_IMAGES: 8, // 视频图像集
   VIDEO: 4, // 视频
   VIDEO: 4, // 视频
   EMBEDDING: 5, // 向量
   EMBEDDING: 5, // 向量
   RERANK: 6 // 重排
   RERANK: 6 // 重排

+ 1 - 0
src/views/ai/video/index/components/VideoCard.vue

@@ -141,6 +141,7 @@ onMounted(async () => {
 
 
     .video {
     .video {
       width: 100%;
       width: 100%;
+      height: 100%;
       border-radius: 10px;
       border-radius: 10px;
     }
     }
   }
   }

+ 1 - 1
src/views/ai/video/index/components/videoImage/index.vue

@@ -132,7 +132,7 @@ const handleGenerateVideo = async () => {
       platform: otherPlatform.value,
       platform: otherPlatform.value,
       modelId: modelId.value, // 模型
       modelId: modelId.value, // 模型
       prompt: prompt.value, // 提示词
       prompt: prompt.value, // 提示词
-      promptImage: promptImage.value, // 参考视频
+      promptImage: [promptImage.value], // 参考视频
       width: width.value, // 视频宽度
       width: width.value, // 视频宽度
       height: height.value, // 视频高度
       height: height.value, // 视频高度
       resolution: resolution.value, // 分辨率
       resolution: resolution.value, // 分辨率

+ 221 - 0
src/views/ai/video/index/components/videoImages/index.vue

@@ -0,0 +1,221 @@
+<!-- dall3 -->
+<template>
+  <div class="prompt">
+    <el-text tag="b">上传视频</el-text>
+    <el-text tag="p">建议使用“形容词 + 动词 + 风格”的格式,使用“,”隔开</el-text>
+    <UploadImgs v-model="promptImage"  :limit="4" />
+    <el-input
+      v-model="prompt"
+      maxlength="1024"
+      :rows="5"
+      class="w-100% mt-15px"
+      input-style="border-radius: 7px;"
+      placeholder="例如:童话里的小屋应该是什么样子?"
+      show-word-limit
+      type="textarea"
+    />
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">平台</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-select
+        v-model="otherPlatform"
+        placeholder="Select"
+        size="large"
+        class="!w-350px"
+        @change="handlerPlatformChange"
+      >
+        <el-option
+          v-for="item in AiVideoOtherPlatformEnum"
+          :key="item.key"
+          :label="item.name"
+          :value="item.key"
+        />
+      </el-select>
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">模型</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-select v-model="modelId" placeholder="Select" size="large" class="!w-350px">
+        <el-option
+          v-for="item in platformModels"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">视频尺寸</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-button type="primary">自动匹配</el-button>
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">分辨率</el-text>
+    </div>
+    <el-space wrap class="group-item-body">
+      <el-button type="primary" v-model="resolution">1080P</el-button>
+    </el-space>
+  </div>
+  <div class="group-item">
+    <div>
+      <el-text tag="b">视频时长</el-text>
+    </div>
+    <div class="duration">
+      <el-slider v-model="duration" show-input :min="3" :max="5" :step="1" />
+    </div>
+  </div>
+  <div class="btns">
+    <el-button
+      type="primary"
+      size="large"
+      round
+      :loading="drawIn"
+      :disabled="prompt.length === 0 && promptImage === ''"
+      @click="handleGenerateVideo"
+    >
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { VideoApi, VideoDrawReqVO, VideoVO } from '@/api/ai/video'
+import { AiPlatformEnum, AiVideoOtherPlatformEnum } from '@/views/ai/utils/constants'
+import { ModelApi, ModelVO } from '@/api/ai/model/model'
+import { AiModelTypeEnum } from '@/views/ai/utils/constants'
+
+const message = useMessage() // 消息弹窗
+
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<ModelVO>,
+    default: () => [] as ModelVO[]
+  }
+})
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']) // 定义 emits
+
+// 定义属性
+const drawIn = ref<boolean>(false) // 生成中
+// 表单
+const prompt = ref<string>('') // 提示词
+const promptImage = ref<string[]>([]) // 参考视频
+const width = ref<number>(1024) // 视频宽度
+const height = ref<number>(1024) // 视频高度
+const resolution = ref<string>('1080P') // 分辨率
+const duration = ref<number>(4) // 视频时长
+const otherPlatform = ref<string>(AiPlatformEnum.DOU_BAO) // 平台
+const platformModels = ref<ModelVO[]>([]) // 模型列表
+const modelId = ref<number>() // 选中的模型
+
+/** 视频生成 */
+const handleGenerateVideo = async () => {
+  // 二次确认
+  await message.confirm(`确认生成内容?`)
+  try {
+    // 加载中
+    drawIn.value = true
+    // 回调
+    emits('onDrawStart', otherPlatform.value)
+    // 发送请求
+    const form = {
+      platform: otherPlatform.value,
+      modelId: modelId.value, // 模型
+      prompt: prompt.value, // 提示词
+      promptImage: promptImage.value, // 参考视频
+      width: width.value, // 视频宽度
+      height: height.value, // 视频高度
+      resolution: resolution.value, // 分辨率
+      duration: duration.value, // 视频时长
+      options: {}
+    } as unknown as VideoDrawReqVO
+    await VideoApi.drawVideo(form)
+  } finally {
+    // 回调
+    emits('onDrawComplete', otherPlatform.value)
+    // 加载结束
+    drawIn.value = false
+  }
+}
+
+/** 填充值 */
+const settingValues = async (detail: VideoVO) => {
+  prompt.value = detail.prompt
+  width.value = detail.width
+  height.value = detail.height
+}
+
+/** 平台切换 */
+const handlerPlatformChange = async (platform: string) => {
+  platformModels.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.IMAGE_IMAGES)
+  // 根据选择的平台筛选模型
+  // platformModels.value = props.models.filter((item: ModelVO) => item.platform === platform)
+
+  // 切换平台,默认选择一个模型
+  if (platformModels.value.length > 0) {
+    modelId.value = platformModels.value[0].id // 使用 model 属性作为值
+  } else {
+    modelId.value = undefined
+  }
+}
+
+/** 监听 models 变化 */
+watch(
+  () => props.models,
+  () => {
+    handlerPlatformChange(otherPlatform.value)
+  },
+  { immediate: true, deep: true }
+)
+/** 暴露组件方法 */
+defineExpose({ settingValues })
+</script>
+<style scoped lang="scss">
+.hot-words {
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+
+  .word-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: start;
+    margin-top: 15px;
+
+    .btn {
+      margin: 0;
+    }
+  }
+}
+
+// 模型
+.group-item {
+  margin-top: 30px;
+
+  .group-item-body {
+    margin-top: 15px;
+    width: 100%;
+  }
+}
+
+.duration{
+  margin-left: 15px;
+}
+
+.btns {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+</style>

+ 11 - 0
src/views/ai/video/index/index.vue

@@ -18,6 +18,12 @@
           :models="models"
           :models="models"
           @on-draw-complete="handleDrawComplete"
           @on-draw-complete="handleDrawComplete"
         />
         />
+        <VideoImages
+          v-if="selectPlatform === 'videoImages'"
+          ref="VideoImagesRef"
+          :models="models"
+          @on-draw-complete="handleDrawComplete"
+        />
       </div>
       </div>
     </div>
     </div>
     <div class="main">
     <div class="main">
@@ -31,6 +37,7 @@ import VideoList from './components/VideoList.vue'
 import { VideoVO } from '@/api/ai/video'
 import { VideoVO } from '@/api/ai/video'
 import Common from './components/common/index.vue'
 import Common from './components/common/index.vue'
 import VideoImage from './components/videoImage/index.vue'
 import VideoImage from './components/videoImage/index.vue'
+import VideoImages from './components/videoImages/index.vue'
 import { ModelApi, ModelVO } from '@/api/ai/model/model'
 import { ModelApi, ModelVO } from '@/api/ai/model/model'
 import { AiModelTypeEnum } from '@/views/ai/utils/constants'
 import { AiModelTypeEnum } from '@/views/ai/utils/constants'
 
 
@@ -48,6 +55,10 @@ const platformOptions = [
     label: '图生视频',
     label: '图生视频',
     value: "videoImage"
     value: "videoImage"
   },
   },
+  {
+    label: '图生集视频',
+    value: "videoImages"
+  },
 ]
 ]
 
 
 const models = ref<ModelVO[]>([]) // 模型列表
 const models = ref<ModelVO[]>([]) // 模型列表