milwright commited on
Commit
e404682
·
1 Parent(s): a268368

Fix UI issues and enhance appearance

Browse files

- Fixed fullscreen buttons with improved CSS visibility
- Repositioned loading bar and progress messages above preprocessed preview
- Improved text visibility in Previous Results tab
- Updated About page with more comprehensive and relevant information
- Fixed styling for document containers and improved text contrast

Files changed (2) hide show
  1. app.py +38 -25
  2. ui/custom.css +19 -0
app.py CHANGED
@@ -880,33 +880,45 @@ with main_tab3:
880
  """
881
 
882
  st.markdown(f"""
883
- ### About This Application
884
 
885
- This app uses [Mistral AI's Document OCR](https://docs.mistral.ai/capabilities/document/) to extract text and images from historical documents.
886
 
887
- It can process:
888
- - Image files (jpg, png, etc.)
889
- - PDF documents (multi-page support)
 
 
890
 
891
- The extracted content is processed into structured data based on the document type, combining:
892
- - Text extraction with `mistral-ocr-latest`
893
- - Analysis with language models
894
- - Layout preservation with images
 
 
895
 
896
- View results in three formats:
897
- - Structured HTML view
898
- - Raw JSON (for developers)
899
- - Markdown with images (preserves document layout)
 
900
 
901
- **New Features:**
902
- - Image preprocessing for better OCR quality
903
- - PDF resolution and page controls
904
- - Document rotation (90°, 180°, 270°)
905
- - Custom instructions for special document analysis
906
- - Performance mode selection (Speed/Balance/Quality)
907
- - Progress tracking during processing
908
- - Previous Results tab to review processed documents
909
- - Enhanced rate limit handling with automatic retry
 
 
 
 
 
 
 
910
  {fallback_notice}
911
  """)
912
 
@@ -926,6 +938,10 @@ with main_tab1:
926
  with left_col:
927
  process_button = st.button("Process Document")
928
 
 
 
 
 
929
  # Image preprocessing preview - automatically show only the preprocessed version
930
  if any(preprocessing_options.values()) and uploaded_file.type.startswith('image/'):
931
  st.markdown("**Preprocessed Preview**")
@@ -955,9 +971,6 @@ with main_tab1:
955
  st.error(f"Error in preprocessing: {str(e)}")
956
  st.info("Try using grayscale preprocessing for PNG images with transparency")
957
 
958
- # Empty container for progress indicators - will be filled during processing
959
- progress_placeholder = st.empty()
960
-
961
  # Container for success message (will be filled after processing)
962
  # No extra spacing needed as it will be managed programmatically
963
  metadata_placeholder = st.empty()
 
880
  """
881
 
882
  st.markdown(f"""
883
+ ### About Historical Document OCR
884
 
885
+ This application specializes in processing historical documents using [Mistral AI's Document OCR](https://docs.mistral.ai/capabilities/document/), which is particularly effective for handling challenging textual materials.
886
 
887
+ #### Document Processing Capabilities
888
+ - **Historical Images**: Process vintage photographs, scanned historical papers, manuscripts
889
+ - **Handwritten Documents**: Extract text from letters, journals, notes, and records
890
+ - **Multi-Page PDFs**: Process historical books, articles, and longer documents
891
+ - **Mixed Content**: Handle documents with both text and imagery
892
 
893
+ #### Key Features
894
+ - **Advanced Image Preprocessing**
895
+ - Grayscale conversion optimized for historical documents
896
+ - Denoising to remove artifacts and improve clarity
897
+ - Contrast adjustment to enhance faded text
898
+ - Document rotation for proper orientation
899
 
900
+ - **Document Analysis**
901
+ - Text extraction with `mistral-ocr-latest`
902
+ - Structured data extraction: dates, names, places, topics
903
+ - Multi-language support with automatic detection
904
+ - Handling of period-specific terminology and obsolete language
905
 
906
+ - **Flexible Output Formats**
907
+ - Structured view with organized content sections
908
+ - Developer JSON for integration with other applications
909
+ - Visual representation preserving original document layout
910
+ - Downloadable results in various formats
911
+
912
+ #### Historical Context
913
+ Add period-specific context to improve analysis:
914
+ - Historical period selection
915
+ - Document purpose identification
916
+ - Custom instructions for specialized terminology
917
+
918
+ #### Data Privacy
919
+ - All document processing happens through secure AI processing
920
+ - No documents are permanently stored on the server
921
+ - Results are only saved in your current session
922
  {fallback_notice}
923
  """)
924
 
 
938
  with left_col:
939
  process_button = st.button("Process Document")
940
 
941
+ # Empty container for progress indicators - will be filled during processing
942
+ # Positioned right after the process button for better visibility
943
+ progress_placeholder = st.empty()
944
+
945
  # Image preprocessing preview - automatically show only the preprocessed version
946
  if any(preprocessing_options.values()) and uploaded_file.type.startswith('image/'):
947
  st.markdown("**Preprocessed Preview**")
 
971
  st.error(f"Error in preprocessing: {str(e)}")
972
  st.info("Try using grayscale preprocessing for PNG images with transparency")
973
 
 
 
 
974
  # Container for success message (will be filled after processing)
975
  # No extra spacing needed as it will be managed programmatically
976
  metadata_placeholder = st.empty()
ui/custom.css CHANGED
@@ -97,6 +97,25 @@
97
  border-left: 3px solid #4285f4;
98
  }
99
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  /* Additional image fixes for all containers */
101
  .document-content img,
102
  .markdown-text-container img,
 
97
  border-left: 3px solid #4285f4;
98
  }
99
 
100
+ /* Fix fullscreen button styling */
101
+ button[title="View fullscreen"],
102
+ button.streamlit-expanderHeader {
103
+ z-index: 10 !important;
104
+ background-color: rgba(255, 255, 255, 0.8) !important;
105
+ visibility: visible !important;
106
+ opacity: 1 !important;
107
+ display: flex !important;
108
+ }
109
+
110
+ /* Make text visible in Previous Results tab */
111
+ .previous-results-container h3,
112
+ .previous-results-container p,
113
+ .previous-results-container .result-filename,
114
+ .previous-results-container .result-date,
115
+ .previous-results-container .result-tag {
116
+ color: #212121 !important;
117
+ }
118
+
119
  /* Additional image fixes for all containers */
120
  .document-content img,
121
  .markdown-text-container img,