Fix document metadata white bar issue and JSON parsing error

app.py

@@ -800,17 +800,32 @@ with main_tab2:
             
             with view_tab2:
                 # Show the raw JSON with an option to download it
-                st.json(selected_result)
+                try:
+                    st.json(selected_result)
+                except Exception as e:
+                    st.error(f"Error displaying JSON: {str(e)}")
+                    # Try a safer approach with string representation
+                    st.code(str(selected_result))
                 
                 # Add JSON download button
-                json_str = json.dumps(selected_result, indent=2)
-                filename = selected_result.get('file_name', 'document').split('.')[0]
-                st.download_button(
-                    label="Download JSON",
-                    data=json_str,
-                    file_name=f"{filename}_data.json",
-                    mime="application/json"
-                )
+                try:
+                    json_str = json.dumps(selected_result, indent=2)
+                    filename = selected_result.get('file_name', 'document').split('.')[0]
+                    st.download_button(
+                        label="Download JSON",
+                        data=json_str,
+                        file_name=f"{filename}_data.json",
+                        mime="application/json"
+                    )
+                except Exception as e:
+                    st.error(f"Error creating JSON download: {str(e)}")
+                    # Fallback to string representation for download
+                    st.download_button(
+                        label="Download as Text",
+                        data=str(selected_result),
+                        file_name=f"{filename}_data.txt", 
+                        mime="text/plain"
+                    )
             
             if has_images and 'pages_data' in selected_result:
                 with view_tab3:
@@ -1138,8 +1153,10 @@ with main_tab1:
                 
                 # Document Metadata in the top right of the right column
                 with right_col:
-                    # Directly add the subheader and container without nesting - fix white container
-                    st.markdown('<h3 style="margin-bottom:0; padding-bottom:0;">Document Metadata</h3><div class="metadata-container" style="margin-top:0;">', unsafe_allow_html=True)
+                    # Add the subheader separately to avoid the white bar
+                    st.subheader("Document Metadata")
+                    # Create a clean metadata container
+                    st.markdown('<div class="metadata-container">', unsafe_allow_html=True)
                     
                     # Display file info
                     st.write(f"**File Name:** {result.get('file_name', uploaded_file.name)}")
@@ -1240,14 +1257,22 @@ with main_tab1:
                                                         html_list += f"<li>{item}</li>"
                                                         st.write(f"- {item}")
                                                     elif isinstance(item, dict):
-                                                        st.json(item)
+                                                        try:
+                                                            st.json(item)
+                                                        except Exception as e:
+                                                            st.error(f"Error displaying JSON: {str(e)}")
+                                                            st.code(str(item))
                                         else:
                                             for item in content:
                                                 if isinstance(item, str):
                                                     html_list += f"<li>{item}</li>"
                                                     st.write(f"- {item}")
                                                 elif isinstance(item, dict):
-                                                    st.json(item)
+                                                    try:
+                                                        st.json(item)
+                                                    except Exception as e:
+                                                        st.error(f"Error displaying JSON: {str(e)}")
+                                                        st.code(str(item))
                                         html_list += "</ul>"
                                         html_content += html_list
                                     elif isinstance(content, dict):
@@ -1276,9 +1301,19 @@ with main_tab1:
                         # Show the raw JSON for developers, with an expander for large results
                         if len(json.dumps(result)) > 5000:
                             with st.expander("View full JSON"):
-                                st.json(result)
+                                try:
+                                    st.json(result)
+                                except Exception as e:
+                                    st.error(f"Error displaying JSON: {str(e)}")
+                                    # Fallback to string representation 
+                                    st.code(str(result))
                         else:
-                            st.json(result)
+                            try:
+                                st.json(result)
+                            except Exception as e:
+                                st.error(f"Error displaying JSON: {str(e)}")
+                                # Fallback to string representation
+                                st.code(str(result))
                     
                     if has_images and 'pages_data' in result:
                         with view_tab3:

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)}"
+                        "error": f"AI processing failed: {str(e).replace('\"', '\\"')}"
                     },
                     "processing_method": "fallback",
                     "processing_error": str(e),

ui/custom.css

@@ -99,7 +99,7 @@
     border-radius: 4px;
     padding: 12px;
     margin-bottom: 20px;
-    margin-top: 0px !important;
+    margin-top: -10px !important; /* Negative margin to reduce gap with header */
     border-left: 3px solid #4285f4;
 }
 
@@ -111,15 +111,24 @@
 /* Fix spacing for headings above metadata container */
 .element-container h3 + div .metadata-container,
 .element-container h1 + div .metadata-container,
-.element-container h2 + div .metadata-container {
+.element-container h2 + div .metadata-container,
+.stHeading + div div {
     margin-top: 0 !important;
 }
 
+/* Fix for subheader and metadata container spacing */
+.stHeading ~ div {
+    margin-top: -10px !important;
+}
+
 /* Remove excess space between metadata heading and content */
 .stMarkdown + div div.element-container,
 .stMarkdown + div,
 .stHeading + div,
-.stHeading + div div.element-container {
+.stHeading + div div.element-container,
+header + div.stMarkdown + div,
+[data-testid="stHeader"] + div,
+.stHeading + * {
     margin-top: 0 !important;
     padding-top: 0 !important;
 }