Hugging Face's logo

Spaces:
Subbu1304
/
aichatbotworking
Sleeping

App Files Community
Subbu1304 commited on
Commit
d5ab082
·
verified ·
1 Parent(s): 9ac7372

Update Templates/index.html

Browse files
Files changed (1) hide show
  1. Templates/index.html +36 -36
Templates/index.html CHANGED
@@ -9,49 +9,49 @@
9
  <body>
10
  <div class="chat-container">
11
  <div class="chat-header">
12
- <div class="logo">
13
- <img src="chef-hat-icon.png" alt="Chef Hat">
14
- <h1>Food Customization Assistant</h1>
15
- </div>
16
  </div>
17
 
18
- <div class="messages" id="messages"></div>
19
-
20
- <div class="input-box">
21
- <input id="user-input" type="text" placeholder="Type your message...">
22
- <button onclick="sendMessage()">Send</button>
23
  </div>
24
- </div>
25
-
26
- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
27
- <script>
28
- const messagesDiv = document.getElementById('messages');
29
 
30
- function appendMessage(message, isBot = true) {
31
- const div = document.createElement('div');
32
- div.classList.add(isBot ? 'bot-message' : 'user-message');
33
- div.textContent = message;
34
- messagesDiv.appendChild(div);
35
- messagesDiv.scrollTop = messagesDiv.scrollHeight;
36
- }
 
 
 
 
 
 
 
37
 
38
- function sendMessage() {
39
- const userMessage = document.getElementById('user-input').value;
40
- if (!userMessage) return;
 
 
 
 
41
 
42
- appendMessage(userMessage, false); // Show user message
 
 
 
 
43
 
44
- axios.post('http://localhost:5000/chat', { message: userMessage })
45
- .then(response => {
46
- appendMessage(response.data.bot_message, true); // Show bot response
47
- })
48
- .catch(error => {
49
- console.error('Error:', error);
50
- appendMessage('Sorry, I didn’t understand that.', true);
51
- });
52
 
53
- document.getElementById('user-input').value = ''; // Clear input field
54
- }
55
- </script>
56
  </body>
57
  </html>
 
9
  <body>
10
  <div class="chat-container">
11
  <div class="chat-header">
12
+ <h2>Food Customization Assistant</h2>
 
 
 
13
  </div>
14
 
15
+ <div class="chat-box" id="chat-box">
16
+ <div class="bot-message">
17
+ <p>Hi! Would you like to customize food?</p>
18
+ </div>
 
19
  </div>
 
 
 
 
 
20
 
21
+ <div class="user-input">
22
+ <input type="text" id="user-message" placeholder="Type 'yes' or 'yeah' to start" />
23
+ <button id="submit-btn">Submit</button>
24
+ </div>
25
+
26
+ <div class="category-selection">
27
+ <select id="category-dropdown" class="dropdown" hidden>
28
+ <option value="Veg">Veg</option>
29
+ <option value="Non-Veg">Non-Veg</option>
30
+ <option value="Vegan">Vegan</option>
31
+ <option value="Pasta & Noodles">Pasta & Noodles</option>
32
+ <option value="Breads & Baked Goods">Breads & Baked Goods</option>
33
+ </select>
34
+ </div>
35
 
36
+ <div class="nutrition-selection" hidden>
37
+ <select id="nutrition-dropdown" class="dropdown">
38
+ <option value="Protein Rich">Protein Rich</option>
39
+ <option value="Low Carbs">Low Carbs</option>
40
+ <option value="Gluten-Free">Gluten-Free</option>
41
+ </select>
42
+ </div>
43
 
44
+ <div class="ingredient-selection" hidden>
45
+ <select id="ingredient-dropdown" class="dropdown">
46
+ <!-- Ingredients will be populated dynamically -->
47
+ </select>
48
+ </div>
49
 
50
+ <div class="response">
51
+ <div id="bot-response" class="bot-message"></div>
52
+ </div>
53
+ </div>
 
 
 
 
54
 
55
+ <script src="script.js"></script>
 
 
56
  </body>
57
  </html>