|
|
|
|
@ -0,0 +1,286 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-containere">
|
|
|
|
|
<div class="material">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/caseIcon.png" alt="" />
|
|
|
|
|
<span>任务素材</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<p>
|
|
|
|
|
根据文字描述提示，利用推荐的三个AI工具，生成对应的视频。
|
|
|
|
|
<br />
|
|
|
|
|
1、旅行视频：想象你刚从一次热带岛屿旅行回来，你希望将你的照片和视频片段制作成一个吸引人的旅行视频。你希望视频中包含海滩日落、当地市场、美食和你参与的水上活动的画面。
|
|
|
|
|
<br />
|
|
|
|
|
2、产品介绍视频：你是一家初创公司的市场经理，需要制作一个简短的产品介绍视频来展示你的新科技产品。你希望视频突出产品的特点、使用场景和用户反馈。
|
|
|
|
|
<br />
|
|
|
|
|
3、教育解说视频：采用数字人技术，创建一个教育解说视频，以生动有趣的方式解释科学概念。
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="material">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
|
|
<span>任务提交</span>
|
|
|
|
|
<span style="font-size: 13px">(请按照任务素材顺序依次提交)</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 10px; width: 200px">
|
|
|
|
|
<el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile1" :auto-upload="false" :on-change="handleChange1" :show-file-list="true" :limit="1">
|
|
|
|
|
<el-button type="primary" class="uploadBtn">+任务提交1</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 10px; width: 200px">
|
|
|
|
|
<el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile2" :auto-upload="false" :on-change="handleChange2" :show-file-list="true" :limit="1">
|
|
|
|
|
<el-button type="primary" class="uploadBtn">+任务提交2</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 10px; width: 200px">
|
|
|
|
|
<el-upload ref="uploadRef" class="upload-demo" :file-list="previewFile3" :auto-upload="false" :on-change="handleChange3" :show-file-list="true" :limit="1">
|
|
|
|
|
<el-button type="primary" class="uploadBtn">+任务提交3</el-button>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="material" style="margin-top: 20px">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<img src="@/assets/icons/svg/sxbg.svg" style="width: 30px; height: 30px" />
|
|
|
|
|
<span>大模型参考工具</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<div class="case">
|
|
|
|
|
<div class="bgItem">
|
|
|
|
|
<img src="@/assets/images/aiVideo1.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail">
|
|
|
|
|
<div class="title">即梦Dreamina</div>
|
|
|
|
|
<el-tooltip popper-class="tooltip" effect="light" content="即梦Dreamina是由字节跳动旗下的剪映推出的AI创作平台，它支持中文生成视频。这个平台的主要功能包括AI图片创作和视频生成，用户可以通过输入文案快速生成创意图像或视频，非常适合用于社交媒体平台的内容创作。" placement="top-start">
|
|
|
|
|
<div style="line-height: 24px; font-size: 13px">即梦Dreamina是由字节跳动旗下的剪映推出的AI创作平台，它支持中文生成视频。这个平台的主要功能包括AI图片创作和视频生成，用户可以通过输入文案快速生成创意图像或视频，非常适合用于社交媒体平台的...</div>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<a class="btn" href="https://jimeng.jianying.com/ai-tool/home" target="_blank">
|
|
|
|
|
<span>访问官网</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="case">
|
|
|
|
|
<div class="bgItem">
|
|
|
|
|
<img src="@/assets/images/aiVideo2.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail">
|
|
|
|
|
<div class="title">万兴播爆</div>
|
|
|
|
|
<el-tooltip popper-class="tooltip" effect="light" content="万兴播爆是A股上市公司万兴科技旗下的AIGC产品,为您提供AI数字人定制服务，只需简单输入关键词，即可轻松生成真人营销视频。万兴播爆拥有上百套专业级模板，涵盖各种场景视频需求，是出海视频营销的一站式神器。" placement="top-start">
|
|
|
|
|
<div style="line-height: 24px; font-size: 13px">万兴播爆是A股上市公司万兴科技旗下的AIGC产品,为您提供AI数字人定制服务，只需简单输入关键词，即可轻松生成真人营销视频。万兴播爆拥有上百套专业级模板，涵盖各种场景视频需求，是出海视频营销的...</div>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<a class="btn" href="https://virbo.wondershare.cn/?ref=pidoutv.com" target="_blank">
|
|
|
|
|
<span>访问官网</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="case">
|
|
|
|
|
<div class="bgItem">
|
|
|
|
|
<img src="@/assets/images/aiVideo3.png" alt="" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="detail">
|
|
|
|
|
<!-- <div class="icon">
|
|
|
|
|
<div class="iconItem">AI工具</div>
|
|
|
|
|
<span>＞</span>
|
|
|
|
|
<div class="iconItem">AI写作对话</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="title">万彩AI</div>
|
|
|
|
|
<el-tooltip popper-class="tooltip" effect="light" content="万彩AI是一款强大的AI内容创作工具合集，除了提供AI智能写作支持之外，还集成了AI换脸、照片数字人制作和AI短视频制作等强大的AI生成内容功能。无需下载安装软件，可以直接在线创作，电脑网页和手机都可以使用。" placement="top-start">
|
|
|
|
|
<div style="line-height: 24px; font-size: 13px">万彩AI是一款强大的AI内容创作工具合集，除了提供AI智能写作支持之外，还集成了AI换脸、照片数字人制作和AI短视频制作等强大的AI生成内容功能。无需下载安装软件，可以直接在线创作，电脑网页和手机...</div>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<a class="btn" href="https://ai.kezhan365.com/" target="_blank">
|
|
|
|
|
<span>访问官网</span>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup>
|
|
|
|
|
import popModal from "@/views/components/popModal.vue";
|
|
|
|
|
import { getUserInfo } from "@/utils/auth";
|
|
|
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
|
|
|
import { uploadFile } from "@/api/portraitModel";
|
|
|
|
|
import { downBlobFile } from "@/utils/index.js";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
|
|
|
|
const previewFile1 = ref([]);
|
|
|
|
|
const previewFile2 = ref([]);
|
|
|
|
|
const previewFile3 = ref([]);
|
|
|
|
|
const fileList1 = ref([]);
|
|
|
|
|
const fileList2 = ref([]);
|
|
|
|
|
const fileList3 = ref([]);
|
|
|
|
|
const handleChange1 = async (info) => {
|
|
|
|
|
fileList1.value = [];
|
|
|
|
|
fileList1.value.push(info);
|
|
|
|
|
let formData = new FormData();
|
|
|
|
|
formData.append("file", fileList1.value[0].raw);
|
|
|
|
|
formData.append("userId", JSON.parse(getUserInfo()).userId);
|
|
|
|
|
formData.append("module", "AI视频");
|
|
|
|
|
formData.append("count", 1);
|
|
|
|
|
try {
|
|
|
|
|
previewFile1.value = [];
|
|
|
|
|
const res = await uploadFile(formData);
|
|
|
|
|
// registerParams.value.imgAddress = res.data;
|
|
|
|
|
proxy.$modal.msgSuccess("上传成功！");
|
|
|
|
|
previewFile1.value.push({
|
|
|
|
|
name: fileList1.value[0].raw.name,
|
|
|
|
|
});
|
|
|
|
|
// getMessage();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
// console.log(e);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const handleChange2 = async (info) => {
|
|
|
|
|
fileList2.value = [];
|
|
|
|
|
fileList2.value.push(info);
|
|
|
|
|
let formData = new FormData();
|
|
|
|
|
formData.append("file", fileList2.value[0].raw);
|
|
|
|
|
formData.append("userId", JSON.parse(getUserInfo()).userId);
|
|
|
|
|
formData.append("module", "AI视频");
|
|
|
|
|
formData.append("count", 2);
|
|
|
|
|
try {
|
|
|
|
|
previewFile2.value = [];
|
|
|
|
|
const res = await uploadFile(formData);
|
|
|
|
|
// registerParams.value.imgAddress = res.data;
|
|
|
|
|
proxy.$modal.msgSuccess("上传成功！");
|
|
|
|
|
previewFile2.value.push({
|
|
|
|
|
name: fileList2.value[0].raw.name,
|
|
|
|
|
});
|
|
|
|
|
// getMessage();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
// console.log(e);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
const handleChange3 = async (info) => {
|
|
|
|
|
fileList3.value = [];
|
|
|
|
|
fileList3.value.push(info);
|
|
|
|
|
let formData = new FormData();
|
|
|
|
|
formData.append("file", fileList3.value[0].raw);
|
|
|
|
|
formData.append("userId", JSON.parse(getUserInfo()).userId);
|
|
|
|
|
formData.append("module", "AI视频");
|
|
|
|
|
formData.append("count", 3);
|
|
|
|
|
try {
|
|
|
|
|
previewFile3.value = [];
|
|
|
|
|
const res = await uploadFile(formData);
|
|
|
|
|
// registerParams.value.imgAddress = res.data;
|
|
|
|
|
proxy.$modal.msgSuccess("上传成功！");
|
|
|
|
|
previewFile3.value.push({
|
|
|
|
|
name: fileList3.value[0].raw.name,
|
|
|
|
|
});
|
|
|
|
|
// getMessage();
|
|
|
|
|
} catch (e) {
|
|
|
|
|
// console.log(e);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.app-containere {
|
|
|
|
|
margin: 10px 4px 10px 10px;
|
|
|
|
|
border: 1px solid #0452c6;
|
|
|
|
|
// background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
background: rgba(0, 29, 64, 0.5);
|
|
|
|
|
padding: 25px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
.material {
|
|
|
|
|
.title {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
span {
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
p {
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
}
|
|
|
|
|
.case {
|
|
|
|
|
margin-right: 18px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
padding-bottom: 20px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
// width: calc(100% - 100px);
|
|
|
|
|
width: 500px;
|
|
|
|
|
// background: #fff;
|
|
|
|
|
// background: #002c5b;
|
|
|
|
|
background: #011031;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
border: 1px solid #003e7c;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.bgItem {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
img {
|
|
|
|
|
// 186px
|
|
|
|
|
width: 258px;
|
|
|
|
|
height: 134px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
scale: 0.8;
|
|
|
|
|
}
|
|
|
|
|
// background-color: #e6e8ed;
|
|
|
|
|
background-color: #002c5b;
|
|
|
|
|
width: 240px;
|
|
|
|
|
height: 170px;
|
|
|
|
|
// padding: 20px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.15);
|
|
|
|
|
}
|
|
|
|
|
.detail {
|
|
|
|
|
width: 300px;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
.icon {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
span {
|
|
|
|
|
color: #f1404b;
|
|
|
|
|
}
|
|
|
|
|
.iconItem {
|
|
|
|
|
background-color: #f1404b;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
padding: 2px;
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
padding-left: 4px;
|
|
|
|
|
padding-right: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
// font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
.btn {
|
|
|
|
|
display: block;
|
|
|
|
|
background-color: #e7e6e8;
|
|
|
|
|
color: #333;
|
|
|
|
|
width: 110px;
|
|
|
|
|
height: 40px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 40px;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.btn:hover {
|
|
|
|
|
background-color: #409eff;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<style>
|
|
|
|
|
.tooltip {
|
|
|
|
|
max-width: 260px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
HeHaonan
2 years ago
