Update app.py

app.py

@@ -1,65 +1,21 @@
-import os
-import io
-import re
 import streamlit as st
-
-# Must be the very first Streamlit command.
-st.set_page_config(layout="wide", initial_sidebar_state="collapsed")
-
-from PIL import Image
-import fitz  # PyMuPDF
-
+import base64
 from reportlab.lib.pagesizes import A4
 from reportlab.platypus import SimpleDocTemplate, Paragraph, Spacer, Table, TableStyle
 from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
 from reportlab.lib import colors
-from reportlab.pdfbase import pdfmetrics
-from reportlab.pdfbase.ttfonts import TTFont
-
-# ---------------------------------------------------------------
-# Define available NotoEmoji fonts (all in the base directory now)
-available_fonts = {
-    "NotoEmoji Variable": "NotoEmoji-VariableFont_wght.ttf",
-    "NotoEmoji Bold": "NotoEmoji-Bold.ttf",
-    "NotoEmoji Light": "NotoEmoji-Light.ttf",
-    "NotoEmoji Medium": "NotoEmoji-Medium.ttf",
-    "NotoEmoji Regular": "NotoEmoji-Regular.ttf",
-    "NotoEmoji SemiBold": "NotoEmoji-SemiBold.ttf"
-}
-
-# Sidebar: Let the user choose the desired NotoEmoji font.
-selected_font_name = st.sidebar.selectbox(
-    "Select NotoEmoji Font",
-    options=list(available_fonts.keys())
-)
-selected_font_path = available_fonts[selected_font_name]
-
-# Register the chosen emoji font with ReportLab.
-pdfmetrics.registerFont(TTFont(selected_font_name, selected_font_path))
-
-# ---------------------------------------------------------------
-# Helper function to wrap emoji characters with a font tag.
-def apply_emoji_font(text, emoji_font):
-    # This regex attempts to capture many common emoji ranges.
-    emoji_pattern = re.compile(
-        r"([\U0001F300-\U0001F5FF"
-        r"\U0001F600-\U0001F64F"
-        r"\U0001F680-\U0001F6FF"
-        r"\U0001F700-\U0001F77F"
-        r"\U0001F780-\U0001F7FF"
-        r"\U0001F800-\U0001F8FF"
-        r"\U0001F900-\U0001F9FF"
-        r"\U0001FA00-\U0001FA6F"
-        r"\U0001FA70-\U0001FAFF"
-        r"\u2600-\u26FF"
-        r"\u2700-\u27BF]+)"
-    )
-    # Wrap found emoji with a font tag using the selected emoji font.
-    return emoji_pattern.sub(r'<font face="{}">\1</font>'.format(emoji_font), text)
+import pikepdf
+import fpdf
+import fitz  # pymupdf
+import cv2
+import numpy as np
+from PIL import Image
+import io
+import os
+import re
 
-# ---------------------------------------------------------------
-# Default markdown content with emojis.
-default_markdown = """# Pillow-PyMuPDF-ReportLab - Markdown to PDF One Pager
+# Define the ML outline as a markdown string for multilevel content
+ml_markdown = """# Cutting-Edge ML Outline
 
 ## Core ML Techniques
 1. 🌟 **Mixture of Experts (MoE)**
@@ -126,9 +82,12 @@ default_markdown = """# Pillow-PyMuPDF-ReportLab - Markdown to PDF One Pager
     - Documentation synthesis
 """
 
-# ---------------------------------------------------------------
-# Process markdown into a two-column layout for the PDF.
+# Process multilevel markdown for PDF output
 def markdown_to_pdf_content(markdown_text):
+    """Convert markdown text to a format suitable for PDF generation"""
+    import re
+    
+    # Convert markdown headers to styled text for PDF
     lines = markdown_text.strip().split('\n')
     pdf_content = []
     in_list_item = False
@@ -141,230 +100,627 @@ def markdown_to_pdf_content(markdown_text):
             continue
             
         if line.startswith('# '):
-            # Optionally skip the main title.
+            # Main header - will be handled separately in the PDF generation
             pass
         elif line.startswith('## '):
+            # Section header - add as a bold item
             if current_item and sub_items:
+                # Store the previous item with its sub-items
                 pdf_content.append([current_item, sub_items])
                 sub_items = []
                 current_item = None
+                
             section = line.replace('## ', '').strip()
             pdf_content.append(f"<b>{section}</b>")
             in_list_item = False
         elif re.match(r'^\d+\.', line):
+            # Numbered list item
             if current_item and sub_items:
+                # Store the previous item with its sub-items
                 pdf_content.append([current_item, sub_items])
                 sub_items = []
+            
             current_item = line.strip()
             in_list_item = True
         elif line.startswith('- ') and in_list_item:
+            # Sub-item under a numbered list item
             sub_items.append(line.strip())
         else:
+            # Regular line
             if not in_list_item:
                 pdf_content.append(line.strip())
     
+    # Add the last item if there is one
     if current_item and sub_items:
         pdf_content.append([current_item, sub_items])
     
+    # Split the content for two columns
     mid_point = len(pdf_content) // 2
     left_column = pdf_content[:mid_point]
     right_column = pdf_content[mid_point:]
     
     return left_column, right_column
 
-# ---------------------------------------------------------------
-# Create the PDF using ReportLab.
-def create_main_pdf(markdown_text, base_font_size=10, auto_size=False):
+# Demo functions for PDF libraries
+def demo_pikepdf():
+    """Create a two-column PDF with the markdown outline using pikepdf"""
+    # Process markdown content
+    left_column, right_column = markdown_to_pdf_content(ml_markdown)
+    
+    # We'll use pymupdf (fitz) to create the content, then save with pikepdf
+    doc = fitz.open()
+    page = doc.new_page(width=842, height=595)  # A4 Landscape
+    
+    # Set up fonts and colors
+    title_font = "helv-b"
+    section_font = "helv-b"
+    item_font = "helv-b"
+    subitem_font = "helv"
+    blue_color = (0, 0, 0.8)
+    black_color = (0, 0, 0)
+    
+    # Add title
+    page.insert_text((50, 40), "Cutting-Edge ML Outline (PikePDF Demo)", fontname=title_font, fontsize=16, color=blue_color)
+    
+    # First column
+    x1, y1 = 50, 80
+    current_y = y1
+    
+    for item in left_column:
+        if isinstance(item, str) and item.startswith('<b>'):
+            # Section header
+            # Add extra space before sections (except the first one)
+            if current_y > y1:
+                current_y += 10
+            
+            text = item.replace('<b>', '').replace('</b>', '')
+            page.insert_text((x1, current_y), text, fontname=section_font, fontsize=14, color=blue_color)
+            current_y += 25
+        elif isinstance(item, list):
+            # Main item with sub-items
+            main_item, sub_items = item
+            page.insert_text((x1, current_y), main_item, fontname=item_font, fontsize=12, color=black_color)
+            current_y += 20
+            
+            # Add sub-items
+            for sub_item in sub_items:
+                page.insert_text((x1 + 20, current_y), sub_item, fontname=subitem_font, fontsize=10, color=black_color)
+                current_y += 15
+            
+            current_y += 5  # Extra space after a group
+        else:
+            # Regular item
+            page.insert_text((x1, current_y), item, fontname=item_font, fontsize=12, color=black_color)
+            current_y += 20
+    
+    # Second column
+    x2, y2 = 450, 80
+    current_y = y2
+    
+    for item in right_column:
+        if isinstance(item, str) and item.startswith('<b>'):
+            # Section header
+            # Add extra space before sections (except the first one)
+            if current_y > y2:
+                current_y += 10
+            
+            text = item.replace('<b>', '').replace('</b>', '')
+            page.insert_text((x2, current_y), text, fontname=section_font, fontsize=14, color=blue_color)
+            current_y += 25
+        elif isinstance(item, list):
+            # Main item with sub-items
+            main_item, sub_items = item
+            page.insert_text((x2, current_y), main_item, fontname=item_font, fontsize=12, color=black_color)
+            current_y += 20
+            
+            # Add sub-items
+            for sub_item in sub_items:
+                page.insert_text((x2 + 20, current_y), sub_item, fontname=subitem_font, fontsize=10, color=black_color)
+                current_y += 15
+            
+            current_y += 5  # Extra space after a group
+        else:
+            # Regular item
+            page.insert_text((x2, current_y), item, fontname=item_font, fontsize=12, color=black_color)
+            current_y += 20
+    
+    # Draw a dividing line
+    page.draw_line((421, 70), (421, 550))
+    
+    # Convert to pikepdf
+    temp_buffer = io.BytesIO()
+    doc.save(temp_buffer)
+    temp_buffer.seek(0)
+    
+    pdf = pikepdf.Pdf.open(temp_buffer)
+    
+    # Save to buffer
     buffer = io.BytesIO()
-    doc = SimpleDocTemplate(
-        buffer, 
-        pagesize=(A4[1], A4[0]),
-        leftMargin=36,
-        rightMargin=36,
-        topMargin=36,
-        bottomMargin=36
-    )
+    pdf.save(buffer)
+    buffer.seek(0)
+    return buffer.getvalue()
+
+def demo_fpdf():
+    """Create a two-column PDF with the markdown outline using FPDF"""
+    # Process markdown content
+    left_column, right_column = markdown_to_pdf_content(ml_markdown)
     
-    styles = getSampleStyleSheet()
-    story = []
-    spacer_height = 10
-    left_column, right_column = markdown_to_pdf_content(markdown_text)
+    pdf = fpdf.FPDF(orientation='L')  # Landscape
+    pdf.add_page()
+    
+    # Set title
+    pdf.set_font("Arial", 'B', size=16)
+    pdf.set_text_color(0, 0, 128)  # Dark blue
+    pdf.cell(0, 10, txt="Cutting-Edge ML Outline (FPDF Demo)", ln=True, align='C')
+    pdf.ln(10)
+    
+    # Define coordinates for columns
+    x_col1 = 20
+    x_col2 = pdf.w / 2 + 10
+    y_start = pdf.get_y()
     
-    total_items = 0
-    for col in (left_column, right_column):
-        for item in col:
-            if isinstance(item, list):
+    # Function to render a column
+    def render_column(items, x_start, y_start):
+        y_pos = y_start
+        
+        for item in items:
+            if isinstance(item, str) and item.startswith('<b>'):
+                # Section header
+                text = item.replace('<b>', '').replace('</b>', '')
+                pdf.set_font("Arial", 'B', size=14)
+                pdf.set_text_color(0, 0, 128)  # Dark blue
+                pdf.set_xy(x_start, y_pos)
+                pdf.cell(0, 10, txt=text, ln=True)
+                y_pos += 10
+            elif isinstance(item, list):
+                # Main item with sub-items
                 main_item, sub_items = item
-                total_items += 1 + len(sub_items)
+                
+                # Main item
+                pdf.set_font("Arial", 'B', size=11)
+                pdf.set_text_color(0, 0, 0)  # Black
+                pdf.set_xy(x_start, y_pos)
+                pdf.multi_cell(180, 6, txt=main_item, align='L')
+                main_height = pdf.get_y() - y_pos
+                y_pos += main_height + 2
+                
+                # Sub-items
+                pdf.set_font("Arial", size=10)
+                for sub_item in sub_items:
+                    pdf.set_xy(x_start + 10, y_pos)
+                    pdf.multi_cell(170, 5, txt=sub_item, align='L')
+                    sub_height = pdf.get_y() - y_pos
+                    y_pos += sub_height + 1
+                
+                y_pos += 2  # Extra space after a group
             else:
-                total_items += 1
+                # Regular item
+                pdf.set_font("Arial", 'B', size=11)
+                pdf.set_text_color(0, 0, 0)  # Black
+                pdf.set_xy(x_start, y_pos)
+                pdf.multi_cell(180, 6, txt=item, align='L')
+                item_height = pdf.get_y() - y_pos
+                y_pos += item_height + 4
     
-    if auto_size:
-        base_font_size = max(6, min(12, 200 / total_items))
+    # Render both columns
+    render_column(left_column, x_col1, y_start)
+    render_column(right_column, x_col2, y_start)
     
-    item_font_size = base_font_size
-    subitem_font_size = base_font_size * 0.9
-    section_font_size = base_font_size * 1.2
-    title_font_size = min(16, base_font_size * 1.5)
+    # Draw a dividing line
+    pdf.line(pdf.w/2, 30, pdf.w/2, 280)
     
-    # Define ParagraphStyles using Helvetica for normal text.
-    title_style = ParagraphStyle(
-        'Heading1',
-        parent=styles['Heading1'],
-        fontName="Helvetica-Bold",
-        textColor=colors.darkblue,
-        alignment=1,
-        fontSize=title_font_size
+    buffer = io.BytesIO()
+    pdf.output(buffer)
+    buffer.seek(0)
+    return buffer.getvalue()
+
+def demo_pymupdf():
+    """Create a two-column PDF with the markdown outline using PyMuPDF"""
+    # Process markdown content
+    left_column, right_column = markdown_to_pdf_content(ml_markdown)
+    
+    doc = fitz.open()
+    page = doc.new_page(width=842, height=595)  # A4 Landscape
+    
+    # Set up fonts and colors
+    title_font = "helv-b"
+    section_font = "helv-b"
+    item_font = "helv-b"
+    subitem_font = "helv"
+    blue_color = (0, 0, 0.8)
+    black_color = (0, 0, 0)
+    
+    # Add title
+    page.insert_text((300, 40), "Cutting-Edge ML Outline (PyMuPDF Demo)", fontname=title_font, fontsize=16, color=blue_color)
+    
+    # First column
+    x1, y1 = 50, 80
+    current_y = y1
+    
+    for item in left_column:
+        if isinstance(item, str) and item.startswith('<b>'):
+            # Section header
+            # Add extra space before sections (except the first one)
+            if current_y > y1:
+                current_y += 10
+            
+            text = item.replace('<b>', '').replace('</b>', '')
+            page.insert_text((x1, current_y), text, fontname=section_font, fontsize=14, color=blue_color)
+            current_y += 25
+        elif isinstance(item, list):
+            # Main item with sub-items
+            main_item, sub_items = item
+            page.insert_text((x1, current_y), main_item, fontname=item_font, fontsize=12, color=black_color)
+            current_y += 20
+            
+            # Add sub-items
+            for sub_item in sub_items:
+                page.insert_text((x1 + 20, current_y), sub_item, fontname=subitem_font, fontsize=10, color=black_color)
+                current_y += 15
+            
+            current_y += 5  # Extra space after a group
+        else:
+            # Regular item
+            page.insert_text((x1, current_y), item, fontname=item_font, fontsize=12, color=black_color)
+            current_y += 20
+    
+    # Second column
+    x2, y2 = 450, 80
+    current_y = y2
+    
+    for item in right_column:
+        if isinstance(item, str) and item.startswith('<b>'):
+            # Section header
+            # Add extra space before sections (except the first one)
+            if current_y > y2:
+                current_y += 10
+            
+            text = item.replace('<b>', '').replace('</b>', '')
+            page.insert_text((x2, current_y), text, fontname=section_font, fontsize=14, color=blue_color)
+            current_y += 25
+        elif isinstance(item, list):
+            # Main item with sub-items
+            main_item, sub_items = item
+            page.insert_text((x2, current_y), main_item, fontname=item_font, fontsize=12, color=black_color)
+            current_y += 20
+            
+            # Add sub-items
+            for sub_item in sub_items:
+                page.insert_text((x2 + 20, current_y), sub_item, fontname=subitem_font, fontsize=10, color=black_color)
+                current_y += 15
+            
+            current_y += 5  # Extra space after a group
+        else:
+            # Regular item
+            page.insert_text((x2, current_y), item, fontname=item_font, fontsize=12, color=black_color)
+            current_y += 20
+    
+    # Draw a dividing line
+    page.draw_line((421, 70), (421, 550))
+    
+    buffer = io.BytesIO()
+    doc.save(buffer)
+    buffer.seek(0)
+    return buffer.getvalue()
+
+# Demo function for image capture
+def demo_image_capture():
+    """Generate a demo image (fake capture) since we can't access the camera in this environment"""
+    # Create a simple gradient image using numpy and PIL
+    width, height = 640, 480
+    
+    # Create a gradient array
+    x = np.linspace(0, 1, width)
+    y = np.linspace(0, 1, height)
+    xx, yy = np.meshgrid(x, y)
+    gradient = (xx + yy) / 2
+    
+    # Convert to RGB image
+    img_array = (gradient * 255).astype(np.uint8)
+    rgb_array = np.stack([img_array, img_array//2, img_array*2], axis=2)
+    
+    # Create PIL Image
+    img = Image.fromarray(rgb_array)
+    
+    # Add text to the image
+    from PIL import ImageDraw, ImageFont
+    draw = ImageDraw.Draw(img)
+    try:
+        font = ImageFont.truetype("arial.ttf", 30)
+    except:
+        font = ImageFont.load_default()
+    
+    draw.text((width//4, height//2), "OpenCV Demo Image", fill=(255, 255, 255), font=font)
+    
+    # Save to buffer
+    buffer = io.BytesIO()
+    img.save(buffer, format="JPEG")
+    buffer.seek(0)
+    return buffer.getvalue()
+
+# Main PDF creation using ReportLab
+def create_main_pdf(markdown_text):
+    """Create a single-page landscape PDF with the outline in two columns"""
+    from reportlab.platypus import Table, TableStyle, Paragraph, Spacer
+    from reportlab.lib import pagesizes
+    from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
+    
+    # Process markdown content
+    left_column, right_column = markdown_to_pdf_content(markdown_text)
+    
+    buffer = io.BytesIO()
+    doc = SimpleDocTemplate(
+        buffer, 
+        pagesize=(A4[1], A4[0]),  # Landscape
+        leftMargin=50,
+        rightMargin=50,
+        topMargin=50,
+        bottomMargin=50
     )
     
+    styles = getSampleStyleSheet()
+    story = []
+    
+    # Create custom styles
+    title_style = styles['Heading1']
+    title_style.textColor = colors.darkblue
+    title_style.alignment = 1  # Center alignment
+    
     section_style = ParagraphStyle(
         'SectionStyle',
         parent=styles['Heading2'],
-        fontName="Helvetica-Bold",
         textColor=colors.darkblue,
-        fontSize=section_font_size,
-        leading=section_font_size * 1.2,
-        spaceAfter=2
+        spaceAfter=6
     )
     
     item_style = ParagraphStyle(
         'ItemStyle',
         parent=styles['Normal'],
-        fontName="Helvetica",
-        fontSize=item_font_size,
-        leading=item_font_size * 1.2,
-        spaceAfter=1
+        fontSize=11,
+        leading=14,
+        fontName='Helvetica-Bold'
     )
     
     subitem_style = ParagraphStyle(
         'SubItemStyle',
         parent=styles['Normal'],
-        fontName="Helvetica",
-        fontSize=subitem_font_size,
-        leading=subitem_font_size * 1.2,
-        leftIndent=10,
-        spaceAfter=1
+        fontSize=10,
+        leading=12,
+        leftIndent=20
     )
     
-    story.append(Paragraph(apply_emoji_font("Cutting-Edge ML Outline (ReportLab)", selected_font_name), title_style))
-    story.append(Spacer(1, spacer_height))
+    # Add title
+    story.append(Paragraph("Cutting-Edge ML Outline (ReportLab)", title_style))
+    story.append(Spacer(1, 20))
     
+    # Prepare data for table
     left_cells = []
     for item in left_column:
         if isinstance(item, str) and item.startswith('<b>'):
-            # Process section headings.
+            # Section header
             text = item.replace('<b>', '').replace('</b>', '')
-            left_cells.append(Paragraph(apply_emoji_font(text, selected_font_name), section_style))
+            left_cells.append(Paragraph(text, section_style))
         elif isinstance(item, list):
+            # Main item with sub-items
             main_item, sub_items = item
-            left_cells.append(Paragraph(apply_emoji_font(main_item, selected_font_name), item_style))
+            left_cells.append(Paragraph(main_item, item_style))
+            
+            # Sub items
             for sub_item in sub_items:
-                left_cells.append(Paragraph(apply_emoji_font(sub_item, selected_font_name), subitem_style))
+                left_cells.append(Paragraph(sub_item, subitem_style))
         else:
-            left_cells.append(Paragraph(apply_emoji_font(item, selected_font_name), item_style))
+            # Regular item
+            left_cells.append(Paragraph(item, item_style))
     
     right_cells = []
     for item in right_column:
         if isinstance(item, str) and item.startswith('<b>'):
+            # Section header
             text = item.replace('<b>', '').replace('</b>', '')
-            right_cells.append(Paragraph(apply_emoji_font(text, selected_font_name), section_style))
+            right_cells.append(Paragraph(text, section_style))
         elif isinstance(item, list):
+            # Main item with sub-items
             main_item, sub_items = item
-            right_cells.append(Paragraph(apply_emoji_font(main_item, selected_font_name), item_style))
+            right_cells.append(Paragraph(main_item, item_style))
+            
+            # Sub items
             for sub_item in sub_items:
-                right_cells.append(Paragraph(apply_emoji_font(sub_item, selected_font_name), subitem_style))
+                right_cells.append(Paragraph(sub_item, subitem_style))
         else:
-            right_cells.append(Paragraph(apply_emoji_font(item, selected_font_name), item_style))
+            # Regular item
+            right_cells.append(Paragraph(item, item_style))
     
+    # Make sure both columns have the same number of rows by adding empty cells
     max_cells = max(len(left_cells), len(right_cells))
-    left_cells.extend([""] * (max_cells - len(left_cells)))
-    right_cells.extend([""] * (max_cells - len(right_cells)))
+    if len(left_cells) < max_cells:
+        for i in range(max_cells - len(left_cells)):
+            left_cells.append("")
+    if len(right_cells) < max_cells:
+        for i in range(max_cells - len(right_cells)):
+            right_cells.append("")
+    
+    # Create table data (one row per cell)
+    table_data = []
+    for i in range(max_cells):
+        table_data.append([left_cells[i], right_cells[i]])
+    
+    # Calculate column widths
+    col_width = (A4[1] - 120) / 2.0  # Page width minus margins divided by 2
+    
+    # Create the table with the data
+    table = Table(table_data, colWidths=[col_width, col_width])
     
-    table_data = list(zip(left_cells, right_cells))
-    col_width = (A4[1] - 72) / 2.0
-    table = Table(table_data, colWidths=[col_width, col_width], hAlign='CENTER')
+    # Style the table
     table.setStyle(TableStyle([
         ('VALIGN', (0, 0), (-1, -1), 'TOP'),
-        ('ALIGN', (0, 0), (-1, -1), 'LEFT'),
+        ('ALIGN', (0, 0), (0, -1), 'LEFT'),
+        ('ALIGN', (1, 0), (1, -1), 'LEFT'),
         ('BACKGROUND', (0, 0), (-1, -1), colors.white),
-        ('GRID', (0, 0), (-1, -1), 0, colors.white),
-        ('LINEAFTER', (0, 0), (0, -1), 0.5, colors.grey),
-        ('LEFTPADDING', (0, 0), (-1, -1), 2),
-        ('RIGHTPADDING', (0, 0), (-1, -1), 2),
-        ('TOPPADDING', (0, 0), (-1, -1), 1),
-        ('BOTTOMPADDING', (0, 0), (-1, -1), 1),
+        ('GRID', (0, 0), (-1, -1), 0.5, colors.white),
+        ('LINEAFTER', (0, 0), (0, -1), 1, colors.grey),
     ]))
     
     story.append(table)
+    
     doc.build(story)
     buffer.seek(0)
     return buffer.getvalue()
 
-# ---------------------------------------------------------------
-# Convert PDF bytes to an image for preview using PyMuPDF.
-def pdf_to_image(pdf_bytes):
-    try:
-        doc = fitz.open(stream=pdf_bytes, filetype="pdf")
-        page = doc[0]
-        pix = page.get_pixmap(matrix=fitz.Matrix(2.0, 2.0))
-        img = Image.frombytes("RGB", [pix.width, pix.height], pix.samples)
-        doc.close()
-        return img
-    except Exception as e:
-        st.error(f"Failed to render PDF preview: {e}")
-        return None
-
-# ---------------------------------------------------------------
-# Sidebar options for text size.
-with st.sidebar:
-    auto_size = st.checkbox("Auto-size text", value=True)
-    if not auto_size:
-        base_font_size = st.slider("Base Font Size (points)", min_value=6, max_value=16, value=10, step=1)
-    else:
-        base_font_size = 10
-        st.info("Font size will auto-adjust between 6-12 points based on content length.")
+def get_binary_file_downloader_html(bin_data, file_label='File'):
+    """Create a download link for binary data"""
+    bin_str = base64.b64encode(bin_data).decode()
+    href = f'<a href="data:application/octet-stream;base64,{bin_str}" download="{file_label}">Download {file_label}</a>'
+    return href
 
-# Persist markdown content in session state.
-if 'markdown_content' not in st.session_state:
-    st.session_state.markdown_content = default_markdown
+# Streamlit UI
+st.title("🚀 Cutting-Edge ML Outline Generator")
 
-# ---------------------------------------------------------------
-# Generate the PDF.
-with st.spinner("Generating PDF..."):
-    pdf_bytes = create_main_pdf(st.session_state.markdown_content, base_font_size, auto_size)
+col1, col2 = st.columns(2)
 
-# Display PDF preview.
-with st.container():
-    pdf_image = pdf_to_image(pdf_bytes)
-    if pdf_image:
-        st.image(pdf_image, use_container_width=True)
-    else:
-        st.info("Download the PDF to view it locally.")
+with col1:
+    st.header("📝 Markdown Outline")
+    
+    # Display the markdown content
+    st.markdown(ml_markdown)
+    
+    # Create a download button for the markdown file
+    st.download_button(
+        label="Download Markdown",
+        data=ml_markdown,
+        file_name="ml_outline.md",
+        mime="text/markdown"
+    )
+    
+    # Show the markdown source code in an expandable section
+    with st.expander("View Markdown Source"):
+        st.code(ml_markdown, language="markdown")
 
-# PDF Download button.
-st.download_button(
-    label="Download PDF",
-    data=pdf_bytes,
-    file_name="ml_outline.pdf",
-    mime="application/pdf"
-)
+with col2:
+    st.header("📑 PDF Preview & Demos")
+    
+    # Library Demos
+    st.subheader("Library Demos")
+    
+    # PikePDF demo
+    if st.button("Generate PikePDF Demo"):
+        with st.spinner("Generating PikePDF demo..."):
+            pike_pdf = demo_pikepdf()
+            st.download_button("Download PikePDF Demo", pike_pdf, "pikepdf_demo.pdf")
+            st.success("PikePDF demo created successfully!")
+            st.info("This PDF contains the multilevel markdown outline in a two-column layout.")
+    
+    # FPDF demo
+    if st.button("Generate FPDF Demo"):
+        with st.spinner("Generating FPDF demo..."):
+            fpdf_pdf = demo_fpdf()
+            st.download_button("Download FPDF Demo", fpdf_pdf, "fpdf_demo.pdf")
+            st.success("FPDF demo created successfully!")
+            st.info("This PDF contains the multilevel markdown outline in a two-column layout.")
+    
+    # PyMuPDF demo
+    if st.button("Generate PyMuPDF Demo"):
+        with st.spinner("Generating PyMuPDF demo..."):
+            pymupdf_pdf = demo_pymupdf()
+            st.download_button("Download PyMuPDF Demo", pymupdf_pdf, "pymupdf_demo.pdf")
+            st.success("PyMuPDF demo created successfully!")
+            st.info("This PDF contains the multilevel markdown outline in a two-column layout.")
+    
+    # Image demo
+    if st.button("Generate Demo Image"):
+        with st.spinner("Generating demo image..."):
+            img_data = demo_image_capture()
+            st.image(img_data, caption="Demo Image (Camera simulation)")
+            
+            # Add download button for the image
+            st.download_button(
+                label="Download Image", 
+                data=img_data,
+                file_name="demo_image.jpg",
+                mime="image/jpeg"
+            )
 
-# Markdown editor.
-edited_markdown = st.text_area(
-    "Modify the markdown content below:",
-    value=st.session_state.markdown_content,
-    height=300
-)
+    # Main PDF Generation
+    st.subheader("Main Outline PDF")
+    if st.button("Generate Main PDF"):
+        with st.spinner("Generating PDF..."):
+            try:
+                pdf_bytes = create_main_pdf(ml_markdown)
+                
+                st.download_button(
+                    label="Download Main PDF",
+                    data=pdf_bytes,
+                    file_name="ml_outline.pdf",
+                    mime="application/pdf"
+                )
+                
+                # Display the PDF in the app
+                base64_pdf = base64.b64encode(pdf_bytes).decode('utf-8')
+                pdf_display = f'''
+                    <embed 
+                        src="data:application/pdf;base64,{base64_pdf}" 
+                        width="100%" 
+                        height="400px" 
+                        type="application/pdf">
+                '''
+                st.markdown(pdf_display, unsafe_allow_html=True)
+                
+                st.success("PDF generated successfully! The PDF displays the multilevel markdown outline in a two-column layout.")
+            except Exception as e:
+                st.error(f"Error generating PDF: {str(e)}")
 
-# Update PDF on button click.
-if st.button("Update PDF"):
-    st.session_state.markdown_content = edited_markdown
-    st.experimental_rerun()
+    # Show the PDF rendering code in an expandable section
+    with st.expander("View PDF Rendering Code"):
+        st.code("""
+# Process multilevel markdown for PDF output
+def markdown_to_pdf_content(markdown_text):
+    # Convert markdown headers to styled text for PDF
+    lines = markdown_text.strip().split('\\n')
+    pdf_content = []
+    
+    for line in lines:
+        if line.startswith('# '):
+            # Main header - will be handled separately
+            pass
+        elif line.startswith('## '):
+            # Section header - add as a bold item
+            section = line.replace('## ', '').strip()
+            pdf_content.append(f"<b>{section}</b>")
+        elif re.match(r'^\\d+\\.', line):
+            # Numbered list item
+            item = line.strip()
+            pdf_content.append(item)
+        elif line.startswith('- '):
+            # Sub-item under a numbered list item
+            sub_item = line.strip()
+            pdf_content.append("  " + sub_item)
+    
+    # Split the content for two columns
+    mid_point = len(pdf_content) // 2
+    left_column = pdf_content[:mid_point]
+    right_column = pdf_content[mid_point:]
+    
+    return left_column, right_column
+        """, language="python")
 
-# Markdown Download button.
-st.download_button(
-    label="Save Markdown",
-    data=st.session_state.markdown_content,
-    file_name="ml_outline.md",
-    mime="text/markdown"
-)
+# Add custom CSS for better appearance
+st.markdown("""
+<style>
+    .stButton>button {
+        background-color: #4CAF50;
+        color: white;
+        font-weight: bold;
+    }
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 2px;
+    }
+    .stTabs [data-baseweb="tab"] {
+        height: 50px;
+        white-space: pre-wrap;
+        background-color: #f0f2f6;
+        border-radius: 4px 4px 0px 0px;
+        gap: 1px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+</style>
+""", unsafe_allow_html=True)