From 6255ebfbea038c97a091670d68baaa834ea09c56 Mon Sep 17 00:00:00 2001
From: Mathieu Fort <mathieu.fort@gmail.com>
Date: Wed, 27 May 2026 10:08:28 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20UI=20compl=C3=A8te=20=E2=80=94=20upload?=
 =?UTF-8?q?,=20grille=20avant/apr=C3=A8s,=20pipette,=20export=20ZIP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 309 +++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 286 insertions(+), 23 deletions(-)
diff --git a/index.html b/index.html
index 5b444eb..1f61a2d 100644
--- a/index.html
+++ b/index.html
@@ -10,41 +10,181 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
   <link rel="stylesheet" href="css/app.css" />
 </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">
-    <h1 class="text-2xl font-bold text-gray-800 mb-6">
-      Convertisseur Images Shopify
-    </h1>
 
-    <!-- Zone 1: Upload -->
-    <div id="upload-zone" class="mb-8">
-      <p class="text-gray-500 text-center">Zone d'upload (à construire)</p>
+    <!-- En-tête -->
+    <div class="mb-8">
+      <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>
 
-    <!-- Zone 2: Grille -->
-    <div id="grid-zone" class="mb-8">
-      <p class="text-gray-500 text-center">Grille d'images (à construire)</p>
+    <!-- ── Zone 1 : Upload ─────────────────────────────────────── -->
+    <div class="mb-8">
+      <!-- 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>
 
-    <!-- Zone 3: Export -->
-    <div id="export-zone">
-      <p class="text-gray-500 text-center">Zone d'export (à construire)</p>
+    <!-- ── Zone 2 : Grille ─────────────────────────────────────── -->
+    <div class="mb-8">
+      <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>
+
+    <!-- ── 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">
-    import { convertHeicToJpeg } from './js/heicConverter.js';
+    import { convertHeicToJpeg }          from './js/heicConverter.js';
     import { removeBackground, pickColorFromCanvas } from './js/bgRemover.js';
-    import { processBatch } from './js/imageProcessor.js';
-    import { downloadAllAsZip } from './js/zipExporter.js';
+    import { processBatch }               from './js/imageProcessor.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) {
       return new Promise((resolve, reject) => {
         const img = new Image();
         img.onload = () => {
           const canvas = document.createElement('canvas');
-          canvas.width = img.width;
+          canvas.width  = img.width;
           canvas.height = img.height;
           canvas.getContext('2d').drawImage(img, 0, 0);
           try {
@@ -62,6 +202,7 @@
       });
     }
 
+    // ── App Alpine.js ──────────────────────────────────────────────
     window.imageApp = function () {
       return {
         files: [],
@@ -71,20 +212,142 @@
           return this.files.filter(f => f.status === 'done').length;
         },
 
+        // ── Tâche 7 : handleFiles ──────────────────────────────────
         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) {
-          // 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) {
-          // 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() {
-          // 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);
         },
       };
     };
