Hugging Face's logo

Spaces:
prathameshks
/
Multi-File-Chatting
Sleeping

App Files Community
Prathamesh Sable commited on
Commit
36b4cec
·
1 Parent(s): 983653f

added template

Browse files
Files changed (1) hide show
  1. templates/index.html +274 -0
templates/index.html ADDED
@@ -0,0 +1,274 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta content="width=device-width, initial-scale=1.0" name="viewport" />
7
+ <title>
8
+ Multi File Chat using RAG
9
+ </title>
10
+ <!-- <script src="https://cdn.tailwindcss.com"> -->
11
+ <script src="https://cdn.tailwindcss.com/3.4.15">
12
+ </script>
13
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
14
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&amp;display=swap" rel="stylesheet" />
15
+ <style>
16
+ body {
17
+ font-family: 'Roboto', sans-serif;
18
+ }
19
+ </style>
20
+ </head>
21
+
22
+ <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
23
+ <div class="flex flex-col h-screen">
24
+ <!-- Combined Header -->
25
+ <div class="bg-white dark:bg-gray-800 p-4 flex justify-between items-center w-full ">
26
+ <h2 class="text-xl font-bold">
27
+ Question Files
28
+ </h2>
29
+ <div class="flex items-center space-x-4">
30
+ <button class="bg-gray-200 dark:bg-gray-700 p-2 rounded-full" id="theme-toggle">
31
+ <i class="fas fa-moon dark:hidden">
32
+ </i>
33
+ <i class="fas fa-sun hidden dark:block">
34
+ </i>
35
+ </button>
36
+ <button class="md:hidden bg-gray-200 dark:bg-gray-700 p-2 rounded-full" id="menu-toggle">
37
+ <i class="fas fa-bars">
38
+ </i>
39
+ </button>
40
+ </div>
41
+ </div>
42
+ <hr>
43
+ <div class="flex flex-1 overflow-hidden">
44
+ <!-- Sidebar -->
45
+ <div class="w-64 bg-white dark:bg-gray-800 p-4 flex flex-col absolute md:relative md:flex md:w-1/4 h-full z-10 transform -translate-x-full md:translate-x-0 transition-transform duration-300"
46
+ id="sidebar">
47
+ <div class="flex-1 overflow-y-auto">
48
+ <ul class="space-y-2" id="file-list">
49
+ <!-- <li class="flex justify-between items-center bg-gray-200 dark:bg-gray-700 p-2 rounded">
50
+ <span>
51
+ example-file.txt
52
+ </span>
53
+ <button class="text-red-500">
54
+ <i class="fas fa-times">
55
+ </i>
56
+ </button>
57
+ </li>
58
+ <li class="flex justify-between items-center bg-gray-200 dark:bg-gray-700 p-2 rounded">
59
+ <span>
60
+ another-file.pdf
61
+ </span>
62
+ <button class="text-red-500">
63
+ <i class="fas fa-times">
64
+ </i>
65
+ </button>
66
+ </li> -->
67
+ </ul>
68
+ <!-- no files added message -->
69
+ <p class="text-gray-500 text-center p-4 hidden" id="no-files-message">
70
+ No files Please Add Files to chat with them.
71
+ </p>
72
+ </div>
73
+ <div class="mt-4">
74
+ <input class="hidden" id="file-upload" type="file" accept=".pdf,.txt,.docx,.md" multiple />
75
+ <label id="dropzone"
76
+ class="cursor-pointer border-2 border-dashed border-gray-300 dark:border-gray-600 p-4 rounded text-center block"
77
+ for="file-upload">
78
+ <p>
79
+ Drag &amp; Drop Files Here to Upload
80
+ </p>
81
+ <p class="text-sm text-gray-500 dark:text-gray-400">
82
+ Supported files: .txt, .pdf, .docx
83
+ </p>
84
+ <p class="mt-2 text-blue-500">
85
+ or click here to upload
86
+ </p>
87
+ </label>
88
+ </div>
89
+ </div>
90
+ <!-- Main Content -->
91
+ <div class="flex-1 flex flex-col h-full">
92
+ <!-- Chat Messages -->
93
+ <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-messages">
94
+ <div class="flex items-start space-x-2">
95
+ <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg">
96
+ <p>
97
+ Hello! How can I assist you today?
98
+ </p>
99
+ <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">
100
+ Sources: <a class="text-blue-500" href="#">source1.com</a>, <a class="text-blue-500"
101
+ href="#">source2.com</a>
102
+ </p>
103
+ </div>
104
+ </div>
105
+ <div class="flex items-start space-x-2 flex-row-reverse">
106
+ <div class="bg-blue-500 text-white p-3 rounded-lg">
107
+ <p>
108
+ I need help with my account.
109
+ </p>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <!-- Message Input -->
114
+ <form id="message-form">
115
+ <fieldset id="message-form-fields">
116
+ <div class="bg-white dark:bg-gray-800 p-4 flex items-center space-x-2">
117
+ <input
118
+ class="bg-white dark:bg-gray-800 flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded text-black dark:text-white"
119
+ id="message-input" placeholder="Type your message..." type="text" />
120
+ <button type="submit"
121
+ class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 flex items-center">
122
+ <i class='fas fa-paper-plane mr-2'></i>
123
+ </button>
124
+ </div>
125
+ </fieldset>
126
+ </form>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
131
+ <script>
132
+
133
+ // File handling functionality
134
+ const dropZone = document.getElementById('dropzone'); // label of input
135
+ const fileInput = document.getElementById('file-upload'); // input element
136
+ const fileList = document.getElementById('file-list'); // div to display files uploaded
137
+
138
+ var file_list = [];
139
+ var file_count = 0;
140
+
141
+ // Check for saved user preference, if any, on load of the website
142
+ if (localStorage.getItem('theme') === 'dark') {
143
+ document.body.classList.add('dark');
144
+ } else {
145
+ document.body.classList.remove('dark');
146
+ }
147
+
148
+ document.getElementById('theme-toggle').addEventListener('click', function () {
149
+ if (document.body.classList.contains('dark')) {
150
+ document.body.classList.remove('dark');
151
+ localStorage.setItem('theme', 'light');
152
+ } else {
153
+ document.body.classList.add('dark');
154
+ localStorage.setItem('theme', 'dark');
155
+ }
156
+ });
157
+
158
+
159
+
160
+ // message send
161
+ document.getElementById('message-form').addEventListener('submit', function (e) {
162
+ e.preventDefault();
163
+ const messageInput = document.getElementById('message-input');
164
+ const message = messageInput.value.trim();
165
+ if (message) {
166
+ console.log('Sending message:', message);
167
+ messageInput.value = '';
168
+ }
169
+ });
170
+
171
+
172
+ document.addEventListener('DOMContentLoaded', () => {
173
+ fileInput.addEventListener("change", () => {
174
+ const files = fileInput.files;
175
+ if (files.length > 0) {
176
+ handleFiles(files);
177
+ }
178
+ });
179
+
180
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
181
+ dropZone.addEventListener(eventName, preventDefaults, false);
182
+ });
183
+
184
+ ['dragenter', 'dragover'].forEach(eventName => {
185
+ dropZone.addEventListener(eventName, highlight, false);
186
+ });
187
+
188
+ ['dragleave', 'drop'].forEach(eventName => {
189
+ dropZone.addEventListener(eventName, unhighlight, false);
190
+ });
191
+
192
+ ['drop'].forEach(eventName => {
193
+ dropZone.addEventListener(eventName, handleDrop, false);
194
+ });
195
+
196
+ function preventDefaults(e) {
197
+ // console.log('prevent default');
198
+ e.preventDefault();
199
+ e.stopPropagation();
200
+ }
201
+
202
+ function highlight(e) {
203
+ // console.log('highlight');
204
+ dropZone.classList.add('bg-blue-500');
205
+ }
206
+
207
+ function unhighlight(e) {
208
+ // console.log('unhighlight');
209
+ dropZone.classList.remove('bg-blue-500');
210
+ }
211
+
212
+ function handleDrop(e) {
213
+ console.log("files drop");
214
+ const dt = e.dataTransfer;
215
+ const files = dt.files;
216
+ handleFiles(files);
217
+ }
218
+
219
+ function handleFiles(files) {
220
+ //console.log("Handle Files");
221
+ //console.log(files);
222
+
223
+ Array.from(files).forEach(file => {
224
+ file_list[file_count] = file;
225
+ const listItem = document.createElement('li');
226
+ listItem.id = `file_item_${file_count}`
227
+ listItem.className = 'flex justify-between items-center bg-gray-200 dark:bg-gray-700 p-2 rounded';
228
+ listItem.innerHTML = `
229
+ <span style="width: 90%;overflow: hidden;">${file.name}</span>
230
+ <button class="text-red-500 w-20" onclick="removeFile(${file_count})">
231
+ <i class="fas fa-times"></i>
232
+ </button>`;
233
+ fileList.appendChild(listItem);
234
+ file_count++;
235
+ });
236
+ manageEmptyFileList();
237
+ }
238
+
239
+ });
240
+
241
+ function manageEmptyFileList() {
242
+ if (fileList.childElementCount == 0) {
243
+ fileList.classList.add('hidden');
244
+ document.getElementById("no-files-message").classList.remove('hidden');
245
+ // disable message form message-form
246
+ document.getElementById('message-form-fields').setAttribute('disabled', true);
247
+ } else {
248
+ document.getElementById("no-files-message").classList.add('hidden');
249
+ fileList.classList.remove('hidden');
250
+ document.getElementById('message-form-fields').removeAttribute('disabled');
251
+ }
252
+ }
253
+
254
+ function removeFile(index) {
255
+ console.log(index);
256
+ file_list[index] = null;
257
+ document.getElementById(`file_item_${index}`).remove();
258
+ manageEmptyFileList();
259
+ }
260
+
261
+
262
+ // Toggle sidebar for mobile view
263
+ document.getElementById('menu-toggle').addEventListener('click', function () {
264
+ const sidebar = document.getElementById('sidebar');
265
+ sidebar.classList.toggle('-translate-x-full');
266
+ });
267
+
268
+ window.onload = function () {
269
+ manageEmptyFileList();
270
+ }
271
+ </script>
272
+ </body>
273
+
274
+ </html>