Spaces:

Abmacode12
/

espace-codage-theme

Running

App Files Files Community

Abmacode12 commited on Dec 17, 2025

Commit

3c0491c

verified ·

1 Parent(s): e5df143

setInterval(() => {

Browse files

const codeActuel = document.getElementById("resultat").innerText;
if (!codeActuel.includes("Résultat pour")) {
alert("⚠️ Alerte : Modification non autorisée détectée. Restauration...");
location.reload();
}
}, 5000); // Toutes les 5 secondes

Files changed (4) hide show

index.html +31 -19
script.js +47 -147
style.css +3 -7
styles.css +19 -43

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">
-      <custom-sidebar></custom-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,16 +66,17 @@
         </ul>
       </div>
     </aside>
-    <!-- Colonne 2 : Chat -->
     <main class="chat">
       <div class="chat-header">
-        <h2 class="text-lg font-semibold">Espace Codage – Rosalinda</h2>
         <div class="activity-monitor">
-          <span id="aiActivityDot" class="dot">💬</span>
           <span id="aiActivityText">IA en veille</span>
         </div>
       </div>
-<div class="chat-messages" id="chatMessages">
         <div class="msg msg-ai">
           <div class="avatar">
             <i class="fa-solid fa-robot"></i>
@@ -84,14 +86,26 @@
           </div>
         </div>
       </div>
-      <div class="chat-input mt-4 flex">
-        <input type="text" id="chatInput" placeholder="Écrire à Rosalinda..." class="flex-1 border rounded-l px-3 py-2" />
-        <button id="sendBtn" class="bg-blue-600 text-white px-4 py-2 rounded-r">Envoyer</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>
@@ -113,16 +127,14 @@
         <pre><code>// Code généré s’affichera ici...
 </code></pre>
       </div>
       <div class="result-output">
-        <p>Résultat final ici (image, vidéo ou page)...</p>
       </div>
-    </section>
   </div>
-  <script src="components/sidebar.js"></script>
   <script src="script.js"></script>
-  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
-  <custom-footer></custom-footer>
 </body>
 </html>

   <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>
           <span id="aiActivityText">IA en veille</span>
         </div>
       </div>
+      <div class="chat-messages" id="chatMessages">
         <div class="msg msg-ai">
           <div class="avatar">
             <i class="fa-solid fa-robot"></i>
           </div>
         </div>
       </div>
+      <div class="chat-input">
+        <button id="attachBtn" title="Ajouter un fichier">
+          <i class="fas fa-plus"></i>
+        </button>
+        <button id="connectBtn" title="Connexion">
+          <i class="fas fa-plug"></i>
+        </button>
+        <input type="text" id="chatInput" placeholder="Écrire à Rosalinda..." />
+        <button id="micBtn" title="Micro">
+          <i class="fas fa-microphone"></i>
+        </button>
+        <button id="sendBtn" title="Envoyer">
+          <i class="fas fa-paper-plane"></i>
+        </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>
         <pre><code>// Code généré s’affichera ici...
 </code></pre>
       </div>
       <div class="result-output">
+        <p id="resultat">Résultat final : (image, vidéo ou page)...</p>
       </div>
+</section>
   </div>
   <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js CHANGED Viewed

@@ -1,108 +1,9 @@
 console.log("Interface Espace Codage chargée.");
-// Initialize components
-class CustomFooter extends HTMLElement {
-  connectedCallback() {
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: block;
-          width: 100%;
-          padding: 1rem;
-          text-align: center;
-          font-size: 0.8rem;
-          color: var(--text-color, rgb(100 116 139));
-          border-top: 1px solid var(--border-color, rgb(226 232 240));
-          background: var(--bg-color, rgb(248 250 252));
-        }
-        .dark :host {
-          --text-color: rgb(148 163 184);
-          --border-color: rgb(30 41 59);
-          --bg-color: rgb(15 23 42);
-        }
-      </style>
-      <div>
-        <p>Espace Codage &copy; ${new Date().getFullYear()}</p>
-      </div>
-    `;
-  }
-}
-customElements.define('custom-footer', CustomFooter);
-// Create sidebar component
-class CustomSidebar extends HTMLElement {
-  connectedCallback() {
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: block;
-          width: 100%;
-        }
-        .logo {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          font-weight: 700;
-          font-size: 18px;
-          color: rgb(15 23 42);
-          text-decoration: none;
-        }
-        .menu {
-          display: flex;
-          flex-direction: column;
-          gap: 8px;
-          margin-top: 16px;
-        }
-        .btn {
-          width: 100%;
-          display: inline-flex;
-          align-items: center;
-          justify-content: flex-start;
-          gap: 8px;
-          padding: 10px 12px;
-          background: rgb(241 245 249);
-          color: rgb(15 23 42);
-          border: 1px solid rgb(226 232 240);
-          border-radius: 8px;
-          cursor: pointer;
-        }
-        .btn:hover {
-          background: rgb(226 232 240);
-        }
-      </style>
-      <div class="sidebar-content">
-        <div class="flex items-center justify-between mb-6">
-          <a href="#" class="logo">
-            <i class="fa-solid fa-code"></i>
-            <span>Espace Codage</span>
-          </a>
-        </div>
-        <nav class="menu">
-          <button id="newTaskBtn" class="btn">
-            <i class="fa-solid fa-plus"></i>
-            Nouvelle tâche
-          </button>
-          <button id="searchBtn" class="btn">
-            <i class="fa-solid fa-magnifying-glass"></i>
-            Rechercher
-          </button>
-          <button id="libraryBtn" class="btn">
-            <i class="fa-solid fa-book"></i>
-            Bibliothèque
-          </button>
-        </nav>
-        <div class="projects">
-          <h3>Projets</h3>
-          <ul id="projectList" class="project-list"></ul>
-        </div>
-      </div>
-    `;
-  }
-}
-customElements.define('custom-sidebar', CustomSidebar);
 // ===== Thème (light/dark) =====
 const themeToggle = document.getElementById('themeToggle');
 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
@@ -215,16 +116,34 @@ 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 = role === 'user' ? 'bg-gray-100 p-3 rounded shadow mb-2' : 'bg-white p-3 rounded shadow mb-2';
   if (role === 'user') {
-    msg.innerHTML = `<p><strong>Vous :</strong> ${escapeHTML(content)}</p>`;
   } else {
-    msg.innerHTML = `<p><strong>Rosalinda :</strong><br>${content}</p>`;
   }
   chatMessages.appendChild(msg);
   chatMessages.scrollTop = chatMessages.scrollHeight;
 }
@@ -238,60 +157,36 @@ 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 ${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);
@@ -302,11 +197,7 @@ micBtn.addEventListener('click', () => {
   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.).');
@@ -327,4 +218,13 @@ tabButtons.forEach(btn => {
     };
     codeOutput.textContent = demo[tab] || '// ...';
   });
-});

 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');
   if (role === 'user') {
+    msg.innerHTML = `
+      <div class="bubble">${escapeHTML(content)}</div>
+      <div class="avatar">
+        <i class="fa-solid fa-user"></i>
+      </div>
+    `;
   } else {
+    msg.innerHTML = `
+      <div class="avatar">
+        <i class="fa-solid fa-robot"></i>
+      </div>
+      <div class="bubble">${content}</div>
+    `;
   }
   chatMessages.appendChild(msg);
   chatMessages.scrollTop = chatMessages.scrollHeight;
 }
   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);
   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.).');
     };
     codeOutput.textContent = demo[tab] || '// ...';
   });
+});
+// Surveillance anti-modification non autorisée du résultat
+setInterval(() => {
+  const codeActuel = document.getElementById('resultat').innerText;
+  if (!codeActuel.includes('Résultat final')) {
+    alert('⚠️ Alerte : Modification non autorisée détectée. Restauration...');
+    location.reload();
+  }
+}, 5000);

style.css CHANGED Viewed

@@ -1,12 +1,8 @@
 body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;

 body {
+	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
 	font-size: 16px;
 	margin-top: 0;

styles.css CHANGED Viewed

@@ -8,24 +8,23 @@
 * { box-sizing: border-box; }
 html, body { height: 100%; }
 body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
 /* Container principal en 3 colonnes */
 .container {
-  display: grid;
-  grid-template-columns: 16.6667% 33.3333% 50%;
   height: 100vh;
-  gap: 0;
-  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 */
   display: flex;
   flex-direction: column;
 }
 .dark .sidebar {
   background: rgb(15 23 42); /* slate-900 */
@@ -86,13 +85,15 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
   padding: 4px 6px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252); border-radius: 6px; cursor: pointer;
 }
 .dark .project-list button { background: rgb(15 23 42); border-color: rgb(51 65 85); }
 /* Colonne 2 : Chat */
 .chat {
   display: flex;
   flex-direction: column;
   padding: 16px;
   gap: 12px;
-  background: rgb(249 250 251);
 }
 .chat-header h2 { font-size: 18px; margin: 0; }
 .activity-monitor {
@@ -179,17 +180,17 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
 }
 .chat-input button:hover { background: rgb(241 245 249); }
 .dark .chat-input button:hover { background: rgb(30 41 59); }
 /* Colonne 3 : Output */
 .output {
-  width: 100%;
-  background: black;
   border-left: 1px solid rgb(226 232 240);
   display: flex;
   flex-direction: column;
   padding: 16px;
   gap: 12px;
-  color: rgb(74 222 128);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 .dark .output {
   background: rgb(12 16 24);
@@ -274,33 +275,8 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
 /* 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;
-}
-/* Footer styles */
-custom-footer {
-  margin-top: auto;
-}

 * { box-sizing: border-box; }
 html, body { height: 100%; }
 body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
 /* 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;
+  gap: 16px;
 }
 .dark .sidebar {
   background: rgb(15 23 42); /* slate-900 */
   padding: 4px 6px; border: 1px solid rgb(226 232 240); background: rgb(248 250 252); border-radius: 6px; cursor: pointer;
 }
 .dark .project-list button { background: rgb(15 23 42); border-color: rgb(51 65 85); }
 /* Colonne 2 : Chat */
 .chat {
+  width: 45%;
+  min-width: 320px;
   display: flex;
   flex-direction: column;
   padding: 16px;
   gap: 12px;
 }
 .chat-header h2 { font-size: 18px; margin: 0; }
 .activity-monitor {
 }
 .chat-input button:hover { background: rgb(241 245 249); }
 .dark .chat-input button:hover { background: rgb(30 41 59); }
 /* 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;
   gap: 12px;
 }
 .dark .output {
   background: rgb(12 16 24);
 /* 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%; }
+}