Update frontend/src/components/ocr/ExtractionOutput.jsx

frontend/src/components/ocr/ExtractionOutput.jsx

@@ -111,20 +111,59 @@ Payment Terms: Net 30
 Thank you for your business!`;
 
 // Helper function to convert object to XML
+// Prepare fields for JSON/XML output - remove duplicates and restructure
+function prepareFieldsForOutput(fields, format = "json") {
+  if (!fields || typeof fields !== "object") {
+    return fields;
+  }
+  
+  const output = { ...fields };
+  
+  // Remove full_text if pages array exists (to avoid duplication)
+  if (output.pages && Array.isArray(output.pages) && output.pages.length > 0) {
+    delete output.full_text;
+  }
+  
+  // For JSON: restructure pages into separate top-level fields (page_1, page_2, etc.)
+  if (format === "json" && output.pages && Array.isArray(output.pages)) {
+    output.pages.forEach((page, idx) => {
+      const pageNum = page.page_number || idx + 1;
+      output[`page_${pageNum}`] = {
+        text: page.text || "",
+        fields: page.fields || {},
+        confidence: page.confidence || 0,
+        doc_type: page.doc_type || "other"
+      };
+    });
+    // Remove pages array - we now have page_1, page_2, etc. as separate fields
+    delete output.pages;
+  }
+  
+  return output;
+}
+
 function objectToXML(obj, rootName = "extraction") {
+  // Prepare fields - remove full_text if pages exist
+  const preparedObj = prepareFieldsForOutput(obj, "xml");
+  
   let xml = `<?xml version="1.0" encoding="UTF-8"?>\n<${rootName}>\n`;
   
   const convert = (obj, indent = "  ") => {
     for (const [key, value] of Object.entries(obj)) {
       if (value === null || value === undefined) continue;
       
+      // Skip full_text if pages exist (already handled in prepareFieldsForOutput)
+      if (key === "full_text" && obj.pages && Array.isArray(obj.pages) && obj.pages.length > 0) {
+        continue;
+      }
+      
       if (Array.isArray(value)) {
         value.forEach((item) => {
           xml += `${indent}<${key}>\n`;
           if (typeof item === "object") {
             convert(item, indent + "  ");
           } else {
-            xml += `${indent}  ${item}\n`;
+            xml += `${indent}  ${escapeXML(String(item))}\n`;
           }
           xml += `${indent}</${key}>\n`;
         });
@@ -133,16 +172,25 @@ function objectToXML(obj, rootName = "extraction") {
         convert(value, indent + "  ");
         xml += `${indent}</${key}>\n`;
       } else {
-        xml += `${indent}<${key}>${value}</${key}>\n`;
+        xml += `${indent}<${key}>${escapeXML(String(value))}</${key}>\n`;
       }
     }
   };
   
-  convert(obj);
+  convert(preparedObj);
   xml += `</${rootName}>`;
   return xml;
 }
 
+function escapeXML(str) {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&apos;");
+}
+
 // Helper function to format fields as readable text
 function fieldsToText(fields) {
   if (!fields || typeof fields !== "object") {
@@ -250,7 +298,8 @@ export default function ExtractionOutput({ hasFile, isProcessing, isComplete, ex
   const handleCopy = () => {
     let content = "";
     if (activeTab === "json") {
-      content = JSON.stringify(fields, null, 2);
+      const preparedFields = prepareFieldsForOutput(fields, "json");
+      content = JSON.stringify(preparedFields, null, 2);
     } else if (activeTab === "xml") {
       content = objectToXML(fields);
     } else {
@@ -262,6 +311,11 @@ export default function ExtractionOutput({ hasFile, isProcessing, isComplete, ex
     setTimeout(() => setCopied(false), 2000);
   };
   
+  // Get prepared fields for display
+  const preparedFields = React.useMemo(() => {
+    return prepareFieldsForOutput(fields, "json");
+  }, [fields]);
+  
   // Update expanded sections when fields change
   React.useEffect(() => {
     if (extractionResult?.fields) {
@@ -472,8 +526,8 @@ export default function ExtractionOutput({ hasFile, isProcessing, isComplete, ex
             ) : activeTab === "json" ? (
               <div className="space-y-1">
                 <span className="text-slate-400">{"{"}</span>
-                {Object.keys(fields).length > 0 ? (
-                  Object.entries(fields).map(([key, value]) =>
+                {Object.keys(preparedFields).length > 0 ? (
+                  Object.entries(preparedFields).map(([key, value]) =>
                     renderSection(key, value, 1)
                   )
                 ) : (