ColorPalette AI

🎯 Objectif

Créer une application web front-end qui génère des palettes de couleurs :

• À partir d’une image uploadée.

• Ou à partir d’un mot-clé émotionnel ou stylistique (ex : « énergie », « vintage »).

Elle propose ensuite une prévisualisation, des exports CSS/JSON, et une expérience utilisateur fluide et moderne.

🔧Technologies utilisées

• React.js (framework JavaScript moderne)

• Vite (outil de bundling ultra-rapide)

• Tailwind CSS (design rapide et responsive)

• LocalStorage ou envoi de formulaire par email (pas de base de données dans la version initiale)

🧑‍🎨 Utilisateurs cibles

• Designers

• Développeurs

• Créateurs de contenu

• Étudiants en design ou front-end

🧩 Fonctionnalités principales

1. Interface d’accueil

• UI responsive, minimaliste.

• Choix entre deux entrées :

  • Uploader une image

  • Entrer un mot-clé (type ou ambiance)

2. Génération de palette via image

• Upload d’image (formats PNG, JPG, max 5Mo).

• Extraction automatique des couleurs dominantes (5-7 couleurs).

• Affichage :

  • Couleurs sous forme de blocs.

  • Nom hexadécimal + copie hex.

  • Variation possible (ex: teintes, tons, complémentaires).

Avancé :

• Détection des zones dominantes via k-means ou lib comme color-thief.

• Option “éviter les couleurs neutres” (blanc, gris, noir).

3. Génération par émotion / style

• Saisie de mot-clé (ex : « zen », « chaud », « cyberpunk »).

• Appelle une API interne ou un mapping custom (clé : ambiance → palette).

• Affichage visuel de la palette associée.

• Option : bouton “regénérer” pour proposer une variante.

Avancé :

• Intégration avec une IA (via API locale ou tierce) pour associer les mots-clés à des couleurs (GPT, CLIP, etc.).

• Suggestion de mots-clés similaires.

4. Prévisualisation

• Visualisation sur composants UI (ex : bouton, background, card).

• Switch entre plusieurs thèmes (clair/sombre).

• Sélecteur de couleurs principales pour l’aperçu.