bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

debug: add comprehensive logging for image adjustment flow

Browse Source 
Added detailed console logging across entire image adjustment pipeline:

1. ImageAdjustmentModal.handleConfirm():
   - Original image dimensions
   - User inputs (rotation, zoom, pan, crop)
   - Canvas processing steps
   - Final blob size

2. AIOnboarding.handleImageAdjustmentConfirm():
   - Adjustments received from modal
   - Item being updated
   - extractedImageBlob status before/after

3. useAIExtraction.confirmSingleItem():
   - newItem being built
   - extractedImageBlob attached
   - imageProcessing attached

This will help identify where values are lost or incorrect in the flow.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Daniel Bedeleanu
2026-04-22 13:53:05 +03:00
parent 1da8216f35
commit 8d47732de4
4 changed files with 49 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/components/ImageAdjustmentModal.tsx
View File

@@ -120,17 +120,33 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
const handleConfirm = async () => {
if (!useImage || !cropBounds || !imageRef.current) {
console.log('[Modal] User clicked confirm - no image/crop/useImage flag');
onConfirm(null);
return;
}
console.log('=== IMAGE ADJUSTMENT MODAL DEBUG ===');
console.log('[Original] Image dimensions:', imageDimensions);
console.log('[Original] Image URL:', imageRef.current?.src?.substring(0, 50) + '...');
console.log('[User] Rotation:', rotation, '°');
console.log('[User] Zoom level:', zoom);
console.log('[User] Pan X/Y:', panX, '/', panY);
console.log('[User] Crop bounds:', cropBounds);
console.log('[User] Use image flag:', useImage);
// Process image: apply rotation and crop
const processCanvas = document.createElement('canvas');
const ctx = processCanvas.getContext('2d');
if (!ctx) return;
if (!ctx) {
console.log('[ERROR] Could not get canvas context');
return;
}
const { x, y, width, height } = cropBounds;
console.log('[Processing] Canvas dimensions will be:', width, 'x', height);
console.log('[Processing] Crop region from original:', { x, y, width, height });
// Set canvas to crop dimensions
processCanvas.width = width;
processCanvas.height = height;
@@ -140,14 +156,22 @@ export function ImageAdjustmentModal({ imageUrl, onConfirm, onCancel }: ImageAdj
ctx.translate(width / 2, height / 2);
ctx.rotate((rotation * Math.PI) / 180);
ctx.translate(-imageDimensions.width / 2 + x, -imageDimensions.height / 2 + y);
console.log('[Processing] Drawing image to canvas with transforms applied');
ctx.drawImage(imageRef.current, 0, 0);
ctx.restore();
console.log('[Processing] Canvas draw complete');
// Convert to blob
processCanvas.toBlob((blob) => {
if (blob) {
console.log('[Result] Processed image blob size:', blob.size, 'bytes');
console.log('[Result] Blob type:', blob.type);
console.log('=== END DEBUG ===');
onConfirm({ rotation, cropBounds, imageBlob: blob });
} else {
console.log('[ERROR] Failed to convert canvas to blob');
onConfirm({ rotation, cropBounds });
}
}, 'image/jpeg', 0.95);