Le backend pour rendre Rosalinda opérationnelle est prêt. Il inclut la gestion des requêtes via GPT-4 et la génération d’images avec DALL·E, avec une base prévue pour la voix et la vidéo.

components/voice-control.js

@@ -0,0 +1,66 @@
+class VoiceControl extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin-top: 1rem;
+        }
+        .voice-controls {
+          display: flex;
+          gap: 0.5rem;
+          align-items: center;
+        }
+        button {
+          background: #6366f1;
+          color: white;
+          border: none;
+          border-radius: 50%;
+          width: 2.5rem;
+          height: 2.5rem;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        button:hover {
+          background: #4f46e5;
+        }
+        .status {
+          font-size: 0.8rem;
+          color: #64748b;
+        }
+      </style>
+      <div class="voice-controls">
+        <button id="micButton" title="Micro">
+          <i class="fas fa-microphone"></i>
+        </button>
+        <div class="status" id="status">Prêt</div>
+      </div>
+    `;
+
+    this.micButton = this.shadowRoot.getElementById('micButton');
+    this.status = this.shadowRoot.getElementById('status');
+
+    this.micButton.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('voice-toggle'));
+    });
+  }
+
+  setStatus(text) {
+    this.status.textContent = text;
+  }
+
+  setRecording(isRecording) {
+    if (isRecording) {
+      this.micButton.innerHTML = '<i class="fas fa-stop"></i>';
+      this.micButton.style.background = '#ef4444';
+    } else {
+      this.micButton.innerHTML = '<i class="fas fa-microphone"></i>';
+      this.micButton.style.background = '#6366f1';
+    }
+  }
+}
+
+customElements.define('voice-control', VoiceControl);

index.html

@@ -42,8 +42,8 @@
                 <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..." />
-                <button title="Micro"><i class="fas fa-microphone"></i></button>
-                <button title="Envoyer"><i class="fas fa-paper-plane"></i></button>
+                <voice-control></voice-control>
+<button title="Envoyer"><i class="fas fa-paper-plane"></i></button>
             </div>
         </main>
 
@@ -64,6 +64,7 @@
             </div>
         </section>
     </div>
+    <script src="components/voice-control.js"></script>
     <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -1,60 +1,61 @@
 
-// Configuration OpenAI
-const OPENAI_API_KEY = "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";
-const OPENAI_API_URL = "https://api.openai.com/v1";
+// Configuration Backend
+const BACKEND_URL = "https://huggingface.co/spaces/Abmacode12/espace-codage";
+let isRecording = false;
+let mediaRecorder;
+let audioChunks = [];
 
 // É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 micButton = document.querySelector('.chat-input button[title="Micro"]');
 const codeOutput = document.getElementById('codeOutput');
-
+const activityMonitor = document.querySelector('.activity-monitor');
 // 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 = '';
+    activityMonitor.textContent = '[ Rosalinda réfléchit... ]';
 
     try {
-        // Appel à l'API OpenAI
-        const response = await fetch(`${OPENAI_API_URL}/chat/completions`, {
+        const response = await fetch(`${BACKEND_URL}/api/chat`, {
             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
+                message: message,
+                type: 'text'
             })
         });
 
         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>`;
+        activityMonitor.textContent = '[ Rosalinda en ligne ]';
+        
+        if (data.type === 'text') {
+            addMessage('assistant', data.content);
+            if (data.code) {
+                codeOutput.innerHTML = `<pre><code>${data.code}</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) {
-        console.error('Erreur OpenAI:', error);
+        console.error('Erreur backend:', error);
+        activityMonitor.textContent = '[ Erreur de connexion ]';
         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}`;
@@ -64,42 +65,100 @@ function addMessage(sender, content) {
     chatMessages.appendChild(messageDiv);
     chatMessages.scrollTop = chatMessages.scrollHeight;
 }
+// Gestion de la voix
+micButton.addEventListener('click', toggleRecording);
+
+async function toggleRecording() {
+    if (!isRecording) {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            mediaRecorder = new MediaRecorder(stream);
+            audioChunks = [];
+            
+            mediaRecorder.ondataavailable = (e) => {
+                audioChunks.push(e.data);
+            };
+            
+            mediaRecorder.onstop = async () => {
+                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                await sendAudioMessage(audioBlob);
+            };
+            
+            mediaRecorder.start();
+            isRecording = true;
+            micButton.innerHTML = '<i class="fas fa-stop"></i>';
+            activityMonitor.textContent = '[ Enregistrement en cours... ]';
+        } catch (err) {
+            console.error('Erreur microphone:', err);
+            addMessage('assistant', "Impossible d'accéder au microphone. Vérifiez les permissions.");
+        }
+    } else {
+        mediaRecorder.stop();
+        isRecording = false;
+        micButton.innerHTML = '<i class="fas fa-microphone"></i>';
+        activityMonitor.textContent = '[ Traitement audio... ]';
+    }
+}
 
-// Fonction pour générer des images
-async function generateImage(prompt) {
+async function sendAudioMessage(audioBlob) {
     try {
-        const response = await fetch(`${OPENAI_API_URL}/images/generations`, {
+        const formData = new FormData();
+        formData.append('audio', audioBlob, 'recording.wav');
+        
+        const response = await fetch(`${BACKEND_URL}/api/voice`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${OPENAI_API_KEY}`
-            },
-            body: JSON.stringify({
-                prompt: prompt,
-                n: 1,
-                size: "1024x1024"
-            })
+            body: formData
         });
-
+        
         const data = await response.json();
-        return data.data[0].url;
+        activityMonitor.textContent = '[ Rosalinda en ligne ]';
+        
+        if (data.type === 'text') {
+            addMessage('assistant', data.content);
+        } else if (data.type === 'audio') {
+            const audio = new Audio(data.url);
+            audio.play();
+            addMessage('assistant', "Voici ma réponse audio :");
+        }
     } catch (error) {
-        console.error('Erreur génération image:', error);
-        return null;
+        console.error('Erreur audio:', error);
+        activityMonitor.textContent = '[ Erreur de connexion ]';
+        addMessage('assistant', "Désolé, une erreur s'est produite lors du traitement audio.");
     }
 }
 
-// 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:");
+// Bouton Nouvelle Tâche
+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:");
     if (prompt) {
-        generateImage(prompt).then(url => {
-            if (url) {
+        try {
+            activityMonitor.textContent = '[ Génération en cours... ]';
+            const response = await fetch(`${BACKEND_URL}/api/generate`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    prompt: prompt,
+                    type: 'image' // ou 'video' si supporté
+                })
+            });
+            
+            const data = await response.json();
+            activityMonitor.textContent = '[ Génération terminée ]';
+            
+            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%;">`;
+            } else if (data.type === 'video') {
                 const resultOutput = document.querySelector('.result-output');
-                resultOutput.innerHTML = `<img src="${url}" alt="Image générée" style="max-width:100%;">`;
+                resultOutput.innerHTML = `<video controls style="max-width:100%;"><source src="${data.url}" type="video/mp4"></video>`;
             }
-        });
+        } catch (error) {
+            console.error('Erreur génération:', error);
+            activityMonitor.textContent = '[ Erreur de génération ]';
+        }
     }
 });
 
-console.log("Interface Espace Codage chargée avec intégration OpenAI.");
+console.log("Interface Espace Codage chargée avec intégration backend complète.");

style.css

@@ -107,12 +107,16 @@ body, html {
   flex: 1;
   padding: 10px;
 }
-.chat-input button {
+.chat-input button:not(voice-control button) {
   background: #ddd;
   border: none;
   padding: 10px;
   cursor: pointer;
 }
+
+voice-control {
+  margin-left: auto;
+}
 /* Colonne 3 */
 .output {
   width: 35%;