Hugging Face's logo

Spaces:
Swathi6
/
Robbin
Sleeping

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

Update template/index.html

Browse files
Files changed (1) hide show
  1. template/index.html +59 -19
template/index.html CHANGED
@@ -7,13 +7,18 @@
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
 
 
 
10
  }
11
  #chat-container {
12
  max-width: 600px;
13
  margin: 0 auto;
14
  padding: 20px;
15
- border: 1px solid #ddd;
16
- background-color: #f9f9f9;
 
 
17
  }
18
  #chat-box {
19
  max-height: 400px;
@@ -21,19 +26,25 @@
21
  margin-bottom: 20px;
22
  border: 1px solid #ddd;
23
  padding: 10px;
24
- background-color: #fff;
 
25
  }
26
  #user-input {
27
  width: 100%;
28
- padding: 10px;
29
  margin-top: 10px;
 
 
30
  }
31
  #send-btn {
32
- padding: 10px 15px;
33
  background-color: #007bff;
34
  color: white;
35
  border: none;
36
  cursor: pointer;
 
 
 
37
  }
38
  #send-btn:hover {
39
  background-color: #0056b3;
@@ -54,8 +65,9 @@
54
  </style>
55
  </head>
56
  <body>
 
57
  <div id="chat-container">
58
- <h2>Restaurant Chatbot</h2>
59
  <div id="chat-box">
60
  <!-- Messages will appear here -->
61
  </div>
@@ -64,27 +76,54 @@
64
  </div>
65
 
66
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  function sendMessage() {
68
  var userMessage = document.getElementById("user-input").value;
69
  if (userMessage.trim() === "") return;
70
 
71
  appendMessage(userMessage, "user");
72
 
73
- // Send user message to Flask backend
74
- fetch('/get_response', {
75
- method: 'POST',
76
- headers: {
77
- 'Content-Type': 'application/x-www-form-urlencoded'
78
- },
79
- body: 'user_message=' + encodeURIComponent(userMessage)
80
- })
81
- .then(response => response.json())
82
- .then(data => {
83
- appendMessage(data.response, "bot");
84
- document.getElementById("user-input").value = "";
85
- });
 
 
 
 
 
86
  }
87
 
 
88
  function appendMessage(message, sender) {
89
  var chatBox = document.getElementById("chat-box");
90
  var messageDiv = document.createElement("div");
@@ -94,5 +133,6 @@
94
  chatBox.scrollTop = chatBox.scrollHeight;
95
  }
96
  </script>
 
97
  </body>
98
  </html>
 
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;
 
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;
 
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>
 
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");
 
133
  chatBox.scrollTop = chatBox.scrollHeight;
134
  }
135
  </script>
136
+
137
  </body>
138
  </html>