feat: UI complète — upload, grille avant/après, pipette, export ZIP
This commit is contained in:
+286
-23
@@ -10,41 +10,181 @@
|
|||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
|
||||||
<link rel="stylesheet" href="css/app.css" />
|
<link rel="stylesheet" href="css/app.css" />
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-50 min-h-screen font-sans">
|
<body class="bg-gray-50 min-h-screen font-sans pb-24">
|
||||||
<div x-data="imageApp()" class="max-w-6xl mx-auto px-4 py-8">
|
<div x-data="imageApp()" class="max-w-6xl mx-auto px-4 py-8">
|
||||||
<h1 class="text-2xl font-bold text-gray-800 mb-6">
|
|
||||||
Convertisseur Images Shopify
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<!-- Zone 1: Upload -->
|
<!-- En-tête -->
|
||||||
<div id="upload-zone" class="mb-8">
|
<div class="mb-8">
|
||||||
<p class="text-gray-500 text-center">Zone d'upload (à construire)</p>
|
<h1 class="text-2xl font-bold text-gray-800">Convertisseur Images Shopify</h1>
|
||||||
|
<p class="text-gray-500 text-sm mt-1">HEIC → JPG · Suppression fond blanc · Export ZIP</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Zone 2: Grille -->
|
<!-- ── Zone 1 : Upload ─────────────────────────────────────── -->
|
||||||
<div id="grid-zone" class="mb-8">
|
<div class="mb-8">
|
||||||
<p class="text-gray-500 text-center">Grille d'images (à construire)</p>
|
<!-- Tolérance globale -->
|
||||||
|
<div class="flex items-center gap-4 mb-4">
|
||||||
|
<label class="text-sm font-medium text-gray-700 whitespace-nowrap">
|
||||||
|
Tolérance globale :
|
||||||
|
</label>
|
||||||
|
<input type="range" min="10" max="80"
|
||||||
|
x-model.number="globalTolerance"
|
||||||
|
class="w-48 accent-blue-500" />
|
||||||
|
<span class="text-sm font-mono text-gray-600 w-8" x-text="globalTolerance"></span>
|
||||||
|
<span class="text-xs text-gray-400">(10 = strict · 80 = permissif)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Zone de dépôt -->
|
||||||
|
<div
|
||||||
|
class="border-2 border-dashed border-gray-300 rounded-xl p-12 text-center cursor-pointer hover:border-blue-400 transition-colors"
|
||||||
|
@dragover.prevent="$el.classList.add('drop-active')"
|
||||||
|
@dragleave="$el.classList.remove('drop-active')"
|
||||||
|
@drop.prevent="$el.classList.remove('drop-active'); handleFiles($event.dataTransfer.files)"
|
||||||
|
@click="$refs.fileInput.click()"
|
||||||
|
>
|
||||||
|
<svg class="mx-auto w-12 h-12 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
||||||
|
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||||
|
</svg>
|
||||||
|
<p class="text-gray-600 font-medium">Glissez vos fichiers HEIC ici</p>
|
||||||
|
<p class="text-gray-400 text-sm mt-1">ou cliquez pour parcourir</p>
|
||||||
|
<input type="file" x-ref="fileInput"
|
||||||
|
accept=".heic,.heif,image/heic,image/heif"
|
||||||
|
multiple class="hidden"
|
||||||
|
@change="handleFiles($event.target.files)" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Zone 3: Export -->
|
<!-- ── Zone 2 : Grille ─────────────────────────────────────── -->
|
||||||
<div id="export-zone">
|
<div class="mb-8">
|
||||||
<p class="text-gray-500 text-center">Zone d'export (à construire)</p>
|
<template x-if="files.length > 0">
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<template x-for="file in files" :key="file.id">
|
||||||
|
<div class="image-card bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||||
|
|
||||||
|
<!-- En-tête de carte -->
|
||||||
|
<div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
|
||||||
|
<span class="text-sm font-medium text-gray-700 truncate" x-text="file.name"></span>
|
||||||
|
<span class="text-xs px-2 py-1 rounded-full ml-2 shrink-0"
|
||||||
|
:class="{
|
||||||
|
'bg-yellow-100 text-yellow-700': ['pending','converting','processing'].includes(file.status),
|
||||||
|
'bg-green-100 text-green-700': file.status === 'done',
|
||||||
|
'bg-red-100 text-red-700': file.status === 'error',
|
||||||
|
}"
|
||||||
|
x-text="{
|
||||||
|
pending: '⏳ En attente',
|
||||||
|
converting: '⏳ Conversion…',
|
||||||
|
processing: '⏳ Détourage…',
|
||||||
|
done: '✅ OK',
|
||||||
|
error: '❌ Erreur',
|
||||||
|
}[file.status]">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Message d'erreur -->
|
||||||
|
<template x-if="file.status === 'error'">
|
||||||
|
<div class="px-4 py-3 text-sm text-red-600 bg-red-50" x-text="file.error"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Avant / Après -->
|
||||||
|
<div class="p-3 grid grid-cols-2 gap-2">
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-400 text-center mb-1">Avant</p>
|
||||||
|
<div class="bg-gray-100 rounded overflow-hidden aspect-square flex items-center justify-center">
|
||||||
|
<template x-if="file.originalUrl">
|
||||||
|
<img :src="file.originalUrl" class="object-contain w-full h-full" />
|
||||||
|
</template>
|
||||||
|
<template x-if="!file.originalUrl">
|
||||||
|
<span class="text-gray-300 text-xs">—</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-xs text-gray-400 text-center mb-1">Après</p>
|
||||||
|
<div class="bg-gray-100 rounded overflow-hidden aspect-square flex items-center justify-center">
|
||||||
|
<template x-if="file.processedUrl">
|
||||||
|
<img :src="file.processedUrl" class="object-contain w-full h-full" />
|
||||||
|
</template>
|
||||||
|
<template x-if="!file.processedUrl">
|
||||||
|
<span class="text-gray-300 text-xs">—</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contrôles (disponibles une fois le traitement terminé ou en erreur) -->
|
||||||
|
<template x-if="file.status === 'done' || file.status === 'error'">
|
||||||
|
<div class="px-3 pb-3 space-y-2 border-t border-gray-100 pt-2">
|
||||||
|
<!-- Tolérance individuelle -->
|
||||||
|
<div class="flex items-center gap-2 text-xs text-gray-600">
|
||||||
|
<span class="whitespace-nowrap">Tolérance :</span>
|
||||||
|
<input type="range" min="10" max="80"
|
||||||
|
x-model.number="file.tolerance"
|
||||||
|
class="flex-1 accent-blue-500" />
|
||||||
|
<span class="w-6 text-right font-mono" x-text="file.tolerance"></span>
|
||||||
|
</div>
|
||||||
|
<!-- Boutons d'action -->
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button
|
||||||
|
@click="startColorPick(file)"
|
||||||
|
:disabled="file.pickingColor"
|
||||||
|
class="flex-1 text-xs bg-purple-50 hover:bg-purple-100 disabled:opacity-50 text-purple-700 border border-purple-200 rounded-lg py-1.5 px-2 transition-colors"
|
||||||
|
:class="{ 'ring-2 ring-purple-400': file.pickingColor }"
|
||||||
|
>
|
||||||
|
🎨 Pipette
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="reprocess(file)"
|
||||||
|
:disabled="file.status === 'processing'"
|
||||||
|
class="flex-1 text-xs bg-blue-50 hover:bg-blue-100 disabled:opacity-50 text-blue-700 border border-blue-200 rounded-lg py-1.5 px-2 transition-colors"
|
||||||
|
>
|
||||||
|
🔄 Retraiter
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<!-- ── Zone 3 : Export ─────────────────────────────────────── -->
|
||||||
|
<template x-if="files.length > 0">
|
||||||
|
<div class="fixed bottom-4 left-0 right-0 flex justify-center z-50">
|
||||||
|
<div class="bg-white border border-gray-200 rounded-2xl shadow-lg px-6 py-4 flex items-center gap-6">
|
||||||
|
<span class="text-sm text-gray-600">
|
||||||
|
<span class="font-semibold text-gray-800" x-text="readyCount"></span>
|
||||||
|
/
|
||||||
|
<span x-text="files.length"></span>
|
||||||
|
images prêtes
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
@click="downloadAll()"
|
||||||
|
:disabled="readyCount === 0"
|
||||||
|
class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium px-5 py-2 rounded-xl transition-colors text-sm"
|
||||||
|
>
|
||||||
|
⬇️ Télécharger tout en ZIP
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</div><!-- fin x-data -->
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import { convertHeicToJpeg } from './js/heicConverter.js';
|
import { convertHeicToJpeg } from './js/heicConverter.js';
|
||||||
import { removeBackground, pickColorFromCanvas } from './js/bgRemover.js';
|
import { removeBackground, pickColorFromCanvas } from './js/bgRemover.js';
|
||||||
import { processBatch } from './js/imageProcessor.js';
|
import { processBatch } from './js/imageProcessor.js';
|
||||||
import { downloadAllAsZip } from './js/zipExporter.js';
|
import { downloadAllAsZip } from './js/zipExporter.js';
|
||||||
|
|
||||||
// Helper: charge un Blob comme Image sur un Canvas, applique removeBackground, retourne un Blob JPEG
|
// ── Helper : Blob → canvas → fond supprimé → Blob JPEG ────────
|
||||||
async function processImage(blob, seedColor, tolerance) {
|
async function processImage(blob, seedColor, tolerance) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const img = new Image();
|
const img = new Image();
|
||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
const canvas = document.createElement('canvas');
|
const canvas = document.createElement('canvas');
|
||||||
canvas.width = img.width;
|
canvas.width = img.width;
|
||||||
canvas.height = img.height;
|
canvas.height = img.height;
|
||||||
canvas.getContext('2d').drawImage(img, 0, 0);
|
canvas.getContext('2d').drawImage(img, 0, 0);
|
||||||
try {
|
try {
|
||||||
@@ -62,6 +202,7 @@
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── App Alpine.js ──────────────────────────────────────────────
|
||||||
window.imageApp = function () {
|
window.imageApp = function () {
|
||||||
return {
|
return {
|
||||||
files: [],
|
files: [],
|
||||||
@@ -71,20 +212,142 @@
|
|||||||
return this.files.filter(f => f.status === 'done').length;
|
return this.files.filter(f => f.status === 'done').length;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// ── Tâche 7 : handleFiles ──────────────────────────────────
|
||||||
async handleFiles(fileList) {
|
async handleFiles(fileList) {
|
||||||
// TODO: Tâche 7
|
const validExts = ['.heic', '.heif'];
|
||||||
|
const allFiles = Array.from(fileList);
|
||||||
|
const skipped = allFiles.filter(f =>
|
||||||
|
!validExts.some(ext => f.name.toLowerCase().endsWith(ext))
|
||||||
|
);
|
||||||
|
|
||||||
|
if (skipped.length > 0) {
|
||||||
|
alert(
|
||||||
|
`${skipped.length} fichier(s) ignoré(s) — seuls .heic et .heif sont acceptés.\n` +
|
||||||
|
`Ignorés : ${skipped.map(f => f.name).join(', ')}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const heicFiles = allFiles.filter(f =>
|
||||||
|
validExts.some(ext => f.name.toLowerCase().endsWith(ext))
|
||||||
|
);
|
||||||
|
if (heicFiles.length === 0) return;
|
||||||
|
|
||||||
|
const newFiles = heicFiles.map(file => ({
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
name: file.name.replace(/\.[^.]+$/, ''), // supprime l'extension
|
||||||
|
status: 'pending',
|
||||||
|
originalFile: file,
|
||||||
|
originalBlob: null,
|
||||||
|
processedBlob: null,
|
||||||
|
originalUrl: null,
|
||||||
|
processedUrl: null,
|
||||||
|
tolerance: this.globalTolerance,
|
||||||
|
_seedColor: null, // défini par la pipette
|
||||||
|
error: null,
|
||||||
|
pickingColor: false,
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.files.push(...newFiles);
|
||||||
|
|
||||||
|
await processBatch(newFiles, async (fileObj) => {
|
||||||
|
// Étape 1 : HEIC → JPEG
|
||||||
|
fileObj.status = 'converting';
|
||||||
|
try {
|
||||||
|
fileObj.originalBlob = await convertHeicToJpeg(fileObj.originalFile);
|
||||||
|
fileObj.originalUrl = URL.createObjectURL(fileObj.originalBlob);
|
||||||
|
} catch (e) {
|
||||||
|
fileObj.status = 'error';
|
||||||
|
fileObj.error = `Conversion échouée : ${e.message}`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Étape 2 : suppression du fond
|
||||||
|
fileObj.status = 'processing';
|
||||||
|
try {
|
||||||
|
fileObj.processedBlob = await processImage(
|
||||||
|
fileObj.originalBlob, fileObj._seedColor, fileObj.tolerance
|
||||||
|
);
|
||||||
|
fileObj.processedUrl = URL.createObjectURL(fileObj.processedBlob);
|
||||||
|
fileObj.status = 'done';
|
||||||
|
} catch (e) {
|
||||||
|
fileObj.status = 'error';
|
||||||
|
fileObj.error = `Détourage échoué : ${e.message}`;
|
||||||
|
}
|
||||||
|
}, 3);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// ── Tâche 8 : reprocess ────────────────────────────────────
|
||||||
async reprocess(file) {
|
async reprocess(file) {
|
||||||
// TODO: Tâche 8
|
if (!file.originalBlob) return;
|
||||||
|
file.status = 'processing';
|
||||||
|
file.error = null;
|
||||||
|
if (file.processedUrl) {
|
||||||
|
URL.revokeObjectURL(file.processedUrl);
|
||||||
|
file.processedUrl = null;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
file.processedBlob = await processImage(
|
||||||
|
file.originalBlob, file._seedColor, file.tolerance
|
||||||
|
);
|
||||||
|
file.processedUrl = URL.createObjectURL(file.processedBlob);
|
||||||
|
file.status = 'done';
|
||||||
|
} catch (e) {
|
||||||
|
file.status = 'error';
|
||||||
|
file.error = `Détourage échoué : ${e.message}`;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// ── Tâche 8 : startColorPick ───────────────────────────────
|
||||||
async startColorPick(file) {
|
async startColorPick(file) {
|
||||||
// TODO: Tâche 8
|
if (!file.originalUrl) return;
|
||||||
|
file.pickingColor = true;
|
||||||
|
try {
|
||||||
|
let seedColor;
|
||||||
|
if (window.EyeDropper) {
|
||||||
|
// Chrome/Edge : pipette plein écran
|
||||||
|
seedColor = await pickColorFromCanvas(null);
|
||||||
|
} else {
|
||||||
|
// Safari/Firefox : clic sur canvas temporaire
|
||||||
|
const img = new Image();
|
||||||
|
await new Promise((res, rej) => {
|
||||||
|
img.onload = res; img.onerror = rej;
|
||||||
|
img.src = file.originalUrl;
|
||||||
|
});
|
||||||
|
const tempCanvas = document.createElement('canvas');
|
||||||
|
tempCanvas.width = img.width;
|
||||||
|
tempCanvas.height = img.height;
|
||||||
|
tempCanvas.getContext('2d').drawImage(img, 0, 0);
|
||||||
|
tempCanvas.style.cssText =
|
||||||
|
'position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);' +
|
||||||
|
'max-width:80vw;max-height:80vh;z-index:9999;border:3px solid #7c3aed;';
|
||||||
|
const overlay = document.createElement('div');
|
||||||
|
overlay.style.cssText =
|
||||||
|
'position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9998;';
|
||||||
|
const hint = document.createElement('p');
|
||||||
|
hint.style.cssText =
|
||||||
|
'position:fixed;bottom:10%;left:50%;transform:translateX(-50%);' +
|
||||||
|
'color:white;background:#7c3aed;padding:8px 16px;border-radius:8px;z-index:10000;font-family:sans-serif;';
|
||||||
|
hint.textContent = 'Cliquez sur la couleur de fond à supprimer';
|
||||||
|
document.body.append(overlay, tempCanvas, hint);
|
||||||
|
seedColor = await pickColorFromCanvas(tempCanvas);
|
||||||
|
overlay.remove(); tempCanvas.remove(); hint.remove();
|
||||||
|
}
|
||||||
|
file._seedColor = seedColor;
|
||||||
|
await this.reprocess(file);
|
||||||
|
} catch {
|
||||||
|
// Utilisateur a annulé — pas d'action
|
||||||
|
} finally {
|
||||||
|
file.pickingColor = false;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// ── Tâche 9 : downloadAll ──────────────────────────────────
|
||||||
async downloadAll() {
|
async downloadAll() {
|
||||||
// TODO: Tâche 9
|
const readyFiles = this.files
|
||||||
|
.filter(f => f.status === 'done' && f.processedBlob)
|
||||||
|
.map(f => ({ name: `${f.name}.jpg`, blob: f.processedBlob }));
|
||||||
|
if (readyFiles.length === 0) return;
|
||||||
|
await downloadAllAsZip(readyFiles);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user