erman/card-forge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Crop works nicely

Browse Source
This commit is contained in:
Roman Krček
2025-07-17 21:12:26 +02:00
parent 4f119dc121
commit c695664784
2 changed files with 113 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/lib/components/wizard/StepGallery.svelte
View File

@@ -3,7 +3,15 @@
import { columnMapping, filteredSheetData, currentStep } from '$lib/stores';
import { downloadDriveImage, isGoogleDriveUrl, createImageObjectUrl } from '$lib/google';
import PhotoCard from '../PhotoCard.svelte';
import * as tf from '@tensorflow/tfjs';
import * as blazeface from '@tensorflow-models/blazeface';
let photos: PhotoInfo[] = [];
let isProcessing = false;
let processedCount = 0;
let totalCount = 0;
let detector: blazeface.BlazeFaceModel;
interface PhotoInfo {
name: string;
url: string;
@@ -13,46 +21,40 @@
cropData?: { x: number; y: number; width: number; height: number };
faceDetectionStatus?: 'pending' | 'processing' | 'completed' | 'failed';
}
let photos: PhotoInfo[] = [];
let isProcessing = false;
let processedCount = 0;
let totalCount = 0;
let faceDetectionInProgress = false;
let faceDetectionCount = { started: 0, completed: 0 };
// Process photos when component mounts
onMount(() => {
console.log('StepGallery mounted, processing photos...');
// Initialize detector and process photos
onMount(async () => {
console.log('StepGallery mounted, initializing face detector...');
await tf.setBackend('webgl');
await tf.ready();
detector = await blazeface.load();
console.log('BlazeFace model loaded');
if ($filteredSheetData.length > 0 && $columnMapping.pictureUrl !== undefined) {
console.log('Processing photos for gallery step');
processPhotos();
} else {
console.log('No data to process:', {
dataLength: $filteredSheetData.length,
pictureUrlMapping: $columnMapping.pictureUrl
});
console.log('No data to process:', { dataLength: $filteredSheetData.length, pictureUrlMapping: $columnMapping.pictureUrl });
}
});
async function processPhotos() {
if (isProcessing) return;
console.log('Starting processPhotos...');
isProcessing = true;
processedCount = 0;
// Get valid and included rows from filteredSheetData
const validRows = $filteredSheetData.filter(row => row._isValid);
console.log(`Found ${validRows.length} valid rows`);
// Get unique photos to process
const photoUrls = new Set<string>();
const photoMap = new Map<string, any[]>(); // url -> row data
validRows.forEach((row: any) => {
const photoUrl = row.pictureUrl;
if (photoUrl && photoUrl.trim()) {
photoUrls.add(photoUrl.trim());
if (!photoMap.has(photoUrl.trim())) {
@@ -61,10 +63,10 @@
photoMap.get(photoUrl.trim())!.push(row);
}
});
console.log(`Found ${photoUrls.size} unique photo URLs`);
totalCount = photoUrls.size;
// Initialize photos array
photos = Array.from(photoUrls).map(url => ({
name: photoMap.get(url)![0].name + ' ' + photoMap.get(url)![0].surname, // Use first person's name for display
@@ -73,27 +75,27 @@
retryCount: 0,
faceDetectionStatus: 'pending' as const
}));
// Process each photo
for (let i = 0; i < photos.length; i++) {
await loadPhoto(i);
await detectFaceForPhoto(i);
processedCount++;
}
isProcessing = false;
}
async function loadPhoto(index: number, isRetry = false) {
const photo = photos[index];
if (!isRetry) {
photo.status = 'loading';
photos = [...photos]; // Trigger reactivity
}
try {
let objectUrl: string;
if (isGoogleDriveUrl(photo.url)) {
// Download from Google Drive
console.log(`Downloading from Google Drive: ${photo.name}`);
@@ -103,7 +105,7 @@
// Use direct URL
objectUrl = photo.url;
}
// Test if image loads properly
await new Promise<void>((resolve, reject) => {
const img = new Image();
@@ -114,66 +116,96 @@
};
img.src = objectUrl;
});
photo.objectUrl = objectUrl;
photo.status = 'success';
console.log(`Photo loaded successfully: ${photo.name}`);
// Automatically run face detection to generate crop
await detectFaceForPhoto(index);
} catch (error) {
console.error(`Failed to load photo for ${photo.name}:`, error);
photo.status = 'error';
}
photos = [...photos]; // Trigger reactivity
}
async function detectFaceForPhoto(index: number) {
try {
photos[index].faceDetectionStatus = 'processing';
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = photos[index].objectUrl!;
await new Promise((r, e) => { img.onload = r; img.onerror = e; });
const predictions = await detector.estimateFaces(img, false);
if (predictions.length > 0) {
const face = predictions.sort((a,b) => (b.probability?.[0]||0) - (a.probability?.[0]||0))[0];
// Coordinates in displayed image space
let [x1,y1] = face.topLeft;
let [x2,y2] = face.bottomRight;
// Scale to natural image size
const scaleX = img.naturalWidth / img.width;
const scaleY = img.naturalHeight / img.height;
const faceWidth = (x2 - x1) * scaleX;
const faceHeight = (y2 - y1) * scaleY;
const faceCenterX = (x1 + (x2 - x1)/2) * scaleX;
const faceCenterY = (y1 + (y2 - y1)/2) * scaleY;
// Load crop config from env
const cropRatio = parseFloat(import.meta.env.VITE_CROP_RATIO || '1.0');
const offsetX = parseFloat(import.meta.env.VITE_FACE_OFFSET_X || '0.0');
const offsetY = parseFloat(import.meta.env.VITE_FACE_OFFSET_Y || '0.0');
const cropScale = parseFloat(import.meta.env.VITE_CROP_SCALE || '2.5');
// Compute crop size and center
let cropWidth = faceWidth * cropScale;
let cropHeight = cropWidth / cropRatio;
let centerX = faceCenterX + cropWidth * offsetX;
let centerY = faceCenterY + cropHeight * offsetY;
// Clamp center to ensure crop fits
centerX = Math.max(cropWidth/2, Math.min(centerX, img.naturalWidth - cropWidth/2));
centerY = Math.max(cropHeight/2, Math.min(centerY, img.naturalHeight - cropHeight/2));
const cropX = Math.round(centerX - cropWidth/2);
const cropY = Math.round(centerY - cropHeight/2);
const crop = {
x: Math.max(0, Math.min(cropX, img.naturalWidth - cropWidth)),
y: Math.max(0, Math.min(cropY, img.naturalHeight - cropHeight)),
width: Math.round(Math.min(cropWidth, img.naturalWidth)),
height: Math.round(Math.min(cropHeight, img.naturalHeight))
};
photos[index].cropData = crop;
photos[index].faceDetectionStatus = 'completed';
} else {
photos[index].faceDetectionStatus = 'failed';
}
} catch {
photos[index].faceDetectionStatus = 'failed';
}
photos = [...photos];
}
async function retryPhoto(index: number) {
const photo = photos[index];
if (photo.retryCount >= 3) {
return; // Max retries reached
}
photo.retryCount++;
await loadPhoto(index, true);
}
function handleCropUpdate(index: number, cropData: { x: number; y: number; width: number; height: number }) {
photos[index].cropData = cropData;
photos = [...photos]; // Trigger reactivity
}
function handleFaceDetectionStarted(index: number) {
photos[index].faceDetectionStatus = 'processing';
faceDetectionCount.started++;
faceDetectionInProgress = true;
photos = [...photos]; // Trigger reactivity
console.log(`Face detection started for photo ${index + 1}, total started: ${faceDetectionCount.started}`);
}
function handleFaceDetectionCompleted(index: number, detail: { success: boolean; hasAutoDetectedCrop: boolean }) {
photos[index].faceDetectionStatus = detail.success ? 'completed' : 'failed';
faceDetectionCount.completed++;
console.log(`Face detection completed for photo ${index + 1}, total completed: ${faceDetectionCount.completed}`);
// Check if all face detections are complete
if (faceDetectionCount.completed >= faceDetectionCount.started) {
faceDetectionInProgress = false;
console.log('All face detections completed');
}
photos = [...photos]; // Trigger reactivity
}
function canProceed() {
const hasPhotos = photos.length > 0;
const allLoaded = photos.every(photo => photo.status === 'success');
const allCropped = photos.every(photo => photo.cropData);
const faceDetectionComplete = !faceDetectionInProgress;
return hasPhotos && allLoaded && allCropped && faceDetectionComplete;
return hasPhotos && allLoaded && allCropped;
}
// Cleanup object URLs when component is destroyed
function cleanupObjectUrls() {
photos.forEach(photo => {
@@ -182,7 +214,7 @@
}
});
}
// Cleanup on unmount or when photos change
$: {
// This will run when photos array changes
@@ -228,33 +260,10 @@
</div>
{/if}
</div>
{:else if faceDetectionInProgress}
<div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-5 h-5 border-2 border-green-600 border-t-transparent rounded-full animate-spin mr-3"></div>
<span class="text-sm text-green-800">
Detecting faces and auto-cropping...
</span>
</div>
<span class="text-sm text-green-600">
{faceDetectionCount.completed} / {faceDetectionCount.started}
</span>
</div>
{#if faceDetectionCount.started > 0}
<div class="mt-3 w-full bg-green-200 rounded-full h-2">
<div
class="bg-green-600 h-2 rounded-full transition-all duration-300"
style="width: {(faceDetectionCount.completed / faceDetectionCount.started) * 100}%"
></div>
</div>
{/if}
</div>
{/if}
<!-- Summary Stats -->
{#if !isProcessing && !faceDetectionInProgress && photos.length > 0}
{#if !isProcessing && photos.length > 0}
<div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6">
<h3 class="text-sm font-medium text-gray-700 mb-3">Processing Summary</h3>
@@ -344,10 +353,9 @@
<PhotoCard
imageUrl={photo.objectUrl}
personName={photo.name}
isProcessing={false}
isProcessing={photo.faceDetectionStatus === 'processing'}
cropData={photo.cropData}
on:cropUpdated={(e) => handleCropUpdate(index, e.detail)}
on:faceDetectionStarted={() => handleFaceDetectionStarted(index)}
on:faceDetectionCompleted={(e) => handleFaceDetectionCompleted(index, e.detail)}
/>
{:else if photo.status === 'error'}
<div class="border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm">
@@ -359,7 +367,7 @@
<span class="text-xs text-red-600 mb-2">Failed to load</span>
<button
class="text-xs text-blue-600 hover:text-blue-800 underline"
on:click={() => retryPhoto(index)}
onclick={() => retryPhoto(index)}
disabled={photo.retryCount >= 3}
>
{photo.retryCount >= 3 ? 'Max retries' : 'Retry'}
@@ -381,14 +389,14 @@
<!-- Navigation -->
<div class="flex justify-between">
<button
on:click={() => currentStep.set(3)}
onclick={() => currentStep.set(4)}
class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300"
>
← Back to Row Filter
</button>
<button
on:click={() => currentStep.set(5)}
onclick={() => currentStep.set(5)}
disabled={!canProceed()}
class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed"
>