Hugging Face's logo

YaTharThShaRma999
/
finetunedmodel

PEFT
Model card Files
xet
Community
finetunedmodel / test.html
YaTharThShaRma999's picture
YaTharThShaRma999
Create test.html
ed9ee9b verified
raw
history blame contribute delete
27.6 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>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<style>
/* Base styles for body - now the main canvas */
body {
font-family: 'Inter', sans-serif;
/* Soft, calming gradient background */
background: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%); /* Very light aqua to very light green */
display: flex;
flex-direction: column; /* Arrange content vertically */
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
overflow: hidden; /* Prevent scrollbar from background */
position: relative;
gap: 2.5rem; /* Spacing between elements */
animation: fadeIn 0.9s ease-out forwards; /* Fade in the whole page */
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
/* Animated background elements for a more dynamic look */
body::before, body::after {
content: '';
position: absolute;
border-radius: 50%;
opacity: 0.5; /* Softer opacity for background glows */
filter: blur(150px); /* Even more blur for a smoother, larger glow */
z-index: -1; /* Ensure they stay behind content */
}
body::before {
width: 450px;
height: 450px;
background: #4dd0e1; /* Cyan */
top: 5%;
left: 10%;
animation: moveBlob1 25s infinite alternate ease-in-out; /* Slower, calmer animation */
}
body::after {
width: 550px;
height: 550px;
background: #a5d6a7; /* Light Green */
bottom: 5%;
right: 8%;
animation: moveBlob2 28s infinite alternate-reverse ease-in-out; /* Slower, calmer animation */
}
@keyframes moveBlob1 {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(70px, -50px) scale(1.08); }
66% { transform: translate(-40px, 60px) scale(0.95); }
100% { transform: translate(0, 0) scale(1); }
}
@keyframes moveBlob2 {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(-60px, 80px) scale(0.9); }
66% { transform: translate(50px, -70px) scale(1.1); }
100% { transform: translate(0, 0) scale(1); }
}
/* Main title styling */
h1 {
color: #37474f; /* Dark text for contrast on light background */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); /* Subtle text shadow */
margin-bottom: 0; /* Adjust spacing as body handles gap */
}
/* Status text styling */
.status-text {
font-size: 2rem; /* Even larger font for main status */
color: #546e7a; /* Muted dark gray for status */
font-weight: 700;
min-height: 3.5rem; /* Reserve more space to prevent CLS */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle text shadow */
}
/* Microphone Button Styling */
.microphone-button {
width: 160px; /* Even larger button */
height: 160px;
border-radius: 50%;
/* Default: subtle, almost translucent white with a light inner glow */
background: rgba(255, 255, 255, 0.9); /* Very subtle transparency */
color: #546e7a; /* Muted gray for default icon */
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem; /* Larger icon */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(255, 255, 255, 0.5); /* Stronger outer shadow, subtle inner glow */
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
border: none;
margin: 0 auto; /* Center the button */
}
.microphone-button:hover {
transform: translateY(-5px) scale(1.05); /* More pronounced lift and grow */
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.7);
}
.microphone-button:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* Active states for microphone button */
.microphone-button.listening {
animation: pulse-active 2.5s infinite ease-in-out; /* Slower, more ethereal pulse */
background: linear-gradient(45deg, #26c6da, #80deea); /* Cyan gradient */
color: white; /* White icon when active */
box-shadow: 0 15px 30px rgba(38, 198, 218, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.5); /* Soft cyan glow */
}
.microphone-button.speaking {
animation: pulse-active 2.5s infinite ease-in-out;
background: linear-gradient(45deg, #66bb6a, #81c784); /* Light green gradient */
color: white; /* White icon when active */
box-shadow: 0 15px 30px rgba(102, 187, 106, 0.4), inset 0 0 30px rgba(255, 255, 255, 0.5); /* Soft green glow */
}
.microphone-button.disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
background: #e0e0e0; /* Light gray for disabled */
color: #9e9e9e; /* Darker muted gray */
animation: none;
}
/* Specific pulse animation for active states */
@keyframes pulse-active {
0% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
70% { transform: scale(1.08); box-shadow: 0 0 0 45px rgba(38, 198, 218, 0); } /* Uses currentColor for dynamic color */
100% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
}
/* SVG Icon styling */
.icon {
width: 4rem; /* Match button size */
height: 4rem;
fill: currentColor; /* Inherit color from parent button */
}
/* Toast Notification System */
#toastContainer {
position: fixed;
top: 20px;
right: 20px;
z-index: 1001;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 300px;
}
.toast-message {
background-color: rgba(0, 0, 0, 0.75); /* Darker toast background for contrast */
color: white;
padding: 12px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
opacity: 0;
transform: translateX(100%);
animation: slideIn 0.5s forwards, fadeOut 0.5s 2.5s forwards;
font-size: 0.9rem;
font-weight: 500;
}
@keyframes slideIn {
to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; transform: translateX(100%); }
}
/* Custom Alert Modal (for critical errors) - adjusted for new light theme */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* Softer overlay */
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.modal.show {
opacity: 1;
visibility: visible;
}
.modal-content {
background-color: white; /* White modal content */
color: #37474f; /* Dark text */
padding: 3rem;
border-radius: 2rem;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Softer shadow */
text-align: center;
max-width: 500px;
width: 90%;
transform: translateY(-50px) scale(0.9);
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), opacity 0.4s ease;
/* No border */
}
.modal.show .modal-content {
transform: translateY(0) scale(1);
}
.modal-button {
background: linear-gradient(45deg, #4dd0e1, #26c6da); /* Calming blue/cyan gradient for modal button */
color: white;
padding: 0.8rem 1.8rem;
border-radius: 1rem;
margin-top: 2rem;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.modal-button:hover {
background: linear-gradient(45deg, #00acc1, #4dd0e1);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* New Styles for More Options panel */
.options-button {
position: fixed;
top: 20px;
left: 20px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
padding: 0.75rem 1.25rem;
border-radius: 1.5rem;
font-weight: 600;
color: #37474f;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.options-button:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.settings-panel {
position: fixed;
top: 0;
left: 0;
width: 350px;
height: 100vh;
padding: 4rem 2.5rem;
background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 5px 0 30px rgba(0, 0, 0, 0.2);
transform: translateX(-100%);
transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
z-index: 9;
display: flex;
flex-direction: column;
gap: 2rem;
}
.settings-panel.open {
transform: translateX(0);
}
</style>
</head>
<body>
<h1 class="text-5xl font-extrabold mb-4 text-shadow-lg">Voice Assistant</h1>
<div class="flex flex-col items-center gap-2">
<p id="statusText" class="status-text">Tap to speak</p>
</div>
<button id="microphoneButton" class="microphone-button">
<svg class="icon" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C10.9 2 10 2.9 10 4v8c0 1.1.9 2 2 2s2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 17.92V22h2v-2.08c3.61-.49 6.4-3.5 6.4-7.42h-2c0 3.03-2.47 5.5-5.5 5.5S6.6 15.53 6.6 12H4.6c0 3.92 2.79 6.93 6.4 7.42z"/>
</svg>
</button>
<audio id="audio_output_component_id" autoplay class="hidden"></audio>
<button id="optionsButton" class="options-button">More Options</button>
<div id="settingsPanel" class="settings-panel">
<h2 class="text-3xl font-extrabold text-gray-800">Settings</h2>
<div class="flex flex-col gap-4">
<h3 class="text-xl font-bold text-gray-600">Upload File</h3>
<p class="text-sm text-gray-500">Upload a file to be used by the assistant.</p>
<input type="file" id="fileInput" class="rounded-lg p-2 text-gray-700 bg-gray-100 border border-gray-300">
<button id="uploadButton" class="btn bg-gray-700 text-white p-3 rounded-xl transition hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed">Upload File</button>
</div>
<div id="fileUploadStatus" class="text-sm text-gray-700 mt-4"></div>
</div>
<div id="toastContainer"></div>
<div id="customAlertModal" class="modal">
<div class="modal-content">
<p id="alertMessage" class="text-2xl font-semibold"></p>
<button id="alertCloseButton" class="modal-button">OK</button>
</div>
</div>
<script type="module">
// Firebase imports
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
// Global WebRTC variables
let pc; // RTCPeerConnection instance
let localStream; // User's microphone stream
let webrtc_id; // Unique ID for this WebRTC session
let isWebRTCConnected = false; // Track connection state
let isListening = false; // Track if microphone is active for listening
// ** Explicitly define the signaling server URL **
const SIGNALING_SERVER_URL = 'https://c71505dfda9a.ngrok-free.app'; // Base URL
// Firebase variables
let db;
let auth;
let userId; // userId will still be used internally for signaling
// ** Your Firebase configuration **
const firebaseConfig = {
apiKey: "AIzaSyBWv5gIXhyHMIzBCH5oFDlSsJhXWzov-ms",
authDomain: "test2-947ce.firebaseapp.com",
projectId: "test2-947ce",
storageBucket: "test2-947ce.firebasestorage.app",
messagingSenderId: "211407958561",
appId: "1:211407958561:web:ea24b5a4da5e1053a5e960",
measurementId: "G-673MR7TX2C"
};
const appId = firebaseConfig.appId;
// UI Elements
const microphoneButton = document.getElementById('microphoneButton');
const statusText = document.getElementById('statusText');
const audioOutputComponent = document.getElementById("audio_output_component_id");
const customAlertModal = document.getElementById('customAlertModal');
const alertMessage = document.getElementById('alertMessage');
const alertCloseButton = document.getElementById('alertCloseButton');
const toastContainer = document.getElementById('toastContainer');
const optionsButton = document.getElementById('optionsButton');
const settingsPanel = document.getElementById('settingsPanel');
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');
const fileUploadStatus = document.getElementById('fileUploadStatus');
/**
* Displays a custom alert modal instead of window.alert().
* Used for critical errors that require user attention.
* @param {string} message The message to display.
*/
function showAlert(message) {
alertMessage.textContent = message;
customAlertModal.classList.add('show');
}
// Close the custom alert modal
alertCloseButton.addEventListener('click', () => {
customAlertModal.classList.remove('show');
});
/**
* Displays a transient toast message in the top-right corner.
* @param {string} message The message to display.
* @param {number} duration The duration in milliseconds for the toast to be visible (default: 3000ms).
*/
function showToast(message, duration = 3000) {
const toast = document.createElement('div');
toast.classList.add('toast-message');
toast.textContent = message;
toastContainer.appendChild(toast);
setTimeout(() => {
toast.remove();
}, duration);
}
/**
* Updates the main status text on the UI.
* @param {string} text The status message.
*/
function updateStatus(text) {
statusText.textContent = text;
}
/**
* Initializes Firebase and authenticates the user.
*/
async function initializeFirebase() {
try {
const app = initializeApp(firebaseConfig);
auth = getAuth(app);
db = getFirestore(app);
onAuthStateChanged(auth, async (user) => {
if (user) {
userId = user.uid;
// User ID is no longer displayed on UI, but kept for internal use.
} else {
try {
if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
await signInWithCustomToken(auth, __initial_auth_token);
} else {
await signInAnonymously(auth);
}
} catch (error) {
console.error("Firebase Auth Error:", error);
showAlert(`Firebase authentication failed: ${error.message}`);
}
}
});
} catch (error) {
console.error("Error initializing Firebase:", error);
showAlert(`Failed to initialize Firebase: ${error.message}`);
}
}
/**
* Sets up the WebRTC peer connection.
*/
async function startWebRTC() {
if (isWebRTCConnected) {
showToast('WebRTC is already connected.');
return;
}
try {
updateStatus('Connecting...');
microphoneButton.classList.add('disabled'); // Disable button during connection setup
showToast('Initializing connection...');
pc = new RTCPeerConnection({
iceServers: [
{ urls: 'stun:stun.l.google.com:19302' }
]
});
localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
showToast('Microphone access granted.');
localStream.getTracks().forEach((track) => {
pc.addTrack(track, localStream);
});
pc.addEventListener("track", (evt) => {
if (audioOutputComponent && audioOutputComponent.srcObject !== evt.streams[0]) {
audioOutputComponent.srcObject = evt.streams[0];
audioOutputComponent.play().then(() => {
showToast('Assistant is speaking...');
updateStatus('Speaking...');
microphoneButton.classList.remove('listening');
microphoneButton.classList.add('speaking');
}).catch(e => console.error("Error playing audio:", e));
// Listen for when audio finishes playing
audioOutputComponent.onended = () => {
updateStatus('Listening...');
microphoneButton.classList.remove('speaking');
microphoneButton.classList.add('listening');
showToast('Ready for your next command.');
};
}
});
const dataChannel = pc.createDataChannel("text");
dataChannel.onopen = () => showToast('Data channel opened.');
dataChannel.onclose = () => showToast('Data channel closed.');
dataChannel.onerror = (err) => showToast(`Data channel error: ${err.message}`, 5000);
webrtc_id = Math.random().toString(36).substring(7);
pc.onicecandidate = ({ candidate }) => {
if (candidate) {
fetch(`${SIGNALING_SERVER_URL}/webrtc/offer`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
candidate: candidate.toJSON(),
webrtc_id: webrtc_id,
type: "ice-candidate",
userId: userId
})
})
.then(response => {
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
return response.json();
})
.catch(error => showToast(`Error sending ICE candidate: ${error.message}`, 5000));
}
};
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
const response = await fetch(`${SIGNALING_SERVER_URL}/webrtc/offer`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
sdp: offer.sdp,
type: offer.type,
webrtc_id: webrtc_id,
userId: userId
})
});
const serverResponse = await response.json();
// FIX: Explicitly create RTCSessionDescription with type 'answer'
await pc.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: serverResponse.sdp }));
isWebRTCConnected = true;
microphoneButton.classList.remove('disabled');
microphoneButton.classList.add('listening'); // Indicate ready to listen
updateStatus('Listening...');
showToast('WebRTC connected. Tap to speak!');
pc.onconnectionstatechange = () => {
if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed' || pc.connectionState === 'closed') {
showToast('WebRTC connection lost or failed.', 5000);
stopWebRTC();
} else if (pc.connectionState === 'connected') {
updateStatus('Listening...');
microphoneButton.classList.add('listening');
microphoneButton.classList.remove('speaking');
}
};
} catch (error) {
console.error("Error setting up WebRTC:", error);
showAlert(`Failed to start WebRTC: ${error.message}. Please ensure your microphone is available and try again.`);
updateStatus('Error');
microphoneButton.classList.remove('disabled', 'listening', 'speaking');
stopWebRTC(); // Clean up if setup fails
}
}
/**
* Stops the WebRTC peer connection.
*/
function stopWebRTC() {
if (!isWebRTCConnected && !pc) {
showToast('WebRTC is already stopped.');
return;
}
updateStatus('Stopping...');
showToast('Stopping connection...');
if (localStream) {
localStream.getTracks().forEach(track => track.stop());
localStream = null;
}
if (pc && pc.connectionState !== 'closed') {
pc.close();
}
pc = null;
if (audioOutputComponent) {
audioOutputComponent.srcObject = null;
audioOutputComponent.pause();
audioOutputComponent.currentTime = 0;
}
isWebRTCConnected = false;
isListening = false;
microphoneButton.classList.remove('listening', 'speaking', 'disabled');
updateStatus('Tap to speak');
showToast('WebRTC connection ended.');
}
/**
* Toggles the WebRTC connection based on its current state.
*/
async function toggleWebRTC() {
if (isWebRTCConnected) {
stopWebRTC();
} else {
await startWebRTC();
}
}
// Event Listener for the central microphone button
microphoneButton.addEventListener('click', toggleWebRTC);
// Options panel logic
optionsButton.addEventListener('click', () => {
settingsPanel.classList.toggle('open');
});
// File upload logic
uploadButton.addEventListener('click', async () => {
const file = fileInput.files[0];
if (!file) {
fileUploadStatus.textContent = 'Please select a file to upload.';
return;
}
if (!userId) {
fileUploadStatus.textContent = 'Authentication not ready, please wait.';
return;
}
fileUploadStatus.textContent = 'Uploading...';
uploadButton.disabled = true;
const reader = new FileReader();
reader.onload = async function(event) {
const base64String = event.target.result.split(',')[1];
try {
const response = await fetch(`${SIGNALING_SERVER_URL}/settings`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
userId: userId,
fileName: file.name,
fileType: file.type,
voice_cloning_file: base64String // Changed key name here
})
});
if (response.ok) {
fileUploadStatus.textContent = `File "${file.name}" uploaded successfully!`;
fileInput.value = ''; // Clear the file input
showToast('Settings updated with file upload!');
} else {
const errorData = await response.json();
fileUploadStatus.textContent = `Upload failed: ${errorData.error}`;
showToast('File upload failed.', 5000);
}
} catch (error) {
fileUploadStatus.textContent = `An error occurred: ${error.message}`;
showToast('An error occurred during upload.', 5000);
} finally {
uploadButton.disabled = false;
}
};
reader.readAsDataURL(file);
});
// Initialize Firebase when the window loads
window.onload = initializeFirebase;
</script>
</body>
</html>