|
|
@@ -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 @@ |
|
|
|
` (${ |
|
|
|
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> |
|
|
|