pbl-student-table/src/components/classRoomHelper/component/languageAssistant.vue

<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;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 && 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">
        <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"
              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>

        <el-tooltip
          class="item"
          effect="light"
          content="朗读"
          placement="top"
          v-else
        >
          <span class="readAloud" @click.stop="talkAllText">
            <img :src="require('../../../assets/icon/course/start2.png')" />
            <!-- <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">
            <img :src="require('../../../assets/icon/course/stop2.png')" />
            <!-- <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>
        </el-tooltip>
      </div>
      <div class="openMessage" v-if="show">
        <el-checkbox v-model="openMessage">开启字幕</el-checkbox>
      </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: [],
      openMessage: true
    };
  },
  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) {
      try {
				let iiframe = this.$refs["iiframe"];
        iiframe.contentWindow.window.document.getElementById(
          "languageOptions"
        ).selectedIndex = 2; //普通话
				iiframe.contentWindow.testdoContinuousPronunciationAssessment();
        
        // return
        var OpenCC = require("opencc-js");
        let converter = OpenCC.Converter({
          from: "hk",
          to: "cn"
        });
				this.show = true;
        this.showIndex = 0;
				this.showTextIndex = 0;
				this.chatLoading = false;
				this.talkLoading = false;
        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.showIndex = 2;
                  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: [],
                    model: "gpt-4o-2024-08-06"
                  };
                  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 = "";
												this.showIndex = 0;
                      } else {
                        // this.$message.warning(res.data.FunctionResponse.result);
                        console.log(res.data.FunctionResponse.result);
                        this.chatLoading = false;
                        this.aiStatus = 0;
                        this.showTextIndex = 0;
                        this.showIndex = 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.showIndex = 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("不响应");
          }
        };
      } catch (error) {
				console.log(error)
        this.recordStart();
      }
    },
    stopRecord() {
      this.$parent.changeItemType(1);
      this.show = false;
      this.showIndex = 2;
      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 => {
				this.showIndex = 0;
        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();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.recordStart();
    });
  }
};
</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: 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;
}

.la_coco {
  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;
}

.la_m_talk {
  /* width:100%; */
  height: auto;
  /* max-height: calc(100% - 170px - 200px - 40px); */
  box-sizing: border-box;
}

.la_m_talk > div {
  /* padding: 10px; */
  padding: 20px 24px 20px 24px;
  box-sizing: border-box;
  border-radius: 12px;
  text-align: left;
  background: #00000042;
  color: #fff;
}

.la_btn {
  height: 220px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.la_b_noTel {
  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_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 > svg,
img {
  cursor: pointer;
}

.la_b_isTel > span {
  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;
}

.readAloud > svg {
	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>