Écran de gestion de projets (Première colonne) :

Créez un menu latéral avec des projets ("Espace Codage - Projet 1", "Espace Codage - Projet 2") qui sont des éléments cliquables. En fonction du projet choisi, les autres fonctionnalités comme "La Baleine", "Rosalinda" etc. devraient être également accessibles dans cette colonne.

Le menu des raccourcis doit inclure des liens vers ces outils et projets, tout en maintenant une interface claire.

Explication du code (Deuxième colonne) :

Ajoutez une section d'explication du code. Lorsque l'IA génère du code, vous pouvez afficher ce code dans cette colonne avec des commentaires ou des descriptions expliquant ce que chaque partie du code fait.

Exemple : "La Baleine a généré ce code CSS pour le thème, voici les explications :"

/* Code CSS généré */
body {
background-color: #ff6347; /* Couleur de fond tomatée */
}


Cette explication peut être faite sous forme de texte statique ou dynamique en fonction de ce que l'IA génère.

Génération et transformation en image (Troisième colonne) :

Vous pouvez utiliser un générateur d'image ou un outil comme Canvas pour transformer le code en une image. Par exemple, un code CSS qui définit des couleurs ou des éléments graphiques peut être transformé en une image de ce que cela ressemble (un thème visuel).

Vous pouvez intégrer un outil comme D3.js ou Fabric.js pour dessiner ou générer des visualisations à partir des données ou du code CSS/HTML.

Structure de l'interface :

Vous devrez probablement utiliser un framework front-end comme React ou Vue.js pour gérer la structure des colonnes.

Chaque colonne sera un composant qui interagira avec l'utilisateur, en affichant les projets, les explications de l'IA et la transformation du code en image.

Code pour la logique d'affichage :

React Example (structure basique) :

import React, { useState } from 'react';

function ProjectSpace() {
const [project, setProject] = useState('Projet 1');
const [codeExplanation, setCodeExplanation] = useState('');
const [generatedImage, setGeneratedImage] = useState(null);

const handleCodeGeneration = (code) => {
setCodeExplanation(generateExplanation(code));
setGeneratedImage(generateImageFromCode(code));
};

return (
<div className="project-space">
<div className="sidebar">
<h3>Projets</h3>
<ul>
<li onClick={() => setProject('Projet 1')}>Espace Codage - Projet 1</li>
<li onClick={() => setProject('Projet 2')}>Espace Codage - Projet 2</li>
</ul>
</div>
<div className="code-column">
<h3>Explication du code</h3>
<p>{codeExplanation}</p>
</div>
<div className="image-column">
<h3>Image générée</h3>
{generatedImage && <img src={generatedImage} alt="Generated theme" />}
</div>
</div>
);
}

function generateExplanation(code) {
// Example explanation for CSS
return "Ce code CSS définit la couleur de fond du site à une nuance de tomate.";
}

function generateImageFromCode(code) {
// Logic to generate image from code, or render a preview of the theme
return 'path_to_generated_image.png';
}

export default ProjectSpace;


CSS pour organiser les colonnes :

.project-space {
display: flex;
justify-content: space-between;
}

.sidebar {
width: 20%;
padding: 10px;
}

.code-column, .image-column {
width: 40%;
padding: 10px;
}

components/code-explainer.js

@@ -0,0 +1,69 @@
+class CodeExplainer extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.code = '';
+    this.explanation = '';
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  setCode(code, explanation) {
+    this.code = code;
+    this.explanation = explanation;
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: var(--bg-color, #1e293b);
+          color: var(--text-color, #f8fafc);
+          padding: 1rem;
+          box-sizing: border-box;
+          overflow-y: auto;
+        }
+        h3 {
+          margin: 0 0 1rem 0;
+          font-size: 1.125rem;
+          font-weight: 600;
+        }
+        .code-block {
+          background: #0f172a;
+          border-radius: 0.5rem;
+          padding: 1rem;
+          font-family: 'Courier New', monospace;
+          font-size: 0.875rem;
+          margin-bottom: 1rem;
+          border: 1px solid #334155;
+          white-space: pre-wrap;
+        }
+        .comment {
+          color: #64748b;
+        }
+        .explanation {
+          background: rgba(255, 255, 255, 0.05);
+          border-radius: 0.5rem;
+          padding: 1rem;
+          font-size: 0.875rem;
+          line-height: 1.5;
+        }
+      </style>
+      <h3>Explication du code</h3>
+      ${this.code ? `
+        <div class="explanation">${this.explanation || "La Baleine a généré ce code, voici les explications :"}</div>
+        <pre class="code-block">${this.code}</pre>
+      ` : `
+        <div class="explanation">Sélectionnez un projet ou générez du code pour voir les explications ici.</div>
+      `}
+    `;
+  }
+}
+
+customElements.define('code-explainer', CodeExplainer);

components/code-visualizer.js

@@ -0,0 +1,97 @@
+class CodeVisualizer extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.code = '';
+    this.canvas = null;
+    this.ctx = null;
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  setCode(code) {
+    this.code = code;
+    this.render();
+    this.visualizeCode();
+  }
+
+  visualizeCode() {
+    if (!this.code) return;
+
+    try {
+      // Create a temporary style element to apply the CSS
+      const style = document.createElement('style');
+      style.textContent = this.code;
+      document.head.appendChild(style);
+
+      // Create a preview element to visualize the styles
+      const preview = document.createElement('div');
+      preview.style.width = '100%';
+      preview.style.height = '100%';
+      preview.style.position = 'relative';
+      preview.innerHTML = `
+        <div class="preview-element" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+          <p>Prévisualisation du thème</p>
+        </div>
+      `;
+
+      this.shadowRoot.getElementById('preview-container').innerHTML = '';
+      this.shadowRoot.getElementById('preview-container').appendChild(preview);
+
+      // Remove the temporary style after visualization
+      setTimeout(() => document.head.removeChild(style), 100);
+    } catch (e) {
+      console.error('Error visualizing code:', e);
+    }
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: var(--bg-color, #1e293b);
+          color: var(--text-color, #f8fafc);
+          padding: 1rem;
+          box-sizing: border-box;
+        }
+        h3 {
+          margin: 0 0 1rem 0;
+          font-size: 1.125rem;
+          font-weight: 600;
+        }
+        #preview-container {
+          width: 100%;
+          height: calc(100% - 2rem);
+          background: white;
+          border-radius: 0.5rem;
+          overflow: hidden;
+          position: relative;
+        }
+        .empty-state {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #64748b;
+          font-size: 0.875rem;
+        }
+      </style>
+      <h3>Visualisation</h3>
+      <div id="preview-container">
+        ${this.code ? '' : `
+          <div class="empty-state">
+            Générer du code pour voir la visualisation ici
+          </div>
+        `}
+      </div>
+    `;
+  }
+}
+
+customElements.define('code-visualizer', CodeVisualizer);

components/project-manager.js

@@ -0,0 +1,142 @@
+class ProjectManager extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.projects = [
+      { id: 'projet1', name: 'Espace Codage - Projet 1', active: true },
+      { id: 'projet2', name: 'Espace Codage - Projet 2', active: false }
+    ];
+    this.tools = [
+      { name: 'La Baleine IA', icon: 'image', href: 'baleine.html' },
+      { name: 'Rosalinda IA', icon: 'message-circle', href: 'rosalinda.html' },
+      { name: 'Bibliothèque', icon: 'book', href: '#' },
+      { name: 'Paramètres', icon: 'settings', href: '#' }
+    ];
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          height: 100%;
+          background: var(--bg-color, #1e293b);
+          color: var(--text-color, #f8fafc);
+        }
+        .sidebar {
+          padding: 1rem;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+        .projects {
+          flex-grow: 1;
+          overflow-y: auto;
+        }
+        .project {
+          padding: 0.75rem 1rem;
+          margin-bottom: 0.5rem;
+          border-radius: 0.5rem;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          border: 1px solid transparent;
+          transition: all 0.2s ease;
+        }
+        .project:hover {
+          background: rgba(255, 255, 255, 0.05);
+        }
+        .project.active {
+          background: rgba(59, 130, 246, 0.1);
+          border-color: rgba(59, 130, 246, 0.2);
+          color: rgba(191, 219, 254, 1);
+        }
+        .project-icon {
+          width: 1.5rem;
+          height: 1.5rem;
+          border-radius: 0.375rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgba(255, 255, 255, 0.1);
+        }
+        .tools {
+          margin-top: 1rem;
+          padding-top: 1rem;
+          border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .tool {
+          padding: 0.75rem 1rem;
+          margin-bottom: 0.5rem;
+          border-radius: 0.5rem;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          transition: all 0.2s ease;
+        }
+        .tool:hover {
+          background: rgba(255, 255, 255, 0.05);
+        }
+        h3 {
+          margin: 0 0 1rem 0;
+          font-size: 0.875rem;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: rgba(156, 163, 175, 1);
+        }
+      </style>
+      <div class="sidebar">
+        <div class="projects">
+          <h3>Projets</h3>
+          ${this.projects.map(project => `
+            <div class="project ${project.active ? 'active' : ''}" data-id="${project.id}">
+              <div class="project-icon">
+                <i data-feather="folder"></i>
+              </div>
+              <span>${project.name}</span>
+            </div>
+          `).join('')}
+        </div>
+        <div class="tools">
+          <h3>Outils</h3>
+          ${this.tools.map(tool => `
+            <a href="${tool.href}" class="tool">
+              <div class="project-icon">
+                <i data-feather="${tool.icon}"></i>
+              </div>
+              <span>${tool.name}</span>
+            </a>
+          `).join('')}
+        </div>
+      </div>
+    `;
+    feather.replace();
+  }
+
+  setupEventListeners() {
+    this.shadowRoot.querySelectorAll('.project').forEach(project => {
+      project.addEventListener('click', () => {
+        this.projects.forEach(p => p.active = false);
+        const selectedProject = this.projects.find(p => p.id === project.dataset.id);
+        if (selectedProject) selectedProject.active = true;
+        this.render();
+        
+        // Dispatch event to update other components
+        this.dispatchEvent(new CustomEvent('project-changed', {
+          detail: { project: selectedProject }
+        }));
+      });
+    });
+  }
+}
+
+customElements.define('project-manager', ProjectManager);

index.html

@@ -11,270 +11,55 @@
 </head>
 <body class="bg-gray-900 text-gray-100 font-sans antialiased">
     <div class="app-container h-screen flex">
-        <!-- Sidebar -->
-        <aside class="w-80 bg-gray-800 border-r border-gray-700 flex flex-col">
-            <div class="p-4 border-b border-gray-700 flex items-center gap-3">
-                <div class="w-3 h-3 rounded-full bg-blue-500 shadow-lg shadow-blue-500/30"></div>
-                <h1 class="font-bold">Espace Codage</h1>
-            </div>
+        <!-- Project Manager Sidebar -->
+        <project-manager class="w-80"></project-manager>
+        <!-- Main Content Area -->
+        <div class="flex-1 flex flex-col bg-gray-850/50">
+            <!-- Code Explanation Column -->
+            <code-explainer class="flex-1 border-r border-gray-700"></code-explainer>
+        </div>
 
-            <div class="p-3 border-b border-gray-700 flex items-center gap-2 bg-gray-850">
-                <button class="p-2 rounded-lg bg-gray-750 hover:bg-gray-700">
-                    <i data-feather="edit-2" class="w-4 h-4 text-gray-400"></i>
-                </button>
-                <div class="flex-1 relative">
-                    <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 w-4 h-4"></i>
-                    <input type="text" placeholder="Rechercher..." 
-                           class="w-full pl-9 pr-3 py-2 bg-gray-750 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-blue-500">
-                </div>
-            </div>
-
-            <nav class="flex-1 overflow-y-auto p-2">
-                <h2 class="text-xs uppercase tracking-wider text-gray-500 px-3 py-2">Projets</h2>
-                <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg bg-blue-900/30 border border-blue-800/50 text-blue-200 mb-1">
-                    <div class="p-2 rounded-lg bg-blue-900/50 border border-blue-800/50">
-                        <i data-feather="code" class="w-4 h-4"></i>
-                    </div>
-                    <span class="truncate">Espace Codage - Projet 1</span>
-                </a>
-                <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-750/50 border border-transparent hover:border-gray-700 text-gray-300 mb-1">
-                    <div class="p-2 rounded-lg bg-gray-750 border border-gray-700">
-                        <i data-feather="code" class="w-4 h-4"></i>
-                    </div>
-                    <span class="truncate">Espace Codage - Projet 2</span>
-                </a>
-
-                <h2 class="text-xs uppercase tracking-wider text-gray-500 px-3 py-2 mt-4">Raccourcis</h2>
-                <a href="baleine.html" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-750/50 border border-transparent hover:border-gray-700 text-gray-300 mb-1">
-                    <div class="p-2 rounded-lg bg-gray-750 border border-gray-700">
-                        <i data-feather="image" class="w-4 h-4"></i>
-                    </div>
-                    <span class="truncate">La Baleine IA</span>
-                </a>
-                <a href="rosalinda.html" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-750/50 border border-transparent hover:border-gray-700 text-gray-300 mb-1">
-<div class="p-2 rounded-lg bg-gray-750 border border-gray-700">
-                        <i data-feather="message-circle" class="w-4 h-4"></i>
-                    </div>
-                    <span class="truncate">Rosalinda IA</span>
-                </a>
-                <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-750/50 border border-transparent hover:border-gray-700 text-gray-300 mb-1">
-                    <div class="p-2 rounded-lg bg-gray-750 border border-gray-700">
-                        <i data-feather="book" class="w-4 h-4"></i>
-                    </div>
-                    <span class="truncate">Bibliothèque</span>
-                </a>
-<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-750/50 border border-transparent hover:border-gray-700 text-gray-300 mb-1">
-                    <div class="p-2 rounded-lg bg-gray-750 border border-gray-700">
-                        <i data-feather="settings" class="w-4 h-4"></i>
-                    </div>
-                    <span class="truncate">Paramètres</span>
-                </a>
-            </nav>
-
-            <div class="p-3 border-t border-gray-700 flex justify-between bg-gray-850">
-                <button class="flex items-center gap-1 px-3 py-2 rounded-lg text-sm bg-gray-750 hover:bg-gray-700 border border-gray-700">
-                    <i data-feather="share-2" class="w-4 h-4"></i>
-                    <span>Partager</span>
-                    <span class="text-xs text-gray-500 ml-1">inviter</span>
-                </button>
-                <button class="flex items-center gap-1 px-3 py-2 rounded-lg text-sm bg-gray-750 hover:bg-gray-700 border border-gray-700">
-                    <i data-feather="user" class="w-4 h-4"></i>
-                    <span class="text-xs text-gray-500">profil</span>
-                </button>
-            </div>
-        </aside>
-
-        <!-- Main Content -->
-        <main class="flex-1 flex flex-col bg-gray-850/50">
-            <div class="p-3 border-b border-gray-700 flex gap-2 bg-gray-850">
-                <span class="text-xs px-3 py-1 rounded-full bg-gray-800 border border-gray-700 text-gray-400">Aperçu</span>
-                <span class="text-xs px-3 py-1 rounded-full bg-gray-800 border border-gray-700 text-gray-400">Projet</span>
-                <span class="text-xs px-3 py-1 rounded-full bg-gray-800 border border-gray-700 text-gray-400">/</span>
-            </div>
-            <div class="flex-1 flex flex-col p-4 overflow-y-auto" id="chatContainer">
-                <div class="flex-1 overflow-y-auto p-2 flex flex-col gap-3" id="chatMessages">
-                    <div class="msg bg-gray-700/50 border border-gray-700 p-3 rounded-xl max-w-[80%]">
-                        Bonjour 👋 Je suis Rosalinda, votre assistante IA. Je peux vous aider à générer des images, vidéos et bien plus. Dites-moi ce dont vous avez besoin !
-                    </div>
+        <!-- Visualization Column -->
+        <code-visualizer class="w-96 bg-gray-800 border-l border-gray-700"></code-visualizer>
 </div>
-                <div class="p-3 border-t border-gray-700 bg-gray-850">
-                    <div class="flex items-center gap-2 p-2 rounded-xl bg-gray-800 border border-gray-700">
-                        <button id="chatMicBtn" class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
-                            <i data-feather="mic" class="w-5 h-5"></i>
-                        </button>
-                        <button id="chatAttachBtn" class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
-                            <i data-feather="paperclip" class="w-5 h-5"></i>
-                        </button>
-                        <input id="chatInput" placeholder="Écrivez votre message..." 
-                               class="flex-1 bg-transparent px-3 py-2 focus:outline-none text-sm">
-                        <button id="chatSendBtn" class="p-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white">
-                            <i data-feather="send" class="w-5 h-5"></i>
-                        </button>
-                    </div>
-<div class="text-xs text-gray-500 mt-2 flex justify-between">
-                        <span id="chatStatus">Prêt</span>
-                        <span>Assistant IA v1.0</span>
-                    </div>
-                </div>
-</main>
-
-        <!-- Preview Panel -->
-        <aside class="w-96 bg-gray-800 border-l border-gray-700 flex flex-col">
-            <div class="p-3 border-b border-gray-700 flex justify-between items-center bg-gray-850">
-                <h2 class="font-bold">Aperçu</h2>
-                <div class="flex gap-1">
-                    <button class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
-                        <i data-feather="arrow-left" class="w-4 h-4"></i>
-                    </button>
-                    <button class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
-                        <i data-feather="arrow-right" class="w-4 h-4"></i>
-                    </button>
-                    <button class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
-                        <i data-feather="refresh-ccw" class="w-4 h-4"></i>
-                    </button>
-                    <button class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
-                        <i data-feather="maximize" class="w-4 h-4"></i>
-                    </button>
-                    <button class="flex items-center gap-1 px-3 py-1 rounded-lg text-sm bg-gray-750 hover:bg-gray-700 border border-gray-700">
-                        <i data-feather="edit" class="w-4 h-4"></i>
-                        <span>Modifier</span>
-                    </button>
-                </div>
-            </div>
-                <div class="flex-1 flex flex-col p-4 overflow-y-auto bg-gray-850/30" id="previewPanel">
-                    <h3 class="font-bold text-lg mb-4">Génération Rosalinda</h3>
-                    <div id="mediaResults" class="grid grid-cols-2 gap-4">
-                        <!-- Les médias générés apparaîtront ici -->
-                    </div>
-                    <div id="explanations" class="mt-4 p-4 bg-gray-800 rounded-lg">
-                        <h4 class="font-medium mb-2">Explications techniques</h4>
-                        <p class="text-sm text-gray-400">En attente de votre demande...</p>
-                    </div>
-                </div>
-<div class="p-3 border-t border-gray-700 flex justify-between text-sm bg-gray-850">
-                <span class="text-gray-500">Statut: <span class="text-gray-400">Hors ligne</span></span>
-                <span class="text-gray-500">Mode: <span class="text-gray-400">Preview</span></span>
-            </div>
-        </aside>
-    </div>
     <script>
         feather.replace();
         
-        // Navigation items active state
-        const navItems = document.querySelectorAll('nav a');
-        navItems.forEach(item => {
-            item.addEventListener('click', () => {
-                navItems.forEach(i => i.classList.remove('bg-blue-900/30', 'border-blue-800/50', 'text-blue-200'));
-                item.classList.add('bg-blue-900/30', 'border-blue-800/50', 'text-blue-200');
-            });
-        });
+        // Initialize components
+        const projectManager = document.querySelector('project-manager');
+        const codeExplainer = document.querySelector('code-explainer');
+        const codeVisualizer = document.querySelector('code-visualizer');
 
-        // Chat functionality
-        const chatMessages = document.getElementById('chatMessages');
-        const chatInput = document.getElementById('chatInput');
-        const chatSendBtn = document.getElementById('chatSendBtn');
-        const chatMicBtn = document.getElementById('chatMicBtn');
-        const chatStatus = document.getElementById('chatStatus');
+        // Example of setting code and explanation
+        const exampleCSS = `body {
+  background-color: #ff6347; /* Couleur de fond tomatée */
+  color: #ffffff;
+  font-family: 'Arial', sans-serif;
+}`;
 
-        function addChatMessage(text, isUser = false) {
-            const msgDiv = document.createElement('div');
-            msgDiv.className = `msg ${isUser ? 
-                'ml-auto bg-blue-900/10 border-blue-800/50' : 
-                'bg-gray-700/50 border-gray-700'} p-3 rounded-xl max-w-[80%]`;
-            msgDiv.textContent = text;
-            chatMessages.appendChild(msgDiv);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-        }
+        const exampleExplanation = `La Baleine a généré ce code CSS pour le thème :
+- La couleur de fond est définie sur une nuance de tomate (#ff6347)
+- Le texte sera en blanc (#ffffff)
+- La police par défaut est Arial avec une police sans-serif de secours`;
 
-        function getAIResponse(userText) {
-            const t = userText.toLowerCase();
-            if (t.includes('bonjour') || t.includes('salut')) {
-                return "Bonjour ! Comment puis-je vous aider avec votre projet de codage aujourd'hui ?";
-            }
-            if (t.includes('projet') || t.includes('commencer')) {
-                return "Pour commencer un nouveau projet, vous pouvez :\n1. Cliquer sur le bouton '+' dans la barre latérale\n2. Choisir un type de projet\n3. Donner un nom à votre projet";
-            }
-            if (t.includes('aide') || t.includes('problème')) {
-                return "Je peux vous aider à résoudre des problèmes de code. Décrivez-moi l'erreur ou ce que vous essayez d'accomplir.";
-            }
-            if (t.includes('image') || t.includes('baleine')) {
-                return "Pour générer des images, vous pouvez utiliser La Baleine IA disponible dans le menu de gauche.";
-            }
-            return "Je peux vous aider avec :\n- Projets de codage\n- Génération d'images\n- Résolution de problèmes\n- Conseils techniques\nDites-moi plus précisément ce dont vous avez besoin !";
-        }
+        // Set initial example
+        codeExplainer.setCode(exampleCSS, exampleExplanation);
+        codeVisualizer.setCode(exampleCSS);
 
-        function handleChatSend() {
-            const message = chatInput.value.trim();
-            if (!message) return;
+        // Listen for project changes
+        projectManager.addEventListener('project-changed', (e) => {
+            const project = e.detail.project;
+            console.log('Project changed to:', project.name);
             
-            addChatMessage(message, true);
-            chatInput.value = '';
-            
-            setTimeout(() => {
-                const response = getAIResponse(message);
-                addChatMessage(response);
-            }, 800);
-        }
-
-        chatSendBtn.addEventListener('click', handleChatSend);
-        chatInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') handleChatSend();
-        });
-        // Microphone functionality using Web Speech API
-        chatMicBtn.addEventListener('click', async () => {
-            try {
-                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-                if (!SpeechRecognition) {
-                    chatStatus.textContent = 'Micro: non supporté';
-                    return;
-                }
-
-                const recognition = new SpeechRecognition();
-                recognition.lang = 'fr-FR';
-                recognition.interimResults = false;
-                recognition.onresult = (event) => {
-                    let interimTranscript = '';
-                    let finalTranscript = '';
-                    
-                    for (let i = event.resultIndex; i < event.results.length; i++) {
-                        const transcript = event.results[i][0].transcript;
-                        if (event.results[i].isFinal) {
-                            finalTranscript += transcript + ' ';
-                        } else {
-                            interimTranscript += transcript;
-                        }
-                    }
-                    
-                    // Show interim results in real-time
-                    chatInput.value = interimTranscript || finalTranscript;
-                    
-                    if (finalTranscript) {
-                        handleChatSend();
-                    }
-                };
-recognition.onerror = (event) => {
-                    console.error('Erreur de reconnaissance vocale:', event.error);
-                    chatStatus.textContent = 'Micro: erreur';
-                };
-
-                chatStatus.textContent = 'Micro: écoute...';
-                await navigator.mediaDevices.getUserMedia({ audio: true });
-                recognition.start();
-                chatMicBtn.innerHTML = '<i data-feather="mic-off" class="w-5 h-5"></i>';
-                feather.replace();
-
-                recognition.onend = () => {
-                    chatMicBtn.innerHTML = '<i data-feather="mic" class="w-5 h-5"></i>';
-                    feather.replace();
-                    chatStatus.textContent = 'Prêt';
-                };
-            } catch (err) {
-                console.error('Erreur microphone:', err);
-                chatStatus.textContent = 'Micro: permission refusée';
-            }
+            // Update code and explanation based on project
+            // In a real app, you would fetch this data for the selected project
+            codeExplainer.setCode(exampleCSS, exampleExplanation);
+            codeVisualizer.setCode(exampleCSS);
         });
-</script>
-  <script src="components/ai-agent.js"></script>
-  <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+    </script>
+    <script src="components/project-manager.js"></script>
+    <script src="components/code-explainer.js"></script>
+    <script src="components/code-visualizer.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

style.css

@@ -82,16 +82,30 @@ input:focus, button:focus {
     background: rgba(255, 255, 255, 0.04);
     font-size: 0.875rem;
 }
-/* Chat message styles */
-#chatMessages, #assistant-ia {
-    flex: 1;
-    overflow-y: auto;
-    padding: 1rem;
+/* Project space layout */
+project-manager, code-explainer, code-visualizer {
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
 }
 
+/* Responsive layout */
+@media (max-width: 1024px) {
+    .app-container {
+        flex-direction: column;
+    }
+    project-manager {
+        width: 100% !important;
+        height: auto !important;
+        max-height: 300px;
+    }
+    code-explainer, code-visualizer {
+        width: 100% !important;
+    }
+    code-visualizer {
+        border-left: none !important;
+        border-top: 1px solid #334155;
+    }
+}
 /* Preview panel styles */
 #previewPanel {
     background: rgba(17, 24, 39, 0.5);