Spaces:

Abmacode12
/

deepseed-interface

Running

App Files Files Community

Abmacode12 commited on Dec 18, 2025

Commit

dca3691

verified ·

1 Parent(s): ceecf4e

<!doctype html>

Browse files

<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>DeepSeed — Interface 3 Colonnes</title>
<link rel="stylesheet" href="./styles.css" />
</head>

<body>
<div class="app">


<aside class="sidebar">
<div class="brand">
<div class="logo">🚀</div>
<div class="brandText">
<div class="brandName">DeepSeed</div>
<div class="brandSub">Interface</div>
</div>
</div>

<button class="btnPrimary">+ Nouvelle tâche</button>

<div class="nav">
<button class="navBtn">🔍 Rechercher</button>
<button class="navBtn">📚 Bibliothèque</button>
</div>

<div class="sectionTitle">PROJETS</div>

<div class="projects">
<button class="projectItem">
<span>API Utilisateurs</span>
<span class="pill green">TERMINÉ</span>
</button>

<button class="projectItem active">
<span>Composant React</span>
<span class="pill orange">EN COURS</span>
</button>

<button class="projectItem">
<span>Base de données</span>
<span class="pill blue">BROUILLON</span>
</button>

<button class="projectItem">
<span>API REST</span>
<span class="pill purple">NOUVEAU</span>
</button>
</div>

<div class="sidebarFooter">
<div class="hint">✅ Menu fixe — rien ne bouge</div>
</div>
</aside>


<main class="main">

<header class="mainHeader">
<h1>Générateur de Code IA</h1>
<p>Décrivez votre idée, et le code apparaît ci-dessous.</p>
</header>

<section class="codePanel">
<div class="codeTop">
<h2>Code généré</h2>
<div class="codeActions">
<button id="copyBtn" class="smallBtn">📄 Copier</button>
<button id="clearBtn" class="smallBtn danger">🗑️ Effacer</button>
</div>
</div>

<pre id="codeOutput" class="codeOutput">// Le code généré apparaîtra ici…</pre>
</section>

<section class="examples">
<div class="examplesTitle">Exemples de demandes :</div>
<div class="chips">
<button class="chip" data-prompt="Crée une fonction Python qui calcule une factorielle.">Factorielle Python</button>
<button class="chip" data-prompt="Génère un composant React Card avec titre et bouton.">Composant React</button>
<button class="chip" data-prompt="Crée une classe Java simple pour gérer une pile (stack).">Classe Java</button>
<button class="chip" data-prompt="Écris du CSS pour une carte moderne (ombre, radius, hover).">CSS Carte</button>
</div>
</section>


<section class="promptDock">
<div class="promptBar">
<input id="promptInput" type="text" placeholder="Décrivez votre idée ou thème..." />
<button id="generateBtn" class="generateBtn">Générer ✨</button>
<button id="micBtn" class="micBtn" title="Parler">🎤</button>
</div>

<div class="dockHint">
La barre est volontairement en bas (comme ta flèche rouge).
</div>
</section>

</main>


<aside class="right">
<div class="rightHeader">
<div class="avatar">🤖</div>
<div>
<div class="rightTitle">Générateur de Code IA</div>
<div class="rightSub">Rosalinda (zone vide)</div>
</div>
</div>


<div class="emptyStage" id="stage">
<div class="emptyText">
Zone vide (future image / vidéo / preview)
</div>
</div>
</aside>

</div>

<script src="./app.js"></script>
</body>
</html>
2) styles.css
css
Copier le code
:root{
--bg: #0b0f1a;
--panel: #0f172a;
--panel2:#0b1222;
--border:#1f2a44;
--text:#e7eefc;
--muted:#98a6c7;
--accent:#23f3c7;
--accent2:#ff2d7a;
}

*{ box-sizing:border-box; margin:0; padding:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body{ background:var(--bg); color:var(--text); height:100vh; }

.app{
height:100vh;
display:grid;
grid-template-columns: 280px 1fr 360px; /* ✅ 3 colonnes */
}

/* ===== SIDEBAR (col 1) ===== */
.sidebar{
background: linear-gradient(180deg, #0e1424, #0a1020);
border-right:1px solid var(--border);
padding:18px;
display:flex;
flex-direction:column;
gap:14px;
}

.brand{ display:flex; align-items:center; gap:10px; }
.logo{
width:40px; height:40px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
background:#121b33; border:1px solid var(--border);
}
.brandName{ font-weight:800; font-size:20px; color:#7cf5dc; }
.brandSub{ font-size:12px; color:var(--muted); }

.btnPrimary{
width:100%;
padding:12px 12px;
border:none;
border-radius:10px;
background: linear-gradient(90deg, var(--accent2), #ff6aa3);
color:white;
font-weight:700;
cursor:pointer;
}

.nav{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.navBtn{
width:100%;
padding:12px;
background:#121b33;
border:1px solid var(--border);
border-radius:10px;
color:var(--text);
text-align:left;
cursor:pointer;
}

.sectionTitle{
margin-top:10px;
font-size:12px;
letter-spacing:1px;
color:#7cf5dc;
font-weight:800;
}

.projects{ display:flex; flex-direction:column; gap:10px; }
.projectItem{
width:100%;
padding:12px;
background:#0f1a33;
border:1px solid var(--border);
border-radius:12px;
color:var(--text);
display:flex;
align-items:center;
justify-content:space-between;
cursor:pointer;
}
.projectItem.active{ outline:2px solid rgba(35,243,199,0.25); }

.pill{
font-size:11px;
padding:4px 8px;
border-radius:999px;
border:1px solid var(--border);
}
.pill.green{ background:rgba(40, 199, 111, .15); }
.pill.orange{ background:rgba(255, 159, 67, .15); }
.pill.blue{ background:rgba(54, 162, 235, .15); }
.pill.purple{ background:rgba(153, 102, 255, .15); }

.sidebarFooter{ margin-top:auto; color:var(--muted); font-size:12px; }

/* ===== MAIN (col 2) ===== */
.main{
padding:22px;
display:flex;
flex-direction:column;
gap:16px;
min-width:0;
}

.mainHeader h1{ font-size:34px; }
.mainHeader p{ color:var(--muted); margin-top:6px; }

.codePanel{
background:rgba(5, 9, 20, .85);
border:1px solid var(--border);
border-radius:16px;
padding:16px;
min-height:280px;
}

.codeTop{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.codeTop h2{ font-size:18px; color:#7cf5dc; }

.codeActions{ display:flex; gap:10px; }
.smallBtn{
padding:10px 12px;
background:#121b33;
border:1px solid var(--border);
color:var(--text);
border-radius:10px;
cursor:pointer;
}
.smallBtn.danger{ background:rgba(255,45,122,.15); }

.codeOutput{
white-space:pre-wrap;
line-height:1.5;
color:#d9e6ff;
font-size:13px;
}

.examples{
background:rgba(15,23,42,.35);
border:1px solid var(--border);
border-radius:16px;
padding:14px;
}
.examplesTitle{ color:#7cf5dc; font-weight:800; margin-bottom:10px; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
padding:10px 12px;
border-radius:999px;
background:#0f1a33;
border:1px solid var(--border);
color:var(--text);
cursor:pointer;
}

/* ✅ BARRE EN BAS (zone flèche) */
.promptDock{
margin-top:auto; /* pousse en bas */
background:rgba(15,23,42,.35);
border:1px solid var(--border);
border-radius:16px;
padding:14px;
}

.promptBar{
display:flex;
gap:10px;
}

#promptInput{
flex:1;
padding:14px;
border-radius:12px;
border:1px solid var(--border);
background:#0b1222;
color:var(--text);
outline:none;
}

.generateBtn{
padding:14px 16px;
border-radius:12px;
border:none;
background: linear-gradient(90deg, var(--accent), #7cf5dc);
color:#061018;
font-weight:900;
cursor:pointer;
}

.micBtn{
padding:14px 16px;
border-radius:12px;
border:1px solid var(--border);
background:#121b33;
color:var(--text);
cursor:pointer;
}

.dockHint{
margin-top:10px;
font-size:12px;
color:var(--muted);
}

/* ===== RIGHT (col 3) : petit titre + vide ===== */
.right{
background: linear-gradient(180deg, #0e1424, #0a1020);
border-left:1px solid var(--border);
padding:18px;
display:flex;
flex-direction:column;
gap:14px;
}

.rightHeader{
display:flex;
align-items:center;
gap:12px;
padding:12px;
border-radius:16px;
border:1px solid var(--border);
background:#0f1a33;
}
.avatar{
width:44px; height:44px;
border-radius:14px;
display:flex; align-items:center; justify-content:center;
background:#121b33;
border:1px solid var(--border);
}
.rightTitle{ font-weight:900; }
.rightSub{ color:var(--muted); font-size:12px; }

.emptyStage{
flex:1;
border-radius:18px;
border:2px dashed rgba(124,245,220,.25);
background: rgba(5, 9, 20, .35);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:20px;
}
.emptyText{ color:rgba(231,238,252,.6); }
3) app.js
js
Copier le code
const promptInput = document.getElementById("promptInput");
const generateBtn = document.getElementById("generateBtn");
const micBtn = document.getElementById("micBtn");
const codeOutput = document.getElementById("codeOutput");
const copyBtn = document.getElementById("copyBtn");
const clearBtn = document.getElementById("clearBtn");

function fakeGenerate(prompt) {
// Remplace ça plus tard par ton API IA (OpenRouter, local, etc.)
const p = (prompt || "").trim();
if (!p) return "// Écris une demande dans la barre en bas, puis clique sur Générer ✨";

return `// ✅ Demande reçue : ${p}

function main() {
console.log("Hello Rosalinda!");
}

// (Ici, tu brancheras ton IA pour générer du vrai code)
main();`;
}

generateBtn.addEventListener("click", () => {
const prompt = promptInput.value;
codeOutput.textContent = fakeGener

Files changed (3) hide show

README.md +7 -4
index.html +136 -19
script.js +82 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepseed Interface
-emoji: 📚
 colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSeed Interface
 colorFrom: yellow
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,136 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>DeepSeed — Interface 3 Colonnes</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: '#f43f5e', // rose-500
+          }
+        }
+      }
+    }
+  </script>
+</head>
+<body>
+  <div class="app h-screen grid grid-cols-[280px_1fr_360px]">
+    <!-- COLONNE 1 : SIDEBAR -->
+    <aside class="sidebar bg-gradient-to-b from-slate-900 to-slate-950 border-r border-slate-700 p-4 flex flex-col gap-4">
+      <div class="brand flex items-center gap-3">
+        <div class="logo w-10 h-10 rounded-xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl">🚀</div>
+        <div class="brandText">
+          <div class="brandName font-extrabold text-lg text-primary">DeepSeed</div>
+          <div class="brandSub text-xs text-slate-400">Interface</div>
+        </div>
+      </div>
+      <button class="btnPrimary w-full py-3 px-3 border-none rounded-xl bg-gradient-to-r from-primary to-pink-500 text-white font-bold cursor-pointer">+ Nouvelle tâche</button>
+      <div class="nav flex flex-col gap-3 mt-2">
+        <button class="navBtn w-full py-3 bg-slate-800 border border-slate-700 rounded-xl text-slate-100 text-left cursor-pointer">🔍 Rechercher</button>
+        <button class="navBtn w-full py-3 bg-slate-800 border border-slate-700 rounded-xl text-slate-100 text-left cursor-pointer">📚 Bibliothèque</button>
+      </div>
+      <div class="sectionTitle mt-3 text-xs tracking-widest text-primary font-extrabold">PROJETS</div>
+      <div class="projects flex flex-col gap-3">
+        <button class="projectItem w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer">
+          <span>API Utilisateurs</span>
+          <span class="pill bg-emerald-500/15 text-emerald-400 text-xs px-2 py-1 rounded-full border border-emerald-500/20">TERMINÉ</span>
+        </button>
+        <button class="projectItem active w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer outline outline-2 outline-primary/20">
+          <span>Composant React</span>
+          <span class="pill bg-orange-500/15 text-orange-400 text-xs px-2 py-1 rounded-full border border-orange-500/20">EN COURS</span>
+        </button>
+        <button class="projectItem w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer">
+          <span>Base de données</span>
+          <span class="pill bg-blue-500/15 text-blue-400 text-xs px-2 py-1 rounded-full border border-blue-500/20">BROUILLON</span>
+        </button>
+        <button class="projectItem w-full py-3 bg-slate-900 border border-slate-700 rounded-xl text-slate-100 flex items-center justify-between cursor-pointer">
+          <span>API REST</span>
+          <span class="pill bg-purple-500/15 text-purple-400 text-xs px-2 py-1 rounded-full border border-purple-500/20">NOUVEAU</span>
+        </button>
+      </div>
+      <div class="sidebarFooter mt-auto text-slate-400 text-xs">
+        <div class="hint">✅ Menu fixe — rien ne bouge</div>
+      </div>
+    </aside>
+    <!-- COLONNE 2 : GÉNÉRATEUR (barre en bas) -->
+    <main class="main p-6 flex flex-col gap-4 min-w-0">
+      <header class="mainHeader">
+        <h1 class="text-3xl font-bold">Générateur de Code IA</h1>
+        <p class="text-slate-400 mt-2">Décrivez votre idée, et le code apparaît ci-dessous.</p>
+      </header>
+      <section class="codePanel bg-slate-900/85 border border-slate-700 rounded-2xl p-4 min-h-[280px]">
+        <div class="codeTop flex items-center justify-between gap-3 mb-3">
+          <h2 class="text-lg text-primary font-semibold">Code généré</h2>
+          <div class="codeActions flex gap-3">
+            <button id="copyBtn" class="smallBtn py-2.5 px-3 bg-slate-800 border border-slate-700 text-slate-100 rounded-xl cursor-pointer">📄 Copier</button>
+            <button id="clearBtn" class="smallBtn danger py-2.5 px-3 bg-primary/15 border border-primary/20 text-primary rounded-xl cursor-pointer">🗑️ Effacer</button>
+          </div>
+        </div>
+        <pre id="codeOutput" class="codeOutput whitespace-pre-wrap leading-6 text-slate-200 text-sm">// Le code généré apparaîtra ici…</pre>
+      </section>
+      <section class="examples bg-slate-800/35 border border-slate-700 rounded-2xl p-4">
+        <div class="examplesTitle text-primary font-extrabold mb-3">Exemples de demandes :</div>
+        <div class="chips flex gap-3 flex-wrap">
+          <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Crée une fonction Python qui calcule une factorielle.">Factorielle Python</button>
+          <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Génère un composant React Card avec titre et bouton.">Composant React</button>
+          <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Crée une classe Java simple pour gérer une pile (stack).">Classe Java</button>
+          <button class="chip py-2.5 px-3 rounded-full bg-slate-900 border border-slate-700 text-slate-100 cursor-pointer" data-prompt="Écris du CSS pour une carte moderne (ombre, radius, hover).">CSS Carte</button>
+        </div>
+      </section>
+      <!-- ✅ BARRE DÉPLACÉE EN BAS (zone flèche) -->
+      <section class="promptDock mt-auto bg-slate-800/35 border border-slate-700 rounded-2xl p-4">
+        <div class="promptBar flex gap-3">
+          <input id="promptInput" type="text" placeholder="Décrivez votre idée ou thème..." class="flex-1 py-3.5 px-4 rounded-xl border border-slate-700 bg-slate-900 text-slate-100 outline-none" />
+          <button id="generateBtn" class="generateBtn py-3.5 px-4 rounded-xl border-none bg-gradient-to-r from-primary to-pink-400 text-slate-900 font-black cursor-pointer">Générer ✨</button>
+          <button id="micBtn" class="micBtn py-3.5 px-4 rounded-xl border border-slate-700 bg-slate-800 text-slate-100 cursor-pointer" title="Parler">🎤</button>
+        </div>
+        <div class="dockHint mt-3 text-xs text-slate-400">
+          La barre est volontairement en bas (comme ta flèche rouge).
+        </div>
+      </section>
+    </main>
+    <!-- COLONNE 3 : VIDE + petit titre seulement -->
+    <aside class="right bg-gradient-to-b from-slate-900 to-slate-950 border-l border-slate-700 p-4 flex flex-col gap-4">
+      <div class="rightHeader flex items-center gap-3 p-3 rounded-2xl border border-slate-700 bg-slate-900">
+        <div class="avatar w-11 h-11 rounded-2xl bg-slate-800 border border-slate-700 flex items-center justify-center text-xl">🤖</div>
+        <div>
+          <div class="rightTitle font-black">Générateur de Code IA</div>
+          <div class="rightSub text-slate-400 text-xs">Rosalinda (zone vide)</div>
+        </div>
+      </div>
+      <!-- ✅ vide (future grande image/vidéo/preview) -->
+      <div class="emptyStage flex-1 rounded-2xl border-2 border-dashed border-primary/25 bg-slate-900/35 flex items-center justify-center text-center p-5" id="stage">
+        <div class="emptyText text-slate-300/60">
+          Zone vide (future image / vidéo / preview)
+        </div>
+      </div>
+    </aside>
+  </div>
+  <script src="./script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,82 @@

+const promptInput = document.getElementById("promptInput");
+const generateBtn = document.getElementById("generateBtn");
+const micBtn = document.getElementById("micBtn");
+const codeOutput = document.getElementById("codeOutput");
+const copyBtn = document.getElementById("copyBtn");
+const clearBtn = document.getElementById("clearBtn");
+function fakeGenerate(prompt) {
+  // Remplace ça plus tard par ton API IA (OpenRouter, local, etc.)
+  const p = (prompt || "").trim();
+  if (!p) return "// Écris une demande dans la barre en bas, puis clique sur Générer ✨";
+  return `// ✅ Demande reçue : ${p}
+function main() {
+  console.log("Hello Rosalinda!");
+}
+// (Ici, tu brancheras ton IA pour générer du vrai code)
+main();`;
+}
+generateBtn.addEventListener("click", () => {
+  const prompt = promptInput.value;
+  codeOutput.textContent = fakeGenerate(prompt);
+});
+document.querySelectorAll(".chip").forEach((btn) => {
+  btn.addEventListener("click", () => {
+    const p = btn.dataset.prompt || "";
+    promptInput.value = p;
+    codeOutput.textContent = fakeGenerate(p);
+  });
+});
+copyBtn.addEventListener("click", async () => {
+  try {
+    await navigator.clipboard.writeText(codeOutput.textContent);
+    copyBtn.textContent = "✅ Copié";
+    setTimeout(() => (copyBtn.textContent = "📄 Copier"), 1200);
+  } catch {
+    alert("Impossible de copier automatiquement. Copie manuelle nécessaire.");
+  }
+});
+clearBtn.addEventListener("click", () => {
+  promptInput.value = "";
+  codeOutput.textContent = "// Le code généré apparaîtra ici…";
+});
+/* 🎤 Micro (Web Speech API) — si dispo */
+let recognition = null;
+if ("webkitSpeechRecognition" in window || "SpeechRecognition" in window) {
+  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
+  recognition = new SR();
+  recognition.lang = "fr-FR";
+  recognition.interimResults = true;
+  recognition.onresult = (event) => {
+    let transcript = "";
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      transcript += event.results[i][0].transcript;
+    }
+    promptInput.value = transcript.trim();
+  };
+  recognition.onerror = () => {
+    // silencieux (évite bugs visuels)
+  };
+}
+micBtn.addEventListener("click", () => {
+  if (!recognition) {
+    alert("Micro non disponible sur ce navigateur (Web Speech API).");
+    return;
+  }
+  try {
+    recognition.start();
+  } catch {
+    // évite erreur si déjà lancé
+  }
+});