feat: ZIP import, rotation, feather slider, lightbox + config déploiement

- Import ZIP produits (HEIC/JPG/PNG, structure dossiers conservée) - Rotation des images ±90° avec aperçu CSS et export canvas - Slider récupération des bords (feather 0–5 px) - Lightbox plein écran (clic miniature, Échap, fond noir) - Fix timeout HEIC 30s → 120s - Fix MIME type blobs JSZip pour heic2any - Dockerfile nginx:alpine + docker-compose.yml pour déploiement Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-06 11:18:18 +02:00
parent 7f6ca4c3de
commit 86d9b351b1
9 changed files with 368 additions and 81 deletions
@@ -0,0 +1,2 @@
+.claude/
+.DS_Store
@@ -0,0 +1,13 @@
+FROM nginx:alpine
+
+# Copier les fichiers statiques
+COPY . /usr/share/nginx/html/
+
+# Supprimer les fichiers non destinés au navigateur
+RUN rm -rf /usr/share/nginx/html/.git \
+           /usr/share/nginx/html/.claude \
+           /usr/share/nginx/html/Dockerfile \
+           /usr/share/nginx/html/docker-compose.yml \
+           /usr/share/nginx/html/.gitignore
+
+EXPOSE 80
@@ -0,0 +1,11 @@
+services:
+  app:
+    build: .
+    image: convertisseur-images:latest
+    restart: unless-stopped
+    networks:
+      - web
+
+networks:
+  web:
+    external: true
@@ -48,10 +48,10 @@
          <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>
+        <p class="text-gray-600 font-medium">Glissez vos fichiers ici</p>
+        <p class="text-gray-400 text-sm mt-1">ZIP (dossiers produits) · HEIC · HEIF — ou cliquez pour parcourir</p>
        <input type="file" x-ref="fileInput"
-          accept=".heic,.heif,image/heic,image/heif"
+          accept=".heic,.heif,.zip,image/heic,image/heif"
          multiple class="hidden"
          @change="handleFiles($event.target.files)" />
      </div>
@@ -66,7 +66,12 @@

              <!-- 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>
+                <div class="min-w-0 flex-1 mr-2">
+                  <template x-if="file.folder">
+                    <span class="text-xs text-blue-400 block truncate" x-text="'📁 ' + file.folder"></span>
+                  </template>
+                  <span class="text-sm font-medium text-gray-700 truncate block" x-text="file.name"></span>
+                </div>
                <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),
@@ -108,7 +113,9 @@
                  <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" />
+                      <img :src="file.originalUrl"
+                        class="object-contain w-full h-full cursor-zoom-in"
+                        @click="modalUrl = file.originalUrl; modalTitle = file.name + ' — Avant'; modalOpen = true" />
                    </template>
                    <template x-if="!file.originalUrl">
                      <span class="text-gray-300 text-xs">—</span>
@@ -119,7 +126,10 @@
                  <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" />
+                      <img :src="file.processedUrl"
+                        class="object-contain w-full h-full cursor-zoom-in transition-transform duration-200"
+                        :style="file.rotation ? 'transform:rotate(' + file.rotation + 'deg)' : ''"
+                        @click="modalUrl = file.processedUrl; modalTitle = file.name + ' — Après'; modalRotation = file.rotation; modalOpen = true" />
                    </template>
                    <template x-if="!file.processedUrl">
                      <span class="text-gray-300 text-xs">—</span>
@@ -130,7 +140,35 @@

              <!-- Contrôles -->
              <template x-if="file.status === 'done' || file.status === 'error'">
-                <div class="px-3 pb-3 border-t border-gray-100 pt-2">
+                <div class="px-3 pb-3 border-t border-gray-100 pt-2 space-y-2">
+                  <!-- Rotation -->
+                  <template x-if="file.status === 'done'">
+                    <div class="flex items-center justify-between">
+                      <span class="text-xs text-gray-500">Rotation</span>
+                      <div class="flex items-center gap-1">
+                        <button @click="file.rotation = (file.rotation - 90 + 360) % 360"
+                          class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm transition-colors"
+                          title="Rotation -90°">↺</button>
+                        <span class="text-xs text-gray-500 w-8 text-center" x-text="file.rotation + '°'"></span>
+                        <button @click="file.rotation = (file.rotation + 90) % 360"
+                          class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm transition-colors"
+                          title="Rotation +90°">↻</button>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- Slider récupération des bords -->
+                  <div>
+                    <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
+                      <label>Récupération des bords</label>
+                      <span x-text="file.feather + ' px'"></span>
+                    </div>
+                    <input type="range" min="0" max="5" step="1"
+                      x-model.number="file.feather"
+                      class="w-full h-1.5 accent-blue-500 cursor-pointer" />
+                    <div class="flex justify-between text-xs text-gray-300 mt-0.5">
+                      <span>Strict</span><span>Doux</span>
+                    </div>
+                  </div>
                  <button
                    @click="reprocess(file)"
                    :disabled="file.status === 'processing'"
@@ -168,6 +206,34 @@
      </div>
    </template>

+    <!-- ── Modal plein écran ─────────────────────────────────── -->
+    <div
+      x-show="modalOpen"
+      x-transition:enter="transition ease-out duration-150"
+      x-transition:enter-start="opacity-0"
+      x-transition:enter-end="opacity-100"
+      x-transition:leave="transition ease-in duration-100"
+      x-transition:leave-start="opacity-100"
+      x-transition:leave-end="opacity-0"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+      @click.self="modalOpen = false"
+      @keydown.escape.window="modalOpen = false"
+      style="display:none"
+    >
+      <div class="relative">
+        <button
+          @click="modalOpen = false"
+          class="absolute -top-10 right-0 text-white text-3xl font-light leading-none hover:text-gray-300 transition-colors"
+          aria-label="Fermer"
+        >✕</button>
+        <p class="absolute -top-8 left-0 text-white text-sm font-medium truncate max-w-sm" x-text="modalTitle"></p>
+        <img :src="modalUrl" alt=""
+          class="object-contain rounded-lg shadow-2xl bg-white transition-transform duration-200"
+          style="max-width:85vmin; max-height:85vmin;"
+          :style="modalRotation ? 'transform:rotate(' + modalRotation + 'deg); max-width:85vmin; max-height:85vmin;' : 'max-width:85vmin; max-height:85vmin;'" />
+      </div>
+    </div>
+
  </div><!-- fin x-data -->

  <script type="module">
@@ -176,37 +242,49 @@
    import { removeBackground }  from './js/bgRemover.js';
    import { processBatch }      from './js/imageProcessor.js';
    import { downloadAllAsZip }  from './js/zipExporter.js';
+    import { readImagesFromZip } from './js/zipImporter.js';
+    import { rotateBlob }        from './js/imageRotator.js';

    // ── App Alpine.js ──────────────────────────────────────────────
    Alpine.data('imageApp', () => ({
      files: [],
+      modalOpen:     false,
+      modalUrl:      null,
+      modalTitle:    '',
+      modalRotation: 0,

      get readyCount() {
        return this.files.filter(f => f.status === 'done').length;
      },

      async handleFiles(fileList) {
-        const validExts = ['.heic', '.heif'];
+        const heicExts = ['.heic', '.heif'];
        const allFiles = Array.from(fileList);
+
+        const zipFiles  = allFiles.filter(f => f.name.toLowerCase().endsWith('.zip'));
+        const heicFiles = allFiles.filter(f => heicExts.some(ext => f.name.toLowerCase().endsWith(ext)));
        const skipped   = allFiles.filter(f =>
-          !validExts.some(ext => f.name.toLowerCase().endsWith(ext))
+          !f.name.toLowerCase().endsWith('.zip') &&
+          !heicExts.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` +
+            `${skipped.length} fichier(s) ignoré(s) — seuls .heic, .heif et .zip 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;
+        // ── Construire la liste unifiée de fichiers à traiter ──────
+        const newFiles = [];

-        const newFiles = heicFiles.map(file => ({
+        // 1. Fichiers HEIC/HEIF déposés directement
+        for (const file of heicFiles) {
+          newFiles.push({
            id:            crypto.randomUUID(),
            name:          file.name.replace(/\.[^.]+$/, ''),
+            folder:        '',
+            isHeic:        true,
            status:        'pending',
            originalFile:  file,
            originalBlob:  null,
@@ -215,25 +293,67 @@
            processedUrl:  null,
            progressLabel: '',
            progressPct:   0,
+            feather:       2,
+            rotation:      0,
            error:         null,
-        }));
+          });
+        }

+        // 2. Images extraites des ZIPs
+        for (const zipFile of zipFiles) {
+          let images;
+          try {
+            images = await readImagesFromZip(zipFile);
+          } catch (e) {
+            alert(`Erreur lors de la lecture du ZIP "${zipFile.name}" : ${e.message}`);
+            continue;
+          }
+          if (images.length === 0) {
+            alert(`Aucune image trouvée dans "${zipFile.name}".`);
+            continue;
+          }
+          for (const img of images) {
+            newFiles.push({
+              id:            crypto.randomUUID(),
+              name:          img.name,
+              folder:        img.folder,
+              isHeic:        img.isHeic,
+              status:        'pending',
+              originalFile:  null,
+              originalBlob:  img.blob,
+              processedBlob: null,
+              originalUrl:   img.isHeic ? null : URL.createObjectURL(img.blob),
+              processedUrl:  null,
+              progressLabel: '',
+              progressPct:   0,
+              feather:       2,
+              rotation:      0,
+              error:         null,
+            });
+          }
+        }
+
+        if (newFiles.length === 0) return;
        this.files.push(...newFiles);

+        // ── Pipeline de traitement ─────────────────────────────────
        await processBatch(newFiles, async (orig) => {
          const f = this.files.find(x => x.id === orig.id);
          if (!f) return;

-          // Étape 1 : HEIC → JPEG
+          // Étape 1 : HEIC → JPEG (uniquement pour les fichiers HEIC/HEIF)
+          if (f.isHeic) {
            f.status = 'converting';
            try {
-            f.originalBlob = await convertHeicToJpeg(orig.originalFile);
+              const source   = f.originalFile ?? f.originalBlob;
+              f.originalBlob = await convertHeicToJpeg(source);
              f.originalUrl  = URL.createObjectURL(f.originalBlob);
            } catch (e) {
              f.status = 'error';
              f.error  = `Conversion échouée : ${e.message}`;
              return;
            }
+          }

          // Étape 2 : détourage IA
          f.status        = 'processing';
@@ -243,7 +363,7 @@
            f.processedBlob = await removeBackground(f.originalBlob, ({ key, percent }) => {
              f.progressPct   = percent;
              f.progressLabel = key.includes('model') ? 'Téléchargement modèle IA…' : 'Détourage en cours…';
-            });
+            }, f.feather);
            f.processedUrl  = URL.createObjectURL(f.processedBlob);
            f.status        = 'done';
          } catch (e) {
@@ -267,7 +387,7 @@
          file.processedBlob = await removeBackground(file.originalBlob, ({ key, percent }) => {
            file.progressPct   = percent;
            file.progressLabel = key.includes('model') ? 'Téléchargement modèle IA…' : 'Détourage en cours…';
-          });
+          }, file.feather);
          file.processedUrl = URL.createObjectURL(file.processedBlob);
          file.status = 'done';
        } catch (e) {
@@ -277,10 +397,15 @@
      },

      async downloadAll() {
-        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;
+        const done = this.files.filter(f => f.status === 'done' && f.processedBlob);
+        if (done.length === 0) return;
+        const readyFiles = await Promise.all(
+          done.map(async f => ({
+            name:   `${f.name}.jpg`,
+            blob:   f.rotation ? await rotateBlob(f.processedBlob, f.rotation) : f.processedBlob,
+            folder: f.folder,
+          }))
+        );
        await downloadAllAsZip(readyFiles);
      },
    }));
@@ -1,13 +1,11 @@
 /**
 * Suppression de fond par IA — @imgly/background-removal (WebAssembly).
- * Le modèle (~40 Mo) est téléchargé depuis le CDN au premier lancement
- * puis mis en cache automatiquement dans le navigateur.
+ * Le modèle est téléchargé depuis staticimgly.com au premier lancement.
 */

 const CDN_VERSION = '1.7.0';
 const CDN = `https://cdn.jsdelivr.net/npm/@imgly/background-removal@${CDN_VERSION}/dist/`;

-// Chargement paresseux de la librairie (évite de bloquer le rendu initial)
 let _removeBg = null;

 async function loadLib() {
@@ -18,18 +16,17 @@ async function loadLib() {
 }

 /**
- * Supprime le fond d'un Blob image via IA.
- * Retourne un nouveau Blob JPEG avec fond blanc pur.
+ * Supprime le fond d'un Blob image via IA puis composite sur blanc.
 * @param {Blob} blob — image source (JPEG)
 * @param {function} [onProgress] — callback({ key, percent })
+ * @param {number} [feather=2] — récupération de bords en px (0 = strict, 5 = doux)
 * @returns {Promise<Blob>} Blob JPEG fond blanc
 */
-export async function removeBackground(blob, onProgress) {
+export async function removeBackground(blob, onProgress, feather = 2) {
  const removeBg = await loadLib();

-  // Détourage IA → PNG avec transparence
  const pngBlob = await removeBg(blob, {
-    // publicPath omis → utilise le CDN par défaut de img.ly (staticimgly.com)
+    // publicPath omis → utilise staticimgly.com par défaut
    output: {
      format: 'image/png',
      type:   'foreground',
@@ -42,32 +39,63 @@ export async function removeBackground(blob, onProgress) {
    },
  });

-  // Composite sur fond blanc → JPEG
-  return compositeOnWhite(pngBlob);
+  return compositeOnWhite(pngBlob, feather);
 }

 /**
- * Composite un PNG transparent sur fond blanc, retourne un Blob JPEG.
+ * Composite un PNG transparent sur fond blanc.
+ * Si feather > 0, dilate légèrement le contour du sujet (récupère les bords
+ * que l'IA a pu couper trop agressivement).
 * @param {Blob} pngBlob
- * @returns {Promise<Blob>}
+ * @param {number} feather — rayon de dilation en pixels (0–5)
+ * @returns {Promise<Blob>} JPEG fond blanc
 */
-async function compositeOnWhite(pngBlob) {
+async function compositeOnWhite(pngBlob, feather) {
+  const objectUrl = URL.createObjectURL(pngBlob);
+
  return new Promise((resolve, reject) => {
    const img = new Image();
+
    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      canvas.width  = img.width;
-      canvas.height = img.height;
-      const ctx = canvas.getContext('2d');
+      const { width, height } = img;
+
+      // ── Canvas intermédiaire : premier plan avec bords optionnels ──
+      const fgCanvas = document.createElement('canvas');
+      fgCanvas.width  = width;
+      fgCanvas.height = height;
+      const fgCtx = fgCanvas.getContext('2d');
+
+      // 1. Dessin net du premier plan
+      fgCtx.drawImage(img, 0, 0);
+
+      if (feather > 0) {
+        // 2. On dessine une version floutée DERRIÈRE le dessin net
+        //    (destination-over = "derrière le contenu existant")
+        //    → les zones transparentes proches des bords du sujet deviennent
+        //      semi-transparentes, récupérant les détails coupés par l'IA.
+        fgCtx.globalCompositeOperation = 'destination-over';
+        fgCtx.filter = `blur(${feather}px)`;
+        fgCtx.drawImage(img, 0, 0);
+        fgCtx.filter = 'none';
+        fgCtx.globalCompositeOperation = 'source-over';
+      }
+
+      // ── Canvas final : fond blanc + premier plan ───────────────────
+      const out = document.createElement('canvas');
+      out.width  = width;
+      out.height = height;
+      const ctx = out.getContext('2d');
      ctx.fillStyle = '#ffffff';
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
-      canvas.toBlob(b => {
-        URL.revokeObjectURL(img.src);
+      ctx.fillRect(0, 0, width, height);
+      ctx.drawImage(fgCanvas, 0, 0);
+
+      URL.revokeObjectURL(objectUrl);
+      out.toBlob(b => {
        b ? resolve(b) : reject(new Error('canvas.toBlob a retourné null'));
      }, 'image/jpeg', 0.92);
    };
+
    img.onerror = () => reject(new Error('Impossible de charger le résultat IA'));
-    img.src = URL.createObjectURL(pngBlob);
+    img.src = objectUrl;
  });
 }
@@ -1,28 +1,31 @@
 /**
- * Convertit un fichier HEIC/HEIF en Blob JPEG.
- * @param {File} file
+ * Convertit un fichier/blob HEIC/HEIF en Blob JPEG.
+ * @param {File|Blob} fileOrBlob — fichier HEIC/HEIF (File depuis l'input, ou Blob extrait d'un ZIP)
 * @returns {Promise<Blob>}
- * @throws {TypeError} si l'entrée n'est pas un fichier HEIC/HEIF
+ * @throws {TypeError} si l'entrée n'est pas un Blob HEIC/HEIF
 * @throws {Error} si la conversion échoue ou dépasse 30s
 */
-export async function convertHeicToJpeg(file) {
-  if (!(file instanceof File)) {
-    throw new TypeError("L'entrée doit être un objet File");
+export async function convertHeicToJpeg(fileOrBlob) {
+  if (!(fileOrBlob instanceof Blob)) {
+    throw new TypeError("L'entrée doit être un Blob ou un File");
  }
  // Certains iPhone envoient un type MIME vide pour les HEIC — on l'autorise
-  const type = file.type.toLowerCase();
+  const type = fileOrBlob.type.toLowerCase();
  if (type !== '' && !['image/heic', 'image/heif'].includes(type)) {
-    throw new TypeError(`Format attendu : HEIC/HEIF. Reçu : ${file.type || '(vide)'}`);
+    throw new TypeError(`Format attendu : HEIC/HEIF. Reçu : ${fileOrBlob.type || '(vide)'}`);
  }

-  console.log(`[heicConverter] Début conversion : ${file.name} (${file.type || 'type vide'}, ${(file.size/1024).toFixed(0)} Ko)`);
+  const label = fileOrBlob instanceof File
+    ? `${fileOrBlob.name} (${fileOrBlob.type || 'type vide'}, ${(fileOrBlob.size / 1024).toFixed(0)} Ko)`
+    : `blob HEIC (${(fileOrBlob.size / 1024).toFixed(0)} Ko)`;
+  console.log(`[heicConverter] Début conversion : ${label}`);

  const timeout = new Promise((_, reject) =>
-    setTimeout(() => reject(new Error('Timeout : conversion > 30s. Vérifiez que le fichier est bien un HEIC valide.')), 30_000)
+    setTimeout(() => reject(new Error('Timeout : conversion > 120s. Vérifiez que le fichier est bien un HEIC valide.')), 120_000)
  );

  const conversion = heic2any({
-    blob: file,
+    blob: fileOrBlob,
    toType: 'image/jpeg',
    quality: 0.92,
  });
@@ -34,6 +37,6 @@ export async function convertHeicToJpeg(file) {
    throw new Error("heic2any n'a pas retourné un Blob");
  }

-  console.log(`[heicConverter] ✅ Conversion réussie : ${file.name} → ${(blob.size/1024).toFixed(0)} Ko`);
+  console.log(`[heicConverter] ✅ Conversion réussie → ${(blob.size / 1024).toFixed(0)} Ko`);
  return blob;
 }
@@ -0,0 +1,46 @@
+/**
+ * Rotation d'un Blob image via Canvas.
+ * @param {Blob} blob — image source (JPEG)
+ * @param {number} degrees — angle de rotation en degrés (0, 90, 180, 270)
+ * @returns {Promise<Blob>} Blob JPEG pivoté, ou le blob original si degrees === 0
+ */
+export async function rotateBlob(blob, degrees) {
+  const norm = ((degrees % 360) + 360) % 360;
+  if (norm === 0) return blob;
+
+  const url = URL.createObjectURL(blob);
+
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = () => {
+      // Pour 90° ou 270°, largeur et hauteur sont inversées
+      const swap = norm === 90 || norm === 270;
+      const w = swap ? img.naturalHeight : img.naturalWidth;
+      const h = swap ? img.naturalWidth  : img.naturalHeight;
+
+      const canvas = document.createElement('canvas');
+      canvas.width  = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(w / 2, h / 2);
+      ctx.rotate((norm * Math.PI) / 180);
+      ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
+
+      URL.revokeObjectURL(url);
+      canvas.toBlob(
+        b => b ? resolve(b) : reject(new Error('rotateBlob : toBlob a retourné null')),
+        'image/jpeg',
+        0.92
+      );
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error('rotateBlob : impossible de charger le blob'));
+    };
+
+    img.src = url;
+  });
+}
@@ -1,12 +1,14 @@
 /**
 * Compresse les fichiers en ZIP et déclenche le téléchargement.
- * @param {{ name: string, blob: Blob }[]} processedFiles
+ * Si un fichier possède un `folder`, il est placé dans le sous-dossier correspondant.
+ * @param {{ name: string, blob: Blob, folder?: string }[]} processedFiles
 * @returns {Promise<void>}
 */
 export async function downloadAllAsZip(processedFiles) {
  const zip = new JSZip();
-  for (const { name, blob } of processedFiles) {
-    zip.file(name, blob);
+  for (const { name, blob, folder } of processedFiles) {
+    const path = folder ? `${folder}/${name}` : name;
+    zip.file(path, blob);
  }
  const zipBlob = await zip.generateAsync({ type: 'blob' });
  const url = URL.createObjectURL(zipBlob);
@@ -0,0 +1,57 @@
+/**
+ * Lecture d'un ZIP produits.
+ * Attend une structure : dossier-produit/image.heic (ou jpg/png).
+ * JSZip est chargé comme script global dans index.html.
+ */
+
+const IMAGE_EXTS = new Set(['heic', 'heif', 'jpg', 'jpeg', 'png']);
+
+/**
+ * Extrait toutes les images d'un fichier ZIP.
+ * @param {File} zipFile
+ * @returns {Promise<Array<{folder:string, name:string, ext:string, blob:Blob, isHeic:boolean}>>}
+ */
+export async function readImagesFromZip(zipFile) {
+  const zip = await JSZip.loadAsync(zipFile);
+
+  // Collecter les entrées fichier (pas les dossiers)
+  const entries = [];
+  zip.forEach((relativePath, entry) => {
+    if (!entry.dir) entries.push({ relativePath, entry });
+  });
+
+  const results = [];
+
+  for (const { relativePath, entry } of entries) {
+    // Ignorer les métadonnées macOS et fichiers cachés
+    if (relativePath.startsWith('__MACOSX/')) continue;
+
+    const parts = relativePath.split('/').filter(p => p.length > 0);
+    const filename = parts[parts.length - 1];
+    if (filename.startsWith('.')) continue;
+
+    // Extension
+    const dotIdx = filename.lastIndexOf('.');
+    if (dotIdx === -1) continue;
+    const ext = filename.slice(dotIdx + 1).toLowerCase();
+    if (!IMAGE_EXTS.has(ext)) continue;
+
+    const name   = filename.slice(0, dotIdx);
+    // Premier segment du chemin = dossier produit (ex: "12345")
+    const folder = parts.length > 1 ? parts[0] : '';
+
+    const isHeic = ext === 'heic' || ext === 'heif';
+    const mimeType = isHeic ? 'image/heic'
+      : (ext === 'jpg' || ext === 'jpeg') ? 'image/jpeg'
+      : 'image/png';
+
+    // JSZip retourne des Blobs sans type MIME — on le définit explicitement
+    // pour que heic2any puisse détecter le format correctement.
+    const rawBlob = await entry.async('blob');
+    const blob = new Blob([rawBlob], { type: mimeType });
+
+    results.push({ folder, name, ext, blob, isHeic });
+  }
+
+  return results;
+}