Application web de transformation d'image

Contexte du projet

DiyPixelArt propose des kits personnalisés : le client fournit une image, qui est convertie en motif de perles selon la palette de couleurs disponible. Cette application web est l’outil qui rend ce processus accessible directement depuis la boutique en ligne. L’utilisateur importe une image, ajuste les paramètres de rendu, prévisualise le résultat en mosaïque et ajoute sa commande personnalisée au panier.

Problématique et contraintes

• Intégration directe à la boutique WooCommerce
• Rendu visuellement fidèle à la palette de perles réelles
• Interface accessible sans compétence technique
• Gestion de la sauvegarde des designs entre frontend, backend et WordPress

Réalisation

Algorithme de transformation

L’algorithme découpe l’image importée en une grille en fonction de la taille sélectionnée par l’utilisateur. Pour chaque cellule :

1. La couleur moyenne des pixels est calculée.
2. La couleur résultante est convertie dans l’espace colorimétrique LAB.
3. La distance euclidienne (CIE94) est calculée entre cette couleur et chacune des couleurs de la palette.
4. Le cylindre de couleur la plus proche est affectée à la case.

Plusieurs paramètres permettent d’affiner le rendu : contraste, saturation et luminosité de l’image source. Des filtres supplémentaires améliorent la lisibilité et l’esthétique du motif résultant.

Éditeur pixel par pixel

Au-delà des réglages globaux, l’application intègre un véritable éditeur de mosaïque. L’utilisateur peut modifier la couleur de chaque case individuellement, pour corriger ou personnaliser le motif obtenu automatiquement.

Architecture et sauvegarde

L’application est développée en JavaScript, intégrée à WordPress via un plugin personnalisé. Un backend dédié assure la persistance des designs : sauvegarde côté serveur, récupération en session et transmission des données de commande à WooCommerce.

Génération par intelligence artificielle

L’application intègre une fonctionnalité de génération d’image par IA via appel API. L’utilisateur peut créer un design à partir d’une description textuelle, sans avoir à fournir une image source.

Résultats

L’application est opérationnelle et accessible depuis la boutique : diypixelart.shop Le configurateur permet de transformer n’importe quelle image en motif de perles en quelques secondes et d’ajouter la commande personnalisée au panier.

Bilan du projet et apprentissages

Ce projet est la première application web construite de bout en bout : interface utilisateur, logique métier côté client, backend de persistance et intégration sur un site WordPress. Cette application est la couche logicielle de design avant impression du design par la machine d’assemblage.