From a75a03d1b03ec688258c62590f3fbed47577667d Mon Sep 17 00:00:00 2001 From: congzc Date: Fri, 13 Oct 2023 17:59:24 +0800 Subject: [PATCH] 1 --- src/components/myLoadingIcon2.vue | 51 +++ src/lang/package/en.ts | 5 + src/lang/package/zh-cn.ts | 5 + src/types/components.d.ts | 1 + src/views/createVideo/index.vue | 671 ++++++++++++++++++++++++------ 5 files changed, 615 insertions(+), 118 deletions(-) create mode 100644 src/components/myLoadingIcon2.vue diff --git a/src/components/myLoadingIcon2.vue b/src/components/myLoadingIcon2.vue new file mode 100644 index 0000000..8986c14 --- /dev/null +++ b/src/components/myLoadingIcon2.vue @@ -0,0 +1,51 @@ + + + + diff --git a/src/lang/package/en.ts b/src/lang/package/en.ts index 195f51e..c651d6c 100644 --- a/src/lang/package/en.ts +++ b/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', }, // 我的视频 diff --git a/src/lang/package/zh-cn.ts b/src/lang/package/zh-cn.ts index c971cba..1b97782 100644 --- a/src/lang/package/zh-cn.ts +++ b/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:'复制到文案', }, // 我的视频 diff --git a/src/types/components.d.ts b/src/types/components.d.ts index b95cf41..3ec7dc5 100644 --- a/src/types/components.d.ts +++ b/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'] diff --git a/src/views/createVideo/index.vue b/src/views/createVideo/index.vue index 73dd3b3..a929193 100644 --- a/src/views/createVideo/index.vue +++ b/src/views/createVideo/index.vue @@ -4,6 +4,203 @@
+ +
+ +
+
+

{{ $t("createVideo.subtitlesSwitch") }}

+ +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `字体` : `Font Family` }} +

+ + + +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }} +

+ +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} +

+ + + {{ + item + }} + + +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }} +

+
+
+
+
+
+
+
+
+
+ +
+
+

{{ $t("createVideo.subtitlesSwitch") }}

+ +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `字体` : `Font Family` }} +

+ + + +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }} +

+ +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} +

+ + + {{ + item + }} + + +
+
+ +
+
+

+ {{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }} +

+
+
+
+
+
+
+
+
@@ -177,6 +374,7 @@
{{ $t("createVideo.subtitles") }}
+
@@ -466,126 +671,54 @@
- +
- -
-
-

{{ $t("createVideo.subtitlesSwitch") }}

- + +
+ +
-
- -
-
-

- {{ lanChange == "zh-cn" ? `字体` : `Font Family` }} -

- - - -
-
- -
-
-

- {{ lanChange == "zh-cn" ? `纵坐标` : `Y-axis` }} -

- + + + {{ $t("createVideo.GeneratedText") }} + + + +

{{ $t("createVideo.SmartText") }}

+ +
+ + -
-
- -
-
-

- {{ lanChange == "zh-cn" ? `字号大小` : `Font Size` }} -

- {{ $t("createVideo.entered") }} {{ answerContent.length }} / + 500 - - {{ - item - }} - -
+ + {{ $t("createVideo.copy") }} +
- -
-
-

- {{ lanChange == "zh-cn" ? `字体颜色` : `Font Color` }} -

-
-
-
-
-
-
-
- -
@@ -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(); }); @@ -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;