Je vous remercie pour votre travail. J’ai bien récupéré ma clé API OpenAI. Pourriez-vous l’intégrer à notre système afin que l’IA soit pleinement fonctionnelle (chat, génération d’images, etc.) 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

index.html

@@ -34,9 +34,11 @@
                 <div class="activity-monitor">[ Activité IA en cours... ]</div>
             </div>
             <div class="chat-messages" id="chatMessages">
-                <!-- Messages Rosalinda ici -->
+                <ai-assistant>
+                    Bonjour ! Je suis Rosalinda, votre assistante IA. Comment puis-je vous aider aujourd'hui ?
+                </ai-assistant>
             </div>
-            <div class="chat-input">
+<div class="chat-input">
                 <button title="Ajouter un fichier"><i class="fas fa-plus"></i></button>
                 <button title="Connexion"><i class="fas fa-plug"></i></button>
                 <input type="text" placeholder="Écrire à Rosalinda..." />

script.js

@@ -1,4 +1,105 @@
 
-console.log("Interface Espace Codage chargée.");
+// Configuration OpenAI
+const OPENAI_API_KEY = "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";
+const OPENAI_API_URL = "https://api.openai.com/v1";
 
-// Tu pourras ajouter ici les fonctions pour Rosalinda plus tard
+// Éléments DOM
+const chatMessages = document.getElementById('chatMessages');
+const chatInput = document.querySelector('.chat-input input');
+const sendButton = document.querySelector('.chat-input button[title="Envoyer"]');
+const codeOutput = document.getElementById('codeOutput');
+
+// Gestionnaire d'envoi de message
+sendButton.addEventListener('click', sendMessage);
+chatInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') sendMessage();
+});
+
+async function sendMessage() {
+    const message = chatInput.value.trim();
+    if (!message) return;
+
+    // Afficher le message de l'utilisateur
+    addMessage('user', message);
+    chatInput.value = '';
+
+    try {
+        // Appel à l'API OpenAI
+        const response = await fetch(`${OPENAI_API_URL}/chat/completions`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${OPENAI_API_KEY}`
+            },
+            body: JSON.stringify({
+                model: "gpt-4",
+                messages: [{ role: "user", content: message }],
+                temperature: 0.7
+            })
+        });
+
+        const data = await response.json();
+        const aiResponse = data.choices[0].message.content;
+
+        // Afficher la réponse de l'IA
+        addMessage('assistant', aiResponse);
+
+        // Si la réponse contient du code, l'afficher dans la sortie code
+        if (aiResponse.includes('```')) {
+            const codeBlocks = aiResponse.match(/```[\s\S]*?```/g);
+            codeOutput.innerHTML = `<pre><code>${codeBlocks.join('\n\n').replace(/```/g, '')}</code></pre>`;
+        }
+    } catch (error) {
+        console.error('Erreur OpenAI:', error);
+        addMessage('assistant', "Désolé, une erreur s'est produite. Veuillez réessayer.");
+    }
+}
+
+function addMessage(sender, content) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${sender}`;
+    messageDiv.innerHTML = `
+        <div class="message-content">${content}</div>
+    `;
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+// Fonction pour générer des images
+async function generateImage(prompt) {
+    try {
+        const response = await fetch(`${OPENAI_API_URL}/images/generations`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${OPENAI_API_KEY}`
+            },
+            body: JSON.stringify({
+                prompt: prompt,
+                n: 1,
+                size: "1024x1024"
+            })
+        });
+
+        const data = await response.json();
+        return data.data[0].url;
+    } catch (error) {
+        console.error('Erreur génération image:', error);
+        return null;
+    }
+}
+
+// Exposer la fonction pour le bouton "Nouvelle tâche"
+document.querySelector('.menu button:nth-child(1)').addEventListener('click', () => {
+    const prompt = prompt("Décrivez l'image que vous souhaitez générer:");
+    if (prompt) {
+        generateImage(prompt).then(url => {
+            if (url) {
+                const resultOutput = document.querySelector('.result-output');
+                resultOutput.innerHTML = `<img src="${url}" alt="Image générée" style="max-width:100%;">`;
+            }
+        });
+    }
+});
+
+console.log("Interface Espace Codage chargée avec intégration OpenAI.");

style.css

@@ -72,6 +72,30 @@ body, html {
   padding: 10px;
   border: 1px solid #ddd;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.message {
+  max-width: 80%;
+  padding: 10px 15px;
+  border-radius: 18px;
+  line-height: 1.4;
+}
+.message.user {
+  align-self: flex-end;
+  background: #6366f1;
+  color: white;
+  border-bottom-right-radius: 5px;
+}
+.message.assistant {
+  align-self: flex-start;
+  background: #e0e0e0;
+  color: #333;
+  border-bottom-left-radius: 5px;
+}
+.message-content {
+  white-space: pre-wrap;
 }
 .chat-input {
   display: flex;