瀏覽代碼

1

dev_czc
congzc 1 年之前
父節點
當前提交
a75a03d1b0
共有 5 個檔案被更改,包括 615 行新增118 行删除
  1. +51
    -0
      src/components/myLoadingIcon2.vue
  2. +5
    -0
      src/lang/package/en.ts
  3. +5
    -0
      src/lang/package/zh-cn.ts
  4. +1
    -0
      src/types/components.d.ts
  5. +553
    -118
      src/views/createVideo/index.vue

+ 51
- 0
src/components/myLoadingIcon2.vue 查看文件

@@ -0,0 +1,51 @@
<template>
<div class="loadingIcon">
<div>
<el-icon class="is-loading">
<svg
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
data-v-ea893728=""
>
<path
fill="currentColor"
d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
></path>
</svg>
</el-icon>
</div>
</div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const lanChange = ref(locale);

const props = defineProps({
isLoading: {
required: false, //是否必传
},
});
</script>
<style lang="scss" scoped>
.loadingIcon {
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
transform: scale(2);
> div {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.loadingText {
position: relative;
top: -2px;
left: 4px;
}
}
</style>

+ 5
- 0
src/lang/package/en.ts 查看文件

@@ -85,6 +85,7 @@ export default {
comingSoon: "COMING SOON",
material: "Material",
subtitles: "Subtitles",
AItext:"AI Script",
sex: "Sex",
videoRatio: "Video Ratio",
all: "All",
@@ -104,6 +105,10 @@ export default {
tooltip2: "Add Pause",
SubtitlesTip: "Subtitles will be shown here",
subtitlesSwitch: "Subtitles Switch",
inputRequirement:'Please enter your requirements, for example: Please generate a beverage advertisement of 500 words or less',
GeneratedText:'Generated Text',
SmartText:'Smart Text',
copy:'Copy to text',
},

// 我的视频


+ 5
- 0
src/lang/package/zh-cn.ts 查看文件

@@ -86,6 +86,7 @@ export default {
BackgroundImage: "背景",
material: "素材",
subtitles: "字幕",
AItext:"AI生成文本",
sex: "性别",
videoRatio: "视频比例",
all: "全部",
@@ -105,6 +106,10 @@ export default {
tooltip2: "添加停顿",
SubtitlesTip: "字幕将在此处展示",
subtitlesSwitch: "字幕开关",
inputRequirement:'请输入您的需求,例如:请生成一个500字以内的饮料广告',
GeneratedText:'生成文本',
SmartText:'智能文本',
copy:'复制到文案',
},

// 我的视频


+ 1
- 0
src/types/components.d.ts 查看文件

@@ -49,6 +49,7 @@ declare module '@vue/runtime-core' {
MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
MyLoading: typeof import('./../components/myLoading.vue')['default']
MyLoadingIcon: typeof import('./../components/myLoadingIcon.vue')['default']
MyLoadingIcon2: typeof import('./../components/myLoadingIcon2.vue')['default']
Pagination: typeof import('./../components/Pagination/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']


+ 553
- 118
src/views/createVideo/index.vue 查看文件

@@ -4,6 +4,203 @@
<div class="mask" v-show="showChooseModel"></div>
<!-- 左侧栏 -->
<div class="left">
<!-- 字幕框 -->
<div v-show="videoType == 2" class="subtitlesBoxTop">
<!-- 开关 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>{{ $t("createVideo.subtitlesSwitch") }}</p>
<el-switch
v-model="Subtitles.SubtitlesSwitch"
style="--el-switch-on-color: #000"
/>
</div>
</div>
<!-- 字体系列 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字体` : `Font Family` }}
</p>
<el-select
v-model="Subtitles.SubtitlesFontFamily"
style="width: 100px"
placeholder=" "
size="default"
>
<el-option
v-for="item in Subtitles.fontFamilyList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<!-- y轴 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }}
</p>
<el-input-number
:precision="0"
v-model="Subtitles.SubtitlesTop"
size="large"
controls-position="right"
/>
</div>
</div>
<!-- 字号大小 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }}
</p>
<el-select
v-model="Subtitles.SubtitlesSize"
style="width: 100px"
placeholder=" "
size="default"
>
<el-option
v-for="item in Subtitles.fontSizeList"
:key="item"
:label="item"
:value="item"
:style="{
height: item + 'px',
lineHeight: item + 'px',
}"
>
<span :style="{ fontSize: item + 'px', padding: '5px' }">{{
item
}}</span>
</el-option>
</el-select>
</div>
</div>
<!-- 字色 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }}
</p>
<div
@click="handleSubtitlesColorShow"
class="myColorBox"
:style="{ backgroundColor: Subtitles.SubtitlesColor }"
>
<div v-show="SubtitlesColorShow" class="selectColor">
<div
v-for="item in Subtitles.colorList"
:style="{ backgroundColor: item }"
class="selectColor-item"
@click="Subtitles.SubtitlesColor = item"
></div>
</div>
</div>
</div>
</div>
</div>
<div v-show="videoType == 1" class="subtitlesBoxLeft">
<!-- 开关 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>{{ $t("createVideo.subtitlesSwitch") }}</p>
<el-switch
v-model="Subtitles.SubtitlesSwitch"
style="--el-switch-on-color: #000"
/>
</div>
</div>
<!-- 字体系列 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字体` : `Font Family` }}
</p>
<el-select
v-model="Subtitles.SubtitlesFontFamily"
style="width: 100px"
placeholder=" "
size="default"
>
<el-option
v-for="item in Subtitles.fontFamilyList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<!-- y轴 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }}
</p>
<el-input-number
:precision="0"
v-model="Subtitles.SubtitlesTop"
size="large"
controls-position="right"
/>
</div>
</div>
<!-- 字号大小 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }}
</p>
<el-select
v-model="Subtitles.SubtitlesSize"
style="width: 100px"
placeholder=" "
size="default"
>
<el-option
v-for="item in Subtitles.fontSizeList"
:key="item"
:label="item"
:value="item"
:style="{
height: item + 'px',
lineHeight: item + 'px',
}"
>
<span :style="{ fontSize: item + 'px', padding: '5px' }">{{
item
}}</span>
</el-option>
</el-select>
</div>
</div>
<!-- 字色 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }}
</p>
<div
@click="handleSubtitlesColorShow"
class="myColorBox"
:style="{ backgroundColor: Subtitles.SubtitlesColor }"
>
<div v-show="SubtitlesColorShow" class="selectColor">
<div
v-for="item in Subtitles.colorList"
:style="{ backgroundColor: item }"
class="selectColor-item"
@click="Subtitles.SubtitlesColor = item"
></div>
</div>
</div>
</div>
</div>
</div>
<!-- 选择模版弹出框 -->
<div class="chooseModelBox" :class="showChooseModel ? '' : 'noModel'">
<!-- 伸缩按钮 -->
@@ -177,6 +374,7 @@
<!-- tab栏 -->
<div class="tab">
<div
id="tab-0"
class="tabItem"
:class="tabItemActive == 1 ? 'tabItemActive' : ''"
@click="tabItemActive = 1"
@@ -204,6 +402,13 @@
>
{{ $t("createVideo.subtitles") }}
</div>
<!-- <div
class="tabItem"
:class="tabItemActive == 5 ? 'tabItemActive' : ''"
@click="tabItemActive = 5"
>
{{ $t("createVideo.AItext") }}
</div> -->
</div>
<!-- 文案 只能使用v-if,不能使用v-show-->
<div v-if="tabItemActive == 1" class="tabContent tab1">
@@ -466,126 +671,54 @@
</div>
</div>
</div>
<!-- 字幕 -->
<!-- 智能文案 -->
<div v-if="tabItemActive == 4" class="tabContent tab4">
<!-- 开关 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>{{ $t("createVideo.subtitlesSwitch") }}</p>
<el-switch
v-model="Subtitles.SubtitlesSwitch"
style="--el-switch-on-color: #000"
<div class="card4">
<!-- 语言 -->
<div class="text">
<!-- 文本域 -->
<el-input
maxlength="200"
id="textInputId"
v-model="problemContent"
:rows="5"
type="textarea"
:placeholder="$t('createVideo.inputRequirement')"
/>
</div>
</div>
<!-- 字体系列 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字体` : `Font Family` }}
</p>
<el-select
v-model="Subtitles.SubtitlesFontFamily"
style="width: 100px"
placeholder=" "
size="default"
>
<el-option
v-for="item in Subtitles.fontFamilyList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<!-- y轴 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }}
</p>
<el-input-number
:precision="0"
v-model="Subtitles.SubtitlesTop"
size="large"
controls-position="right"
<el-button
type="primary"
:disabled="sendLoading"
@click="sendRequirement"
color="#000"
>
<my-Loading-Icon2 v-if="sendLoading"></my-Loading-Icon2>
<span v-if="!sendLoading">
{{ $t("createVideo.GeneratedText") }}
</span>
</el-button>

<p>{{ $t("createVideo.SmartText") }}</p>
<!-- 语言 -->
<div class="text" style="cursor: text">
<!-- 文本域 -->
<el-input
maxlength="500"
id="textInputId"
v-model="answerContent"
:rows="15"
type="textarea"
disabled=""
/>
</div>
</div>
<!-- 字号大小 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }}
</p>
<el-select
v-model="Subtitles.SubtitlesSize"
style="width: 100px"
placeholder=" "
size="default"
<i
>{{ $t("createVideo.entered") }} {{ answerContent.length }} /
500</i
>
<el-option
v-for="item in Subtitles.fontSizeList"
:key="item"
:label="item"
:value="item"
:style="{
height: item + 'px',
lineHeight: item + 'px',
}"
>
<span :style="{ fontSize: item + 'px', padding: '5px' }">{{
item
}}</span>
</el-option>
</el-select>
</div>
<el-button color="#000" @click="copyAnswerContent">
{{ $t("createVideo.copy") }}
</el-button>
</div>
<!-- 字色 -->
<div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }}
</p>
<div
@click="handleSubtitlesColorShow"
class="myColorBox"
:style="{ backgroundColor: Subtitles.SubtitlesColor }"
>
<div v-show="SubtitlesColorShow" class="selectColor">
<div
v-for="item in Subtitles.colorList"
:style="{ backgroundColor: item }"
class="selectColor-item"
@click="Subtitles.SubtitlesColor = item"
></div>
</div>
</div>
</div>
</div>
<!-- 字粗 -->
<!-- <div class="tab4Item">
<div v-if="materialList.BGI.material" class="SubtitlesSwitch">
<p>
{{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }}
</p>
<el-select
v-model="Subtitles.SubtitlesWeight"
style="width: 100px"
placeholder=" "
size="default"
>
<el-option
v-for="item in Subtitles.fontWeightList"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
</div>
</div> -->
</div>
</div>
<!-- 试听的mp3 -->
@@ -1518,8 +1651,82 @@ function NumToFixed(num1, num2) {
}
//#endregion ----------------------------

//#region
//#region AI文案
// 创建websocket
let mySocket = null; //websocket对象
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;
mySocket.close();
return;
}
answerContent.value = answerContent.value + event.data;
};
mySocket.onclose = () => {
console.log(
"WebSocket 连接关闭3,关闭代码:",
event.code,
"关闭原因:",
event.reason
);
console.log(mySocket.readyState, "链接状态3");
};

mySocket.onerror = (error) => {
ElMessage.error(
lanChange.value == "zh-cn"
? `GPT服务器连接失败,请稍后重试!`
: `GPT Server connection failed, please try again later`
);
sendLoading.value = false;
mySocket.close();
console.error("WebSocket 错误4:", error);
};
}
const problemContent = ref(""); //问题输入框内容
const answerContent = ref(""); //回答输入框内容
// 点击发送需求
async function sendRequirement() {
// loading
sendLoading.value = true;

// 无需求时
if (!problemContent.value) {
sendLoading.value = false;
mySocket.close();
return;
}
const sendMessage = [
{
role: "user",
content: problemContent.value,
},
];
// 如果处于链接状态

if (mySocket.readyState != WebSocket.OPEN) {
createWS();
} else {
answerContent.value = "";
mySocket.send(JSON.stringify(sendMessage));
}
}
// 复制到文案
function copyAnswerContent() {
textareaContent.value = answerContent.value;
document.getElementById("tab-0").click();
}
//#endregion ----------------------------

//#region
@@ -1547,6 +1754,7 @@ onMounted(async () => {
if (route.query.id) {
getModelDetailById();
}
createWS();
});
</script>

@@ -1570,6 +1778,171 @@ onMounted(async () => {
width: 68%;
height: 100%;
padding: 20px;
// 字幕盒子
.subtitlesBoxTop {
z-index: 3;
position: absolute;
top: 50px;
left: 225px;
width: 700px;
// height: 50px;
background-color: #e9ecf1;
border-radius: 20px;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
display: flex;
justify-content: flex-start;
align-content: flex-start;
flex-wrap: wrap;
.tab4Item {
display: flex;
justify-content: space-between;
width: 130px;
background-color: rgba(71, 105, 218, 0.1);
text-align: center;
padding: 10px;
height: 80px;
border-radius: 10px;
margin: auto;
// margin-bottom: 10px;
p {
padding-bottom: 5px;
}
}
.SubtitlesSwitch {
width: 100%;
.el-input-number--large {
width: 100px;
}
.el-input-number__increase {
width: none;
}
}
.myColorBox {
position: relative;
width: 25px;
height: 25px;
margin: auto;
border: #000 solid 2px;
cursor: pointer;
.selectColor {
position: absolute;
top: 150%;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 142px;
background-color: #ffffff;
z-index: 99;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px;
&::before {
content: "";
display: block;
position: absolute;
top: -10%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
}
&-item {
width: 25px;
height: 25px;
margin: 5px 5px;
border: #000 solid 2px;
border-radius: 5px;
cursor: pointer;
}
}
}
}
.subtitlesBoxLeft {
z-index: 3;
position: absolute;
top: 150px;
left: 150px;
width: 150px;
// height: 50px;
background-color: #e9ecf1;
border-radius: 20px;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px;
display: flex;
justify-content: flex-start;
align-content: flex-start;
flex-wrap: wrap;
.tab4Item {
display: flex;
justify-content: space-between;
width: 130px;
background-color: rgba(71, 105, 218, 0.1);
text-align: center;
padding: 10px;
height: 80px;
border-radius: 10px;
margin: auto;
margin-bottom: 10px;
p {
padding-bottom: 5px;
}
}
.SubtitlesSwitch {
width: 100%;
.el-input-number--large {
width: 100px;
}
.el-input-number__increase {
width: none;
}
}
.myColorBox {
position: relative;
width: 25px;
height: 25px;
margin: auto;
border: #000 solid 2px;
cursor: pointer;
.selectColor {
position: absolute;
top: 150%;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 142px;
background-color: #ffffff;
z-index: 99;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px 5px;
&::before {
content: "";
display: block;
position: absolute;
top: -10%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
}
&-item {
width: 25px;
height: 25px;
margin: 5px 5px;
border: #000 solid 2px;
border-radius: 5px;
cursor: pointer;
}
}
}
}
// 选择模版弹出框
.chooseModelBox {
position: absolute;
@@ -1917,10 +2290,72 @@ onMounted(async () => {
}
}
.tab4 {
display: flex;
justify-content: flex-start;
align-content: flex-start;
flex-wrap: wrap;
// display: flex;
// justify-content: flex-start;
// align-content: flex-start;
// flex-wrap: wrap;
.card4 {
.text {
padding: 10 px;
border: 1px solid #c0c4cc;
.el-button {
float: right;
margin-top: 10px;
}
:deep(.el-textarea__inner) {
cursor: text;
}
:deep(.el-textarea__inner) {
resize: none;
box-shadow: none;
}
i {
font-size: 14px;
float: right;
}
}

p {
margin: 7px 0;
}
.card4Btn {
margin-top: 10px;
border-radius: 5px;
height: 50px;
width: 100%;
color: #fff;
background-color: #000;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.el-button {
width: 100%;
height: 50px;
margin-top: 10px;
}
}
:deep(.el-tabs__item.is-active) {
color: #909393;
background-color: #000;
}

:deep(.el-tabs__nav) {
width: 100%;
}

:deep(.el-tabs__item) {
width: 26%;
}

:deep(.el-tabs__item:hover) {
color: #909393;
}

:deep(.el-tabs__content) {
height: calc(100% - 60px);
padding: 0;
}
.tab4Item {
display: flex;
justify-content: space-between;


Loading…
取消
儲存