Spaces:

Abmacode12
/

codeflow-station-anti-stop-engine

Running

App Files Files Community

Abmacode12 commited on Dec 19, 2025

Commit

de1ff5d

verified ·

1 Parent(s): fce1dec

Pour la suite du projet, j’aimerais que soit activée et créée une IA entièrement dédiée à mon entreprise, qui m’appartienne, afin que je puisse travailler sans limitation.

Browse files

Cette IA devra être capable de générer des images, des vidéos et du contenu, et être intégrée directement dans mon écosystème professionnel pour un usage interne et évolutif.

Cette étape est essentielle pour le développement durable de mon entreprise.

Files changed (4) hide show

ai-dashboard.html +164 -0
components/ai-model-card.js +155 -0
index.html +4 -2
script.js +40 -1

ai-dashboard.html ADDED Viewed

	@@ -0,0 +1,164 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>CodeFlow Station - IA Entreprise</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/feather-icons"></script>
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body class="h-screen w-screen overflow-hidden bg-[#0b1622] text-slate-200">
+  <!-- Top bar -->
+  <header class="h-14 flex items-center justify-between px-4 border-b border-white/10 bg-[#09121b]">
+    <div class="flex items-center gap-3">
+      <div class="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center">
+        <span class="text-sm font-bold">🤖</span>
+      </div>
+      <div>
+        <div class="text-sm font-semibold leading-none">CodeFlow AI</div>
+        <div class="text-[11px] text-slate-400">PRO • IA Entreprise</div>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <button id="btnRefresh" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs">Refresh</button>
+      <button id="btnExport" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs">Export</button>
+      <button class="px-3 py-1.5 rounded-lg bg-indigo-500/20 hover:bg-indigo-500/30 border border-indigo-400/20 text-xs">Documentation</button>
+    </div>
+    <div class="flex items-center gap-2">
+      <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-cyan-400"></div>
+      <div class="text-sm">admin</div>
+    </div>
+  </header>
+  <!-- Main content -->
+  <main class="h-[calc(100vh-56px)] grid grid-cols-12 gap-0">
+    <!-- Left sidebar -->
+    <aside class="col-span-3 xl:col-span-2 h-full border-r border-white/10 bg-[#0c1723] p-4 relative">
+      <div class="mb-4">
+        <div class="flex items-center gap-2 text-sm font-semibold">
+          <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
+          IA Entreprise
+        </div>
+      </div>
+      <nav class="space-y-2">
+        <a href="#dashboard" class="block px-3 py-2 rounded-xl bg-indigo-500/15 hover:bg-indigo-500/20 border border-indigo-400/20 text-sm">Dashboard</a>
+        <a href="#models" class="block px-3 py-2 rounded-xl hover:bg-white/5 border border-transparent hover:border-white/10 text-sm">Modèles</a>
+        <a href="#training" class="block px-3 py-2 rounded-xl hover:bg-white/5 border border-transparent hover:border-white/10 text-sm">Entraînement</a>
+        <a href="#content" class="block px-3 py-2 rounded-xl hover:bg-white/5 border border-transparent hover:border-white/10 text-sm">Génération</a>
+        <a href="#api" class="block px-3 py-2 rounded-xl hover:bg-white/5 border border-transparent hover:border-white/10 text-sm">API</a>
+        <a href="#settings" class="block px-3 py-2 rounded-xl hover:bg-white/5 border border-transparent hover:border-white/10 text-sm">Paramètres</a>
+      </nav>
+      <div class="absolute bottom-3 left-4 right-4 flex items-center justify-between text-xs text-slate-400">
+        <span class="px-2 py-1 rounded-lg bg-white/5 border border-white/10">v1.0.0</span>
+        <span>AI Status: <span class="text-emerald-400">Active</span></span>
+      </div>
+    </aside>
+    <!-- Main panel -->
+    <section class="col-span-9 xl:col-span-10 h-full flex flex-col bg-[#0b1622]">
+      <!-- Tabs -->
+      <div class="h-12 flex items-center gap-2 px-4 border-b border-white/10 bg-[#0c1723]">
+        <button class="px-3 py-1.5 rounded-lg bg-indigo-500/20 border border-indigo-400/20 text-xs flex items-center gap-2">
+          <i data-feather="activity"></i> Dashboard
+        </button>
+        <button class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs flex items-center gap-2">
+          <i data-feather="cpu"></i> Modèles
+        </button>
+        <button class="px-3 py-1.5 rounded-lg bg-white/5 border border-white/10 text-xs flex items-center gap-2">
+          <i data-feather="database"></i> Données
+        </button>
+        <div class="ml-auto flex items-center gap-2 text-xs text-slate-400">
+          <span class="px-2 py-1 rounded-lg bg-emerald-500/10 border border-emerald-400/20 text-emerald-200">En ligne</span>
+        </div>
+      </div>
+      <!-- Content -->
+      <div class="flex-1 overflow-auto p-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <!-- Stats cards -->
+          <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
+            <div class="text-xs text-slate-400 mb-2">Utilisation</div>
+            <div class="text-2xl font-bold">78%</div>
+            <div class="text-xs text-slate-400 mt-1">Capacité actuelle</div>
+          </div>
+          <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
+            <div class="text-xs text-slate-400 mb-2">Requêtes</div>
+            <div class="text-2xl font-bold">1,248</div>
+            <div class="text-xs text-slate-400 mt-1">Aujourd'hui</div>
+          </div>
+          <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
+            <div class="text-xs text-slate-400 mb-2">Modèles</div>
+            <div class="text-2xl font-bold">3</div>
+            <div class="text-xs text-slate-400 mt-1">Actifs</div>
+          </div>
+          <!-- Generation section -->
+          <div class="md:col-span-2 lg:col-span-3 rounded-2xl border border-white/10 bg-white/5 p-4">
+            <div class="text-sm font-semibold mb-4">Génération de contenu</div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <button id="btnGenText" class="rounded-xl bg-indigo-500/20 hover:bg-indigo-500/30 border border-indigo-400/20 p-4 flex flex-col items-center">
+                <i data-feather="file-text" class="w-6 h-6 mb-2"></i>
+                <span class="text-sm">Texte</span>
+              </button>
+              <button id="btnGenImage" class="rounded-xl bg-indigo-500/20 hover:bg-indigo-500/30 border border-indigo-400/20 p-4 flex flex-col items-center">
+                <i data-feather="image" class="w-6 h-6 mb-2"></i>
+                <span class="text-sm">Image</span>
+              </button>
+              <button id="btnGenVideo" class="rounded-xl bg-indigo-500/20 hover:bg-indigo-500/30 border border-indigo-400/20 p-4 flex flex-col items-center">
+                <i data-feather="video" class="w-6 h-6 mb-2"></i>
+                <span class="text-sm">Vidéo</span>
+              </button>
+            </div>
+          </div>
+          <!-- Recent activity -->
+          <div class="md:col-span-2 lg:col-span-3 rounded-2xl border border-white/10 bg-white/5 p-4">
+            <div class="text-sm font-semibold mb-4">Activité récente</div>
+            <div class="space-y-3">
+              <div class="flex items-center gap-3 text-sm">
+                <div class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
+                  <i data-feather="file-text" class="w-4 h-4"></i>
+                </div>
+                <div>
+                  <div>Article de blog généré</div>
+                  <div class="text-xs text-slate-400">il y a 12 minutes</div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 text-sm">
+                <div class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
+                  <i data-feather="image" class="w-4 h-4"></i>
+                </div>
+                <div>
+                  <div>Image marketing générée</div>
+                  <div class="text-xs text-slate-400">il y a 34 minutes</div>
+                </div>
+              </div>
+              <div class="flex items-center gap-3 text-sm">
+                <div class="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
+                  <i data-feather="video" class="w-4 h-4"></i>
+                </div>
+                <div>
+                  <div>Vidéo courte générée</div>
+                  <div class="text-xs text-slate-400">il y a 1 heure</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <script src="script.js"></script>
+  <script>
+    feather.replace();
+  </script>
+</body>
+</html>

components/ai-model-card.js ADDED Viewed

	@@ -0,0 +1,155 @@

+class AIModelCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+  connectedCallback() {
+    const name = this.getAttribute('name') || 'Modèle IA';
+    const type = this.getAttribute('type') || 'text';
+    const status = this.getAttribute('status') || 'active';
+    const lastUsed = this.getAttribute('last-used') || 'N/A';
+    this.shadowRoot.innerHTML = `
+      <style>
+        .card {
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 0.75rem;
+          padding: 1rem;
+          transition: all 0.2s ease;
+        }
+        .card:hover {
+          border-color: rgba(99, 102, 241, 0.5);
+        }
+        .header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 0.75rem;
+        }
+        .icon {
+          width: 2.5rem;
+          height: 2.5rem;
+          border-radius: 0.5rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 0.75rem;
+        }
+        .text-icon {
+          background: rgba(99, 102, 241, 0.1);
+          color: rgba(99, 102, 241, 0.8);
+        }
+        .image-icon {
+          background: rgba(16, 185, 129, 0.1);
+          color: rgba(16, 185, 129, 0.8);
+        }
+        .video-icon {
+          background: rgba(236, 72, 153, 0.1);
+          color: rgba(236, 72, 153, 0.8);
+        }
+        .title {
+          font-weight: 600;
+          flex-grow: 1;
+        }
+        .status {
+          font-size: 0.75rem;
+          padding: 0.25rem 0.5rem;
+          border-radius: 9999px;
+        }
+        .active {
+          background: rgba(16, 185, 129, 0.1);
+          color: rgba(16, 185, 129, 0.8);
+        }
+        .inactive {
+          background: rgba(107, 114, 128, 0.1);
+          color: rgba(107, 114, 128, 0.8);
+        }
+        .training {
+          background: rgba(234, 179, 8, 0.1);
+          color: rgba(234, 179, 8, 0.8);
+        }
+        .details {
+          font-size: 0.875rem;
+          color: rgba(156, 163, 175, 1);
+          margin-top: 0.5rem;
+        }
+        .actions {
+          display: flex;
+          gap: 0.5rem;
+          margin-top: 1rem;
+        }
+        button {
+          flex: 1;
+          padding: 0.5rem;
+          border-radius: 0.5rem;
+          font-size: 0.75rem;
+          border: none;
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+        .primary {
+          background: rgba(99, 102, 241, 0.1);
+          color: rgba(99, 102, 241, 0.8);
+        }
+        .primary:hover {
+          background: rgba(99, 102, 241, 0.2);
+        }
+        .secondary {
+          background: rgba(255, 255, 255, 0.05);
+          color: rgba(255, 255, 255, 0.8);
+        }
+        .secondary:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
+      </style>
+      <div class="card">
+        <div class="header">
+          <div class="icon ${type}-icon">
+            <i data-feather="${this.getIcon(type)}"></i>
+          </div>
+          <div class="title">${name}</div>
+          <div class="status ${status}">${this.getStatusText(status)}</div>
+        </div>
+        <div class="details">
+          <div>Type: ${this.getTypeText(type)}</div>
+          <div>Dernière utilisation: ${lastUsed}</div>
+        </div>
+        <div class="actions">
+          <button class="primary">Utiliser</button>
+          <button class="secondary">Configurer</button>
+        </div>
+      </div>
+    `;
+    feather.replace();
+  }
+  getIcon(type) {
+    switch(type) {
+      case 'text': return 'file-text';
+      case 'image': return 'image';
+      case 'video': return 'video';
+      default: return 'cpu';
+    }
+  }
+  getTypeText(type) {
+    switch(type) {
+      case 'text': return 'Texte';
+      case 'image': return 'Image';
+      case 'video': return 'Vidéo';
+      default: return 'Multimédia';
+    }
+  }
+  getStatusText(status) {
+    switch(status) {
+      case 'active': return 'Actif';
+      case 'inactive': return 'Inactif';
+      case 'training': return 'Entraînement';
+      default: return status;
+    }
+  }
+}
+customElements.define('ai-model-card', AIModelCard);

index.html CHANGED Viewed

@@ -27,8 +27,10 @@
       <button id="btnMobile" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs">Mobile</button>
       <button id="btnRefresh" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs">Refresh</button>
       <button id="btnExport" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs">Export</button>
-      <button class="px-3 py-1.5 rounded-lg bg-indigo-500/20 hover:bg-indigo-500/30 border border-indigo-400/20 text-xs">Community</button>
-    </div>
     <div class="flex items-center gap-2">
       <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-cyan-400"></div>

       <button id="btnMobile" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs">Mobile</button>
       <button id="btnRefresh" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs">Refresh</button>
       <button id="btnExport" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs">Export</button>
+        <button class="px-3 py-1.5 rounded-lg bg-indigo-500/20 hover:bg-indigo-500/30 border border-indigo-400/20 text-xs">
+          <a href="ai-dashboard.html">IA Entreprise</a>
+        </button>
+</div>
     <div class="flex items-center gap-2">
       <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-cyan-400"></div>

script.js CHANGED Viewed

@@ -122,9 +122,48 @@ document.addEventListener('DOMContentLoaded', () => {
   promptEl.addEventListener('keydown', (e) => {
     if (e.key === "Enter") sendBtn.click();
   });
   // Initialize with default code
-  codeEl.value = `<!DOCTYPE html>
 <html>
 <head>
   <title>My App</title>

   promptEl.addEventListener('keydown', (e) => {
     if (e.key === "Enter") sendBtn.click();
   });
+  // AI Generation functions
+  document.getElementById('btnGenImg')?.addEventListener('click', async () => {
+    setStatus("Génération d'image...", "work");
+    try {
+      // Simulate image generation
+      setTimeout(() => {
+        const imgUrl = `http://static.photos/technology/640x360/${Math.floor(Math.random() * 1000)}`;
+        mediaOut.innerHTML = `
+          <div class="rounded-xl overflow-hidden border border-white/10">
+            <img src="${imgUrl}" class="w-full" alt="Generated image">
+            <div class="p-2 text-xs text-slate-400">Image générée: ${new Date().toLocaleTimeString()}</div>
+          </div>
+        `;
+        setStatus("Image générée", "ok");
+      }, 2000);
+    } catch (err) {
+      setStatus("Erreur de génération", "err");
+    }
+  });
+  document.getElementById('btnGenVid')?.addEventListener('click', async () => {
+    setStatus("Génération de vidéo...", "work");
+    try {
+      // Simulate video generation
+      setTimeout(() => {
+        mediaOut.innerHTML = `
+          <div class="rounded-xl overflow-hidden border border-white/10">
+            <video controls class="w-full">
+              <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
+            </video>
+            <div class="p-2 text-xs text-slate-400">Vidéo générée: ${new Date().toLocaleTimeString()}</div>
+          </div>
+        `;
+        setStatus("Vidéo générée", "ok");
+      }, 3000);
+    } catch (err) {
+      setStatus("Erreur de génération", "err");
+    }
+  });
   // Initialize with default code
+codeEl.value = `<!DOCTYPE html>
 <html>
 <head>
   <title>My App</title>