Hugging Face's logo

Spaces:
Swathi6
/
Demo
Runtime error

App Files Community
Demo / templates /index.html
Swathi6's picture
Swathi6
Create templates/index.html
21b7cba verified
raw
history blame contribute delete
11.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Biryani Hub - Register & Login</title>
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
 <style>
 body {
 font-family: 'Roboto', sans-serif;
 background: linear-gradient(135deg, #f4c542, #ff8f6a);
 margin: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 text-align: center;
 }
 .container {
 background-color: #fff;
 padding: 40px 50px;
 border-radius: 10px;
 width: 500px;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 h1 {
 font-size: 24px;
 color: #ff6a00;
 }
 h2 {
 font-size: 15px;
 color: #lemonchiffon;
 }
 label {
 font-size: 16px;
 display: block;
 margin-top: 15px;
 color: #333;
 font-weight: bold;
 }
 input {
 width: 100%;
 padding: 12px;
 font-size: 16px;
 border: 2px solid #ccc;
 border-radius: 8px;
 margin-top: 5px;
 background-color: #f9f9f9;
 box-sizing: border-box;
 }
 input:focus {
 border-color: #ff6a00;
 outline: none;
 }
 .info {
 font-size: 16px;
 color: #ff6a00;
 font-weight: bold;
 margin-top: 10px;
 }
 .status {
 font-size: 14px;
 color: gray;
 margin-top: 10px;
 }
 .confirm-button, .switch-button {
 padding: 10px 20px;
 background-color: #ff6a00;
 color: white;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 margin-top: 10px;
 }
 .confirm-button:hover, .switch-button:hover {
 background-color: #e65e00;
 }
 </style>
</head>
<body>
 <!-- Welcome Page -->
 <div class="container" id="welcomePage">
 <h1>Welcome to Biriyani Hub 🍽</h1>
 <h2>🔊 Please say 'Hi Biryani Hub' to start.</h2>
 </div>
<!-- Registration Form -->
 <div class="container" id="registrationForm" style="display: none;">
 <h2>Register</h2>
 <label for="name">🧒🏻👧🏻Your Name🎙️</label>
 <input type="text" id="name" placeholder="Listening for name..." readonly>
<label for="email">Ⓜ️Your Email🎙️</label>
 <input type="text" id="email" placeholder="Listening for email..." readonly>
<label for="mobile">📱Your Mobile Number🎙️</label>
 <input type="text" id="mobile" placeholder="Listening for mobile number..." readonly>
<p class="status" id="registrationStatus">Listening... 🗣</p>
 </div>
<!-- Login Form -->
 <div class="container" id="loginForm" style="display: none;">
 <h2>Login</h2>
 <label for="loginEmail">Ⓜ️Your Email🎙️</label>
 <input type="text" id="loginEmail" placeholder="Listening for email..." readonly>
<label for="loginMobile">📱Your Mobile Number🎙️</label>
 <input type="text" id="loginMobile" placeholder="Listening for mobile number..." readonly>
<p class="status" id="loginStatus">Listening... 🗣</p>
 </div>
<script>
 let recognition;
 if ('webkitSpeechRecognition' in window) {
 recognition = new webkitSpeechRecognition();
 recognition.continuous = false; // Listen only when wake word is detected
 recognition.interimResults = false; // Don't return partial results
 recognition.lang = 'en-US';
 } else {
 alert("Speech Recognition API is not supported in this browser.");
 }
 // Start listening for wake word: "Hi Biryani Hub"
 function listenForGreeting() {
 recognition.start();
 recognition.onresult = function (event) {
 let response = event.results[0][0].transcript.trim().toLowerCase();
 recognition.stop();
 if (response.includes("hi biryani hub")) {
 speak("How can I assist you today?", function () {
 askLoginOrRegister(); // Proceed to ask whether they are new or existing
 });
 } else {
 speak("I didn't hear 'Hi Biryani Hub'. Please say it again to proceed.", listenForGreeting);
 }
 };
 }
 function speak(text, callback) {
 const speech = new SpeechSynthesisUtterance(text);
 speech.onend = callback;
 window.speechSynthesis.speak(speech);
 }
 // Ask user if they are a new or existing customer
 function askLoginOrRegister() {
 speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
 recognition.start();
 recognition.onresult = function (event) {
 let response = event.results[0][0].transcript.trim().toLowerCase();
 recognition.stop();
 if (response.includes("new")) {
 showRegistrationForm();
 captureName();
 } else if (response.includes("existing")) {
 showLoginForm();
 captureLoginDetails();
 } else {
 speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
 }
 };
 });
 }
 function showRegistrationForm() {
 document.getElementById('welcomePage').style.display = 'none';
 document.getElementById('registrationForm').style.display = 'block';
 document.getElementById('loginForm').style.display = 'none';
 }
 function showLoginForm() {
 document.getElementById('welcomePage').style.display = 'none';
 document.getElementById('registrationForm').style.display = 'none';
 document.getElementById('loginForm').style.display = 'block';
 }
 // Capture name for registration
 function captureName() {
 speak("Please say your name.", function () {
 recognition.start();
 recognition.onresult = function (event) {
 let nameCaptured = event.results[0][0].transcript.trim();
 document.getElementById('name').value = nameCaptured;
 recognition.stop();
 speak("You said " + nameCaptured + ". Is it correct?", function () {
 confirmName(nameCaptured);
 });
 };
 });
 }
 function confirmName(nameCaptured) {
 recognition.start();
 recognition.onresult = function (event) {
 let confirmation = event.results[0][0].transcript.trim().toLowerCase();
 recognition.stop();
 if (isConfirmation(confirmation)) {
 captureEmail();
 } else {
 captureName();
 }
 };
 }
 // Capture email for registration
 function captureEmail() {
 speak("Now, say your email.", function () {
 recognition.start();
 recognition.onresult = function (event) {
 let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
 document.getElementById('email').value = emailCaptured;
 recognition.stop();
 speak("You said " + emailCaptured + ". Is it correct?", function () {
 confirmEmail(emailCaptured);
 });
 };
 });
 }
 function confirmEmail(emailCaptured) {
 recognition.start();
 recognition.onresult = function (event) {
 let confirmation = event.results[0][0].transcript.trim().toLowerCase();
 recognition.stop();
 if (isConfirmation(confirmation)) {
 captureMobile();
 } else {
 captureEmail();
 }
 };
 }
 // Capture mobile number for registration
 function captureMobile() {
 speak("Now, say your mobile number.", function () {
 recognition.start();
 recognition.onresult = function (event) {
 let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
 document.getElementById('mobile').value = mobileCaptured;
 recognition.stop();
 speak("You said " + mobileCaptured + ". Is it correct?", function () {
 confirmMobile(mobileCaptured);
 });
 };
 });
 }
 function confirmMobile(mobileCaptured) {
 recognition.start();
 recognition.onresult = function (event) {
 let confirmation = event.results[0][0].transcript.trim().toLowerCase();
 recognition.stop();
 if (isConfirmation(confirmation)) {
 submitRegistration();
 } else {
 captureMobile();
 }
 };
 }
 // Confirmation check for 'yes', 'ok', etc.
 function isConfirmation(confirmation) {
 const validResponses = ["yes", "ok", "yeah", "correct", "yep"];
 return validResponses.some(response => confirmation.includes(response));
 }
 function submitRegistration() {
 const name = document.getElementById('name').value.trim();
 const email = document.getElementById('email').value.trim();
 const phone = document.getElementById('mobile').value.trim();
 if (!name || !email || !phone) {
 alert("Please provide all required details.");
 return;
 }
 console.log("Sending data:", { name, email, phone });
 fetch('/submit', {
 method: 'POST',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify({ name, email, phone })
 })
 .then(response => response.json())
 .then(data => {
 console.log("Response Data:", data);
 if (data.success) {
 speak(`Thank you for registering, ${name}!`);
 setTimeout(() => {
 location.reload(); // Refresh the page after registration
 }, 6000); // 6 seconds delay before refresh
 } else {
 speak("There was an error submitting your details. Please try again.");
 }
 })
 .catch(error => {
 console.error("Fetch Error:", error);
 speak("An error occurred. Please try again.");
 });
 }
 // Start listening for the wake word as soon as the page is loaded
 window.onload = function () {
 listenForGreeting(); // Start listening for "Hi Biryani Hub"
 };
 </script>
</body>
</html>