Upload streamlit_app (1).py

src/streamlit_app (1).py

@@ -0,0 +1,695 @@
+"""
+Streamlit HTML to PDF Converter with Image Support and Proper Page Breaks
+Save this file as: src/streamlit_app.py
+"""
+import streamlit as st
+import subprocess
+import os
+import tempfile
+import shutil
+from pathlib import Path
+import base64
+import re
+import mimetypes
+
+st.set_page_config(
+    page_title="HTML to PDF Converter",
+    page_icon="📄",
+    layout="wide"
+)
+
+def detect_aspect_ratio(html_content):
+    """Detect aspect ratio from HTML content"""
+    viewport_match = re.search(r'<meta[^>]*viewport[^>]*content=["\']([^"\']*)["\']', html_content, re.IGNORECASE)
+    if viewport_match:
+        viewport = viewport_match.group(1).lower()
+        if 'orientation=portrait' in viewport:
+            return "9:16"
+        elif 'orientation=landscape' in viewport:
+            return "16:9"
+    
+    aspect_match = re.search(r'aspect-ratio\s*:\s*(\d+)\s*/\s*(\d+)', html_content, re.IGNORECASE)
+    if aspect_match:
+        width = int(aspect_match.group(1))
+        height = int(aspect_match.group(2))
+        ratio = width / height
+        if ratio > 1.5:
+            return "16:9"
+        elif ratio < 0.7:
+            return "9:16"
+        else:
+            return "1:1"
+    
+    if any(keyword in html_content.lower() for keyword in ['reveal.js', 'impress.js', 'slide', 'presentation']):
+        return "16:9"
+    
+    return "9:16"
+
+def image_to_base64(image_file):
+    """Convert uploaded image to base64 data URL"""
+    try:
+        image_bytes = image_file.getvalue()
+        mime_type, _ = mimetypes.guess_type(image_file.name)
+        if not mime_type:
+            ext = os.path.splitext(image_file.name)[1].lower()
+            mime_map = {
+                '.jpg': 'image/jpeg',
+                '.jpeg': 'image/jpeg',
+                '.png': 'image/png',
+                '.gif': 'image/gif',
+                '.svg': 'image/svg+xml',
+                '.webp': 'image/webp',
+                '.bmp': 'image/bmp'
+            }
+            mime_type = mime_map.get(ext, 'image/png')
+        
+        b64_data = base64.b64encode(image_bytes).decode('utf-8')
+        data_url = f"data:{mime_type};base64,{b64_data}"
+        return data_url
+    except Exception as e:
+        st.error(f"Error converting {image_file.name} to base64: {str(e)}")
+        return None
+
+def embed_images_as_base64(html_content, uploaded_images):
+    """Embed all images directly as base64 data URLs in the HTML"""
+    if not uploaded_images:
+        return html_content, {}
+    
+    image_data_urls = {}
+    for img in uploaded_images:
+        data_url = image_to_base64(img)
+        if data_url:
+            image_data_urls[img.name] = data_url
+            st.write(f"✓ Converted {img.name} to base64 ({len(data_url)} chars)")
+    
+    if not image_data_urls:
+        return html_content, {}
+    
+    replacements = {}
+    
+    for filename, data_url in image_data_urls.items():
+        escaped_name = re.escape(filename)
+        
+        # Pattern 1: img src attribute
+        pattern1 = rf'(<img[^>]*\s+src\s*=\s*)(["\'])(?:[^"\']*?/)?{escaped_name}\2'
+        matches1 = list(re.finditer(pattern1, html_content, flags=re.IGNORECASE | re.DOTALL))
+        count1 = len(matches1)
+        if matches1:
+            html_content = re.sub(pattern1, rf'\1\2{data_url}\2', html_content, flags=re.IGNORECASE | re.DOTALL)
+            replacements[f"{filename} (img src)"] = count1
+        
+        # Pattern 2: background-image
+        pattern2 = rf'(background-image\s*:\s*url\s*\()(["\']?)(?:[^)"\']*/)?{escaped_name}\2(\))'
+        matches2 = list(re.finditer(pattern2, html_content, flags=re.IGNORECASE))
+        count2 = len(matches2)
+        if matches2:
+            html_content = re.sub(pattern2, rf'\1"{data_url}"\3', html_content, flags=re.IGNORECASE)
+            replacements[f"{filename} (bg-image)"] = count2
+        
+        # Pattern 3: CSS url()
+        pattern3 = rf'(url\s*\()(["\']?)(?:[^)"\']*/)?{escaped_name}\2(\))'
+        matches3 = list(re.finditer(pattern3, html_content, flags=re.IGNORECASE))
+        count3 = len(matches3)
+        if matches3:
+            html_content = re.sub(pattern3, rf'\1"{data_url}"\3', html_content, flags=re.IGNORECASE)
+            replacements[f"{filename} (url)"] = count3
+    
+    if replacements:
+        st.success("✅ Image Replacements:")
+        for key, count in replacements.items():
+            st.write(f"  • {key}: {count} replacement(s)")
+    else:
+        st.warning("⚠️ No image references found in HTML matching uploaded files!")
+        st.write("Uploaded files:", [img.name for img in uploaded_images])
+        
+        with st.expander("🔍 Debug: Show HTML image references"):
+            img_lines = [line for line in html_content.split('\n') 
+                        if any(k in line.lower() for k in ['<img', 'src=', 'url(', 'background'])]
+            if img_lines:
+                for line in img_lines[:10]:
+                    st.code(line.strip(), language='html')
+            else:
+                st.write("No image-related lines found in HTML")
+    
+    return html_content, replacements
+
+def inject_page_breaks(html_content: str, aspect_ratio: str):
+    """Automatically inject page breaks and page sizing CSS"""
+    
+    # Determine page orientation
+    if aspect_ratio == "16:9":
+        page_size = "A4 landscape"
+        orientation = "landscape"
+    elif aspect_ratio == "1:1":
+        page_size = "210mm 210mm"
+        orientation = "portrait"
+    else:  # 9:16
+        page_size = "A4 portrait"
+        orientation = "portrait"
+    
+    # Comprehensive page break CSS
+    page_css = f"""
+    <style id="auto-page-breaks">
+        /* Define page size */
+        @page {{
+            size: {page_size};
+            margin: 0;
+        }}
+        
+        /* Reset body */
+        html, body {{
+            margin: 0 !important;
+            padding: 0 !important;
+            width: 100% !important;
+            height: 100% !important;
+        }}
+        
+        /* Page containers - each should be one page */
+        .page, .slide, section.page, article.page, div[class*="page"], div[class*="slide"] {{
+            width: 100% !important;
+            min-height: 100vh !important;
+            height: 100vh !important;
+            page-break-after: always !important;
+            break-after: page !important;
+            page-break-inside: avoid !important;
+            break-inside: avoid !important;
+            position: relative !important;
+            box-sizing: border-box !important;
+            overflow: hidden !important;
+        }}
+        
+        /* Last page shouldn't force a break */
+        .page:last-child, .slide:last-child,
+        section.page:last-child, article.page:last-child {{
+            page-break-after: auto !important;
+            break-after: auto !important;
+        }}
+        
+        /* If no explicit page class, treat direct body children as pages */
+        body > section:not(.no-page-break),
+        body > article:not(.no-page-break),
+        body > div:not(.no-page-break) {{
+            page-break-after: always !important;
+            break-after: page !important;
+            min-height: 100vh;
+        }}
+        
+        body > section:last-child,
+        body > article:last-child,
+        body > div:last-child {{
+            page-break-after: auto !important;
+        }}
+        
+        /* Utility classes for manual control */
+        .page-break, .page-break-after {{
+            page-break-after: always !important;
+            break-after: page !important;
+        }}
+        
+        .page-break-before {{
+            page-break-before: always !important;
+            break-before: page !important;
+        }}
+        
+        .no-page-break, .keep-together {{
+            page-break-inside: avoid !important;
+            break-inside: avoid !important;
+        }}
+        
+        /* Prevent awkward breaks in content */
+        h1, h2, h3, h4, h5, h6 {{
+            page-break-after: avoid !important;
+            break-after: avoid !important;
+            page-break-inside: avoid !important;
+            break-inside: avoid !important;
+        }}
+        
+        img, figure, table, pre, blockquote {{
+            page-break-inside: avoid !important;
+            break-inside: avoid !important;
+        }}
+        
+        /* Preserve colors and backgrounds */
+        * {{
+            -webkit-print-color-adjust: exact !important;
+            print-color-adjust: exact !important;
+            color-adjust: exact !important;
+        }}
+    </style>
+    """
+    
+    # Inject CSS into HTML
+    if '</head>' in html_content:
+        html_content = html_content.replace('</head>', page_css + '</head>')
+    elif '<body' in html_content:
+        html_content = html_content.replace('<body', page_css + '<body', 1)
+    else:
+        html_content = page_css + html_content
+    
+    return html_content
+
+def render_html_preview(html_content):
+    """Render HTML preview in an iframe"""
+    b64 = base64.b64encode(html_content.encode()).decode()
+    iframe_html = f'<iframe src="data:text/html;base64,{b64}" width="100%" height="600" style="border: 2px solid #ddd; border-radius: 5px;"></iframe>'
+    return iframe_html
+
+def render_pdf_preview(pdf_bytes):
+    """Render PDF preview using embedded PDF.js"""
+    b64 = base64.b64encode(pdf_bytes).decode()
+    
+    pdf_viewer_html = f'''
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <style>
+            body {{
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+                background: #525659;
+            }}
+            #pdf-container {{
+                width: 100%;
+                height: 100vh;
+                overflow: auto;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                padding: 20px;
+                box-sizing: border-box;
+            }}
+            canvas {{
+                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+                margin-bottom: 10px;
+                background: white;
+            }}
+            #loading {{
+                color: white;
+                font-family: Arial, sans-serif;
+                font-size: 18px;
+                padding: 20px;
+            }}
+        </style>
+    </head>
+    <body>
+        <div id="pdf-container">
+            <div id="loading">Loading PDF...</div>
+        </div>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
+        <script>
+            pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
+            const pdfData = atob('{b64}');
+            const pdfContainer = document.getElementById('pdf-container');
+            const loading = document.getElementById('loading');
+            const uint8Array = new Uint8Array(pdfData.length);
+            for (let i = 0; i < pdfData.length; i++) {{
+                uint8Array[i] = pdfData.charCodeAt(i);
+            }}
+            pdfjsLib.getDocument({{data: uint8Array}}).promise.then(function(pdf) {{
+                loading.style.display = 'none';
+                const numPages = pdf.numPages;
+                const promises = [];
+                for (let pageNum = 1; pageNum <= numPages; pageNum++) {{
+                    promises.push(
+                        pdf.getPage(pageNum).then(function(page) {{
+                            const scale = 1.5;
+                            const viewport = page.getViewport({{scale: scale}});
+                            const canvas = document.createElement('canvas');
+                            const context = canvas.getContext('2d');
+                            canvas.height = viewport.height;
+                            canvas.width = viewport.width;
+                            pdfContainer.appendChild(canvas);
+                            return page.render({{
+                                canvasContext: context,
+                                viewport: viewport
+                            }}).promise;
+                        }})
+                    );
+                }}
+                return Promise.all(promises);
+            }}).catch(function(error) {{
+                loading.innerHTML = '<div style="color:#ff6b6b;">Error: ' + error.message + '</div>';
+            }});
+        </script>
+    </body>
+    </html>
+    '''
+    return pdf_viewer_html
+
+def convert_html_to_pdf(html_content, aspect_ratio, temp_dir):
+    """Convert HTML content to PDF using Puppeteer with proper page breaks"""
+    try:
+        # Step 1: Inject page break CSS
+        st.write("🔧 Injecting page break CSS...")
+        html_content = inject_page_breaks(html_content, aspect_ratio)
+        
+        # Save HTML to temp file
+        html_file = os.path.join(temp_dir, "input.html")
+        with open(html_file, 'w', encoding='utf-8') as f:
+            f.write(html_content)
+        
+        st.write(f"📝 Saved HTML: {os.path.getsize(html_file):,} bytes")
+        
+        # Find puppeteer script
+        script_dir = os.path.dirname(os.path.abspath(__file__))
+        possible_paths = [
+            os.path.join(os.path.dirname(script_dir), 'puppeteer_pdf.js'),
+            os.path.join(script_dir, 'puppeteer_pdf.js'),
+            os.path.join(script_dir, '..', 'puppeteer_pdf.js'),
+            'puppeteer_pdf.js'
+        ]
+        
+        puppeteer_script = None
+        for path in possible_paths:
+            if os.path.exists(path):
+                puppeteer_script = path
+                break
+        
+        if not puppeteer_script:
+            return None, "Error: puppeteer_pdf.js not found"
+        
+        st.write(f"🔧 Using Puppeteer: {puppeteer_script}")
+        
+        # Run conversion
+        result = subprocess.run(
+            ['node', puppeteer_script, html_file, aspect_ratio],
+            capture_output=True,
+            text=True,
+            timeout=60,
+            cwd=os.path.dirname(os.path.abspath(puppeteer_script))
+        )
+        
+        if result.returncode != 0:
+            return None, f"PDF conversion failed: {result.stderr}"
+        
+        # Read PDF
+        pdf_file = html_file.replace('.html', '.pdf')
+        if not os.path.exists(pdf_file):
+            return None, "PDF file was not generated"
+        
+        with open(pdf_file, 'rb') as f:
+            pdf_bytes = f.read()
+        
+        st.write(f"✅ PDF generated: {len(pdf_bytes):,} bytes")
+        return pdf_bytes, None
+        
+    except subprocess.TimeoutExpired:
+        return None, "Error: PDF conversion timed out (60 seconds)"
+    except Exception as e:
+        return None, f"Error: {str(e)}"
+
+# Main UI
+st.title("📄 HTML to PDF Converter")
+st.markdown("""
+Convert HTML to PDF with **proper page breaks** and **embedded base64 images**!  
+✨ Each page in your HTML will be preserved as a separate PDF page.
+""")
+
+# Create tabs
+tab1, tab2 = st.tabs(["📤 Upload HTML File", "📝 Paste HTML Code"])
+
+# Tab 1: Upload HTML File
+with tab1:
+    uploaded_file = st.file_uploader(
+        "Choose an HTML file",
+        type=['html', 'htm'],
+        key="file_uploader",
+        help="Upload an HTML file"
+    )
+    
+    uploaded_images = st.file_uploader(
+        "📷 Upload Images",
+        type=['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp'],
+        key="image_uploader",
+        help="Upload images - they will be embedded as base64 in the HTML",
+        accept_multiple_files=True
+    )
+    
+    if uploaded_images:
+        st.success(f"✅ {len(uploaded_images)} image(s) uploaded")
+        with st.expander("View uploaded images"):
+            cols = st.columns(min(len(uploaded_images), 4))
+            for idx, img in enumerate(uploaded_images):
+                with cols[idx % 4]:
+                    st.image(img, caption=img.name, use_container_width=True)
+    
+    if uploaded_file:
+        st.success(f"✅ File: {uploaded_file.name}")
+        
+        uploaded_file.seek(0)
+        try:
+            html_content = uploaded_file.getvalue().decode('utf-8')
+        except UnicodeDecodeError:
+            uploaded_file.seek(0)
+            html_content = uploaded_file.getvalue().decode('latin-1')
+        
+        detected_ratio = detect_aspect_ratio(html_content)
+        
+        col1, col2 = st.columns([1, 1])
+        
+        with col1:
+            st.subheader("⚙️ Settings")
+            auto_detect = st.checkbox("Auto-detect aspect ratio", value=True, key="auto_file")
+            
+            if auto_detect:
+                aspect_ratio = detected_ratio
+                st.info(f"🔍 Detected: **{detected_ratio}**")
+            else:
+                aspect_ratio = st.radio(
+                    "Aspect Ratio",
+                    options=["16:9", "1:1", "9:16"],
+                    index=["16:9", "1:1", "9:16"].index(detected_ratio),
+                    key="aspect_file"
+                )
+            
+            convert_btn = st.button("🔄 Convert to PDF", key="conv_file", type="primary", use_container_width=True)
+        
+        with col2:
+            st.subheader("👁️ Preview")
+            with st.expander("Show HTML"):
+                st.components.v1.html(render_html_preview(html_content), height=400, scrolling=True)
+        
+        if convert_btn:
+            temp_dir = None
+            try:
+                with st.spinner("Converting..."):
+                    temp_dir = tempfile.mkdtemp()
+                    
+                    # Embed images as base64
+                    processed_html = html_content
+                    if uploaded_images:
+                        with st.expander("🖼️ Image Processing", expanded=True):
+                            processed_html, replacements = embed_images_as_base64(html_content, uploaded_images)
+                            
+                            if not replacements:
+                                st.warning("⚠️ Images uploaded but no matches found in HTML!")
+                                st.write("**Tip:** Make sure image filenames in HTML match uploaded files exactly")
+                    
+                    # Convert to PDF
+                    pdf_bytes, error = convert_html_to_pdf(processed_html, aspect_ratio, temp_dir)
+                    
+                    if error:
+                        st.error(f"❌ {error}")
+                    else:
+                        st.success("✅ PDF generated with proper page breaks!")
+                        
+                        output_name = uploaded_file.name.replace('.html', '.pdf').replace('.htm', '.pdf')
+                        if not output_name.endswith('.pdf'):
+                            output_name += '.pdf'
+                        
+                        col_a, col_b = st.columns(2)
+                        with col_a:
+                            st.download_button(
+                                "⬇️ Download PDF",
+                                data=pdf_bytes,
+                                file_name=output_name,
+                                mime="application/pdf",
+                                use_container_width=True
+                            )
+                        with col_b:
+                            st.info(f"Size: {len(pdf_bytes):,} bytes")
+                        
+                        st.subheader("📄 PDF Preview")
+                        st.components.v1.html(render_pdf_preview(pdf_bytes), height=600, scrolling=True)
+            except Exception as e:
+                st.error(f"❌ Error: {str(e)}")
+            finally:
+                if temp_dir and os.path.exists(temp_dir):
+                    shutil.rmtree(temp_dir, ignore_errors=True)
+
+# Tab 2: Paste HTML
+with tab2:
+    html_code = st.text_area(
+        "HTML Content",
+        value="""<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {
+            font-family: Arial;
+            margin: 0;
+            padding: 0;
+        }
+        .page {
+            width: 100%;
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            padding: 40px;
+        }
+        .page:nth-child(1) {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .page:nth-child(2) {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            color: white;
+        }
+        .page:nth-child(3) {
+            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            color: white;
+        }
+        h1 { font-size: 48px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
+    </style>
+</head>
+<body>
+    <div class="page">
+        <h1>Page 1: Hello PDF! 🌍</h1>
+    </div>
+    
+    <div class="page">
+        <h1>Page 2: Separate Page! 📄</h1>
+    </div>
+    
+    <div class="page">
+        <h1>Page 3: Final Page! ✨</h1>
+    </div>
+</body>
+</html>""",
+        height=400,
+        key="html_code"
+    )
+    
+    uploaded_images_text = st.file_uploader(
+        "📷 Upload Images",
+        type=['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp'],
+        key="image_text",
+        help="Upload images to embed in your HTML",
+        accept_multiple_files=True
+    )
+    
+    if uploaded_images_text:
+        st.success(f"✅ {len(uploaded_images_text)} image(s) uploaded")
+        with st.expander("View images"):
+            cols = st.columns(min(len(uploaded_images_text), 4))
+            for idx, img in enumerate(uploaded_images_text):
+                with cols[idx % 4]:
+                    st.image(img, caption=img.name, use_container_width=True)
+    
+    if html_code.strip():
+        detected_ratio_text = detect_aspect_ratio(html_code)
+        auto_detect_text = st.checkbox("Auto-detect aspect ratio", value=True, key="auto_text")
+        
+        if auto_detect_text:
+            aspect_ratio_text = detected_ratio_text
+            st.info(f"🔍 Detected: **{detected_ratio_text}**")
+        else:
+            aspect_ratio_text = st.radio(
+                "Aspect Ratio",
+                options=["16:9", "1:1", "9:16"],
+                index=["16:9", "1:1", "9:16"].index(detected_ratio_text),
+                key="aspect_text"
+            )
+        
+        convert_text_btn = st.button("🔄 Convert", key="conv_text", type="primary", use_container_width=True)
+        
+        if convert_text_btn:
+            temp_dir = None
+            try:
+                with st.spinner("Converting..."):
+                    temp_dir = tempfile.mkdtemp()
+                    
+                    processed_html = html_code
+                    if uploaded_images_text:
+                        with st.expander("🖼️ Image Processing", expanded=True):
+                            processed_html, replacements = embed_images_as_base64(html_code, uploaded_images_text)
+                            
+                            if not replacements:
+                                st.warning("⚠️ Images uploaded but no matches found!")
+                    
+                    pdf_bytes, error = convert_html_to_pdf(processed_html, aspect_ratio_text, temp_dir)
+                    
+                    if error:
+                        st.error(f"❌ {error}")
+                    else:
+                        st.success("✅ PDF generated with proper page breaks!")
+                        
+                        col_a, col_b = st.columns(2)
+                        with col_a:
+                            st.download_button(
+                                "⬇️ Download PDF",
+                                data=pdf_bytes,
+                                file_name="converted.pdf",
+                                mime="application/pdf",
+                                use_container_width=True
+                            )
+                        with col_b:
+                            st.info(f"Size: {len(pdf_bytes):,} bytes")
+                        
+                        st.subheader("📄 PDF Preview")
+                        st.components.v1.html(render_pdf_preview(pdf_bytes), height=600, scrolling=True)
+            except Exception as e:
+                st.error(f"❌ Error: {str(e)}")
+            finally:
+                if temp_dir and os.path.exists(temp_dir):
+                    shutil.rmtree(temp_dir, ignore_errors=True)
+
+# Footer
+st.markdown("---")
+st.markdown("""
+### 💡 How Page Breaks Work:
+
+**Automatic Page Detection:**
+- Elements with class `page`, `slide`, or `section.page` are treated as separate pages
+- Each page automatically gets `page-break-after: always` CSS
+- Last page won't have a trailing break
+
+**HTML Structure for Multiple Pages:**
+```html
+<div class="page">Page 1 content</div>
+<div class="page">Page 2 content</div>
+<div class="page">Page 3 content</div>
+```
+
+**Manual Page Breaks:**
+- Add class `page-break` to force a break after an element
+- Add class `page-break-before` to force a break before an element
+- Add class `no-page-break` to prevent breaks inside an element
+
+**Image Embedding:**
+- Images are converted to base64 and embedded directly in HTML
+- Ensures images always appear in the PDF
+- Filename in HTML must match uploaded file exactly
+
+### 📝 Example HTML:
+```html
+<!DOCTYPE html>
+<html>
+<body>
+    <div class="page">
+        <h1>First Page</h1>
+        <img src="logo.png" alt="Logo">
+    </div>
+    
+    <div class="page">
+        <h1>Second Page</h1>
+        <p>Content here...</p>
+    </div>
+</body>
+</html>
+```
+Then upload a file named: `logo.png`
+""")