File size: 4,402 Bytes
4e70d0d 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 fc1bc87 0e4d29e d4eb4c5 6b18c62 19b4f7c 6b18c62 0e4d29e 6b18c62 a945a59 6b18c62 d4eb4c5 a945a59 d4eb4c5 6b18c62 fc1bc87 6b18c62 fc1bc87 6b18c62 b31d6fc 6b18c62 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🍛 Biryani Hub - Voice Registration</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #ff6f61, #ffcc00);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background: rgba(255, 255, 255, 0.9);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 500px;
width: 100%;
}
h1 {
font-size: 2.5rem;
color: #ff6f61;
margin-bottom: 1rem;
}
p {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.btn {
background: #ff6f61;
color: white;
border: none;
padding: 0.8rem 2rem;
font-size: 1rem;
border-radius: 25px;
cursor: pointer;
transition: background 0.3s ease;
}
.btn:hover {
background: #ff4a3d;
}
.status {
margin-top: 1.5rem;
font-size: 0.9rem;
color: #666;
}
.input-field {
margin: 1rem 0;
padding: 0.8rem;
width: 100%;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Biryani Hub 🍛</h1>
<p>Register using your voice! Click below to start.</p>
<!-- Input Fields -->
<input type="text" id="name" class="input-field" placeholder="Your Name" readonly>
<input type="text" id="email" class="input-field" placeholder="Your Email" readonly>
<!-- Action Button -->
<button class="btn" id="startBtn">Start Voice Registration</button>
<!-- Status Message -->
<p class="status" id="status">Press the button and speak clearly.</p>
</div>
<script>
// Hugging Face ASR Integration
async function transcribeSpeech(audioBlob) {
const response = await fetch("https://api-inference.huggingface.co/models/openai/whisper-small", {
headers: { Authorization: "Bearer YOUR_HF_TOKEN" },
method: "POST",
body: audioBlob,
});
return await response.json();
}
// Voice Registration Logic
let isProcessing = false;
const startBtn = document.getElementById('startBtn');
const status = document.getElementById('status');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
startBtn.addEventListener('click', async () => {
if (isProcessing) return;
isProcessing = true;
status.textContent = "Listening... Speak your name letter by letter.";
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mediaRecorder = new MediaRecorder(stream);
let audioChunks = [];
mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
mediaRecorder.onstop = async () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
const transcription = await transcribeSpeech(audioBlob);
nameInput.value = transcription.text.toUpperCase();
status.textContent = "Name captured! Now speak your email.";
};
mediaRecorder.start();
setTimeout(() => mediaRecorder.stop(), 5000); // Record for 5 seconds
} catch (error) {
status.textContent = "Error: Microphone access denied.";
} finally {
isProcessing = false;
}
});
</script>
</body>
</html> |