Spaces:

Abmacode12
/

espace-codage-theme

Running

App Files Files Community

Abmacode12 commited on Dec 17, 2025

Commit

23feeb3

verified ·

1 Parent(s): cd11d79

OPENAI_API_KEY=sk-votre_cle_api_ici

Browse files

Files changed (3) hide show

index.html +6 -9
script.js +40 -26
styles.css +38 -16

index.html CHANGED Viewed

@@ -31,12 +31,11 @@
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body class="h-full bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors">
   <div class="container">
-    <!-- Colonne 1 : Navigation -->
     <aside class="sidebar">
-      <div class="flex items-center justify-between mb-6">
         <a href="#" class="logo">
           <i class="fa-solid fa-code"></i>
           <span>Espace Codage</span>
@@ -66,10 +65,9 @@
         </ul>
       </div>
     </aside>
-    <!-- Colonne 2 : Chat IA Rosalinda -->
     <main class="chat">
-      <div class="chat-header">
         <h2>Espace Codage – Rosalinda</h2>
         <div class="activity-monitor">
           <span id="aiActivityDot" class="dot"></span>
@@ -102,10 +100,9 @@
         </button>
       </div>
     </main>
-    <!-- Colonne 3 : Résultat & Code -->
     <section class="output">
-      <div class="output-tabs">
         <button class="tab-btn active" data-tab="code">
           <i class="fas fa-code"></i> Code
         </button>

   <link rel="stylesheet" href="styles.css" />
 </head>
 <body class="h-full bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100 transition-colors">
   <div class="container">
+    <!-- Colonne 1 : Menu -->
     <aside class="sidebar">
+<div class="flex items-center justify-between mb-6">
         <a href="#" class="logo">
           <i class="fa-solid fa-code"></i>
           <span>Espace Codage</span>
         </ul>
       </div>
     </aside>
+    <!-- Colonne 2 : Chat -->
     <main class="chat">
+<div class="chat-header">
         <h2>Espace Codage – Rosalinda</h2>
         <div class="activity-monitor">
           <span id="aiActivityDot" class="dot"></span>
         </button>
       </div>
     </main>
+    <!-- Colonne 3 : Code & Résultats -->
     <section class="output">
+<div class="output-tabs">
         <button class="tab-btn active" data-tab="code">
           <i class="fas fa-code"></i> Code
         </button>

script.js CHANGED Viewed

@@ -1,9 +1,5 @@
 console.log("Interface Espace Codage chargée.");
-// ===== Configuration API OpenAI =====
-const OPENAI_API_KEY = "sk-votre_cle_api_ici"; // Remplacez par votre clé API
 // ===== Thème (light/dark) =====
 const themeToggle = document.getElementById('themeToggle');
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
@@ -116,16 +112,6 @@ function setAIActivity(text, active = true) {
   aiActivityText.textContent = text;
   aiActivityDot.style.background = active ? 'rgb(34,197,94)' : 'rgb(100,116,139)'; // emerald vs slate
 }
-function getChatHistory() {
-  const messages = [];
-  const nodes = chatMessages.querySelectorAll('.msg');
-  nodes.forEach(node => {
-    const role = node.classList.contains('msg-user') ? 'user' : 'assistant';
-    const text = node.querySelector('.bubble').textContent.trim();
-    messages.push({ role, content: text });
-  });
-  return messages;
-}
 function addMessage(role, content) {
   const msg = document.createElement('div');
   msg.className = 'msg ' + (role === 'user' ? 'msg-user' : 'msg-ai');
@@ -157,36 +143,60 @@ async function sendMessage() {
   if (!text) return;
   addMessage('user', text);
   chatInput.value = '';
   setAIActivity('Rosalinda réfléchit...', true);
   try {
     const response = await fetch('https://api.openai.com/v1/chat/completions', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        'Authorization': `Bearer ${OPENAI_API_KEY}`
       },
       body: JSON.stringify({
         model: 'gpt-3.5-turbo',
         messages: [
-          { role: 'system', content: 'Tu es Rosalinda, une assistante IA utiles et concise.' },
-          ...getChatHistory(),
-          { role: 'user', content: text }
         ],
         temperature: 0.7
       })
     });
     if (!response.ok) {
-      throw new Error(`Erreur API: ${response.status} ${response.statusText}`);
     }
     const data = await response.json();
-    const assistantMessage = data.choices?.[0]?.message?.content ?? 'Désolé, aucune réponse.';
-    setAIActivity('IA en veille', false);
-    addMessage('ai', assistantMessage);
-    codeOutput.textContent = assistantMessage;
   } catch (error) {
-    console.error(error);
     setAIActivity('IA en veille', false);
-    addMessage('ai', 'Une erreur est survenue lors de la communication avec l\'IA.');
   }
 }
 sendBtn.addEventListener('click', sendMessage);
@@ -197,7 +207,11 @@ micBtn.addEventListener('click', () => {
   alert('Fonction "Micro" à implémenter (Web Speech API, Whisper, etc.).');
 });
 connectBtn.addEventListener('click', () => {
-  alert('Fonction "Connexion" à implémenter (OAuth, clés API, etc.).');
 });
 attachBtn.addEventListener('click', () => {
   alert('Fonction "Ajouter un fichier" à implémenter (FileReader, uploads, etc.).');

 console.log("Interface Espace Codage chargée.");
 // ===== Thème (light/dark) =====
 const themeToggle = document.getElementById('themeToggle');
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
   aiActivityText.textContent = text;
   aiActivityDot.style.background = active ? 'rgb(34,197,94)' : 'rgb(100,116,139)'; // emerald vs slate
 }
 function addMessage(role, content) {
   const msg = document.createElement('div');
   msg.className = 'msg ' + (role === 'user' ? 'msg-user' : 'msg-ai');
   if (!text) return;
   addMessage('user', text);
   chatInput.value = '';
   setAIActivity('Rosalinda réfléchit...', true);
   try {
     const response = await fetch('https://api.openai.com/v1/chat/completions', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+        'Authorization': `Bearer ${localStorage.getItem('OPENAI_API_KEY') || 'sk-votre_cle_api_ici'}`
       },
       body: JSON.stringify({
         model: 'gpt-3.5-turbo',
         messages: [
+          {
+            role: 'system',
+            content: 'Tu es Rosalinda, une assistante IA spécialisée en programmation. Réponds en français de manière concise et technique. Si tu génères du code, utilise des blocs de code avec la syntaxe appropriée.'
+          },
+          {
+            role: 'user',
+            content: text
+          }
         ],
         temperature: 0.7
       })
     });
     if (!response.ok) {
+      throw new Error(`Erreur API: ${response.status}`);
     }
     const data = await response.json();
+    const aiResponse = data.choices[0].message.content;
+    addMessage('ai', aiResponse);
+    // Extract and display code if any
+    const codeMatch = aiResponse.match(/```(\w+)?\n([\s\S]*?)\n```/);
+    if (codeMatch) {
+      codeOutput.textContent = `// ${text}\n${codeMatch[2]}`;
+      document.querySelector('.result-output').innerHTML = `
+        <h3>Résultat</h3>
+        <p>Voir le code généré ci-dessus.</p>
+      `;
+    } else {
+      codeOutput.textContent = `// ${text}\n/* Pas de code généré dans cette réponse */`;
+      document.querySelector('.result-output').innerHTML = `
+        <h3>Résultat</h3>
+        <p>${aiResponse}</p>
+      `;
+    }
   } catch (error) {
+    addMessage('ai', `Désolé, une erreur s'est produite: ${error.message}. Vérifiez votre clé API dans les paramètres.`);
+    codeOutput.textContent = `// Erreur\nconsole.error("${error.message}");`;
+  } finally {
     setAIActivity('IA en veille', false);
   }
 }
 sendBtn.addEventListener('click', sendMessage);
   alert('Fonction "Micro" à implémenter (Web Speech API, Whisper, etc.).');
 });
 connectBtn.addEventListener('click', () => {
+  const apiKey = prompt('Entrez votre clé API OpenAI:', localStorage.getItem('OPENAI_API_KEY') || '');
+  if (apiKey !== null) {
+    localStorage.setItem('OPENAI_API_KEY', apiKey);
+    alert('Clé API enregistrée avec succès!');
+  }
 });
 attachBtn.addEventListener('click', () => {
   alert('Fonction "Ajouter un fichier" à implémenter (FileReader, uploads, etc.).');

styles.css CHANGED Viewed

@@ -11,16 +11,20 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
 /* Container principal en 3 colonnes */
 .container {
-  display: flex;
   height: 100vh;
 }
 /* Colonne 1 : Sidebar */
 .sidebar {
-  width: 20%;
-  min-width: 240px;
   background: rgb(248 250 252); /* slate-50 */
-  border-right: 1px solid rgb(226 232 240); /* slate-200 */
   padding: 16px;
   display: flex;
   flex-direction: column;
@@ -88,9 +92,7 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
 /* Colonne 2 : Chat */
 .chat {
-  width: 45%;
-  min-width: 320px;
-  display: flex;
   flex-direction: column;
   padding: 16px;
   gap: 12px;
@@ -183,10 +185,9 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
 /* Colonne 3 : Output */
 .output {
-  width: 35%;
-  min-width: 300px;
   background: rgb(252 252 252);
-  border-left: 1px solid rgb(226 232 240);
   display: flex;
   flex-direction: column;
   padding: 16px;
@@ -275,8 +276,29 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
 /* Responsive */
 @media (max-width: 1100px) {
-  .container { flex-direction: column; }
-  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid rgb(226 232 240); }
-  .chat { width: 100%; }
-  .output { width: 100%; }
-}

 /* Container principal en 3 colonnes */
 .container {
+  display: grid;
+  grid-template-columns: 20% 30% 50%;
   height: 100vh;
+  gap: 1px;
+  background: rgb(226 232 240);
+}
+.dark .container {
+  background: rgb(30 41 59);
 }
 /* Colonne 1 : Sidebar */
 .sidebar {
+  width: 100%;
   background: rgb(248 250 252); /* slate-50 */
+border-right: 1px solid rgb(226 232 240); /* slate-200 */
   padding: 16px;
   display: flex;
   flex-direction: column;
 /* Colonne 2 : Chat */
 .chat {
+display: flex;
   flex-direction: column;
   padding: 16px;
   gap: 12px;
 /* Colonne 3 : Output */
 .output {
+  width: 100%;
   background: rgb(252 252 252);
+border-left: 1px solid rgb(226 232 240);
   display: flex;
   flex-direction: column;
   padding: 16px;
 /* Responsive */
 @media (max-width: 1100px) {
+  .container {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr auto;
+  }
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid rgb(226 232 240);
+  }
+  .output {
+    width: 100%;
+    border-left: none;
+    border-top: 1px solid rgb(226 232 240);
+  }
+}
+/* Ensure minimum widths for columns */
+.sidebar {
+  min-width: 200px;
+}
+.chat {
+  min-width: 300px;
+}
+.output {
+  min-width: 400px;
+}