voicechat

Running

App Files Files Community

voicechat / index.html

seawolf2357

Update index.html

6beba0c verified 8 months ago

raw

history blame

13.5 kB

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

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>'MOUSE'와 실시간 음성 대화</title>
	<style>
	body {
	font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: #0a0a0a;
	color: #ffffff;
	margin: 0;
	padding: 20px;
	height: 100vh;
	box-sizing: border-box;
	}

	.container {
	max-width: 800px;
	margin: 0 auto;
	height: calc(100% - 100px);
	}

	.logo {
	text-align: center;
	margin-bottom: 40px;
	}

	.chat-container {
	border: 1px solid #333;
	padding: 20px;
	height: 90%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	}

	.chat-messages {
	flex-grow: 1;
	overflow-y: auto;
	margin-bottom: 20px;
	padding: 10px;
	}

	.message {
	margin-bottom: 20px;
	padding: 12px;
	border-radius: 4px;
	font-size: 16px;
	line-height: 1.5;
	}

	.message.user {
	background-color: #1a1a1a;
	margin-left: 20%;
	}

	.message.assistant {
	background-color: #262626;
	margin-right: 20%;
	}

	.controls {
	text-align: center;
	margin-top: 20px;
	}

	button {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid #ffffff;
	padding: 12px 24px;
	font-family: inherit;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	button:hover {
	border-width: 2px;
	transform: scale(1.02);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
	}

	#audio-output {
	display: none;
	}

	.icon-with-spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 180px;
	}

	.spinner {
	width: 20px;
	height: 20px;
	border: 2px solid #ffffff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	flex-shrink: 0;
	}

	@keyframes spin {
	to {
	transform: rotate(360deg);
	}
	}

	.pulse-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 180px;
	}

	.pulse-circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #ffffff;
	opacity: 0.2;
	flex-shrink: 0;
	transform: translateX(-0%) scale(var(--audio-level, 1));
	transition: transform 0.1s ease;
	}

	/* Add styles for toast notifications */
	.toast {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	padding: 16px 24px;
	border-radius: 4px;
	font-size: 14px;
	z-index: 1000;
	display: none;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	.toast.error {
	background-color: #f44336;
	color: white;
	}

	.toast.warning {
	background-color: #ffd700;
	color: black;
	}
	</style>
	</head>

	<body>
	<!-- Add toast element after body opening tag -->
	<div id="error-toast" class="toast"></div>
	<div class="container">
	<div class="logo">
	<h1>OpenAI 실시간 대화</h1>
	</div>
	<div class="chat-container">
	<div class="chat-messages" id="chat-messages"></div>
	</div>
	<div class="controls">
	<button id="start-button">대화 시작</button>
	</div>
	</div>
	<audio id="audio-output"></audio>

	<script>
	let peerConnection;
	let webrtc_id;
	const audioOutput = document.getElementById('audio-output');
	const startButton = document.getElementById('start-button');
	const chatMessages = document.getElementById('chat-messages');

	let audioLevel = 0;
	let animationFrame;
	let audioContext, analyser, audioSource;

	function updateButtonState() {
	const button = document.getElementById('start-button');
	if (peerConnection && (peerConnection.connectionState === 'connecting' \|\| peerConnection.connectionState === 'new')) {
	button.innerHTML = `
	<div class="icon-with-spinner">
	<div class="spinner"></div>
	<span>연결 중...</span>
	</div>
	`;
	} else if (peerConnection && peerConnection.connectionState === 'connected') {
	button.innerHTML = `
	<div class="pulse-container">
	<div class="pulse-circle"></div>
	<span>대화 종료</span>
	</div>
	`;
	} else {
	button.innerHTML = '대화 시작';
	}
	}

	function setupAudioVisualization(stream) {
	audioContext = new (window.AudioContext \|\| window.webkitAudioContext)();
	analyser = audioContext.createAnalyser();
	audioSource = audioContext.createMediaStreamSource(stream);
	audioSource.connect(analyser);
	analyser.fftSize = 64;
	const dataArray = new Uint8Array(analyser.frequencyBinCount);

	function updateAudioLevel() {
	analyser.getByteFrequencyData(dataArray);
	const average = Array.from(dataArray).reduce((a, b) => a + b, 0) / dataArray.length;
	audioLevel = average / 255;

	// Update CSS variable instead of rebuilding the button
	const pulseCircle = document.querySelector('.pulse-circle');
	if (pulseCircle) {
	pulseCircle.style.setProperty('--audio-level', 1 + audioLevel);
	}

	animationFrame = requestAnimationFrame(updateAudioLevel);
	}
	updateAudioLevel();
	}

	function showError(message) {
	const toast = document.getElementById('error-toast');
	toast.textContent = message;
	toast.style.display = 'block';

	// Hide toast after 5 seconds
	setTimeout(() => {
	toast.style.display = 'none';
	}, 5000);
	}

	async function setupWebRTC() {
	isConnecting = true;
	const config = __RTC_CONFIGURATION__;
	peerConnection = new RTCPeerConnection(config);

	const timeoutId = setTimeout(() => {
	const toast = document.getElementById('error-toast');
	toast.textContent = "연결이 평소보다 오래 걸리고 있습니다. VPN을 사용 중이신가요?";
	toast.className = 'toast warning';
	toast.style.display = 'block';

	// Hide warning after 5 seconds
	setTimeout(() => {
	toast.style.display = 'none';
	}, 5000);
	}, 5000);

	try {
	const stream = await navigator.mediaDevices.getUserMedia({
	audio: true
	});

	setupAudioVisualization(stream);

	stream.getTracks().forEach(track => {
	peerConnection.addTrack(track, stream);
	});

	peerConnection.addEventListener('track', (evt) => {
	if (audioOutput.srcObject !== evt.streams[0]) {
	audioOutput.srcObject = evt.streams[0];
	audioOutput.play();
	}
	});

	const dataChannel = peerConnection.createDataChannel('text');
	dataChannel.onmessage = (event) => {
	const eventJson = JSON.parse(event.data);
	if (eventJson.type === "error") {
	showError(eventJson.message);
	}
	};

	const offer = await peerConnection.createOffer();
	await peerConnection.setLocalDescription(offer);

	await new Promise((resolve) => {
	if (peerConnection.iceGatheringState === "complete") {
	resolve();
	} else {
	const checkState = () => {
	if (peerConnection.iceGatheringState === "complete") {
	peerConnection.removeEventListener("icegatheringstatechange", checkState);
	resolve();
	}
	};
	peerConnection.addEventListener("icegatheringstatechange", checkState);
	}
	});

	peerConnection.addEventListener('connectionstatechange', () => {
	console.log('connectionstatechange', peerConnection.connectionState);
	if (peerConnection.connectionState === 'connected') {
	clearTimeout(timeoutId);
	const toast = document.getElementById('error-toast');
	toast.style.display = 'none';
	}
	updateButtonState();
	});

	webrtc_id = Math.random().toString(36).substring(7);

	const response = await fetch('/webrtc/offer', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({
	sdp: peerConnection.localDescription.sdp,
	type: peerConnection.localDescription.type,
	webrtc_id: webrtc_id
	})
	});

	const serverResponse = await response.json();

	if (serverResponse.status === 'failed') {
	showError(serverResponse.meta.error === 'concurrency_limit_reached'
	? `너무 많은 연결입니다. 최대 한도는 ${serverResponse.meta.limit} 입니다.`
	: serverResponse.meta.error);
	stop();
	return;
	}

	await peerConnection.setRemoteDescription(serverResponse);

	const eventSource = new EventSource('/outputs?webrtc_id=' + webrtc_id);
	eventSource.addEventListener("output", (event) => {
	const eventJson = JSON.parse(event.data);
	addMessage("assistant", eventJson.content);
	});
	} catch (err) {
	clearTimeout(timeoutId);
	console.error('Error setting up WebRTC:', err);
	showError('연결을 설정하지 못했습니다. 다시 시도해 주세요.');
	stop();
	}
	}

	function addMessage(role, content) {
	const messageDiv = document.createElement('div');
	messageDiv.classList.add('message', role);
	messageDiv.textContent = content;
	chatMessages.appendChild(messageDiv);
	chatMessages.scrollTop = chatMessages.scrollHeight;
	}

	function stop() {
	if (animationFrame) {
	cancelAnimationFrame(animationFrame);
	}
	if (audioContext) {
	audioContext.close();
	audioContext = null;
	analyser = null;
	audioSource = null;
	}
	if (peerConnection) {
	if (peerConnection.getTransceivers) {
	peerConnection.getTransceivers().forEach(transceiver => {
	if (transceiver.stop) {
	transceiver.stop();
	}
	});
	}

	if (peerConnection.getSenders) {
	peerConnection.getSenders().forEach(sender => {
	if (sender.track && sender.track.stop) sender.track.stop();
	});
	}
	console.log('closing');
	peerConnection.close();
	}
	updateButtonState();
	audioLevel = 0;
	}

	startButton.addEventListener('click', () => {
	console.log('clicked');
	console.log(peerConnection, peerConnection?.connectionState);
	if (!peerConnection \|\| peerConnection.connectionState !== 'connected') {
	setupWebRTC();
	} else {
	console.log('stopping');
	stop();
	}
	});
	</script>
	</body>

	</html>