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;