Hugging Face's logo

Spaces:
Godsmiler-69
/
pdf
Running

App Files Community
Godsmiler-69 commited on
Commit
2a49eb8
·
verified ·
1 Parent(s): f243340

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +661 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pdf
3
- emoji: 📉
4
  colorFrom: gray
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: pdf
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,661 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>PDF Insight - AI-Powered Document Analysis</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .dropzone {
11
+ border: 3px dashed #9CA3AF;
12
+ transition: all 0.3s ease;
13
+ }
14
+ .dropzone.active {
15
+ border-color: #3B82F6;
16
+ background-color: #EFF6FF;
17
+ }
18
+ .pdf-container {
19
+ position: relative;
20
+ min-height: 100vh;
21
+ }
22
+ .pdf-viewer {
23
+ width: 70%;
24
+ height: 100vh;
25
+ overflow-y: auto;
26
+ position: relative;
27
+ }
28
+ .annotation-sidebar {
29
+ width: 30%;
30
+ height: 100vh;
31
+ overflow-y: auto;
32
+ border-left: 1px solid #E5E7EB;
33
+ background-color: #F9FAFB;
34
+ }
35
+ .pdf-page {
36
+ margin-bottom: 2rem;
37
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
38
+ position: relative;
39
+ }
40
+ .highlight {
41
+ background-color: rgba(255, 255, 0, 0.3);
42
+ cursor: pointer;
43
+ transition: all 0.2s ease;
44
+ }
45
+ .highlight:hover {
46
+ background-color: rgba(255, 255, 0, 0.5);
47
+ }
48
+ .annotation-marker {
49
+ position: absolute;
50
+ right: -15px;
51
+ top: 50%;
52
+ transform: translateY(-50%);
53
+ width: 10px;
54
+ height: 10px;
55
+ background-color: #3B82F6;
56
+ border-radius: 50%;
57
+ cursor: pointer;
58
+ }
59
+ .annotation-popup {
60
+ position: absolute;
61
+ right: -320px;
62
+ width: 300px;
63
+ background-color: white;
64
+ border: 1px solid #E5E7EB;
65
+ border-radius: 0.5rem;
66
+ padding: 1rem;
67
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
68
+ z-index: 10;
69
+ }
70
+ .loading-bar {
71
+ height: 4px;
72
+ background-color: #3B82F6;
73
+ width: 0%;
74
+ transition: width 0.3s ease;
75
+ }
76
+ @keyframes pulse {
77
+ 0%, 100% {
78
+ opacity: 1;
79
+ }
80
+ 50% {
81
+ opacity: 0.5;
82
+ }
83
+ }
84
+ .pulse {
85
+ animation: pulse 2s infinite;
86
+ }
87
+ </style>
88
+ </head>
89
+ <body class="bg-gray-50">
90
+ <div class="loading-bar"></div>
91
+
92
+ <div id="app" class="min-h-screen">
93
+ <!-- Header -->
94
+ <header class="bg-white shadow-sm">
95
+ <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">
96
+ <div class="flex items-center">
97
+ <i class="fas fa-brain text-blue-500 text-2xl mr-3"></i>
98
+ <h1 class="text-xl font-bold text-gray-800">PDF Insight</h1>
99
+ </div>
100
+ <div class="flex items-center space-x-4">
101
+ <button id="uploadBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md flex items-center">
102
+ <i class="fas fa-upload mr-2"></i> Upload PDF
103
+ </button>
104
+ <input type="file" id="fileInput" class="hidden" accept=".pdf">
105
+ <button id="analyzeBtn" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md flex items-center hidden">
106
+ <i class="fas fa-robot mr-2"></i> Analyze Document
107
+ </button>
108
+ </div>
109
+ </div>
110
+ </header>
111
+
112
+ <!-- Main Content -->
113
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
114
+ <!-- Dropzone Section (shown when no PDF is loaded) -->
115
+ <div id="dropzoneSection" class="flex flex-col items-center justify-center py-20">
116
+ <div class="dropzone w-full max-w-3xl rounded-xl p-12 text-center cursor-pointer" id="dropzone">
117
+ <div class="flex flex-col items-center justify-center">
118
+ <i class="fas fa-file-pdf text-5xl text-gray-400 mb-4"></i>
119
+ <h2 class="text-2xl font-semibold text-gray-700 mb-2">Drag & Drop your PDF here</h2>
120
+ <p class="text-gray-500 mb-6">or click to browse files</p>
121
+ <div class="bg-blue-50 text-blue-700 px-4 py-2 rounded-md inline-flex items-center">
122
+ <i class="fas fa-info-circle mr-2"></i>
123
+ <span>Supported: PDF files up to 50MB</span>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <div class="mt-8 text-center max-w-2xl">
128
+ <h3 class="text-lg font-medium text-gray-700 mb-3">How it works</h3>
129
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
130
+ <div class="bg-white p-4 rounded-lg shadow-sm">
131
+ <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-3 mx-auto">
132
+ <i class="fas fa-upload"></i>
133
+ </div>
134
+ <h4 class="font-medium mb-1">Upload PDF</h4>
135
+ <p class="text-sm text-gray-500">Drag & drop or select your document</p>
136
+ </div>
137
+ <div class="bg-white p-4 rounded-lg shadow-sm">
138
+ <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-3 mx-auto">
139
+ <i class="fas fa-microchip"></i>
140
+ </div>
141
+ <h4 class="font-medium mb-1">AI Processing</h4>
142
+ <p class="text-sm text-gray-500">We analyze text with OCR and AI</p>
143
+ </div>
144
+ <div class="bg-white p-4 rounded-lg shadow-sm">
145
+ <div class="bg-blue-100 text-blue-600 w-12 h-12 rounded-full flex items-center justify-center mb-3 mx-auto">
146
+ <i class="fas fa-comment-dots"></i>
147
+ </div>
148
+ <h4 class="font-medium mb-1">Get Insights</h4>
149
+ <p class="text-sm text-gray-500">View AI annotations in the margins</p>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- PDF Viewer Section (shown after PDF is loaded) -->
156
+ <div id="pdfViewerSection" class="hidden">
157
+ <div class="flex justify-between items-center mb-6">
158
+ <div>
159
+ <h2 id="pdfTitle" class="text-xl font-semibold text-gray-800 truncate max-w-md"></h2>
160
+ <p id="pdfInfo" class="text-sm text-gray-500"></p>
161
+ </div>
162
+ <div class="flex space-x-3">
163
+ <button id="downloadBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md flex items-center">
164
+ <i class="fas fa-download mr-2"></i> Download
165
+ </button>
166
+ <button id="newDocumentBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-md flex items-center">
167
+ <i class="fas fa-file mr-2"></i> New Document
168
+ </button>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="pdf-container flex">
173
+ <div class="pdf-viewer bg-white p-6" id="pdfViewer">
174
+ <!-- PDF pages will be rendered here -->
175
+ <div class="flex items-center justify-center h-full">
176
+ <div class="text-center">
177
+ <div class="pulse">
178
+ <i class="fas fa-spinner fa-spin text-4xl text-blue-500 mb-4"></i>
179
+ </div>
180
+ <h3 class="text-lg font-medium text-gray-700">Processing PDF...</h3>
181
+ <p class="text-gray-500 mt-2">This may take a few moments</p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div class="annotation-sidebar p-6" id="annotationSidebar">
186
+ <div class="flex items-center justify-between mb-6">
187
+ <h3 class="text-lg font-semibold text-gray-800">AI Annotations</h3>
188
+ <div class="flex items-center space-x-2">
189
+ <div class="relative">
190
+ <button id="filterBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-md flex items-center text-sm">
191
+ <i class="fas fa-filter mr-2"></i> Filter
192
+ </button>
193
+ <div id="filterDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden">
194
+ <div class="py-1">
195
+ <label class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">
196
+ <input type="checkbox" class="mr-2" checked> Key Terms
197
+ </label>
198
+ <label class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">
199
+ <input type="checkbox" class="mr-2" checked> Definitions
200
+ </label>
201
+ <label class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">
202
+ <input type="checkbox" class="mr-2" checked> References
203
+ </label>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ <button id="exportAnnotationsBtn" class="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-md flex items-center text-sm">
208
+ <i class="fas fa-file-export mr-2"></i> Export
209
+ </button>
210
+ </div>
211
+ </div>
212
+
213
+ <div id="annotationsList">
214
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4 rounded">
215
+ <div class="flex justify-between items-start">
216
+ <div>
217
+ <h4 class="font-medium text-blue-800">Document Summary</h4>
218
+ <p class="text-sm text-gray-600 mt-1">Upload a PDF to see AI-generated annotations appear here.</p>
219
+ </div>
220
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Summary</span>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </main>
228
+ </div>
229
+
230
+ <!-- Processing Modal -->
231
+ <div id="processingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
232
+ <div class="bg-white rounded-lg p-6 max-w-md w-full">
233
+ <div class="text-center">
234
+ <div class="pulse mb-4">
235
+ <i class="fas fa-robot text-5xl text-blue-500"></i>
236
+ </div>
237
+ <h3 class="text-xl font-medium text-gray-800 mb-2">Analyzing Document</h3>
238
+ <p class="text-gray-600 mb-4">Our AI is reading your document and generating insights. This may take a moment...</p>
239
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
240
+ <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
241
+ </div>
242
+ <p id="processingStatus" class="text-sm text-gray-500">Initializing OCR processing...</p>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <script>
248
+ document.addEventListener('DOMContentLoaded', function() {
249
+ // DOM Elements
250
+ const dropzone = document.getElementById('dropzone');
251
+ const fileInput = document.getElementById('fileInput');
252
+ const uploadBtn = document.getElementById('uploadBtn');
253
+ const analyzeBtn = document.getElementById('analyzeBtn');
254
+ const dropzoneSection = document.getElementById('dropzoneSection');
255
+ const pdfViewerSection = document.getElementById('pdfViewerSection');
256
+ const pdfViewer = document.getElementById('pdfViewer');
257
+ const pdfTitle = document.getElementById('pdfTitle');
258
+ const pdfInfo = document.getElementById('pdfInfo');
259
+ const annotationsList = document.getElementById('annotationsList');
260
+ const newDocumentBtn = document.getElementById('newDocumentBtn');
261
+ const processingModal = document.getElementById('processingModal');
262
+ const progressBar = document.getElementById('progressBar');
263
+ const processingStatus = document.getElementById('processingStatus');
264
+ const loadingBar = document.querySelector('.loading-bar');
265
+ const filterBtn = document.getElementById('filterBtn');
266
+ const filterDropdown = document.getElementById('filterDropdown');
267
+
268
+ // Event Listeners
269
+ uploadBtn.addEventListener('click', () => fileInput.click());
270
+ fileInput.addEventListener('change', handleFileSelect);
271
+ dropzone.addEventListener('dragover', handleDragOver);
272
+ dropzone.addEventListener('dragleave', handleDragLeave);
273
+ dropzone.addEventListener('drop', handleDrop);
274
+ analyzeBtn.addEventListener('click', analyzeDocument);
275
+ newDocumentBtn.addEventListener('click', resetDocument);
276
+ filterBtn.addEventListener('click', toggleFilterDropdown);
277
+
278
+ // Close filter dropdown when clicking outside
279
+ document.addEventListener('click', (e) => {
280
+ if (!filterBtn.contains(e.target) && !filterDropdown.contains(e.target)) {
281
+ filterDropdown.classList.add('hidden');
282
+ }
283
+ });
284
+
285
+ // Functions
286
+ function handleDragOver(e) {
287
+ e.preventDefault();
288
+ e.stopPropagation();
289
+ dropzone.classList.add('active');
290
+ }
291
+
292
+ function handleDragLeave(e) {
293
+ e.preventDefault();
294
+ e.stopPropagation();
295
+ dropzone.classList.remove('active');
296
+ }
297
+
298
+ function handleDrop(e) {
299
+ e.preventDefault();
300
+ e.stopPropagation();
301
+ dropzone.classList.remove('active');
302
+
303
+ const files = e.dataTransfer.files;
304
+ if (files.length) {
305
+ handleFile(files[0]);
306
+ }
307
+ }
308
+
309
+ function handleFileSelect(e) {
310
+ if (e.target.files.length) {
311
+ handleFile(e.target.files[0]);
312
+ }
313
+ }
314
+
315
+ function handleFile(file) {
316
+ if (file.type !== 'application/pdf') {
317
+ showToast('Please upload a PDF file', 'error');
318
+ return;
319
+ }
320
+
321
+ if (file.size > 50 * 1024 * 1024) { // 50MB limit
322
+ showToast('File size exceeds 50MB limit', 'error');
323
+ return;
324
+ }
325
+
326
+ // Show loading state
327
+ loadingBar.style.width = '30%';
328
+
329
+ // Simulate file processing
330
+ setTimeout(() => {
331
+ loadingBar.style.width = '100%';
332
+
333
+ // Display PDF info
334
+ pdfTitle.textContent = file.name;
335
+ pdfInfo.textContent = `${(file.size / 1024 / 1024).toFixed(2)} MB • Uploaded ${new Date().toLocaleDateString()}`;
336
+
337
+ // Show the PDF viewer section
338
+ dropzoneSection.classList.add('hidden');
339
+ pdfViewerSection.classList.remove('hidden');
340
+ analyzeBtn.classList.remove('hidden');
341
+
342
+ // Simulate PDF rendering
343
+ setTimeout(() => {
344
+ renderSamplePDF();
345
+ loadingBar.style.width = '0%';
346
+ }, 500);
347
+ }, 1000);
348
+ }
349
+
350
+ function renderSamplePDF() {
351
+ // In a real app, you would use PDF.js or similar to render the actual PDF
352
+ // Here we're just creating a sample representation
353
+ pdfViewer.innerHTML = '';
354
+
355
+ // Create 3 sample pages
356
+ for (let i = 1; i <= 3; i++) {
357
+ const page = document.createElement('div');
358
+ page.className = 'pdf-page bg-white p-8 relative';
359
+
360
+ // Page header
361
+ const pageHeader = document.createElement('div');
362
+ pageHeader.className = 'flex justify-between items-center mb-6 pb-2 border-b border-gray-200';
363
+ pageHeader.innerHTML = `
364
+ <span class="text-sm font-medium text-gray-500">Page ${i}</span>
365
+ <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">${i}/3</span>
366
+ `;
367
+ page.appendChild(pageHeader);
368
+
369
+ // Page content
370
+ const pageContent = document.createElement('div');
371
+ pageContent.className = 'text-gray-800 leading-relaxed';
372
+
373
+ // Add sample text with highlights
374
+ const paragraphs = [
375
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.",
376
+ "The concept of artificial intelligence (AI) refers to the simulation of human intelligence in machines. These systems are designed to think like humans and mimic their actions.",
377
+ "Machine learning is a subset of AI that focuses on building systems that learn—or improve performance—based on the data they consume. Deep learning is a further subset that uses neural networks with many layers."
378
+ ];
379
+
380
+ paragraphs.forEach((text, idx) => {
381
+ const p = document.createElement('p');
382
+ p.className = 'mb-4';
383
+
384
+ // Add highlights to some words
385
+ if (i === 1 && idx === 1) {
386
+ p.innerHTML = text.replace('artificial intelligence (AI)', '<span class="highlight" data-term="AI" data-page="1">artificial intelligence (AI)</span>');
387
+
388
+ // Add annotation marker
389
+ const marker = document.createElement('div');
390
+ marker.className = 'annotation-marker';
391
+ marker.setAttribute('data-term', 'AI');
392
+ marker.addEventListener('click', () => showAnnotationPopup(marker, 'AI'));
393
+ p.appendChild(marker);
394
+ }
395
+ else if (i === 2 && idx === 2) {
396
+ p.innerHTML = text.replace('Machine learning', '<span class="highlight" data-term="Machine Learning" data-page="2">Machine learning</span>')
397
+ .replace('Deep learning', '<span class="highlight" data-term="Deep Learning" data-page="2">Deep learning</span>');
398
+
399
+ // Add annotation markers
400
+ const mlMarker = document.createElement('div');
401
+ mlMarker.className = 'annotation-marker';
402
+ mlMarker.setAttribute('data-term', 'Machine Learning');
403
+ mlMarker.addEventListener('click', () => showAnnotationPopup(mlMarker, 'Machine Learning'));
404
+ p.appendChild(mlMarker);
405
+
406
+ const dlMarker = document.createElement('div');
407
+ dlMarker.className = 'annotation-marker';
408
+ dlMarker.style.top = '70%';
409
+ dlMarker.setAttribute('data-term', 'Deep Learning');
410
+ dlMarker.addEventListener('click', () => showAnnotationPopup(dlMarker, 'Deep Learning'));
411
+ p.appendChild(dlMarker);
412
+ }
413
+ else {
414
+ p.textContent = text;
415
+ }
416
+
417
+ pageContent.appendChild(p);
418
+ });
419
+
420
+ page.appendChild(pageContent);
421
+ pdfViewer.appendChild(page);
422
+ }
423
+
424
+ // Add click handlers for highlights
425
+ document.querySelectorAll('.highlight').forEach(highlight => {
426
+ highlight.addEventListener('click', function() {
427
+ const term = this.getAttribute('data-term');
428
+ showAnnotationPopup(this, term);
429
+ });
430
+ });
431
+ }
432
+
433
+ function analyzeDocument() {
434
+ // Show processing modal
435
+ processingModal.classList.remove('hidden');
436
+
437
+ // Simulate processing steps
438
+ const steps = [
439
+ "Extracting text with OCR...",
440
+ "Identifying key terms and concepts...",
441
+ "Analyzing document structure...",
442
+ "Generating AI insights...",
443
+ "Finalizing annotations..."
444
+ ];
445
+
446
+ let currentStep = 0;
447
+ const interval = setInterval(() => {
448
+ if (currentStep < steps.length) {
449
+ const progress = ((currentStep + 1) / steps.length) * 100;
450
+ progressBar.style.width = `${progress}%`;
451
+ processingStatus.textContent = steps[currentStep];
452
+ currentStep++;
453
+ } else {
454
+ clearInterval(interval);
455
+
456
+ // Simulate completion
457
+ setTimeout(() => {
458
+ processingModal.classList.add('hidden');
459
+ showToast('Analysis complete!', 'success');
460
+ populateAnnotations();
461
+ }, 1000);
462
+ }
463
+ }, 1500);
464
+ }
465
+
466
+ function populateAnnotations() {
467
+ // In a real app, this would come from the AI analysis
468
+ const annotations = [
469
+ {
470
+ id: 1,
471
+ term: "AI",
472
+ page: 1,
473
+ type: "definition",
474
+ content: "Artificial Intelligence (AI) refers to machines designed to perform tasks that typically require human intelligence, such as visual perception, speech recognition, and decision-making.",
475
+ confidence: 0.92
476
+ },
477
+ {
478
+ id: 2,
479
+ term: "Machine Learning",
480
+ page: 2,
481
+ type: "definition",
482
+ content: "Machine Learning is a subset of AI that enables systems to automatically learn and improve from experience without being explicitly programmed.",
483
+ confidence: 0.95
484
+ },
485
+ {
486
+ id: 3,
487
+ term: "Deep Learning",
488
+ page: 2,
489
+ type: "definition",
490
+ content: "Deep Learning uses artificial neural networks with multiple layers to progressively extract higher-level features from raw input, mimicking how the human brain processes information.",
491
+ confidence: 0.89
492
+ },
493
+ {
494
+ id: 4,
495
+ term: "Document Summary",
496
+ page: "all",
497
+ type: "summary",
498
+ content: "This document discusses fundamental concepts in artificial intelligence, including machine learning and deep learning. It provides definitions and explains the relationships between these technologies.",
499
+ confidence: 0.87
500
+ }
501
+ ];
502
+
503
+ // Clear existing annotations
504
+ annotationsList.innerHTML = '';
505
+
506
+ // Add new annotations
507
+ annotations.forEach(annotation => {
508
+ const annotationEl = document.createElement('div');
509
+ annotationEl.className = `bg-white border border-gray-200 p-4 mb-4 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer`;
510
+ annotationEl.innerHTML = `
511
+ <div class="flex justify-between items-start mb-2">
512
+ <div>
513
+ <h4 class="font-medium text-gray-800">${annotation.term}</h4>
514
+ <span class="text-xs text-gray-500">Page ${annotation.page}</span>
515
+ </div>
516
+ <span class="text-xs px-2 py-1 rounded-full ${
517
+ annotation.type === 'definition' ? 'bg-blue-100 text-blue-800' :
518
+ annotation.type === 'summary' ? 'bg-green-100 text-green-800' :
519
+ 'bg-purple-100 text-purple-800'
520
+ }">
521
+ ${annotation.type.charAt(0).toUpperCase() + annotation.type.slice(1)}
522
+ </span>
523
+ </div>
524
+ <p class="text-gray-600 text-sm mb-2">${annotation.content}</p>
525
+ <div class="flex justify-between items-center">
526
+ <span class="text-xs text-gray-400">AI Confidence: ${Math.round(annotation.confidence * 100)}%</span>
527
+ <button class="text-xs text-blue-500 hover:text-blue-700" data-term="${annotation.term}">
528
+ <i class="fas fa-location-arrow mr-1"></i> Locate in document
529
+ </button>
530
+ </div>
531
+ `;
532
+
533
+ // Add click handler to locate term in document
534
+ annotationEl.querySelector('button').addEventListener('click', function(e) {
535
+ e.stopPropagation();
536
+ const term = this.getAttribute('data-term');
537
+ scrollToTerm(term);
538
+ });
539
+
540
+ annotationsList.appendChild(annotationEl);
541
+ });
542
+ }
543
+
544
+ function showAnnotationPopup(element, term) {
545
+ // Remove any existing popups
546
+ document.querySelectorAll('.annotation-popup').forEach(el => el.remove());
547
+
548
+ // In a real app, this would fetch the actual annotation data
549
+ const annotationData = {
550
+ "AI": {
551
+ content: "Artificial Intelligence (AI) refers to machines designed to perform tasks that typically require human intelligence.",
552
+ type: "definition",
553
+ confidence: 0.92
554
+ },
555
+ "Machine Learning": {
556
+ content: "Machine Learning is a subset of AI that enables systems to automatically learn and improve from experience.",
557
+ type: "definition",
558
+ confidence: 0.95
559
+ },
560
+ "Deep Learning": {
561
+ content: "Deep Learning uses artificial neural networks with multiple layers to extract higher-level features from raw input.",
562
+ type: "definition",
563
+ confidence: 0.89
564
+ }
565
+ };
566
+
567
+ if (!annotationData[term]) return;
568
+
569
+ const popup = document.createElement('div');
570
+ popup.className = 'annotation-popup';
571
+ popup.innerHTML = `
572
+ <div class="flex justify-between items-start mb-2">
573
+ <h4 class="font-medium text-gray-800">${term}</h4>
574
+ <span class="text-xs px-2 py-1 rounded-full ${
575
+ annotationData[term].type === 'definition' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'
576
+ }">
577
+ ${annotationData[term].type.charAt(0).toUpperCase() + annotationData[term].type.slice(1)}
578
+ </span>
579
+ </div>
580
+ <p class="text-gray-600 text-sm mb-3">${annotationData[term].content}</p>
581
+ <div class="flex justify-between items-center text-xs">
582
+ <span class="text-gray-400">AI Confidence: ${Math.round(annotationData[term].confidence * 100)}%</span>
583
+ <button class="text-blue-500 hover:text-blue-700">
584
+ <i class="fas fa-bookmark mr-1"></i> Save
585
+ </button>
586
+ </div>
587
+ `;
588
+
589
+ // Position the popup next to the element
590
+ const rect = element.getBoundingClientRect();
591
+ popup.style.top = `${rect.top + window.scrollY}px`;
592
+
593
+ // Add to document
594
+ document.body.appendChild(popup);
595
+
596
+ // Close popup when clicking outside
597
+ setTimeout(() => {
598
+ const clickHandler = (e) => {
599
+ if (!popup.contains(e.target) && !element.contains(e.target)) {
600
+ popup.remove();
601
+ document.removeEventListener('click', clickHandler);
602
+ }
603
+ };
604
+ document.addEventListener('click', clickHandler);
605
+ }, 10);
606
+ }
607
+
608
+ function scrollToTerm(term) {
609
+ // Find the first highlight with this term and scroll to it
610
+ const highlight = document.querySelector(`.highlight[data-term="${term}"]`);
611
+ if (highlight) {
612
+ highlight.scrollIntoView({ behavior: 'smooth', block: 'center' });
613
+
614
+ // Add temporary highlight effect
615
+ highlight.style.backgroundColor = 'rgba(255, 255, 0, 0.7)';
616
+ setTimeout(() => {
617
+ highlight.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
618
+ }, 2000);
619
+ }
620
+ }
621
+
622
+ function resetDocument() {
623
+ // Reset the UI
624
+ fileInput.value = '';
625
+ dropzoneSection.classList.remove('hidden');
626
+ pdfViewerSection.classList.add('hidden');
627
+ analyzeBtn.classList.add('hidden');
628
+ annotationsList.innerHTML = `
629
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4 rounded">
630
+ <div class="flex justify-between items-start">
631
+ <div>
632
+ <h4 class="font-medium text-blue-800">Document Summary</h4>
633
+ <p class="text-sm text-gray-600 mt-1">Upload a PDF to see AI-generated annotations appear here.</p>
634
+ </div>
635
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Summary</span>
636
+ </div>
637
+ </div>
638
+ `;
639
+ }
640
+
641
+ function toggleFilterDropdown() {
642
+ filterDropdown.classList.toggle('hidden');
643
+ }
644
+
645
+ function showToast(message, type) {
646
+ const toast = document.createElement('div');
647
+ toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-md shadow-md text-white ${
648
+ type === 'error' ? 'bg-red-500' : 'bg-green-500'
649
+ }`;
650
+ toast.textContent = message;
651
+ document.body.appendChild(toast);
652
+
653
+ setTimeout(() => {
654
+ toast.classList.add('opacity-0', 'transition-opacity', 'duration-300');
655
+ setTimeout(() => toast.remove(), 300);
656
+ }, 3000);
657
+ }
658
+ });
659
+ </script>
660
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Godsmiler-69/pdf" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
661
+ </html>