Spaces:
Sleeping
Sleeping
File size: 7,128 Bytes
732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 f3cd136 d0533b9 f3cd136 732af62 f3cd136 732af62 f3cd136 732af62 b0cbd7d 6e50713 b0cbd7d f3cd136 b0cbd7d f3cd136 b0cbd7d 6e50713 b0cbd7d f3cd136 b0cbd7d f3cd136 b0cbd7d f3cd136 b0cbd7d f3cd136 b0cbd7d 732af62 b0cbd7d 732af62 3c0a0ce | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu - Biryani Hub</title>
<style>
/* General Body Styling */
body {
font-family: Arial, sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
/* Container for the menu */
.menu-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
margin-top: 50px;
}
h1 {
text-align: center;
font-size: 2.5rem;
color: #333;
margin-bottom: 30px;
}
.menu-item {
border-bottom: 1px solid #eee;
padding: 15px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.order-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.order-btn:hover {
background-color: #45a049;
}
#listen-btn {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.2rem;
display: block;
margin: 30px auto;
}
#listen-btn:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="menu-container">
<h1>Welcome to the Menu</h1>
{% for item in menu_items %}
<div class="menu-item">
<div class="details">
<h3>{{ item.name }}</h3>
<p><strong>Ingredients:</strong> {{ item.ingredients }}</p>
<p><strong>Category:</strong> {{ item.category }}</p>
<p class="price">Price: ${{ item.price }}</p>
</div>
<button class="order-btn">Order</button>
</div>
{% endfor %}
<!-- Button for triggering voice recognition -->
<button id="listen-btn">Say "Order" to order an item</button>
</div>
<script>
const listenButton = document.getElementById("listen-btn");
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = "en-US";
recognition.interimResults = false;
let cart = []; // To store the cart items
function speak(text) {
const msg = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(msg);
}
listenButton.addEventListener("click", () => {
speak("Please say the category you want to explore, such as Appetizer or Main Course.");
recognition.start();
});
recognition.onresult = (event) => {
const command = event.results[0][0].transcript.toLowerCase();
console.log("User said:", command);
if (command.includes("appetizer") || command.includes("main course")) {
// Identify the category and filter items (for demo, we simply proceed with a generic response)
const category = command.includes("appetizer") ? "Appetizer" : "Main Course";
speak(`You selected ${category}. What would you like to order from the ${category} menu?`);
askForItem(category);
} else {
speak("Sorry, I couldn't recognize that. Please say 'Appetizer' or 'Main Course'.");
}
};
function askForItem(category) {
// Get all items from the selected category
const items = document.querySelectorAll(`.menu-item[data-category="${category}"]`);
let itemsText = `The ${category} menu includes: `;
items.forEach(item => {
itemsText += item.querySelector("h3").textContent + ", ";
});
speak(itemsText);
recognition.start();
recognition.onresult = (event) => {
const itemOrdered = event.results[0][0].transcript.toLowerCase();
const itemElement = Array.from(items).find(item => item.querySelector("h3").textContent.toLowerCase().includes(itemOrdered));
if (itemElement) {
const itemName = itemElement.querySelector("h3").textContent;
speak(`You selected ${itemName}. How many would you like to order?`);
askForQuantity(itemName);
} else {
speak("Sorry, I couldn't find that item. Please say the item again.");
}
};
}
function askForQuantity(itemName) {
recognition.start();
recognition.onresult = (event) => {
const quantity = event.results[0][0].transcript.trim();
if (isNaN(quantity)) {
speak("Sorry, I didn't catch that. Please say a number.");
} else {
cart.push({ itemName, quantity });
speak(`${quantity} of ${itemName} added to your cart. Would you like to add more items?`);
askToContinue();
}
};
}
function askToContinue() {
recognition.start();
recognition.onresult = (event) => {
const command = event.results[0][0].transcript.toLowerCase();
if (command.includes("yes")) {
speak("What would you like to order next?");
recognition.stop();
} else if (command.includes("no")) {
announceCartSummary();
} else {
speak("Sorry, I didn't understand. Please say 'yes' to continue or 'no' to proceed to checkout.");
}
};
}
function announceCartSummary() {
let cartSummary = "Your cart includes: ";
cart.forEach(item => {
cartSummary += `${item.quantity} of ${item.itemName}, `;
});
cartSummary += "Would you like to proceed with the order?";
speak(cartSummary);
confirmationForOrder();
}
function confirmationForOrder() {
recognition.start();
recognition.onresult = (event) => {
const confirmation = event.results[0][0].transcript.toLowerCase();
if (confirmation.includes("yes")) {
speak("Your order has been placed successfully. Thank you!");
// Implement the final order placing logic here
} else if (confirmation.includes("no")) {
speak("Your order has been cancelled. Thank you!");
// Cancel order logic
} else {
speak("Sorry, I didn't understand. Please confirm if you'd like to place the order.");
}
};
}
recognition.onerror = (event) => {
console.error("Speech recognition error:", event.error);
speak("Sorry, I couldn't understand that. Please try again.");
};
</script>
</body>
</html> |