Hugging Face's logo

Spaces:
geethareddy
/
voicemenuspe
Running

App Files Community
lokesh341 commited on
Commit
8fdce7e
·
verified ·
1 Parent(s): b338c76

Update templates/menu_page.html

Browse files
Files changed (1) hide show
  1. templates/menu_page.html +35 -44
templates/menu_page.html CHANGED
@@ -1,11 +1,11 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Menu - Biryani Hub</title>
7
  <style>
8
- /* General Body Styling */
9
  body {
10
  font-family: Arial, sans-serif;
11
  background-color: #f8f8f8;
@@ -13,7 +13,6 @@
13
  padding: 0;
14
  }
15
 
16
- /* Container for the menu */
17
  .menu-container {
18
  max-width: 1200px;
19
  margin: 0 auto;
@@ -40,42 +39,17 @@
40
  }
41
 
42
  .order-btn {
43
- padding: 10px 20px;
44
- background-color: #4CAF50;
45
- color: white;
46
- border: none;
47
- border-radius: 5px;
48
- cursor: pointer;
49
- }
50
-
51
- .order-btn:hover {
52
- background-color: #45a049;
53
- }
54
-
55
- #listen-btn {
56
- padding: 10px 20px;
57
- background-color: #4CAF50;
58
- color: white;
59
- border: none;
60
- border-radius: 5px;
61
- cursor: pointer;
62
- font-size: 1.2rem;
63
- display: block;
64
- margin: 30px auto;
65
- }
66
-
67
- #listen-btn:hover {
68
- background-color: #45a049;
69
  }
70
  </style>
71
  </head>
72
- <body>
73
 
 
74
  <div class="menu-container">
75
  <h1>Welcome to the Menu</h1>
76
 
77
  {% for item in menu_items %}
78
- <div class="menu-item">
79
  <div class="details">
80
  <h3>{{ item.name }}</h3>
81
  <p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
@@ -85,36 +59,48 @@
85
  <button class="order-btn">Order</button>
86
  </div>
87
  {% endfor %}
88
-
89
- <!-- Button for triggering voice recognition -->
90
- <button id="listen-btn">Say "Order" to order an item</button>
91
  </div>
92
 
93
  <script>
94
- const listenButton = document.getElementById("listen-btn");
95
- const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
 
 
96
 
 
97
  recognition.lang = "en-US";
98
  recognition.interimResults = false;
99
 
100
- function speak(text) {
101
  const msg = new SpeechSynthesisUtterance(text);
 
102
  window.speechSynthesis.speak(msg);
103
  }
104
 
105
- listenButton.addEventListener("click", () => {
106
- speak("Please say the item you want to order.");
 
 
 
 
 
 
 
 
107
  recognition.start();
108
- });
109
 
110
  recognition.onresult = (event) => {
111
  const command = event.results[0][0].transcript.toLowerCase();
112
  console.log("User said:", command);
113
 
114
- // Add logic to recognize specific items or trigger actions based on the command
115
- if (command.includes("order")) {
116
- // For example, navigate or process an order (customize as needed)
117
- speak("Your order has been placed.");
 
 
 
118
  }
119
  };
120
 
@@ -122,7 +108,12 @@
122
  console.error("Speech recognition error:", event.error);
123
  speak("Sorry, I couldn't understand that. Please try again.");
124
  };
125
- </script>
126
 
 
 
 
 
 
127
  </body>
 
128
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Menu - Biryani Hub</title>
8
  <style>
 
9
  body {
10
  font-family: Arial, sans-serif;
11
  background-color: #f8f8f8;
 
13
  padding: 0;
14
  }
15
 
 
16
  .menu-container {
17
  max-width: 1200px;
18
  margin: 0 auto;
 
39
  }
40
 
41
  .order-btn {
42
+ display: none; /* Hide the button since ordering is voice-controlled */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  }
44
  </style>
45
  </head>
 
46
 
47
+ <body>
48
  <div class="menu-container">
49
  <h1>Welcome to the Menu</h1>
50
 
51
  {% for item in menu_items %}
52
+ <div class="menu-item" data-item="{{ item.name | lower }}">
53
  <div class="details">
54
  <h3>{{ item.name }}</h3>
55
  <p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
 
59
  <button class="order-btn">Order</button>
60
  </div>
61
  {% endfor %}
 
 
 
62
  </div>
63
 
64
  <script>
65
+ const menuItems = Array.from(document.querySelectorAll(".menu-item")).map(item => ({
66
+ name: item.dataset.item,
67
+ element: item
68
+ }));
69
 
70
+ const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
71
  recognition.lang = "en-US";
72
  recognition.interimResults = false;
73
 
74
+ function speak(text, callback) {
75
  const msg = new SpeechSynthesisUtterance(text);
76
+ msg.onend = callback;
77
  window.speechSynthesis.speak(msg);
78
  }
79
 
80
+ function readMenuItems() {
81
+ let menuText = "Here is the menu. ";
82
+ menuItems.forEach(item => {
83
+ menuText += `${item.name}. `;
84
+ });
85
+ menuText += "Please say the name of the item you would like to order.";
86
+ speak(menuText, startListening);
87
+ }
88
+
89
+ function startListening() {
90
  recognition.start();
91
+ }
92
 
93
  recognition.onresult = (event) => {
94
  const command = event.results[0][0].transcript.toLowerCase();
95
  console.log("User said:", command);
96
 
97
+ const matchedItem = menuItems.find(item => command.includes(item.name));
98
+ if (matchedItem) {
99
+ speak(`You have ordered ${matchedItem.name}. Your order has been placed.`);
100
+ console.log(`Order placed for: ${matchedItem.name}`);
101
+ } else {
102
+ speak("Item not found. Please try again.");
103
+ startListening();
104
  }
105
  };
106
 
 
108
  console.error("Speech recognition error:", event.error);
109
  speak("Sorry, I couldn't understand that. Please try again.");
110
  };
 
111
 
112
+ // Automatically read the menu and start listening when the page loads
113
+ window.onload = function () {
114
+ readMenuItems();
115
+ };
116
+ </script>
117
  </body>
118
+
119
  </html>