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) {
			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.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 = "";
										} 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("不响应");
				}
			};
		},
		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) => {
				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>