Spaces:

Abmacode12
/

espace-codage-theme

Running

App Files Files Community

Abmacode12 commited on Dec 17, 2025

Commit

cd11d79

verified ·

1 Parent(s): 0f0d6fa

OPENAI_API_KEY=sk-votre_cle_api_ici

Browse files

Files changed (3) hide show

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

index.html CHANGED Viewed

@@ -31,11 +31,12 @@
   <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>
@@ -65,9 +66,10 @@
         </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>
@@ -100,9 +102,10 @@
         </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>

   <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>
         </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>
         </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>

script.js CHANGED Viewed

@@ -1,5 +1,9 @@
 console.log("Interface Espace Codage chargée.");
 // ===== Thème (light/dark) =====
 const themeToggle = document.getElementById('themeToggle');
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
@@ -112,6 +116,16 @@ function setAIActivity(text, active = true) {
   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');
@@ -138,56 +152,42 @@ function escapeHTML(str) {
     '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
   }[m]));
 }
-function sendMessage() {
   const text = chatInput.value.trim();
   if (!text) return;
   addMessage('user', text);
   chatInput.value = '';
   setAIActivity('Rosalinda réfléchit...', true);
-  setTimeout(() => {
     setAIActivity('IA en veille', false);
-    // Generate comprehensive response with code example
-    const response = `Voici ce que je peux faire avec "${text}":
-1. Code exemple:
-\`\`\`javascript
-function processInput(input) {
-  // Analyse syntaxique
-  const tokens = input.toLowerCase().split(' ');
-  // Génération de réponse contextuelle
-  return tokens.map(token =>
-    token.length > 3 ? token.charAt(0).toUpperCase() + token.slice(1)
-    : token
-  ).join(' ');
-}
-console.log(processInput("${text}")); // ${text.split(' ').map(w =>
-  w.length > 3 ? w.charAt(0).toUpperCase() + w.slice(1) : w
-).join(' ')}
-\`\`\`
-2. Suggestions:
-- Implémenter cette logique dans votre projet
-- Ajouter des tests unitaires
-- Optimiser les performances`;
-    addMessage('ai', response);
-    // Update code output
-    codeOutput.textContent = `// Résultat pour: ${text}\n${response.split('```javascript')[1].split('```')[0]}`;
-    // Update result preview
-    document.querySelector('.result-output').innerHTML = `
-      <h3>Résultat</h3>
-      <p>${text.split(' ').map(w =>
-        w.length > 3 ? w.charAt(0).toUpperCase() + w.slice(1) : w
-      ).join(' ')}</p>
-    `;
-  }, 1500);
 }
 sendBtn.addEventListener('click', sendMessage);
 chatInput.addEventListener('keydown', (e) => {

 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)');
   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');
     '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
   }[m]));
 }
+async function sendMessage() {
   const text = chatInput.value.trim();
   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);
 chatInput.addEventListener('keydown', (e) => {

styles.css CHANGED Viewed

@@ -11,20 +11,16 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
 /* 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;
@@ -92,7 +88,9 @@ border-right: 1px solid rgb(226 232 240); /* slate-200 */
 /* Colonne 2 : Chat */
 .chat {
-display: flex;
   flex-direction: column;
   padding: 16px;
   gap: 12px;
@@ -185,9 +183,10 @@ display: flex;
 /* 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;
@@ -276,29 +275,8 @@ border-left: 1px solid rgb(226 232 240);
 /* 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;
-}

 /* 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;
 /* Colonne 2 : Chat */
 .chat {
+  width: 45%;
+  min-width: 320px;
+  display: flex;
   flex-direction: column;
   padding: 16px;
   gap: 12px;
 /* 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;
 /* 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%; }
+}