codecraft-haven / script.js
Abmacode12's picture
CODE D'INTÉGRATION PROFESSIONNEL :
1900a01 verified
// 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', () => {
LaBaleineIA.init();
// Initialize tooltips for icons
const initTooltips = () => {
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
const icon = button.querySelector('[data-feather]');
if (icon) {
const iconName = icon.getAttribute('data-feather');
button.setAttribute('title', iconName.charAt(0).toUpperCase() + iconName.slice(1));
}
});
};
// Handle message sending and AI responses
const setupMessageInput = () => {
const input = document.querySelector('main input');
const sendBtn = document.querySelector('main button:disabled');
const micBtn = document.querySelector('main button[data-feather="mic"]');
const plusBtn = document.querySelector('main button[data-feather="plus"]');
const paperclipBtn = document.querySelector('main button[data-feather="paperclip"]');
const messageContainer = document.querySelector('.flex-1.flex.items-center.justify-center');
// AI response logic
const getAIResponse = (message) => {
const lowerMsg = message.toLowerCase();
if (lowerMsg.includes('image') || lowerMsg.includes('photo') || lowerMsg.includes('picture')) {
return `Je peux générer des images pour toi. Voici un exemple :
<a href="baleine.html" class="text-blue-400 hover:underline">Ouvrir le générateur d'images La Baleine IA</a>`;
}
else if (lowerMsg.includes('vidéo') || lowerMsg.includes('video')) {
return "Pour les vidéos, je peux te conseiller sur le format, la durée et le style. Quel type de vidéo veux-tu créer ?";
}
else if (lowerMsg.includes('thème') || lowerMsg.includes('theme')) {
return "Je peux t'aider à concevoir un thème. Dis-moi pour quelle plateforme (Shopify, WordPress, etc.) et quel style tu recherches.";
}
else if (lowerMsg.includes('plugin')) {
return "Les plugins peuvent étendre les fonctionnalités. Quel type de plugin veux-tu développer ? (pour WordPress, Shopify, etc.)";
}
else {
return "Je peux t'aider avec des images, vidéos, thèmes et plugins. Dis-moi plus précisément ce que tu veux créer !";
}
};
// Display message in chat
const displayMessage = (text, isUser = false) => {
if (!messageContainer) return;
const messageDiv = document.createElement('div');
messageDiv.className = `p-4 mb-2 rounded-lg max-w-[80%] ${isUser ? 'ml-auto bg-blue-900/30 text-blue-100' : 'bg-gray-700/50 text-gray-100'}`;
messageDiv.innerHTML = text;
if (isUser) {
messageContainer.insertBefore(messageDiv, messageContainer.firstChild);
} else {
messageContainer.appendChild(messageDiv);
}
};
// Handle send message
const handleSend = () => {
const message = input.value.trim();
if (!message) return;
displayMessage(message, true);
input.value = '';
sendBtn.disabled = true;
// Simulate AI thinking
setTimeout(() => {
const response = getAIResponse(message);
displayMessage(response);
}, 1000);
};
// Event listeners
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') handleSend();
});
sendBtn.addEventListener('click', handleSend);
// Microphone functionality using Web Speech API
if (micBtn) {
micBtn.addEventListener('click', async () => {
try {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
statusEl.textContent = "Micro: non supporté";
return;
}
const recognition = new SpeechRecognition();
recognition.lang = 'fr-FR';
recognition.interimResults = false;
recognition.onresult = (event) => {
let transcript = '';
for (let i = event.resultIndex; i < event.results.length; i++) {
transcript += event.results[i][0].transcript;
}
inp.value = transcript;
// Only send if the result is final
if (event.results[0].isFinal) {
handleSend();
}
};
recognition.onerror = (event) => {
console.error('Erreur de reconnaissance vocale:', event.error);
statusEl.textContent = "Micro: erreur - " + event.error;
};
statusEl.textContent = "Micro: écoute...";
await navigator.mediaDevices.getUserMedia({ audio: true });
recognition.start();
micBtn.innerHTML = '<i data-feather="mic-off" class="w-5 h-5"></i>';
feather.replace();
recognition.onend = () => {
micBtn.innerHTML = '<i data-feather="mic" class="w-5 h-5"></i>';
feather.replace();
statusEl.textContent = "Micro: prêt";
};
} catch (err) {
console.error('Erreur microphone:', err);
statusEl.textContent = "Micro: permission refusée";
}
});
}
// File attachment functionality
if (paperclipBtn) {
// Create hidden file input
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.style.display = 'none';
document.body.appendChild(fileInput);
paperclipBtn.addEventListener('click', () => {
fileInput.click();
});
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
// Handle different file types
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (event) => {
const img = document.createElement('img');
img.src = event.target.result;
img.classList.add('max-w-xs', 'max-h-40', 'rounded-lg', 'mt-2');
const message = `Fichier image: ${file.name}`;
displayMessage(`${message}<br>`);
messageContainer.appendChild(img);
};
reader.readAsDataURL(file);
} else {
displayMessage(`Fichier joint: ${file.name} (${(file.size / 1024).toFixed(1)} KB)`);
}
});
}
};
// Initialize all functionality
const init = () => {
initTooltips();
setupMessageInput();
};
init();
});