Hugging Face's logo

Spaces:
bep40
/
catalogue-bep40
Running

App Files Community
bep40 commited on
Commit
276656c
·
verified ·
1 Parent(s): a44e527

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +870 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Catalogue Bep40
3
- emoji: 👀
4
- colorFrom: pink
5
- colorTo: purple
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: catalogue-bep40
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
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,870 @@
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>Advanced PDF Viewer with Thumbnails</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
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
10
+ <style>
11
+ #pdf-container {
12
+ overflow: auto;
13
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
14
+ background-color: #f9fafb;
15
+ }
16
+
17
+ #pdf-render {
18
+ margin: 0 auto;
19
+ display: block;
20
+ background: white;
21
+ }
22
+
23
+ .pdf-thumbnail {
24
+ transition: all 0.2s ease;
25
+ aspect-ratio: 1/1.4142; /* Standard ratio for PDF pages */
26
+ }
27
+
28
+ .pdf-thumbnail:hover {
29
+ transform: translateY(-2px);
30
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
31
+ }
32
+
33
+ .thumbnail-container {
34
+ display: grid;
35
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
36
+ gap: 16px;
37
+ padding: 16px;
38
+ }
39
+
40
+ .thumbnail-active {
41
+ border: 2px solid #3b82f6;
42
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
43
+ }
44
+
45
+ .search-highlight {
46
+ background-color: rgba(255, 215, 0, 0.5);
47
+ position: absolute;
48
+ border-radius: 2px;
49
+ }
50
+
51
+ .current-highlight {
52
+ background-color: rgba(255, 155, 0, 0.7);
53
+ box-shadow: 0 0 0 2px rgba(255, 155, 0, 0.3);
54
+ }
55
+
56
+ #search-results {
57
+ max-height: 300px;
58
+ overflow-y: auto;
59
+ }
60
+
61
+ .loader {
62
+ animation: spin 1s linear infinite;
63
+ }
64
+
65
+ @keyframes spin {
66
+ 0% { transform: rotate(0deg); }
67
+ 100% { transform: rotate(360deg); }
68
+ }
69
+
70
+ .fullscreen {
71
+ position: fixed !important;
72
+ top: 0;
73
+ left: 0;
74
+ width: 100vw !important;
75
+ height: 100vh !important;
76
+ z-index: 1000;
77
+ background: white;
78
+ padding: 20px;
79
+ }
80
+
81
+ .sidebar {
82
+ transition: all 0.3s ease;
83
+ }
84
+
85
+ @media (max-width: 768px) {
86
+ .sidebar {
87
+ position: fixed;
88
+ top: 0;
89
+ left: -100%;
90
+ width: 80%;
91
+ height: 100vh;
92
+ z-index: 1100;
93
+ background: white;
94
+ }
95
+
96
+ .sidebar.open {
97
+ left: 0;
98
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
99
+ }
100
+
101
+ .sidebar-overlay {
102
+ display: none;
103
+ position: fixed;
104
+ top: 0;
105
+ left: 0;
106
+ right: 0;
107
+ bottom: 0;
108
+ background: rgba(0, 0, 0, 0.5);
109
+ z-index: 1099;
110
+ }
111
+
112
+ .sidebar-overlay.open {
113
+ display: block;
114
+ }
115
+ }
116
+ </style>
117
+ </head>
118
+ <body class="bg-gray-50 min-h-screen">
119
+ <!-- Mobile menu button -->
120
+ <div class="lg:hidden fixed top-4 left-4 z-50">
121
+ <button id="mobile-menu-button" class="p-2 bg-white rounded-lg shadow-md">
122
+ <i class="fas fa-bars"></i>
123
+ </button>
124
+ </div>
125
+
126
+ <!-- Sidebar overlay (mobile only) -->
127
+ <div id="sidebar-overlay" class="sidebar-overlay"></div>
128
+
129
+ <div class="flex h-full">
130
+ <!-- Sidebar -->
131
+ <div id="sidebar" class="sidebar w-80 bg-white border-r border-gray-200 h-screen sticky top-0 overflow-y-auto">
132
+ <div class="p-4 border-b border-gray-200 sticky top-0 bg-white z-10">
133
+ <div class="flex justify-between items-center">
134
+ <h2 class="text-xl font-semibold text-gray-800">PDF Documents</h2>
135
+ <button id="close-sidebar" class="lg:hidden p-2 text-gray-500 hover:text-gray-700">
136
+ <i class="fas fa-times"></i>
137
+ </button>
138
+ </div>
139
+ <div class="mt-4 relative">
140
+ <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
141
+ <i class="fas fa-search text-gray-400"></i>
142
+ </div>
143
+ <input type="text" id="doc-search"
144
+ class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-blue-500 focus:border-blue-500"
145
+ placeholder="Search documents...">
146
+ </div>
147
+ </div>
148
+
149
+ <div id="documents-list" class="p-2 space-y-2">
150
+ <!-- PDF documents will be added here -->
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Main content -->
155
+ <div class="flex-1">
156
+ <div class="container mx-auto px-4 py-8">
157
+ <!-- PDF Thumbnails View -->
158
+ <div id="thumbnails-view" class="hidden mb-8">
159
+ <div class="flex justify-between items-center mb-4">
160
+ <h2 class="text-xl font-semibold" id="thumbnail-view-title"></h2>
161
+ <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition" id="switch-to-viewer">
162
+ <i class="fas fa-file-alt mr-2"></i>Switch to Page View
163
+ </button>
164
+ </div>
165
+ <div class="thumbnail-container" id="thumbnail-grid">
166
+ <!-- Thumbnails will be rendered here -->
167
+ </div>
168
+ </div>
169
+
170
+ <!-- PDF Viewer -->
171
+ <div id="pdf-viewer-container">
172
+ <div id="pdf-container" class="hidden rounded-lg border border-gray-200">
173
+ <div class="bg-white p-4 border-b border-gray-200 sticky top-0 z-10">
174
+ <div class="flex flex-wrap justify-between items-center gap-4">
175
+ <div class="flex items-center space-x-3">
176
+ <button id="prev-page" class="p-2 bg-gray-100 hover:bg-gray-200 rounded">
177
+ <i class="fas fa-chevron-left"></i>
178
+ </button>
179
+ <span class="text-sm">
180
+ <span id="current-page">1</span> / <span id="total-pages">1</span>
181
+ </span>
182
+ <button id="next-page" class="p-2 bg-gray-100 hover:bg-gray-200 rounded">
183
+ <i class="fas fa-chevron-right"></i>
184
+ </button>
185
+ </div>
186
+
187
+ <div class="flex items-center gap-2">
188
+ <div class="relative min-w-[200px]">
189
+ <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
190
+ <i class="fas fa-search text-gray-400"></i>
191
+ </div>
192
+ <input type="text" id="search-input"
193
+ class="block w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 text-sm"
194
+ placeholder="Search in document...">
195
+ <div class="absolute right-0 inset-y-0 flex items-center pr-2">
196
+ <span id="match-count" class="text-xs text-gray-500 px-2 hidden">0/0</span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="flex items-center space-x-2">
202
+ <button id="zoom-out" class="p-2 bg-gray-100 hover:bg-gray-200 rounded" title="Zoom Out">
203
+ <i class="fas fa-search-minus"></i>
204
+ </button>
205
+ <span id="zoom-level" class="text-sm w-12 text-center">100%</span>
206
+ <button id="zoom-in" class="p-2 bg-gray-100 hover:bg-gray-200 rounded" title="Zoom In">
207
+ <i class="fas fa-search-plus"></i>
208
+ </button>
209
+ <button id="fullscreen" class="p-2 bg-gray-100 hover:bg-gray-200 rounded" title="Fullscreen">
210
+ <i class="fas fa-expand"></i>
211
+ </button>
212
+ <button class="p-2 bg-gray-100 hover:bg-gray-200 rounded" title="View Thumbnails" id="switch-to-thumbnails">
213
+ <i class="fas fa-th"></i>
214
+ </button>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <div id="search-results" class="hidden bg-white mx-4 my-2 border border-gray-200 rounded-lg shadow-sm"></div>
220
+
221
+ <div class="flex items-center justify-center">
222
+ <h3 id="document-title" class="text-lg font-medium text-gray-700 my-4"></h3>
223
+ </div>
224
+
225
+ <div class="relative">
226
+ <canvas id="pdf-render" class="mx-auto"></canvas>
227
+ <div class="flex justify-center my-4">
228
+ <button id="prev-match" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-l-lg disabled:opacity-50" disabled>
229
+ <i class="fas fa-chevron-up mr-2"></i>Previous
230
+ </button>
231
+ <button id="next-match" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-r-lg border-l border-gray-300 disabled:opacity-50" disabled>
232
+ <i class="fas fa-chevron-down mr-2"></i>Next
233
+ </button>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <!-- Loading state -->
240
+ <div id="loading" class="hidden text-center py-20">
241
+ <div class="inline-block loader border-4 border-blue-500 border-t-blue-300 rounded-full w-12 h-12"></div>
242
+ <p class="mt-4 text-gray-600">Loading PDF document...</p>
243
+ </div>
244
+
245
+ <!-- Empty state -->
246
+ <div id="empty-state" class="text-center py-20">
247
+ <div class="mx-auto w-24 h-24 text-gray-300">
248
+ <i class="fas fa-file-pdf text-7xl"></i>
249
+ </div>
250
+ <h3 class="mt-6 text-xl font-medium text-gray-700">No PDF selected</h3>
251
+ <p class="mt-2 text-gray-500">Select a PDF document from the sidebar to view</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <script>
258
+ // Initialize PDF.js
259
+ pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
260
+
261
+ // DOM Elements
262
+ const pdfContainer = document.getElementById('pdf-container');
263
+ const pdfCanvas = document.getElementById('pdf-render');
264
+ const loading = document.getElementById('loading');
265
+ const emptyState = document.getElementById('empty-state');
266
+ const documentTitleEl = document.getElementById('document-title');
267
+ const documentsList = document.getElementById('documents-list');
268
+ const docSearchInput = document.getElementById('doc-search');
269
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
270
+ const closeSidebarButton = document.getElementById('close-sidebar');
271
+ const sidebar = document.getElementById('sidebar');
272
+ const sidebarOverlay = document.getElementById('sidebar-overlay');
273
+ const thumbnailView = document.getElementById('thumbnails-view');
274
+ const thumbnailGrid = document.getElementById('thumbnail-grid');
275
+ const thumbnailTitle = document.getElementById('thumbnail-view-title');
276
+ const switchToThumbnailsBtn = document.getElementById('switch-to-thumbnails');
277
+ const switchToViewerBtn = document.getElementById('switch-to-viewer');
278
+ const pdfViewerContainer = document.getElementById('pdf-viewer-container');
279
+
280
+ // Navigation
281
+ const prevPageBtn = document.getElementById('prev-page');
282
+ const nextPageBtn = document.getElementById('next-page');
283
+ const currentPageSpan = document.getElementById('current-page');
284
+ const totalPagesSpan = document.getElementById('total-pages');
285
+
286
+ // Zoom controls
287
+ const zoomInBtn = document.getElementById('zoom-in');
288
+ const zoomOutBtn = document.getElementById('zoom-out');
289
+ const zoomLevelSpan = document.getElementById('zoom-level');
290
+ const fullscreenBtn = document.getElementById('fullscreen');
291
+
292
+ // Search controls
293
+ const searchInput = document.getElementById('search-input');
294
+ const searchResults = document.getElementById('search-results');
295
+ const prevMatchBtn = document.getElementById('prev-match');
296
+ const nextMatchBtn = document.getElementById('next-match');
297
+ const matchCountSpan = document.getElementById('match-count');
298
+
299
+ // Variables
300
+ let pdfDoc = null;
301
+ let currentPage = 1;
302
+ let isRendering = false;
303
+ let pageIsPending = null;
304
+ let scale = 1.0;
305
+ let ctx = pdfCanvas.getContext('2d');
306
+ let searchTerm = '';
307
+ let matches = [];
308
+ let currentMatchIndex = -1;
309
+ let highlightDivs = [];
310
+ let currentDocument = null;
311
+
312
+ // List of sample PDF documents
313
+ const pdfDocuments = [
314
+ {
315
+ id: 1,
316
+ title: "Sample Document 1",
317
+ description: "Example PDF with multiple pages",
318
+ size: "2.4 MB",
319
+ pages: 5,
320
+ url: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
321
+ },
322
+ {
323
+ id: 2,
324
+ title: "Technical Guide",
325
+ description: "Detailed technical reference manual",
326
+ size: "1.8 MB",
327
+ pages: 3,
328
+ url: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
329
+ },
330
+ {
331
+ id: 3,
332
+ title: "User Manual",
333
+ description: "Product user guide and instructions",
334
+ size: "3.1 MB",
335
+ pages: 4,
336
+ url: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
337
+ },
338
+ {
339
+ id: 4,
340
+ title: "Annual Report 2023",
341
+ description: "Company financial report for 2023",
342
+ size: "4.5 MB",
343
+ pages: 6,
344
+ url: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
345
+ },
346
+ {
347
+ id: 5,
348
+ title: "Project Proposal",
349
+ description: "Detailed project plan and budget",
350
+ size: "1.2 MB",
351
+ pages: 3,
352
+ url: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
353
+ }
354
+ ];
355
+
356
+ // Render documents list
357
+ function renderDocumentsList(documents = pdfDocuments) {
358
+ documentsList.innerHTML = '';
359
+
360
+ if (documents.length === 0) {
361
+ documentsList.innerHTML = `
362
+ <div class="p-4 text-center text-gray-500">
363
+ No documents found matching your search
364
+ </div>
365
+ `;
366
+ return;
367
+ }
368
+
369
+ documents.forEach(doc => {
370
+ const docElement = document.createElement('div');
371
+ docElement.className = 'pdf-thumbnail p-3 rounded-lg cursor-pointer bg-white border border-gray-200 hover:bg-gray-50';
372
+ docElement.innerHTML = `
373
+ <div class="flex items-center space-x-3">
374
+ <div class="text-red-500">
375
+ <i class="fas fa-file-pdf text-2xl"></i>
376
+ </div>
377
+ <div class="truncate flex-1">
378
+ <h3 class="text-sm font-medium text-gray-900 truncate">${doc.title}</h3>
379
+ <p class="text-xs text-gray-500">${doc.size} • ${doc.pages} pages</p>
380
+ </div>
381
+ </div>
382
+ `;
383
+
384
+ docElement.addEventListener('click', () => loadPDF(doc.url, doc.title, doc));
385
+ documentsList.appendChild(docElement);
386
+ });
387
+ }
388
+
389
+ // Filter documents based on search
390
+ function filterDocuments(searchTerm) {
391
+ const filtered = pdfDocuments.filter(doc =>
392
+ doc.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
393
+ doc.description.toLowerCase().includes(searchTerm.toLowerCase())
394
+ );
395
+ renderDocumentsList(filtered);
396
+ }
397
+
398
+ // Render PDF page
399
+ function renderPage(pageNum) {
400
+ isRendering = true;
401
+
402
+ pdfDoc.getPage(pageNum).then(page => {
403
+ const viewport = page.getViewport({ scale: scale });
404
+ pdfCanvas.height = viewport.height;
405
+ pdfCanvas.width = viewport.width;
406
+
407
+ const renderContext = {
408
+ canvasContext: ctx,
409
+ viewport: viewport
410
+ };
411
+
412
+ const renderTask = page.render(renderContext);
413
+
414
+ renderTask.promise.then(() => {
415
+ isRendering = false;
416
+
417
+ if (pageIsPending !== null) {
418
+ renderPage(pageIsPending);
419
+ pageIsPending = null;
420
+ }
421
+
422
+ // Update page info
423
+ currentPageSpan.textContent = pageNum;
424
+ currentPage = pageNum;
425
+
426
+ // Highlight search results for this page
427
+ highlightMatches();
428
+ });
429
+ });
430
+ }
431
+
432
+ // Render all thumbnails for a document
433
+ async function renderThumbnails(doc) {
434
+ thumbnailGrid.innerHTML = '';
435
+ thumbnailTitle.textContent = doc.title;
436
+
437
+ for (let i = 1; i <= doc.pages; i++) {
438
+ const thumbnailContainer = document.createElement('div');
439
+ thumbnailContainer.className = 'pdf-thumbnail bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer relative';
440
+ thumbnailContainer.innerHTML = `<canvas class="w-full h-full"></canvas>`;
441
+
442
+ const thumbnailCanvas = thumbnailContainer.querySelector('canvas');
443
+ const thumbnailCtx = thumbnailCanvas.getContext('2d');
444
+
445
+ try {
446
+ const page = await pdfDoc.getPage(i);
447
+ const viewport = page.getViewport({ scale: 0.2 }); // Smaller scale for thumbnails
448
+
449
+ // Set canvas dimensions
450
+ thumbnailCanvas.width = viewport.width;
451
+ thumbnailCanvas.height = viewport.height;
452
+
453
+ // Render thumbnail
454
+ await page.render({
455
+ canvasContext: thumbnailCtx,
456
+ viewport: viewport
457
+ }).promise;
458
+
459
+ // Add page number marker
460
+ const pageMarker = document.createElement('div');
461
+ pageMarker.className = 'page-marker';
462
+ pageMarker.textContent = `Page ${i}`;
463
+ thumbnailContainer.appendChild(pageMarker);
464
+
465
+ // Click handler to open page in viewer
466
+ thumbnailContainer.addEventListener('click', () => {
467
+ switchToViewer();
468
+ queueRenderPage(i);
469
+ });
470
+
471
+ thumbnailGrid.appendChild(thumbnailContainer);
472
+ } catch (err) {
473
+ console.error(`Error rendering thumbnail for page ${i}:`, err);
474
+ }
475
+ }
476
+ }
477
+
478
+ // Switch to thumbnail view
479
+ function switchToThumbnails() {
480
+ pdfViewerContainer.classList.add('hidden');
481
+ thumbnailView.classList.remove('hidden');
482
+ renderThumbnails(currentDocument);
483
+ }
484
+
485
+ // Switch to page viewer
486
+ function switchToViewer() {
487
+ thumbnailView.classList.add('hidden');
488
+ pdfViewerContainer.classList.remove('hidden');
489
+ }
490
+
491
+ // Queue rendering if busy
492
+ function queueRenderPage(pageNum) {
493
+ if (isRendering) {
494
+ pageIsPending = pageNum;
495
+ } else {
496
+ renderPage(pageNum);
497
+ }
498
+ }
499
+
500
+ // Previous page
501
+ function goToPrevPage() {
502
+ if (currentPage <= 1) return;
503
+ queueRenderPage(currentPage - 1);
504
+ }
505
+
506
+ // Next page
507
+ function goToNextPage() {
508
+ if (currentPage >= pdfDoc.numPages) return;
509
+ queueRenderPage(currentPage + 1);
510
+ }
511
+
512
+ // Zoom in
513
+ function zoomIn() {
514
+ if (scale >= 3.0) return;
515
+ scale += 0.25;
516
+ zoomLevelSpan.textContent = `${Math.round(scale * 100)}%`;
517
+ queueRenderPage(currentPage);
518
+ }
519
+
520
+ // Zoom out
521
+ function zoomOut() {
522
+ if (scale <= 0.5) return;
523
+ scale -= 0.25;
524
+ zoomLevelSpan.textContent = `${Math.round(scale * 100)}%`;
525
+ queueRenderPage(currentPage);
526
+ }
527
+
528
+ // Toggle fullscreen
529
+ function toggleFullscreen() {
530
+ pdfContainer.classList.toggle('fullscreen');
531
+ if (pdfContainer.classList.contains('fullscreen')) {
532
+ fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
533
+ fullscreenBtn.title = 'Exit Fullscreen';
534
+ scale = Math.min(scale * 1.5, 3.0); // Increase scale in fullscreen
535
+ } else {
536
+ fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
537
+ fullscreenBtn.title = 'Fullscreen';
538
+ scale = Math.max(scale / 1.5, 0.5); // Decrease scale when exiting
539
+ }
540
+ zoomLevelSpan.textContent = `${Math.round(scale * 100)}%`;
541
+ queueRenderPage(currentPage);
542
+ }
543
+
544
+ // Search PDF
545
+ async function searchPDF() {
546
+ searchTerm = searchInput.value.trim();
547
+
548
+ if (!searchTerm || !pdfDoc) {
549
+ searchResults.classList.add('hidden');
550
+ return;
551
+ }
552
+
553
+ // Clear previous highlights
554
+ clearHighlights();
555
+
556
+ // Reset search state
557
+ matches = [];
558
+ currentMatchIndex = -1;
559
+ searchResults.innerHTML = '';
560
+
561
+ // Show loading state
562
+ searchResults.innerHTML = `
563
+ <div class="p-4 flex items-center justify-center text-gray-500">
564
+ <i class="fas fa-spinner fa-spin mr-3"></i> Searching...
565
+ </div>
566
+ `;
567
+ searchResults.classList.remove('hidden');
568
+
569
+ // Search through all pages
570
+ for (let i = 1; i <= pdfDoc.numPages; i++) {
571
+ const pageMatches = await searchInPage(i);
572
+ matches = matches.concat(pageMatches);
573
+ }
574
+
575
+ // Show results
576
+ if (matches.length === 0) {
577
+ searchResults.innerHTML = `
578
+ <div class="p-4 text-center text-gray-500">
579
+ No results found for "${escapeHtml(searchTerm)}"
580
+ </div>
581
+ `;
582
+ matchCountSpan.classList.add('hidden');
583
+ prevMatchBtn.disabled = true;
584
+ nextMatchBtn.disabled = true;
585
+ } else {
586
+ updateMatchUI();
587
+ }
588
+ }
589
+
590
+ // Search in a specific page
591
+ async function searchInPage(pageNum) {
592
+ const page = await pdfDoc.getPage(pageNum);
593
+ const textContent = await page.getTextContent();
594
+
595
+ const found = [];
596
+ const regex = new RegExp(escapeRegExp(searchTerm), 'gi');
597
+
598
+ let globalPosition = 0;
599
+
600
+ textContent.items.forEach(item => {
601
+ const text = item.str;
602
+ let match;
603
+
604
+ while ((match = regex.exec(text)) !== null) {
605
+ found.push({
606
+ page: pageNum,
607
+ text: match[0],
608
+ index: match.index,
609
+ globalPosition: globalPosition + match.index,
610
+ item: item
611
+ });
612
+ }
613
+
614
+ globalPosition += text.length + 1; // +1 for space
615
+ });
616
+
617
+ return found;
618
+ }
619
+
620
+ // Highlight matches on current page
621
+ async function highlightMatches() {
622
+ if (matches.length === 0) return;
623
+
624
+ clearHighlights();
625
+
626
+ const currentPageMatches = matches.filter(m => m.page === currentPage);
627
+ if (currentPageMatches.length === 0) return;
628
+
629
+ const page = await pdfDoc.getPage(currentPage);
630
+ const viewport = page.getViewport({ scale: scale });
631
+
632
+ const highlightContainer = document.createElement('div');
633
+ highlightContainer.style.position = 'absolute';
634
+ highlightContainer.style.top = '0';
635
+ highlightContainer.style.left = '0';
636
+ highlightContainer.style.width = pdfCanvas.width + 'px';
637
+ highlightContainer.style.height = pdfCanvas.height + 'px';
638
+ highlightContainer.style.pointerEvents = 'none';
639
+
640
+ currentPageMatches.forEach(match => {
641
+ const item = match.item;
642
+ const startX = item.transform[4];
643
+ const startY = viewport.height - item.transform[5];
644
+ const charWidth = item.width / item.str.length;
645
+
646
+ const highlight = document.createElement('div');
647
+ highlight.className = 'search-highlight';
648
+
649
+ // Calculate highlight position
650
+ highlight.style.left = startX + (match.index * charWidth) + 'px';
651
+ highlight.style.top = (startY - item.height) + 'px';
652
+ highlight.style.width = (match.text.length * charWidth) + 'px';
653
+ highlight.style.height = item.height + 'px';
654
+
655
+ highlightContainer.appendChild(highlight);
656
+ });
657
+
658
+ pdfCanvas.parentNode.appendChild(highlightContainer);
659
+ highlightDivs.push(highlightContainer);
660
+
661
+ // Highlight current match if on this page
662
+ if (currentMatchIndex >= 0 && matches[currentMatchIndex].page === currentPage) {
663
+ highlightCurrentMatch();
664
+ }
665
+ }
666
+
667
+ // Highlight the current match
668
+ function highlightCurrentMatch() {
669
+ if (currentMatchIndex < 0) return;
670
+
671
+ const currentMatch = matches[currentMatchIndex];
672
+
673
+ // Go to page if needed
674
+ if (currentMatch.page !== currentPage) {
675
+ queueRenderPage(currentMatch.page);
676
+ return;
677
+ }
678
+
679
+ // Scroll the highlight into view
680
+ setTimeout(() => {
681
+ const highlights = document.querySelectorAll('.search-highlight');
682
+ if (highlights.length > 0) {
683
+ const highlightIndex = matches
684
+ .filter((m, i) => i <= currentMatchIndex && m.page === currentPage)
685
+ .length - 1;
686
+
687
+ if (highlightIndex >= 0 && highlightIndex < highlights.length) {
688
+ const currentHighlight = highlights[highlightIndex];
689
+
690
+ // Remove previous current highlight
691
+ document.querySelectorAll('.current-highlight').forEach(el => {
692
+ el.classList.remove('current-highlight');
693
+ });
694
+
695
+ // Add current highlight class
696
+ currentHighlight.classList.add('current-highlight');
697
+
698
+ // Scroll to the highlight
699
+ currentHighlight.scrollIntoView({
700
+ behavior: 'smooth',
701
+ block: 'center'
702
+ });
703
+ }
704
+ }
705
+ }, 100);
706
+ }
707
+
708
+ // Clear all highlights
709
+ function clearHighlights() {
710
+ highlightDivs.forEach(div => {
711
+ if (div.parentNode) {
712
+ div.parentNode.removeChild(div);
713
+ }
714
+ });
715
+ highlightDivs = [];
716
+ }
717
+
718
+ // Update match UI counter and buttons
719
+ function updateMatchUI() {
720
+ if (matches.length === 0) return;
721
+
722
+ currentMatchIndex = 0;
723
+ matchCountSpan.textContent = `${currentMatchIndex + 1}/${matches.length}`;
724
+ matchCountSpan.classList.remove('hidden');
725
+ prevMatchBtn.disabled = true;
726
+ nextMatchBtn.disabled = matches.length <= 1;
727
+
728
+ highlightCurrentMatch();
729
+ }
730
+
731
+ // Go to previous match
732
+ function goToPrevMatch() {
733
+ if (currentMatchIndex <= 0) return;
734
+
735
+ currentMatchIndex--;
736
+ matchCountSpan.textContent = `${currentMatchIndex + 1}/${matches.length}`;
737
+
738
+ nextMatchBtn.disabled = false;
739
+ prevMatchBtn.disabled = currentMatchIndex <= 0;
740
+
741
+ highlightCurrentMatch();
742
+ }
743
+
744
+ // Go to next match
745
+ function goToNextMatch() {
746
+ if (currentMatchIndex >= matches.length - 1) return;
747
+
748
+ currentMatchIndex++;
749
+ matchCountSpan.textContent = `${currentMatchIndex + 1}/${matches.length}`;
750
+
751
+ prevMatchBtn.disabled = false;
752
+ nextMatchBtn.disabled = currentMatchIndex >= matches.length - 1;
753
+
754
+ highlightCurrentMatch();
755
+ }
756
+
757
+ // Load PDF from URL
758
+ function loadPDF(url, title = '', doc = null) {
759
+ currentDocument = doc;
760
+ loading.classList.remove('hidden');
761
+ emptyState.classList.add('hidden');
762
+ pdfViewerContainer.classList.remove('hidden');
763
+ thumbnailView.classList.add('hidden');
764
+
765
+ pdfjsLib.getDocument(url).promise.then(pdf => {
766
+ pdfDoc = pdf;
767
+ pdfContainer.classList.remove('hidden');
768
+ loading.classList.add('hidden');
769
+
770
+ // Update page count
771
+ if (doc) {
772
+ doc.pages = pdf.numPages;
773
+ }
774
+
775
+ totalPagesSpan.textContent = pdf.numPages;
776
+ documentTitleEl.textContent = title || 'PDF Document';
777
+
778
+ // Reset search
779
+ searchInput.value = '';
780
+ searchResults.classList.add('hidden');
781
+ matches = [];
782
+ currentMatchIndex = -1;
783
+ matchCountSpan.classList.add('hidden');
784
+
785
+ // Reset zoom
786
+ scale = 1.0;
787
+ zoomLevelSpan.textContent = '100%';
788
+
789
+ // Initial render
790
+ renderPage(1);
791
+ }).catch(err => {
792
+ console.error('PDF loading error:', err);
793
+ alert('Error loading PDF. Please try another file.');
794
+ loading.classList.add('hidden');
795
+ emptyState.classList.remove('hidden');
796
+ });
797
+ }
798
+
799
+ // Helpers
800
+ function escapeRegExp(string) {
801
+ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
802
+ }
803
+
804
+ function escapeHtml(unsafe) {
805
+ return unsafe
806
+ .replace(/&/g, "&amp;")
807
+ .replace(/</g, "&lt;")
808
+ .replace(/>/g, "&gt;")
809
+ .replace(/"/g, "&quot;")
810
+ .replace(/'/g, "&#039;");
811
+ }
812
+
813
+ // Toggle mobile sidebar
814
+ function toggleMobileSidebar() {
815
+ sidebar.classList.toggle('open');
816
+ sidebarOverlay.classList.toggle('open');
817
+ }
818
+
819
+ // Initialize the app
820
+ function init() {
821
+ // Render documents list
822
+ renderDocumentsList();
823
+
824
+ // Document search
825
+ docSearchInput.addEventListener('input', (e) => {
826
+ filterDocuments(e.target.value);
827
+ });
828
+
829
+ // Mobile menu
830
+ mobileMenuButton.addEventListener('click', toggleMobileSidebar);
831
+ closeSidebarButton.addEventListener('click', toggleMobileSidebar);
832
+ sidebarOverlay.addEventListener('click', toggleMobileSidebar);
833
+
834
+ // Event listeners
835
+ prevPageBtn.addEventListener('click', goToPrevPage);
836
+ nextPageBtn.addEventListener('click', goToNextPage);
837
+
838
+ zoomInBtn.addEventListener('click', zoomIn);
839
+ zoomOutBtn.addEventListener('click', zoomOut);
840
+ fullscreenBtn.addEventListener('click', toggleFullscreen);
841
+
842
+ searchInput.addEventListener('input', () => {
843
+ // Avoid searching on every keystroke
844
+ clearTimeout(searchInput.searchTimer);
845
+ searchInput.searchTimer = setTimeout(searchPDF, 500);
846
+ });
847
+
848
+ searchInput.addEventListener('keydown', e => {
849
+ if (e.key === 'Enter') {
850
+ clearTimeout(searchInput.searchTimer);
851
+ searchPDF();
852
+ }
853
+ });
854
+
855
+ prevMatchBtn.addEventListener('click', goToPrevMatch);
856
+ nextMatchBtn.addEventListener('click', goToNextMatch);
857
+
858
+ // View switching
859
+ switchToThumbnailsBtn.addEventListener('click', switchToThumbnails);
860
+ switchToViewerBtn.addEventListener('click', switchToViewer);
861
+
862
+ // Start with the empty state visible
863
+ emptyState.classList.remove('hidden');
864
+ }
865
+
866
+ // Initialize the app when DOM is loaded
867
+ document.addEventListener('DOMContentLoaded', init);
868
+ </script>
869
+ <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=bep40/catalogue-bep40" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
870
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ Tạo 1 app trình bày file PDF, có các chức năng phóng to, thu nhỏ, zoom full màn hình, tìm văn bản ngay trên file
2
+ Tạo 1 app trình bày file PDF, có các chức năng zoom full màn hình, tìm văn bản ngay trên file
3
+ Tạo 1 app trình bày danh sách file PDF có sẵn, có các chức năng phóng to, thu nhỏ, zoom full màn hình, tìm văn bản ngay trên file
4
+ Tạo 1 app trình bày danh sách file PDF có sẵn dưới dạng thumbnail, có các chức năng phóng to, thu nhỏ, zoom full màn hình, tìm văn bản ngay trên file