Sync from GitHub: 9ba6bb6324a7e4f6a8cdae6be63edad427949587

frontend/src/App.jsx

@@ -90,7 +90,7 @@ function App() {
 
         try {
           // Use resolution-adjusted image if available
-          const processData = resolutionMap[preview.key] || { dataUrl: preview.dataUrl };
+          const processData = resolutionMap[preview.key] || { dataUrl: preview.dataUrl, resolution: 100 };
           const blob = dataUrlToBlob(processData.dataUrl);
           
           const result = await processSingleInvoice(blob, preview.filename);
@@ -101,7 +101,9 @@ function App() {
             originalFile: preview.filename,
             index: i,
             success: true,
-            key: preview.key
+            key: preview.key,
+            processedImageData: processData.dataUrl,
+            processedResolution: processData.resolution
           };
           
           setResults(prev => [...prev, resultWithMetadata]);
@@ -146,7 +148,9 @@ function App() {
         originalFile: result.originalFile,
         index: index,
         success: true,
-        key: result.key
+        key: result.key,
+        processedImageData: adjustedDataUrl || imageDataMap[result.key],
+        processedResolution: resolution
       };
       
       setResults(prev => {
@@ -296,11 +300,14 @@ function App() {
 
               {results.map((result, index) => {
                 const imageKey = result.key || `${result.originalFile}_${index}`;
+                const originalImage = imageDataMap[imageKey] || imageDataMap[Object.keys(imageDataMap)[index]];
+                const processedImage = result.processedImageData || originalImage;
                 return (
                   <ResultCard
                     key={index}
                     result={result}
-                    imageData={imageDataMap[imageKey] || imageDataMap[Object.keys(imageDataMap)[index]]}
+                    imageData={originalImage}
+                    processedImageData={processedImage}
                     onReprocess={handleReprocess}
                     isProcessing={processingIndex === index}
                   />

frontend/src/components/ResultCard.jsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { SlidersHorizontal } from 'lucide-react';
 
-const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
+const ResultCard = ({ result, imageData, processedImageData, onReprocess, isProcessing }) => {
   const canvasRef = useRef(null);
   const previewCanvasRef = useRef(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
@@ -10,7 +10,7 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
   const [resolution, setResolution] = useState(100);
   const [adjustedDataUrl, setAdjustedDataUrl] = useState(null);
   const [previewDimensions, setPreviewDimensions] = useState({ width: 0, height: 0 });
-  const [currentImageData, setCurrentImageData] = useState(imageData);
+  const [currentImageData, setCurrentImageData] = useState(processedImageData || imageData);
 
   // Function to crop image regions
   const cropRegion = (img, coords, scaleX, scaleY) => {
@@ -35,6 +35,13 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
     return cropCanvas.toDataURL();
   };
 
+  // Initialize currentImageData with processedImageData when available
+  useEffect(() => {
+    if (processedImageData) {
+      setCurrentImageData(processedImageData);
+    }
+  }, [processedImageData]);
+
   // Main effect to draw image with bounding boxes using currentImageData
   useEffect(() => {
     if (!currentImageData || !canvasRef.current) return;
@@ -70,19 +77,16 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
       const scaleX = width / img.width;
       const scaleY = height / img.height;
 
-      // Create cropped images for signature and stamp from ORIGINAL imageData
-      const originalImg = new Image();
-      originalImg.onload = () => {
-        if (result.signature_coords && result.signature_coords.length > 0) {
-          const sigCrop = cropRegion(originalImg, result.signature_coords, 1, 1);
-          setSignatureCrop(sigCrop);
-        }
-        if (result.stamp_coords && result.stamp_coords.length > 0) {
-          const stCrop = cropRegion(originalImg, result.stamp_coords, 1, 1);
-          setStampCrop(stCrop);
-        }
-      };
-      originalImg.src = imageData;
+      // Create cropped images for signature and stamp from the CURRENT (processed) image
+      // This ensures crops match the resolution that was sent to the API
+      if (result.signature_coords && result.signature_coords.length > 0) {
+        const sigCrop = cropRegion(img, result.signature_coords, 1, 1);
+        setSignatureCrop(sigCrop);
+      }
+      if (result.stamp_coords && result.stamp_coords.length > 0) {
+        const stCrop = cropRegion(img, result.stamp_coords, 1, 1);
+        setStampCrop(stCrop);
+      }
 
       // Draw bounding boxes for signature
       if (result.signature_coords && result.signature_coords.length > 0) {