CODE D'INTÉGRATION POUR LA BALEINE IA

1. HTML - Interface de La Baleine (à ajouter dans la section appropriée) :
html
<!-- Interface La Baleine IA -->
<div id="interface-baleine" style="display: none;" class="interface-ia">

<!-- En-tête -->
<div class="ia-header" style="padding: 20px; background: linear-gradient(135deg, #1a237e, #4fc3f7); color: white; border-radius: 12px 12px 0 0;">
<h2 style="margin: 0;">🐋 La Baleine IA - Générateur Multimédia</h2>
<p style="margin: 5px 0 0 0; opacity: 0.9;">Génération d'images et vidéos par IA - Explications en temps réel</p>
</div>

<!-- Contenu principal -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; height: 70vh;">

<!-- Colonne gauche : Chat et explications -->
<div class="colonne-gauche" style="display: flex; flex-direction: column;">
<div id="chat-baleine" style="flex-grow: 1; overflow-y: auto; background: #f8f9fa; border-radius: 10px; padding: 15px; margin-bottom: 15px;">
<div class="message-ia">
<strong>🐋 La Baleine :</strong> Bonjour ! Je suis votre générateur IA multimédia. Décrivez une scène, et je créerai l'image ou la vidéo correspondante tout en vous expliquant le processus.
</div>
</div>

<div id="explications-baleine" style="background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 8px; padding: 12px; font-size: 14px; color: #2e7d32;">
<strong>📊 Explications en direct :</strong> En attente de votre demande...
</div>
</div>

<!-- Colonne droite : Résultats visuels -->
<div class="colonne-droite" style="display: flex; flex-direction: column;">
<div id="resultats-baleine" style="flex-grow: 1; background: #263238; border-radius: 10px; padding: 20px; overflow-y: auto; text-align: center;">
<h4 style="color: #4fc3f7; margin-top: 0;">🎬 Zone de Génération</h4>
<div id="media-container" style="min-height: 300px; display: flex; align-items: center; justify-content: center; color: #78909c;">
<p>Votre média généré apparaîtra ici</p>
</div>
</div>

<div class="controles-baleine" style="margin-top: 15px; display: flex; gap: 10px;">
<button onclick="telechargerMediaBaleine()" class="btn-success" style="flex: 1;">
📥 Télécharger
</button>
<button onclick="regenererMediaBaleine()" class="btn-warning" style="flex: 1;">
🔄 Regénérer
</button>
</div>
</div>
</div>

<!-- Zone de saisie et contrôles -->
<div style="padding: 15px 20px; background: #f5f5f5; border-radius: 0 0 12px 12px; border-top: 1px solid #ddd;">
<div style="display: flex; gap: 10px; align-items: center;">
<input type="text"
id="input-baleine"
placeholder="Décrivez votre image ou vidéo (ex: 'un dragon volant au coucher du soleil')"
style="flex-grow: 1; padding: 12px; border: 2px solid #4fc3f7; border-radius: 8px; font-size: 16px;">

<button onclick="envoyerPromptBaleine()"
style="background: #4fc3f7; color: white; border: none; padding: 12px 25px; border-radius: 8px; font-weight: bold; cursor: pointer;">
🚀 Générer
</button>

<button onclick="activerMicroBaleine()"
id="btn-micro-baleine"
style="background: #ff4081; color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer;">
🎤 Micro
</button>
</div>

<div style="margin-top: 10px; display: flex; gap: 15px; font-size: 14px;">
<label>
<input type="radio" name="type-media" value="image" checked> 🖼️ Image
</label>
<label>
<input type="radio" name="type-media" value="video"> 🎬 Vidéo
</label>
<label>
<input type="radio" name="type-media" value="animation"> ✨ Animation
</label>
</div>
</div>
</div>
2. JavaScript - Moteur de La Baleine :
javascript
// ============================================
// 🐋 MOTEUR DE LA BALEINE IA - GÉNÉRATEUR MULTIMÉDIA
// ============================================

class BaleineIA {
constructor() {
this.config = {
apiKey: "hf_votre_cle_api_gratuite", // À remplacer
endpoints: {
image: "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0",
video: "https://api-inference.huggingface.co/models/cerspense/zeroscope_v2_576w"
},
maxSteps: 50,
guidanceScale: 7.5
};

this.mediaCourant = null;
this.recognizer = null;
this.ecouteActive = false;

this.init();
}

init() {
console.log("🐋 La Baleine IA initialisée - Version Générateur Multimédia");
this.setupEventListeners();
this.setupReconnaissanceVocale();
}

setupEventListeners() {
// Saisie clavier
const input = document.getElementById('input-baleine');
if (input) {
input.addEventListener('keypress', (e) => {
if (e.key === 'Enter') this.processerDemande(input.value);
});
}

// Activation via le menu
const menuBaleine = document.querySelector('[href*="Baleine"], [onclick*="Baleine"]');
if (menuBaleine) {
menuBaleine.addEventListener('click', (e) => {
e.preventDefault();
this.afficherInterface();
});
}
}

setupReconnaissanceVocale() {
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
this.recognizer = new SpeechRecognition();
this.recognizer.lang = 'fr-FR';
this.recognizer.continuous = false;
this.recognizer.interimResults = false;

this.recognizer.onresult = (event) => {
const transcription = event.results[0][0].transcript;
document.getElementById('input-baleine').value = transcription;
this.processerDemande(transcription);
this.ecouteActive = false;
document.getElementById('btn-micro-baleine').style.background = '#ff4081';
};

this.recognizer.onerror = (event) => {
console.error("Erreur reconnaissance vocale:", event.error);
this.ecouteActive = false;
document.getElementById('btn-micro-baleine').style.background = '#ff4081';
};
}
}

afficherInterface() {
document.getElementById('interface-baleine').style.display = 'block';
this.afficherMessageIA("Interface activée ! Prêt à générer des médias.");
}

// ==================== PROCESSUS PRINCIPAL ====================

async processerDemande(prompt) {
if (!prompt.trim()) return;

// 1. Afficher la demande utilisateur
this.afficherMessageUtilisateur(prompt);

// 2. Déterminer le type de média
const typeMedia = this.determinerTypeMedia(prompt);

// 3. Explications étape par étape
await this.expliquerProcessus(prompt, typeMedia);

// 4. Génération réelle
try {
const resultat = await this.genererMedia(prompt, typeMedia);
this.afficherResultat(resultat, prompt, typeMedia);
this.afficherMessageIA(`✅ Génération réussie ! "${prompt}" est maintenant disponible.`);
} catch (error) {
this.afficherMessageIA(`❌ Erreur : ${error.message}. Tentative avec un modèle de secours...`);
await this.genererSecours(prompt, typeMedia);
}
}

async expliquerProcessus(prompt, typeMedia) {
const etapes = [
"Analyse sémantique de votre demande...",
"Extraction des mots-clés et contexte...",
`Préparation du modèle ${typeMedia === 'image' ? 'd\'image' : 'de vidéo'}...`,
"Configuration des paramètres de génération...",
"Lancement de l'inférence IA...",
"Post-traitement et optimisation..."
];

for (let i = 0; i < etapes.length; i++) {
this.afficherExplication(`Étape ${i+1}/${etapes.length}: ${etapes[i]}`);
await this.delai(600); // Pause pour effet réaliste
}
}

async genererMedia(prompt, type) {
this.afficherExplication("⚙️ Connexion à l'API de génération...");

const endpoint = type === 'image' ? this.config.endpoints.image : this.config.endpoints.video;

const response = await fetch(endpoint, {
method: 'POST',
headers: {
'Authorization': `Bearer ${this.config.apiKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
inputs: prompt,
parameters: {
num_inference_steps: this.config.maxSteps,
guidance_scale: this.config.guidanceScale,
width: type === 'image' ? 768 : 576,
height: type === 'image' ? 768 : 320
}
})
});

if (!response.ok) {
throw new Error(`API non disponible (${response.status})`);
}

this.afficherExplication("✅ Génération terminée ! Traitement du résultat...");

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

baleine.html

@@ -35,172 +35,427 @@
         </aside>
         <!-- Main Content -->
         <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;">
-                
-                <!-- 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>
+            <!-- Interface La Baleine IA -->
+            <div id="interface-baleine" class="interface-ia">
+                
+                <!-- En-tête -->
+                <div class="ia-header" style="padding: 20px; background: linear-gradient(135deg, #1a237e, #4fc3f7); color: white; border-radius: 12px 12px 0 0;">
+                    <h2 style="margin: 0;">🐋 La Baleine IA - Générateur Multimédia</h2>
+                    <p style="margin: 5px 0 0 0; opacity: 0.9;">Génération d'images et vidéos par IA - Explications en temps réel</p>
                 </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>
+                
+                <!-- Contenu principal -->
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px; height: 70vh;">
                     
-                    <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.
+                    <!-- Colonne gauche : Chat et explications -->
+                    <div class="colonne-gauche" style="display: flex; flex-direction: column;">
+                        <div id="chat-baleine" style="flex-grow: 1; overflow-y: auto; background: #f8f9fa; border-radius: 10px; padding: 15px; margin-bottom: 15px;">
+                            <div class="message-ia">
+                                <strong>🐋 La Baleine :</strong> Bonjour ! Je suis votre générateur IA multimédia. Décrivez une scène, et je créerai l'image ou la vidéo correspondante tout en vous expliquant le processus.
+                            </div>
+                        </div>
+                        
+                        <div id="explications-baleine" style="background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 8px; padding: 12px; font-size: 14px; color: #2e7d32;">
+                            <strong>📊 Explications en direct :</strong> En attente de votre demande...
                         </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>
+                    
+                    <!-- Colonne droite : Résultats visuels -->
+                    <div class="colonne-droite" style="display: flex; flex-direction: column;">
+                        <div id="resultats-baleine" style="flex-grow: 1; background: #263238; border-radius: 10px; padding: 20px; overflow-y: auto; text-align: center;">
+                            <h4 style="color: #4fc3f7; margin-top: 0;">🎬 Zone de Génération</h4>
+                            <div id="media-container" style="min-height: 300px; display: flex; align-items: center; justify-content: center; color: #78909c;">
+                                <p>Votre média généré apparaîtra ici</p>
+                            </div>
+                        </div>
+                        
+                        <div class="controles-baleine" style="margin-top: 15px; display: flex; gap: 10px;">
+                            <button onclick="telechargerMediaBaleine()" class="btn-success" style="flex: 1;">
+                                📥 Télécharger
+                            </button>
+                            <button onclick="regenererMediaBaleine()" class="btn-warning" style="flex: 1;">
+                                 🔄 Regénérer
+                            </button>
+                        </div>
                     </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 -->
+                
+                <!-- Zone de saisie et contrôles -->
+                <div style="padding: 15px 20px; background: #f5f5f5; border-radius: 0 0 12px 12px; border-top: 1px solid #ddd;">
+                    <div style="display: flex; gap: 10px; align-items: center;">
+                        <input type="text" 
+                               id="input-baleine" 
+                               placeholder="Décrivez votre image ou vidéo (ex: 'un dragon volant au coucher du soleil')" 
+                               style="flex-grow: 1; padding: 12px; border: 2px solid #4fc3f7; border-radius: 8px; font-size: 16px;">
+                        
+                        <button onclick="envoyerPromptBaleine()" 
+                                style="background: #4fc3f7; color: white; border: none; padding: 12px 25px; border-radius: 8px; font-weight: bold; cursor: pointer;">
+                             Générer
+                        </button>
+                        
+                        <button onclick="activerMicroBaleine()" 
+                                id="btn-micro-baleine"
+                                style="background: #ff4081; color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer;">
+                             Micro
+                        </button>
                     </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 style="margin-top: 10px; display: flex; gap: 15px; font-size: 14px;">
+                        <label>
+                            <input type="radio" name="type-media" value="image" checked>  🖼️ Image
+                        </label>
+                        <label>
+                            <input type="radio" name="type-media" value="video">  🎬 Vidéo
+                        </label>
+                        <label>
+                            <input type="radio" name="type-media" value="animation">  ✨ Animation
+                        </label>
                     </div>
                 </div>
             </div>
         </main>
-</div>
+    </div>
     <script>
         feather.replace();
+        
+        // ============================================
+        //  MOTEUR DE LA BALEINE IA - GÉNÉRATEUR MULTIMÉDIA
+        // ============================================
 
-        // 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);
+        class BaleineIA {
+            constructor() {
+                this.config = {
+                    apiKey: "hf_votre_cle_api_gratuite", // À remplacer
+                    endpoints: {
+                        image: "https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0",
+                        video: "https://api-inference.huggingface.co/models/cerspense/zeroscope_v2_576w"
+                    },
+                    maxSteps: 50,
+                    guidanceScale: 7.5
+                };
+                
+                this.mediaCourant = null;
+                this.recognizer = null;
+                this.ecouteActive = false;
+                
+                this.init();
+            }
+            
+            init() {
+                console.log("🐋 La Baleine IA initialisée - Version Générateur Multimédia");
+                this.setupEventListeners();
+                this.setupReconnaissanceVocale();
+            }
+            
+            setupEventListeners() {
+                // Saisie clavier
+                const input = document.getElementById('input-baleine');
+                if (input) {
+                    input.addEventListener('keypress', (e) => {
+                        if (e.key === 'Enter') this.processerDemande(input.value);
+                    });
+                }
+            }
+            
+            setupReconnaissanceVocale() {
+                if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
+                    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                    this.recognizer = new SpeechRecognition();
+                    this.recognizer.lang = 'fr-FR';
+                    this.recognizer.continuous = false;
+                    this.recognizer.interimResults = false;
+                    
+                    this.recognizer.onresult = (event) => {
+                        const transcription = event.results[0][0].transcript;
+                        document.getElementById('input-baleine').value = transcription;
+                        this.processerDemande(transcription);
+                        this.ecouteActive = false;
+                        document.getElementById('btn-micro-baleine').style.background = '#ff4081';
+                    };
+                    
+                    this.recognizer.onerror = (event) => {
+                        console.error("Erreur reconnaissance vocale:", event.error);
+                        this.ecouteActive = false;
+                        document.getElementById('btn-micro-baleine').style.background = '#ff4081';
+                    };
+                }
+            }
+            
+            // ==================== PROCESSUS PRINCIPAL ====================
+            
+            async processerDemande(prompt) {
+                if (!prompt.trim()) return;
+                
+                // 1. Afficher la demande utilisateur
+                this.afficherMessageUtilisateur(prompt);
+                
+                // 2. Déterminer le type de média
+                const typeMedia = this.determinerTypeMedia(prompt);
+                
+                // 3. Explications étape par étape
+                await this.expliquerProcessus(prompt, typeMedia);
+                
+                // 4. Génération réelle
+                try {
+                    const resultat = await this.genererMedia(prompt, typeMedia);
+                    this.afficherResultat(resultat, prompt, typeMedia);
+                    this.afficherMessageIA(`✅ Génération réussie ! "${prompt}" est maintenant disponible.`);
+                } catch (error) {
+                    this.afficherMessageIA(`❌ Erreur : ${error.message}. Tentative avec un modèle de secours...`);
+                    await this.genererSecours(prompt, typeMedia);
+                }
+            }
+            
+            async expliquerProcessus(prompt, typeMedia) {
+                const etapes = [
+                    "Analyse sémantique de votre demande...",
+                    "Extraction des mots-clés et contexte...",
+                    `Préparation du modèle ${typeMedia === 'image' ? 'd\'image' : 'de vidéo'}...`,
+                    "Configuration des paramètres de génération...",
+                    "Lancement de l'inférence IA...",
+                    "Post-traitement et optimisation..."
+                ];
+                
+                for (let i = 0; i < etapes.length; i++) {
+                    this.afficherExplication(`Étape ${i+1}/${etapes.length}: ${etapes[i]}`);
+                    await this.delai(600); // Pause pour effet réaliste
+                }
+            }
+            
+            async genererMedia(prompt, type) {
+                this.afficherExplication("⚙️ Connexion à l'API de génération...");
+                
+                const endpoint = type === 'image' ? this.config.endpoints.image : this.config.endpoints.video;
+                
+                const response = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${this.config.apiKey}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        inputs: prompt,
+                        parameters: {
+                            num_inference_steps: this.config.maxSteps,
+                            guidance_scale: this.config.guidanceScale,
+                            width: type === 'image' ? 768 : 576,
+                            height: type === 'image' ? 768 : 320
+                        }
+                    })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`API non disponible (${response.status})`);
+                }
+                
+                this.afficherExplication("✅ Génération terminée ! Traitement du résultat...");
+                
+                const blob = await response.blob();
+                const url = URL.createObjectURL(blob);
+                
+                return { type, url, blob, nom: `baleine_${type}_${Date.now()}.${type === 'image' ? 'png' : 'mp4'}` };
+            }
+            
+            genererSecours(prompt, type) {
+                // Solution de secours avec API alternative
+                this.afficherExplication("🔄 Activation du mode secours...");
+                
+                // Utiliser une API publique gratuite
+                const apiSecours = type === 'image' 
+                    ? `https://api.unsplash.com/photos/random?query=${encodeURIComponent(prompt)}&client_id=VOTRE_CLE_UNSPLASH`
+                    : `https://api.pexels.com/videos/search?query=${encodeURIComponent(prompt)}&per_page=1`;
+                
+                return fetch(apiSecours)
+                    .then(res => res.json())
+                    .then(data => {
+                        let url;
+                        if (type === 'image') {
+                            url = data.urls.regular;
+                        } else {
+                            url = data.videos[0].video_files[0].link;
+                        }
+                        
+                        return {
+                            type,
+                            url,
+                            nom: `baleine_${type}_secours_${Date.now()}.${type === 'image' ? 'jpg' : 'mp4'}`,
+                            source: 'secours'
+                        };
+                    });
+            }
+            
+            afficherResultat(media, prompt, type) {
+                this.mediaCourant = media;
+                
+                const container = document.getElementById('media-container');
+                const typeTexte = type === 'image' ? 'Image générée' : 'Vidéo générée';
+                
+                let html = `
+                    <h5 style="color: #fff; margin-bottom: 20px;">"${prompt}"</h5>
+                    <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px;">
+                `;
+                
+                if (media.type === 'image') {
+                    html += `
+                        <img src="${media.url}" 
+                             alt="${prompt}"
+                             style="max-width: 100%; max-height: 400px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
+                    `;
+                } else {
+                    html += `
+                        <video controls autoplay 
+                               style="max-width: 100%; max-height: 400px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
+                            <source src="${media.url}" type="video/mp4">
+                        </video>
+                    `;
+                }
+                
+                html += `
+                    <div style="margin-top: 15px; color: #b0bec5;">
+                        <small>${typeTexte} • ${new Date().toLocaleTimeString()}</small>
+                    </div>
+                    </div>
+                `;
+                
+                container.innerHTML = html;
+                
+                // Activer les boutons de contrôle
+                document.querySelector('.controles-baleine').style.display = 'flex';
+            }
+            
+            // ==================== AFFICHAGE DES MESSAGES ====================
+            
+            afficherMessageUtilisateur(texte) {
+                const chat = document.getElementById('chat-baleine');
+                const div = document.createElement('div');
+                div.className = 'message-utilisateur';
+                div.style.cssText = `
+                    background: #007bff; 
+                    color: white; 
+                    padding: 10px 15px; 
+                    border-radius: 15px 15px 0 15px; 
+                    margin: 10px 0 10px auto; 
+                    max-width: 80%;
+                    word-wrap: break-word;
+                `;
+                div.innerHTML = `<strong>👤 Vous :</strong> ${texte}`;
+                chat.appendChild(div);
+                chat.scrollTop = chat.scrollHeight;
+            }
+            
+            afficherMessageIA(texte) {
+                const chat = document.getElementById('chat-baleine');
+                const div = document.createElement('div');
+                div.className = 'message-ia';
+                div.style.cssText = `
+                    background: #e3f2fd; 
+                    color: #1565c0; 
+                    padding: 10px 15px; 
+                    border-radius: 15px 15px 15px 0; 
+                    margin: 10px 0; 
+                    max-width: 80%;
+                    word-wrap: break-word;
+                `;
+                div.innerHTML = `<strong>🐋 La Baleine :</strong> ${texte}`;
+                chat.appendChild(div);
+                chat.scrollTop = chat.scrollHeight;
+            }
+            
+            afficherExplication(texte) {
+                const explications = document.getElementById('explications-baleine');
+                if (explications) {
+                    explications.innerHTML = `<strong>📊 Explications en direct :</strong> ${texte}`;
+                }
+            }
+            
+            // ==================== FONCTIONS UTILITAIRES ====================
+            
+            determinerTypeMedia(prompt) {
+                const promptLower = prompt.toLowerCase();
+                const motsVideo = ['vidéo', 'film', 'animation', 'mouvement', 'cinéma', 'courte', 'gif'];
+                const motsImage = ['image', 'photo', 'illustration', 'dessin', 'tableau', 'affiche'];
+                
+                for (const mot of motsVideo) {
+                    if (promptLower.includes(mot)) return 'video';
+                }
+                
+                for (const mot of motsImage) {
+                    if (promptLower.includes(mot)) return 'image';
+                }
+                
+                // Par défaut, image
+                return document.querySelector('input[name="type-media"]:checked').value;
+            }
+            
+            delai(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
+            }
+            
+            activerMicro() {
+                if (!this.recognizer) {
+                    this.afficherMessageIA("⚠️ Reconnaissance vocale non supportée sur ce navigateur.");
+                    return;
+                }
+                
+                if (!this.ecouteActive) {
+                    this.recognizer.start();
+                    this.ecouteActive = true;
+                    document.getElementById('btn-micro-baleine').style.background = '#d81b60';
+                    this.afficherMessageIA("🎤 Micro activé - Parlez maintenant...");
+                } else {
+                    this.recognizer.stop();
+                    this.ecouteActive = false;
+                    document.getElementById('btn-micro-baleine').style.background = '#ff4081';
                 }
-
-                // 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...`;
+        // ============================================
+        // FONCTIONS GLOBALES POUR LES BOUTONS
+        // ============================================
 
-            // 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)}`;
-            
-            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>
-            `;
+        // Instance globale
+        const LaBaleine = new BaleineIA();
 
-            explicationsDiv.innerHTML += `<br>✅ Image créée et affichée à droite !`;
+        // Fonctions appelées par les boutons HTML
+        function envoyerPromptBaleine() {
+            const input = document.getElementById('input-baleine');
+            if (input.value.trim()) {
+                LaBaleine.processerDemande(input.value);
+                input.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...`;
+        function activerMicroBaleine() {
+            LaBaleine.activerMicro();
+        }
 
-            // 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>
-            `;
+        function telechargerMediaBaleine() {
+            if (LaBaleine.mediaCourant) {
+                const a = document.createElement('a');
+                a.href = LaBaleine.mediaCourant.url;
+                a.download = LaBaleine.mediaCourant.nom;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                
+                LaBaleine.afficherMessageIA(`📥 Téléchargement de "${LaBaleine.mediaCourant.nom}" lancé !`);
+            }
+        }
 
-            explicationsDiv.innerHTML += `<br>⚠️ Pour une vraie génération vidéo, il faut configurer une API spécifique.`;
+        function regenererMediaBaleine() {
+            const dernierPrompt = document.querySelector('.message-utilisateur:last-child');
+            if (dernierPrompt) {
+                const texte = dernierPrompt.textContent.replace('👤 Vous:', '').trim();
+                if (texte) {
+                    LaBaleine.afficherMessageIA("🔄 Regénération en cours...");
+                    LaBaleine.processerDemande(texte);
+                }
+            }
         }
 
-        // Permettre d'envoyer avec Entrée
-        document.getElementById('input-message').addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') envoyerMessage();
-        });
-    </script>
+        // Exporter pour DeepSite
+        window.LaBaleineIA = LaBaleine;
+</script>
 </body>
 </html>