|
@@ -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>
|