Update src/streamlit_app.py

src/streamlit_app.py

@@ -4,6 +4,8 @@ import os
 import tempfile
 import shutil
 from pathlib import Path
+import base64
+import re
 
 st.set_page_config(
     page_title="HTML to PDF Converter",
@@ -11,9 +13,74 @@ st.set_page_config(
     layout="wide"
 )
 
+def detect_aspect_ratio(html_content):
+    """
+    Detect aspect ratio from HTML content
+    Returns: "16:9", "1:1", or "9:16"
+    """
+    # Check for viewport meta tag
+    viewport_match = re.search(r'<meta[^>]*viewport[^>]*content=["\']([^"\']*)["\']', html_content, re.IGNORECASE)
+    if viewport_match:
+        viewport = viewport_match.group(1).lower()
+        if 'width=device-width' in viewport or 'width=100%' in viewport:
+            # Check for orientation hints
+            if 'orientation=portrait' in viewport:
+                return "9:16"
+            elif 'orientation=landscape' in viewport:
+                return "16:9"
+    
+    # Check for CSS aspect-ratio property
+    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"
+    
+    # Check for common presentation frameworks
+    if any(keyword in html_content.lower() for keyword in ['reveal.js', 'impress.js', 'slide', 'presentation']):
+        return "16:9"
+    
+    # Check body style for width/height hints
+    body_match = re.search(r'<body[^>]*style=["\']([^"\']*)["\']', html_content, re.IGNORECASE)
+    if body_match:
+        style = body_match.group(1).lower()
+        if 'width' in style and 'height' in style:
+            width_match = re.search(r'width\s*:\s*(\d+)', style)
+            height_match = re.search(r'height\s*:\s*(\d+)', style)
+            if width_match and height_match:
+                w = int(width_match.group(1))
+                h = int(height_match.group(1))
+                ratio = w / h
+                if ratio > 1.5:
+                    return "16:9"
+                elif ratio < 0.7:
+                    return "9:16"
+    
+    # Default to A4 portrait for documents
+    return "9:16"
+
+def render_html_preview(html_content):
+    """Render HTML preview in an iframe"""
+    # Encode HTML content
+    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"""
+    b64 = base64.b64encode(pdf_bytes).decode()
+    pdf_display = f'<iframe src="data:application/pdf;base64,{b64}" width="100%" height="600" style="border: 2px solid #ddd; border-radius: 5px;" type="application/pdf"></iframe>'
+    return pdf_display
+
 def convert_html_to_pdf(html_content, aspect_ratio):
     """
-    Convert HTML content to PDF using Puppeteer
+    Convert HTML content to PDF using Puppeteer with better styling preservation
     
     Args:
         html_content: String containing HTML content
@@ -27,12 +94,38 @@ def convert_html_to_pdf(html_content, aspect_ratio):
         # Create temporary directory for processing
         temp_dir = tempfile.mkdtemp()
         
+        # Inject CSS to preserve styles better
+        style_injection = """
+        <style>
+            @page {
+                margin: 0;
+            }
+            * {
+                -webkit-print-color-adjust: exact !important;
+                print-color-adjust: exact !important;
+                color-adjust: exact !important;
+            }
+            body {
+                -webkit-print-color-adjust: exact !important;
+                print-color-adjust: exact !important;
+            }
+        </style>
+        """
+        
+        # Insert style injection before closing head tag or at the start of body
+        if '</head>' in html_content:
+            html_content = html_content.replace('</head>', style_injection + '</head>')
+        elif '<body' in html_content:
+            html_content = html_content.replace('<body', style_injection + '<body', 1)
+        else:
+            html_content = style_injection + html_content
+        
         # Save HTML content to temporary file
         html_file = os.path.join(temp_dir, "input.html")
         with open(html_file, 'w', encoding='utf-8') as f:
             f.write(html_content)
         
-        # Get the path to puppeteer_pdf.js (it's in parent directory)
+        # Get the path to puppeteer_pdf.js
         script_dir = os.path.dirname(os.path.abspath(__file__))
         puppeteer_script = os.path.join(os.path.dirname(script_dir), 'puppeteer_pdf.js')
         
@@ -75,8 +168,8 @@ def convert_html_to_pdf(html_content, aspect_ratio):
 # Page header
 st.title("📄 HTML to PDF Converter")
 st.markdown("""
-Convert HTML files or HTML code to PDF using Puppeteer.  
-Supports multiple aspect ratios: **16:9** (landscape), **1:1** (square), and **9:16** (portrait).
+Convert HTML files or HTML code to PDF using Puppeteer with automatic aspect ratio detection.  
+Preserves styles, fonts, colors, and layout.
 """)
 
 # Create tabs
@@ -84,77 +177,95 @@ tab1, tab2 = st.tabs(["📤 Upload HTML File", "📝 Paste HTML Code"])
 
 # Tab 1: Upload HTML File
 with tab1:
-    col1, col2 = st.columns([1, 1])
+    uploaded_file = st.file_uploader(
+        "Choose an HTML file",
+        type=['html', 'htm'],
+        key="file_uploader",
+        help="Upload an HTML file (max 200MB)",
+        accept_multiple_files=False
+    )
     
-    with col1:
-        uploaded_file = st.file_uploader(
-            "Choose an HTML file",
-            type=['html', 'htm'],
-            key="file_uploader",
-            help="Upload an HTML file (max 200MB)",
-            accept_multiple_files=False
-        )
+    if uploaded_file is not None:
+        st.success(f"✅ File uploaded: {uploaded_file.name} ({uploaded_file.size:,} bytes)")
         
-        # Display file info if uploaded
-        if uploaded_file is not None:
-            st.info(f"📁 File: {uploaded_file.name} ({uploaded_file.size} bytes)")
+        # Read file content
+        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')
         
-        aspect_ratio_file = st.radio(
-            "Aspect Ratio",
-            options=["16:9", "1:1", "9:16"],
-            index=0,
-            key="aspect_file",
-            help="Select the page orientation and dimensions"
-        )
+        # Auto-detect aspect ratio
+        detected_ratio = detect_aspect_ratio(html_content)
         
-        convert_file_btn = st.button("🔄 Convert to PDF", key="convert_file", type="primary", use_container_width=True, disabled=(uploaded_file is None))
-    
-    with col2:
-        if convert_file_btn and uploaded_file is not None:
-            try:
-                with st.spinner("Converting HTML to PDF..."):
-                    # Reset file pointer to beginning
-                    uploaded_file.seek(0)
+        col1, col2 = st.columns([1, 1])
+        
+        with col1:
+            st.subheader("⚙️ Settings")
+            
+            auto_detect = st.checkbox("Auto-detect aspect ratio", value=True, key="auto_detect_file")
+            
+            if auto_detect:
+                aspect_ratio_file = detected_ratio
+                st.info(f"🔍 Detected: **{detected_ratio}**")
+            else:
+                aspect_ratio_file = st.radio(
+                    "Aspect Ratio",
+                    options=["16:9", "1:1", "9:16"],
+                    index=["16:9", "1:1", "9:16"].index(detected_ratio),
+                    key="aspect_file",
+                    help="Select the page orientation and dimensions"
+                )
+            
+            st.markdown(f"""
+            **Selected: {aspect_ratio_file}**
+            - 16:9 = Landscape (297mm × 210mm)
+            - 1:1 = Square (210mm × 210mm)
+            - 9:16 = Portrait (210mm × 297mm)
+            """)
+            
+            convert_file_btn = st.button("🔄 Convert to PDF", key="convert_file", type="primary", use_container_width=True)
+        
+        with col2:
+            st.subheader("👁️ HTML Preview")
+            with st.expander("Show HTML Preview", expanded=False):
+                st.components.v1.html(render_html_preview(html_content), height=600, scrolling=True)
+        
+        # Conversion section
+        if convert_file_btn:
+            with st.spinner("Converting HTML to PDF..."):
+                pdf_bytes, error = convert_html_to_pdf(html_content, aspect_ratio_file)
+                
+                if error:
+                    st.error(f"❌ {error}")
+                    with st.expander("Show error details"):
+                        st.code(error)
+                else:
+                    st.success("✅ PDF generated successfully!")
                     
-                    # Read uploaded file with proper encoding handling
-                    try:
-                        html_content = uploaded_file.getvalue().decode('utf-8')
-                    except UnicodeDecodeError:
-                        # Try with latin-1 encoding if utf-8 fails
-                        uploaded_file.seek(0)
-                        html_content = uploaded_file.getvalue().decode('latin-1')
+                    col_a, col_b = st.columns([1, 1])
                     
-                    if not html_content or len(html_content.strip()) == 0:
-                        st.error("The uploaded file is empty.")
-                    else:
-                        # Convert to PDF
-                        pdf_bytes, error = convert_html_to_pdf(html_content, aspect_ratio_file)
+                    with col_a:
+                        output_filename = uploaded_file.name.replace('.html', '.pdf').replace('.htm', '.pdf')
+                        if not output_filename.endswith('.pdf'):
+                            output_filename += '.pdf'
                         
-                        if error:
-                            st.error(f"❌ {error}")
-                            with st.expander("Show error details"):
-                                st.code(error)
-                        else:
-                            st.success("✅ PDF generated successfully!")
-                            
-                            # Download button with PDF bytes
-                            output_filename = uploaded_file.name.replace('.html', '.pdf').replace('.htm', '.pdf')
-                            if not output_filename.endswith('.pdf'):
-                                output_filename += '.pdf'
-                            
-                            st.download_button(
-                                label="⬇️ Download PDF",
-                                data=pdf_bytes,
-                                file_name=output_filename,
-                                mime="application/pdf",
-                                use_container_width=True,
-                                key="download_file_pdf"
-                            )
-            except Exception as e:
-                st.error(f"❌ Error processing file: {str(e)}")
-                with st.expander("Show full error"):
-                    import traceback
-                    st.code(traceback.format_exc())
+                        st.download_button(
+                            label="⬇️ Download PDF",
+                            data=pdf_bytes,
+                            file_name=output_filename,
+                            mime="application/pdf",
+                            use_container_width=True,
+                            key="download_file_pdf"
+                        )
+                    
+                    with col_b:
+                        st.info(f"📦 Size: {len(pdf_bytes):,} bytes")
+                    
+                    # PDF Preview
+                    st.subheader("📄 PDF Preview")
+                    st.components.v1.html(render_pdf_preview(pdf_bytes), height=600, scrolling=True)
 
 # Tab 2: Paste HTML Code
 with tab2:
@@ -177,63 +288,99 @@ with tab2:
         h1 {
             font-size: 48px;
             margin-bottom: 20px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
         }
         p {
             font-size: 18px;
             line-height: 1.6;
         }
+        .box {
+            background: rgba(255,255,255,0.1);
+            padding: 20px;
+            border-radius: 10px;
+            margin-top: 20px;
+        }
     </style>
 </head>
 <body>
     <h1>Hello, PDF World! 🌍</h1>
     <p>This is a sample HTML document converted to PDF.</p>
-    <p>You can customize this HTML with your own content!</p>
+    <div class="box">
+        <p>✨ Styles, colors, and gradients are preserved!</p>
+    </div>
 </body>
 </html>""",
             height=400,
             key="html_code"
         )
         
-        aspect_ratio_text = st.radio(
-            "Aspect Ratio",
-            options=["16:9", "1:1", "9:16"],
-            index=0,
-            key="aspect_text",
-            help="Select the page orientation and dimensions"
-        )
-        
-        convert_text_btn = st.button("🔄 Convert to PDF", key="convert_text", type="primary", use_container_width=True)
+        if html_code and html_code.strip():
+            # Auto-detect aspect ratio
+            detected_ratio_text = detect_aspect_ratio(html_code)
+            
+            auto_detect_text = st.checkbox("Auto-detect aspect ratio", value=True, key="auto_detect_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",
+                    help="Select the page orientation and dimensions"
+                )
+            
+            convert_text_btn = st.button("🔄 Convert to PDF", key="convert_text", type="primary", use_container_width=True)
+        else:
+            convert_text_btn = False
     
     with col2:
-        if convert_text_btn:
-            if html_code and html_code.strip():
-                with st.spinner("Converting HTML to PDF..."):
-                    # Convert to PDF
-                    pdf_bytes, error = convert_html_to_pdf(html_code, aspect_ratio_text)
-                    
-                    if error:
-                        st.error(error)
-                    else:
-                        st.success("✅ PDF generated successfully!")
-                        
-                        # Download button with PDF bytes
-                        st.download_button(
-                            label="⬇️ Download PDF",
-                            data=pdf_bytes,
-                            file_name="converted.pdf",
-                            mime="application/pdf",
-                            use_container_width=True
-                        )
+        if html_code and html_code.strip():
+            st.subheader("👁️ HTML Preview")
+            with st.expander("Show HTML Preview", expanded=False):
+                st.components.v1.html(render_html_preview(html_code), height=600, scrolling=True)
+    
+    if convert_text_btn and html_code and html_code.strip():
+        with st.spinner("Converting HTML to PDF..."):
+            pdf_bytes, error = convert_html_to_pdf(html_code, aspect_ratio_text)
+            
+            if error:
+                st.error(f"❌ {error}")
+                with st.expander("Show error details"):
+                    st.code(error)
             else:
-                st.warning("Please enter HTML content first.")
+                st.success("✅ PDF generated successfully!")
+                
+                col_a, col_b = st.columns([1, 1])
+                
+                with col_a:
+                    st.download_button(
+                        label="⬇️ Download PDF",
+                        data=pdf_bytes,
+                        file_name="converted.pdf",
+                        mime="application/pdf",
+                        use_container_width=True,
+                        key="download_text_pdf"
+                    )
+                
+                with col_b:
+                    st.info(f"📦 Size: {len(pdf_bytes):,} bytes")
+                
+                # PDF Preview
+                st.subheader("📄 PDF Preview")
+                st.components.v1.html(render_pdf_preview(pdf_bytes), height=600, scrolling=True)
 
 # Footer with tips
 st.markdown("---")
 st.markdown("""
 ### 💡 Tips:
+- **Auto-detection** analyzes your HTML to suggest the best aspect ratio
 - **16:9** - Best for presentations and landscape documents (297mm × 210mm)
 - **1:1** - Square format (210mm × 210mm)
 - **9:16** - Portrait format, standard A4 (210mm × 297mm)
-- Include inline CSS for styling
+- All CSS styles, colors, gradients, and fonts are preserved
+- Use inline CSS or `<style>` tags for best results
 - External resources should use absolute URLs
 """)