Hugging Face's logo

Spaces:
PrixmX
/
ourspace
Build error

App Files Community
ourspace / index.html
ishworrsubedii's picture
ishworrsubedii
add: urdu, llm
8539a09
raw
history blame contribute delete
25.3 kB
<!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 notifications */
 .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 styles */
 .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="api-key"><i class="fas fa-key"></i> API Key</label>
 <input type="password" id="api-key" placeholder="Enter your API key">
 </div> -->
 <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">
 <!-- Boxes will be dynamically added here -->
 </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>
 // The JavaScript remains the same as your original code
 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 apiKeyInput = document.getElementById('api-key');
 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';
 // Hide toast after 5 seconds
 setTimeout(() => {
 toast.style.display = 'none';
 }, 5000);
 }
 async function setupWebRTC() {
 // Replace placeholder with actual configuration
 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';
 // Hide warning after 5 seconds
 setTimeout(() => {
 toast.style.display = 'none';
 }, 5000);
 }, 5000);
 try {
 // Check if mediaDevices is supported
 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));
 // Update audio visualization setup
 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();
 // Add connection state change listener
 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();
 });
 // Handle incoming audio
 peerConnection.addEventListener('track', (evt) => {
 if (audioOutput && audioOutput.srcObject !== evt.streams[0]) {
 audioOutput.srcObject = evt.streams[0];
 audioOutput.play();
 // Set up audio visualization on the output stream
 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();
 }
 });
 // Create data channel for messages
 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,
 // api_key: apiKeyInput.value,
 voice_name: voiceSelect.value
 })
 });
 }
 };
 // Create and send offer
 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) {
 // Clean up all transceivers and tracks
 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', () => {
 // First check for browser support
 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>