Hugging Face's logo

Spaces:
Marthee
/
NavigateToPage
Sleeping

App Files Community
Marthee commited on
Commit
10dd4e0
·
verified ·
1 Parent(s): a0786f3

Update templates/gui.html

Browse files
Files changed (1) hide show
  1. templates/gui.html +32 -41
templates/gui.html CHANGED
@@ -3,58 +3,49 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>View PDF</title>
7
- <style>
8
- iframe {
9
- width: 100%;
10
- height: 100vh;
11
- border: none;
12
- }
13
- .pdf-container {
14
- text-align: center;
15
- }
16
- </style>
17
 
18
- <!-- Include PDF.js -->
19
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.938/pdf.min.js"></script>
20
 
21
  <script>
22
- function renderPdf() {
23
- if (typeof pdfjsLib === 'undefined') {
24
- console.error('PDF.js is not loaded.');
25
- return;
26
- }
27
-
28
- const url = '/download-pdf'; // Flask route to serve the PDF
29
-
30
- pdfjsLib.getDocument(url).promise.then(function(pdf) {
 
 
 
 
31
  console.log('PDF loaded');
32
- pdf.getPage(2).then(function(page) {
33
- const viewport = page.getViewport({ scale: 1.5 });
34
- const canvas = document.getElementById('pdfCanvas');
35
- const context = canvas.getContext('2d');
36
-
37
- canvas.height = viewport.height;
38
- canvas.width = viewport.width;
39
-
40
- page.render({
41
- canvasContext: context,
42
- viewport: viewport
43
- });
44
- });
45
- }).catch(function(error) {
46
- console.error('Failed to load PDF:', error);
47
- });
48
  }
49
-
50
  window.onload = renderPdf;
51
  </script>
52
  </head>
53
 
54
  <body>
55
  <h2>PDF Viewer</h2>
56
- <div class="pdf-container">
57
- <canvas id="pdfCanvas"></canvas>
58
- </div>
59
  </body>
60
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PDF Viewer</title>
 
 
 
 
 
 
 
 
 
 
7
 
8
+ <!-- Load PDF.js from a CDN -->
9
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.938/pdf.min.js"></script>
10
 
11
  <script>
12
+ // Check if PDF.js is loaded
13
+ if (typeof pdfjsLib !== 'undefined') {
14
+ console.log('PDF.js loaded successfully');
15
+ } else {
16
+ console.error('Failed to load PDF.js');
17
+ }
18
+
19
+ // Render PDF on page load
20
+ async function renderPdf() {
21
+ try {
22
+ const url = '/download-pdf';
23
+ const pdf = await pdfjsLib.getDocument(url).promise;
24
+
25
  console.log('PDF loaded');
26
+
27
+ const page = await pdf.getPage(2); // Load the second page
28
+
29
+ const viewport = page.getViewport({ scale: 1.5 });
30
+ const canvas = document.getElementById('pdfCanvas');
31
+ const context = canvas.getContext('2d');
32
+
33
+ canvas.height = viewport.height;
34
+ canvas.width = viewport.width;
35
+
36
+ await page.render({ canvasContext: context, viewport }).promise;
37
+
38
+ } catch (error) {
39
+ console.error('Error loading PDF:', error);
40
+ }
 
41
  }
42
+
43
  window.onload = renderPdf;
44
  </script>
45
  </head>
46
 
47
  <body>
48
  <h2>PDF Viewer</h2>
49
+ <canvas id="pdfCanvas"></canvas>
 
 
50
  </body>
51
  </html>