Hugging Face's logo

Spaces:
wookimchye
/
ITI109-SectionB-English
Sleeping

App Files Community
wookimchye commited on
Commit
950c1d6
·
verified ·
1 Parent(s): bab0954

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +135 -135
templates/index.html CHANGED
@@ -1,135 +1,135 @@
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>Asian Food Chatbot</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- background-color: #f4f4f9;
11
- margin: 0;
12
- padding: 0;
13
- display: flex;
14
- justify-content: center;
15
- align-items: center;
16
- height: 100vh;
17
- }
18
- .chat-container {
19
- width: 400px;
20
- background-color: #fff;
21
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22
- border-radius: 8px;
23
- overflow: hidden;
24
- display: flex;
25
- flex-direction: column;
26
- }
27
- .chat-header {
28
- background-color: #007bff;
29
- color: #fff;
30
- padding: 10px;
31
- text-align: center;
32
- font-size: 1.2em;
33
- }
34
- .chat-messages {
35
- flex: 1;
36
- padding: 10px;
37
- overflow-y: auto;
38
- }
39
- .chat-input {
40
- display: flex;
41
- border-top: 1px solid #ddd;
42
- }
43
- .chat-input input {
44
- flex: 1;
45
- padding: 10px;
46
- border: none;
47
- border-radius: 0;
48
- outline: none;
49
- }
50
- .chat-input button {
51
- padding: 10px;
52
- background-color: #007bff;
53
- color: #fff;
54
- border: none;
55
- cursor: pointer;
56
- }
57
- .chat-input button:hover {
58
- background-color: #0056b3;
59
- }
60
- .message {
61
- margin-bottom: 10px;
62
- }
63
- .message.user {
64
- text-align: right;
65
- }
66
- .message.bot {
67
- text-align: left;
68
- }
69
- .message .text {
70
- display: inline-block;
71
- padding: 10px;
72
- border-radius: 8px;
73
- max-width: 70%;
74
- }
75
- .message.user .text {
76
- background-color: #007bff;
77
- color: #fff;
78
- }
79
- .message.bot .text {
80
- background-color: #f1f1f1;
81
- color: #333;
82
- }
83
- </style>
84
- </head>
85
- <body>
86
- <div class="chat-container">
87
- <div class="chat-header">Asian Food Chatbot</div>
88
- <div class="chat-messages" id="chat-messages"></div>
89
- <div class="chat-input">
90
- <input type="text" id="user-input" placeholder="Type a message...">
91
- <button onclick="sendMessage()">Send</button>
92
- </div>
93
- </div>
94
-
95
- <script>
96
- function sendMessage() {
97
- const userInput = document.getElementById('user-input');
98
- const message = userInput.value.trim();
99
- if (message) {
100
- addMessage('user', message);
101
- userInput.value = '';
102
-
103
- // Call the /ask endpoint of the Flask server
104
- fetch('/ask', {
105
- method: 'POST',
106
- headers: {
107
- 'Content-Type': 'application/json'
108
- },
109
- body: JSON.stringify({ question: message })
110
- })
111
- .then(response => response.json())
112
- .then(data => {
113
- addMessage('bot', data.answer);
114
- })
115
- .catch(error => {
116
- console.error('Error:', error);
117
- addMessage('bot', 'Error: Unable to retrieve answer');
118
- });
119
- }
120
- }
121
-
122
- function addMessage(sender, text) {
123
- const chatMessages = document.getElementById('chat-messages');
124
- const messageElement = document.createElement('div');
125
- messageElement.classList.add('message', sender);
126
- const textElement = document.createElement('div');
127
- textElement.classList.add('text');
128
- textElement.textContent = text;
129
- messageElement.appendChild(textElement);
130
- chatMessages.appendChild(messageElement);
131
- chatMessages.scrollTop = chatMessages.scrollHeight;
132
- }
133
- </script>
134
- </body>
135
- </html>
 
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>Asian Food Chatbot</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background-color: #f4f4f9;
11
+ margin: 0;
12
+ padding: 0;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ }
18
+ .chat-container {
19
+ width: 500px;
20
+ background-color: #fff;
21
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
22
+ border-radius: 8px;
23
+ overflow: hidden;
24
+ display: flex;
25
+ flex-direction: column;
26
+ }
27
+ .chat-header {
28
+ background-color: #007bff;
29
+ color: #fff;
30
+ padding: 10px;
31
+ text-align: center;
32
+ font-size: 1.2em;
33
+ }
34
+ .chat-messages {
35
+ flex: 1;
36
+ padding: 10px;
37
+ overflow-y: auto;
38
+ }
39
+ .chat-input {
40
+ display: flex;
41
+ border-top: 1px solid #ddd;
42
+ }
43
+ .chat-input input {
44
+ flex: 1;
45
+ padding: 10px;
46
+ border: none;
47
+ border-radius: 0;
48
+ outline: none;
49
+ }
50
+ .chat-input button {
51
+ padding: 10px;
52
+ background-color: #007bff;
53
+ color: #fff;
54
+ border: none;
55
+ cursor: pointer;
56
+ }
57
+ .chat-input button:hover {
58
+ background-color: #0056b3;
59
+ }
60
+ .message {
61
+ margin-bottom: 10px;
62
+ }
63
+ .message.user {
64
+ text-align: right;
65
+ }
66
+ .message.bot {
67
+ text-align: left;
68
+ }
69
+ .message .text {
70
+ display: inline-block;
71
+ padding: 10px;
72
+ border-radius: 8px;
73
+ max-width: 70%;
74
+ }
75
+ .message.user .text {
76
+ background-color: #007bff;
77
+ color: #fff;
78
+ }
79
+ .message.bot .text {
80
+ background-color: #f1f1f1;
81
+ color: #333;
82
+ }
83
+ </style>
84
+ </head>
85
+ <body>
86
+ <div class="chat-container">
87
+ <div class="chat-header">Asian Food Chatbot</div>
88
+ <div class="chat-messages" id="chat-messages"></div>
89
+ <div class="chat-input">
90
+ <input type="text" id="user-input" placeholder="Type a message...">
91
+ <button onclick="sendMessage()">Send</button>
92
+ </div>
93
+ </div>
94
+
95
+ <script>
96
+ function sendMessage() {
97
+ const userInput = document.getElementById('user-input');
98
+ const message = userInput.value.trim();
99
+ if (message) {
100
+ addMessage('user', message);
101
+ userInput.value = '';
102
+
103
+ // Call the /ask endpoint of the Flask server
104
+ fetch('/ask', {
105
+ method: 'POST',
106
+ headers: {
107
+ 'Content-Type': 'application/json'
108
+ },
109
+ body: JSON.stringify({ question: message })
110
+ })
111
+ .then(response => response.json())
112
+ .then(data => {
113
+ addMessage('bot', data.answer);
114
+ })
115
+ .catch(error => {
116
+ console.error('Error:', error);
117
+ addMessage('bot', 'Error: Unable to retrieve answer');
118
+ });
119
+ }
120
+ }
121
+
122
+ function addMessage(sender, text) {
123
+ const chatMessages = document.getElementById('chat-messages');
124
+ const messageElement = document.createElement('div');
125
+ messageElement.classList.add('message', sender);
126
+ const textElement = document.createElement('div');
127
+ textElement.classList.add('text');
128
+ textElement.textContent = text;
129
+ messageElement.appendChild(textElement);
130
+ chatMessages.appendChild(messageElement);
131
+ chatMessages.scrollTop = chatMessages.scrollHeight;
132
+ }
133
+ </script>
134
+ </body>
135
+ </html>