Hugging Face's logo

Spaces:
lokesh341
/
voicemenu143
Sleeping

App Files Community
lokesh341 commited on
Commit
ad7521b
·
verified ·
1 Parent(s): 21e0e48

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +60 -65
templates/index.html CHANGED
@@ -23,11 +23,6 @@
23
  border-radius: 10px;
24
  width: 500px;
25
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
26
- display: flex;
27
- justify-content: space-between;
28
- }
29
- .form-container {
30
- width: 100%;
31
  }
32
  h1 {
33
  font-size: 24px;
@@ -65,7 +60,7 @@
65
  color: gray;
66
  margin-top: 10px;
67
  }
68
- .confirm-button {
69
  padding: 10px 20px;
70
  background-color: #ff6a00;
71
  color: white;
@@ -74,18 +69,19 @@
74
  cursor: pointer;
75
  margin-top: 10px;
76
  }
77
- .confirm-button:hover {
78
  background-color: #e65e00;
79
  }
80
  </style>
81
  </head>
82
  <body>
83
  <div class="container">
84
- <div class="form-container" id="registrationForm">
85
- <h1>Welcome to Biryani Hub 🍽</h1>
86
- <h2 class="info" id="infoMessage">Listening... 🗣🎙</h2>
87
- <p class="status" id="status">🔊 Speak Now...</p>
88
-
 
89
  <label for="name">Your Name</label>
90
  <input type="text" id="name" placeholder="Listening for name..." readonly>
91
 
@@ -96,6 +92,19 @@
96
  <input type="text" id="mobile" placeholder="Listening for mobile number..." readonly>
97
 
98
  <button class="confirm-button" onclick="startVoiceRecognition()">Restart Voice Input</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  </div>
100
  </div>
101
 
@@ -116,10 +125,6 @@
116
  window.speechSynthesis.speak(speech);
117
  }
118
 
119
- function startVoiceRecognition() {
120
- askLoginOrRegister();
121
- }
122
-
123
  function askLoginOrRegister() {
124
  speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
125
  recognition.start();
@@ -127,16 +132,28 @@
127
  let response = event.results[0][0].transcript.trim().toLowerCase();
128
  recognition.stop();
129
  if (response.includes("new")) {
 
130
  captureName();
131
  } else if (response.includes("existing")) {
132
- speak("Login is currently unavailable. Please register first.");
 
133
  } else {
134
- speak("I didn't understand. Please say 'new' for registration.", askLoginOrRegister);
135
  }
136
  };
137
  });
138
  }
139
 
 
 
 
 
 
 
 
 
 
 
140
  function captureName() {
141
  speak("Please say your name.", function () {
142
  recognition.start();
@@ -144,26 +161,11 @@
144
  let nameCaptured = event.results[0][0].transcript.trim();
145
  document.getElementById('name').value = nameCaptured;
146
  recognition.stop();
147
- speak("You said " + nameCaptured + ". Is it correct?", function () {
148
- confirmName(nameCaptured);
149
- });
150
  };
151
  });
152
  }
153
 
154
- function confirmName(nameCaptured) {
155
- recognition.start();
156
- recognition.onresult = function (event) {
157
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
158
- recognition.stop();
159
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
160
- captureEmail();
161
- } else {
162
- captureName();
163
- }
164
- };
165
- }
166
-
167
  function captureEmail() {
168
  speak("Now, say your email.", function () {
169
  recognition.start();
@@ -171,26 +173,11 @@
171
  let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
172
  document.getElementById('email').value = emailCaptured;
173
  recognition.stop();
174
- speak("You said " + emailCaptured + ". Is it correct?", function () {
175
- confirmEmail(emailCaptured);
176
- });
177
  };
178
  });
179
  }
180
 
181
- function confirmEmail(emailCaptured) {
182
- recognition.start();
183
- recognition.onresult = function (event) {
184
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
185
- recognition.stop();
186
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
187
- captureMobile();
188
- } else {
189
- captureEmail();
190
- }
191
- };
192
- }
193
-
194
  function captureMobile() {
195
  speak("Now, say your mobile number.", function () {
196
  recognition.start();
@@ -198,25 +185,33 @@
198
  let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
199
  document.getElementById('mobile').value = mobileCaptured;
200
  recognition.stop();
201
- speak("You said " + mobileCaptured + ". Is it correct?", function () {
202
- confirmMobile(mobileCaptured);
203
- });
204
  };
205
  });
206
  }
207
 
208
- function confirmMobile(mobileCaptured) {
209
- recognition.start();
210
- recognition.onresult = function (event) {
211
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
212
- recognition.stop();
213
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
214
- speak("Your details are confirmed. Registration complete!");
215
- setTimeout(() => location.reload(), 5000);
216
- } else {
217
- captureMobile();
218
- }
219
- };
 
 
 
 
 
 
 
 
 
 
220
  }
221
 
222
  window.onload = function () {
 
23
  border-radius: 10px;
24
  width: 500px;
25
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 
 
 
 
 
26
  }
27
  h1 {
28
  font-size: 24px;
 
60
  color: gray;
61
  margin-top: 10px;
62
  }
63
+ .confirm-button, .switch-button {
64
  padding: 10px 20px;
65
  background-color: #ff6a00;
66
  color: white;
 
69
  cursor: pointer;
70
  margin-top: 10px;
71
  }
72
+ .confirm-button:hover, .switch-button:hover {
73
  background-color: #e65e00;
74
  }
75
  </style>
76
  </head>
77
  <body>
78
  <div class="container">
79
+ <h1>Welcome to Biryani Hub 🍽</h1>
80
+ <h2 class="info" id="infoMessage">Listening... 🗣🎙</h2>
81
+ <p class="status" id="status">🔊 Speak Now...</p>
82
+
83
+ <div id="registrationForm">
84
+ <h2>Register</h2>
85
  <label for="name">Your Name</label>
86
  <input type="text" id="name" placeholder="Listening for name..." readonly>
87
 
 
92
  <input type="text" id="mobile" placeholder="Listening for mobile number..." readonly>
93
 
94
  <button class="confirm-button" onclick="startVoiceRecognition()">Restart Voice Input</button>
95
+ <button class="switch-button" onclick="showLoginForm()">Switch to Login</button>
96
+ </div>
97
+
98
+ <div id="loginForm" style="display: none;">
99
+ <h2>Login</h2>
100
+ <label for="loginEmail">Your Email</label>
101
+ <input type="text" id="loginEmail" placeholder="Listening for email..." readonly>
102
+
103
+ <label for="loginMobile">Your Mobile Number</label>
104
+ <input type="text" id="loginMobile" placeholder="Listening for mobile number..." readonly>
105
+
106
+ <button class="confirm-button" onclick="startLoginRecognition()">Restart Voice Input</button>
107
+ <button class="switch-button" onclick="showRegistrationForm()">Switch to Register</button>
108
  </div>
109
  </div>
110
 
 
125
  window.speechSynthesis.speak(speech);
126
  }
127
 
 
 
 
 
128
  function askLoginOrRegister() {
129
  speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
130
  recognition.start();
 
132
  let response = event.results[0][0].transcript.trim().toLowerCase();
133
  recognition.stop();
134
  if (response.includes("new")) {
135
+ showRegistrationForm();
136
  captureName();
137
  } else if (response.includes("existing")) {
138
+ showLoginForm();
139
+ captureLoginEmail();
140
  } else {
141
+ speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
142
  }
143
  };
144
  });
145
  }
146
 
147
+ function showRegistrationForm() {
148
+ document.getElementById('registrationForm').style.display = 'block';
149
+ document.getElementById('loginForm').style.display = 'none';
150
+ }
151
+
152
+ function showLoginForm() {
153
+ document.getElementById('loginForm').style.display = 'block';
154
+ document.getElementById('registrationForm').style.display = 'none';
155
+ }
156
+
157
  function captureName() {
158
  speak("Please say your name.", function () {
159
  recognition.start();
 
161
  let nameCaptured = event.results[0][0].transcript.trim();
162
  document.getElementById('name').value = nameCaptured;
163
  recognition.stop();
164
+ captureEmail();
 
 
165
  };
166
  });
167
  }
168
 
 
 
 
 
 
 
 
 
 
 
 
 
 
169
  function captureEmail() {
170
  speak("Now, say your email.", function () {
171
  recognition.start();
 
173
  let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
174
  document.getElementById('email').value = emailCaptured;
175
  recognition.stop();
176
+ captureMobile();
 
 
177
  };
178
  });
179
  }
180
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  function captureMobile() {
182
  speak("Now, say your mobile number.", function () {
183
  recognition.start();
 
185
  let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
186
  document.getElementById('mobile').value = mobileCaptured;
187
  recognition.stop();
188
+ speak("Registration complete!");
 
 
189
  };
190
  });
191
  }
192
 
193
+ function captureLoginEmail() {
194
+ speak("Please say your email for login.", function () {
195
+ recognition.start();
196
+ recognition.onresult = function (event) {
197
+ let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
198
+ document.getElementById('loginEmail').value = emailCaptured;
199
+ recognition.stop();
200
+ captureLoginMobile();
201
+ };
202
+ });
203
+ }
204
+
205
+ function captureLoginMobile() {
206
+ speak("Now, say your mobile number.", function () {
207
+ recognition.start();
208
+ recognition.onresult = function (event) {
209
+ let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
210
+ document.getElementById('loginMobile').value = mobileCaptured;
211
+ recognition.stop();
212
+ speak("Login successful!");
213
+ };
214
+ });
215
  }
216
 
217
  window.onload = function () {