Spaces:
Running
Running
| import streamlit as st | |
| def load_css(): | |
| """Load custom CSS for the application - inspired by mistral-ocr implementations""" | |
| st.markdown(""" | |
| <style> | |
| /* Global styles - clean, modern approach with consistent line height */ | |
| :root { | |
| --standard-line-height: 1.5; | |
| --standard-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| --standard-color: #111827; | |
| } | |
| body { | |
| font-family: var(--standard-font); | |
| color: var(--standard-color); | |
| line-height: var(--standard-line-height); | |
| } | |
| /* Remove all container backgrounds that cause the white box issue */ | |
| div[data-testid="stMarkdownContainer"], | |
| div[data-testid="stText"], | |
| div.stMarkdown, | |
| .stText > div:first-child, | |
| .element-container > div, | |
| div[data-testid="column"] > div > div > div { | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| border: none !important; | |
| border-radius: 0 !important; | |
| padding: 0 !important; | |
| margin: 0 !important; | |
| } | |
| /* Base text styling with standardized line height */ | |
| div[data-testid="stMarkdownContainer"] > p { | |
| margin: 0 0 0.3rem 0 !important; | |
| padding: 0 !important; | |
| font-size: 0.95rem !important; | |
| line-height: var(--standard-line-height) !important; | |
| } | |
| /* Move content to top of columns with minimal padding */ | |
| [data-testid="column"] { | |
| align-items: flex-start !important; | |
| padding: 0 0.5rem !important; | |
| gap: 0.5rem !important; | |
| } | |
| /* Clean minimal heading styles with better line height */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Inter', system-ui, sans-serif; | |
| font-weight: 600; | |
| color: #111827; | |
| margin: 0.4rem 0 0.2rem 0 !important; | |
| padding: 0 !important; | |
| background-color: transparent !important; | |
| line-height: 1.3 !important; /* Slightly increased for headings but still compact */ | |
| } | |
| /* Make h1 headings significantly smaller */ | |
| h1 { | |
| font-size: 1.3em !important; /* Reduced from default ~2em */ | |
| } | |
| /* Simple section headers with subtle styling */ | |
| .block-container [data-testid="column"] h4 { | |
| font-size: 0.95rem !important; | |
| font-weight: 600 !important; | |
| color: #374151 !important; | |
| border-bottom: 1px solid #e5e7eb; | |
| padding-bottom: 0.15rem !important; | |
| margin-bottom: 0.25rem !important; | |
| } | |
| /* Reduce whitespace between elements */ | |
| .element-container { | |
| margin-bottom: 0.2rem !important; | |
| } | |
| /* Custom scrollbar styling */ | |
| .ocr-text-container::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| .ocr-text-container::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 3px; | |
| } | |
| .ocr-text-container::-webkit-scrollbar-thumb { | |
| background: #c1c1c1; | |
| border-radius: 3px; | |
| } | |
| .ocr-text-container::-webkit-scrollbar-thumb:hover { | |
| background: #a0a0a0; | |
| } | |
| /* Styling for all expanders/accordions */ | |
| .st-expander, | |
| details.streamlit-expanderHeader { | |
| border: 1px solid #e5e7eb !important; | |
| border-radius: 4px !important; | |
| box-shadow: none !important; | |
| background-color: transparent !important; | |
| margin-bottom: 6px !important; | |
| } | |
| .st-expanderHeader, | |
| summary.streamlit-expanderHeader { | |
| font-size: 0.95rem !important; | |
| font-weight: 600 !important; | |
| color: #374151 !important; | |
| padding: 0.4rem 0.6rem !important; | |
| background-color: rgba(241, 245, 249, 0.5) !important; | |
| border-bottom: 1px solid #e5e7eb !important; | |
| border-radius: 3px 3px 0 0 !important; | |
| } | |
| .st-expanderContent, | |
| details[open] > div:nth-child(2) { | |
| border-top: none !important; | |
| padding: 0.4rem 0.6rem !important; | |
| background-color: transparent !important; | |
| } | |
| /* Set expander text to have good contrast */ | |
| .st-expanderContent p, | |
| .st-expanderContent li, | |
| .st-expanderContent span { | |
| color: #1f2937 !important; | |
| } | |
| /* Streamlined OCR image display */ | |
| .ocr-image-container { | |
| border: 1px solid #e2e8f0; | |
| border-radius: 4px; | |
| padding: 0; | |
| background-color: transparent; | |
| margin-bottom: 5px; | |
| } | |
| .ocr-image-container img { | |
| border-radius: 4px; | |
| width: 100%; | |
| } | |
| /* Subtle document sections */ | |
| .document-section { | |
| margin-bottom: 0.4rem !important; | |
| } | |
| /* Compact tag styling - with higher specificity to override custom.css */ | |
| .document-content .subject-tag, | |
| div[data-testid="stHorizontalBlock"] .subject-tag, | |
| div[data-testid="stVerticalBlock"] .subject-tag, | |
| .subject-tag { | |
| display: inline-block !important; | |
| padding: 0.1rem 0.4rem !important; | |
| border-radius: 3px !important; | |
| font-size: 0.7rem !important; | |
| margin: 0 0.2rem 0.2rem 0 !important; | |
| background-color: #f3f4f6 !important; | |
| color: #374151 !important; | |
| border: 1px solid #e5e7eb !important; | |
| font-family: var(--standard-font) !important; | |
| } | |
| /* Tag color overrides with higher specificity */ | |
| .document-content .tag-time-period, | |
| .tag-time-period { color: #1e40af !important; background-color: #eff6ff !important; border-color: #bfdbfe !important; } | |
| .document-content .tag-language, | |
| .tag-language { color: #065f46 !important; background-color: #ecfdf5 !important; border-color: #a7f3d0 !important; } | |
| .document-content .tag-document-type, | |
| .tag-document-type { color: #5b21b6 !important; background-color: #f5f3ff !important; border-color: #ddd6fe !important; } | |
| .document-content .tag-subject, | |
| .tag-subject { color: #166534 !important; background-color: #f0fdf4 !important; border-color: #bbf7d0 !important; } | |
| .document-content .tag-download, | |
| .tag-download { | |
| color: #1e40af !important; | |
| background-color: #dbeafe !important; | |
| border-color: #93c5fd !important; | |
| text-decoration: none !important; | |
| cursor: pointer !important; | |
| transition: all 0.2s ease !important; | |
| } | |
| .document-content .tag-download:hover, | |
| .tag-download:hover { | |
| background-color: #93c5fd !important; /* Darker blue on hover */ | |
| border-color: #3b82f6 !important; /* Darker border */ | |
| color: #1e3a8a !important; /* Darker text */ | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* More pronounced shadow */ | |
| } | |
| /* For any default tags that might use the old styling */ | |
| .document-content .tag-default, | |
| .tag-default { color: #374151 !important; background-color: #f3f4f6 !important; border-color: #e5e7eb !important; } | |
| /* Document content styling to ensure consistency */ | |
| .document-content, | |
| .document-section { | |
| font-family: var(--standard-font) !important; | |
| line-height: var(--standard-line-height) !important; | |
| color: var(--standard-color) !important; | |
| } | |
| /* Clean text area */ | |
| .stTextArea textarea { | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 0.9rem; | |
| line-height: var(--standard-line-height); /* Consistent line height */ | |
| padding: 0.5rem; | |
| } | |
| /* Button styling - fixed for text overflow issues */ | |
| .stButton > button { | |
| border-radius: 4px; | |
| font-weight: 400; | |
| line-height: var(--standard-line-height); | |
| padding: 0.4rem 0.75rem !important; | |
| margin: 0; | |
| min-width: 150px !important; /* Increased minimum width */ | |
| white-space: normal !important; /* Allow text to wrap if needed */ | |
| overflow: visible !important; /* Ensure text doesn't get cut off */ | |
| height: auto !important; /* Allow height to adjust as needed */ | |
| text-overflow: clip !important; /* Don't clip text */ | |
| display: inline-block !important; /* Better content handling */ | |
| text-align: center !important; /* Center text */ | |
| } | |
| /* Fix button text alignment and prevent truncation */ | |
| .stButton > button > div, | |
| .stButton > button span, | |
| .stButton > button p { | |
| display: inline-block !important; | |
| align-items: center; | |
| white-space: normal !important; | |
| overflow: visible !important; | |
| width: auto !important; | |
| text-overflow: clip !important; | |
| word-wrap: normal !important; | |
| } | |
| /* Fix for all action buttons in the application */ | |
| [data-testid="stHorizontalBlock"] button, | |
| button[key="close_document_btn"], | |
| button[key="process_document_btn"], | |
| button[key="load_sample_btn"], | |
| button[key="view_btn"], | |
| .stDownloadButton button, | |
| button[key*="copy_btn"], | |
| button[key*="download_btn"], | |
| button[key*="view_"] { | |
| width: auto !important; | |
| min-width: 150px !important; | |
| max-width: none !important; | |
| display: inline-block !important; | |
| white-space: normal !important; | |
| overflow: visible !important; | |
| text-align: center !important; | |
| text-overflow: clip !important; | |
| word-break: normal !important; | |
| padding: 0.4rem 0.75rem !important; | |
| } | |
| /* Ensure text doesn't wrap awkwardly for buttons */ | |
| button span p { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| white-space: normal !important; | |
| overflow: visible !important; | |
| } | |
| /* Extra button container fixes for all button types */ | |
| .stButton, .stDownloadButton, [data-testid="stDownloadButton"] { | |
| width: auto !important; | |
| min-width: 150px !important; | |
| overflow: visible !important; | |
| display: block !important; | |
| background-color: white; | |
| border: 1px solid #ddd; | |
| box-shadow: none !important; | |
| } | |
| /* Ensure consistent spacing in widgets */ | |
| .row-widget { | |
| padding: 0.15rem 0 !important; | |
| } | |
| /* Fix spacing in expanders */ | |
| .stExpander > .streamlit-expanderContent > div { | |
| padding-top: 0.15rem !important; | |
| } | |
| /* Optimized sidebar */ | |
| .sidebar .block-container { | |
| padding-top: 0.6rem; | |
| } | |
| .sidebar .stRadio > div { | |
| flex-direction: row; | |
| } | |
| .sidebar .stRadio label { | |
| margin-right: 0.75rem; | |
| font-size: 0.9rem; | |
| } | |
| /* Clean alert styles */ | |
| .stSuccess, .stError, .stInfo, .stWarning { | |
| border-radius: 4px; | |
| padding: 0.3rem 0.6rem; | |
| margin: 0.2rem 0; | |
| } | |
| /* Fix any remaining spacing issues */ | |
| div.element-container > div > div { | |
| margin: 0 !important; | |
| line-height: var(--standard-line-height); /* Ensure consistent line height */ | |
| } | |
| /* Fix column layouts for button containers */ | |
| [data-testid="column"] > div:has(.stButton) { | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| min-height: 38px; /* Match standard button height */ | |
| } | |
| /* Fix for tabs being cut off at the top of the page */ | |
| /* Main container adjustments to avoid header overlap */ | |
| .main .block-container { | |
| padding-top: 3rem !important; /* Increased top padding to make room for Streamlit header */ | |
| } | |
| [data-testid="stTabs"] { | |
| width: 100%; | |
| overflow-x: visible !important; | |
| position: relative; | |
| z-index: 1; /* Ensure tabs are on the right layer */ | |
| } | |
| [data-testid="stTabs"] > div:first-child { | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| overflow-x: visible !important; | |
| } | |
| [data-testid="stTabs"] [role="tab"] { | |
| padding: 0.5rem 1rem; | |
| min-width: fit-content; | |
| white-space: nowrap; | |
| } | |
| [data-testid="stTabs"] [role="tablist"] { | |
| overflow-x: visible !important; | |
| flex-wrap: nowrap; | |
| margin-top: 1rem; /* Add a bit more space at the top */ | |
| } | |
| /* Fix header overlap issues */ | |
| header[data-testid="stHeader"] { | |
| z-index: 999 !important; /* Keep header on top */ | |
| } | |
| </style> | |
| """, unsafe_allow_html=True) | |