mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 09:06:24 +00:00
2c3bc432b3
- PCM 16kHz 포맷 지원으로 Azure Speech 인식 성공 - WebSocket 실시간 전송 기능 추가 - DB 저장 로직 제거 (AI 서비스에서 제안사항 저장) - AI SSE 기반 제안사항 표시 테스트 페이지 추가 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
406 lines
13 KiB
HTML
406 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HGZero STT 실시간 테스트</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
max-width: 900px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #333;
|
|
}
|
|
.container {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
|
}
|
|
h1 {
|
|
color: #667eea;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
.subtitle {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
}
|
|
.controls {
|
|
display: flex;
|
|
gap: 15px;
|
|
justify-content: center;
|
|
margin: 30px 0;
|
|
}
|
|
button {
|
|
padding: 15px 30px;
|
|
font-size: 16px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
font-weight: bold;
|
|
}
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
#startBtn {
|
|
background: #48bb78;
|
|
color: white;
|
|
}
|
|
#startBtn:hover:not(:disabled) {
|
|
background: #38a169;
|
|
transform: translateY(-2px);
|
|
}
|
|
#stopBtn {
|
|
background: #f56565;
|
|
color: white;
|
|
}
|
|
#stopBtn:hover:not(:disabled) {
|
|
background: #e53e3e;
|
|
transform: translateY(-2px);
|
|
}
|
|
.status {
|
|
text-align: center;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
border-radius: 8px;
|
|
font-weight: bold;
|
|
}
|
|
.status.disconnected {
|
|
background: #fed7d7;
|
|
color: #c53030;
|
|
}
|
|
.status.connected {
|
|
background: #c6f6d5;
|
|
color: #276749;
|
|
}
|
|
.status.recording {
|
|
background: #feebc8;
|
|
color: #c05621;
|
|
}
|
|
.info-box {
|
|
background: #ebf8ff;
|
|
border-left: 4px solid #4299e1;
|
|
padding: 15px;
|
|
margin: 20px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.info-box h3 {
|
|
margin-top: 0;
|
|
color: #2c5282;
|
|
}
|
|
#transcript {
|
|
background: #f7fafc;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
min-height: 200px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
margin-top: 20px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.transcript-item {
|
|
padding: 10px;
|
|
margin: 5px 0;
|
|
background: white;
|
|
border-radius: 5px;
|
|
border-left: 3px solid #667eea;
|
|
}
|
|
.timestamp {
|
|
color: #718096;
|
|
font-size: 0.85em;
|
|
margin-bottom: 5px;
|
|
}
|
|
.log {
|
|
background: #1a202c;
|
|
color: #48bb78;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
margin-top: 20px;
|
|
}
|
|
.log-item {
|
|
margin: 3px 0;
|
|
}
|
|
.log-error {
|
|
color: #fc8181;
|
|
}
|
|
.log-info {
|
|
color: #63b3ed;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🎤 HGZero 실시간 STT 테스트</h1>
|
|
<p class="subtitle">WebSocket 기반 실시간 음성-텍스트 변환</p>
|
|
|
|
<div class="info-box">
|
|
<h3>📋 테스트 정보</h3>
|
|
<p><strong>WebSocket URL:</strong> <code id="wsUrl">ws://localhost:8084/ws/audio</code></p>
|
|
<p><strong>Meeting ID:</strong> <code id="meetingId">test-meeting-001</code></p>
|
|
<p><strong>Sample Rate:</strong> 16000 Hz</p>
|
|
</div>
|
|
|
|
<div id="status" class="status disconnected">
|
|
🔴 연결 끊김
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button id="startBtn" onclick="startRecording()">
|
|
🎤 녹음 시작
|
|
</button>
|
|
<button id="stopBtn" onclick="stopRecording()" disabled>
|
|
⏹️ 녹음 중지
|
|
</button>
|
|
</div>
|
|
|
|
<div id="transcript">
|
|
<p style="color: #a0aec0; text-align: center;">여기에 실시간 STT 결과가 표시됩니다...</p>
|
|
</div>
|
|
|
|
<div class="log" id="log">
|
|
<div class="log-item">시스템 로그...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let ws = null;
|
|
let audioContext = null;
|
|
let audioWorkletNode = null;
|
|
let micStream = null;
|
|
let chunkIndex = 0;
|
|
let isRecording = false;
|
|
const meetingId = 'test-meeting-001';
|
|
|
|
// WebSocket 연결
|
|
function connectWebSocket() {
|
|
const wsUrl = 'ws://localhost:8084/ws/audio';
|
|
addLog('WebSocket 연결 시도: ' + wsUrl, 'info');
|
|
|
|
ws = new WebSocket(wsUrl);
|
|
|
|
ws.onopen = () => {
|
|
addLog('✅ WebSocket 연결 성공', 'info');
|
|
updateStatus('connected', '🟢 연결됨');
|
|
document.getElementById('startBtn').disabled = false;
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
addLog('📩 서버 응답: ' + event.data, 'info');
|
|
const data = JSON.parse(event.data);
|
|
|
|
if (data.status === 'started') {
|
|
updateStatus('recording', '🔴 녹음 중...');
|
|
} else if (data.status === 'stopped') {
|
|
updateStatus('connected', '🟢 연결됨 (녹음 종료)');
|
|
} else if (data.transcript) {
|
|
displayTranscript(data);
|
|
}
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
addLog('❌ WebSocket 오류: ' + error, 'error');
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
addLog('🔴 WebSocket 연결 종료', 'error');
|
|
updateStatus('disconnected', '🔴 연결 끊김');
|
|
document.getElementById('startBtn').disabled = true;
|
|
document.getElementById('stopBtn').disabled = true;
|
|
};
|
|
}
|
|
|
|
// PCM 데이터를 16bit로 변환
|
|
function floatTo16BitPCM(float32Array) {
|
|
const buffer = new ArrayBuffer(float32Array.length * 2);
|
|
const view = new DataView(buffer);
|
|
let offset = 0;
|
|
for (let i = 0; i < float32Array.length; i++, offset += 2) {
|
|
let s = Math.max(-1, Math.min(1, float32Array[i]));
|
|
view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
|
|
}
|
|
return buffer;
|
|
}
|
|
|
|
// 녹음 시작
|
|
async function startRecording() {
|
|
try {
|
|
addLog('🎤 마이크 접근 요청...', 'info');
|
|
|
|
micStream = await navigator.mediaDevices.getUserMedia({
|
|
audio: {
|
|
sampleRate: 16000,
|
|
channelCount: 1,
|
|
echoCancellation: true,
|
|
noiseSuppression: true,
|
|
autoGainControl: true
|
|
}
|
|
});
|
|
|
|
addLog('✅ 마이크 접근 허용', 'info');
|
|
|
|
// AudioContext 생성 (16kHz)
|
|
audioContext = new (window.AudioContext || window.webkitAudioContext)({
|
|
sampleRate: 16000
|
|
});
|
|
|
|
const source = audioContext.createMediaStreamSource(micStream);
|
|
|
|
// ScriptProcessorNode로 실시간 PCM 추출 (2048 샘플 = 약 128ms)
|
|
const scriptNode = audioContext.createScriptProcessor(2048, 1, 1);
|
|
|
|
scriptNode.onaudioprocess = (audioProcessingEvent) => {
|
|
if (!isRecording) return;
|
|
|
|
const inputBuffer = audioProcessingEvent.inputBuffer;
|
|
const inputData = inputBuffer.getChannelData(0);
|
|
|
|
// Float32 -> Int16 PCM 변환
|
|
const pcmData = floatTo16BitPCM(inputData);
|
|
|
|
// Base64 인코딩
|
|
const base64Audio = btoa(
|
|
new Uint8Array(pcmData).reduce((data, byte) => data + String.fromCharCode(byte), '')
|
|
);
|
|
|
|
// WebSocket으로 전송
|
|
if (ws.readyState === WebSocket.OPEN) {
|
|
const message = JSON.stringify({
|
|
type: 'chunk',
|
|
meetingId: meetingId,
|
|
audioData: base64Audio,
|
|
timestamp: Date.now(),
|
|
chunkIndex: chunkIndex++,
|
|
format: 'audio/pcm',
|
|
sampleRate: 16000
|
|
});
|
|
|
|
ws.send(message);
|
|
|
|
if (chunkIndex % 10 === 0) {
|
|
addLog(`📤 청크 전송 #${chunkIndex} (${pcmData.byteLength} bytes)`, 'info');
|
|
}
|
|
}
|
|
};
|
|
|
|
source.connect(scriptNode);
|
|
scriptNode.connect(audioContext.destination);
|
|
|
|
chunkIndex = 0;
|
|
isRecording = true;
|
|
|
|
// 녹음 시작 메시지 전송
|
|
ws.send(JSON.stringify({
|
|
type: 'start',
|
|
meetingId: meetingId
|
|
}));
|
|
|
|
document.getElementById('startBtn').disabled = true;
|
|
document.getElementById('stopBtn').disabled = false;
|
|
|
|
addLog('✅ 녹음 시작 (PCM 16kHz, 16bit, Mono)', 'info');
|
|
|
|
} catch (error) {
|
|
addLog('❌ 마이크 접근 실패: ' + error.message, 'error');
|
|
alert('마이크 접근이 거부되었습니다. 브라우저 설정을 확인해주세요.');
|
|
}
|
|
}
|
|
|
|
// 녹음 중지
|
|
function stopRecording() {
|
|
isRecording = false;
|
|
|
|
if (audioContext) {
|
|
audioContext.close();
|
|
audioContext = null;
|
|
}
|
|
|
|
if (micStream) {
|
|
micStream.getTracks().forEach(track => track.stop());
|
|
micStream = null;
|
|
}
|
|
|
|
// 녹음 종료 메시지 전송
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
ws.send(JSON.stringify({
|
|
type: 'stop',
|
|
meetingId: meetingId
|
|
}));
|
|
}
|
|
|
|
document.getElementById('startBtn').disabled = false;
|
|
document.getElementById('stopBtn').disabled = true;
|
|
|
|
addLog('✅ 녹음 종료 명령 전송', 'info');
|
|
}
|
|
|
|
// STT 결과 표시
|
|
function displayTranscript(data) {
|
|
const transcriptDiv = document.getElementById('transcript');
|
|
|
|
const item = document.createElement('div');
|
|
item.className = 'transcript-item';
|
|
|
|
const timestamp = new Date(data.timestamp).toLocaleTimeString('ko-KR');
|
|
item.innerHTML = `
|
|
<div class="timestamp">${timestamp} - 화자: ${data.speaker || '알 수 없음'}</div>
|
|
<div>${data.transcript}</div>
|
|
`;
|
|
|
|
transcriptDiv.appendChild(item);
|
|
transcriptDiv.scrollTop = transcriptDiv.scrollHeight;
|
|
}
|
|
|
|
// 상태 업데이트
|
|
function updateStatus(statusClass, text) {
|
|
const statusDiv = document.getElementById('status');
|
|
statusDiv.className = 'status ' + statusClass;
|
|
statusDiv.textContent = text;
|
|
}
|
|
|
|
// 로그 추가
|
|
function addLog(message, type = 'info') {
|
|
const logDiv = document.getElementById('log');
|
|
const logItem = document.createElement('div');
|
|
logItem.className = 'log-item log-' + type;
|
|
|
|
const timestamp = new Date().toLocaleTimeString('ko-KR', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
});
|
|
|
|
logItem.textContent = `[${timestamp}] ${message}`;
|
|
logDiv.appendChild(logItem);
|
|
logDiv.scrollTop = logDiv.scrollHeight;
|
|
}
|
|
|
|
// 페이지 로드 시 WebSocket 연결
|
|
window.onload = () => {
|
|
addLog('🚀 HGZero STT 테스트 페이지 로드', 'info');
|
|
connectWebSocket();
|
|
};
|
|
|
|
// 페이지 종료 시 정리
|
|
window.onbeforeunload = () => {
|
|
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
|
stopRecording();
|
|
}
|
|
if (ws) {
|
|
ws.close();
|
|
}
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|