# AI Image Block Variation

## Description

Cette fonctionnalité ajoute une variation du bloc Gutenberg `core/image` nommée "AI Image" qui permet de générer des images via IA directement depuis l'éditeur WordPress, tout en conservant toutes les fonctionnalités du bloc image natif.

## Fonctionnalités

### Variation du bloc core/image

- **Nom** : AI Image
- **Icône** : admin-generic
- **Description** : Generate images using AI or pick from media library
- **Scope** : inserter (disponible dans l'inserter de blocs)
- **Classe CSS** : `ai-image-block` (pour identifier les blocs AI)

### Fonctionnalités complètes du bloc core/image

- **Toutes les fonctionnalités natives** : alignement, légende, liens, styles, etc.
- **Bouton médiathèque** : Sélection d'images depuis la médiathèque WordPress
- **Contrôles d'image** : Redimensionnement, recadrage, alt text, etc.
- **Styles avancés** : Marges, padding, bordures, etc.

### Contrôles IA supplémentaires

- **Panel latéral** : Section "AI Image Generation" dans l'InspectorControls
- **Champ de prompt** : TextareaControl pour décrire l'image souhaitée
- **Bouton de génération** : "Generate AI Image" avec spinner pendant le chargement
- **Gestion d'erreurs** : Affichage des messages d'erreur en cas de problème

## Utilisation

### 1. Insérer un bloc AI Image

1. Ouvrir l'éditeur WordPress
2. Cliquer sur le bouton "+" pour ajouter un bloc
3. Rechercher "AI Image" dans l'inserter
4. Sélectionner la variation "AI Image"

### 2. Générer une image IA

1. Sélectionner le bloc AI Image inséré
2. Ouvrir le panneau latéral (InspectorControls)
3. Trouver la section "AI Image Generation"
4. Saisir une description de l'image souhaitée dans le champ prompt
5. Cliquer sur "Generate AI Image"
6. Attendre la génération et l'upload automatique

### 3. Utiliser les fonctionnalités du bloc image

- **Ajouter une légende** : Cliquer sur l'image et saisir la légende
- **Changer l'alignement** : Utiliser les contrôles d'alignement
- **Ajouter un lien** : Utiliser les contrôles de lien
- **Redimensionner** : Utiliser les poignées de redimensionnement
- **Choisir une image** : Utiliser le bouton "Média" pour sélectionner une image existante

<<<<<<< HEAD
=======
## Architecture technique

### Fichiers créés

- `image-ai-variation.js` : Définition de la variation du bloc core/image
- `image-ai-controls.js` : Extension du bloc avec les contrôles IA
- `image-ai-controls.css` : Styles pour les contrôles IA

### API utilisée

- **Endpoint** : `http://localhost:8080/api/ai-transform-page/generate-image`
- **Méthode** : POST
- **Body** : `{ "prompt": "description de l'image" }`
- **Réponse** : `{ "imageB64": "base64_encoded_image" }`

### Processus de génération

1. Envoi du prompt à l'API IA
2. Réception de l'image en base64
3. Conversion base64 → Blob
4. Upload vers la médiathèque WordPress via `/wp-json/wp/v2/media`
5. Mise à jour du bloc avec l'URL de l'image

>>>>>>> 21af6c2f92122af8e1004a7bfb1baaa40ef1f124
## Détection des blocs AI

Les blocs AI Image sont identifiés par la classe CSS `ai-image-block` dans leurs attributs. Cette classe est automatiquement ajoutée lors de l'insertion de la variation.

## Styles visuels

- **Indicateur visuel** : 🤖 sur les blocs AI Image
- **Styles personnalisés** : Pour les contrôles IA
- **Gradient coloré** : Sur le bouton de génération
- **Spinner** : Pendant le chargement

## Avantages de cette approche

1. **Fonctionnalités complètes** : Toutes les fonctionnalités du bloc core/image sont disponibles
2. **Interface familière** : Les utilisateurs connaissent déjà l'interface du bloc image
3. **Compatibilité maximale** : Fonctionne avec tous les thèmes et plugins
4. **Maintenance simplifiée** : Pas besoin de dupliquer les fonctionnalités du bloc image
5. **Évolutivité** : Bénéficie automatiquement des améliorations du bloc core/image

## Compatibilité

- Compatible avec tous les thèmes WordPress
- N'interfère pas avec les blocs image normaux
- Utilise les APIs WordPress standard
- Responsive et accessible
- Support complet des fonctionnalités d'alignement, de légende, de liens, etc.