Sync from GitHub: c230872b9b1bdc86965c2debf97a243408f4bf65

frontend/src/App.jsx

@@ -3,8 +3,9 @@ import { FileText, AlertCircle } from 'lucide-react';
 import FileUpload from './components/FileUpload';
 import ProgressIndicator from './components/ProgressIndicator';
 import ResultCard from './components/ResultCard';
+import ImagePreview from './components/ImagePreview';
 import { convertFileToImages, dataUrlToBlob } from './utils/fileConverter';
-import { processBatchInvoices } from './utils/api';
+import { processSingleInvoice } from './utils/api';
 
 function App() {
   const [processing, setProcessing] = useState(false);
@@ -12,17 +13,23 @@ function App() {
   const [progress, setProgress] = useState({ total: 0, completed: 0, current: '' });
   const [error, setError] = useState(null);
   const [imageDataMap, setImageDataMap] = useState({});
+  const [previewImages, setPreviewImages] = useState([]);
+  const [processingIndex, setProcessingIndex] = useState(null);
+  const [resolutionMap, setResolutionMap] = useState({});
 
   const handleFilesSelected = async (files) => {
-    setProcessing(true);
+    setProcessing(false);
     setResults([]);
     setError(null);
     setImageDataMap({});
+    setPreviewImages([]);
+    setResolutionMap({});
 
     try {
-      // Step 1: Convert all files to images
+      // Step 1: Convert all files to images and show previews
       const allImages = [];
       const imageData = {};
+      const previews = [];
 
       for (const file of files) {
         try {
@@ -30,13 +37,18 @@ function App() {
           images.forEach((img, idx) => {
             const key = `${file.name}_${idx}`;
             allImages.push({
-              blob: dataUrlToBlob(img.dataUrl),
+              key: key,
+              dataUrl: img.dataUrl,
               filename: img.filename,
               originalFile: img.originalFile,
               pageNumber: img.pageNumber,
-              key: key
             });
             imageData[key] = img.dataUrl;
+            previews.push({
+              key: key,
+              dataUrl: img.dataUrl,
+              filename: img.filename,
+            });
           });
         } catch (err) {
           console.error(`Error converting ${file.name}:`, err);
@@ -45,30 +57,117 @@ function App() {
       }
 
       setImageDataMap(imageData);
-      setProgress({ total: allImages.length, completed: 0, current: '' });
+      setPreviewImages(previews);
+      
+      // Initialize resolution map with 100% for all images
+      const initialResolutions = {};
+      previews.forEach(p => {
+        initialResolutions[p.key] = { dataUrl: p.dataUrl, resolution: 100 };
+      });
+      setResolutionMap(initialResolutions);
+
+    } catch (err) {
+      console.error('Processing error:', err);
+      setError(`Processing failed: ${err.message}`);
+    }
+  };
 
-      // Step 2: Process all images through the API
-      await processBatchInvoices(allImages, (index, result) => {
-        // Update progress
+  const handleProcessImages = async () => {
+    setProcessing(true);
+    setResults([]);
+    setError(null);
+    setProgress({ total: previewImages.length, completed: 0, current: '' });
+
+    try {
+      for (let i = 0; i < previewImages.length; i++) {
+        const preview = previewImages[i];
+        setProcessingIndex(i);
         setProgress(prev => ({
           ...prev,
-          completed: index + 1,
-          current: index < allImages.length - 1 ? allImages[index + 1].filename : ''
+          current: preview.filename
         }));
 
-        // Add result
-        setResults(prev => [...prev, result]);
-      });
+        try {
+          // Use resolution-adjusted image if available
+          const processData = resolutionMap[preview.key] || { dataUrl: preview.dataUrl };
+          const blob = dataUrlToBlob(processData.dataUrl);
+          
+          const result = await processSingleInvoice(blob, preview.filename);
+          
+          const resultWithMetadata = {
+            ...result,
+            filename: preview.filename,
+            originalFile: preview.filename,
+            index: i,
+            success: true,
+            key: preview.key
+          };
+          
+          setResults(prev => [...prev, resultWithMetadata]);
+        } catch (error) {
+          const errorResult = {
+            filename: preview.filename,
+            index: i,
+            success: false,
+            error: error.response?.data?.detail || error.message,
+            key: preview.key
+          };
+          setResults(prev => [...prev, errorResult]);
+        }
 
+        setProgress(prev => ({ ...prev, completed: i + 1 }));
+      }
     } catch (err) {
       console.error('Processing error:', err);
       setError(`Processing failed: ${err.message}`);
     } finally {
       setProcessing(false);
+      setProcessingIndex(null);
       setProgress(prev => ({ ...prev, current: '' }));
     }
   };
 
+  const handleReprocess = async (result) => {
+    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);
+      
+      const newResult = await processSingleInvoice(blob, result.filename);
+      
+      const resultWithMetadata = {
+        ...newResult,
+        filename: result.filename,
+        originalFile: result.originalFile,
+        index: index,
+        success: true,
+        key: result.key
+      };
+      
+      setResults(prev => {
+        const newResults = [...prev];
+        newResults[index] = resultWithMetadata;
+        return newResults;
+      });
+    } catch (error) {
+      setError(`Reprocessing failed: ${error.message}`);
+    } finally {
+      setProcessingIndex(null);
+    }
+  };
+
+  const handleResolutionChange = (key, dataUrl, resolution) => {
+    setResolutionMap(prev => ({
+      ...prev,
+      [key]: { dataUrl, resolution }
+    }));
+  };
+
   return (
     <div className="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
       <div className="max-w-7xl mx-auto">
@@ -94,6 +193,43 @@ function App() {
             <FileUpload onFilesSelected={handleFilesSelected} disabled={processing} />
           </div>
 
+          {/* Image Previews with Resolution Sliders */}
+          {previewImages.length > 0 && !processing && results.length === 0 && (
+            <div className="space-y-4">
+              <div className="flex items-center justify-between bg-white rounded-xl p-4 shadow-md">
+                <h2 className="text-xl font-bold text-gray-800">
+                  Preview & Adjust Resolution
+                </h2>
+                <span className="text-sm text-gray-600">
+                  {previewImages.length} {previewImages.length === 1 ? 'Image' : 'Images'}
+                </span>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {previewImages.map((preview, idx) => (
+                  <ImagePreview
+                    key={preview.key}
+                    imageData={preview.dataUrl}
+                    fileName={preview.filename}
+                    onResolutionChange={(dataUrl, resolution) => 
+                      handleResolutionChange(preview.key, dataUrl, resolution)
+                    }
+                  />
+                ))}
+              </div>
+
+              <button
+                onClick={handleProcessImages}
+                className="w-full bg-gradient-to-r from-green-500 to-green-600 text-white font-semibold py-4 px-6 rounded-lg hover:from-green-600 hover:to-green-700 transition-all shadow-lg hover:shadow-xl flex items-center justify-center space-x-2 text-lg"
+              >
+                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+                <span>Process {previewImages.length} Image{previewImages.length > 1 ? 's' : ''}</span>
+              </button>
+            </div>
+          )}
+
           {/* Error Display */}
           {error && (
             <div className="bg-red-50 border-2 border-red-200 rounded-xl p-4 flex items-start">
@@ -129,12 +265,14 @@ function App() {
               </div>
 
               {results.map((result, index) => {
-                const imageKey = `${result.originalFile}_${index}`;
+                const imageKey = result.key || `${result.originalFile}_${index}`;
                 return (
                   <ResultCard
                     key={index}
                     result={result}
                     imageData={imageDataMap[imageKey] || imageDataMap[Object.keys(imageDataMap)[index]]}
+                    onReprocess={handleReprocess}
+                    isProcessing={processingIndex === index}
                   />
                 );
               })}

frontend/src/components/ImagePreview.jsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Slider } from 'lucide-react';
+
+const ImagePreview = ({ imageData, fileName, onResolutionChange }) => {
+  const [resolution, setResolution] = useState(100);
+  const canvasRef = useRef(null);
+  const [originalDimensions, setOriginalDimensions] = useState({ width: 0, height: 0 });
+  const [currentDimensions, setCurrentDimensions] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!imageData || !canvasRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+
+    img.onload = () => {
+      if (!originalDimensions.width) {
+        setOriginalDimensions({ width: img.width, height: img.height });
+      }
+
+      // Calculate new dimensions based on resolution
+      const newWidth = Math.floor(img.width * (resolution / 100));
+      const newHeight = Math.floor(img.height * (resolution / 100));
+      
+      setCurrentDimensions({ width: newWidth, height: newHeight });
+
+      // Set display size (max 400px width for preview)
+      const displayWidth = Math.min(400, newWidth);
+      const displayHeight = Math.floor(newHeight * (displayWidth / newWidth));
+
+      canvas.width = displayWidth;
+      canvas.height = displayHeight;
+
+      // Draw scaled image
+      ctx.drawImage(img, 0, 0, displayWidth, displayHeight);
+
+      // Notify parent of resolution change
+      if (onResolutionChange) {
+        const resizedCanvas = document.createElement('canvas');
+        resizedCanvas.width = newWidth;
+        resizedCanvas.height = newHeight;
+        const resizedCtx = resizedCanvas.getContext('2d');
+        resizedCtx.drawImage(img, 0, 0, newWidth, newHeight);
+        const resizedDataUrl = resizedCanvas.toDataURL('image/jpeg', 0.95);
+        onResolutionChange(resizedDataUrl, resolution);
+      }
+    };
+
+    img.src = imageData;
+  }, [imageData, resolution]);
+
+  const handleResolutionChange = (e) => {
+    const newResolution = parseInt(e.target.value);
+    setResolution(newResolution);
+  };
+
+  return (
+    <div className="bg-white rounded-lg shadow-md p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-semibold text-gray-700">Preview: {fileName}</h4>
+        <span className="text-xs text-gray-500">
+          {currentDimensions.width} × {currentDimensions.height}px
+        </span>
+      </div>
+
+      <div className="bg-gray-50 rounded-lg p-3 flex justify-center">
+        <canvas ref={canvasRef} className="rounded shadow-sm" />
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-gray-700 flex items-center gap-2">
+            <Slider className="w-4 h-4" />
+            Resolution
+          </label>
+          <span className="text-sm font-bold text-primary-600">{resolution}%</span>
+        </div>
+        
+        <input
+          type="range"
+          min="10"
+          max="100"
+          value={resolution}
+          onChange={handleResolutionChange}
+          className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
+        />
+        
+        <div className="flex justify-between text-xs text-gray-500">
+          <span>Low Quality</span>
+          <span>Original</span>
+        </div>
+
+        {resolution < 100 && (
+          <div className="bg-blue-50 border border-blue-200 rounded p-2 text-xs text-blue-700">
+            💡 Lower resolution = faster processing & lower cost
+          </div>
+        )}
+      </div>
+
+      <div className="text-xs text-gray-500 space-y-1">
+        <div className="flex justify-between">
+          <span>Original:</span>
+          <span className="font-medium">{originalDimensions.width} × {originalDimensions.height}px</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Processing:</span>
+          <span className="font-medium text-primary-600">{currentDimensions.width} × {currentDimensions.height}px</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImagePreview;

frontend/src/components/ResultCard.jsx

@@ -1,8 +1,34 @@
 import React, { useRef, useEffect, useState } from 'react';
 
-const ResultCard = ({ result, imageData }) => {
+const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
   const canvasRef = 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);
+
+  // Function to crop image regions
+  const cropRegion = (img, coords, scaleX, scaleY) => {
+    if (!coords || coords.length === 0) return null;
+    
+    const [x1, y1, x2, y2] = coords[0];
+    const width = (x2 - x1) * scaleX;
+    const height = (y2 - y1) * scaleY;
+    
+    const cropCanvas = document.createElement('canvas');
+    cropCanvas.width = width;
+    cropCanvas.height = height;
+    const cropCtx = cropCanvas.getContext('2d');
+    
+    // Draw the cropped region
+    cropCtx.drawImage(
+      img,
+      x1, y1, x2 - x1, y2 - y1,
+      0, 0, width, height
+    );
+    
+    return cropCanvas.toDataURL();
+  };
 
   useEffect(() => {
     if (!imageData || !canvasRef.current) return;
@@ -38,6 +64,16 @@ const ResultCard = ({ result, imageData }) => {
       const scaleX = width / img.width;
       const scaleY = height / img.height;
 
+      // Create cropped images for signature and stamp
+      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) {
         ctx.strokeStyle = '#ef4444';
@@ -111,15 +147,31 @@ const ResultCard = ({ result, imageData }) => {
     <div className="bg-white rounded-xl shadow-lg overflow-hidden mb-6 border border-gray-200">
       {/* Header */}
       <div className="bg-gradient-to-r from-primary-500 to-primary-600 px-6 py-4">
-        <h3 className="text-lg font-semibold text-white flex items-center">
-          <svg className="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-          {result.filename}
-        </h3>
-        {result.pageNumber && (
-          <p className="text-primary-100 text-sm mt-1">Page {result.pageNumber}</p>
-        )}
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-semibold text-white flex items-center">
+              <svg className="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+              {result.filename}
+            </h3>
+            {result.pageNumber && (
+              <p className="text-primary-100 text-sm mt-1">Page {result.pageNumber}</p>
+            )}
+          </div>
+          {onReprocess && (
+            <button
+              onClick={() => onReprocess(result)}
+              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"
+            >
+              <svg className="w-4 h-4" 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>
+              Reprocess
+            </button>
+          )}
+        </div>
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 p-6">
@@ -133,6 +185,11 @@ const ResultCard = ({ result, imageData }) => {
           </h4>
           <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 && (
+              <div className="absolute inset-0 flex items-center justify-center bg-black/10 rounded-lg">
+                <div className="scanning-line"></div>
+              </div>
+            )}
           </div>
           <div className="flex gap-4 text-sm">
             {result.signature_coords && result.signature_coords.length > 0 && (
@@ -160,6 +217,28 @@ const ResultCard = ({ result, imageData }) => {
           </h4>
           
           <div className="bg-gray-50 rounded-lg p-4 space-y-3">
+            {/* Performance Metrics */}
+            <div className="grid grid-cols-3 gap-3">
+              {result.processing_time !== undefined && (
+                <div className="bg-white rounded-lg p-3 shadow-sm text-center">
+                  <div className="text-xs text-gray-500 mb-1">Processing Time</div>
+                  <div className="text-lg font-bold text-blue-600">{result.processing_time.toFixed(2)}s</div>
+                </div>
+              )}
+              {result.confidence !== undefined && (
+                <div className="bg-white rounded-lg p-3 shadow-sm text-center">
+                  <div className="text-xs text-gray-500 mb-1">Confidence</div>
+                  <div className="text-lg font-bold text-green-600">{(result.confidence * 100).toFixed(1)}%</div>
+                </div>
+              )}
+              {result.fields?.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>
+              )}
+            </div>
+
             <div className="bg-white rounded-lg p-4 shadow-sm">
               <h5 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Extracted Text</h5>
               <div className="text-sm text-gray-800 whitespace-pre-wrap max-h-96 overflow-y-auto font-mono bg-gray-50 p-3 rounded border border-gray-200">
@@ -206,6 +285,31 @@ const ResultCard = ({ result, imageData }) => {
               </div>
             </div>
 
+            {/* Cropped Signature and Stamp */}
+            {(signatureCrop || stampCrop) && (
+              <div className="bg-white rounded-lg p-4 shadow-sm">
+                <h5 className="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-3">Extracted Elements</h5>
+                <div className="grid grid-cols-2 gap-4">
+                  {signatureCrop && (
+                    <div className="space-y-2">
+                      <div className="text-xs font-medium text-red-600 uppercase">Signature</div>
+                      <div className="border-2 border-red-200 rounded-lg p-2 bg-gray-50">
+                        <img src={signatureCrop} alt="Signature" className="w-full h-auto" />
+                      </div>
+                    </div>
+                  )}
+                  {stampCrop && (
+                    <div className="space-y-2">
+                      <div className="text-xs font-medium text-blue-600 uppercase">Stamp</div>
+                      <div className="border-2 border-blue-200 rounded-lg p-2 bg-gray-50">
+                        <img src={stampCrop} alt="Stamp" className="w-full h-auto" />
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
             {/* Coordinates Info */}
             {(result.signature_coords?.length > 0 || result.stamp_coords?.length > 0) && (
               <div className="bg-white rounded-lg p-4 shadow-sm">

frontend/src/index.css

@@ -36,3 +36,83 @@ body {
   background-color: #e0f2fe;
   transform: scale(1.02);
 }
+
+/* Scanning animation */
+.scanning-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(to right, transparent, #0ea5e9, transparent);
+  box-shadow: 0 0 10px #0ea5e9;
+  animation: scan 2s linear infinite;
+}
+
+@keyframes scan {
+  0% {
+    top: 0;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    top: 100%;
+    opacity: 0;
+  }
+}
+
+/* Custom slider styles */
+input[type="range"].slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+}
+
+input[type="range"].slider::-webkit-slider-track {
+  background: #e5e7eb;
+  height: 8px;
+  border-radius: 4px;
+}
+
+input[type="range"].slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0ea5e9, #0284c7);
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  margin-top: -6px;
+}
+
+input[type="range"].slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+input[type="range"].slider::-moz-range-track {
+  background: #e5e7eb;
+  height: 8px;
+  border-radius: 4px;
+}
+
+input[type="range"].slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #0ea5e9, #0284c7);
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  border: none;
+}
+
+input[type="range"].slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}