Hugging Face's logo

Spaces:
Neurolingua
/
Aiducation-Edtech-GenAI
Sleeping

App Files Community
6
Neurolingua commited on
Commit
d622f91
·
verified ·
1 Parent(s): 22555d5

Update templates/student_pdfqa.html

Browse files
Files changed (1) hide show
  1. templates/student_pdfqa.html +578 -500
templates/student_pdfqa.html CHANGED
@@ -1,501 +1,579 @@
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>SmartLearn - PDF Q&A</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
9
- <style>
10
- .audio-container {
11
- display: none;
12
- }
13
- .audio-list {
14
- display: block;
15
- margin-top: 1rem;
16
- }
17
- .audio-list ul {
18
- list-style-type: none;
19
- padding: 0;
20
- }
21
- .audio-list li {
22
- padding: 0.5rem;
23
- cursor: pointer;
24
- transition: background-color 0.3s ease;
25
- }
26
- .audio-list li:hover {
27
- background-color: #f0f2f5;
28
- }
29
- .audio-list {
30
- display: block;
31
- margin-top: 1rem;
32
- }
33
- .audio-container {
34
- display: none;
35
- }
36
-
37
- .audio-list ul {
38
- list-style-type: none;
39
- padding: 0;
40
- }
41
- .audio-list li {
42
- padding: 0.5rem;
43
- cursor: pointer;
44
- transition: background-color 0.3s ease;
45
- }
46
- .audio-list li:hover {
47
- background-color: #f0f2f5;
48
- }
49
- body {
50
- font-family: 'Roboto', sans-serif;
51
- background-color: #f0f2f5;
52
- margin: 0;
53
- padding: 0;
54
- color: #333;
55
- height: 100vh;
56
- display: flex;
57
- flex-direction: column;
58
- }
59
- video#background-video {
60
- position: fixed;
61
- top: 0;
62
- left: 0;
63
- width: 100%;
64
- height: 100%;
65
- object-fit: cover;
66
- z-index: -1;
67
- }
68
- .container {
69
- flex: 1;
70
- display: flex;
71
- flex-direction: column;
72
- max-width: 1200px;
73
- margin: 2rem auto;
74
- padding: 2rem;
75
- background-color: rgba(255, 255, 255, 0.9);
76
- border-radius: 10px;
77
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
78
- overflow: hidden;
79
- }
80
- .content-wrapper {
81
- display: flex;
82
- flex: 1;
83
- overflow: hidden;
84
- }
85
- .pdf-container, .chat-container,.audio-container {
86
- flex: 1;
87
- background-color: white;
88
- border-radius: 10px;
89
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
90
- display: flex;
91
- flex-direction: column;
92
- overflow: hidden;
93
- }
94
- .pdf-container {
95
- margin-right: 1rem;
96
- }
97
- .chat-container {
98
- margin-left: 1rem;
99
- }
100
- h1 {
101
- text-align: center;
102
- color: #333;
103
- margin-bottom: 2rem;
104
- }
105
- .back-button {
106
- align-self: flex-start;
107
- background-color: #3498db;
108
- color: white;
109
- border: none;
110
- padding: 0.5rem 1rem;
111
- border-radius: 5px;
112
- cursor: pointer;
113
- transition: background-color 0.3s ease;
114
- margin-bottom: 1rem;
115
- }
116
- .back-button:hover {
117
- background-color: #2980b9;
118
- }
119
- .pdf-upload {
120
- display: flex;
121
- justify-content: center;
122
- align-items: center;
123
- padding: 1rem;
124
- background-color: #f8f9fa;
125
- border-radius: 10px 10px 0 0;
126
- }
127
- .pdf-upload input[type="file"] {
128
- display: none;
129
- }
130
- .pdf-upload label {
131
- background-color: #3498db;
132
- color: white;
133
- padding: 0.5rem 1rem;
134
- border-radius: 5px;
135
- cursor: pointer;
136
- transition: background-color 0.3s ease;
137
- }
138
- .pdf-upload label:hover {
139
- background-color: #2980b9;
140
- }
141
- .pdf-upload button {
142
- background-color: #2ecc71;
143
- color: white;
144
- border: none;
145
- padding: 0.5rem 1rem;
146
- border-radius: 5px;
147
- cursor: pointer;
148
- margin-left: 1rem;
149
- transition: background-color 0.3s ease;
150
- }
151
- .pdf-upload button:hover {
152
- background-color: #27ae60;
153
- }
154
- .pdf-status {
155
- text-align: center;
156
- padding: 0.5rem;
157
- background-color: #f8f9fa;
158
- border-bottom: 1px solid #e9ecef;
159
- }
160
- .pdf-content {
161
- flex: 1;
162
- padding: 1rem;
163
- overflow-y: auto;
164
- font-size: 0.9rem;
165
- line-height: 1.5;
166
- }
167
- .chat-messages {
168
- flex: 1;
169
- overflow-y: auto;
170
- padding: 1rem;
171
- }
172
- .message {
173
- margin-bottom: 1rem;
174
- padding: 0.5rem 1rem;
175
- border-radius: 20px;
176
- max-width: 80%;
177
- }
178
- .user-message {
179
- background-color: #3498db;
180
- color: white;
181
- align-self: flex-end;
182
- margin-left: auto;
183
- }
184
- .ai-message {
185
- background-color: #ecf0f1;
186
- color: #333;
187
- }
188
- .chat-input {
189
- display: flex;
190
- padding: 1rem;
191
- background-color: #f8f9fa;
192
- border-top: 1px solid #e9ecef;
193
- }
194
- .chat-input input {
195
- flex-grow: 1;
196
- padding: 0.5rem;
197
- border: 1px solid #ced4da;
198
- border-radius: 20px;
199
- margin-right: 1rem;
200
- }
201
- .chat-input button {
202
- background-color: #3498db;
203
- color: white;
204
- border: none;
205
- padding: 0.5rem 1rem;
206
- border-radius: 20px;
207
- cursor: pointer;
208
- transition: background-color 0.3s ease;
209
- }
210
- .chat-input button:hover {
211
- background-color: #2980b9;
212
- }
213
- @keyframes spin {
214
- 0% { transform: rotate(0deg); }
215
- 100% { transform: rotate(360deg); }
216
- }
217
- .loading-icon {
218
- animation: spin 2s linear infinite;
219
- display: inline-block;
220
- margin-right: 0.5rem;
221
- }
222
- .button-container {
223
- display: flex;
224
- justify-content: flex-end;
225
- margin-bottom: 1rem;
226
- }
227
- .mode-button {
228
- background-color: #3498db;
229
- color: white;
230
- border: none;
231
- padding: 0.5rem 1rem;
232
- border-radius: 20px;
233
- cursor: pointer;
234
- transition: all 0.3s ease;
235
- margin-left: 0.5rem;
236
- font-weight: 500;
237
- display: flex;
238
- align-items: center;
239
- }
240
- .mode-button:hover {
241
- background-color: #2980b9;
242
- transform: translateY(-2px);
243
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
244
- }
245
- .mode-button i {
246
- margin-right: 0.5rem;
247
- }
248
- .active {
249
- background-color: #2ecc71;
250
- }
251
- .active:hover {
252
- background-color: #27ae60;
253
- }
254
- .audio-player {
255
- display: none;
256
- width: 100%;
257
- margin-top: 1rem;
258
- }
259
- .audio-player audio {
260
- width: 100%;
261
- border-radius: 10px;
262
- }
263
- .audio-list {
264
- display: none;
265
- margin-top: 1rem;
266
- }
267
- .audio-list ul {
268
- list-style-type: none;
269
- padding: 0;
270
- }
271
- .audio-list li {
272
- padding: 0.5rem;
273
- cursor: pointer;
274
- transition: background-color 0.3s ease;
275
- }
276
- .audio-list li:hover {
277
- background-color: #f0f2f5;
278
- }
279
- </style>
280
- </head>
281
- <body>
282
- <video id="background-video" autoplay loop muted>
283
- <source src="../static/pdf.mp4" type="video/mp4">
284
- Your browser does not support the video tag.
285
- </video>
286
- <div class="container">
287
- <button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i> Back</button>
288
- <h1><i class="fas fa-file-pdf"></i> PDF Q&A</h1>
289
- <div class="button-container">
290
- <button id="text-mode" class="mode-button active" onclick="switchMode('text')">
291
- <i class="fas fa-keyboard"></i> Ask questions
292
- </button>
293
- <button id="audio-mode" class="mode-button" onclick="switchMode('audio')">
294
- <i class="fas fa-microphone"></i> Audio book
295
- </button>
296
- </div>
297
- <div class="content-wrapper">
298
- <div class="pdf-container">
299
- <div class="pdf-upload">
300
- <label for="pdf-file">
301
- <i class="fas fa-upload"></i> Choose PDF
302
- </label>
303
- <input type="file" id="pdf-file" accept=".pdf">
304
- <button onclick="uploadPDF()"><i class="fas fa-cloud-upload-alt"></i> Upload PDF</button>
305
- </div>
306
- <div id="pdf-status" class="pdf-status"></div>
307
- <div id="pdf-content" class="pdf-content"></div>
308
- </div>
309
- <div class="chat-container">
310
- <div id="chat-messages" class="chat-messages"></div>
311
- <div id="text-input" class="chat-input">
312
- <input type="text" id="user-input" placeholder="Ask a question about the PDF...">
313
- <button onclick="sendMessage()"><i class="fas fa-paper-plane"></i> Send</button>
314
- </div>
315
- </div>
316
- <div id="audio-container" class="audio-container">
317
- <h3>Get your audio book for all chapters here</h3>
318
- <audio id="uploaded-audio" controls>
319
- Your browser does not support the audio tag.
320
- </audio>
321
- <div id="audio-list" class="audio-list">
322
- <ul>
323
- <!-- Audio files will be dynamically inserted here -->
324
- </ul>
325
- </div>
326
- </div>
327
- </div>
328
- </div>
329
- <script>
330
- document.getElementById('audio-mode').addEventListener('click', function() {
331
- switchMode('audio');
332
- });
333
- const chatMessages = document.getElementById('chat-messages');
334
- const userInput = document.getElementById('user-input');
335
- const pdfStatus = document.getElementById('pdf-status');
336
- const pdfContent = document.getElementById('pdf-content');
337
- let pdfText = '';
338
-
339
- function uploadPDF() {
340
- const fileInput = document.getElementById('pdf-file');
341
- const file = fileInput.files[0];
342
- if (file) {
343
- const formData = new FormData();
344
- formData.append('pdf-file', file);
345
-
346
- pdfStatus.innerHTML = '<i class="fas fa-spinner loading-icon"></i> Uploading and processing PDF...';
347
-
348
- fetch('/student_pdfqa', {
349
- method: 'POST',
350
- body: formData
351
- })
352
- .then(response => response.json())
353
- .then(data => {
354
- if (data.pdf_text) {
355
- pdfText = data.pdf_text;
356
- pdfStatus.innerHTML = `<i class="fas fa-check-circle"></i> PDF "${file.name}" uploaded and processed. You can now ask questions.`;
357
- displayPDFContent(pdfText);
358
- addMessage("PDF uploaded successfully. What would you like to know about its contents?", false);
359
- } else {
360
- pdfStatus.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${data.message}`;
361
- }
362
- })
363
- .catch(error => {
364
- pdfStatus.innerHTML = '<i class="fas fa-times-circle"></i> Error uploading the PDF. Please try again.';
365
- console.error('Error:', error);
366
- });
367
- } else {
368
- pdfStatus.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Please select a PDF file first.';
369
- }
370
- }
371
-
372
- function displayPDFContent(text) {
373
- pdfContent.innerHTML = '';
374
- const paragraphs = text.split('\n\n');
375
- paragraphs.forEach(paragraph => {
376
- if (paragraph.trim()) {
377
- const p = document.createElement('p');
378
- p.textContent = paragraph;
379
- pdfContent.appendChild(p);
380
- }
381
- });
382
- }
383
-
384
- function addMessage(content, isUser) {
385
- const messageDiv = document.createElement('div');
386
- messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
387
- messageDiv.textContent = content;
388
- chatMessages.appendChild(messageDiv);
389
- chatMessages.scrollTop = chatMessages.scrollHeight;
390
- }
391
-
392
- function sendMessage() {
393
- const message = userInput.value.trim();
394
- if (message) {
395
- if (!pdfText) {
396
- addMessage("Please upload a PDF first before asking questions.", false);
397
- return;
398
- }
399
- addMessage(message, true);
400
- userInput.value = '';
401
-
402
- const loadingMessage = document.createElement('div');
403
- loadingMessage.className = 'message ai-message';
404
- loadingMessage.innerHTML = '<i class="fas fa-spinner loading-icon"></i> Thinking...';
405
- chatMessages.appendChild(loadingMessage);
406
- chatMessages.scrollTop = chatMessages.scrollHeight;
407
-
408
- fetch('/ask_pdf_question', {
409
- method: 'POST',
410
- headers: {
411
- 'Content-Type': 'application/json'
412
- },
413
- body: JSON.stringify({
414
- query: message,
415
- pdf_text: pdfText
416
- })
417
- })
418
- .then(response => response.json())
419
- .then(data => {
420
- chatMessages.removeChild(loadingMessage);
421
- addMessage(data.response, false);
422
- })
423
- .catch(error => {
424
- chatMessages.removeChild(loadingMessage);
425
- addMessage('Error getting the response. Please try again.', false);
426
- console.error('Error:', error);
427
- });
428
- }
429
- }
430
-
431
- userInput.addEventListener('keypress', function(e) {
432
- if (e.key === 'Enter') {
433
- sendMessage();
434
- }
435
- });
436
-
437
- function goBack() {
438
- window.history.back();
439
- }
440
-
441
- function switchMode(mode) {
442
- const textButton = document.getElementById('text-mode');
443
- const audioButton = document.getElementById('audio-mode');
444
- const chatContainer = document.querySelector('.chat-container');
445
- const audioContainer = document.getElementById('audio-container');
446
- const audioList = document.getElementById('audio-list');
447
-
448
- if (mode === 'text') {
449
- textButton.classList.add('active');
450
- audioButton.classList.remove('active');
451
- chatContainer.style.display = 'flex';
452
- audioContainer.style.display = 'none';
453
- } else if (mode === 'audio') {
454
- audioButton.classList.add('active');
455
- textButton.classList.remove('active');
456
- chatContainer.style.display = 'none';
457
- audioContainer.style.display = 'flex';
458
- audioList.style.display = 'block';
459
- loadAudioList();
460
- }
461
- }
462
-
463
- function loadAudioList() {
464
- const audioList = document.getElementById('audio-list').querySelector('ul');
465
- audioList.innerHTML = '<li>Loading audio files...</li>';
466
-
467
- fetch('/get_audio_files')
468
- .then(response => response.json())
469
- .then(data => {
470
- console.log('Audio files data:', data);
471
- audioList.innerHTML = '';
472
- if (data.audio_files && data.audio_files.length > 0) {
473
- data.audio_files.forEach(file => {
474
- console.log('Adding file:', file);
475
- const listItem = document.createElement('li');
476
- listItem.textContent = file.name;
477
- listItem.onclick = () => playAudio(file.url);
478
- audioList.appendChild(listItem);
479
- });
480
- } else {
481
- audioList.innerHTML = '<li>No audio files available</li>';
482
- }
483
- })
484
- .catch(error => {
485
- console.error('Error loading audio files:', error);
486
- audioList.innerHTML = '<li>Error loading audio files</li>';
487
- });
488
- }
489
-
490
- function playAudio(url) {
491
- const audio = document.getElementById('uploaded-audio');
492
- audio.src = url;
493
- audio.load();
494
- audio.play();
495
- }
496
-
497
- // Initialize the page in text mode
498
- switchMode('text');
499
- </script>
500
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
501
  </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>SmartLearn - PDF Q&A</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
9
+ <style>
10
+ .audio-container {
11
+ display: none;
12
+ }
13
+ .audio-list {
14
+ display: block;
15
+ margin-top: 1rem;
16
+ }
17
+ .audio-list ul {
18
+ list-style-type: none;
19
+ padding: 0;
20
+ }
21
+ .audio-list li {
22
+ padding: 0.5rem;
23
+ cursor: pointer;
24
+ transition: background-color 0.3s ease;
25
+ }
26
+ .audio-list li:hover {
27
+ background-color: #f0f2f5;
28
+ }
29
+ .audio-list {
30
+ display: block;
31
+ margin-top: 1rem;
32
+ }
33
+ .audio-container {
34
+ display: none;
35
+ }
36
+
37
+ .audio-list ul {
38
+ list-style-type: none;
39
+ padding: 0;
40
+ }
41
+ .audio-list li {
42
+ padding: 0.5rem;
43
+ cursor: pointer;
44
+ transition: background-color 0.3s ease;
45
+ }
46
+ .audio-list li:hover {
47
+ background-color: #f0f2f5;
48
+ }
49
+ body {
50
+ font-family: 'Roboto', sans-serif;
51
+ background-color: #f0f2f5;
52
+ margin: 0;
53
+ padding: 0;
54
+ color: #333;
55
+ height: 100vh;
56
+ display: flex;
57
+ flex-direction: column;
58
+ }
59
+ video#background-video {
60
+ position: fixed;
61
+ top: 0;
62
+ left: 0;
63
+ width: 100%;
64
+ height: 100%;
65
+ object-fit: cover;
66
+ z-index: -1;
67
+ }
68
+ .container {
69
+ flex: 1;
70
+ display: flex;
71
+ flex-direction: column;
72
+ max-width: 1200px;
73
+ margin: 2rem auto;
74
+ padding: 2rem;
75
+ background-color: rgba(255, 255, 255, 0.9);
76
+ border-radius: 10px;
77
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
78
+ overflow: hidden;
79
+ }
80
+ .content-wrapper {
81
+ display: flex;
82
+ flex: 1;
83
+ overflow: hidden;
84
+ }
85
+ .pdf-container, .chat-container,.audio-container {
86
+ flex: 1;
87
+ background-color: white;
88
+ border-radius: 10px;
89
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
90
+ display: flex;
91
+ flex-direction: column;
92
+ overflow: hidden;
93
+ }
94
+ .pdf-container {
95
+ margin-right: 1rem;
96
+ }
97
+ .chat-container {
98
+ margin-left: 1rem;
99
+ }
100
+ h1 {
101
+ text-align: center;
102
+ color: #333;
103
+ margin-bottom: 2rem;
104
+ }
105
+ .back-button {
106
+ align-self: flex-start;
107
+ background-color: #3498db;
108
+ color: white;
109
+ border: none;
110
+ padding: 0.5rem 1rem;
111
+ border-radius: 5px;
112
+ cursor: pointer;
113
+ transition: background-color 0.3s ease;
114
+ margin-bottom: 1rem;
115
+ }
116
+ .back-button:hover {
117
+ background-color: #2980b9;
118
+ }
119
+ .pdf-upload {
120
+ display: flex;
121
+ justify-content: center;
122
+ align-items: center;
123
+ padding: 1rem;
124
+ background-color: #f8f9fa;
125
+ border-radius: 10px 10px 0 0;
126
+ }
127
+ .pdf-upload input[type="file"] {
128
+ display: none;
129
+ }
130
+ .pdf-upload label {
131
+ background-color: #3498db;
132
+ color: white;
133
+ padding: 0.5rem 1rem;
134
+ border-radius: 5px;
135
+ cursor: pointer;
136
+ transition: background-color 0.3s ease;
137
+ }
138
+ .pdf-upload label:hover {
139
+ background-color: #2980b9;
140
+ }
141
+ .pdf-upload button {
142
+ background-color: #2ecc71;
143
+ color: white;
144
+ border: none;
145
+ padding: 0.5rem 1rem;
146
+ border-radius: 5px;
147
+ cursor: pointer;
148
+ margin-left: 1rem;
149
+ transition: background-color 0.3s ease;
150
+ }
151
+ .pdf-upload button:hover {
152
+ background-color: #27ae60;
153
+ }
154
+ .pdf-status {
155
+ text-align: center;
156
+ padding: 0.5rem;
157
+ background-color: #f8f9fa;
158
+ border-bottom: 1px solid #e9ecef;
159
+ }
160
+ .pdf-content {
161
+ flex: 1;
162
+ padding: 1rem;
163
+ overflow-y: auto;
164
+ font-size: 0.9rem;
165
+ line-height: 1.5;
166
+ }
167
+ .chat-messages {
168
+ flex: 1;
169
+ overflow-y: auto;
170
+ padding: 1rem;
171
+ }
172
+ .message {
173
+ margin-bottom: 1rem;
174
+ padding: 0.5rem 1rem;
175
+ border-radius: 20px;
176
+ max-width: 80%;
177
+ }
178
+ .user-message {
179
+ background-color: #3498db;
180
+ color: white;
181
+ align-self: flex-end;
182
+ margin-left: auto;
183
+ }
184
+ .ai-message {
185
+ background-color: #ecf0f1;
186
+ color: #333;
187
+ }
188
+ .chat-input {
189
+ display: flex;
190
+ padding: 1rem;
191
+ background-color: #f8f9fa;
192
+ border-top: 1px solid #e9ecef;
193
+ }
194
+ .chat-input input {
195
+ flex-grow: 1;
196
+ padding: 0.5rem;
197
+ border: 1px solid #ced4da;
198
+ border-radius: 20px;
199
+ margin-right: 1rem;
200
+ }
201
+ .chat-input button {
202
+ background-color: #3498db;
203
+ color: white;
204
+ border: none;
205
+ padding: 0.5rem 1rem;
206
+ border-radius: 20px;
207
+ cursor: pointer;
208
+ transition: background-color 0.3s ease;
209
+ }
210
+ .chat-input button:hover {
211
+ background-color: #2980b9;
212
+ }
213
+ @keyframes spin {
214
+ 0% { transform: rotate(0deg); }
215
+ 100% { transform: rotate(360deg); }
216
+ }
217
+ .loading-icon {
218
+ animation: spin 2s linear infinite;
219
+ display: inline-block;
220
+ margin-right: 0.5rem;
221
+ }
222
+ .chat-input button:hover {
223
+ background-color: #2980b9;
224
+ }
225
+ @keyframes spin {
226
+ 0% { transform: rotate(0deg); }
227
+ 100% { transform: rotate(360deg); }
228
+ }
229
+ .loading-icon {
230
+ animation: spin 2s linear infinite;
231
+ display: inline-block;
232
+ margin-right: 0.5rem;
233
+ }
234
+
235
+ .button-container {
236
+ display: flex;
237
+ justify-content: flex-end;
238
+ margin-bottom: 1rem;
239
+ flex-wrap: wrap;
240
+ }
241
+ .mode-button, .drive-button {
242
+ background-color: #3498db;
243
+ color: white;
244
+ border: none;
245
+ padding: 0.5rem 1rem;
246
+ border-radius: 20px;
247
+ cursor: pointer;
248
+ transition: all 0.3s ease;
249
+ margin-left: 0.5rem;
250
+ margin-bottom: 0.5rem;
251
+ font-weight: 500;
252
+ display: flex;
253
+ align-items: center;
254
+ }
255
+ .mode-button:hover, .drive-button:hover {
256
+ background-color: #2980b9;
257
+ transform: translateY(-2px);
258
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
259
+ }
260
+ .mode-button i, .drive-button i {
261
+ margin-right: 0.5rem;
262
+ }
263
+ .drive-button {
264
+ background-color: #e74c3c;
265
+ }
266
+ .drive-button:hover {
267
+ background-color: #c0392b;
268
+ }
269
+
270
+ .drive-button-wrapper {
271
+ position: absolute;
272
+ top: 0;
273
+ right: 0;
274
+ background-color: rgba(255, 255, 255, 0.9);
275
+ padding: 0.5rem; /* Reduced padding */
276
+ border-radius: 10px;
277
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
278
+ text-align: right;
279
+ margin: 1rem;
280
+ width: 220px; /* Set a fixed width to reduce the length */
281
+ }
282
+
283
+
284
+ .drive-button-wrapper p {
285
+ margin: 0;
286
+ margin-bottom: 0.5rem;
287
+ font-size: 0.9rem;
288
+ font-weight: 500;
289
+ color: #333;
290
+ }
291
+ .button-container {
292
+ display: flex;
293
+ justify-content: flex-end;
294
+ margin-bottom: 1rem;
295
+ }
296
+ .mode-button {
297
+ background-color: #3498db;
298
+ color: white;
299
+ border: none;
300
+ padding: 0.5rem 1rem;
301
+ border-radius: 20px;
302
+ cursor: pointer;
303
+ transition: all 0.3s ease;
304
+ margin-left: 0.5rem;
305
+ font-weight: 500;
306
+ display: flex;
307
+ align-items: center;
308
+ }
309
+ .mode-button:hover {
310
+ background-color: #2980b9;
311
+ transform: translateY(-2px);
312
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
313
+ }
314
+ .mode-button i {
315
+ margin-right: 0.5rem;
316
+ }
317
+ .active {
318
+ background-color: #2ecc71;
319
+ }
320
+ .active:hover {
321
+ background-color: #27ae60;
322
+ }
323
+ .audio-player {
324
+ display: none;
325
+ width: 100%;
326
+ margin-top: 1rem;
327
+ }
328
+ .audio-player audio {
329
+ width: 100%;
330
+ border-radius: 10px;
331
+ }
332
+ .audio-list {
333
+ display: none;
334
+ margin-top: 1rem;
335
+ }
336
+ .audio-list ul {
337
+ list-style-type: none;
338
+ padding: 0;
339
+ }
340
+ .audio-list li {
341
+ padding: 0.5rem;
342
+ cursor: pointer;
343
+ transition: background-color 0.3s ease;
344
+ }
345
+ .audio-list li:hover {
346
+ background-color: #f0f2f5;
347
+ }
348
+ </style>
349
+ </head>
350
+ <body>
351
+ <video id="background-video" autoplay loop muted>
352
+ <source src="../static/pdf.mp4" type="video/mp4">
353
+ Your browser does not support the video tag.
354
+ </video>
355
+ <div class="container">
356
+ <button class="back-button" onclick="goBack()"><i class="fas fa-arrow-left"></i> Back</button>
357
+ <h1><i class="fas fa-file-pdf"></i> PDF Q&A</h1>
358
+ <div class="button-container">
359
+ <button id="text-mode" class="mode-button active" onclick="switchMode('text')">
360
+ <i class="fas fa-keyboard"></i> Ask questions
361
+ </button>
362
+ <button id="audio-mode" class="mode-button" onclick="switchMode('audio')">
363
+ <i class="fas fa-microphone"></i> Audio book
364
+ </button>
365
+ </div>
366
+ <div class="content-wrapper">
367
+ <div class="pdf-container">
368
+ <div class="pdf-upload">
369
+ <label for="pdf-file">
370
+ <i class="fas fa-upload"></i> Choose PDF
371
+ </label>
372
+ <input type="file" id="pdf-file" accept=".pdf">
373
+ <button onclick="uploadPDF()"><i class="fas fa-cloud-upload-alt"></i> Upload PDF</button>
374
+ </div>
375
+ <div id="pdf-status" class="pdf-status"></div>
376
+ <div id="pdf-content" class="pdf-content"></div>
377
+ </div>
378
+ <div class="chat-container">
379
+ <div id="chat-messages" class="chat-messages"></div>
380
+ <div id="text-input" class="chat-input">
381
+ <input type="text" id="user-input" placeholder="Ask a question about the PDF...">
382
+ <button onclick="sendMessage()"><i class="fas fa-paper-plane"></i> Send</button>
383
+ </div>
384
+ </div>
385
+ <div id="audio-container" class="audio-container">
386
+ <h3>Get your audio book for all chapters here</h3>
387
+ <audio id="uploaded-audio" controls>
388
+ Your browser does not support the audio tag.
389
+ </audio>
390
+ <div id="audio-list" class="audio-list">
391
+ <ul>
392
+ <!-- Audio files will be dynamically inserted here -->
393
+ </ul>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ <div class="drive-button-wrapper">
399
+ <p>We have used the following documents in the demo video, which are given in the drive link. You can use your own docs also.</p>
400
+ <button id="drive-link" class="drive-button" onclick="openDriveLink()">
401
+ <i class="fab fa-google-drive"></i> Sample documents
402
+ </button>
403
+ </div>
404
+ <script>
405
+ document.getElementById('audio-mode').addEventListener('click', function() {
406
+ switchMode('audio');
407
+ });
408
+ const chatMessages = document.getElementById('chat-messages');
409
+ const userInput = document.getElementById('user-input');
410
+ const pdfStatus = document.getElementById('pdf-status');
411
+ const pdfContent = document.getElementById('pdf-content');
412
+ let pdfText = '';
413
+
414
+ function uploadPDF() {
415
+ const fileInput = document.getElementById('pdf-file');
416
+ const file = fileInput.files[0];
417
+ if (file) {
418
+ const formData = new FormData();
419
+ formData.append('pdf-file', file);
420
+
421
+ pdfStatus.innerHTML = '<i class="fas fa-spinner loading-icon"></i> Uploading and processing PDF...';
422
+
423
+ fetch('/student_pdfqa', {
424
+ method: 'POST',
425
+ body: formData
426
+ })
427
+ .then(response => response.json())
428
+ .then(data => {
429
+ if (data.pdf_text) {
430
+ pdfText = data.pdf_text;
431
+ pdfStatus.innerHTML = `<i class="fas fa-check-circle"></i> PDF "${file.name}" uploaded and processed. You can now ask questions.`;
432
+ displayPDFContent(pdfText);
433
+ addMessage("PDF uploaded successfully. What would you like to know about its contents?", false);
434
+ } else {
435
+ pdfStatus.innerHTML = `<i class="fas fa-exclamation-circle"></i> ${data.message}`;
436
+ }
437
+ })
438
+ .catch(error => {
439
+ pdfStatus.innerHTML = '<i class="fas fa-times-circle"></i> Error uploading the PDF. Please try again.';
440
+ console.error('Error:', error);
441
+ });
442
+ } else {
443
+ pdfStatus.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Please select a PDF file first.';
444
+ }
445
+ }
446
+
447
+ function displayPDFContent(text) {
448
+ pdfContent.innerHTML = '';
449
+ const paragraphs = text.split('\n\n');
450
+ paragraphs.forEach(paragraph => {
451
+ if (paragraph.trim()) {
452
+ const p = document.createElement('p');
453
+ p.textContent = paragraph;
454
+ pdfContent.appendChild(p);
455
+ }
456
+ });
457
+ }
458
+
459
+ function addMessage(content, isUser) {
460
+ const messageDiv = document.createElement('div');
461
+ messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
462
+ messageDiv.textContent = content;
463
+ chatMessages.appendChild(messageDiv);
464
+ chatMessages.scrollTop = chatMessages.scrollHeight;
465
+ }
466
+
467
+ function sendMessage() {
468
+ const message = userInput.value.trim();
469
+ if (message) {
470
+ if (!pdfText) {
471
+ addMessage("Please upload a PDF first before asking questions.", false);
472
+ return;
473
+ }
474
+ addMessage(message, true);
475
+ userInput.value = '';
476
+
477
+ const loadingMessage = document.createElement('div');
478
+ loadingMessage.className = 'message ai-message';
479
+ loadingMessage.innerHTML = '<i class="fas fa-spinner loading-icon"></i> Thinking...';
480
+ chatMessages.appendChild(loadingMessage);
481
+ chatMessages.scrollTop = chatMessages.scrollHeight;
482
+
483
+ fetch('/ask_pdf_question', {
484
+ method: 'POST',
485
+ headers: {
486
+ 'Content-Type': 'application/json'
487
+ },
488
+ body: JSON.stringify({
489
+ query: message,
490
+ pdf_text: pdfText
491
+ })
492
+ })
493
+ .then(response => response.json())
494
+ .then(data => {
495
+ chatMessages.removeChild(loadingMessage);
496
+ addMessage(data.response, false);
497
+ })
498
+ .catch(error => {
499
+ chatMessages.removeChild(loadingMessage);
500
+ addMessage('Error getting the response. Please try again.', false);
501
+ console.error('Error:', error);
502
+ });
503
+ }
504
+ }
505
+
506
+ userInput.addEventListener('keypress', function(e) {
507
+ if (e.key === 'Enter') {
508
+ sendMessage();
509
+ }
510
+ });
511
+
512
+ function goBack() {
513
+ window.history.back();
514
+ }
515
+
516
+ function switchMode(mode) {
517
+ const textButton = document.getElementById('text-mode');
518
+ const audioButton = document.getElementById('audio-mode');
519
+ const chatContainer = document.querySelector('.chat-container');
520
+ const audioContainer = document.getElementById('audio-container');
521
+ const audioList = document.getElementById('audio-list');
522
+
523
+ if (mode === 'text') {
524
+ textButton.classList.add('active');
525
+ audioButton.classList.remove('active');
526
+ chatContainer.style.display = 'flex';
527
+ audioContainer.style.display = 'none';
528
+ } else if (mode === 'audio') {
529
+ audioButton.classList.add('active');
530
+ textButton.classList.remove('active');
531
+ chatContainer.style.display = 'none';
532
+ audioContainer.style.display = 'flex';
533
+ audioList.style.display = 'block';
534
+ loadAudioList();
535
+ }
536
+ }
537
+
538
+ function loadAudioList() {
539
+ const audioList = document.getElementById('audio-list').querySelector('ul');
540
+ audioList.innerHTML = '<li>Loading audio files...</li>';
541
+
542
+ fetch('/get_audio_files')
543
+ .then(response => response.json())
544
+ .then(data => {
545
+ console.log('Audio files data:', data);
546
+ audioList.innerHTML = '';
547
+ if (data.audio_files && data.audio_files.length > 0) {
548
+ data.audio_files.forEach(file => {
549
+ console.log('Adding file:', file);
550
+ const listItem = document.createElement('li');
551
+ listItem.textContent = file.name;
552
+ listItem.onclick = () => playAudio(file.url);
553
+ audioList.appendChild(listItem);
554
+ });
555
+ } else {
556
+ audioList.innerHTML = '<li>No audio files available</li>';
557
+ }
558
+ })
559
+ .catch(error => {
560
+ console.error('Error loading audio files:', error);
561
+ audioList.innerHTML = '<li>Error loading audio files</li>';
562
+ });
563
+ }
564
+ function openDriveLink() {
565
+ // Replace 'YOUR_DRIVE_LINK_HERE' with the actual Google Drive link
566
+ window.open('https://drive.google.com/drive/folders/1cHEsltLoJjVkXTp333YRK8yM2yoMmFOa?usp=sharing', '_blank');
567
+ }
568
+ function playAudio(url) {
569
+ const audio = document.getElementById('uploaded-audio');
570
+ audio.src = url;
571
+ audio.load();
572
+ audio.play();
573
+ }
574
+
575
+ // Initialize the page in text mode
576
+ switchMode('text');
577
+ </script>
578
+ </body>
579
  </html>