Hugging Face's logo

Spaces:
lokesh341
/
voicemenu143
Sleeping

App Files Community
lokesh341 commited on
Commit
905bdda
·
verified ·
1 Parent(s): 55c1abf

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +133 -18
templates/index.html CHANGED
@@ -49,8 +49,9 @@
49
  </head>
50
  <body>
51
 
 
52
  <div class="container" id="welcomePage">
53
- <h1>Welcome to Biryani Hub 🍽</h1>
54
  <h2 class="info" id="infoMessage">Welcome! Are you a new customer or an existing one?</h2>
55
  <p class="status" id="status">🔊 Please say 'new' to register or 'existing' to login.</p>
56
  </div>
@@ -82,24 +83,52 @@
82
  <p class="status" id="loginStatus">Listening... 🗣</p>
83
  </div>
84
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
  <script>
86
- function checkEmailExists(email) {
87
- fetch(`/check_email?email=${encodeURIComponent(email)}`)
88
- .then(response => response.json())
89
- .then(data => {
90
- if (data.exists) {
91
- speak("Welcome back! You are logged in.");
92
- document.getElementById('loginForm').style.display = 'block';
93
- document.getElementById('registrationForm').style.display = 'none';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
94
  } else {
95
- speak("You are a new customer. Please proceed with registration.");
96
- document.getElementById('registrationForm').style.display = 'block';
97
- document.getElementById('loginForm').style.display = 'none';
98
  }
99
- })
100
- .catch(() => {
101
- speak("Error checking email. Please try again.");
102
- });
103
  }
104
 
105
  function captureEmail() {
@@ -107,6 +136,7 @@
107
  recognition.start();
108
  recognition.onresult = function (event) {
109
  let emailCaptured = event.results[0][0].transcript.trim();
 
110
  recognition.stop();
111
  if (!isValidEmail(emailCaptured)) {
112
  speak("The email address is invalid. Please provide a valid email like [email protected].", captureEmail);
@@ -117,8 +147,30 @@
117
  });
118
  }
119
 
120
- function isValidPhone(phone) {
121
- return /^\d{12}$/.test(phone);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  }
123
 
124
  function captureMobile() {
@@ -126,6 +178,7 @@
126
  recognition.start();
127
  recognition.onresult = function (event) {
128
  let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
 
129
  recognition.stop();
130
  if (!isValidPhone(mobileCaptured)) {
131
  speak("The mobile number is invalid. Please provide exactly 12 digits.", captureMobile);
@@ -137,6 +190,68 @@
137
  };
138
  });
139
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  </script>
141
  </body>
142
  </html>
 
49
  </head>
50
  <body>
51
 
52
+ <!-- Welcome Page -->
53
  <div class="container" id="welcomePage">
54
+ <h1>Welcome to Biriyani Hub 🍽</h1>
55
  <h2 class="info" id="infoMessage">Welcome! Are you a new customer or an existing one?</h2>
56
  <p class="status" id="status">🔊 Please say 'new' to register or 'existing' to login.</p>
57
  </div>
 
83
  <p class="status" id="loginStatus">Listening... 🗣</p>
84
  </div>
85
 
86
+ <!-- Confirmation Page -->
87
+ <div class="container" id="confirmationPage" style="display: none;">
88
+ <h2>Confirm Your Details</h2>
89
+ <div class="confirm-details">
90
+ <p class="details"><strong>Name:</strong> <span id="confirmName"></span></p>
91
+ <p class="details"><strong>Email:</strong> <span id="confirmEmail"></span></p>
92
+ <p class="details"><strong>Phone:</strong> <span id="confirmPhone"></span></p>
93
+ </div>
94
+ </div>
95
+
96
+ <div id="statusMessage" style="display: none;">
97
+ <h2 id="statusText"></h2>
98
+ </div>
99
+
100
  <script>
101
+ let recognition;
102
+ if ('webkitSpeechRecognition' in window) {
103
+ recognition = new webkitSpeechRecognition();
104
+ recognition.continuous = false;
105
+ recognition.interimResults = false;
106
+ recognition.lang = 'en-US';
107
+ } else {
108
+ alert("Speech Recognition API is not supported in this browser.");
109
+ }
110
+
111
+ function speak(text, callback) {
112
+ const speech = new SpeechSynthesisUtterance(text);
113
+ speech.onend = callback;
114
+ window.speechSynthesis.speak(speech);
115
+ }
116
+
117
+ function askLoginOrRegister() {
118
+ speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
119
+ recognition.start();
120
+ recognition.onresult = function (event) {
121
+ let response = event.results[0][0].transcript.trim().toLowerCase();
122
+ recognition.stop();
123
+ if (response.includes("new")) {
124
+ captureEmail();
125
+ } else if (response.includes("existing")) {
126
+ captureEmail();
127
  } else {
128
+ speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
 
 
129
  }
130
+ };
131
+ });
 
 
132
  }
133
 
134
  function captureEmail() {
 
136
  recognition.start();
137
  recognition.onresult = function (event) {
138
  let emailCaptured = event.results[0][0].transcript.trim();
139
+ document.getElementById('email').value = emailCaptured;
140
  recognition.stop();
141
  if (!isValidEmail(emailCaptured)) {
142
  speak("The email address is invalid. Please provide a valid email like [email protected].", captureEmail);
 
147
  });
148
  }
149
 
150
+ function isValidEmail(email) {
151
+ return /\S+@\S+\.\S+/.test(email);
152
+ }
153
+
154
+ function checkEmailExists(email) {
155
+ fetch(`/check_email?email=${encodeURIComponent(email)}`)
156
+ .then(response => response.json())
157
+ .then(data => {
158
+ if (data.exists) {
159
+ speak("Welcome back! You are logged in.");
160
+ document.getElementById('loginForm').style.display = 'block';
161
+ document.getElementById('registrationForm').style.display = 'none';
162
+ } else {
163
+ speak("You are a new customer. Please proceed with registration.", showRegistrationForm);
164
+ }
165
+ })
166
+ .catch(() => {
167
+ speak("Error checking email. Please try again.");
168
+ });
169
+ }
170
+
171
+ function showRegistrationForm() {
172
+ document.getElementById('registrationForm').style.display = 'block';
173
+ document.getElementById('loginForm').style.display = 'none';
174
  }
175
 
176
  function captureMobile() {
 
178
  recognition.start();
179
  recognition.onresult = function (event) {
180
  let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
181
+ document.getElementById('mobile').value = mobileCaptured;
182
  recognition.stop();
183
  if (!isValidPhone(mobileCaptured)) {
184
  speak("The mobile number is invalid. Please provide exactly 12 digits.", captureMobile);
 
190
  };
191
  });
192
  }
193
+
194
+ function isValidPhone(phone) {
195
+ return /^\d{12}$/.test(phone);
196
+ }
197
+
198
+ function confirmMobile(mobileCaptured) {
199
+ recognition.start();
200
+ recognition.onresult = function (event) {
201
+ let confirmation = event.results[0][0].transcript.trim().toLowerCase();
202
+ recognition.stop();
203
+ if (confirmation.includes("yes") || confirmation.includes("ok")) {
204
+ showConfirmationPage();
205
+ } else {
206
+ captureMobile();
207
+ }
208
+ };
209
+ }
210
+
211
+ function showConfirmationPage() {
212
+ const name = document.getElementById('name').value;
213
+ const email = document.getElementById('email').value;
214
+ const phone = document.getElementById('mobile').value;
215
+ document.getElementById('confirmName').textContent = name;
216
+ document.getElementById('confirmEmail').textContent = email;
217
+ document.getElementById('confirmPhone').textContent = phone;
218
+ setTimeout(submitRegistration, 6000);
219
+ }
220
+
221
+ function submitRegistration() {
222
+ const name = document.getElementById('name').value;
223
+ const email = document.getElementById('email').value;
224
+ const phone = document.getElementById('mobile').value;
225
+ fetch('/submit', {
226
+ method: 'POST',
227
+ headers: { 'Content-Type': 'application/json' },
228
+ body: JSON.stringify({ name, email, phone })
229
+ })
230
+ .then(response => response.json())
231
+ .then(data => {
232
+ if (data.success) {
233
+ document.getElementById('statusText').textContent = `Thank you for registering, ${name}!`;
234
+ document.getElementById('statusMessage').style.display = 'block';
235
+ setTimeout(() => {
236
+ document.getElementById('statusText').textContent = 'Submitted Successfully!';
237
+ setTimeout(() => {
238
+ window.location.reload();
239
+ }, 5000);
240
+ }, 6000);
241
+ } else {
242
+ document.getElementById('statusText').textContent = 'There was an error submitting your details. Please try again.';
243
+ document.getElementById('statusMessage').style.display = 'block';
244
+ }
245
+ })
246
+ .catch(error => {
247
+ document.getElementById('statusText').textContent = 'An error occurred. Please try again.';
248
+ document.getElementById('statusMessage').style.display = 'block';
249
+ });
250
+ }
251
+
252
+ window.onload = function () {
253
+ askLoginOrRegister();
254
+ };
255
  </script>
256
  </body>
257
  </html>