|
|
@@ -1,41 +1,69 @@
|
|
|
<template>
|
|
|
- <div class="languageAssistant">
|
|
|
- <div class="la_coco">
|
|
|
- <el-image
|
|
|
- style="width: 105px; height: 105px;"
|
|
|
- v-show="showIndex == 2"
|
|
|
- :src="require('../../../assets/icon/course/aiVanish.svg')"
|
|
|
- fit="fill"
|
|
|
- ></el-image>
|
|
|
- <el-image
|
|
|
- style="width: 105px; height: 105px;"
|
|
|
- v-show="showIndex == 0"
|
|
|
- :src="require('../../../assets/icon/course/aiWait.svg')"
|
|
|
- fit="fill"
|
|
|
- ></el-image>
|
|
|
- <el-image
|
|
|
- style="width: 105px; height: 105px;"
|
|
|
- v-show="showIndex == 1"
|
|
|
- :src="require('../../../assets/icon/course/aiTalk.svg')"
|
|
|
- fit="fill"
|
|
|
- ></el-image>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="la_message"
|
|
|
- :style="show ? '' : 'height:calc(100% - 170px - 200px - 40px)'"
|
|
|
- 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">
|
|
|
- <el-tooltip class="item" effect="light" content="通话" placement="top">
|
|
|
- <span>
|
|
|
- <svg
|
|
|
+ <div class="languageAssistant">
|
|
|
+ <div class="la_coco">
|
|
|
+ <el-image
|
|
|
+ style="width: 105px; height: 105px"
|
|
|
+ v-show="showIndex == 2"
|
|
|
+ :src="require('../../../assets/icon/course/aiVanish.svg')"
|
|
|
+ fit="fill"
|
|
|
+ ></el-image>
|
|
|
+ <el-image
|
|
|
+ style="width: 105px; height: 105px;transform: scale(1.7,1.7);"
|
|
|
+ v-show="showIndex == 0"
|
|
|
+ :src="require('../../../assets/icon/course/aiWait2.svg')"
|
|
|
+ fit="fill"
|
|
|
+ ></el-image>
|
|
|
+ <el-image
|
|
|
+ style="width: 105px; height: 105px"
|
|
|
+ v-show="showIndex == 1"
|
|
|
+ :src="require('../../../assets/icon/course/aiTalk.svg')"
|
|
|
+ fit="fill"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="la_message"
|
|
|
+ :style="show ? '' : 'height:calc(100% - 170px - 200px - 40px)'"
|
|
|
+ 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">
|
|
|
+ <el-tooltip class="item" effect="light" content="通话" placement="top">
|
|
|
+ <span>
|
|
|
+ <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>
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="la_b_isTel" v-else>
|
|
|
+ <el-tooltip
|
|
|
+ class="item"
|
|
|
+ effect="light"
|
|
|
+ content="暂停语音"
|
|
|
+ placement="top"
|
|
|
+ v-if="talkLoading"
|
|
|
+ >
|
|
|
+ <span @click.stop="stopTalk">
|
|
|
+ <img :src="require('../../../assets/icon/course/stop1.png')" />
|
|
|
+ <!-- <svg
|
|
|
@click.stop="recordStart"
|
|
|
t="1721367811838"
|
|
|
viewBox="0 0 1024 1024"
|
|
|
@@ -49,83 +77,56 @@
|
|
|
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>
|
|
|
- </el-tooltip>
|
|
|
- </div>
|
|
|
- <div class="la_b_isTel" v-else>
|
|
|
- <el-tooltip
|
|
|
- class="item"
|
|
|
- effect="light"
|
|
|
- content="暂停语音"
|
|
|
- placement="top"
|
|
|
- v-if="talkLoading"
|
|
|
- >
|
|
|
- <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>
|
|
|
- </el-tooltip>
|
|
|
+ </svg> -->
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
|
|
|
- <el-tooltip
|
|
|
- class="item"
|
|
|
- effect="light"
|
|
|
- content="朗读"
|
|
|
- placement="top"
|
|
|
- v-else
|
|
|
- >
|
|
|
- <span @click.stop="talkAllText">
|
|
|
- <svg
|
|
|
- t="1721785394251"
|
|
|
- class="icon"
|
|
|
- viewBox="0 0 1024 1024"
|
|
|
- version="1.1"
|
|
|
- xmlns="http://www.w3.org/2000/svg"
|
|
|
- p-id="4273"
|
|
|
- width="64"
|
|
|
- height="64"
|
|
|
- >
|
|
|
- <path
|
|
|
- d="M310 130.7c-31.3 0-52.4 19.9-52.4 49.5v659.6c0 30.9 25.9 53.4 61.5 53.4 17 0 32.8-5.3 43.9-14.7l444.6-309.3 1.2-1.1c13.3-12.2 20.6-28.4 20.6-45.7s-7.3-33.5-20.6-45.7l-2.1-1.7-443.3-324.9c-13.6-11.8-34.3-19.4-53.4-19.4z"
|
|
|
- p-id="4274"
|
|
|
- ></path>
|
|
|
- </svg>
|
|
|
- </span>
|
|
|
- </el-tooltip>
|
|
|
+ <el-tooltip
|
|
|
+ class="item"
|
|
|
+ effect="light"
|
|
|
+ content="朗读"
|
|
|
+ placement="top"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <span class="readAloud" @click.stop="talkAllText">
|
|
|
+ <svg
|
|
|
+ t="1721117381559"
|
|
|
+ viewBox="0 0 1024 1024"
|
|
|
+ version="1.1"
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ p-id="12941"
|
|
|
+ width="64"
|
|
|
+ height="64"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ 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>
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
|
|
|
- <el-tooltip class="item" effect="light" content="挂断" placement="top">
|
|
|
- <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>
|
|
|
- </el-tooltip>
|
|
|
- <el-tooltip class="item" effect="light" content="中断" placement="top">
|
|
|
- <span @click.stop="interrupt">
|
|
|
- <svg
|
|
|
+ <el-tooltip class="item" effect="light" content="挂断" placement="top">
|
|
|
+ <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>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip class="item" effect="light" content="中断" placement="top">
|
|
|
+ <span @click.stop="interrupt">
|
|
|
+ <img :src="require('../../../assets/icon/course/stop2.png')" />
|
|
|
+ <!-- <svg
|
|
|
t="1721372012678"
|
|
|
class="icon"
|
|
|
viewBox="0 0 1024 1024"
|
|
|
@@ -139,547 +140,554 @@
|
|
|
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>
|
|
|
- </el-tooltip>
|
|
|
- </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>
|
|
|
+ </svg> -->
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ </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>
|
|
|
+ <!-- 文字转语音-->
|
|
|
+ <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;
|
|
|
- });
|
|
|
- },
|
|
|
- talkAllText() {
|
|
|
- if (this.talkLoading && this.aiText == "") return;
|
|
|
- let _resultText = this.removeMarkdown(this.aiText);
|
|
|
- this.talkTextList.push(_resultText);
|
|
|
- this.talkText();
|
|
|
- },
|
|
|
- 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);
|
|
|
+ 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;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ talkAllText() {
|
|
|
+ if (this.talkLoading && this.aiText == "") return;
|
|
|
+ let _resultText = this.removeMarkdown(this.aiText);
|
|
|
+ this.talkTextList.push(_resultText);
|
|
|
+ this.talkText();
|
|
|
+ },
|
|
|
+ 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
|
|
|
- };
|
|
|
+ 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; // 每个段的值
|
|
|
+ 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];
|
|
|
+ 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 === 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 === 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;
|
|
|
- }
|
|
|
- }
|
|
|
+ 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]") {
|
|
|
- this.source.close();
|
|
|
- this.source = null;
|
|
|
- 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;
|
|
|
- } 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;
|
|
|
+ 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]") {
|
|
|
+ this.source.close();
|
|
|
+ this.source = null;
|
|
|
+ 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;
|
|
|
+ } 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 = [];
|
|
|
- try {
|
|
|
- let _talkTextIiframe2 = this.$refs.iiframe2;
|
|
|
- _talkTextIiframe2.contentWindow.pausesynthesizer();
|
|
|
- _talkTextIiframe2.contentWindow.closesynthesizer();
|
|
|
- this.talkLoading = false;
|
|
|
- } catch (error) {
|
|
|
- this.talkLoading = false;
|
|
|
- }
|
|
|
- },
|
|
|
- interrupt() {
|
|
|
- // return this.$message.info("打断")
|
|
|
- if (this.source) {
|
|
|
- try {
|
|
|
- this.source.close();
|
|
|
- } catch (error) {
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
- }
|
|
|
- this.stopTalk();
|
|
|
- }
|
|
|
- }
|
|
|
+ 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 = [];
|
|
|
+ try {
|
|
|
+ let _talkTextIiframe2 = this.$refs.iiframe2;
|
|
|
+ _talkTextIiframe2.contentWindow.pausesynthesizer();
|
|
|
+ _talkTextIiframe2.contentWindow.closesynthesizer();
|
|
|
+ this.talkLoading = false;
|
|
|
+ } catch (error) {
|
|
|
+ this.talkLoading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ interrupt() {
|
|
|
+ // return this.$message.info("打断")
|
|
|
+ if (this.source) {
|
|
|
+ try {
|
|
|
+ this.source.close();
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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%);
|
|
|
+ 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;
|
|
|
+ background-image: url("../../../assets/icon/course/aibgImage.png");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ /* display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center; */
|
|
|
- /* justify-content: center; */
|
|
|
- overflow: auto;
|
|
|
- text-align: center;
|
|
|
+ /* justify-content: center; */
|
|
|
+ overflow: auto;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
.la_coco {
|
|
|
- height: 170px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-end;
|
|
|
+ height: 170px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
}
|
|
|
|
|
|
.la_message {
|
|
|
- /* max-height: 400px; */
|
|
|
- /* min-height: 400px; */
|
|
|
- height: auto;
|
|
|
- max-height: calc(100% - 170px - 200px - 40px);
|
|
|
- width: 100%;
|
|
|
- /* display: flex; */
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- margin: 20px 0;
|
|
|
- overflow: auto;
|
|
|
+ /* max-height: 400px; */
|
|
|
+ /* min-height: 400px; */
|
|
|
+ height: auto;
|
|
|
+ max-height: calc(100% - 170px - 200px - 40px);
|
|
|
+ width: 100%;
|
|
|
+ /* display: flex; */
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 20px 0;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
|
|
|
.la_m_talk {
|
|
|
- /* width:100%; */
|
|
|
- height: auto;
|
|
|
- /* max-height: calc(100% - 170px - 200px - 40px); */
|
|
|
- box-sizing: border-box;
|
|
|
+ /* width:100%; */
|
|
|
+ height: auto;
|
|
|
+ /* max-height: calc(100% - 170px - 200px - 40px); */
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.la_m_talk > div {
|
|
|
- background: #bfbfbf;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-radius: 10px;
|
|
|
- text-align: left;
|
|
|
+ background: #bfbfbf;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 12px;
|
|
|
+ text-align: left;
|
|
|
+ background: #00000042;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
.la_btn {
|
|
|
- height: 200px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
+ height: 200px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
|
|
|
.la_b_noTel {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
-.la_b_noTel >span> svg {
|
|
|
- fill: #52c41a;
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- cursor: pointer;
|
|
|
+.la_b_noTel > span > svg {
|
|
|
+ fill: #52c41a;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.la_b_isTel {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ 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);
|
|
|
+ fill: #ff0e55;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ cursor: pointer;
|
|
|
+ transform: rotate(-135deg);
|
|
|
+}
|
|
|
+
|
|
|
+.la_b_isTel > span > svg,
|
|
|
+img {
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 30px;
|
|
|
+}
|
|
|
+
|
|
|
+.readAloud {
|
|
|
+ border-radius: 100%;
|
|
|
+ background-color: #517291;
|
|
|
+ cursor: pointer;
|
|
|
+ box-shadow: 0px 2px 4px -1px #0000001f;
|
|
|
+
|
|
|
+ box-shadow: 0px 4px 5px 0px #00000014;
|
|
|
+
|
|
|
+ box-shadow: 0px 1px 10px 0px #0000000d;
|
|
|
}
|
|
|
|
|
|
-.la_b_isTel > span > svg {
|
|
|
- border: solid 2px black;
|
|
|
- border-radius: 50%;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+.readAloud > svg {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ fill: #fff;
|
|
|
}
|
|
|
</style>
|
