Hugging Face's logo

Spaces:
findConsole
/
InitialMarkups
Runtime error

App Files Community
Marthee commited on
Commit
bce0410
·
verified ·
1 Parent(s): 38e4b38

Update templates/gui.html

Browse files
Files changed (1) hide show
  1. templates/gui.html +36 -47
templates/gui.html CHANGED
@@ -58,68 +58,57 @@ processPdf();
58
 
59
  </script> -->
60
 
61
-
62
  <!DOCTYPE html>
63
  <html lang="en">
64
  <head>
65
  <meta charset="UTF-8">
66
  <title>PDF Viewer</title>
67
  <style>
68
- body { margin: 0; padding: 0; font-family: sans-serif; }
69
- #pdfViewer { width: 100vw; height: 100vh; border: none; }
70
- #links {
71
- position: fixed;
72
- top: 10px;
73
- left: 10px;
74
- background: rgba(255, 255, 255, 0.9);
75
- padding: 8px 12px;
76
- border-radius: 10px;
77
- box-shadow: 0 0 6px rgba(0,0,0,0.2);
78
- }
79
- .pdf-link {
80
- display: block;
81
- margin: 6px 0;
82
- cursor: pointer;
83
- color: #0056b3;
84
- text-decoration: underline;
85
- }
86
  </style>
87
  </head>
88
  <body>
89
- <div id="links"></div>
90
 
91
- <!-- The iframe viewer -->
92
- <iframe
93
- id="pdfViewer"
94
- src="/get-pdf#page={{ start_page }}&zoom={{ start_zoom }}"
95
- allowfullscreen
96
- ></iframe>
97
 
98
  <script>
99
- // Example: links that might come from an external source (you can replace this array)
100
- const generatedLinks = [
101
- { page: 2, zoom: 150 },
102
- { page: 5, zoom: 125 },
103
- { page: 10, zoom: 200 },
104
- { page: 15, zoom: 180 }
105
- ];
106
 
107
- const container = document.getElementById('links');
108
- const pdfViewer = document.getElementById('pdfViewer');
 
 
 
 
 
 
 
109
 
110
- // Create clickable redirect links dynamically
111
- generatedLinks.forEach(item => {
112
- const link = document.createElement('a');
113
- link.textContent = `Go to Page ${item.page} (Zoom ${item.zoom}%)`;
114
- link.className = 'pdf-link';
115
- link.href = '#';
116
- link.addEventListener('click', e => {
117
- e.preventDefault();
118
- // Redirect existing iframe — no new tab, no reprocessing
119
- pdfViewer.src = `/get-pdf#page=${item.page}&zoom=${item.zoom}`;
120
- });
121
- container.appendChild(link);
 
 
 
122
  });
123
  </script>
 
124
  </body>
125
  </html>
 
58
 
59
  </script> -->
60
 
 
61
  <!DOCTYPE html>
62
  <html lang="en">
63
  <head>
64
  <meta charset="UTF-8">
65
  <title>PDF Viewer</title>
66
  <style>
67
+ body { margin: 0; overflow: hidden; }
68
+ iframe { width: 100vw; height: 100vh; border: none; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  </style>
70
  </head>
71
  <body>
 
72
 
73
+ <!-- PDF viewer -->
74
+ <iframe id="pdfViewer"
75
+ src="/get-pdf#page={{ start_page }}&zoom={{ start_zoom }}"
76
+ allowfullscreen></iframe>
 
 
77
 
78
  <script>
79
+ /**
80
+ * Listen for external navigation updates.
81
+ * If the viewer is already open, update the page/zoom dynamically
82
+ * when the user clicks another external /view-pdf?pdfLink=...&page=X&zoom=Y link.
83
+ */
 
 
84
 
85
+ // Detect changes to URL parameters dynamically
86
+ function getQueryParams() {
87
+ const params = new URLSearchParams(window.location.search);
88
+ return {
89
+ pdfLink: params.get('pdfLink'),
90
+ page: params.get('page') || '1',
91
+ zoom: params.get('zoom') || '100'
92
+ };
93
+ }
94
 
95
+ function updatePDFView(page, zoom) {
96
+ const iframe = document.getElementById('pdfViewer');
97
+ iframe.src = `/get-pdf#page=${page}&zoom=${zoom}`;
98
+ }
99
+
100
+ // Listen for URL changes (e.g. when user clicks another link externally)
101
+ window.addEventListener('popstate', () => {
102
+ const { page, zoom } = getQueryParams();
103
+ updatePDFView(page, zoom);
104
+ });
105
+
106
+ // Also handle initial load (page refresh or direct open)
107
+ window.addEventListener('load', () => {
108
+ const { page, zoom } = getQueryParams();
109
+ updatePDFView(page, zoom);
110
  });
111
  </script>
112
+
113
  </body>
114
  </html>