Hugging Face's logo

Spaces:
geethareddy
/
voicemenu1433
Sleeping

App Files Community
lokesh341 commited on
Commit
78a2775
·
verified ·
1 Parent(s): e7fa898

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +25 -34
templates/index.html CHANGED
@@ -17,7 +17,7 @@
17
  text-align: center;
18
  }
19
  .container {
20
- background: lightblue;
21
  padding: 40px 50px;
22
  border-radius: 10px;
23
  width: 400px;
@@ -29,18 +29,24 @@
29
  color: #ff6a00;
30
  }
31
  label {
32
- font-size: 18px;
33
  margin-top: 20px;
34
  display: block;
35
  text-align: left;
 
36
  }
37
  input[type="text"] {
38
  width: 100%;
39
- padding: 10px;
40
  font-size: 16px;
41
- border: 1px solid #ccc;
42
- border-radius: 5px;
43
  margin-top: 8px;
 
 
 
 
 
44
  }
45
  .info {
46
  margin-top: 20px;
@@ -53,11 +59,16 @@
53
  color: gray;
54
  margin-top: 20px;
55
  }
 
 
 
 
56
  </style>
57
  </head>
58
  <body>
59
  <div class="container">
60
  <h1>Welcome to Biryani Hub</h1>
 
61
 
62
  <label for="name">Your Name</label>
63
  <input type="text" id="name" placeholder="Your name will appear here..." readonly>
@@ -67,7 +78,7 @@
67
 
68
  <label for="mobile">Your Mobile Number</label>
69
  <input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>
70
-
71
  <p class="info" id="infoMessage">Listening will start automatically...</p>
72
  <p class="status" id="status">Initializing...</p>
73
  </div>
@@ -77,38 +88,30 @@
77
  let nameCaptured = "";
78
  let emailCaptured = "";
79
  let mobileCaptured = "";
80
-
81
  if ('webkitSpeechRecognition' in window) {
82
  recognition = new webkitSpeechRecognition();
83
- recognition.continuous = true;
84
  recognition.interimResults = false;
85
  recognition.lang = 'en-US';
86
  } else {
87
  alert("Speech Recognition API is not supported in this browser.");
88
  }
89
-
90
  function speak(text, callback) {
91
  const speech = new SpeechSynthesisUtterance(text);
92
  speech.onend = callback;
93
  window.speechSynthesis.speak(speech);
94
  }
95
-
96
  function startListeningForName() {
97
- nameCaptured = "";
98
  recognition.start();
99
  recognition.onresult = function(event) {
100
- let transcript = event.results[event.results.length - 1][0].transcript.trim().replace(/\s+/g, "");
101
- nameCaptured += transcript;
102
  document.getElementById('name').value = nameCaptured;
103
- };
104
- recognition.onspeechend = function() {
105
  recognition.stop();
106
  setTimeout(confirmName, 500);
107
  };
108
  }
109
-
110
  function confirmName() {
111
- speak("You said " + nameCaptured.trim().split('').join(' ') + ". Is it okay, or do you want to change it?", function() {
112
  recognition.start();
113
  recognition.onresult = function(event) {
114
  let confirmation = event.results[0][0].transcript.trim().toLowerCase();
@@ -116,21 +119,16 @@
116
  if (confirmation.includes("ok") || confirmation.includes("yes")) {
117
  setTimeout(() => speak("Great! Now, tell me your email.", startListeningForEmail), 500);
118
  } else {
119
- setTimeout(() => speak("Let's try again. Tell me your name, letter by letter.", startListeningForName), 500);
120
  }
121
  };
122
  });
123
  }
124
-
125
  function startListeningForEmail() {
126
- emailCaptured = "";
127
  recognition.start();
128
  recognition.onresult = function(event) {
129
- let transcript = event.results[event.results.length - 1][0].transcript.trim().replace(/\s+/g, "");
130
- emailCaptured += transcript;
131
  document.getElementById('email').value = emailCaptured;
132
- };
133
- recognition.onspeechend = function() {
134
  recognition.stop();
135
  speak("You said " + emailCaptured + ". Is it correct?", function() {
136
  recognition.start();
@@ -140,22 +138,17 @@
140
  if (confirmation.includes("ok") || confirmation.includes("yes")) {
141
  setTimeout(() => speak("Great! Now, tell me your mobile number.", startListeningForMobile), 500);
142
  } else {
143
- speak("Let's try again. Tell me your email letter by letter.", startListeningForEmail);
144
  }
145
  };
146
  });
147
  };
148
  }
149
-
150
  function startListeningForMobile() {
151
- mobileCaptured = "";
152
  recognition.start();
153
  recognition.onresult = function(event) {
154
- let transcript = event.results[event.results.length - 1][0].transcript.trim().replace(/\s+/g, "");
155
- mobileCaptured += transcript;
156
  document.getElementById('mobile').value = mobileCaptured;
157
- };
158
- recognition.onspeechend = function() {
159
  recognition.stop();
160
  speak("You said " + mobileCaptured + ". Is it correct?", function() {
161
  recognition.start();
@@ -172,15 +165,13 @@
172
  });
173
  };
174
  }
175
-
176
  function startProcess() {
177
  speak("Welcome to Biryani Hub", function() {
178
- speak("Tell me your name letter by letter, and I will confirm it with you.", function() {
179
  setTimeout(startListeningForName, 500);
180
  });
181
  });
182
  }
183
-
184
  window.onload = function () {
185
  setTimeout(startProcess, 4000);
186
  };
 
17
  text-align: center;
18
  }
19
  .container {
20
+ background-color: #87ceeb; /* Light blue */
21
  padding: 40px 50px;
22
  border-radius: 10px;
23
  width: 400px;
 
29
  color: #ff6a00;
30
  }
31
  label {
32
+ font-size: 16px;
33
  margin-top: 20px;
34
  display: block;
35
  text-align: left;
36
+ font-weight: bold;
37
  }
38
  input[type="text"] {
39
  width: 100%;
40
+ padding: 12px;
41
  font-size: 16px;
42
+ border: 2px solid #ccc;
43
+ border-radius: 8px;
44
  margin-top: 8px;
45
+ box-sizing: border-box;
46
+ }
47
+ input[type="text"]:focus {
48
+ border-color: #ff6a00;
49
+ outline: none;
50
  }
51
  .info {
52
  margin-top: 20px;
 
59
  color: gray;
60
  margin-top: 20px;
61
  }
62
+ .image-logo {
63
+ width: 80px;
64
+ margin-bottom: 20px;
65
+ }
66
  </style>
67
  </head>
68
  <body>
69
  <div class="container">
70
  <h1>Welcome to Biryani Hub</h1>
71
+ <img class="image-logo" src="your-image-url.png" alt="Biryani Hub Logo" />
72
 
73
  <label for="name">Your Name</label>
74
  <input type="text" id="name" placeholder="Your name will appear here..." readonly>
 
78
 
79
  <label for="mobile">Your Mobile Number</label>
80
  <input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>
81
+
82
  <p class="info" id="infoMessage">Listening will start automatically...</p>
83
  <p class="status" id="status">Initializing...</p>
84
  </div>
 
88
  let nameCaptured = "";
89
  let emailCaptured = "";
90
  let mobileCaptured = "";
 
91
  if ('webkitSpeechRecognition' in window) {
92
  recognition = new webkitSpeechRecognition();
93
+ recognition.continuous = false;
94
  recognition.interimResults = false;
95
  recognition.lang = 'en-US';
96
  } else {
97
  alert("Speech Recognition API is not supported in this browser.");
98
  }
 
99
  function speak(text, callback) {
100
  const speech = new SpeechSynthesisUtterance(text);
101
  speech.onend = callback;
102
  window.speechSynthesis.speak(speech);
103
  }
 
104
  function startListeningForName() {
 
105
  recognition.start();
106
  recognition.onresult = function(event) {
107
+ nameCaptured = event.results[0][0].transcript.trim();
 
108
  document.getElementById('name').value = nameCaptured;
 
 
109
  recognition.stop();
110
  setTimeout(confirmName, 500);
111
  };
112
  }
 
113
  function confirmName() {
114
+ speak("You said " + nameCaptured + ". Is it okay, or do you want to change it?", function() {
115
  recognition.start();
116
  recognition.onresult = function(event) {
117
  let confirmation = event.results[0][0].transcript.trim().toLowerCase();
 
119
  if (confirmation.includes("ok") || confirmation.includes("yes")) {
120
  setTimeout(() => speak("Great! Now, tell me your email.", startListeningForEmail), 500);
121
  } else {
122
+ setTimeout(() => speak("Let's try again. Tell me your name.", startListeningForName), 500);
123
  }
124
  };
125
  });
126
  }
 
127
  function startListeningForEmail() {
 
128
  recognition.start();
129
  recognition.onresult = function(event) {
130
+ emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
 
131
  document.getElementById('email').value = emailCaptured;
 
 
132
  recognition.stop();
133
  speak("You said " + emailCaptured + ". Is it correct?", function() {
134
  recognition.start();
 
138
  if (confirmation.includes("ok") || confirmation.includes("yes")) {
139
  setTimeout(() => speak("Great! Now, tell me your mobile number.", startListeningForMobile), 500);
140
  } else {
141
+ speak("Let's try again. Tell me your email.", startListeningForEmail);
142
  }
143
  };
144
  });
145
  };
146
  }
 
147
  function startListeningForMobile() {
 
148
  recognition.start();
149
  recognition.onresult = function(event) {
150
+ mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
 
151
  document.getElementById('mobile').value = mobileCaptured;
 
 
152
  recognition.stop();
153
  speak("You said " + mobileCaptured + ". Is it correct?", function() {
154
  recognition.start();
 
165
  });
166
  };
167
  }
 
168
  function startProcess() {
169
  speak("Welcome to Biryani Hub", function() {
170
+ speak("Tell me your name, and I will confirm it with you.", function() {
171
  setTimeout(startListeningForName, 500);
172
  });
173
  });
174
  }
 
175
  window.onload = function () {
176
  setTimeout(startProcess, 4000);
177
  };