CODE D'INTÉGRATION PROFESSIONNEL :

1. HTML - Structure modifiée (à insérer dans le thème existant) :
html
<!-- REMPLACE la section "Bonjour je suis votre assistant IA" par : -->
<div id="assistant-ia" style="height: 60vh; overflow-y: auto; padding: 20px; background: white; border-radius: 10px; margin-bottom: 20px;">
<div class="message-ia" style="background: #e3f2fd; padding: 12px; border-radius: 12px; margin-bottom: 15px; max-width: 80%;">
<strong>🐋 La Baleine IA :</strong> Bonjour ! Je suis votre assistante IA créative. Décrivez-moi une image ou une vidéo, et je la générerai pour vous en expliquant chaque étape.
</div>
<!-- Les messages s'ajouteront ici dynamiquement -->
</div>

<!-- REMPLACE la section "Échec du chargement de l'aperçu" par : -->
<div id="apercu-section" style="background: #1a1a1a; color: white; padding: 20px; border-radius: 10px; height: 60vh; overflow-y: auto;">
<h4 style="color: #4fc3f7;">🎬 Zone de Génération</h4>
<p id="statut-generation" style="color: #bbb;">En attente de votre demande...</p>
<div id="resultat-visuel" style="margin-top: 20px; text-align: center;">
<!-- Images/vidéos apparaîtront ici -->
</div>
<div id="controles-generation" style="margin-top: 20px; display: none;">
<button onclick="telechargerMedia()" style="background: #4caf50; color: white; border: none; padding: 10px 15px; border-radius: 6px; margin-right: 10px;">
📥 Télécharger
</button>
<button onclick="genererNouvelleVersion()" style="background: #ff9800; color: white; border: none; padding: 10px 15px; border-radius: 6px;">
🔄 Regénérer
</button>
</div>
</div>
2. JavaScript - Intelligence et Génération (à ajouter dans script.js) :
javascript
// CONFIGURATION PROFESSIONNELLE
const LaBaleineIA = {
token: "hf_votre_token_gratuit", // À configurer sur HuggingFace
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"
},

// Initialisation
init: function() {
console.log("🐋 La Baleine IA initialisée");
this.setupEventListeners();
},

// Configuration des événements
setupEventListeners: function() {
// Récupère la zone de saisie existante
const inputField = document.querySelector('input[placeholder*="Écrivez votre message"], input[placeholder*="écrire"]');
if (inputField) {
inputField.addEventListener('keypress', (e) => {
if (e.key === 'Enter' && e.target.value.trim()) {
this.processerDemande(e.target.value);
e.target.value = '';
}
});
}

// Bouton d'envoi (si existant)
const sendButton = document.querySelector('button:contains("Envoyer"), button:contains("Send")');
if (sendButton) {
sendButton.addEventListener('click', () => {
const input = document.querySelector('input[placeholder*="Écrivez votre message"], input[placeholder*="écrire"]');
if (input && input.value.trim()) {
this.processerDemande(input.value);
input.value = '';
}
});
}
},

// Traiter la demande utilisateur
processerDemande: async function(demande) {
// 1. Afficher le message utilisateur
this.afficherMessage('utilisateur', demande);

// 2. Réponse initiale de La Baleine
this.afficherMessage('ia', `J'ai bien reçu : "${demande}". Je commence la génération...`);

// 3. Analyser la demande pour le type
const type = this.analyserTypeDemande(demande);

// 4. Expliquer les étapes
this.afficherExplication(`Étape 1/3 : Analyse de votre demande...`);
await this.delay(800);

this.afficherExplication(`Étape 2/3 : Préparation de la génération ${type === 'image' ? 'd\'image' : 'de vidéo'}...`);
await this.delay(800);

// 5. Génération
try {
this.afficherExplication(`Étape 3/3 : Génération en cours avec les modèles IA...`);

if (type === 'image') {
await this.genererImage(demande);
} else {
await this.genererVideo(demande);
}

this.afficherMessage('ia', `✅ Génération terminée ! Consultez la colonne de droite pour voir le résultat.`);
this.afficherExplication(`Processus complet terminé avec succès.`);

} catch (error) {
this.afficherMessage('ia', `❌ Désolée, une erreur est survenue : ${error.message}`);
}
},

// Générer une image
genererImage: async function(prompt) {
const response = await fetch(this.endpoints.image, {
method: 'POST',
headers: {
'Authorization': `Bearer ${this.token}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
inputs: prompt,
parameters: {
num_inference_steps: 30,
guidance_scale: 7.5
}
})
});

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

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

// Afficher dans la colonne droite
this.afficherResultatVisuel('image', urlImage, prompt);

// Sauvegarder pour téléchargement
this.mediaCourant = { type: 'image', url: urlImage, nom: `baleine_${Date.now()}.png` };
},

// Afficher le résultat visuel
afficherResultatVisuel: function(type, url, prompt) {
const section = document.getElementById('apercu-section');
const statut = document.getElementById('statut-generation');
const resultat = document.getElementById('resultat-visuel');
const controles = document.getElementById('controles-generation');

if (statut) statut.textContent = `✅ ${type === 'image' ? 'Image générée' : 'Vidéo générée'}`;

if (resultat) {
if (type === 'image') {
resultat.innerHTML = `
<h5 style="color: #fff; margin-bottom: 15px;">"${prompt}"</h5>
<img src="${url}" alt="Généré par La Baleine"
style="max-width: 100%; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.5);">
`;
} else {
resultat.innerHTML = `
<h5 style="color: #fff; margin-bottom: 15px;">"${prompt}"</h5>
<video src="${url}" controls autoplay
style="max-width: 100%; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.5);">
</video>
`;
}
}

if (controles) controles.style.display = 'block';

// Scroll automatique
section.scrollTop = section.scrollHeight;
},

// Afficher un message dans le chat
afficherMessage: function(auteur, contenu) {
const chat = document.getElementById('assistant-ia');
if (!chat) return;

const messageDiv = document.createElement('div');
messageDiv.className = `message-${auteur}`;
messageDiv.style.cssText = `
padding: 12px;
border-radius: 12px;
margin-bottom: 15px;
max-width: 80%;
${auteur === 'utilisateur' ?
'background: #007bff; color: white; margin-left: auto;' :
'background: #e3f2fd; color: #333;'}
`;

messageDiv.innerHTML = `<strong>${auteur === 'utilisateur' ? '👤 Vous' : '🐋 La Baleine'}:</strong> ${contenu}`;
chat.appendChild(messageDiv);
chat.scrollTop = chat.scrollHeight;
},

// Afficher une explication technique
afficherExplication: function(texte) {
const chat = document.getElementById('assistant-ia');
if (!chat) return;

const explicationDiv = document.createElement('div');
explicationDiv.style.cssText = `
padding: 10px;
border-radius: 8px;
margin: 5px 0;
background: #f5f5f5;
border-left: 4px solid #4fc3f7;
font-size: 14px;
color: #555;
`;
explicationDiv.innerHTML = `⚙️ ${texte}`;
chat.appendChild(explicationDiv);
chat.scrollTop = chat.scrollHeight;
},

// Analyser le type de demande
analyserTypeDemande: function(demande) {
const motsVideo = ['vidéo', 'film', 'animation', 'mouvement', 'cinéma'];
const contientVideo = motsVideo.some(mot => demande.toLowerCase().includes(mot));
return contientVideo ? 'video' : 'image';
},

// Fonction d'attente
delay: function(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
};

// Fonctions de contrôle
function telechargerMedia() {
if (LaBaleineIA.mediaCourant) {
const a = document.createElement('a');
a.href = LaBaleineIA.mediaCourant.url;
a.download = LaBaleineIA.mediaCourant.nom;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}

function genererNouvelleVersion() {
const dernierMessage = document.querySelector('.message-utilisateur:last-child');
if (dernierMessage) {
const texte = dernierMessage.textContent.replace('👤 Vous:', '').trim();
if (texte) LaBaleineIA.processerDemande(texte);
}
}

// Initialiser au chargement
document.addEventListener('DOMContentLoaded', () => {
LaBaleineIA.init();
});

script.js

@@ -1,6 +1,219 @@
 
+// CONFIGURATION PROFESSIONNELLE
+const LaBaleineIA = {
+    token: "hf_votre_token_gratuit", // À configurer sur HuggingFace
+    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"
+    },
+    
+    // Initialisation
+    init: function() {
+        console.log("🐋 La Baleine IA initialisée");
+        this.setupEventListeners();
+    },
+    
+    // Configuration des événements
+    setupEventListeners: function() {
+        // Récupère la zone de saisie existante
+        const inputField = document.querySelector('input[placeholder*="Écrivez votre message"], input[placeholder*="écrire"]');
+        if (inputField) {
+            inputField.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter' && e.target.value.trim()) {
+                    this.processerDemande(e.target.value);
+                    e.target.value = '';
+                }
+            });
+        }
+        
+        // Bouton d'envoi (si existant)
+        const sendButton = document.querySelector('button:contains("Envoyer"), button:contains("Send")');
+        if (sendButton) {
+            sendButton.addEventListener('click', () => {
+                const input = document.querySelector('input[placeholder*="Écrivez votre message"], input[placeholder*="écrire"]');
+                if (input && input.value.trim()) {
+                    this.processerDemande(input.value);
+                    input.value = '';
+                }
+            });
+        }
+    },
+    
+    // Traiter la demande utilisateur
+    processerDemande: async function(demande) {
+        // 1. Afficher le message utilisateur
+        this.afficherMessage('utilisateur', demande);
+        
+        // 2. Réponse initiale de La Baleine
+        this.afficherMessage('ia', `J'ai bien reçu : "${demande}". Je commence la génération...`);
+        
+        // 3. Analyser la demande pour le type
+        const type = this.analyserTypeDemande(demande);
+        
+        // 4. Expliquer les étapes
+        this.afficherExplication(`Étape 1/3 : Analyse de votre demande...`);
+        await this.delay(800);
+        
+        this.afficherExplication(`Étape 2/3 : Préparation de la génération ${type === 'image' ? 'd\'image' : 'de vidéo'}...`);
+        await this.delay(800);
+        
+        // 5. Génération
+        try {
+            this.afficherExplication(`Étape 3/3 : Génération en cours avec les modèles IA...`);
+            
+            if (type === 'image') {
+                await this.genererImage(demande);
+            } else {
+                await this.genererVideo(demande);
+            }
+            
+            this.afficherMessage('ia', `✅ Génération terminée ! Consultez la colonne de droite pour voir le résultat.`);
+            this.afficherExplication(`Processus complet terminé avec succès.`);
+            
+        } catch (error) {
+            this.afficherMessage('ia', `❌ Désolée, une erreur est survenue : ${error.message}`);
+        }
+    },
+    
+    // Générer une image
+    genererImage: async function(prompt) {
+        const response = await fetch(this.endpoints.image, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${this.token}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                inputs: prompt,
+                parameters: {
+                    num_inference_steps: 30,
+                    guidance_scale: 7.5
+                }
+            })
+        });
+        
+        if (!response.ok) throw new Error(`Erreur API: ${response.status}`);
+        
+        const blob = await response.blob();
+        const urlImage = URL.createObjectURL(blob);
+        
+        // Afficher dans la colonne droite
+        this.afficherResultatVisuel('image', urlImage, prompt);
+        
+        // Sauvegarder pour téléchargement
+        this.mediaCourant = { type: 'image', url: urlImage, nom: `baleine_${Date.now()}.png` };
+    },
+    
+    // Afficher le résultat visuel
+    afficherResultatVisuel: function(type, url, prompt) {
+        const section = document.getElementById('apercu-section');
+        const statut = document.getElementById('statut-generation');
+        const resultat = document.getElementById('resultat-visuel');
+        const controles = document.getElementById('controles-generation');
+        
+        if (statut) statut.textContent = `✅ ${type === 'image' ? 'Image générée' : 'Vidéo générée'}`;
+        
+        if (resultat) {
+            if (type === 'image') {
+                resultat.innerHTML = `
+                    <h5 style="color: #fff; margin-bottom: 15px;">"${prompt}"</h5>
+                    <img src="${url}" alt="Généré par La Baleine" 
+                         style="max-width: 100%; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.5);">
+                `;
+            } else {
+                resultat.innerHTML = `
+                    <h5 style="color: #fff; margin-bottom: 15px;">"${prompt}"</h5>
+                    <video src="${url}" controls autoplay 
+                           style="max-width: 100%; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.5);">
+                    </video>
+                `;
+            }
+        }
+        
+        if (controles) controles.style.display = 'block';
+        
+        // Scroll automatique
+        section.scrollTop = section.scrollHeight;
+    },
+    
+    // Afficher un message dans le chat
+    afficherMessage: function(auteur, contenu) {
+        const chat = document.getElementById('assistant-ia');
+        if (!chat) return;
+        
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message-${auteur}`;
+        messageDiv.style.cssText = `
+            padding: 12px;
+            border-radius: 12px;
+            margin-bottom: 15px;
+            max-width: 80%;
+            ${auteur === 'utilisateur' ? 
+                'background: #007bff; color: white; margin-left: auto;' : 
+                'background: #e3f2fd; color: #333;'}
+        `;
+        
+        messageDiv.innerHTML = `<strong>${auteur === 'utilisateur' ? '👤 Vous' : '🐋 La Baleine'}:</strong> ${contenu}`;
+        chat.appendChild(messageDiv);
+        chat.scrollTop = chat.scrollHeight;
+    },
+    
+    // Afficher une explication technique
+    afficherExplication: function(texte) {
+        const chat = document.getElementById('assistant-ia');
+        if (!chat) return;
+        
+        const explicationDiv = document.createElement('div');
+        explicationDiv.style.cssText = `
+            padding: 10px;
+            border-radius: 8px;
+            margin: 5px 0;
+            background: #f5f5f5;
+            border-left: 4px solid #4fc3f7;
+            font-size: 14px;
+            color: #555;
+        `;
+        explicationDiv.innerHTML = `⚙️ ${texte}`;
+        chat.appendChild(explicationDiv);
+        chat.scrollTop = chat.scrollHeight;
+    },
+    
+    // Analyser le type de demande
+    analyserTypeDemande: function(demande) {
+        const motsVideo = ['vidéo', 'film', 'animation', 'mouvement', 'cinéma'];
+        const contientVideo = motsVideo.some(mot => demande.toLowerCase().includes(mot));
+        return contientVideo ? 'video' : 'image';
+    },
+    
+    // Fonction d'attente
+    delay: function(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+};
+
+// Fonctions de contrôle
+function telechargerMedia() {
+    if (LaBaleineIA.mediaCourant) {
+        const a = document.createElement('a');
+        a.href = LaBaleineIA.mediaCourant.url;
+        a.download = LaBaleineIA.mediaCourant.nom;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+    }
+}
+
+function genererNouvelleVersion() {
+    const dernierMessage = document.querySelector('.message-utilisateur:last-child');
+    if (dernierMessage) {
+        const texte = dernierMessage.textContent.replace('👤 Vous:', '').trim();
+        if (texte) LaBaleineIA.processerDemande(texte);
+    }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
-    // Initialize tooltips for icons
+    LaBaleineIA.init();
+// Initialize tooltips for icons
     const initTooltips = () => {
         const buttons = document.querySelectorAll('button');
         buttons.forEach(button => {

style.css

@@ -83,7 +83,7 @@ input:focus, button:focus {
     font-size: 0.875rem;
 }
 /* Chat message styles */
-#chatMessages {
+#chatMessages, #assistant-ia {
     flex: 1;
     overflow-y: auto;
     padding: 1rem;
@@ -92,6 +92,42 @@ input:focus, button:focus {
     gap: 0.75rem;
 }
 
+.message-ia {
+    background: #e3f2fd;
+    padding: 12px;
+    border-radius: 12px;
+    margin-bottom: 15px;
+    max-width: 80%;
+    color: #333;
+}
+
+.message-utilisateur {
+    background: #007bff;
+    color: white;
+    padding: 12px;
+    border-radius: 12px;
+    margin-bottom: 15px;
+    max-width: 80%;
+    margin-left: auto;
+}
+
+#apercu-section {
+    background: #1a1a1a;
+    color: white;
+    padding: 20px;
+    border-radius: 10px;
+    height: 60vh;
+    overflow-y: auto;
+}
+
+#controles-generation button {
+    transition: all 0.2s ease;
+}
+
+#controles-generation button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
 .msg {
     word-break: break-word;
     white-space: pre-wrap;