|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Voice Assistant</title> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
:root { |
|
--color-primary: #7c3aed; |
|
--color-primary-dark: #6d28d9; |
|
--color-primary-light: #a78bfa; |
|
--color-background: #111827; |
|
--color-surface: #1f2937; |
|
--color-surface-light: #374151; |
|
--color-text: #f9fafb; |
|
--color-text-secondary: #d1d5db; |
|
--gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%); |
|
--boxSize: 8px; |
|
--gutter: 4px; |
|
--box-shadow: 0 10px 30px -10px rgba(124, 58, 237, 0.5); |
|
} |
|
|
|
* { |
|
box-sizing: border-box; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
body { |
|
margin: 0; |
|
padding: 0; |
|
background-color: var(--color-background); |
|
color: var(--color-text); |
|
font-family: 'Inter', system-ui, -apple-system, sans-serif; |
|
min-height: 100vh; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
background-image: |
|
radial-gradient(circle at 100% 10%, rgba(124, 58, 237, 0.12) 0%, transparent 30%), |
|
radial-gradient(circle at 10% 90%, rgba(79, 70, 229, 0.12) 0%, transparent 30%); |
|
background-attachment: fixed; |
|
} |
|
|
|
.header { |
|
text-align: center; |
|
margin-bottom: 2rem; |
|
max-width: 600px; |
|
padding: 0 1rem; |
|
} |
|
|
|
.header h1 { |
|
font-size: 2.5rem; |
|
margin-bottom: 0.5rem; |
|
background: var(--gradient); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
font-weight: 800; |
|
letter-spacing: -0.025em; |
|
} |
|
|
|
.header p { |
|
color: var(--color-text-secondary); |
|
font-size: 1.125rem; |
|
margin-bottom: 0.5rem; |
|
line-height: 1.5; |
|
} |
|
|
|
.container { |
|
width: 90%; |
|
max-width: 800px; |
|
background-color: var(--color-surface); |
|
padding: 2.5rem; |
|
border-radius: 1.5rem; |
|
box-shadow: var(--box-shadow); |
|
backdrop-filter: blur(10px); |
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
} |
|
|
|
.wave-container { |
|
position: relative; |
|
display: flex; |
|
min-height: 100px; |
|
max-height: 128px; |
|
justify-content: center; |
|
align-items: center; |
|
margin: 2rem 0; |
|
background-color: var(--color-surface-light); |
|
border-radius: 1rem; |
|
padding: 1rem; |
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
} |
|
|
|
.box-container { |
|
display: flex; |
|
justify-content: space-between; |
|
height: 64px; |
|
width: 100%; |
|
gap: 4px; |
|
} |
|
|
|
.box { |
|
height: 100%; |
|
width: var(--boxSize); |
|
background: var(--gradient); |
|
border-radius: 8px; |
|
transition: transform 0.05s ease; |
|
} |
|
|
|
.controls { |
|
display: grid; |
|
grid-template-columns: 1fr 1fr; |
|
gap: 1.5rem; |
|
margin-bottom: 2rem; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.controls { |
|
grid-template-columns: 1fr; |
|
} |
|
} |
|
|
|
.input-group { |
|
display: flex; |
|
flex-direction: column; |
|
gap: 0.5rem; |
|
} |
|
|
|
label { |
|
font-size: 0.875rem; |
|
font-weight: 600; |
|
color: var(--color-text-secondary); |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
} |
|
|
|
label i { |
|
color: var(--color-primary-light); |
|
} |
|
|
|
input, |
|
select { |
|
padding: 0.75rem; |
|
border-radius: 0.75rem; |
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
background-color: var(--color-background); |
|
color: var(--color-text); |
|
font-size: 1rem; |
|
transition: all 0.2s ease; |
|
} |
|
|
|
input:focus, |
|
select:focus { |
|
outline: none; |
|
border-color: var(--color-primary); |
|
box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3); |
|
} |
|
|
|
button { |
|
padding: 1.25rem; |
|
border-radius: 1rem; |
|
border: none; |
|
background: var(--gradient); |
|
color: white; |
|
font-weight: 600; |
|
font-size: 1.125rem; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
button::before { |
|
content: ''; |
|
position: absolute; |
|
top: 0; |
|
left: -100%; |
|
width: 100%; |
|
height: 100%; |
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); |
|
transition: all 0.6s ease; |
|
} |
|
|
|
button:hover::before { |
|
left: 100%; |
|
} |
|
|
|
button:hover { |
|
transform: translateY(-2px); |
|
box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4); |
|
} |
|
|
|
button:active { |
|
transform: translateY(1px); |
|
} |
|
|
|
.icon-with-spinner { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
gap: 12px; |
|
min-width: 180px; |
|
} |
|
|
|
.spinner { |
|
width: 20px; |
|
height: 20px; |
|
border: 2px solid white; |
|
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: linear-gradient(135deg, #4f46e5, #7c3aed); |
|
opacity: 0.8; |
|
flex-shrink: 0; |
|
transform: translateX(-0%) scale(var(--audio-level, 1)); |
|
transition: transform 0.1s ease; |
|
box-shadow: 0 0 10px rgba(124, 58, 237, 0.7); |
|
} |
|
|
|
|
|
.toast { |
|
position: fixed; |
|
top: 20px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
padding: 1rem 1.5rem; |
|
border-radius: 0.75rem; |
|
font-size: 0.875rem; |
|
z-index: 1000; |
|
display: none; |
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); |
|
animation: slideIn 0.3s ease; |
|
} |
|
|
|
@keyframes slideIn { |
|
from { |
|
transform: translate(-50%, -20px); |
|
opacity: 0; |
|
} |
|
to { |
|
transform: translate(-50%, 0); |
|
opacity: 1; |
|
} |
|
} |
|
|
|
.toast.error { |
|
background-color: #ef4444; |
|
color: white; |
|
border-left: 4px solid #b91c1c; |
|
} |
|
|
|
.toast.warning { |
|
background-color: #f59e0b; |
|
color: white; |
|
border-left: 4px solid #d97706; |
|
} |
|
|
|
|
|
.footer { |
|
margin-top: 2rem; |
|
text-align: center; |
|
font-size: 0.875rem; |
|
color: var(--color-text-secondary); |
|
} |
|
|
|
.footer a { |
|
color: var(--color-primary-light); |
|
text-decoration: none; |
|
} |
|
|
|
.footer a:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.subtitle { |
|
font-size: 1.25rem; |
|
color: var(--color-text-secondary); |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.language-badge { |
|
display: inline-block; |
|
padding: 0.5rem 1rem; |
|
background: var(--gradient); |
|
border-radius: 2rem; |
|
font-size: 1rem; |
|
margin-top: 1rem; |
|
box-shadow: var(--box-shadow); |
|
} |
|
|
|
.feature-badges { |
|
display: flex; |
|
justify-content: center; |
|
gap: 1rem; |
|
margin-bottom: 2rem; |
|
flex-wrap: wrap; |
|
} |
|
|
|
.badge { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
padding: 0.75rem 1.25rem; |
|
background-color: var(--color-surface-light); |
|
border-radius: 1rem; |
|
font-size: 0.875rem; |
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
} |
|
|
|
.badge i { |
|
color: var(--color-primary-light); |
|
} |
|
|
|
.developer-info { |
|
display: flex; |
|
align-items: center; |
|
gap: 1rem; |
|
margin-bottom: 1rem; |
|
} |
|
|
|
.developer-avatar { |
|
width: 48px; |
|
height: 48px; |
|
border-radius: 50%; |
|
border: 2px solid var(--color-primary); |
|
} |
|
|
|
.developer-details { |
|
text-align: left; |
|
} |
|
|
|
.developer-title { |
|
font-size: 0.75rem; |
|
color: var(--color-primary-light); |
|
margin-top: 0.25rem; |
|
} |
|
|
|
.social-links { |
|
display: flex; |
|
gap: 1rem; |
|
margin-top: 1rem; |
|
} |
|
|
|
.social-links a { |
|
color: var(--color-text-secondary); |
|
font-size: 1.25rem; |
|
transition: color 0.2s ease; |
|
} |
|
|
|
.social-links a:hover { |
|
color: var(--color-primary-light); |
|
} |
|
|
|
.footer { |
|
background-color: var(--color-surface); |
|
padding: 1.5rem; |
|
border-radius: 1rem; |
|
margin-top: 2rem; |
|
box-shadow: var(--box-shadow); |
|
border: 1px solid rgba(255, 255, 255, 0.05); |
|
max-width: 600px; |
|
width: 90%; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.feature-badges { |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
|
|
.badge { |
|
width: 100%; |
|
justify-content: center; |
|
} |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="error-toast" class="toast"></div> |
|
|
|
<div class="header"> |
|
<h1>Urdu AI Assistant</h1> |
|
<p class="subtitle">Real-time Urdu conversations powered by advanced AI technology</p> |
|
<div class="language-badge"> |
|
<i class="fas fa-language"></i> |
|
हिंदी / اردو |
|
</div> |
|
</div> |
|
|
|
<div class="container"> |
|
<div class="feature-badges"> |
|
<div class="badge"> |
|
<i class="fas fa-microphone-alt"></i> |
|
Real-time Voice |
|
</div> |
|
<div class="badge"> |
|
<i class="fas fa-brain"></i> |
|
AI Powered |
|
</div> |
|
<div class="badge"> |
|
<i class="fas fa-language"></i> |
|
Urdu Support |
|
</div> |
|
</div> |
|
|
|
<div class="controls"> |
|
|
|
|
|
|
|
|
|
<div class="input-group"> |
|
<label for="voice"><i class="fas fa-microphone-alt"></i> Voice</label> |
|
<select id="voice"> |
|
<option value="Puck">Puck (Casual)</option> |
|
<option value="Charon">Charon (Deep)</option> |
|
<option value="Kore">Kore (Professional)</option> |
|
<option value="Fenrir">Fenrir (Mature)</option> |
|
<option value="Aoede">Aoede (Melodic)</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
<div class="wave-container"> |
|
<div class="box-container"> |
|
|
|
</div> |
|
</div> |
|
|
|
<button id="start-button">Start Conversation</button> |
|
</div> |
|
|
|
<div class="footer"> |
|
<div class="developer-info"> |
|
<img src="https://media.licdn.com/dms/image/v2/D4D03AQFccVUQVirANg/profile-displayphoto-shrink_800_800/profile-displayphoto-shrink_800_800/0/1724430812003?e=1746662400&v=beta&t=w7dT8KntFGMuWX8sIb6J53xSsiV-M_MXLYBnBNVCARg" alt="Ishwor Subedi" class="developer-avatar"> |
|
<div class="developer-details"> |
|
<p>Developed by <a href="https://ishwor-subedi.com.np" target="_blank">Ishwor Subedi</a></p> |
|
<p class="developer-title">AI/ML Engineer & Freelancer</p> |
|
</div> |
|
</div> |
|
<div class="social-links"> |
|
<a href="https://github.com/ishworrsubedii" target="_blank"><i class="fab fa-github"></i></a> |
|
<a href="https://www.linkedin.com/in/ishworrsubedii/" target="_blank"><i class="fab fa-linkedin"></i></a> |
|
<a href="https://www.upwork.com/freelancers/~01a5bd20f3bdbf5bde" target="_blank"><i class="fab fa-upwork"></i></a> |
|
</div> |
|
</div> |
|
|
|
<audio id="audio-output"></audio> |
|
|
|
<script> |
|
|
|
let peerConnection; |
|
let audioContext; |
|
let dataChannel; |
|
let isRecording = false; |
|
let webrtc_id; |
|
let animationId; |
|
let analyser; |
|
let analyser_input; |
|
let dataArray; |
|
let dataArray_input; |
|
|
|
const startButton = document.getElementById('start-button'); |
|
|
|
const voiceSelect = document.getElementById('voice'); |
|
const audioOutput = document.getElementById('audio-output'); |
|
const boxContainer = document.querySelector('.box-container'); |
|
|
|
const numBars = 32; |
|
for (let i = 0; i < numBars; i++) { |
|
const box = document.createElement('div'); |
|
box.className = 'box'; |
|
boxContainer.appendChild(box); |
|
} |
|
|
|
function updateButtonState() { |
|
if (peerConnection && (peerConnection.connectionState === 'connecting' || peerConnection.connectionState === 'new')) { |
|
startButton.innerHTML = ` |
|
<div class="icon-with-spinner"> |
|
<div class="spinner"></div> |
|
<span>Connecting...</span> |
|
</div> |
|
`; |
|
} else if (peerConnection && peerConnection.connectionState === 'connected') { |
|
startButton.innerHTML = ` |
|
<div class="pulse-container"> |
|
<div class="pulse-circle"></div> |
|
<span>End Conversation</span> |
|
</div> |
|
`; |
|
} else { |
|
startButton.innerHTML = 'Start Conversation'; |
|
} |
|
} |
|
|
|
function showError(message) { |
|
const toast = document.getElementById('error-toast'); |
|
toast.textContent = message; |
|
toast.className = 'toast error'; |
|
toast.style.display = 'block'; |
|
|
|
|
|
setTimeout(() => { |
|
toast.style.display = 'none'; |
|
}, 5000); |
|
} |
|
|
|
async function setupWebRTC() { |
|
|
|
const config = { |
|
iceServers: [ |
|
{ urls: 'stun:stun.l.google.com:19302' } |
|
] |
|
}; |
|
peerConnection = new RTCPeerConnection(config); |
|
webrtc_id = Math.random().toString(36).substring(7); |
|
|
|
const timeoutId = setTimeout(() => { |
|
const toast = document.getElementById('error-toast'); |
|
toast.textContent = "Connection is taking longer than usual. Are you on a VPN?"; |
|
toast.className = 'toast warning'; |
|
toast.style.display = 'block'; |
|
|
|
|
|
setTimeout(() => { |
|
toast.style.display = 'none'; |
|
}, 5000); |
|
}, 5000); |
|
|
|
try { |
|
|
|
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { |
|
const errorMsg = 'Your browser does not support audio recording. Please use Chrome, Firefox, or Edge.'; |
|
showError(errorMsg); |
|
throw new Error(errorMsg); |
|
} |
|
|
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); |
|
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream)); |
|
|
|
|
|
audioContext = new AudioContext(); |
|
analyser_input = audioContext.createAnalyser(); |
|
const source = audioContext.createMediaStreamSource(stream); |
|
source.connect(analyser_input); |
|
analyser_input.fftSize = 64; |
|
dataArray_input = new Uint8Array(analyser_input.frequencyBinCount); |
|
|
|
function updateAudioLevel() { |
|
analyser_input.getByteFrequencyData(dataArray_input); |
|
const average = Array.from(dataArray_input).reduce((a, b) => a + b, 0) / dataArray_input.length; |
|
const audioLevel = average / 255; |
|
|
|
const pulseCircle = document.querySelector('.pulse-circle'); |
|
if (pulseCircle) { |
|
pulseCircle.style.setProperty('--audio-level', 1 + audioLevel); |
|
} |
|
|
|
animationId = requestAnimationFrame(updateAudioLevel); |
|
} |
|
updateAudioLevel(); |
|
|
|
|
|
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(); |
|
}); |
|
|
|
|
|
peerConnection.addEventListener('track', (evt) => { |
|
if (audioOutput && audioOutput.srcObject !== evt.streams[0]) { |
|
audioOutput.srcObject = evt.streams[0]; |
|
audioOutput.play(); |
|
|
|
|
|
audioContext = new AudioContext(); |
|
analyser = audioContext.createAnalyser(); |
|
const source = audioContext.createMediaStreamSource(evt.streams[0]); |
|
source.connect(analyser); |
|
analyser.fftSize = 2048; |
|
dataArray = new Uint8Array(analyser.frequencyBinCount); |
|
updateVisualization(); |
|
} |
|
}); |
|
|
|
|
|
dataChannel = peerConnection.createDataChannel('text'); |
|
dataChannel.onmessage = (event) => { |
|
const eventJson = JSON.parse(event.data); |
|
if (eventJson.type === "error") { |
|
showError(eventJson.message); |
|
} else if (eventJson.type === "send_input") { |
|
fetch('/input_hook', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
body: JSON.stringify({ |
|
webrtc_id: webrtc_id, |
|
|
|
voice_name: voiceSelect.value |
|
}) |
|
}); |
|
} |
|
}; |
|
|
|
|
|
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); |
|
} |
|
}); |
|
|
|
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' |
|
? `Too many connections. Maximum limit is ${serverResponse.meta.limit}` |
|
: serverResponse.meta.error); |
|
stopWebRTC(); |
|
startButton.textContent = 'Start Conversation'; |
|
return; |
|
} |
|
|
|
await peerConnection.setRemoteDescription(serverResponse); |
|
} catch (err) { |
|
clearTimeout(timeoutId); |
|
console.error('Error setting up WebRTC:', err); |
|
showError('Failed to establish connection. Please try again.'); |
|
stopWebRTC(); |
|
startButton.textContent = 'Start Conversation'; |
|
} |
|
} |
|
|
|
function updateVisualization() { |
|
if (!analyser) return; |
|
|
|
analyser.getByteFrequencyData(dataArray); |
|
const bars = document.querySelectorAll('.box'); |
|
|
|
for (let i = 0; i < bars.length; i++) { |
|
const barHeight = (dataArray[i] / 255) * 2; |
|
bars[i].style.transform = `scaleY(${Math.max(0.1, barHeight)})`; |
|
} |
|
|
|
animationId = requestAnimationFrame(updateVisualization); |
|
} |
|
|
|
function stopWebRTC() { |
|
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(); |
|
}); |
|
} |
|
|
|
peerConnection.close(); |
|
peerConnection = null; |
|
} |
|
|
|
if (animationId) { |
|
cancelAnimationFrame(animationId); |
|
animationId = null; |
|
} |
|
|
|
if (audioContext) { |
|
audioContext.close(); |
|
audioContext = null; |
|
} |
|
|
|
updateButtonState(); |
|
} |
|
|
|
startButton.addEventListener('click', () => { |
|
|
|
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { |
|
showError('Your browser does not support audio recording. Please use Chrome, Firefox, or Edge.'); |
|
return; |
|
} |
|
|
|
if (!isRecording) { |
|
setupWebRTC(); |
|
startButton.classList.add('recording'); |
|
} else { |
|
stopWebRTC(); |
|
startButton.classList.remove('recording'); |
|
} |
|
isRecording = !isRecording; |
|
}); |
|
</script> |
|
</body> |
|
|
|
</html> |
