瀏覽代碼

预估时长及图片检测

dev
congzc 1 年之前
父節點
當前提交
efda9d4a4d
共有 5 個檔案被更改,包括 195 行新增102 行删除
  1. +2
    -2
      src/apis/myCreating.js
  2. +0
    -1
      src/utils/request.js
  3. +162
    -81
      src/views/createVideo/index.vue
  4. +30
    -18
      src/views/myCreating/index.vue
  5. +1
    -0
      src/views/myCreating/videoStatus.js

+ 2
- 2
src/apis/myCreating.js 查看文件

@@ -42,9 +42,9 @@ export function videoHyApi(id) {
* @params id
* @returns data
*/
export function checkVideoStatusApi(time) {
export function checkVideoStatusApi(list) {
return request({
url: `/api/userPhotoVideo/checkVideoStatus?time${time}`,
url: `/api/userPhotoVideo/checkVideoStatus?list=${list}`,
method: 'get'
})
}

+ 0
- 1
src/utils/request.js 查看文件

@@ -42,7 +42,6 @@ request.interceptors.request.use(
// 响应拦截器
request.interceptors.response.use(
function (response) {

if (!response.data) {
// ElMessage.error($t('tips.systemException'));
ElMessage.error(


+ 162
- 81
src/views/createVideo/index.vue 查看文件

@@ -6,9 +6,9 @@
<!-- 选中AiFace -->
<div class="left-top" v-show="showUploadBtn == 1">
<el-row class="justify-between">
<!-- title框 -->
<!-- title框 v-show="!submitImgBtn"-->
<div
v-show="!submitImgBtn"
v-show="showUploadBtn == 1"
class="flex justify-between"
style="width: 300px"
>
@@ -79,36 +79,6 @@
:isLoading="compressionImgLoad"
:tips="imgUploadTips"
></my-loading>
<div v-if="!compressionImgLoad" class="trueImg inmiddle">
<div class="imgBox">
<img src="../../assets/img/trueImg.png" alt="" />
</div>
<div class="icon">✔</div>
</div>
<div v-if="!compressionImgLoad" class="upload inmiddle">
+
<input accept="image/*" type="file" @change="lookImg" />
</div>
<div v-if="!compressionImgLoad" class="falseImg inmiddle">
<div>
<div class="imgBox">
<img src="../../assets/img/false1.png" alt="" />
</div>
<div class="icon">×</div>
</div>
<div>
<div class="imgBox">
<img src="../../assets/img/false2.png" alt="" />
</div>
<div class="icon">×</div>
</div>
<div>
<div class="imgBox">
<img src="../../assets/img/false3.png" alt="" />
</div>
<div class="icon">×</div>
</div>
</div>
</div>
</div>
<!-- 选中需要上传的图片后 -->
@@ -268,7 +238,7 @@
:placeholder="$t('createVideo.aiText')"
/>
<div class="sundriesBox">
<span class="pointer" @click="getPreviewAudio">
<span v-if="false" class="pointer" @click="getPreviewAudio">
<el-tooltip
class="box-item"
effect="dark"
@@ -280,7 +250,7 @@
>
<my-Loading-Icon
class="previewAudioLoadingBox"
v-if="previewAudioLoading"
v-if="false"
></my-Loading-Icon>
<span class="pointer" @click="insertIcon">
<el-tooltip
@@ -344,12 +314,13 @@
`&nbsp; (${
item.sex == 1
? lanChange == 'zh-cn'
? `男 `
? `男`
: `male`
: lanChange == 'zh-cn'
? `女`
: `female`
})`
})` +
returnAge(item.ageType)
"
:value="item.id"
/>
@@ -364,10 +335,29 @@
>
<el-option
v-for="item in soundStyleOptions"
:key="item"
:label="item"
:value="item"
/>
:key="item.name"
:label="item.name"
:value="item.name"
>
<div style="padding: 0 20px">
{{ item.name }}
<span
style="float: right; cursor: pointer"
@click="ListenVoices(item.url)"
>🔊</span
>
</div>
<!-- <span class="pointer" @click="getPreviewAudio">
<el-tooltip
v-if="false"
class="box-item"
effect="dark"
:content="$t('createVideo.tooltip1')"
placement="top"
>
</el-tooltip></span > -->
</el-option>
</el-select>
<!-- 保存视频 -->
<el-button
@@ -534,7 +524,7 @@
<!-- 系统音乐列表展示 -->
<div v-if="musicTabActive == 1" class="musicList">
<div
@click="chooseMusicUrl(item.url, item.id)"
@click="chooseMusicUrl(item)"
class="musicItem"
:class="musicItemAction == item.id ? 'musicItemAvtive' : ''"
v-for="item in musicListSystem"
@@ -547,7 +537,7 @@
<!-- 个人音乐列表展示 -->
<div v-if="musicTabActive == 2" class="musicList">
<div
@click="chooseMusicUrl(item.url, item.id)"
@click="chooseMusicUrl(item)"
class="musicItem"
:class="musicItemAction == item.id ? 'musicItemAvtive' : ''"
v-for="item in musicListPerson"
@@ -799,10 +789,10 @@ function ChangeShowFaceList(index) {
const faceItemActive = ref(); //高亮处理和当前选择图片的ID
// 点击aifece
function setImgUrl(url, id) {
faceItemActive.value = id;
imgUrl.value = url;
showUploadBtn.value = 1;
submitImgBtn.value = false;
faceItemActive.value = id; //高亮
imgUrl.value = url; //回显地址
showUploadBtn.value = 1; //
// submitImgBtn.value = false;
}
// 删除个人相册照片
async function deleteFaceImg(id) {
@@ -843,7 +833,7 @@ async function lookImg(e) {
imgUrl.value = null;
imgData.value = null;
showUploadBtn.value = 3;
submitImgBtn.value = false;
// submitImgBtn.value = false;
compressionImgLoad.value = true;
// 压缩配置
const options = {
@@ -851,9 +841,7 @@ async function lookImg(e) {
useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能
};
imgUploadTips.value = "compress";

const compressedFile = await imageCompression(e.target.files[0], options);

imgUploadTips.value = "sensitiveness";
try {
const res = await baiduPhotoApi(compressedFile);
@@ -869,15 +857,12 @@ async function lookImg(e) {
imgUrl.value = URL.createObjectURL(compressedFile);
imgData.value = compressedFile;
showUploadBtn.value = 4;
submitImgBtn.value = true;
// submitImgBtn.value = true;
compressionImgLoad.value = false;
await changeFile();
} catch (error) {
ElMessage.error(
lanChange.value == "zh-cn"
? `图片不符合规范,上传失败`
: `Image does not meet the specifications, upload failed`
);
console.log(error, "上传图片的error");
ElMessage.error(error.message);
showFace.value = 1;
showUploadBtn.value = 2;
compressionImgLoad.value = false;
@@ -909,7 +894,7 @@ const title =
const imgUrl = ref(""); //图片回显路径
const imgData = ref(""); // 上传图片文件
const showUploadBtn = ref(1); //上传图片+号的显示隐藏
const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏
// const submitImgBtn = ref(false); //右上角俩按钮显示与隐藏
// 点击系统仓库tab
function chooSystemImg(params) {
showFace.value = 0;
@@ -948,7 +933,7 @@ async function changeFile() {
overLoadUser.value = false;
faceItemActive.value = res2.data.id;
imgUrl.value = res2.data.material;
submitImgBtn.value = false;
// submitImgBtn.value = false;
showUploadBtn.value = 1;
imgUploadTips.value = null;
} catch (error) {
@@ -971,12 +956,13 @@ function chooseMyImg() {
}
// 点击AI头像区的+号
function clickAddBtn() {
// if (!imgUploadTips.value) {
// showUploadBtn.value = 3;
// submitImgBtn.value = false;
// compressionImgLoad.value = true;
// return;
// }
// 如果imgUploadTips有值,则
if (imgUploadTips.value) {
showUploadBtn.value = 3;
submitImgBtn.value = false;
compressionImgLoad.value = true;
return;
}
showUploadBtn.value = 2;
faceItemActive.value = null;
}
@@ -1044,11 +1030,43 @@ async function chooseType() {
const soundStyleOptions = ref(null);
async function chooseStyle() {
const item = soundOptions.value.find((element) => element.id == sound.value);

soundStyle.value = null;
soundStyleOptions.value = item.style;
}

// 根据ageType返回年龄
function returnAge(ageType) {
if (ageType == 1) {
if (lanChange.value == "zh-cn") {
return " 儿童";
} else {
return "Child";
}
} else if (ageType == 2) {
if (lanChange.value == "zh-cn") {
return " 少年";
} else {
return "Teen";
}
} else if (ageType == 3) {
if (lanChange.value == "zh-cn") {
return " 年轻";
} else {
return "YoungAdult";
}
} else if (ageType == 4) {
if (lanChange.value == "zh-cn") {
return " 中年";
} else {
return "OlderAdult";
}
} else if (ageType == 5) {
if (lanChange.value == "zh-cn") {
return " 老年";
} else {
return "Senior";
}
}
}
// 试听
const previewAudioUrl = ref(null);
const previewAudioLoading = ref(false);
@@ -1089,8 +1107,7 @@ async function getPreviewAudio() {
return;
}
previewAudioUrl.value = res.data.data;
// previewAudioUrl.value =
// "/suimang/static/tts/2023-07-04/16884538755531874.wav";

let audioA = document.getElementById("audio");
audioA.addEventListener("loadedmetadata", async () => {
audioA.muted = false; // 将 muted 属性设置为 false
@@ -1108,6 +1125,18 @@ async function getPreviewAudio() {
return;
}
}
// 新的试听
function ListenVoices(url) {
previewAudioUrl.value = url;
// previewAudioUrl.value =
// "/suimang/static/tts/2023-07-04/16884538755531874.wav";
let audioA = document.getElementById("audio");
audioA.addEventListener("loadedmetadata", async () => {
audioA.muted = false; // 将 muted 属性设置为 false
await audioA.play();
previewAudioLoading.value = false;
});
}
//#endregion

//#region card2的逻辑
@@ -1287,6 +1316,13 @@ async function uploadProgress(videoId, isSaveVideo) {
router.push("/myCreating");
return;
}
ElMessage.success(
lanChange.value == "zh-cn"
? `预计生成的视频时长约为${formatTime(uploadAudioTime.value)}`
: `The video generated is expected to be approximately${formatTime(
uploadAudioTime.value
)} in length`
);
const res4 = await createVideoApi({ id: res3.data.id }); // 生成视频
if (res4.message == "success") {
ElMessage.success(
@@ -1313,6 +1349,7 @@ const createLoading = ref(false);
// 保存数据
async function saveOrUpdate(index, isSaveVideo) {
if (createLoading.value == true) {
ElMessage.error(lanChange.value == "zh-cn" ? `正在生成` : `Be generating`);
return;
}
tabFrom.value = index; // 判断是哪一个tab栏内的生成视频按钮
@@ -1363,16 +1400,32 @@ async function saveOrUpdate(index, isSaveVideo) {
router.push("/myCreating");
return;
}
const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频
if (res3.message == "success") {
ElMessage.success(
lanChange.value == "zh-cn"
? `视频正在生成中,请耐心等待`
: `The video is being generated, please wait patiently`
);
}
createLoading.value = false;
router.push("/myCreating");
// 获取预估时长
const res4 = await previewAudioApi(
textareaContent.value,
sound.value,
soundStyle.value
);
ElMessage.success(
lanChange.value == "zh-cn"
? `预计生成的视频时长约为${formatTime(res4.data.data)}`
: `The video generated is expected to be approximately${formatTime(
res4.data.data
)} in length`
);
// 3秒后调用生成视频
const changeHasNewCreate = setTimeout(async () => {
const res3 = await createVideoApi({ id: res2.data.id }); // 生成视频
if (res3.message == "success") {
ElMessage.success(
lanChange.value == "zh-cn"
? `视频正在生成中,请耐心等待`
: `The video is being generated, please wait patiently`
);
}
createLoading.value = false;
router.push("/myCreating");
}, 3000);
} catch (error) {
// ElMessage.error($t(error.message));
ElMessage.error(error);
@@ -1404,6 +1457,7 @@ async function saveOrUpdate(index, isSaveVideo) {
}
}
if (index == 3) {
createLoading.value = true;
try {
if (!saveOrUpdateData.personPhotoId) {
ElMessage.error(
@@ -1433,6 +1487,13 @@ async function saveOrUpdate(index, isSaveVideo) {
return;
}
console.log("ceshi");
ElMessage.success(
lanChange.value == "zh-cn"
? `预计生成的视频时长约为${formatTime(estimatedDuration.value)}`
: `The video generated is expected to be approximately${formatTime(
estimatedDuration.value
)} in length`
);
const res2 = await createVideoApi({ id: res1.data.id }); // 生成视频
if (res2.message == "success") {
ElMessage.success(
@@ -1444,11 +1505,27 @@ async function saveOrUpdate(index, isSaveVideo) {
createLoading.value = false;
router.push("/myCreating");
} catch (error) {
ElMessage.error(error);
if (error) {
ElMessage.error(error);
} else {
ElMessage.error(
lanChange.value == "zh-cn"
? `生成失败,请稍后重试`
: `Failed to generate, please try again later`
);
}
createLoading.value = false;
}
}
}
// 预估时长时把秒转为分
function formatTime(seconds) {
const minutes = Math.floor(Math.floor(seconds) / 60);
const remainingSeconds = Math.floor(seconds) % 60;
const formattedMinutes = String(minutes).padStart(2, "0");
const formattedSeconds = String(remainingSeconds).padStart(2, "0");
return `${formattedMinutes}:${formattedSeconds}`;
}
//#endregion ----------------------------

//#region 根据作品id查询作品信息并回显
@@ -1491,6 +1568,7 @@ const musicListPageSize = ref(8); //
const musicTabActive = ref(1); //热门歌曲和个人仓库高亮
const musicData = ref(null); //上传歌曲的数据
const fileMusicInput = ref(null); // 上传组件的dom
const estimatedDuration = ref(""); // card3的生成视频预估时长
// tab切换
function musicTabActiveChange(index) {
if (index == 2) {
@@ -1532,9 +1610,10 @@ const musicListPageNumPersonChange = (val) => {
getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value);
};
// 点击选择音乐
function chooseMusicUrl(url, id) {
audioMusicUrl.value = url;
musicItemAction.value = id;
function chooseMusicUrl(item) {
audioMusicUrl.value = item.url;
musicItemAction.value = item.id;
estimatedDuration.value = item.time;
}
// 转化秒为分秒
function handleTime(time) {
@@ -1789,11 +1868,13 @@ onMounted(async () => {
});
//#endregion ----------------------------

//#region 页面销毁
onUnmounted(() => {
if (mySocket) {
mySocket.close();
}
});
//#endregion ----------------------
</script>

<style lang="scss" scoped>


+ 30
- 18
src/views/myCreating/index.vue 查看文件

@@ -131,12 +131,14 @@
>
<div class="videoBox">
<!-- 免费用户1分钟 -->
<div v-if="true" class="overtimeTips">
<div v-if="[5].includes(presentItem.videoStatus)" class="overtimeTips">
<img src="../../assets/img/tips.png" alt="" />
{{ $t("myCreating.freeUserTip") }}
</div>
<video
v-if="presentItem.videoPlayUrl"
v-if="
presentItem.videoPlayUrl && [5].includes(presentItem.videoStatus)
"
controls="true"
class=""
:src="presentItem.videoPlayUrl"
@@ -243,6 +245,7 @@
</template>

<script setup>
//#region 导入
import {
userPhotoVideoListApi,
delUserPhotoVideoByIDApi,
@@ -254,6 +257,7 @@ import { useI18n } from "vue-i18n";
import { getStatus } from "./videoStatus";
import { useRouter } from "vue-router";
import dayjs from "dayjs";
//#endregion ----------------------
const router = useRouter();
// 当前语言状态与国际化组件
const { locale } = useI18n();
@@ -360,6 +364,7 @@ function upGrades(id) {
? `升级成功!请稍等~`
: `Upgrade successful! Please wait a moment`
);
showDialog.value = false;
upGradesLoading.value = false;
getPhotoVideoList(pageNum.value, pageSize.value, title.value);
} catch (error) {
@@ -381,6 +386,13 @@ function getPhotoVideoList(pageNum, pageSize, title, searchFlag) {
userPhotoVideoListApi(pageNum, pageSize, title)
.then((res) => {
console.log(res, "res");
notGenerateList.value = [];
// 找到数组中未生成的,放入列表,为了刷新
res.data.list.forEach((item) => {
if ([1, 2, 4, 6].includes(item.videoStatus)) {
notGenerateList.value.push(item.id);
}
});
res.data.list.forEach((item) => {
// item.createDate = timestampToTime(item.createDate) || "";
// item.updateDate = timestampToTime(item.updateDate) || "";
@@ -435,32 +447,32 @@ function delPhotoVideo(videoID) {
}
//#region 定时刷新
const hasNewCreate = ref(false); //提示框显示隐藏
const nowTime = Date.now();
const notGenerateList = ref([]); //页面上未生成的视频的id
const checkVideoStatus = async () => {
console.log(nowTime);
// const res = await checkVideoStatusApi();
// if (res.code == 2115) {
// hasNewCreate.value = true;
// const changeHasNewCreate = setTimeout(() => {
// hasNewCreate.value = false;
// }, 5000);
// getPhotoVideoList(1, 10, "");
// }
};
const startLogin = () => {
// 每隔 3 秒执行一次登录请求
const intervalId = setInterval(checkVideoStatus, 3000);
// 在组件销毁前清除定时器
const intervalId = setInterval(async () => {
try {
const res = await checkVideoStatusApi(notGenerateList.value);
if (res.code != 2115) {
hasNewCreate.value = true;
const changeHasNewCreate = setTimeout(() => {
hasNewCreate.value = false;
}, 5000);
getPhotoVideoList(pageNum.value, pageSize.value, title.value);
}
} catch (error) {}
}, 3000);
onUnmounted(() => {
clearInterval(intervalId);
});
};

//#endregion ---------------------------
//#region 页面初始化
onMounted(() => {
isLoading.value = true;
getPhotoVideoList(pageNum.value, pageSize.value, title.value);
// startLogin();

checkVideoStatus();
});
//#endregion ---------------------------
</script>


+ 1
- 0
src/views/myCreating/videoStatus.js 查看文件

@@ -3,6 +3,7 @@
* @param {number} status
* @return: statusName
*/
// 0草稿 1246生成中 3失败 5成功
export const getStatus = status => {
if (status == 0) {
return "manuscript"


Loading…
取消
儲存