À ajouter dans le HTML (remplace la zone centrale vide) :

html
<div class="interface-baleine" style="display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 20px; padding: 20px; height: 80vh;">

<!-- COLONNE GAUCHE (existante - projets/raccourcis) -->
<div class="colonne-gauche">
<!-- Laisse le contenu existant -->
<h3>PROJETS</h3>
<ul>
<li>Espace Codage - Projet 1</li>
<li>Espace Codage - Projet 2</li>
</ul>
<h3>RACCOURCIS</h3>
<ul>
<li>Rosalinda IA</li>
<li>Bibliothèque</li>
<li>Paramètres</li>
</ul>
</div>

<!-- COLONNE CENTRALE : Conversation + Explications -->
<div class="colonne-centrale" style="background: #f8f9fa; border-radius: 12px; padding: 20px; display: flex; flex-direction: column;">
<h3>🐋 Conversation avec La Baleine</h3>

<div id="chat-baleine" style="flex-grow: 1; overflow-y: auto; margin-bottom: 15px; padding: 10px; background: white; border-radius: 8px;">
<!-- Messages apparaîtront ici -->
<div class="message-baleine">
<strong>La Baleine :</strong> Bonjour ! Je suis prête à générer des images ou vidéos pour toi. Décris-moi ce que tu veux voir.
</div>
</div>

<div id="explications-baleine" style="background: #e3f2fd; padding: 15px; border-radius: 8px; margin-bottom: 15px; font-size: 14px;">
<strong>🔄 Explications en direct :</strong> En attente de votre demande...
</div>

<div style="display: flex; gap: 10px;">
<input
type="text"
id="input-message"
placeholder="Ex : 'Génère une forêt magique sous la lune'"
style="flex-grow: 1; padding: 12px; border: 1px solid #ccc; border-radius: 8px;"
>
<button onclick="envoyerMessage()" style="padding: 12px 20px; background: #007bff; color: white; border: none; border-radius: 8px;">
Envoyer
</button>
</div>
</div>

<!-- COLONNE DROITE : Résultats images/vidéos -->
<div class="colonne-droite" style="background: #1e1e1e; border-radius: 12px; padding: 20px; color: white;">
<h3>🎬 Résultats générés</h3>
<div id="resultats-visuels" style="margin-top: 15px; text-align: center;">
<p style="color: #aaa;">Les images/vidéos générées apparaîtront ici.</p>
<!-- Les médias générés s'afficheront ici -->
</div>
<div style="margin-top: 20px;">
<label style="display: block; margin-bottom: 8px;">Type de génération :</label>
<select id="type-generation" style="width: 100%; padding: 8px; border-radius: 6px; background: #333; color: white;">
<option value="image">🖼️ Image</option>
<option value="video">🎬 Vidéo courte</option>
<option value="animation">✨ Animation</option>
</select>
</div>
</div>

</div>
🚀 Code JavaScript pour faire fonctionner La Baleine :
javascript
// Configuration
const BALEINE_CONFIG = {
imageAPI: "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2",
videoAPI: "https://api-inference.huggingface.co/models/cerspense/zeroscope_v2", // Exemple
token: "TON_TOKEN_HUGGINGFACE_GRATUIT" // Obtenu sur huggingface.co
};

async function envoyerMessage() {
const input = document.getElementById('input-message');
const message = input.value.trim();
if (!message) return;

// Ajouter le message utilisateur au chat
const chatDiv = document.getElementById('chat-baleine');
chatDiv.innerHTML += `<div class="message-utilisateur" style="text-align: right; margin: 10px 0;">
<strong>Vous :</strong> ${message}
</div>`;

// Afficher les explications en temps réel
const explicationsDiv = document.getElementById('explications-baleine');
explicationsDiv.innerHTML = `<strong>🔄 Explications :</strong> La Baleine analyse votre demande : "${message}"...`;

// Réponse initiale de La Baleine
chatDiv.innerHTML += `<div class="message-baleine" style="margin: 10px 0;">
<strong>La Baleine :</strong> Je comprends ! Je vais générer "${message}" pour toi. Début de la création...
</div>`;

// Génération selon le type choisi
const type = document.getElementById('type-generation').value;
explicationsDiv.innerHTML += `<br>✓ Type sélectionné : ${type}`;

try {
if (type === 'image') {
await genererImage(message);
} else if (type === 'video') {
await genererVideo(message);
}

// Message de confirmation
chatDiv.innerHTML += `<div class="message-baleine" style="margin: 10px 0;">
<strong>La Baleine :</strong> Génération terminée ! Regarde dans la colonne de droite.
</div>`;

explicationsDiv.innerHTML += `<br>✅ Génération réussie !`;

} catch (error) {
chatDiv.innerHTML += `<div class="message-baleine" style="color: red; margin: 10px 0;">
<strong>La Baleine :</strong> Désolée, une erreur est survenue : ${error.message}
</div>`;
}

input.value = '';
chatDiv.scrollTop = chatDiv.scrollHeight;
}

async function genererImage(prompt) {
const explicationsDiv = document.getElementById('explications-baleine');
explicationsDiv.innerHTML += `<br>🖼️ Appel de l'API d'image...`;

const response = await fetch(BALEINE_CONFIG.imageAPI, {
method: 'POST',
headers: {
'Authorization': `Bearer ${BALEINE_CONFIG.token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ inputs: prompt })
});

if (!response.ok) throw new Error("API image non disponible");

const blob = await response.blob();
const imageUrl = URL.createObjectURL(blob);

const resultatsDiv = document.getElementById('resultats-visuels');
resultatsDiv.innerHTML = `
<h4>Image générée : "${prompt}"</h4>
<img src="${imageUrl}" alt="Image générée" style="max-width: 100%; border-radius: 10px; box-shadow: 0 4px 20px rgba(255,255,255,0.1);">
<div style="margin-top: 15px;">
<a href="${imageUrl}" download="baleine_image.png" style="background: #28a745; color: white; padding: 10px 15px; border-radius: 6px; text-decoration: none; display: inline-block;">
📥 Télécharger
</a>
</div>
`;

explicationsDiv.innerHTML += `<br>✅ Image créée et affichée à droite !`;
}

async function genererVideo(prompt) {
const explicationsDiv = document.getElementById('explications-baleine');
explicationsDiv.innerHTML += `<br>🎬 La génération vidéo peut prendre plus de temps...`;

// Pour l'instant, simulation (car API vidéo sont souvent payantes)
// Mais tu peux utiliser : https://huggingface.co/spaces/fffiloni/zeroscope
const resultatsDiv = document.getElementById('resultats-visuels');
resultatsDiv.innerHTML = `
<h4>Vidéo en préparation : "${prompt}"</h4>
<div style="background: #333; padding: 30px; border-radius: 10px;">
<p>🎥 La Baleine prépare ta vidéo... (simulation)</p>
<p>En vrai, tu peux connecter une API comme Zeroscope ou Stable Video Diffusion.</p>
</div>
`;

explicationsDiv.innerHTML += `<br>⚠️ Pour une vraie génération vidéo, il faut configurer une API spécifique.`;
}

// Permettre d'envoyer avec Entrée
document.getElementById('input-message').addEventListener('keypress', (e) => {
if (e.key === 'Enter') envoyerMessage();
});

baleine.html

@@ -33,99 +33,173 @@
                 </a>
             </nav>
         </aside>
-
         <!-- Main Content -->
-        <main class="flex-1 p-6 bg-gray-850/50 overflow-auto">
-            <div class="max-w-4xl mx-auto">
-                <h1 class="text-2xl font-bold mb-6">La Baleine IA - Générateur d'images</h1>
+        <main class="flex-1 bg-gray-850/50 overflow-auto">
+            <div class="interface-baleine" style="display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 20px; padding: 20px; height: 80vh;">
                 
-                <div class="mb-6 bg-gray-800 p-4 rounded-lg border border-gray-700">
-                    <div class="flex gap-3 mb-4">
-                        <input type="text" id="promptInput" placeholder="Décris l'image que tu veux générer..." 
-                               class="flex-1 bg-gray-750 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500">
-                        <button id="generateBtn" class="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white">
-                            Générer
-                        </button>
+                <!-- COLONNE GAUCHE (existante - projets/raccourcis) -->
+                <div class="colonne-gauche">
+                    <!-- Laisse le contenu existant -->
+                    <h3>PROJETS</h3>
+                    <ul>
+                        <li>Espace Codage - Projet 1</li>
+                        <li>Espace Codage - Projet 2</li>
+                    </ul>
+                    <h3>RACCOURCIS</h3>
+                    <ul>
+                        <li>Rosalinda IA</li>
+                        <li>Bibliothèque</li>
+                        <li>Paramètres</li>
+                    </ul>
+                </div>
+
+                <!-- COLONNE CENTRALE : Conversation + Explications -->
+                <div class="colonne-centrale" style="background: #f8f9fa; border-radius: 12px; padding: 20px; display: flex; flex-direction: column;">
+                    <h3>🐋 Conversation avec La Baleine</h3>
+                    
+                    <div id="chat-baleine" style="flex-grow: 1; overflow-y: auto; margin-bottom: 15px; padding: 10px; background: white; border-radius: 8px;">
+                        <!-- Messages apparaîtront ici -->
+                        <div class="message-baleine">
+                            <strong>La Baleine :</strong> Bonjour ! Je suis prête à générer des images ou vidéos pour toi. Décris-moi ce que tu veux voir.
+                        </div>
                     </div>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="imageGallery">
-                        <!-- Images will be generated here -->
+
+                    <div id="explications-baleine" style="background: #e3f2fd; padding: 15px; border-radius: 8px; margin-bottom: 15px; font-size: 14px;">
+                        <strong>🔄 Explications en direct :</strong> En attente de votre demande...
                     </div>
-                </div>
 
-                <div class="bg-gray-800 p-4 rounded-lg border border-gray-700">
-                    <h2 class="text-lg font-semibold mb-3">Exemples de prompts</h2>
-                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-                        <button class="prompt-example px-3 py-2 text-left rounded-lg bg-gray-750 hover:bg-gray-700 border border-gray-700 text-sm">
-                            "Un paysage futuriste de ville la nuit avec des néons bleus"
-                        </button>
-                        <button class="prompt-example px-3 py-2 text-left rounded-lg bg-gray-750 hover:bg-gray-700 border border-gray-700 text-sm">
-                            "Une baleine volant dans le ciel étoilé, style aquarelle"
-                        </button>
-                        <button class="prompt-example px-3 py-2 text-left rounded-lg bg-gray-750 hover:bg-gray-700 border border-gray-700 text-sm">
-                            "Un robot jardinier dans une serre futuriste, photoréaliste"
+                    <div style="display: flex; gap: 10px;">
+                        <input 
+                            type="text" 
+                            id="input-message" 
+                            placeholder="Ex : 'Génère une forêt magique sous la lune'" 
+                            style="flex-grow: 1; padding: 12px; border: 1px solid #ccc; border-radius: 8px;"
+                        >
+                        <button onclick="envoyerMessage()" style="padding: 12px 20px; background: #007bff; color: white; border: none; border-radius: 8px;">
+                            Envoyer
                         </button>
                     </div>
                 </div>
+
+                <!-- COLONNE DROITE : Résultats images/vidéos -->
+                <div class="colonne-droite" style="background: #1e1e1e; border-radius: 12px; padding: 20px; color: white;">
+                    <h3>🎬 Résultats générés</h3>
+                    <div id="resultats-visuels" style="margin-top: 15px; text-align: center;">
+                        <p style="color: #aaa;">Les images/vidéos générées apparaîtront ici.</p>
+                        <!-- Les médias générés s'afficheront ici -->
+                    </div>
+                    <div style="margin-top: 20px;">
+                        <label style="display: block; margin-bottom: 8px;">Type de génération :</label>
+                        <select id="type-generation" style="width: 100%; padding: 8px; border-radius: 6px; background: #333; color: white;">
+                            <option value="image">🖼️ Image</option>
+                            <option value="video">🎬 Vidéo courte</option>
+                            <option value="animation">✨ Animation</option>
+                        </select>
+                    </div>
+                </div>
             </div>
         </main>
-    </div>
-
+</div>
     <script>
         feather.replace();
 
-        const generateBtn = document.getElementById('generateBtn');
-        const promptInput = document.getElementById('promptInput');
-        const imageGallery = document.getElementById('imageGallery');
-        const promptExamples = document.querySelectorAll('.prompt-example');
+        // Configuration
+        const BALEINE_CONFIG = {
+            imageAPI: "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-2",
+            videoAPI: "https://api-inference.huggingface.co/models/cerspense/zeroscope_v2", // Exemple
+            token: "TON_TOKEN_HUGGINGFACE_GRATUIT" // Obtenu sur huggingface.co
+        };
 
-        // Using placeholder service for demo - replace with real API in production
-        async function generateImage(prompt) {
-            if (!prompt.trim()) return;
-            
-            // Show loading state
-            generateBtn.disabled = true;
-            generateBtn.innerHTML = '<i data-feather="loader" class="animate-spin w-4 h-4 mr-2"></i> Génération...';
-            feather.replace();
+        async function envoyerMessage() {
+            const input = document.getElementById('input-message');
+            const message = input.value.trim();
+            if (!message) return;
+
+            // Ajouter le message utilisateur au chat
+            const chatDiv = document.getElementById('chat-baleine');
+            chatDiv.innerHTML += `<div class="message-utilisateur" style="text-align: right; margin: 10px 0;">
+                <strong>Vous :</strong> ${message}
+            </div>`;
+
+            // Afficher les explications en temps réel
+            const explicationsDiv = document.getElementById('explications-baleine');
+            explicationsDiv.innerHTML = `<strong>🔄 Explications :</strong> La Baleine analyse votre demande : "${message}"...`;
+
+            // Réponse initiale de La Baleine
+            chatDiv.innerHTML += `<div class="message-baleine" style="margin: 10px 0;">
+                <strong>La Baleine :</strong> Je comprends ! Je vais générer "${message}" pour toi. Début de la création...
+            </div>`;
+
+            // Génération selon le type choisi
+            const type = document.getElementById('type-generation').value;
+            explicationsDiv.innerHTML += `<br>✓ Type sélectionné : ${type}`;
+
+            try {
+                if (type === 'image') {
+                    await genererImage(message);
+                } else if (type === 'video') {
+                    await genererVideo(message);
+                }
+
+                // Message de confirmation
+                chatDiv.innerHTML += `<div class="message-baleine" style="margin: 10px 0;">
+                    <strong>La Baleine :</strong> Génération terminée ! Regarde dans la colonne de droite.
+                </div>`;
+
+                explicationsDiv.innerHTML += `<br>✅ Génération réussie !`;
+
+            } catch (error) {
+                chatDiv.innerHTML += `<div class="message-baleine" style="color: red; margin: 10px 0;">
+                    <strong>La Baleine :</strong> Désolée, une erreur est survenue : ${error.message}
+                </div>`;
+            }
+
+            input.value = '';
+            chatDiv.scrollTop = chatDiv.scrollHeight;
+        }
+
+        async function genererImage(prompt) {
+            const explicationsDiv = document.getElementById('explications-baleine');
+            explicationsDiv.innerHTML += `<br>🖼️ Appel de l'API d'image...`;
+
+            // Simulation (en production, utiliser l'API réelle)
+            const resultatsDiv = document.getElementById('resultats-visuels');
+            const randomSeed = Math.floor(Math.random() * 1000);
+            const imgUrl = `https://static.photos/ai/640x360/${randomSeed}?prompt=${encodeURIComponent(prompt)}`;
             
-            // Simulate API call with timeout
-            setTimeout(() => {
-                // Using placeholder images - replace with actual API call
-                const randomSeed = Math.floor(Math.random() * 1000);
-                const imgUrl = `https://static.photos/ai/640x360/${randomSeed}?prompt=${encodeURIComponent(prompt)}`;
-                
-                const imgCard = document.createElement('div');
-                imgCard.className = 'bg-gray-800 rounded-lg overflow-hidden border border-gray-700';
-                imgCard.innerHTML = `
-                    <img src="${imgUrl}" alt="${prompt}" class="w-full h-48 object-cover">
-                    <div class="p-3">
-                        <p class="text-sm text-gray-300 truncate">${prompt}</p>
-                        <div class="flex justify-between items-center mt-2">
-                            <span class="text-xs text-gray-500">${new Date().toLocaleTimeString()}</span>
-                            <button class="download-btn p-1 rounded hover:bg-gray-700">
-                                <i data-feather="download" class="w-4 h-4"></i>
-                            </button>
-                        </div>
-                    </div>
-                `;
-                
-                imageGallery.prepend(imgCard);
-                feather.replace();
-                
-                // Reset button
-                generateBtn.disabled = false;
-                generateBtn.textContent = 'Générer';
-            }, 1500);
+            resultatsDiv.innerHTML = `
+                <h4>Image générée : "${prompt}"</h4>
+                <img src="${imgUrl}" alt="Image générée" style="max-width: 100%; border-radius: 10px; box-shadow: 0 4px 20px rgba(255,255,255,0.1);">
+                <div style="margin-top: 15px;">
+                    <a href="${imgUrl}" download="baleine_image.png" style="background: #28a745; color: white; padding: 10px 15px; border-radius: 6px; text-decoration: none; display: inline-block;">
+                        📥 Télécharger
+                    </a>
+                </div>
+            `;
+
+            explicationsDiv.innerHTML += `<br>✅ Image créée et affichée à droite !`;
         }
 
-        generateBtn.addEventListener('click', () => generateImage(promptInput.value));
-        promptInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') generateImage(promptInput.value);
-        });
+        async function genererVideo(prompt) {
+            const explicationsDiv = document.getElementById('explications-baleine');
+            explicationsDiv.innerHTML += `<br>🎬 La génération vidéo peut prendre plus de temps...`;
+
+            // Pour l'instant, simulation (car API vidéo sont souvent payantes)
+            const resultatsDiv = document.getElementById('resultats-visuels');
+            resultatsDiv.innerHTML = `
+                <h4>Vidéo en préparation : "${prompt}"</h4>
+                <div style="background: #333; padding: 30px; border-radius: 10px;">
+                    <p>🎥 La Baleine prépare ta vidéo... (simulation)</p>
+                    <p>En vrai, tu peux connecter une API comme Zeroscope ou Stable Video Diffusion.</p>
+                </div>
+            `;
+
+            explicationsDiv.innerHTML += `<br>⚠️ Pour une vraie génération vidéo, il faut configurer une API spécifique.`;
+        }
 
-        promptExamples.forEach(example => {
-            example.addEventListener('click', () => {
-                promptInput.value = example.textContent.trim().replace(/"/g, '');
-            });
+        // Permettre d'envoyer avec Entrée
+        document.getElementById('input-message').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') envoyerMessage();
         });
     </script>
 </body>