|
|
@@ -483,6 +483,12 @@ |
|
|
|
> |
|
|
|
<span class="musicNmae"> 🎵{{ item.name }}</span> |
|
|
|
<span class="musicTime"> {{ handleTime(item.time) }}</span> |
|
|
|
<span |
|
|
|
v-if="musicItemAction == item.id" |
|
|
|
class="delMusic" |
|
|
|
@click="deleteMusic(item.id)" |
|
|
|
><el-icon><i-ep-Delete /></el-icon> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 系统分页 --> |
|
|
@@ -542,104 +548,40 @@ |
|
|
|
<!-- ----------------------- 4 --> |
|
|
|
<el-tab-pane v-if="AccessToken" :label="$t('createVideo.aiScript')"> |
|
|
|
<div class="card4"> |
|
|
|
<!-- 语言 --> |
|
|
|
<div class="text"> |
|
|
|
<!-- 文本域 --> |
|
|
|
<el-input |
|
|
|
maxlength="3000" |
|
|
|
maxlength="300" |
|
|
|
id="textInputId" |
|
|
|
v-model="textareaContent" |
|
|
|
:rows="15" |
|
|
|
v-model="problemContent" |
|
|
|
:rows="5" |
|
|
|
type="textarea" |
|
|
|
:placeholder="$t('createVideo.aiText')" |
|
|
|
:placeholder="$t('createVideo.inputRequirement')" |
|
|
|
/> |
|
|
|
<span |
|
|
|
class="pointer" |
|
|
|
@click="getPreviewAudio" |
|
|
|
style="margin-right: 10px; font-size: 20px" |
|
|
|
>🔊</span |
|
|
|
> |
|
|
|
<span class="pointer" @click="insertIcon">🕗</span> |
|
|
|
</div> |
|
|
|
<p>{{ $t("createVideo.languages") }}</p> |
|
|
|
<div class="card4Btn" @click="sendRequirement"> |
|
|
|
<my-Loading-Icon v-if="sendLoading"></my-Loading-Icon> |
|
|
|
<span v-if="!sendLoading"> |
|
|
|
{{ $t("createVideo.GeneratedText") }} |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
|
|
|
|
<p>{{ $t("createVideo.SmartText") }}</p> |
|
|
|
<!-- 语言 --> |
|
|
|
<el-select |
|
|
|
@change="chooseType" |
|
|
|
v-model="language" |
|
|
|
:placeholder="$t('createVideo.select')" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in languageOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.name" |
|
|
|
:value="item.id" |
|
|
|
> |
|
|
|
<img |
|
|
|
:src="item.img" |
|
|
|
alt="" |
|
|
|
style=" |
|
|
|
width: 20px; |
|
|
|
margin-right: 10px; |
|
|
|
vertical-align: text-top; |
|
|
|
" |
|
|
|
/> |
|
|
|
<span style="line-height: 20px">{{ item.name }}</span> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<p>{{ $t("createVideo.voices") }}</p> |
|
|
|
<!-- 声音 --> |
|
|
|
<el-select |
|
|
|
@change="chooseStyle" |
|
|
|
:disabled="language ? false : true" |
|
|
|
v-model="sound" |
|
|
|
:placeholder="$t('createVideo.select')" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in soundOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.displayName" |
|
|
|
:value="item.id" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
<p>{{ $t("createVideo.styles") }}</p> |
|
|
|
<!-- 风格 --> |
|
|
|
<el-select |
|
|
|
:disabled="soundStyleOptions ? false : true" |
|
|
|
v-model="soundStyle" |
|
|
|
:placeholder="$t('createVideo.select')" |
|
|
|
style="width: 100%" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in soundStyleOptions" |
|
|
|
:key="item" |
|
|
|
:label="item" |
|
|
|
:value="item" |
|
|
|
<div class="text"> |
|
|
|
<!-- 文本域 --> |
|
|
|
<el-input |
|
|
|
id="textInputId" |
|
|
|
v-model="answerContent" |
|
|
|
:rows="15" |
|
|
|
type="textarea" |
|
|
|
disabled="" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
<!-- 保存视频 --> |
|
|
|
<el-button |
|
|
|
@click="saveOrUpdate(1, 'saveVideo')" |
|
|
|
color="#000" |
|
|
|
type="primary" |
|
|
|
> |
|
|
|
<my-loading :isLoading="createLoading"></my-loading> |
|
|
|
<span v-if="!createLoading">{{ |
|
|
|
$t("createVideo.saveVideo") |
|
|
|
}}</span></el-button |
|
|
|
> |
|
|
|
<!-- 生成视频 --> |
|
|
|
<el-button |
|
|
|
style="margin-left: 0" |
|
|
|
@click="saveOrUpdate(1)" |
|
|
|
color="#000" |
|
|
|
type="primary" |
|
|
|
> |
|
|
|
<my-loading :isLoading="createLoading"></my-loading> |
|
|
|
<span v-if="!createLoading">{{ |
|
|
|
$t("createVideo.generateVideo") |
|
|
|
}}</span></el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="card4Btn" @click="copyAnswerContent"> |
|
|
|
{{ $t("createVideo.copy") }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
<!-- -------------------------脚标 --> |
|
|
@@ -653,6 +595,7 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
//#region 导入 |
|
|
|
import { getCurrentInstance } from "vue"; |
|
|
|
import { |
|
|
|
personPhotoList, |
|
|
@@ -672,11 +615,15 @@ import { |
|
|
|
musicListSystemApi, |
|
|
|
musicListPersonApi, |
|
|
|
saveMusicApi, |
|
|
|
delMusicApi, |
|
|
|
} from "@/apis/createVideo"; |
|
|
|
import { useI18n } from "vue-i18n"; |
|
|
|
import Recorder from "js-audio-recorder"; //mp3插件 |
|
|
|
import imageCompression from "browser-image-compression"; //压缩图片插件 |
|
|
|
import { useRoute, useRouter } from "vue-router"; |
|
|
|
|
|
|
|
//#endregion --------------------------------- |
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
|
const router = useRouter(); |
|
|
|
const { locale } = useI18n(); |
|
|
@@ -784,7 +731,9 @@ async function deleteFaceImg(id) { |
|
|
|
pageNumUser.value = 1; |
|
|
|
overLoadUser.value = false; |
|
|
|
} catch (error) { |
|
|
|
ElMessage.error(errpr); |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" ? `删除失败!` : `Deletion failure` |
|
|
|
); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
@@ -1218,7 +1167,7 @@ async function saveOrUpdate(index, isSaveVideo) { |
|
|
|
createLoading.value = false; |
|
|
|
return; |
|
|
|
} |
|
|
|
if (!saveOrUpdateData.voiceMaterialId) { |
|
|
|
if (!audioData.value) { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `请选择音频文件` |
|
|
@@ -1311,9 +1260,9 @@ const musicListPerson = ref(null); //展示音乐列表 |
|
|
|
const audioMusicUrl = ref(null); //选中音乐Url回显 |
|
|
|
const musicItemAction = ref(null); //选中高亮 |
|
|
|
const musicListPageNumSystem = ref(1); //系统音乐页数 |
|
|
|
const musicListTotalSystem = ref(10); //系统音乐总条数 |
|
|
|
const musicListTotalSystem = ref(null); //系统音乐总条数 |
|
|
|
const musicListPageNumPerson = ref(1); //个人音乐页数 |
|
|
|
const musicListTotalPerson = ref(10); //个人音乐总条数 |
|
|
|
const musicListTotalPerson = ref(null); //个人音乐总条数 |
|
|
|
const musicListPageSize = ref(8); // |
|
|
|
const musicTabActive = ref(1); //热门歌曲和个人仓库高亮 |
|
|
|
const musicData = ref(null); //上传歌曲的数据 |
|
|
@@ -1366,7 +1315,6 @@ function handleTime(time) { |
|
|
|
async function uploadMusic() { |
|
|
|
const file = fileMusicInput.value.files[0]; |
|
|
|
if (file) { |
|
|
|
const videoUrl = URL.createObjectURL(file); |
|
|
|
musicData.value = file; |
|
|
|
let formData = new FormData(); |
|
|
|
formData.append("file", musicData.value, file.name + ".mp3"); |
|
|
@@ -1390,37 +1338,127 @@ async function uploadMusic() { |
|
|
|
try { |
|
|
|
const res3 = await saveMusicApi({ voiceId: res.data.videoId }); |
|
|
|
afterSaveAudioId.value = res2.data.id; // 得到id |
|
|
|
musicListPageNumPerson.value = 1; |
|
|
|
const res4 = await musicListPersonApi( |
|
|
|
musicListPageNumPerson.value, |
|
|
|
musicListPageSize.value |
|
|
|
); |
|
|
|
musicListPerson.value = res4.data.list; |
|
|
|
musicListTotalPerson.value = Number(res4.data.total); |
|
|
|
ElMessage.success( |
|
|
|
lanChange.value == "zh-cn" ? `上传成功!` : `Upload successfully` |
|
|
|
); |
|
|
|
} catch (error) { |
|
|
|
ElMessage.error(error); |
|
|
|
} |
|
|
|
} |
|
|
|
}, 1000); |
|
|
|
musicListPageNumPerson.value = 1; |
|
|
|
const res4 = await musicListPersonApi( |
|
|
|
musicListPageNumPerson.value, |
|
|
|
musicListPageSize.value |
|
|
|
} catch (error) { |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" ? `上传失败!` : `Upload failure` |
|
|
|
); |
|
|
|
musicListPerson.value = res4.data.list; |
|
|
|
musicListTotalPerson.value = Number(res4.data.total); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// 删除音乐 |
|
|
|
async function deleteMusic(id) { |
|
|
|
const msg = |
|
|
|
lanChange.value == "zh-cn" |
|
|
|
? `确定要删除这首音乐吗? ` |
|
|
|
: `Are you sure to delete this music ? `; |
|
|
|
const notice = lanChange.value == "zh-cn" ? "提示" : "Notice"; |
|
|
|
const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm"; |
|
|
|
const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel"; |
|
|
|
ElMessageBox.confirm(msg, notice, { |
|
|
|
confirmButtonText: confirm, |
|
|
|
cancelButtonText: cancel, |
|
|
|
}).then(async () => { |
|
|
|
try { |
|
|
|
const res = await delMusicApi(id); |
|
|
|
getmusicListPerson(musicListPageNumPerson.value, musicListPageSize.value); |
|
|
|
ElMessage.success( |
|
|
|
lanChange.value == "zh-cn" ? `上传成功!` : `Upload successfully` |
|
|
|
lanChange.value == "zh-cn" ? `删除成功!` : `Successfully deleted ` |
|
|
|
); |
|
|
|
} catch (error) { |
|
|
|
ElMessage.error(error); |
|
|
|
ElMessage.error( |
|
|
|
lanChange.value == "zh-cn" ? `删除失败!` : `Deletion failure ` |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region |
|
|
|
//#region card4的逻辑 |
|
|
|
const problemContent = ref(null); |
|
|
|
const answerContent = ref(""); |
|
|
|
let mySocket = null; |
|
|
|
const sendLoading = ref(false); |
|
|
|
function createWS() { |
|
|
|
mySocket = new WebSocket("wss://gptsocket.malls.iformall.com:8010"); |
|
|
|
mySocket.onopen = () => { |
|
|
|
console.log("WebSocket 连接成功1"); |
|
|
|
sendRequirement(); |
|
|
|
}; |
|
|
|
|
|
|
|
mySocket.onmessage = (event) => { |
|
|
|
console.log("接收到 WebSocket 消息2:", event.data); |
|
|
|
if (!event.data) { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (event.data == "___talk_end___") { |
|
|
|
sendLoading.value = false; |
|
|
|
return; |
|
|
|
} |
|
|
|
answerContent.value = answerContent.value + event.data; |
|
|
|
answerContent.value.replace("null", ""); |
|
|
|
}; |
|
|
|
|
|
|
|
mySocket.onclose = () => { |
|
|
|
console.log( |
|
|
|
"WebSocket 连接关闭3,关闭代码:", |
|
|
|
event.code, |
|
|
|
"关闭原因:", |
|
|
|
event.reason |
|
|
|
); |
|
|
|
console.log(mySocket.readyState, "链接状态3"); |
|
|
|
}; |
|
|
|
|
|
|
|
mySocket.onerror = (error) => { |
|
|
|
console.error("WebSocket 错误4:", error); |
|
|
|
}; |
|
|
|
} |
|
|
|
// 点击发送需求 |
|
|
|
async function sendRequirement() { |
|
|
|
if (!problemContent.value) { |
|
|
|
return; |
|
|
|
} |
|
|
|
const sendMessage = [ |
|
|
|
{ |
|
|
|
role: "user", |
|
|
|
content: problemContent.value, |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
if (mySocket.readyState != WebSocket.OPEN) { |
|
|
|
createWS(); |
|
|
|
} else { |
|
|
|
answerContent.value = ""; |
|
|
|
sendLoading.value = true; |
|
|
|
mySocket.send(JSON.stringify(sendMessage)); |
|
|
|
} |
|
|
|
} |
|
|
|
// 复制到文案 |
|
|
|
function copyAnswerContent() { |
|
|
|
textareaContent.value = answerContent.value; |
|
|
|
document.getElementById("tab-0").click(); |
|
|
|
} |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region |
|
|
|
|
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
// $t在script中的使用 |
|
|
|
//#region $t在script中的使用 |
|
|
|
const { |
|
|
|
appContext: { |
|
|
|
config: { globalProperties }, |
|
|
@@ -1429,7 +1467,9 @@ const { |
|
|
|
|
|
|
|
const string = "createVideo.typeScript"; |
|
|
|
const t = globalProperties.$t(string); |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
//#region 页面初始化 |
|
|
|
onMounted(async () => { |
|
|
|
getAiFaceList(1, 10, 1); |
|
|
|
if (AccessToken) { |
|
|
@@ -1458,6 +1498,14 @@ onMounted(async () => { |
|
|
|
audioMusicUrl.value = item.url; |
|
|
|
} |
|
|
|
}); |
|
|
|
createWS(); |
|
|
|
}); |
|
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
if (mySocket) { |
|
|
|
mySocket.close(); |
|
|
|
} |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
@@ -2111,7 +2159,7 @@ onMounted(async () => { |
|
|
|
cursor: pointer; |
|
|
|
.musicNmae { |
|
|
|
display: inline-block; |
|
|
|
width: 280px; |
|
|
|
width: 260px; |
|
|
|
margin-right: 20px; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
@@ -2124,6 +2172,13 @@ onMounted(async () => { |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
.delMusic { |
|
|
|
color: #fff; |
|
|
|
padding-left: 15px; |
|
|
|
padding-top: -15px; |
|
|
|
line-height: 30px; |
|
|
|
vertical-align: top; |
|
|
|
} |
|
|
|
} |
|
|
|
.musicItemAvtive { |
|
|
|
background-color: #000; |
|
|
@@ -2184,7 +2239,7 @@ onMounted(async () => { |
|
|
|
.card4 { |
|
|
|
.text { |
|
|
|
padding: 10px; |
|
|
|
border: 1px solid #000; |
|
|
|
border: 1px solid #c0c4cc; |
|
|
|
.el-button { |
|
|
|
float: right; |
|
|
|
margin-top: 10px; |
|
|
@@ -2199,16 +2254,15 @@ onMounted(async () => { |
|
|
|
p { |
|
|
|
margin: 7px 0; |
|
|
|
} |
|
|
|
|
|
|
|
> .el-button { |
|
|
|
width: 100%; |
|
|
|
height: 50px; |
|
|
|
.card4Btn { |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.el-input .is-focus) { |
|
|
|
// box-shadow: none !important; |
|
|
|
// box-shadow: 0 0 0 1px #000 !important; |
|
|
|
border-radius: 5px; |
|
|
|
height: 50px; |
|
|
|
width: 100%; |
|
|
|
color: #fff; |
|
|
|
background-color: #000; |
|
|
|
text-align: center; |
|
|
|
line-height: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
:deep(.el-tabs__item.is-active) { |
|
|
|