Fix syntax error and responsive layout issues

- Fix unterminated string literal in structured_ocr.py line 1672
- Redesign example documents section with CSS grid for proper responsive layout
- Fix narrow viewport issues to prevent column 1 and 2 overlap
- Enhance preprocessing preview with responsive design

app.py

@@ -964,11 +964,13 @@ with main_tab1:
             if any(preprocessing_options.values()) and uploaded_file.type.startswith('image/'):
                 st.markdown("**Preprocessed Preview**")
                 try:
-                    processed_bytes = preprocess_image(uploaded_file.getvalue(), preprocessing_options)
-                    # Display the image with a fixed width to prevent layout issues
-                    st.image(io.BytesIO(processed_bytes), width=400)
+                    # Create a container for the preview to better control layout
+                    with st.container():
+                        processed_bytes = preprocess_image(uploaded_file.getvalue(), preprocessing_options)
+                        # Use use_column_width=True for responsive design
+                        st.image(io.BytesIO(processed_bytes), use_column_width=True)
                     
-                    # Show preprocessing metadata next to the image
+                    # Show preprocessing metadata in a well-formatted caption
                     meta_items = []
                     if preprocessing_options.get("document_type", "standard") != "standard":
                         meta_items.append(f"Document type ({preprocessing_options['document_type']})")
@@ -1635,105 +1637,156 @@ with main_tab1:
     else:
         # Empty placeholder - we've moved the upload instruction to the file_uploader
         
-        # Show example images in a grid
+        # Show example images in a responsive grid
         st.subheader("Example Documents")
         
-        # Add a sample images container
-        with st.container():
-            # Find sample images from the input directory to display
-            input_dir = Path(__file__).parent / "input"
-            sample_images = []
-            backup_dir = Path(__file__).parent / "backup" / "input"
+        # Add a dedicated container with custom styling for the examples
+        st.markdown("""
+        <style>
+        .example-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+            margin-top: 20px;
+        }
+        .example-item {
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            background: white;
+            transition: transform 0.2s;
+            height: 100%;
+        }
+        .example-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .example-image {
+            width: 100%;
+            aspect-ratio: 4/3;
+            object-fit: cover;
+        }
+        .example-caption {
+            padding: 10px;
+            font-size: 14px;
+            text-align: center;
+            color: #333;
+        }
+        @media (max-width: 768px) {
+            .example-grid {
+                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+            }
+        }
+        @media (max-width: 640px) {
+            .example-grid {
+                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+            }
+        }
+        </style>
+        """, unsafe_allow_html=True)
+        
+        # Find sample images from the input directory
+        input_dir = Path(__file__).parent / "input"
+        sample_images = []
+        backup_dir = Path(__file__).parent / "backup" / "input"
+        
+        if input_dir.exists():
+            # Define images in specific order per requirements
+            ordered_image_names = [
+                "magellan-travels.jpg",
+                "americae-retectio.jpg",
+                "handwritten-letter.jpg", 
+                "milgram-flier.png", 
+                "recipe.jpg", 
+                "The Magician, or Bottle Cungerer.jpeg"
+            ]
             
-            if input_dir.exists():
-                # Define images in specific order per requirements
-                ordered_sample_images = []
-                
-                # Define ordered list: magellan, americae, handwritten letter, milgram flier, recipe, magician
-                ordered_image_names = [
-                    "magellan-travels.jpg",
-                    "americae-retectio.jpg",
-                    "handwritten-letter.jpg", 
-                    "milgram-flier.png", 
-                    "recipe.jpg", 
-                    "The Magician, or Bottle Cungerer.jpeg"
-                ]
-                
-                # Create the image list in the desired order
-                for img_name in ordered_image_names:
-                    img_path = input_dir / img_name
-                    if img_path.exists():
-                        ordered_sample_images.append(img_path)
+            # Create the image list in the desired order
+            ordered_sample_images = []
+            for img_name in ordered_image_names:
+                img_path = input_dir / img_name
+                if img_path.exists():
+                    ordered_sample_images.append(img_path)
+            
+            # Use ordered images
+            sample_images = ordered_sample_images
+            
+            # Fill in with additional images if needed
+            if len(sample_images) < 6:
+                # Get all remaining images from input directory
+                all_images = set(
+                    list(input_dir.glob("*.jpg")) + 
+                    list(input_dir.glob("*.jpeg")) + 
+                    list(input_dir.glob("*.png")) + 
+                    list(input_dir.glob("*.tif"))
+                )
                 
-                # Organize for display: first 3 in top row, next 3 in bottom row
-                sample_images = ordered_sample_images
+                # Remove the already selected images
+                remaining_images = [img for img in all_images if img not in sample_images]
                 
-                # If we don't have enough samples, fill in with other available images
-                if len(sample_images) < 6:
-                    # Get all remaining images from input directory
-                    all_images = set(
-                        list(input_dir.glob("*.jpg")) + 
-                        list(input_dir.glob("*.jpeg")) + 
-                        list(input_dir.glob("*.png")) + 
-                        list(input_dir.glob("*.tif"))
-                    )
-                    
-                    # Remove the already selected images
-                    remaining_images = [img for img in all_images if img not in sample_images]
-                    
-                    # Add remaining images to fill the grid
-                    sample_images.extend(remaining_images[:6-len(sample_images)])
-                
-                # If still not enough, try backup directory
-                if len(sample_images) < 6 and backup_dir.exists():
-                    remaining = 6 - len(sample_images)
-                    backup_samples = (
-                        list(backup_dir.glob("*.jpg")) + 
-                        list(backup_dir.glob("*.jpeg")) + 
-                        list(backup_dir.glob("*.png"))
-                    )[:remaining]
-                    sample_images.extend(backup_samples)
+                # Add remaining images to fill the grid
+                sample_images.extend(remaining_images[:6-len(sample_images)])
             
-            if sample_images:
-                # Create two rows of 3 columns each for the 6 examples
-                if len(sample_images) > 3:
-                    # First row
-                    columns1 = st.columns(3)
-                    for i, img_path in enumerate(sample_images[:3]):
-                        with columns1[i]:
-                            if img_path.suffix.lower() in ['.jpg', '.jpeg', '.png', '.tif']:
-                                try:
-                                    st.image(str(img_path), caption=img_path.name, use_column_width=True)
-                                except Exception:
-                                    st.info(f"Example: {img_path.name}")
-                            else:
-                                # For PDFs, show an icon or info message
-                                st.info(f"PDF Example: {img_path.name}")
-                    
-                    # Second row
-                    columns2 = st.columns(3)
-                    for i, img_path in enumerate(sample_images[3:6]):
-                        with columns2[i]:
-                            if img_path.suffix.lower() in ['.jpg', '.jpeg', '.png', '.tif']:
-                                try:
-                                    st.image(str(img_path), caption=img_path.name, use_column_width=True)
-                                except Exception:
-                                    st.info(f"Example: {img_path.name}")
-                            else:
-                                # For PDFs, show an icon or info message
-                                st.info(f"PDF Example: {img_path.name}")
+            # Try backup directory if still not enough
+            if len(sample_images) < 6 and backup_dir.exists():
+                remaining = 6 - len(sample_images)
+                backup_samples = (
+                    list(backup_dir.glob("*.jpg")) + 
+                    list(backup_dir.glob("*.jpeg")) + 
+                    list(backup_dir.glob("*.png"))
+                )[:remaining]
+                sample_images.extend(backup_samples)
+        
+        # Render the examples using custom HTML for better layout control
+        if sample_images:
+            # Start the grid container
+            grid_html = '<div class="example-grid">'
+            
+            # Add each example to the grid
+            for img_path in sample_images:
+                if img_path.suffix.lower() in ['.jpg', '.jpeg', '.png', '.tif']:
+                    try:
+                        # Convert image to base64 for embedding
+                        with open(img_path, "rb") as img_file:
+                            img_data = base64.b64encode(img_file.read()).decode()
+                        
+                        # Create item HTML with optimized responsive layout
+                        img_name = img_path.name
+                        # Trim long names
+                        display_name = img_name[:18] + "..." if len(img_name) > 20 else img_name
+                        
+                        grid_html += f'''
+                        <div class="example-item">
+                            <img src="data:image/{img_path.suffix.lower().replace('.', '')};base64,{img_data}" 
+                                 alt="{img_name}" class="example-image">
+                            <div class="example-caption">{display_name}</div>
+                        </div>
+                        '''
+                    except Exception as e:
+                        # Fallback for any loading errors
+                        grid_html += f'''
+                        <div class="example-item">
+                            <div style="height:150px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;">
+                                <span style="color:#666;">Image Error</span>
+                            </div>
+                            <div class="example-caption">{img_path.name}</div>
+                        </div>
+                        '''
                 else:
-                    # If we have 3 or fewer samples, just use one row
-                    columns = st.columns(min(3, len(sample_images)))
-                    for i, img_path in enumerate(sample_images):
-                        with columns[i % len(columns)]:
-                            if img_path.suffix.lower() in ['.jpg', '.jpeg', '.png', '.tif']:
-                                try:
-                                    st.image(str(img_path), caption=img_path.name, use_column_width=True)
-                                except Exception:
-                                    st.info(f"Example: {img_path.name}")
-                            else:
-                                # For PDFs, show an icon or info message
-                                st.info(f"PDF Example: {img_path.name}")
-            else:
-                st.info("No example documents found. Upload your own document to get started.")# Minor update
+                    # For PDFs, show placeholder
+                    grid_html += f'''
+                    <div class="example-item">
+                        <div style="height:150px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;">
+                            <span style="font-size:32px;">📄</span>
+                        </div>
+                        <div class="example-caption">{img_path.name}</div>
+                    </div>
+                    '''
+            
+            # Close the grid container
+            grid_html += '</div>'
+            
+            # Render the grid with unsafe_allow_html
+            st.markdown(grid_html, unsafe_allow_html=True)
+        else:
+            st.info("No example documents found. Upload your own document to get started.")# Minor update

structured_ocr.py

@@ -1669,7 +1669,7 @@ class StructuredOCR:
                     "languages": ["English"],
                     "ocr_contents": {
                         "raw_text": ocr_markdown[:50000] if ocr_markdown else "No text could be extracted",
-                        "error": f"AI processing failed: {str(e).replace('\"', '\\"')}"
+                        "error": f"AI processing failed: {str(e).replace('\"', '\\\"')}"
                     },
                     "processing_method": "fallback",
                     "processing_error": str(e),

ui/custom.css

@@ -265,6 +265,16 @@ button.streamlit-expanderHeader {
         gap: 20px !important;
         margin-bottom: 20px !important;
     }
+    
+    /* Force separate columns on mid-sized screens */
+    [data-testid="stHorizontalBlock"] {
+        flex-wrap: wrap !important;
+    }
+    
+    [data-testid="stHorizontalBlock"] > div {
+        min-width: 45% !important;
+        flex: 1 1 45% !important;
+    }
 }
 
 /* Modern Streamlit styling - better responsive behavior */
@@ -282,10 +292,22 @@ button.streamlit-expanderHeader {
         width: 100% !important;
     }
 
+    /* Critical fix for column display to prevent overlapping */
     [data-testid="column"] {
         width: 100% !important;
         flex: 1 1 100% !important;
         padding: 0 !important;
+        min-width: 100% !important;
+        max-width: 100% !important;
+        float: none !important;
+        clear: both !important;
+        display: block !important;
+    }
+    
+    /* Enforce correct column layout for Streamlit's container elements */
+    div[data-testid="stHorizontalBlock"] {
+        flex-direction: column !important;
+        display: block !important;
     }
     
     /* Make images more visible on small screens */
@@ -295,6 +317,14 @@ button.streamlit-expanderHeader {
         width: 100% !important;
         margin-bottom: 15px !important;
     }
+    
+    /* Fix example documents grid layout */
+    .stImage {
+        display: block !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+        width: 100% !important;
+    }
 }
 
 /* Fix image display in grid layout */