Hugging Face's logo

Spaces:
Swathi6
/
Robbin
Sleeping

App Files Community
Swathi6 commited on
Commit
5c3745c
·
verified ·
1 Parent(s): 96bbc40

Update template/index.html

Browse files
Files changed (1) hide show
  1. template/index.html +28 -136
template/index.html CHANGED
@@ -1,138 +1,30 @@
 
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>Restaurant Chatbot</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- background-color: #f4f4f9;
11
- margin: 0;
12
- padding: 0;
13
- }
14
- #chat-container {
15
- max-width: 600px;
16
- margin: 0 auto;
17
- padding: 20px;
18
- background-color: #ffffff;
19
- border-radius: 8px;
20
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
21
- margin-top: 50px;
22
- }
23
- #chat-box {
24
- max-height: 400px;
25
- overflow-y: auto;
26
- margin-bottom: 20px;
27
- border: 1px solid #ddd;
28
- padding: 10px;
29
- background-color: #f9f9f9;
30
- border-radius: 5px;
31
- }
32
- #user-input {
33
- width: 100%;
34
- padding: 12px;
35
- margin-top: 10px;
36
- border: 1px solid #ddd;
37
- border-radius: 5px;
38
- }
39
- #send-btn {
40
- padding: 12px 20px;
41
- background-color: #007bff;
42
- color: white;
43
- border: none;
44
- cursor: pointer;
45
- border-radius: 5px;
46
- margin-top: 10px;
47
- width: 100%;
48
- }
49
- #send-btn:hover {
50
- background-color: #0056b3;
51
- }
52
- .bot-message, .user-message {
53
- padding: 10px;
54
- margin-bottom: 10px;
55
- border-radius: 5px;
56
- }
57
- .bot-message {
58
- background-color: #f1f1f1;
59
- }
60
- .user-message {
61
- background-color: #007bff;
62
- color: white;
63
- text-align: right;
64
- }
65
- </style>
66
- </head>
67
- <body>
68
-
69
- <div id="chat-container">
70
- <h2 style="text-align: center; color: #333;">Restaurant Chatbot</h2>
71
- <div id="chat-box">
72
- <!-- Messages will appear here -->
73
- </div>
74
- <input type="text" id="user-input" placeholder="Ask about the menu or suggest a dish...">
75
- <button id="send-btn" onclick="sendMessage()">Send</button>
76
- </div>
77
-
78
- <script>
79
- // Sample menu
80
- const menu = {
81
- 'appetizers': ['Samosa', 'Pakora', 'Spring Roll', 'Chaat'],
82
- 'main_course': ['Butter Chicken', 'Paneer Butter Masala', 'Biryani', 'Dosa'],
83
- 'desserts': ['Gulab Jamun', 'Jalebi', 'Rasgulla', 'Kheer']
84
- };
85
-
86
- // Function to suggest dishes based on ingredients (a simple implementation)
87
- function suggestDish(ingredients) {
88
- if (ingredients.includes('chicken')) {
89
- return 'Butter Chicken';
90
- } else if (ingredients.includes('paneer')) {
91
- return 'Paneer Butter Masala';
92
- } else if (ingredients.includes('sweet')) {
93
- return 'Gulab Jamun';
94
- } else {
95
- return 'Sorry, no suggestions available.';
96
- }
97
- }
98
-
99
- // Send user message to the chatbot and get the response
100
- function sendMessage() {
101
- var userMessage = document.getElementById("user-input").value;
102
- if (userMessage.trim() === "") return;
103
-
104
- appendMessage(userMessage, "user");
105
-
106
- var response = "";
107
- if (userMessage.toLowerCase().includes('menu')) {
108
- response = "Here is our menu:\n";
109
- for (const category in menu) {
110
- response += category.charAt(0).toUpperCase() + category.slice(1) + ":\n";
111
- response += menu[category].join("\n") + "\n\n";
112
- }
113
- } else if (userMessage.toLowerCase().includes('suggest') || userMessage.toLowerCase().includes('ingredients')) {
114
- // Assuming ingredients are available (you could extend this with more dynamic input)
115
- const ingredients = ['chicken', 'paneer', 'sweet']; // Placeholder ingredients
116
- const suggestedDish = suggestDish(ingredients);
117
- response = `Based on your ingredients, we suggest: ${suggestedDish}`;
118
- } else {
119
- response = "Sorry, I didn't understand that. Can you ask about the menu or suggest a dish?";
120
- }
121
-
122
- appendMessage(response, "bot");
123
- document.getElementById("user-input").value = "";
124
- }
125
-
126
- // Append messages to the chat box
127
- function appendMessage(message, sender) {
128
- var chatBox = document.getElementById("chat-box");
129
- var messageDiv = document.createElement("div");
130
- messageDiv.classList.add(sender + "-message");
131
- messageDiv.innerHTML = message;
132
- chatBox.appendChild(messageDiv);
133
- chatBox.scrollTop = chatBox.scrollHeight;
134
- }
135
- </script>
136
-
137
- </body>
138
- </html>
 
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Bistro Elegance - Restaurant Chatbot</title>
8
+ <meta name="description" content="Interactive restaurant chatbot for Bistro Elegance" />
9
+ <meta name="author" content="Lovable" />
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
13
+
14
+ <meta property="og:title" content="resto-chat-html-magic" />
15
+ <meta property="og:description" content="Lovable Generated Project" />
16
+ <meta property="og:type" content="website" />
17
+ <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
18
+
19
+ <meta name="twitter:card" content="summary_large_image" />
20
+ <meta name="twitter:site" content="@lovable_dev" />
21
+ <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
22
+ </head>
23
+
24
+ <body>
25
+ <div id="root"></div>
26
+ <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
27
+ <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
28
+ <script type="module" src="/src/main.tsx"></script>
29
+ </body>
30
+ </html>