Hugging Face's logo

Spaces:
ABDALLALSWAITI
/
htmlpdf
Sleeping

App Files Community
ABDALLALSWAITI commited on
Commit
442c38f
·
verified ·
1 Parent(s): 09084eb

Update src/streamlit_app.py

Browse files
Files changed (1) hide show
  1. src/streamlit_app.py +101 -13
src/streamlit_app.py CHANGED
@@ -73,19 +73,109 @@ def render_html_preview(html_content):
73
  return iframe_html
74
 
75
  def render_pdf_preview(pdf_bytes):
76
- """Render PDF preview using PDF.js for better browser compatibility (including Brave)"""
77
  b64 = base64.b64encode(pdf_bytes).decode()
78
 
79
- # Use PDF.js viewer hosted on CDN for better compatibility
80
  pdf_viewer_html = f'''
81
- <div style="width: 100%; height: 600px; border: 2px solid #ddd; border-radius: 5px; background: #525659;">
82
- <iframe
83
- src="https://mozilla.github.io/pdf.js/web/viewer.html?file=data:application/pdf;base64,{b64}"
84
- width="100%"
85
- height="100%"
86
- style="border: none;">
87
- </iframe>
88
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  '''
90
  return pdf_viewer_html
91
 
@@ -276,7 +366,6 @@ with tab1:
276
 
277
  # PDF Preview
278
  st.subheader("📄 PDF Preview")
279
- st.markdown("*If preview doesn't load, use the download button above. Works best in Firefox and Chrome.*")
280
  st.components.v1.html(render_pdf_preview(pdf_bytes), height=620, scrolling=True)
281
 
282
  # Tab 2: Paste HTML Code
@@ -382,7 +471,6 @@ with tab2:
382
 
383
  # PDF Preview
384
  st.subheader("📄 PDF Preview")
385
- st.markdown("*If preview doesn't load, use the download button above. Works best in Firefox and Chrome.*")
386
  st.components.v1.html(render_pdf_preview(pdf_bytes), height=620, scrolling=True)
387
 
388
  # Footer with tips
@@ -396,5 +484,5 @@ st.markdown("""
396
  - All CSS styles, colors, gradients, and fonts are preserved
397
  - Use inline CSS or `<style>` tags for best results
398
  - External resources should use absolute URLs
399
- - **PDF Preview** works best in Firefox and Chrome. If blocked in Brave, download the PDF instead.
400
  """)
 
73
  return iframe_html
74
 
75
  def render_pdf_preview(pdf_bytes):
76
+ """Render PDF preview using embedded PDF.js for better browser compatibility"""
77
  b64 = base64.b64encode(pdf_bytes).decode()
78
 
79
+ # Embed PDF.js directly to avoid I/O errors and CORS issues
80
  pdf_viewer_html = f'''
81
+ <!DOCTYPE html>
82
+ <html>
83
+ <head>
84
+ <style>
85
+ body {{
86
+ margin: 0;
87
+ padding: 0;
88
+ overflow: hidden;
89
+ background: #525659;
90
+ }}
91
+ #pdf-container {{
92
+ width: 100%;
93
+ height: 100vh;
94
+ overflow: auto;
95
+ display: flex;
96
+ flex-direction: column;
97
+ align-items: center;
98
+ padding: 20px;
99
+ box-sizing: border-box;
100
+ }}
101
+ canvas {{
102
+ box-shadow: 0 2px 8px rgba(0,0,0,0.3);
103
+ margin-bottom: 10px;
104
+ background: white;
105
+ }}
106
+ #loading {{
107
+ color: white;
108
+ font-family: Arial, sans-serif;
109
+ font-size: 18px;
110
+ padding: 20px;
111
+ }}
112
+ .error {{
113
+ color: #ff6b6b;
114
+ font-family: Arial, sans-serif;
115
+ padding: 20px;
116
+ background: rgba(0,0,0,0.5);
117
+ border-radius: 5px;
118
+ margin: 20px;
119
+ }}
120
+ </style>
121
+ </head>
122
+ <body>
123
+ <div id="pdf-container">
124
+ <div id="loading">Loading PDF...</div>
125
+ </div>
126
+
127
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
128
+ <script>
129
+ // Set worker source
130
+ pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
131
+
132
+ const pdfData = atob('{b64}');
133
+ const pdfContainer = document.getElementById('pdf-container');
134
+ const loading = document.getElementById('loading');
135
+
136
+ // Convert base64 to Uint8Array
137
+ const uint8Array = new Uint8Array(pdfData.length);
138
+ for (let i = 0; i < pdfData.length; i++) {{
139
+ uint8Array[i] = pdfData.charCodeAt(i);
140
+ }}
141
+
142
+ // Load PDF
143
+ pdfjsLib.getDocument({{data: uint8Array}}).promise.then(function(pdf) {{
144
+ loading.style.display = 'none';
145
+
146
+ // Render all pages
147
+ const numPages = pdf.numPages;
148
+ const promises = [];
149
+
150
+ for (let pageNum = 1; pageNum <= numPages; pageNum++) {{
151
+ promises.push(
152
+ pdf.getPage(pageNum).then(function(page) {{
153
+ const scale = 1.5;
154
+ const viewport = page.getViewport({{scale: scale}});
155
+
156
+ const canvas = document.createElement('canvas');
157
+ const context = canvas.getContext('2d');
158
+ canvas.height = viewport.height;
159
+ canvas.width = viewport.width;
160
+
161
+ pdfContainer.appendChild(canvas);
162
+
163
+ return page.render({{
164
+ canvasContext: context,
165
+ viewport: viewport
166
+ }}).promise;
167
+ }})
168
+ );
169
+ }}
170
+
171
+ return Promise.all(promises);
172
+ }}).catch(function(error) {{
173
+ loading.innerHTML = '<div class="error">Error loading PDF: ' + error.message + '</div>';
174
+ console.error('Error loading PDF:', error);
175
+ }});
176
+ </script>
177
+ </body>
178
+ </html>
179
  '''
180
  return pdf_viewer_html
181
 
 
366
 
367
  # PDF Preview
368
  st.subheader("📄 PDF Preview")
 
369
  st.components.v1.html(render_pdf_preview(pdf_bytes), height=620, scrolling=True)
370
 
371
  # Tab 2: Paste HTML Code
 
471
 
472
  # PDF Preview
473
  st.subheader("📄 PDF Preview")
 
474
  st.components.v1.html(render_pdf_preview(pdf_bytes), height=620, scrolling=True)
475
 
476
  # Footer with tips
 
484
  - All CSS styles, colors, gradients, and fonts are preserved
485
  - Use inline CSS or `<style>` tags for best results
486
  - External resources should use absolute URLs
487
+ - **PDF Preview** renders directly in the browser using PDF.js
488
  """)