Optimize sidebar spacing and fix deprecated parameter

- Add proper section spacing in sidebar with dividers
- Replace deprecated use_column_width with use_container_width
- Simplify section headings and labels
- Make instruction examples more compact
- Normalize heading styles across UI
- Improve CSS for better element positioning

CLAUDE.md

@@ -0,0 +1,30 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+- Run app: `streamlit run app.py`
+- Test OCR functionality: `python structured_ocr.py <file_path>`
+- Process PDF files: `python pdf_ocr.py <file_path>`
+- Process single file with logging: `python process_file.py <file_path>`
+- Run typechecking: `mypy .`
+
+## Environment Setup
+- API key: Set `MISTRAL_API_KEY` in `.env` file or environment variable
+- Install dependencies: `pip install -r requirements.txt`
+- System requirements: `apt-get install poppler-utils tesseract-ocr` (or equivalent for your OS)
+
+## Code Style Guidelines
+- **Imports**: Standard library first, third-party next, local modules last
+- **Types**: Use Pydantic models and type hints for all functions
+- **Error handling**: Use specific exceptions with informative messages
+- **Naming**: snake_case for variables/functions, PascalCase for classes
+- **Documentation**: Google-style docstrings for all functions/classes
+- **Logging**: Use module-level loggers with appropriate log levels
+
+## Architecture
+- Core: `structured_ocr.py` - Main OCR processing with Mistral AI integration
+- Utils: `ocr_utils.py` - Utility functions for OCR text and image processing
+- PDF handling: `pdf_ocr.py` - PDF-specific processing functionality
+- Config: `config.py` - Configuration settings and API keys
+- Web: `app.py` - Streamlit interface with UI components in `/ui` directory

app.py

@@ -511,49 +511,60 @@ with st.sidebar:
     # Options title with reduced top margin
     st.markdown("<h2 style='margin-top:-25px; margin-bottom:5px; padding:0;'>Options</h2>", unsafe_allow_html=True)
     
-    # Reduce spacing between sidebar sections
+    # Comprehensive CSS for optimal sidebar spacing and layout
     st.markdown("""
     <style>
-    /* Reduce all spacing in sidebar */
+    /* Core sidebar spacing fixes */
     .block-container {padding-top: 0;}
     .stSidebar .block-container {padding-top: 0 !important;}
     .stSidebar [data-testid='stSidebarNav'] {margin-bottom: 0 !important;}
     .stSidebar [data-testid='stMarkdownContainer'] {margin-bottom: 0 !important; margin-top: 0 !important;}
     .stSidebar [data-testid='stVerticalBlock'] {gap: 0 !important;}
     
-    /* Make checkbox rows more compact */
-    .stCheckbox {margin-bottom: 0 !important; padding-bottom: 0 !important; padding-top: 0 !important;}
-    .stExpander {margin-top: 0 !important; margin-bottom: 10px !important;}
+    /* Input element optimization */
+    .stSidebar .stCheckbox {margin: 0 !important; padding: 0 !important;}
+    .stSidebar .stSelectbox {margin: 0 0 3px !important; padding: 0 !important;}
+    .stSidebar .stSlider {margin: 0 0 5px !important; padding: 0 !important;}
+    .stSidebar .stNumberInput {margin: 0 0 5px !important; padding: 0 !important;}
+    .stSidebar .stTextArea {margin: 0 0 5px !important; padding: 0 !important;}
+    .stSidebar .stTextInput {margin: 0 0 5px !important; padding: 0 !important;}
     
-    /* Reduce space between section headings and content */
+    /* Heading and label optimization */
     .stSidebar h1, .stSidebar h2, .stSidebar h3, .stSidebar h4, .stSidebar h5 {
-        margin-top: 0 !important;
-        margin-bottom: 0 !important;
-        padding-top: 0 !important;
-        padding-bottom: 0 !important;
+        margin: 2px 0 !important;
+        padding: 0 !important;
         line-height: 1.2 !important;
     }
     
-    /* Make selectbox and other inputs more compact */
-    .stSidebar .stSelectbox, .stSidebar .stSlider, .stSidebar .stNumberInput {
-        margin-bottom: 5px !important;
-        padding-bottom: 0 !important;
-        padding-top: 0 !important;
-    }
+    /* Label text optimization */
+    .stSidebar label {margin: 0 !important; line-height: 1.2 !important;}
+    .stSidebar .stTextArea label, .stSidebar .stSelectbox label {margin-top: 2px !important;}
+    
+    /* Help text optimization */
+    .stSidebar .stTooltipIcon {margin: 0 !important; height: 1em !important;}
+    
+    /* Slider optimization */
+    .stSidebar [data-baseweb="slider"] {margin: 10px 0 0 !important;}
+    
+    /* Expander optimization */
+    .stSidebar .stExpander {margin: 0 0 8px !important;}
+    .stSidebar .streamlit-expanderHeader {font-size: 0.9em !important;}
+    .stSidebar .streamlit-expanderContent {padding-top: 5px !important;}
     
-    /* Reduce all form element margins */
-    .stForm > div {margin-bottom: 5px !important;}
-    .stSidebar label {margin-bottom: 0 !important; line-height: 1.2 !important;}
+    /* Remove unnecessary margins in form elements */
+    .stSidebar .stForm > div {margin: 0 !important;}
     </style>
     """, unsafe_allow_html=True)
     
-    # Model options - more compact
-    st.markdown("##### Model Settings", help="Configure model options")
+    # Model options
     use_vision = st.checkbox("Use Vision Model", value=True, 
-                            help="For image files, use the vision model for improved analysis (may be slower)")
+                            help="Use vision model for improved analysis (may be slower)")
     
-    # Historical Context section with minimal spacing
-    st.markdown("##### Historical Context", help="Add historical context information")
+    # Add spacing between sections
+    st.markdown("<div style='margin: 10px 0;'></div>", unsafe_allow_html=True)
+    
+    # Document Context section
+    st.markdown("##### Document Context", help="Add context information")
     
     # Historical period selector
     historical_periods = [
@@ -566,10 +577,10 @@ with st.sidebar:
     ]
     
     selected_period = st.selectbox(
-        "Historical Period", 
+        "Time Period", 
         options=historical_periods,
         index=0,
-        help="Select the time period of the document for better OCR processing"
+        help="Select the time period of the document"
     )
     
     # Document purpose selector
@@ -585,13 +596,13 @@ with st.sidebar:
     ]
     
     selected_purpose = st.selectbox(
-        "Document Purpose",
+        "Document Type",
         options=document_purposes,
         index=0,
-        help="Select the purpose or type of the document for better OCR processing"
+        help="Select the purpose or type of the document"
     )
     
-    # Custom prompt field
+    # Dynamic custom prompt field
     custom_prompt_text = ""
     if selected_period != "Select period (if known)":
         custom_prompt_text += f"This is a {selected_period} document. "
@@ -599,59 +610,44 @@ with st.sidebar:
     if selected_purpose != "Select purpose (if known)":
         custom_prompt_text += f"It appears to be a {selected_purpose}. "
     
+    # Add spacing between sections
+    st.markdown("<div style='margin: 10px 0;'></div>", unsafe_allow_html=True)
+    
     custom_prompt = st.text_area(
-        "Additional Context", 
+        "Special Instructions", 
         value=custom_prompt_text,
-        placeholder="Example: This document has unusual handwriting with cursive script. Please identify any mentioned locations and dates.",
-        height=150,
+        placeholder="Example: Document has unusual cursive handwriting.",
+        height=90,
         max_chars=500,
         key="custom_analysis_instructions",
-        help="Powerful instructions field that impacts how the AI processes your document. Can request translations, format images correctly, extract specific information, or handle challenging documents. See the 'Additional Context Instructions & Examples' section below for more details."
+        help="Specify document features or extraction needs"
     )
     
-    # Enhanced instructions for Additional Context with more capabilities
-    with st.expander("Prompting Instructions"):
+    # Compact instructions expander
+    with st.expander("Instruction Examples"):
         st.markdown("""
-        ### How Additional Context Affects Processing
-
-        The "Additional Context" field provides instructions directly to the AI to influence how it processes your document. Use it to:
-        
-        #### Document Understanding
-        - **Specify handwriting styles**: "This document uses old-fashioned cursive with numerous flourishes and abbreviations"
-        - **Identify language features**: "The text contains archaic spellings common in 18th century documents"
-        - **Highlight focus areas**: "Look for mentions of financial transactions or dates of travel"
-        
-        #### Output Formatting & Languages
-        - **Request translations**: "After extracting the text, translate the content into Spanish"
-        - **Format image orientation**: "Ensure images are displayed in the same orientation as they appear in the document"
-        - **Format tables**: "Convert any tables in the document to structured format with clear columns"
-        
-        #### Special Processing
-        - **Handle challenges**: "Some portions may be faded; the page edges contain handwritten notes"
-        - **Technical terms**: "This is a medical document with specialized terminology about surgical procedures"
-        - **Organization**: "Separate the letter content from the address blocks and signature"
-        
-        #### Example Combinations
-        ```
-        This is a handwritten letter from the 1850s. The writer uses archaic spellings and formal language.
-        Please preserve paragraph structure, identify any place names mentioned, and note any references
-        to historical events. Format any lists as bullet points.
-        ```
+        - "Has faded text in corners"
+        - "Extract dates and locations"
+        - "Translate text to English"
+        - "Preserve tabular format"
         """)
     
+    # Add spacing between sections
+    st.markdown("<div style='margin: 10px 0;'></div>", unsafe_allow_html=True)
+    
     # Image preprocessing options with reduced spacing
-    st.markdown("##### Image Preprocessing", help="Options for enhancing images before OCR")
+    st.markdown("##### Image Processing", help="Options for enhancing images")
     with st.expander("Preprocessing Options", expanded=False):
         preprocessing_options = {}
         
-        # Document type selector - important for optimized processing
+        # Document type selector
         doc_type_options = ["standard", "handwritten", "typed", "printed"]
         preprocessing_options["document_type"] = st.selectbox(
             "Document Type",
             options=doc_type_options,
-            index=0,  # Default to standard
+            index=0,
             format_func=lambda x: x.capitalize(),
-            help="Select document type for optimized processing - choose 'Handwritten' for letters and manuscripts"
+            help="Select document type for optimized processing"
         )
         
         preprocessing_options["grayscale"] = st.checkbox("Convert to Grayscale", 
@@ -671,26 +667,25 @@ with st.sidebar:
             help="Rotate the document to correct orientation"
         )
     
+    # Add spacing between sections
+    st.markdown("<div style='margin: 10px 0;'></div>", unsafe_allow_html=True)
+    
     # PDF options with consistent formatting
-    st.markdown("##### PDF Options", help="Settings for PDF documents")
-    with st.expander("PDF Settings", expanded=False):
-        pdf_dpi = st.slider("PDF Resolution (DPI)", 72, 300, 100, 
-                          help="Higher DPI gives better quality but slower processing. Try 100 for faster processing.")
-        max_pages = st.number_input("Maximum Pages to Process", 1, 20, 3, 
+    st.markdown("##### PDF Settings", help="Options for PDF documents")
+    with st.expander("PDF Options", expanded=False):
+        pdf_dpi = st.slider("Resolution (DPI)", 72, 300, 100, 
+                          help="Higher DPI = better quality but slower")
+        max_pages = st.number_input("Max Pages", 1, 20, 3, 
                                   help="Limit number of pages to process")
         
         # Add PDF rotation option
-        rotation_options = [0, 90, 180, 270]
         pdf_rotation = st.select_slider(
-            "Rotate PDF",
+            "Rotation",
             options=rotation_options,
             value=0,
-            format_func=lambda x: f"{x}° {'(No rotation)' if x == 0 else ''}",
-            help="Rotate the PDF pages to correct orientation"
+            format_func=lambda x: f"{x}°",
+            help="Rotate PDF pages"
         )
-        
-        # Store PDF rotation separately instead of in preprocessing_options
-        # This prevents conflict with image preprocessing
 
 # Previous Results tab content
 with main_tab2:
@@ -1035,8 +1030,8 @@ with main_tab1:
                     # 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)
+                        # Use use_container_width=True for responsive design
+                        st.image(io.BytesIO(processed_bytes), use_container_width=True)
                     
                     # Show preprocessing metadata in a well-formatted caption
                     meta_items = []

ui/custom.css

@@ -74,6 +74,7 @@
 /* Fix for image preprocessing preview */
 .stExpander {
     overflow: hidden !important;
+    margin-bottom: 10px !important;
 }
 
 .stExpander img {
@@ -85,6 +86,8 @@
 /* Additional fixes for image preprocessing preview in expanders */
 .streamlit-expanderContent {
     overflow: hidden !important;
+    padding-top: 5px !important;
+    padding-bottom: 5px !important;
 }
 
 .streamlit-expanderContent img {
@@ -93,6 +96,41 @@
     object-fit: contain !important;
 }
 
+/* Compact sidebar expanders */
+.stSidebar .stExpander {
+    margin-top: 0 !important;
+    margin-bottom: 8px !important;
+}
+
+.stSidebar .streamlit-expanderHeader {
+    font-size: 0.9em !important;
+    padding: 5px !important;
+}
+
+.stSidebar .streamlit-expanderContent {
+    padding: 5px !important;
+}
+
+/* Better sidebar section spacing */
+.stSidebar h1, .stSidebar h2, .stSidebar h3, .stSidebar h4, .stSidebar h5 {
+    margin-top: 15px !important;
+    margin-bottom: 5px !important;
+    padding-top: 0 !important;
+    padding-bottom: 3px !important;
+    line-height: 1.2 !important;
+    font-weight: 600 !important;
+}
+
+/* First heading in sidebar doesn't need top margin */
+.stSidebar [data-testid="stVerticalBlock"] > div:first-child h5 {
+    margin-top: 0 !important;
+}
+
+/* Optimize sidebar checkbox positioning */
+.stSidebar .stCheckbox > div > div {
+    margin-bottom: 3px !important;
+}
+
 /* Metadata container styling */
 .metadata-container {
     background-color: #f8f9fa;