Hugging Face's logo

Spaces:
ayush-thakur02
/
tannu-faq
Sleeping

App Files Community
ayush-thakur02 commited on
Commit
9764916
·
verified ·
1 Parent(s): 1da769c

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +214 -0
templates/index.html ADDED
@@ -0,0 +1,214 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Tannu FAQ Chatbot</title>
8
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary-color: #6c5ce7;
12
+ --secondary-color: #a29bfe;
13
+ --background-color: #f9f9f9;
14
+ --text-color: #333;
15
+ --message-bg-user: #6c5ce7;
16
+ --message-bg-bot: #f0f0f0;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Roboto', sans-serif;
27
+ background-color: var(--background-color);
28
+ color: var(--text-color);
29
+ display: flex;
30
+ justify-content: center;
31
+ align-items: center;
32
+ min-height: 100vh;
33
+ }
34
+
35
+ .chat-container {
36
+ width: 100%;
37
+ max-width: 800px;
38
+ background-color: white;
39
+ border-radius: 20px;
40
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
41
+ overflow: hidden;
42
+ display: flex;
43
+ flex-direction: column;
44
+ height: 90vh;
45
+ }
46
+
47
+ .chat-header {
48
+ background-color: var(--primary-color);
49
+ color: white;
50
+ padding: 20px;
51
+ text-align: center;
52
+ font-size: 24px;
53
+ font-weight: 500;
54
+ }
55
+
56
+ .chat-messages {
57
+ flex-grow: 1;
58
+ overflow-y: auto;
59
+ padding: 20px;
60
+ display: flex;
61
+ flex-direction: column;
62
+ }
63
+
64
+ .message {
65
+ max-width: 80%;
66
+ margin-bottom: 15px;
67
+ padding: 12px 18px;
68
+ border-radius: 20px;
69
+ font-size: 16px;
70
+ line-height: 1.4;
71
+ opacity: 0;
72
+ transform: translateY(20px);
73
+ animation: fadeIn 0.3s forwards;
74
+ }
75
+
76
+ @keyframes fadeIn {
77
+ to {
78
+ opacity: 1;
79
+ transform: translateY(0);
80
+ }
81
+ }
82
+
83
+ .user-message {
84
+ align-self: flex-end;
85
+ background-color: var(--message-bg-user);
86
+ color: white;
87
+ border-bottom-right-radius: 0;
88
+ }
89
+
90
+ .bot-message {
91
+ align-self: flex-start;
92
+ background-color: var(--message-bg-bot);
93
+ color: var(--text-color);
94
+ border-bottom-left-radius: 0;
95
+ }
96
+
97
+ .chat-input {
98
+ display: flex;
99
+ padding: 20px;
100
+ background-color: white;
101
+ border-top: 1px solid #e0e0e0;
102
+ }
103
+
104
+ #user-input {
105
+ flex-grow: 1;
106
+ padding: 12px 20px;
107
+ border: 2px solid var(--secondary-color);
108
+ border-radius: 30px;
109
+ font-size: 16px;
110
+ outline: none;
111
+ transition: border-color 0.3s;
112
+ }
113
+
114
+ #user-input:focus {
115
+ border-color: var(--primary-color);
116
+ }
117
+
118
+ #send-button {
119
+ padding: 12px 24px;
120
+ background-color: var(--primary-color);
121
+ color: white;
122
+ border: none;
123
+ border-radius: 30px;
124
+ margin-left: 10px;
125
+ cursor: pointer;
126
+ font-size: 16px;
127
+ font-weight: 500;
128
+ transition: background-color 0.3s;
129
+ }
130
+
131
+ #send-button:hover {
132
+ background-color: var(--secondary-color);
133
+ }
134
+
135
+ /* Scrollbar Styles */
136
+ .chat-messages::-webkit-scrollbar {
137
+ width: 8px;
138
+ }
139
+
140
+ .chat-messages::-webkit-scrollbar-track {
141
+ background: #f1f1f1;
142
+ }
143
+
144
+ .chat-messages::-webkit-scrollbar-thumb {
145
+ background: var(--secondary-color);
146
+ border-radius: 10px;
147
+ }
148
+
149
+ .chat-messages::-webkit-scrollbar-thumb:hover {
150
+ background: var(--primary-color);
151
+ }
152
+ </style>
153
+ </head>
154
+
155
+ <body>
156
+ <div class="chat-container">
157
+ <div class="chat-header">
158
+ FAQ Chatbot
159
+ </div>
160
+ <div class="chat-messages" id="chat-messages"></div>
161
+ <div class="chat-input">
162
+ <input type="text" id="user-input" placeholder="Type your question...">
163
+ <button id="send-button">Send</button>
164
+ </div>
165
+ </div>
166
+
167
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
168
+ <script>
169
+ $(document).ready(function () {
170
+ function cleanMessage(message) {
171
+ // Remove </Tannu> and <user> tags
172
+ return message.replace(/<\/Tannu>|<user>/g, '').trim();
173
+ }
174
+
175
+ function addMessage(message, isUser) {
176
+ const cleanedMessage = cleanMessage(message);
177
+ const messageDiv = $('<div>').addClass('message').text(cleanedMessage);
178
+ if (isUser) {
179
+ messageDiv.addClass('user-message');
180
+ } else {
181
+ messageDiv.addClass('bot-message');
182
+ }
183
+ $('#chat-messages').append(messageDiv);
184
+ $('#chat-messages').scrollTop($('#chat-messages')[0].scrollHeight);
185
+ }
186
+
187
+ $('#send-button').click(function () {
188
+ const userMessage = $('#user-input').val().trim();
189
+ if (userMessage) {
190
+ addMessage(userMessage, true);
191
+ $('#user-input').val('');
192
+
193
+ $.ajax({
194
+ url: '/chat',
195
+ method: 'POST',
196
+ contentType: 'application/json',
197
+ data: JSON.stringify({ message: userMessage }),
198
+ success: function (response) {
199
+ addMessage(response.message, false);
200
+ }
201
+ });
202
+ }
203
+ });
204
+
205
+ $('#user-input').keypress(function (e) {
206
+ if (e.which == 13) {
207
+ $('#send-button').click();
208
+ }
209
+ });
210
+ });
211
+ </script>
212
+ </body>
213
+
214
+ </html>