|
@@ -25,11 +25,14 @@
|
|
|
:style="show ? '' : 'height:calc(100% - 170px - 200px - 40px)'"
|
|
|
ref="messageRef"
|
|
|
>
|
|
|
- <div class="la_m_talk" v-if="show">
|
|
|
+ <div class="la_m_talk" v-if="show && openMessage">
|
|
|
<div v-if="showTextIndex == 0" v-html="htmlContent(aiText)"></div>
|
|
|
<div v-if="showTextIndex == 1">{{ userText }}</div>
|
|
|
<div v-if="showTextIndex == 2">正在组织语言...</div>
|
|
|
</div>
|
|
|
+ <div class="la_m_talk" v-if="!openMessage">
|
|
|
+ <div>你好,我是可可同学,是个小小百事通,你有什么想和我聊一聊?</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="la_btn">
|
|
|
<div class="la_b_noTel" v-if="!show">
|
|
@@ -89,7 +92,8 @@
|
|
|
v-else
|
|
|
>
|
|
|
<span class="readAloud" @click.stop="talkAllText">
|
|
|
- <svg
|
|
|
+ <img :src="require('../../../assets/icon/course/start2.png')" />
|
|
|
+ <!-- <svg
|
|
|
t="1721117381559"
|
|
|
viewBox="0 0 1024 1024"
|
|
|
version="1.1"
|
|
@@ -102,7 +106,7 @@
|
|
|
d="M161.2 839.9v-654c0-56.1 60.7-91.1 109.3-63.1l566.3 327c48.6 28 48.6 98.1 0 126.2L270.4 903c-48.5 28-109.2-7.1-109.2-63.1z"
|
|
|
p-id="12942"
|
|
|
></path>
|
|
|
- </svg>
|
|
|
+ </svg> -->
|
|
|
</span>
|
|
|
</el-tooltip>
|
|
|
|
|
@@ -144,6 +148,9 @@
|
|
|
</span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
+ <div class="openMessage">
|
|
|
+ <el-checkbox v-model="openMessage">开启字幕</el-checkbox>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 录音转文字 -->
|
|
|
<iframe
|
|
@@ -183,6 +190,7 @@ export default {
|
|
|
talkLoading: false,
|
|
|
source: null,
|
|
|
talkTextList: [],
|
|
|
+ openMessage:true,
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
@@ -206,8 +214,8 @@ export default {
|
|
|
this.talkText();
|
|
|
},
|
|
|
recordStart(_text) {
|
|
|
- // this.show = true;
|
|
|
- // this.showIndex = 0;
|
|
|
+ this.show = true;
|
|
|
+ this.showIndex = 0;
|
|
|
// return
|
|
|
var OpenCC = require("opencc-js");
|
|
|
let converter = OpenCC.Converter({
|
|
@@ -260,6 +268,7 @@ export default {
|
|
|
// return setTimeout(()=>{
|
|
|
this.show = false;
|
|
|
this.showTextIndex = 3;
|
|
|
+ this.showIndex = 2;
|
|
|
this.aiStatus = 2;
|
|
|
this.aiText = "";
|
|
|
this.userText = "";
|
|
@@ -326,6 +335,7 @@ export default {
|
|
|
this.chatLoading = false;
|
|
|
this.aiStatus = 0;
|
|
|
this.showTextIndex = 0;
|
|
|
+ this.showIndex = 0;
|
|
|
this.aiText = "对不起,我无法理解您的问题,请重新提问";
|
|
|
// this.timer = setTimeout(() => {
|
|
|
// this.showTextIndex = 3;
|
|
@@ -340,6 +350,7 @@ export default {
|
|
|
this.chatLoading = false;
|
|
|
this.aiStatus = 0;
|
|
|
this.showTextIndex = 0;
|
|
|
+ this.showIndex = 0;
|
|
|
this.aiText = "对不起,我无法理解您的问题,请重新提问";
|
|
|
// this.timer = setTimeout(() => {
|
|
|
// this.showTextIndex = 3;
|
|
@@ -359,9 +370,8 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
stopRecord() {
|
|
|
- // this.show = false;
|
|
|
- // this.showIndex = 2;
|
|
|
- // return
|
|
|
+ this.show = false;
|
|
|
+ this.showIndex = 2;
|
|
|
let iiframe = this.$refs["iiframe"];
|
|
|
iiframe.contentWindow.window.document
|
|
|
.getElementById("scenarioStopButton")
|
|
@@ -380,6 +390,7 @@ export default {
|
|
|
if (this.talkLoading) {
|
|
|
this.$refs.iiframe2.contentWindow.closesynthesizer();
|
|
|
}
|
|
|
+ this.$parent.changeItemType(1)
|
|
|
this.userText = "";
|
|
|
this.aiText = "";
|
|
|
};
|
|
@@ -564,6 +575,9 @@ export default {
|
|
|
this.stopTalk();
|
|
|
},
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.recordStart()
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
@@ -614,8 +628,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
.la_m_talk > div {
|
|
|
- background: #bfbfbf;
|
|
|
- padding: 10px;
|
|
|
+ /* padding: 10px; */
|
|
|
+ padding: 20px 24px 20px 24px;
|
|
|
box-sizing: border-box;
|
|
|
border-radius: 12px;
|
|
|
text-align: left;
|
|
@@ -624,9 +638,12 @@ export default {
|
|
|
}
|
|
|
|
|
|
.la_btn {
|
|
|
- height: 200px;
|
|
|
+ height: 220px;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.la_b_noTel {
|
|
@@ -674,7 +691,7 @@ img {
|
|
|
margin: 0 30px;
|
|
|
}
|
|
|
|
|
|
-.readAloud {
|
|
|
+/* .readAloud {
|
|
|
border-radius: 100%;
|
|
|
background-color: #517291;
|
|
|
cursor: pointer;
|
|
@@ -689,5 +706,31 @@ img {
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
fill: #fff;
|
|
|
-}
|
|
|
+} */
|
|
|
+
|
|
|
+ .openMessage{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: -30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .openMessage >>> .el-checkbox{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .openMessage >>> .el-checkbox> .el-checkbox__label{
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+ .openMessage >>> .el-checkbox>.el-checkbox__input> .el-checkbox__inner{
|
|
|
+ color: #fff !important;
|
|
|
+ background: none !important;
|
|
|
+ border-color: #fff !important;
|
|
|
+ border-radius: 100% !important;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|