Sync from GitHub: 4201f078caa4a5098a2839eba2eab3ab5586890c

app.py

@@ -279,6 +279,7 @@ async def process_invoice(
             "doc_id": result.get("doc_id", doc_id),
             "processing_time": result.get("processing_time_sec", 0),
             "confidence": result.get("confidence", 0),
+            "cost_estimate_usd": result.get("cost_estimate_usd", 0),
             "fields": fields  # Include raw fields for reference
         }, media_type="application/json; charset=utf-8")
         

frontend/src/App.jsx

@@ -16,6 +16,7 @@ function App() {
   const [previewImages, setPreviewImages] = useState([]);
   const [processingIndex, setProcessingIndex] = useState(null);
   const [resolutionMap, setResolutionMap] = useState({});
+  const [resultResolutionMap, setResultResolutionMap] = useState({});
 
   const handleFilesSelected = async (files) => {
     setProcessing(false);
@@ -127,16 +128,15 @@ function App() {
     }
   };
 
-  const handleReprocess = async (result) => {
+  const handleReprocess = async (result, resolution, adjustedDataUrl) => {
     const index = results.findIndex(r => r.key === result.key);
     if (index === -1) return;
 
     setProcessingIndex(index);
     
     try {
-      // Use current resolution-adjusted image
-      const processData = resolutionMap[result.key] || { dataUrl: imageDataMap[result.key] };
-      const blob = dataUrlToBlob(processData.dataUrl);
+      // Use resolution-adjusted image from ResultCard
+      const blob = dataUrlToBlob(adjustedDataUrl || imageDataMap[result.key]);
       
       const newResult = await processSingleInvoice(blob, result.filename);
       
@@ -249,12 +249,36 @@ function App() {
 
           {/* Progress Indicator */}
           {processing && (
-            <ProgressIndicator
-              total={progress.total}
-              completed={progress.completed}
-              current={progress.current}
-              results={results}
-            />
+            <div className="space-y-4">
+              <ProgressIndicator
+                total={progress.total}
+                completed={progress.completed}
+                current={progress.current}
+                results={results}
+              />
+              
+              {/* Show image being processed with scanning animation */}
+              {processingIndex !== null && previewImages[processingIndex] && (
+                <div className="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 p-6">
+                  <h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center">
+                    <svg className="w-5 h-5 mr-2 text-blue-500 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                    Processing: {previewImages[processingIndex].filename}
+                  </h3>
+                  <div className="relative bg-gray-50 rounded-lg p-4 flex justify-center items-center">
+                    <img 
+                      src={previewImages[processingIndex].dataUrl} 
+                      alt="Processing" 
+                      className="max-w-full max-h-96 rounded shadow-md"
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/10 rounded-lg">
+                      <div className="scanning-line"></div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
           )}
 
           {/* Results Section */}

frontend/src/components/ResultCard.jsx

@@ -1,11 +1,15 @@
 import React, { useRef, useEffect, useState } from 'react';
+import { SlidersHorizontal } from 'lucide-react';
 
 const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
   const canvasRef = useRef(null);
+  const previewCanvasRef = useRef(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
   const [signatureCrop, setSignatureCrop] = useState(null);
   const [stampCrop, setStampCrop] = useState(null);
   const [resolution, setResolution] = useState(100);
+  const [adjustedDataUrl, setAdjustedDataUrl] = useState(null);
+  const [previewDimensions, setPreviewDimensions] = useState({ width: 0, height: 0 });
 
   // Function to crop image regions
   const cropRegion = (img, coords, scaleX, scaleY) => {
@@ -122,6 +126,33 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
     img.src = imageData;
   }, [imageData, result]);
 
+  // Handle resolution adjustment for preview
+  useEffect(() => {
+    if (!imageData || !previewCanvasRef.current) return;
+
+    const canvas = previewCanvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    img.onload = () => {
+      const scale = resolution / 100;
+      const newWidth = Math.floor(img.width * scale);
+      const newHeight = Math.floor(img.height * scale);
+
+      canvas.width = newWidth;
+      canvas.height = newHeight;
+      setPreviewDimensions({ width: newWidth, height: newHeight });
+
+      ctx.drawImage(img, 0, 0, newWidth, newHeight);
+      
+      // Generate adjusted data URL
+      const adjustedUrl = canvas.toDataURL('image/jpeg', 0.95);
+      setAdjustedDataUrl(adjustedUrl);
+    };
+
+    img.src = imageData;
+  }, [imageData, resolution]);
+
   if (!result.success) {
     return (
       <div className="bg-red-50 border-2 border-red-200 rounded-xl p-6 mb-4">
@@ -161,7 +192,7 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
           </div>
           {onReprocess && (
             <button
-              onClick={() => onReprocess(result)}
+              onClick={() => onReprocess(result, resolution, adjustedDataUrl)}
               disabled={isProcessing}
               className="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
             >
@@ -183,6 +214,32 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
             </svg>
             Document Preview
           </h4>
+          
+          {/* Resolution Slider */}
+          <div className="bg-white rounded-lg p-4 shadow-sm border border-gray-200">
+            <div className="flex items-center justify-between mb-3">
+              <label className="text-sm font-medium text-gray-700 flex items-center gap-2">
+                <SlidersHorizontal className="w-4 h-4 text-primary-500" />
+                Adjust Resolution for Reprocessing
+              </label>
+              <span className="text-sm font-semibold text-primary-600">{resolution}%</span>
+            </div>
+            <input
+              type="range"
+              min="10"
+              max="100"
+              step="5"
+              value={resolution}
+              onChange={(e) => setResolution(parseInt(e.target.value))}
+              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb"
+              disabled={isProcessing}
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-2">
+              <span>10% (Fast)</span>
+              <span className="text-gray-400">Dimensions: {previewDimensions.width} × {previewDimensions.height}px</span>
+              <span>100% (Best)</span>
+            </div>
+          </div>
           <div className="relative bg-gray-50 rounded-lg p-4 flex justify-center items-center">
             <canvas ref={canvasRef} className="max-w-full h-auto rounded shadow-md" />
             {isProcessing && (
@@ -231,10 +288,10 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
                   <div className="text-lg font-bold text-green-600">{(result.confidence * 100).toFixed(1)}%</div>
                 </div>
               )}
-              {result.fields?.cost_estimate_usd !== undefined && (
+              {result.cost_estimate_usd !== undefined && (
                 <div className="bg-white rounded-lg p-3 shadow-sm text-center">
                   <div className="text-xs text-gray-500 mb-1">Cost</div>
-                  <div className="text-lg font-bold text-purple-600">${result.fields.cost_estimate_usd.toFixed(4)}</div>
+                  <div className="text-lg font-bold text-purple-600">${result.cost_estimate_usd.toFixed(4)}</div>
                 </div>
               )}
             </div>
@@ -337,6 +394,9 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
           </div>
         </div>
       </div>
+      
+      {/* Hidden canvas for resolution preview generation */}
+      <canvas ref={previewCanvasRef} style={{ display: 'none' }} />
     </div>
   );
 };