| 1 |
# AI Image Block Variation |
| 2 |
|
| 3 |
## Description |
| 4 |
|
| 5 |
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. |
| 6 |
|
| 7 |
## Fonctionnalités |
| 8 |
|
| 9 |
### Variation du bloc core/image |
| 10 |
|
| 11 |
- **Nom** : AI Image |
| 12 |
- **Icône** : admin-generic |
| 13 |
- **Description** : Generate images using AI or pick from media library |
| 14 |
- **Scope** : inserter (disponible dans l'inserter de blocs) |
| 15 |
- **Classe CSS** : `ai-image-block` (pour identifier les blocs AI) |
| 16 |
|
| 17 |
### Fonctionnalités complètes du bloc core/image |
| 18 |
|
| 19 |
- **Toutes les fonctionnalités natives** : alignement, légende, liens, styles, etc. |
| 20 |
- **Bouton médiathèque** : Sélection d'images depuis la médiathèque WordPress |
| 21 |
- **Contrôles d'image** : Redimensionnement, recadrage, alt text, etc. |
| 22 |
- **Styles avancés** : Marges, padding, bordures, etc. |
| 23 |
|
| 24 |
### Contrôles IA supplémentaires |
| 25 |
|
| 26 |
- **Panel latéral** : Section "AI Image Generation" dans l'InspectorControls |
| 27 |
- **Champ de prompt** : TextareaControl pour décrire l'image souhaitée |
| 28 |
- **Bouton de génération** : "Generate AI Image" avec spinner pendant le chargement |
| 29 |
- **Gestion d'erreurs** : Affichage des messages d'erreur en cas de problème |
| 30 |
|
| 31 |
## Utilisation |
| 32 |
|
| 33 |
### 1. Insérer un bloc AI Image |
| 34 |
|
| 35 |
1. Ouvrir l'éditeur WordPress |
| 36 |
2. Cliquer sur le bouton "+" pour ajouter un bloc |
| 37 |
3. Rechercher "AI Image" dans l'inserter |
| 38 |
4. Sélectionner la variation "AI Image" |
| 39 |
|
| 40 |
### 2. Générer une image IA |
| 41 |
|
| 42 |
1. Sélectionner le bloc AI Image inséré |
| 43 |
2. Ouvrir le panneau latéral (InspectorControls) |
| 44 |
3. Trouver la section "AI Image Generation" |
| 45 |
4. Saisir une description de l'image souhaitée dans le champ prompt |
| 46 |
5. Cliquer sur "Generate AI Image" |
| 47 |
6. Attendre la génération et l'upload automatique |
| 48 |
|
| 49 |
### 3. Utiliser les fonctionnalités du bloc image |
| 50 |
|
| 51 |
- **Ajouter une légende** : Cliquer sur l'image et saisir la légende |
| 52 |
- **Changer l'alignement** : Utiliser les contrôles d'alignement |
| 53 |
- **Ajouter un lien** : Utiliser les contrôles de lien |
| 54 |
- **Redimensionner** : Utiliser les poignées de redimensionnement |
| 55 |
- **Choisir une image** : Utiliser le bouton "Média" pour sélectionner une image existante |
| 56 |
|
| 57 |
<<<<<<< HEAD |
| 58 |
======= |
| 59 |
## Architecture technique |
| 60 |
|
| 61 |
### Fichiers créés |
| 62 |
|
| 63 |
- `image-ai-variation.js` : Définition de la variation du bloc core/image |
| 64 |
- `image-ai-controls.js` : Extension du bloc avec les contrôles IA |
| 65 |
- `image-ai-controls.css` : Styles pour les contrôles IA |
| 66 |
|
| 67 |
### API utilisée |
| 68 |
|
| 69 |
- **Endpoint** : `http://localhost:8080/api/ai-transform-page/generate-image` |
| 70 |
- **Méthode** : POST |
| 71 |
- **Body** : `{ "prompt": "description de l'image" }` |
| 72 |
- **Réponse** : `{ "imageB64": "base64_encoded_image" }` |
| 73 |
|
| 74 |
### Processus de génération |
| 75 |
|
| 76 |
1. Envoi du prompt à l'API IA |
| 77 |
2. Réception de l'image en base64 |
| 78 |
3. Conversion base64 → Blob |
| 79 |
4. Upload vers la médiathèque WordPress via `/wp-json/wp/v2/media` |
| 80 |
5. Mise à jour du bloc avec l'URL de l'image |
| 81 |
|
| 82 |
>>>>>>> 21af6c2f92122af8e1004a7bfb1baaa40ef1f124 |
| 83 |
## Détection des blocs AI |
| 84 |
|
| 85 |
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. |
| 86 |
|
| 87 |
## Styles visuels |
| 88 |
|
| 89 |
- **Indicateur visuel** : 🤖 sur les blocs AI Image |
| 90 |
- **Styles personnalisés** : Pour les contrôles IA |
| 91 |
- **Gradient coloré** : Sur le bouton de génération |
| 92 |
- **Spinner** : Pendant le chargement |
| 93 |
|
| 94 |
## Avantages de cette approche |
| 95 |
|
| 96 |
1. **Fonctionnalités complètes** : Toutes les fonctionnalités du bloc core/image sont disponibles |
| 97 |
2. **Interface familière** : Les utilisateurs connaissent déjà l'interface du bloc image |
| 98 |
3. **Compatibilité maximale** : Fonctionne avec tous les thèmes et plugins |
| 99 |
4. **Maintenance simplifiée** : Pas besoin de dupliquer les fonctionnalités du bloc image |
| 100 |
5. **Évolutivité** : Bénéficie automatiquement des améliorations du bloc core/image |
| 101 |
|
| 102 |
## Compatibilité |
| 103 |
|
| 104 |
- Compatible avec tous les thèmes WordPress |
| 105 |
- N'interfère pas avec les blocs image normaux |
| 106 |
- Utilise les APIs WordPress standard |
| 107 |
- Responsive et accessible |
| 108 |
- Support complet des fonctionnalités d'alignement, de légende, de liens, etc. |
| 109 |
|
