Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,3 +1,7 @@
+"""
+Streamlit HTML to PDF Converter with Image Support
+Save this file as: src/streamlit_app.py
+"""
 import streamlit as st
 import subprocess
 import os
@@ -23,7 +27,6 @@ def detect_aspect_ratio(html_content):
     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:
@@ -46,27 +49,14 @@ def detect_aspect_ratio(html_content):
     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
+    # Default to A4 portrait
     return "9:16"
 
 def save_uploaded_images(images, temp_dir):
     """Save uploaded images and return mapping"""
+    if not images:
+        return {}
+    
     image_mapping = {}
     images_dir = os.path.join(temp_dir, "images")
     os.makedirs(images_dir, exist_ok=True)
@@ -77,81 +67,104 @@ def save_uploaded_images(images, temp_dir):
         with open(image_path, 'wb') as f:
             f.write(image.getvalue())
         
-        # Create mapping
+        # Create mapping - use relative path from temp_dir
         image_mapping[image.name] = f"images/{image.name}"
-        print(f"Saved image: {image.name} -> {image_path}")
+        print(f"✓ Saved image: {image.name} -> {image_path}")
+        print(f"  File exists: {os.path.exists(image_path)}")
+        print(f"  File size: {os.path.getsize(image_path)} bytes")
     
     return image_mapping
 
 def process_html_with_images(html_content, temp_dir, image_mapping):
     """Process HTML to handle image references with absolute file paths"""
-    import re
+    if not image_mapping:
+        return html_content
     
-    # Store original content for comparison
-    original_content = html_content
     replacements_made = []
+    original_html = html_content
     
     for original_name, relative_path in image_mapping.items():
         # Get absolute path for the image
         absolute_path = os.path.abspath(os.path.join(temp_dir, relative_path))
-        file_url = f"file://{absolute_path}"
+        
+        # Convert to file:// URL with proper escaping
+        # Use forward slashes even on Windows for file:// URLs
+        file_url = f"file://{absolute_path.replace(os.sep, '/')}"
+        
+        print(f"\nProcessing image: {original_name}")
+        print(f"  Absolute path: {absolute_path}")
+        print(f"  File URL: {file_url}")
+        print(f"  File exists: {os.path.exists(absolute_path)}")
         
         # Escape the filename for regex
         escaped_name = re.escape(original_name)
         
-        # Pattern 1: src with any path prefix
-        pattern1 = rf'src=(["\'])(?:[^"\']*?/)?{escaped_name}\1'
-        matches1 = re.findall(pattern1, html_content, flags=re.IGNORECASE)
+        # Pattern 1: src attribute with any path prefix or no prefix
+        pattern1 = rf'src\s*=\s*(["\'])(?:[^"\']*?/)?{escaped_name}\1'
+        matches1 = list(re.finditer(pattern1, html_content, flags=re.IGNORECASE))
+        if matches1:
+            print(f"  Found {len(matches1)} src= matches")
+            for match in matches1:
+                print(f"    - {match.group()}")
         html_content = re.sub(
             pattern1,
             f'src=\\1{file_url}\\1',
             html_content,
             flags=re.IGNORECASE
         )
-        if matches1:
-            replacements_made.append(f"Pattern 1 (src): Found {len(matches1)} matches for {original_name}")
         
-        # Pattern 2: url() with any path prefix  
-        pattern2 = rf'url\((["\']?)(?:[^)"\']*/)?{escaped_name}\1\)'
-        matches2 = re.findall(pattern2, html_content, flags=re.IGNORECASE)
+        # Pattern 2: url() in CSS with any path prefix or no prefix
+        pattern2 = rf'url\s*\(\s*(["\']?)(?:[^)"\']*/)?{escaped_name}\1\s*\)'
+        matches2 = list(re.finditer(pattern2, html_content, flags=re.IGNORECASE))
+        if matches2:
+            print(f"  Found {len(matches2)} url() matches")
+            for match in matches2:
+                print(f"    - {match.group()}")
         html_content = re.sub(
             pattern2,
             f'url("{file_url}")',
             html_content,
             flags=re.IGNORECASE
         )
-        if matches2:
-            replacements_made.append(f"Pattern 2 (url): Found {len(matches2)} matches for {original_name}")
         
-        # Pattern 3: href with any path prefix
-        pattern3 = rf'href=(["\'])(?:[^"\']*?/)?{escaped_name}\1'
-        matches3 = re.findall(pattern3, html_content, flags=re.IGNORECASE)
+        # Pattern 3: href attribute (for linked images)
+        pattern3 = rf'href\s*=\s*(["\'])(?:[^"\']*?/)?{escaped_name}\1'
+        matches3 = list(re.finditer(pattern3, html_content, flags=re.IGNORECASE))
+        if matches3:
+            print(f"  Found {len(matches3)} href= matches")
+            for match in matches3:
+                print(f"    - {match.group()}")
         html_content = re.sub(
             pattern3,
             f'href=\\1{file_url}\\1',
             html_content,
             flags=re.IGNORECASE
         )
-        if matches3:
-            replacements_made.append(f"Pattern 3 (href): Found {len(matches3)} matches for {original_name}")
+        
+        total_matches = len(matches1) + len(matches2) + len(matches3)
+        if total_matches > 0:
+            replacements_made.append(f"{original_name}: {total_matches} replacement(s)")
     
-    # Print debug info
+    # Print summary
     if replacements_made:
-        print("=== Image Replacements Made ===")
+        print("\n=== Image Replacements Summary ===")
         for msg in replacements_made:
             print(f"  ✓ {msg}")
     else:
-        print("=== WARNING: No image replacements made ===")
+        print("\n=== WARNING: No image replacements made ===")
         print(f"Looking for images: {list(image_mapping.keys())}")
-        # Show sample of HTML to debug
-        print("HTML sample (first 500 chars):")
-        print(html_content[:500])
+        # Show lines with image references
+        lines_with_images = [line for line in html_content.split('\n') 
+                            if any(keyword in line.lower() for keyword in ['src=', 'url(', 'href='])]
+        if lines_with_images:
+            print("Lines with potential image references:")
+            for line in lines_with_images[:5]:
+                print(f"  {line.strip()}")
     
     return html_content
 
 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
@@ -302,19 +315,37 @@ def convert_html_to_pdf(html_content, aspect_ratio, temp_dir):
         with open(html_file, 'w', encoding='utf-8') as f:
             f.write(html_content)
         
+        print(f"\nSaved HTML to: {html_file}")
+        print(f"HTML file size: {os.path.getsize(html_file)} bytes")
+        
         # 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')
         
+        # If not found, try current directory
+        if not os.path.exists(puppeteer_script):
+            puppeteer_script = os.path.join(script_dir, 'puppeteer_pdf.js')
+        
+        # If still not found, try one level up
+        if not os.path.exists(puppeteer_script):
+            puppeteer_script = os.path.join(os.path.dirname(script_dir), '..', 'puppeteer_pdf.js')
+        
+        print(f"Using Puppeteer script: {puppeteer_script}")
+        print(f"Script exists: {os.path.exists(puppeteer_script)}")
+        
         # Run Node.js script to convert HTML to PDF
         result = subprocess.run(
             ['node', puppeteer_script, html_file, aspect_ratio],
             capture_output=True,
             text=True,
             timeout=60,
-            cwd=os.path.dirname(script_dir)
+            cwd=os.path.dirname(puppeteer_script)
         )
         
+        print(f"\nPuppeteer stdout: {result.stdout}")
+        if result.stderr:
+            print(f"Puppeteer stderr: {result.stderr}")
+        
         if result.returncode != 0:
             return None, f"PDF conversion failed: {result.stderr}"
         
@@ -328,18 +359,22 @@ def convert_html_to_pdf(html_content, aspect_ratio, temp_dir):
         with open(pdf_file, 'rb') as f:
             pdf_bytes = f.read()
         
+        print(f"PDF generated successfully: {len(pdf_bytes)} bytes")
         return pdf_bytes, None
         
     except subprocess.TimeoutExpired:
         return None, "Error: PDF conversion timed out (60 seconds)"
     except Exception as e:
+        print(f"Error in convert_html_to_pdf: {str(e)}")
+        import traceback
+        traceback.print_exc()
         return None, f"Error: {str(e)}"
 
 # Page header
 st.title("📄 HTML to PDF Converter")
 st.markdown("""
 Convert HTML files or HTML code to PDF using Puppeteer with automatic aspect ratio detection.  
-✨ **NEW:** Upload images alongside your HTML files!
+✨ **With Image Support** - Upload images alongside your HTML files!
 """)
 
 # Create tabs
@@ -360,17 +395,18 @@ with tab1:
         "📷 Upload Images (optional)",
         type=['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp'],
         key="image_uploader",
-        help="Upload images referenced in your HTML",
+        help="Upload images referenced in your HTML. Filename must match exactly what's in your HTML.",
         accept_multiple_files=True
     )
     
     if uploaded_images:
         st.success(f"✅ {len(uploaded_images)} image(s) uploaded")
-        with st.expander("View uploaded images"):
+        with st.expander("View uploaded images", expanded=True):
             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)
+                    st.caption(f"Size: {img.size:,} bytes")
     
     if uploaded_file is not None:
         st.success(f"✅ File uploaded: {uploaded_file.name} ({uploaded_file.size:,} bytes)")
@@ -412,7 +448,7 @@ with tab1:
             - 9:16 = Portrait (210mm × 297mm)
             """)
             
-            convert_file_btn = st.button("🔄 Convert to PDF", key="convert_file", type="primary", width="stretch")
+            convert_file_btn = st.button("🔄 Convert to PDF", key="convert_file", type="primary", use_container_width=True)
         
         with col2:
             st.subheader("👁️ HTML Preview")
@@ -423,44 +459,48 @@ with tab1:
         if convert_file_btn:
             temp_dir = None
             try:
-                with st.spinner("Converting HTML to PDF..."):
+                with st.spinner("🔄 Converting HTML to PDF..."):
                     # Create temp directory
                     temp_dir = tempfile.mkdtemp()
+                    print(f"\n{'='*60}")
+                    print(f"Created temp directory: {temp_dir}")
                     
                     # Process images if uploaded
+                    processed_html = html_content
                     if uploaded_images:
+                        st.info(f"📷 Processing {len(uploaded_images)} image(s)...")
                         image_mapping = save_uploaded_images(uploaded_images, temp_dir)
-                        html_content = process_html_with_images(html_content, temp_dir, image_mapping)
-                        st.info(f"📷 Processed {len(uploaded_images)} image(s)")
-                        # Debug info
-                        with st.expander("🔍 Debug: Image Mapping"):
+                        processed_html = process_html_with_images(html_content, temp_dir, image_mapping)
+                        
+                        # Show debug info
+                        with st.expander("🔍 Debug: Image Processing Details", expanded=False):
                             st.write("**Uploaded Images:**")
                             for img in uploaded_images:
-                                st.text(f"  - {img.name}")
+                                st.text(f"  ✓ {img.name} ({img.size:,} bytes)")
                             
-                            st.write("**Image Paths:**")
-                            for orig, new in image_mapping.items():
-                                full_path = os.path.join(temp_dir, new)
-                                st.text(f"  {orig} -> {new}")
-                                st.text(f"  Full: {full_path}")
-                                st.text(f"  Exists: {os.path.exists(full_path)}")
+                            st.write("\n**Image Mappings:**")
+                            for orig, rel_path in image_mapping.items():
+                                full_path = os.path.join(temp_dir, rel_path)
+                                exists = os.path.exists(full_path)
+                                st.text(f"  {orig}")
+                                st.text(f"    → {rel_path}")
+                                st.text(f"    → Full: {full_path}")
+                                st.text(f"    → Exists: {'✓' if exists else '✗'}")
                             
-                            st.write("**HTML Sample (checking for image references):**")
-                            # Show lines containing 'src=' or 'url('
-                            html_lines = html_content.split('\n')
-                            relevant_lines = [line.strip() for line in html_lines if 'src=' in line.lower() or 'url(' in line.lower()]
-                            if relevant_lines:
-                                for i, line in enumerate(relevant_lines[:10], 1):  # Show first 10
+                            st.write("\n**HTML Image References:**")
+                            html_lines = processed_html.split('\n')
+                            img_lines = [line.strip() for line in html_lines 
+                                        if any(k in line.lower() for k in ['<img', 'src=', 'url('])]
+                            if img_lines:
+                                for line in img_lines[:10]:
                                     st.code(line, language='html')
                             else:
-                                st.warning("No src= or url( found in HTML")
+                                st.warning("⚠️ No image references found in HTML!")
+                    else:
+                        print("No images uploaded")
                     
                     # Convert to PDF
-                    pdf_bytes, error = convert_html_to_pdf(html_content, aspect_ratio_file, temp_dir)
-                    
-                    # Cleanup
-                    if temp_dir:
-                        shutil.rmtree(temp_dir, ignore_errors=True)
+                    pdf_bytes, error = convert_html_to_pdf(processed_html, aspect_ratio_file, temp_dir)
                     
                     if error:
                         st.error(f"❌ {error}")
@@ -481,7 +521,7 @@ with tab1:
                                 data=pdf_bytes,
                                 file_name=output_filename,
                                 mime="application/pdf",
-                                width="stretch",
+                                use_container_width=True,
                                 key="download_file_pdf"
                             )
                         
@@ -491,10 +531,17 @@ with tab1:
                         # PDF Preview
                         st.subheader("📄 PDF Preview")
                         st.components.v1.html(render_pdf_preview(pdf_bytes), height=620, scrolling=True)
+                        
             except Exception as e:
-                if temp_dir:
-                    shutil.rmtree(temp_dir, ignore_errors=True)
                 st.error(f"❌ Error: {str(e)}")
+                with st.expander("Show full error"):
+                    import traceback
+                    st.code(traceback.format_exc())
+            finally:
+                # Cleanup
+                if temp_dir and os.path.exists(temp_dir):
+                    print(f"Cleaning up temp directory: {temp_dir}")
+                    shutil.rmtree(temp_dir, ignore_errors=True)
 
 # Tab 2: Paste HTML Code
 with tab2:
@@ -548,17 +595,18 @@ with tab2:
             "📷 Upload Images (optional)",
             type=['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp'],
             key="image_uploader_text",
-            help="Upload images referenced in your HTML code",
+            help="Upload images referenced in your HTML code. Filename must match exactly what's 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 uploaded images"):
+            with st.expander("View uploaded images", expanded=True):
                 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)
+                        st.caption(f"Size: {img.size:,} bytes")
         
         if html_code and html_code.strip():
             # Auto-detect aspect ratio
@@ -578,7 +626,7 @@ with tab2:
                     help="Select the page orientation and dimensions"
                 )
             
-            convert_text_btn = st.button("🔄 Convert to PDF", key="convert_text", type="primary", width="stretch")
+            convert_text_btn = st.button("🔄 Convert to PDF", key="convert_text", type="primary", use_container_width=True)
         else:
             convert_text_btn = False
     
@@ -591,46 +639,49 @@ with tab2:
     if convert_text_btn and html_code and html_code.strip():
         temp_dir = None
         try:
-            with st.spinner("Converting HTML to PDF..."):
+            with st.spinner("🔄 Converting HTML to PDF..."):
                 # Create temp directory
                 temp_dir = tempfile.mkdtemp()
+                print(f"\n{'='*60}")
+                print(f"Created temp directory: {temp_dir}")
                 
                 # Process images if uploaded
                 processed_html = html_code
                 if uploaded_images_text:
+                    st.info(f"📷 Processing {len(uploaded_images_text)} image(s)...")
                     image_mapping = save_uploaded_images(uploaded_images_text, temp_dir)
                     processed_html = process_html_with_images(html_code, temp_dir, image_mapping)
-                    st.info(f"📷 Processed {len(uploaded_images_text)} image(s)")
-                    # Debug info
-                    with st.expander("🔍 Debug: Image Mapping"):
+                    
+                    # Show debug info
+                    with st.expander("🔍 Debug: Image Processing Details", expanded=False):
                         st.write("**Uploaded Images:**")
                         for img in uploaded_images_text:
-                            st.text(f"  - {img.name}")
+                            st.text(f"  ✓ {img.name} ({img.size:,} bytes)")
                         
-                        st.write("**Image Paths:**")
-                        for orig, new in image_mapping.items():
-                            full_path = os.path.join(temp_dir, new)
-                            st.text(f"  {orig} -> {new}")
-                            st.text(f"  Full: {full_path}")
-                            st.text(f"  Exists: {os.path.exists(full_path)}")
+                        st.write("\n**Image Mappings:**")
+                        for orig, rel_path in image_mapping.items():
+                            full_path = os.path.join(temp_dir, rel_path)
+                            exists = os.path.exists(full_path)
+                            st.text(f"  {orig}")
+                            st.text(f"    → {rel_path}")
+                            st.text(f"    → Full: {full_path}")
+                            st.text(f"    → Exists: {'✓' if exists else '✗'}")
                         
-                        st.write("**HTML Sample (checking for image references):**")
-                        # Show lines containing 'src=' or 'url('
-                        html_lines = html_code.split('\n')
-                        relevant_lines = [line.strip() for line in html_lines if 'src=' in line.lower() or 'url(' in line.lower()]
-                        if relevant_lines:
-                            for i, line in enumerate(relevant_lines[:10], 1):  # Show first 10
+                        st.write("\n**HTML Image References:**")
+                        html_lines = processed_html.split('\n')
+                        img_lines = [line.strip() for line in html_lines 
+                                    if any(k in line.lower() for k in ['<img', 'src=', 'url('])]
+                        if img_lines:
+                            for line in img_lines[:10]:
                                 st.code(line, language='html')
                         else:
-                            st.warning("No src= or url( found in HTML")
+                            st.warning("⚠️ No image references found in HTML!")
+                else:
+                    print("No images uploaded")
                 
                 # Convert to PDF
                 pdf_bytes, error = convert_html_to_pdf(processed_html, aspect_ratio_text, temp_dir)
                 
-                # Cleanup
-                if temp_dir:
-                    shutil.rmtree(temp_dir, ignore_errors=True)
-                
                 if error:
                     st.error(f"❌ {error}")
                     with st.expander("Show error details"):
@@ -646,7 +697,7 @@ with tab2:
                             data=pdf_bytes,
                             file_name="converted.pdf",
                             mime="application/pdf",
-                            width="stretch",
+                            use_container_width=True,
                             key="download_text_pdf"
                         )
                     
@@ -656,10 +707,17 @@ with tab2:
                     # PDF Preview
                     st.subheader("📄 PDF Preview")
                     st.components.v1.html(render_pdf_preview(pdf_bytes), height=620, scrolling=True)
+                    
         except Exception as e:
-            if temp_dir:
-                shutil.rmtree(temp_dir, ignore_errors=True)
             st.error(f"❌ Error: {str(e)}")
+            with st.expander("Show full error"):
+                import traceback
+                st.code(traceback.format_exc())
+        finally:
+            # Cleanup
+            if temp_dir and os.path.exists(temp_dir):
+                print(f"Cleaning up temp directory: {temp_dir}")
+                shutil.rmtree(temp_dir, ignore_errors=True)
 
 # Footer with tips
 st.markdown("---")
@@ -672,13 +730,45 @@ st.markdown("""
 - **Image Support** - Upload JPG, PNG, GIF, SVG, WebP, or BMP images
 - All CSS styles, colors, gradients, and fonts are preserved
 - Use inline CSS or `<style>` tags for best results
-- Reference images by filename in your HTML (e.g., `<img src="image.jpg">`)
-- External resources should use absolute URLs
+- **Image filenames must match exactly** - if your HTML has `<img src="logo.png">`, upload a file named exactly `logo.png`
+- External resources should use absolute URLs (https://)
 - **PDF Preview** renders directly in the browser using PDF.js
 
-### 🖼️ Using Images:
-1. Upload your HTML file
-2. Upload all images referenced in the HTML
-3. Make sure image filenames in HTML match uploaded files exactly
-4. The converter will automatically embed images in the PDF
+### 🖼️ Using Images - IMPORTANT:
+1. **Exact Filename Match**: If your HTML has `<img src="photo.jpg">`, upload a file named exactly `photo.jpg`
+2. **Multiple Images**: Upload all images referenced in your HTML
+3. **Supported Formats**: JPG, JPEG, PNG, GIF, SVG, WebP, BMP
+4. **Path Variations**: These all work:
+   - `<img src="logo.png">` ✓
+   - `<img src="./logo.png">` ✓
+   - `<img src="images/logo.png">` ✓ (just upload as `logo.png`)
+5. **CSS Background Images**: Use `background-image: url('bg.jpg')` and upload `bg.jpg`
+6. **Check Debug Info**: Expand the debug section after conversion to verify image processing
+
+### 📝 Example HTML with Images:
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body { font-family: Arial; padding: 40px; }
+        .header { 
+            background-image: url('banner.jpg');
+            background-size: cover;
+            padding: 60px;
+            color: white;
+        }
+        img { max-width: 100%; height: auto; }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>My Document</h1>
+    </div>
+    <img src="photo.png" alt="Photo">
+    <img src="logo.svg" alt="Logo">
+</body>
+</html>
+```
+**Then upload**: `banner.jpg`, `photo.png`, `logo.svg`
 """)