|
|
@@ -0,0 +1,564 @@
|
|
|
+<template>
|
|
|
+ <div class="languageAssistant">
|
|
|
+ <div class="la_coco">
|
|
|
+ <el-image
|
|
|
+ style="width: 150px; height: 150px"
|
|
|
+ v-show="showIndex == 2"
|
|
|
+ :src="require('../../../assets/icon/course/aiVanish.svg')"
|
|
|
+ fit="fill"
|
|
|
+ ></el-image>
|
|
|
+ <el-image
|
|
|
+ style="width: 150px; height: 150px"
|
|
|
+ v-show="showIndex == 0"
|
|
|
+ :src="require('../../../assets/icon/course/aiWait.svg')"
|
|
|
+ fit="fill"
|
|
|
+ ></el-image>
|
|
|
+ <el-image
|
|
|
+ style="width: 150px; height: 150px"
|
|
|
+ v-show="showIndex == 1"
|
|
|
+ :src="require('../../../assets/icon/course/aiTalk.svg')"
|
|
|
+ fit="fill"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <div class="la_message" ref="messageRef" >
|
|
|
+ <div class="la_m_talk" v-if="show">
|
|
|
+ <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>
|
|
|
+ <div class="la_btn">
|
|
|
+ <div class="la_b_noTel" v-if="!show">
|
|
|
+ <svg @click.stop="recordStart" t="1721367811838" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4525" width="64" height="64"><path d="M65.771 502.182c0 246.632 199.937 446.566 446.57 446.565 246.613 0 446.549-199.934 446.551-446.565 0-246.633-199.936-446.549-446.55-446.55-246.635 0.001-446.57 199.917-446.571 446.55z m651.885-173.77c31.489 31.473 1.642 148.828-114.292 264.773C487.396 709.131 370.06 738.929 338.589 707.492c-27.278-27.315-74.96-60.574-12.892-110.423 62.087-49.886 79.429-25.343 107.582 2.772 19.674 19.711 69.436-21.368 112.394-64.328 42.94-42.996 83.986-92.719 64.368-112.43-28.155-28.153-52.679-45.511-2.792-107.562 49.904-62.049 83.125-14.405 110.406 12.891z" p-id="4526"></path></svg>
|
|
|
+ </div>
|
|
|
+ <div class="la_b_isTel" v-else>
|
|
|
+ <span @click.stop="stopTalk">
|
|
|
+ <svg t="1721372070061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6534" width="64" height="64"><path d="M648.45 247.01c-31.64 0-57.348 27.685-57.348 57.348v427.149c0 31.64 27.685 57.348 57.348 57.348S705.8 761.17 705.8 731.507V304.358c0-31.64-27.686-57.348-57.349-57.348z m-272.9 0c-31.64 0-57.349 27.685-57.349 57.348v427.149c0 31.64 27.686 57.348 57.349 57.348s57.348-27.685 57.348-57.348V304.358c1.978-31.64-25.708-57.348-57.348-57.348z" p-id="6535"></path></svg>
|
|
|
+ </span>
|
|
|
+ <svg @click.stop="stopRecord" t="1721367811838" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4525" width="64" height="64"><path d="M65.771 502.182c0 246.632 199.937 446.566 446.57 446.565 246.613 0 446.549-199.934 446.551-446.565 0-246.633-199.936-446.549-446.55-446.55-246.635 0.001-446.57 199.917-446.571 446.55z m651.885-173.77c31.489 31.473 1.642 148.828-114.292 264.773C487.396 709.131 370.06 738.929 338.589 707.492c-27.278-27.315-74.96-60.574-12.892-110.423 62.087-49.886 79.429-25.343 107.582 2.772 19.674 19.711 69.436-21.368 112.394-64.328 42.94-42.996 83.986-92.719 64.368-112.43-28.155-28.153-52.679-45.511-2.792-107.562 49.904-62.049 83.125-14.405 110.406 12.891z" p-id="4526"></path></svg>
|
|
|
+ <span @click.stop="interrupt">
|
|
|
+ <svg t="1721372012678" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5554" width="64" height="64"><path d="M885.6 413.8c-32.3 0-60.1 19.8-71.9 47.9h-18.1c-16.6 0-30 13.4-30 30s13.4 30 30 30h18.1c11.8 28.1 39.5 47.9 71.9 47.9 42.9 0 77.9-34.9 77.9-77.9 0-42.9-35-77.9-77.9-77.9zM690.4 461.7h-21.1c-16.6 0-30 13.4-30 30s13.4 30 30 30h21.1c16.6 0 30-13.4 30-30s-13.4-30-30-30zM564.1 461.7h-10c-16.6 0-30 13.4-30 30s13.4 30 30 30h10c16.6 0 30-13.4 30-30s-13.4-30-30-30zM709.7 115.7c-13.7-9.4-32.3-5.9-41.7 7.8L436.5 461.8c-0.8-0.1-1.6-0.1-2.3-0.1H212.5c-11.8-28.1-39.5-47.9-71.9-47.9-39.4 0-72.1 29.5-77.2 67.5-1.2 3.2-1.8 6.7-1.8 10.3 0 3.6 0.6 7.1 1.8 10.3 5.1 38.1 37.7 67.5 77.2 67.5 32.3 0 60.1-19.8 71.9-47.9h183l-240.1 351c-9.4 13.7-5.9 32.3 7.8 41.7 5.2 3.5 11.1 5.2 16.9 5.2 9.6 0 19-4.6 24.8-13.1l512.6-749c9.4-13.5 5.9-32.2-7.8-41.6z" p-id="5555"></path></svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 录音转文字 -->
|
|
|
+ <iframe
|
|
|
+ allow="camera *; microphone *;display-capture;midi;encrypted-media;"
|
|
|
+ src="https://beta.cloud.cocorobo.cn/browser/public/index.html"
|
|
|
+ ref="iiframe"
|
|
|
+ v-show="false"
|
|
|
+ ></iframe>
|
|
|
+
|
|
|
+ <!-- 文字转语音-->
|
|
|
+ <iframe
|
|
|
+ allow="camera *; microphone *;display-capture;midi;encrypted-media;"
|
|
|
+ src="https://beta.cloud.cocorobo.cn/browser/public/index1.html"
|
|
|
+ ref="iiframe2"
|
|
|
+ v-show="false"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+import MarkdownIt from "markdown-it";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ showIndex: 2, //0 :在说话 1 ： 接收 2：待命
|
|
|
+ aiStatus: 0,
|
|
|
+ aiText: "我是可可同学，我是个小小百事通，你有什么想和我聊一聊？",
|
|
|
+ userText: "",
|
|
|
+ showTextIndex: 0, //0：ai,1：用户, 2：组织语言 3: 无
|
|
|
+ timer: null,
|
|
|
+ isOpen: false,
|
|
|
+ userId: this.$route.query.userid,
|
|
|
+ chatLoading: false,
|
|
|
+ talkLoading: false,
|
|
|
+ source: null,
|
|
|
+ talkTextList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ htmlContent() {
|
|
|
+ const md = new MarkdownIt();
|
|
|
+ return _md => {
|
|
|
+ return md.render(_md);
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ scrollBottom(){
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.messageRef.scrollTop = this.$refs.messageRef.scrollHeight;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ recordStart(_text) {
|
|
|
+ // this.show = true;
|
|
|
+ // this.showIndex = 0;
|
|
|
+ // return
|
|
|
+ var OpenCC = require("opencc-js");
|
|
|
+ let converter = OpenCC.Converter({
|
|
|
+ from: "hk",
|
|
|
+ to: "cn"
|
|
|
+ });
|
|
|
+ if (this.isOpen)return this.$message.info("已开启语音助手，无需重复开启");
|
|
|
+ let iiframe = this.$refs["iiframe"];
|
|
|
+ iiframe.contentWindow.window.document.getElementById(
|
|
|
+ "languageOptions"
|
|
|
+ ).selectedIndex = 2; //普通话
|
|
|
+ iiframe.contentWindow.testdoContinuousPronunciationAssessment();
|
|
|
+ this.isOpen = true;
|
|
|
+ this.show = true;
|
|
|
+ this.aiText = "我是可可同学，我是个小小百事通，你有什么想和我聊一聊？"
|
|
|
+ iiframe.contentWindow.onRecognizedResult = e => {
|
|
|
+ let _msg = converter(e.privText);
|
|
|
+
|
|
|
+ console.log("👇");
|
|
|
+ console.log(_msg);
|
|
|
+ // _msg = converter(_msg)
|
|
|
+ if (!_msg) return console.log("输出为空");
|
|
|
+ if (this.show == true) {
|
|
|
+ if (
|
|
|
+ _msg.indexOf(converter("可可同学")) != -1 &&
|
|
|
+ _msg.indexOf(converter("停止")) != -1
|
|
|
+ ) {
|
|
|
+ this.stopTalk();
|
|
|
+ } else if (
|
|
|
+ this.showTextIndex == 2 ||
|
|
|
+ this.chatLoading ||
|
|
|
+ this.talkLoading
|
|
|
+ ) {
|
|
|
+ return console.log("组织语言中");
|
|
|
+ // }else if(_msg.indexOf('可可同学')!=-1 && _msg.indexOf("停止")!=-1){
|
|
|
+ // this.stopTalk();
|
|
|
+ } else {
|
|
|
+ this.showTextIndex = 1;
|
|
|
+ this.aiText = "";
|
|
|
+ this.userText += _msg;
|
|
|
+ this.scrollBottom();
|
|
|
+ this.aiStatus = 1;
|
|
|
+ if (this.timer) {
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+ this.timer = setTimeout(() => {
|
|
|
+ if (this.userText.indexOf(converter("关闭语音助手")) != -1) {
|
|
|
+ // return setTimeout(()=>{
|
|
|
+ this.show = false;
|
|
|
+ this.showTextIndex = 3;
|
|
|
+ this.aiStatus = 2;
|
|
|
+ this.aiText = "";
|
|
|
+ this.userText = "";
|
|
|
+ this.stopRecord();
|
|
|
+ return;
|
|
|
+ // },1000)
|
|
|
+ }
|
|
|
+ this.showTextIndex = 2;
|
|
|
+ this.aiText = "";
|
|
|
+ let regExp = new RegExp(
|
|
|
+ converter("计时") + "(.+)" + converter("分钟")
|
|
|
+ );
|
|
|
+ if (false && regExp.test(this.userText)) {
|
|
|
+ // setTimeout(() => {
|
|
|
+ // let _number = this.userText.match(regExp)[1];
|
|
|
+ // let _time = 0;
|
|
|
+ // if (!/^\d+$/.test(_number)) {
|
|
|
+ // _time = this.chineseToNumber(_number) * 60;
|
|
|
+ // } else {
|
|
|
+ // _time = parseInt(_numberList[1]) * 60;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // this.$emit("startTime", _time);
|
|
|
+ // this.aiStatus = 0;
|
|
|
+ // this.showTextIndex = 0;
|
|
|
+ // this.aiText =
|
|
|
+ // "好的，我已为您计时" +
|
|
|
+ // this.userText.match(regExp)[1] +
|
|
|
+ // "分钟。";
|
|
|
+ // this.userText = "";
|
|
|
+ // this.timer = setTimeout(() => {
|
|
|
+ // this.showTextIndex = 3;
|
|
|
+ // this.aiStatus = 2;
|
|
|
+ // this.aiText = "";
|
|
|
+ // this.userText = "";
|
|
|
+ // }, 3000);
|
|
|
+ // }, 2000);
|
|
|
+ } else {
|
|
|
+ this.chatLoading = true;
|
|
|
+ const _uuid = uuidv4();
|
|
|
+ let params = {
|
|
|
+ assistant_id: "f8e1ebb2-2e0d-11ef-8bf4-12e77c4cb76b",
|
|
|
+ userId: this.userId,
|
|
|
+ message: this.userText,
|
|
|
+ session_name: _uuid + "-qgt",
|
|
|
+ uid: _uuid,
|
|
|
+ file_ids: []
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ // .post("https://claude3.cocorobo.cn/chat", params)
|
|
|
+ // .post("https://gpt4.cocorobo.cn/chat", params)
|
|
|
+ .post(
|
|
|
+ "https://gpt4.cocorobo.cn/ai_agent_park_chat_new",
|
|
|
+ params
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ if (
|
|
|
+ converter(res.data.FunctionResponse.result) ==
|
|
|
+ converter("发送成功")
|
|
|
+ ) {
|
|
|
+ this.userText = "";
|
|
|
+ } else {
|
|
|
+ // this.$message.warning(res.data.FunctionResponse.result);
|
|
|
+ console.log(res.data.FunctionResponse.result);
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.aiStatus = 0;
|
|
|
+ this.showTextIndex = 0;
|
|
|
+ this.aiText = "对不起，我无法理解您的问题，请重新提问";
|
|
|
+ // this.timer = setTimeout(() => {
|
|
|
+ // this.showTextIndex = 3;
|
|
|
+ // this.aiStatus = 2;
|
|
|
+ // this.aiText = "";
|
|
|
+ // this.userText = "";
|
|
|
+ // }, 3000);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.aiStatus = 0;
|
|
|
+ this.showTextIndex = 0;
|
|
|
+ this.aiText = "对不起，我无法理解您的问题，请重新提问";
|
|
|
+ // this.timer = setTimeout(() => {
|
|
|
+ // this.showTextIndex = 3;
|
|
|
+ // this.aiStatus = 2;
|
|
|
+ // this.aiText = "";
|
|
|
+ // this.userText = "";
|
|
|
+ // }, 3000);
|
|
|
+ });
|
|
|
+ // 通过流获取ai对话数据
|
|
|
+ this.getAtAuContent(_uuid);
|
|
|
+ }
|
|
|
+ }, 5000);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log("不响应");
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ stopRecord() {
|
|
|
+ // this.show = false;
|
|
|
+ // this.showIndex = 2;
|
|
|
+ // return
|
|
|
+ let iiframe = this.$refs["iiframe"];
|
|
|
+ iiframe.contentWindow.window.document
|
|
|
+ .getElementById("scenarioStopButton")
|
|
|
+ .click();
|
|
|
+ if (this.talkLoading) {
|
|
|
+ this.stopTalk();
|
|
|
+ }
|
|
|
+ // this.stopTalk();
|
|
|
+ // 录音借宿
|
|
|
+ iiframe.contentWindow.onSessionStopped = (s, e) => {
|
|
|
+ this.isOpen = false;
|
|
|
+ this.show = false;
|
|
|
+ this.showTextIndex = 3;
|
|
|
+ this.showIndex = 2;
|
|
|
+ this.$message.success("已关闭语音助手");
|
|
|
+ if (this.talkLoading) {
|
|
|
+ this.$refs.iiframe2.contentWindow.closesynthesizer();
|
|
|
+ }
|
|
|
+ this.userText = "";
|
|
|
+ this.aiText = "";
|
|
|
+ };
|
|
|
+ },
|
|
|
+ chineseToNumber(chinese) {
|
|
|
+ var OpenCC = require("opencc-js");
|
|
|
+ let converter = OpenCC.Converter({
|
|
|
+ from: "hk",
|
|
|
+ to: "cn"
|
|
|
+ });
|
|
|
+ chinese = converter(chinese);
|
|
|
+ const chineseNumbers = {
|
|
|
+ 零: 0,
|
|
|
+ 一: 1,
|
|
|
+ 二: 2,
|
|
|
+ 三: 3,
|
|
|
+ 四: 4,
|
|
|
+ 五: 5,
|
|
|
+ 六: 6,
|
|
|
+ 七: 7,
|
|
|
+ 八: 8,
|
|
|
+ 九: 9,
|
|
|
+ 十: 10,
|
|
|
+ 百: 100,
|
|
|
+ 千: 1000,
|
|
|
+ 万: 10000,
|
|
|
+ 亿: 100000000
|
|
|
+ };
|
|
|
+
|
|
|
+ let result = 0;
|
|
|
+ let tempNum = 0; // 用于累积处理
|
|
|
+ let sectionNum = 0; // 每个段的值
|
|
|
+
|
|
|
+ for (let i = 0; i < chinese.length; i++) {
|
|
|
+ const char = chinese[i];
|
|
|
+ const num = chineseNumbers[char];
|
|
|
+
|
|
|
+ if (num === undefined) {
|
|
|
+ throw new Error(`Unexpected character: ${char}`);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (
|
|
|
+ num === 10 ||
|
|
|
+ num === 100 ||
|
|
|
+ num === 1000 ||
|
|
|
+ num === 10000 ||
|
|
|
+ num === 100000000
|
|
|
+ ) {
|
|
|
+ if (tempNum === 0) tempNum = 1; // 如果前面没有数，默认是1
|
|
|
+ tempNum *= num;
|
|
|
+
|
|
|
+ if (num === 10000 || num === 100000000) {
|
|
|
+ sectionNum += tempNum;
|
|
|
+ result += sectionNum;
|
|
|
+ tempNum = 0;
|
|
|
+ sectionNum = 0;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ tempNum += num;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ result += sectionNum + tempNum;
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ removeMarkdown(text) {
|
|
|
+ return text
|
|
|
+ .replace(/[#*_~`>+\-]/g, "") // 移除 #、*、_、~、`、>、+、- 符号
|
|
|
+ .replace(/!\[.*?\]\(.*?\)/g, "") // 移除图片
|
|
|
+ .replace(/\[.*?\]\(.*?\)/g, "") // 移除链接
|
|
|
+ .replace(/```[\s\S]*?```/g, "") // 移除代码块（不使用 s 标志）
|
|
|
+ .replace(/`[^`]*`/g, "") // 移除行内代码
|
|
|
+ .replace(/\d+\./g, "") // 移除有序列表
|
|
|
+ .replace(/^\s*[-*+]\s+/gm, "") // 移除无序列表
|
|
|
+ .replace(/\s+/g, " ") // 将多个空白字符替换为一个空格
|
|
|
+ .trim(); // 去除字符串两端的空白字符
|
|
|
+ },
|
|
|
+ getAtAuContent(_uid) {
|
|
|
+ this.source = new EventSource(
|
|
|
+ `https://gpt4.cocorobo.cn/question/${_uid}`
|
|
|
+ );
|
|
|
+ //http://gpt4.cocorobo.cn:8011/question/ https://gpt4.cocorobo.cn/question/
|
|
|
+ let _allText = "";
|
|
|
+ let _mdText = "";
|
|
|
+ let _talkText = "";
|
|
|
+ // let _talkIndex = 0;
|
|
|
+ // const md = new MarkdownIt();
|
|
|
+ this.source.onmessage = _e => {
|
|
|
+ let _eData = JSON.parse(_e.data);
|
|
|
+ if (_eData.content.replace("'", "").replace("'", "") == "[DONE]") {
|
|
|
+ let _result = [];
|
|
|
+ if ("result" in _eData) {
|
|
|
+ _result = _eData.result;
|
|
|
+ for (let i = 0; i < _result.length; i++) {
|
|
|
+ _mdText = _mdText.replace(_result[i].text, _result[i].fileName);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _mdText = _mdText.replace("_", "");
|
|
|
+ this.aiText = _mdText;
|
|
|
+ this.scrollBottom();
|
|
|
+ if (_talkText != "") {
|
|
|
+ let _resultText = this.removeMarkdown(_talkText);
|
|
|
+ this.talkTextList.push(_resultText);
|
|
|
+ _talkText = "";
|
|
|
+ if (!this.talkLoading) this.talkText();
|
|
|
+ }
|
|
|
+ this.chatLoading = false;
|
|
|
+ this.source.close();
|
|
|
+ this.source = null;
|
|
|
+ } else {
|
|
|
+ // _talkIndex+=1;
|
|
|
+ let _text = _eData.content.replace("'", "").replace("'", "");
|
|
|
+ if (_allText == "") {
|
|
|
+ _allText = _text.replace(/^\n+/, ""); //去掉回复消息中偶尔开头就存在的连续换行符
|
|
|
+ _talkText += _text.replace(/^\n+/, "");
|
|
|
+ } else {
|
|
|
+ _allText += _text;
|
|
|
+ _talkText += _text;
|
|
|
+ }
|
|
|
+ `~`;
|
|
|
+ _mdText = _allText + "_";
|
|
|
+ _mdText = _mdText.replace(/\\n/g, "\n");
|
|
|
+ _mdText = _mdText.replace(/\\/g, "");
|
|
|
+ if (_allText.split("```").length % 2 == 0) _mdText += "\n```\n";
|
|
|
+ this.aiText = _mdText;
|
|
|
+ this.showTextIndex = 0;
|
|
|
+ this.scrollBottom();
|
|
|
+ if (/[，。：；？！）]/.test(_talkText)) {
|
|
|
+ let _resultText = this.removeMarkdown(_talkText);
|
|
|
+ this.talkTextList.push(_resultText);
|
|
|
+ _talkText = "";
|
|
|
+ if (!this.talkLoading) this.talkText();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ talkText() {
|
|
|
+ let _text = this.talkTextList.shift();
|
|
|
+ let _talkTextIiframe2 = this.$refs.iiframe2;
|
|
|
+
|
|
|
+ if (_text) {
|
|
|
+ this.talkLoading = true;
|
|
|
+ if (this.timer) {
|
|
|
+ clearTimeout(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+ console.log(`👉转语音：${_text}`);
|
|
|
+ _talkTextIiframe2.contentWindow.texttospeech(
|
|
|
+ _text,
|
|
|
+ this.talkText,
|
|
|
+ this.endTalk
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ _talkTextIiframe2.contentWindow.closesynthesizer();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ endTalk() {
|
|
|
+ console.log("👉转语音结束👈");
|
|
|
+ this.talkLoading = false;
|
|
|
+ },
|
|
|
+ stopTalk() {
|
|
|
+ // return this.$message.info("停止")
|
|
|
+ this.talkTextList = [];
|
|
|
+ let _talkTextIiframe2 = this.$refs.iiframe2;
|
|
|
+ _talkTextIiframe2.contentWindow.closesynthesizer();
|
|
|
+ _talkTextIiframe2.contentWindow.pausesynthesizer();
|
|
|
+ this.talkLoading = false;
|
|
|
+ },
|
|
|
+ interrupt(){
|
|
|
+ // return this.$message.info("打断")
|
|
|
+ if(this.source){
|
|
|
+ this.source.close()
|
|
|
+ }
|
|
|
+ this.stopTalk();
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.languageAssistant {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10px 0 0 10px;
|
|
|
+ /* background-image: linear-gradient(to top, #007adf 0%, #00ecbc 100%);
|
|
|
+ */
|
|
|
+ background-image: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%);
|
|
|
+ /* display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center; */
|
|
|
+ /* justify-content: center; */
|
|
|
+ overflow: auto;
|
|
|
+ text-align:center;
|
|
|
+}
|
|
|
+
|
|
|
+.la_coco{
|
|
|
+ height: 300px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.la_message{
|
|
|
+ height: 400px;
|
|
|
+ width: 100%;
|
|
|
+ /* display: flex; */
|
|
|
+ padding:10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.la_m_talk{
|
|
|
+ /* width:100%; */
|
|
|
+ height:auto;
|
|
|
+ max-height:400px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow:auto;
|
|
|
+}
|
|
|
+
|
|
|
+.la_m_talk>div{
|
|
|
+ background:#BFBFBF;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius:10px;
|
|
|
+}
|
|
|
+
|
|
|
+.la_btn{
|
|
|
+ height: 200px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.la_b_noTel{
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ display:flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.la_b_noTel>svg{
|
|
|
+ fill:#52c41a;
|
|
|
+ width:80px;
|
|
|
+ height:80px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.la_b_isTel{
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ display:flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.la_b_isTel>svg{
|
|
|
+ fill:#FF0E55;
|
|
|
+ width:80px;
|
|
|
+ height:80px;
|
|
|
+ cursor: pointer;
|
|
|
+ transform: rotate(-135deg);
|
|
|
+}
|
|
|
+
|
|
|
+.la_b_isTel>span{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items:center;
|
|
|
+ width:45px;
|
|
|
+ height:45px;
|
|
|
+ border-radius:50%;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 20px;
|
|
|
+ padding:5px;
|
|
|
+ background:#BFBFBF;
|
|
|
+}
|
|
|
+
|
|
|
+.la_b_isTel>span>svg{
|
|
|
+ border:solid 2px black;
|
|
|
+ border-radius:50%;
|
|
|
+ width:100%;
|
|
|
+ height:100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items:center;
|
|
|
+}
|
|
|
+</style>
|
SanHQin