Merci encore pour votre collaboration sur le projet Espace Codage. J’avance bien grâce à votre travail.

Je me permets de vous solliciter pour finaliser l'intégration de notre IA Rosalinda, afin qu'elle soit pleinement fonctionnelle — comme présenté dans l’interface visible sur la capture d’écran. J’aimerais que le backend soit opérationnel à 100 %, avec les fonctionnalités suivantes :

💬 Réponses en langage naturel via GPT-4

🖼️ Génération d’images avec DALL·E

🎤 (Optionnel) Préparation à la saisie vocale (Whisper)

✅ Réponses affichées proprement dans l’interface

🌐 Connectivité fluide entre frontend et backend

Je vous serais très reconnaissant si vous pouviez mettre en place cette intégration de manière gratuite et professionnelle, pour nous aider à continuer à bâtir ce projet dans de bonnes conditions techniques.

Voici les éléments déjà prêts :

🔐 Clé API OpenAI disponible

✅ Interface frontend fonctionnelle

⚙️ Backend Node.js fourni (via server.js, .env, etc.)

🖼️ Capture d'écran avec la structure souhaitée de l’interface

Je vous fais entièrement confiance pour cette étape cruciale, et je reste à disposition pour toute information complémentaire. Merci encore pour votre engagement et votre aide précieuse.

.env

@@ -0,0 +1,4 @@
+```plaintext
+OPENAI_API_KEY=votre_clé_api_openai
+PORT=3000
+```

script.js

@@ -1,6 +1,7 @@
 
 // Configuration Backend
-const BACKEND_URL = "https://huggingface.co/spaces/Abmacode12/espace-codage";
+const BACKEND_URL = "http://localhost:3000"; // Ou votre URL de production
+const OPENAI_API_KEY = "YOUR_OPENAI_KEY"; // À remplacer par votre clé ou via .env
 let isRecording = false;
 let mediaRecorder;
 let audioChunks = [];
@@ -30,27 +31,29 @@ async function sendMessage() {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
+                'Authorization': `Bearer ${OPENAI_API_KEY}`
             },
             body: JSON.stringify({
                 message: message,
-                type: 'text'
+                model: 'gpt-4',
+                temperature: 0.7
             })
         });
 
         const data = await response.json();
         activityMonitor.textContent = '[ Rosalinda en ligne ]';
         
-        if (data.type === 'text') {
-            addMessage('assistant', data.content);
-            if (data.code) {
-                codeOutput.innerHTML = `<pre><code>${data.code}</code></pre>`;
+        if (data.choices && data.choices[0].message) {
+            const responseText = data.choices[0].message.content;
+            addMessage('assistant', responseText);
+            
+            // Détection de code dans la réponse
+            const codeBlocks = responseText.match(/```[\s\S]*?```/g);
+            if (codeBlocks) {
+                codeOutput.innerHTML = `<pre><code>${codeBlocks.join('\n\n')}</code></pre>`;
             }
-        } else if (data.type === 'image') {
-            const resultOutput = document.querySelector('.result-output');
-            resultOutput.innerHTML = `<img src="${data.url}" alt="Image générée" style="max-width:100%;">`;
-            addMessage('assistant', `Voici l'image que vous avez demandée :`);
         }
-    } catch (error) {
+} catch (error) {
         console.error('Erreur backend:', error);
         activityMonitor.textContent = '[ Erreur de connexion ]';
         addMessage('assistant', "Désolé, une erreur s'est produite. Veuillez réessayer.");
@@ -126,39 +129,36 @@ async function sendAudioMessage(audioBlob) {
         addMessage('assistant', "Désolé, une erreur s'est produite lors du traitement audio.");
     }
 }
-
-// Bouton Nouvelle Tâche
+// Bouton Génération d'image
 document.querySelector('.menu button:nth-child(1)').addEventListener('click', async () => {
-    const prompt = prompt("Décrivez l'image ou la vidéo que vous souhaitez générer:");
+    const prompt = prompt("Décrivez l'image que vous souhaitez générer avec DALL·E:");
     if (prompt) {
         try {
-            activityMonitor.textContent = '[ Génération en cours... ]';
-            const response = await fetch(`${BACKEND_URL}/api/generate`, {
+            activityMonitor.textContent = '[ Génération image en cours... ]';
+            const response = await fetch(`${BACKEND_URL}/api/generate-image`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${OPENAI_API_KEY}`
                 },
                 body: JSON.stringify({
-                    prompt: prompt,
-                    type: 'image' // ou 'video' si supporté
+                    prompt: prompt
                 })
             });
             
             const data = await response.json();
-            activityMonitor.textContent = '[ Génération terminée ]';
+            activityMonitor.textContent = '[ Image générée ]';
             
-            if (data.type === 'image') {
+            if (data.url) {
                 const resultOutput = document.querySelector('.result-output');
                 resultOutput.innerHTML = `<img src="${data.url}" alt="Image générée" style="max-width:100%;">`;
-            } else if (data.type === 'video') {
-                const resultOutput = document.querySelector('.result-output');
-                resultOutput.innerHTML = `<video controls style="max-width:100%;"><source src="${data.url}" type="video/mp4"></video>`;
+                addMessage('assistant', `Voici l'image générée pour "${prompt}"`);
             }
         } catch (error) {
             console.error('Erreur génération:', error);
             activityMonitor.textContent = '[ Erreur de génération ]';
+            addMessage('assistant', "Désolé, une erreur s'est produite lors de la génération de l'image.");
         }
     }
 });
-
 console.log("Interface Espace Codage chargée avec intégration backend complète.");

server.js

@@ -0,0 +1,75 @@
+require('dotenv').config();
+const express = require('express');
+const { OpenAI } = require('openai');
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+
+const app = express();
+const port = process.env.PORT || 3000;
+
+// Configuration OpenAI
+const openai = new OpenAI({
+    apiKey: process.env.OPENAI_API_KEY
+});
+
+// Middleware
+app.use(express.json());
+app.use(express.static('public'));
+
+// Routes API
+app.post('/api/chat', async (req, res) => {
+    try {
+        const completion = await openai.chat.completions.create({
+            model: req.body.model || "gpt-4",
+            messages: [
+                { 
+                    role: "system", 
+                    content: "Tu es Rosalinda, une assistante IA spécialisée en développement logiciel. Sois concise, technique et utile." 
+                },
+                { role: "user", content: req.body.message }
+            ],
+            temperature: req.body.temperature || 0.7
+        });
+        res.json(completion);
+    } catch (error) {
+        console.error('OpenAI Error:', error);
+        res.status(500).json({ error: error.message });
+    }
+});
+
+app.post('/api/generate-image', async (req, res) => {
+    try {
+        const response = await openai.images.generate({
+            prompt: req.body.prompt,
+            n: 1,
+            size: "1024x1024"
+        });
+        res.json({ url: response.data[0].url });
+    } catch (error) {
+        console.error('DALL-E Error:', error);
+        res.status(500).json({ error: error.message });
+    }
+});
+
+// Configuration pour l'audio
+const upload = multer({ dest: 'uploads/' });
+
+app.post('/api/transcribe', upload.single('audio'), async (req, res) => {
+    try {
+        const transcription = await openai.audio.transcriptions.create({
+            file: fs.createReadStream(req.file.path),
+            model: "whisper-1"
+        });
+        fs.unlinkSync(req.file.path); // Nettoyage
+        res.json({ text: transcription.text });
+    } catch (error) {
+        console.error('Whisper Error:', error);
+        res.status(500).json({ error: error.message });
+    }
+});
+
+// Démarrer le serveur
+app.listen(port, () => {
+    console.log(`Serveur backend démarré sur http://localhost:${port}`);
+});