chatgpt-compact-app
/
index.html

<!DOCTYPE html>
<html lang="">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>ChatGPT-3.5</title>
		<link rel="stylesheet" href="/css/article-detail.css?v=1.2">
		<link href="./css/chat/chunk-vendors.a4929332.css" rel="stylesheet">
		<link href="./css/chat/app.adcfe76c.css?v=0.5" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="./css/chat/193.334182a1.css">
		<style>
			#message-list {
				background-color: #F3FAFF;
			}

			.sendicon {
				width: 25px;
			}
		</style>
	</head>

	<body class="">

		<noscript>
			<strong>We're sorry but vue-chatgpt doesn't work properly without JavaScript enabled. Please enable it to
				continue.</strong>
		</noscript>
		<div id="app">
			<header>
				<div data-v-84736974="" class="home container">
					<div data-v-84736974="" class="right_content">
						<div data-v-84736974="" id="message-list" class="chat-list message-list">
							<!-- ai -->
							<div data-v-84736974="" class="chat-item left">
								<!-- <div data-v-84736974="">
							<div data-v-84736974=""> -->
								<div data-v-84736974="" class="van-image van-image--round">
									<img src="./css/chat/user_avatar.png" class="van-image__img"
										style="object-fit: cover;">
								</div>
								<div data-v-84736974="" class="chat-pao">
									<span data-v-84736974="">你好，我是人工智能聊天GPT机器人，一个由基于大数据训练的大型语言模型，请问你需要什么帮助？</span>
								</div>
								<!-- </div>
						</div> -->
							</div>
							<!-- me -->

						</div>
						<div data-v-84736974="" class="reply-container van-hairline--top" id="to-question">
							<div data-v-9cec4716="" data-v-84736974="" style="background-color:#fff;padding-top:10px;"
								class="">
							</div>
							<div data-v-84736974="" class="van-cell van-field">
								<div class="van-cell__value van-cell__value--alone van-field__value">
									<div class="van-field__body">
										<input type="text" preventreclick="2000" placeholder="说点什么..."
											class="van-field__control">
										<div class="van-field__button">
											<span data-v-84736974="">
												<img src="./css/chat/send.png" class="sendicon">
											</span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		</div>
	</body>

</html>
<script src="./js/jquery-3.4.1.min.js"></script>
<script>
	var T;
	var flag = true;
	var keywords;
	var openapi = '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';
	var spannum = 0; //记录回复的条数
	var socket;
	let uuid_str = '';
	let text = '';
	let uid = localStorage.getItem("uid");
	if (uid == null || uid == '' || uid == 'null') {
		uid = uuid();
		localStorage.setItem("uid", uid);
	}
	//实现化WebSocket对象
	//指定要连接的服务器地址与端口建立连接
	//注意ws、wss使用不同的端口。我使用自签名的证书测试，
	//无法使用wss，浏览器打开WebSocket时报错
	//ws对应http、wss对应https。
	socket = new WebSocket("ws://154.38.244.13:8011/websocket/distribute/350/610/7/" + uid + "?apiKey=" + openapi);
	//连接打开事件
	socket.onopen = function(event) {
		// console.log("Socket 已打开", event);
	};

	socket.onmessage = function(msg) {
		if (msg.data == "[DONE]") {
			// console.log('发送完了')
			spannum++;
			text = '';
			return;
		}
		let json_data = JSON.parse(msg.data)
		if (json_data.content == null || json_data.content == 'null') {
			text = '';
			return;
		}
		text = text + json_data.content;
		if (!flag) {
			$('#message-list').find('#tips').remove() //移除正在输入
			clearInterval(T)
			$('#message-list').append(`
			<div data-v-84736974="" class="chat-item left">
				<div data-v-84736974="" class="van-image van-image--round">
					<img src="./css/chat/user_avatar.png" class="van-image__img" style="object-fit: cover;">
				</div>
				<div data-v-84736974="" class="chat-pao">
					<span data-v-84736974="" id="span${spannum}"></span>
				</div>
			</div>
			`)
		}
		flag = true;
		$(`#span${spannum}`).html(text)
	};
	//发生了错误事件
	socket.onerror = function() {
		alert("服务异常请重试并联系开发者！")
	}
	// 窗口关闭时，关闭连接
	window.unload = function(event) {
		console.log("Socket 已关闭", event);
		socket.close();
	};
	//连接关闭事件
	socket.onclose = function() {
		console.log("Socket已关闭", event);
	};

	//发送信息
	function goMes() {
		keywords = $('.van-field__control').val()
		if (keywords == '') {
			alert('输入不能为空哦~')
			return
		}
		if (flag) {
			flag = false;
			// gpt() //chatgpt接口
			// 判断 WebSocket 连接状态是否为 OPEN
			if (socket.readyState === WebSocket.OPEN) {
				socket.send(keywords);
			} else {
				alert('出问题啦~请联系开发者')
				console.error("WebSocket is not in OPEN state.");
			}
			$('.van-field__control').val('')
			$('#message-list').append(`
		<div data-v-84736974="" class="chat-item right">
			<div data-v-84736974="" class="chat-pao">
				<span data-v-84736974="">${keywords}</span>
			</div>
			<div data-v-84736974="" class="van-image van-image--round">
				<img src="./css/chat/user.png" class="van-image__img" style="object-fit: cover;">
			</div>
		</div>
		`)
			$('#message-list').append(`
			<div data-v-84736974="" class="chat-item left" id="tips">
				<div data-v-84736974="" class="van-image van-image--round">
					<img src="./css/chat/user_avatar.png" class="van-image__img" style="object-fit: cover;">
				</div>
				<div data-v-84736974="" class="chat-pao">
					<span data-v-84736974="" >正在输入中<span class="chat-pao-son"></span></span></span></span>
				</div>
			</div>
		`)
			loading()
		} else {
			alert('请等待回复后再提问哦~')
			$('.van-field__control').val('')
			return
		}
	}
	$('.van-field__button').click(goMes)

	//回车发送
	$('.van-field__control').on('keydown', function(event) {
		if (event.keyCode === 13) {
			event.preventDefault(); // 阻止默认行为
			// 执行操作...
			goMes()
		}
	});

	function loading() {
		let num = 1
		T = setInterval(() => {
			if (num == 1) {
				$('#tips').find('.chat-pao-son').html('.')
				num++
			} else if (num == 2) {
				$('#tips').find('.chat-pao-son').html('..')
				num++
			} else if (num == 3) {
				$('#tips').find('.chat-pao-son').html('...')
				num++
			} else {
				$('#tips').find('.chat-pao-son').html('')
				num = 1
			}
		}, 500);
	}

	function uuid() {
		var s = [];
		var hexDigits = "0123456789abcdef";
		for (var i = 0; i < 36; i++) {
			s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
		}
		s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
		s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
		s[8] = s[13] = s[18] = s[23] = "-";

		var uuid = s.join("");
		return uuid;
	}

	//旧，不能即时通信
	function gpt() {
		$.ajax({
			url: 'http://api.zszhan.cn/ai/chat/v4',
			type: 'post', //get/post
			dataType: 'json', //html/text/json/script/xml等
			data: {
				"question": keywords,
				"token": openapi,
			},
			async: true, //是否异步
			success(response) { //回调函数，成功取得数据后的处理
				if (response != null) {
					$('#message-list').find('#tips').remove() //移除正在输入
					clearInterval(T)
					$('#message-list').append(`
						<div data-v-84736974="" class="chat-item left">
							<div data-v-84736974="" class="van-image van-image--round">
								<img src="./css/chat/chatgpticon.jpg" class="van-image__img" style="object-fit: cover;">
							</div>
							<div data-v-84736974="" class="chat-pao">
								<span data-v-84736974="">${response.data}</span>
							</div>
						</div>
						`)
					flag = true;
				}
			},
			error(err) { //回调函数，发生错误
				alert('额度用完啦，请及时更换')
			}
		})
	}
</script>