Spaces:

Abmacode12
/

codepulse-coding-space-hub

Running

App Files Files Community

Abmacode12 commited on Dec 18, 2025

Commit

fff5383

verified ·

1 Parent(s): 7caded9

1) Ce qui est possible “illimité”

Browse files

Micro (STT) + Voix (TTS) : possible “gratuit” via le navigateur (Chrome/Edge) ✅

IA qui répond vraiment intelligemment : il faut un modèle (local sur ton PC, ou via une API). Là, ce n’est jamais réellement illimité, il y aura soit une limite matérielle (local), soit des quotas (API). Je te propose les 2 options.

2) Option A (simple, rapide) : Rosalinda fonctionne en local avec “IA de base” + micro + voix

👉 Tu auras :

Tu parles → Rosalinda écrit ce qu’elle a entendu

Rosalinda répond en texte

Rosalinda lit sa réponse à voix haute

Crée ce fichier : rosalinda.html

(Ouvre-le dans Chrome/Edge)

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Rosalinda — Espace Codage</title>
<style>
body{margin:0;font-family:system-ui;background:#0b0f16;color:#fff}
.wrap{max-width:980px;margin:0 auto;padding:18px}
.top{display:flex;gap:10px;align-items:center;justify-content:space-between}
.badge{padding:8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04)}
.chat{margin-top:14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.03)}
.msgs{height:55vh;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:85%;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10)}
.me{margin-left:auto;background:rgba(93,173,255,.10)}
.ai{background:rgba(255,255,255,.04)}
.row{display:flex;gap:10px;align-items:center;padding:12px;border-top:1px solid rgba(255,255,255,.10)}
input{flex:1;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px;color:#fff;outline:none}
button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;border-radius:14px;padding:10px 12px;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
.small{color:rgba(255,255,255,.65);font-size:12px;margin-top:10px;line-height:1.4}
</style>
</head>
<body>
<div class="wrap">
<div class="top">
<div class="badge"><b>Rosalinda</b> — Espace Codage</div>
<div class="badge" id="status">Micro: prêt</div>
</div>

<div class="chat">
<div class="msgs" id="msgs"></div>
<div class="row">
<button id="micBtn">🎤</button>
<input id="inp" placeholder="Écris à Rosalinda…" />
<button id="sendBtn">➤</button>
<button id="speakBtn" title="Lire la dernière réponse">🔊</button>
</div>
</div>

<div class="small">
✅ Micro & voix = API du navigateur (Chrome/Edge).<br>
⚠️ Cette version répond avec une “IA locale simple” (règles). Étape suivante : brancher un vrai modèle IA (local ou API).
</div>
</div>

<script>
const msgs = document.getElementById("msgs");
const inp = document.getElementById("inp");
const sendBtn = document.getElementById("sendBtn");
const micBtn = document.getElementById("micBtn");
const speakBtn = document.getElementById("speakBtn");
const statusEl = document.getElementById("status");

let lastAIText = "";

function addMsg(text, who){
const div = document.createElement("div");
div.className = "msg " + (who === "me" ? "me" : "ai");
div.textContent = text;
msgs.appendChild(div);
msgs.scrollTop = msgs.scrollHeight;
}

// IA simple (placeholder) : on remplace ça par un vrai modèle à l'étape suivante
function rosalindaBrain(userText){
const t = userText.toLowerCase();
if (t.includes("bonjour") || t.includes("salut")) return "Bonjour 😄 Je suis Rosalinda. Dis-moi ce que tu veux créer : site, thème, image, vidéo, plugin…";
if (t.includes("theme") || t.includes("thème")) return "Ok ✅ Dis-moi : (1) style (moderne, luxe, minimal, flashy), (2) couleurs, (3) 3 colonnes ou non, (4) Shopify/WooCommerce/autre.";
if (t.includes("image")) return "Je peux préparer une demande d’image. Dis-moi : sujet + style + format (1:1, 16:9, 9:16) + texte à afficher.";
if (t.includes("vidéo") || t.includes("video")) return "Je peux préparer une demande vidéo. Dis-moi : durée, style (réaliste/3D), texte à l’écran, musique oui/non.";
if (t.includes("micro")) return "Pour le micro : clique 🎤, autorise le micro dans ton navigateur, puis parle. Je transcris et je réponds.";
return "Compris ✅ Donne-moi plus de détails (objectif + plateforme + style), et je te génère une réponse claire.";
}

function speak(text){
if (!("speechSynthesis" in window)) {
alert("TTS non supporté sur ce navigateur.");
return;
}
const u = new SpeechSynthesisUtterance(text);
u.lang = "fr-FR";
window.speechSynthesis.cancel();
window.speechSynthesis.speak(u);
}

function handleSend(text){
const v = (text ?? inp.value).trim();
if (!v) return;
addMsg(v, "me");
inp.value = "";
const reply = rosalindaBrain(v);
lastAIText = reply;
addMsg(reply, "ai");
speak(reply); // réponse vocale automatique
}

sendBtn.onclick = () => handleSend();
inp.addEventListener("keydown", (e) => {
if (e.key === "Enter") handleSend();
});

speakBtn.onclick = () => lastAIText && speak(lastAIText);

// Micro (STT)
let rec = null;
let listening = false;

function setupSTT(){
const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SR) return null;
const r = new SR();
r.lang = "fr-FR";
r.interimResults = true;
r.continuous = false;
return r;
}

rec = setupSTT();

micBtn.onclick = async () => {
if (!rec){
alert("Reconnaissance vocale non disponible ici. Essaie Chrome/Edge.");
return;
}
if (listening) return;

listening = true;
statusEl.textContent = "Micro: écoute…";
let finalText = "";

rec.onresult = (e) => {
let transcript = "";
for (let i = e.resultIndex; i < e.results.length; i++){
transcript += e.results[i][0].transcript;
if (e.results[i].isFinal) finalText += e.results[i][0].transcript + " ";
}
inp.value = (finalText || transcript).trim();
};

rec.onerror = () => {
listening = false;
statusEl.textContent = "Micro: erreur";
};

rec.onend = () => {
listening = false;
statusEl.textContent = "Micro: prêt";
if (inp.value.trim()) handleSend(inp.value);
};

try { rec.start(); } catch (e) {
listening = false;
statusEl.textContent = "Micro: prêt";
}
};

// Message de démarrage
addMsg("Bonjour 👋 Je suis Rosalinda. Clique 🎤 pour parler ou écris-moi.", "ai");
</script>
</body>
</html>

Files changed (4) hide show

components/navbar.js +7 -2
index.html +1 -0
rosalinda.html +254 -0
style.css +7 -1

components/navbar.js CHANGED Viewed

@@ -103,8 +103,13 @@ class CustomNavbar extends HTMLElement {
         </div>
         <div class="nav-label">Espace Codage - Projet 2</div>
       </div>
       <div class="nav-section">Raccourcis</div>
       <div class="nav-item">
         <div class="nav-icon">
           <i data-feather="book"></i>
@@ -117,7 +122,7 @@ class CustomNavbar extends HTMLElement {
         </div>
         <div class="nav-label">Paramètres</div>
       </div>
-    `;
     // Replace feather icons
     if (typeof feather !== 'undefined') {

         </div>
         <div class="nav-label">Espace Codage - Projet 2</div>
       </div>
       <div class="nav-section">Raccourcis</div>
+      <div class="nav-item">
+        <div class="nav-icon">
+          <i data-feather="message-circle"></i>
+        </div>
+        <a href="/rosalinda.html" class="nav-label">Rosalinda IA</a>
+      </div>
       <div class="nav-item">
         <div class="nav-icon">
           <i data-feather="book"></i>
         </div>
         <div class="nav-label">Paramètres</div>
       </div>
+`;
     // Replace feather icons
     if (typeof feather !== 'undefined') {

index.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Espace Codage</title>
     <link rel="stylesheet" href="style.css">
     <script src="script.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Espace Codage</title>
     <link rel="stylesheet" href="style.css">
+    <script src="components/navbar.js"></script>
     <script src="script.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

rosalinda.html ADDED Viewed

	@@ -0,0 +1,254 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Rosalinda — Espace Codage</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js"></script>
+  <style>
+    .rosalinda-container {
+      max-width: 980px;
+      margin: 0 auto;
+      padding: 18px;
+      height: calc(100vh - 80px);
+      display: flex;
+      flex-direction: column;
+    }
+    .rosalinda-top {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 14px;
+    }
+    .rosalinda-badge {
+      padding: 8px 12px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: var(--bg-panel);
+      font-size: 14px;
+    }
+    .rosalinda-chat {
+      flex: 1;
+      border: 1px solid var(--border);
+      border-radius: 16px;
+      overflow: hidden;
+      background: var(--bg-panel);
+      display: flex;
+      flex-direction: column;
+    }
+    .rosalinda-msgs {
+      flex: 1;
+      overflow: auto;
+      padding: 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .rosalinda-msg {
+      max-width: 85%;
+      padding: 10px 12px;
+      border-radius: 14px;
+      border: 1px solid rgba(255,255,255,.10);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .rosalinda-me {
+      margin-left: auto;
+      background: rgba(93,173,255,.10);
+    }
+    .rosalinda-ai {
+      background: rgba(255,255,255,.04);
+    }
+    .rosalinda-row {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      padding: 12px;
+      border-top: 1px solid var(--border);
+      background: rgba(0,0,0,.2);
+    }
+    .rosalinda-input {
+      flex: 1;
+      background: transparent;
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 12px;
+      color: var(--text-light);
+      outline: none;
+    }
+    .rosalinda-btn {
+      width: 42px;
+      height: 42px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(255,255,255,.05);
+      border: 1px solid var(--border);
+      color: var(--text-light);
+      border-radius: 14px;
+      cursor: pointer;
+    }
+    .rosalinda-btn:hover {
+      background: rgba(255,255,255,.08);
+    }
+    .rosalinda-btn:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+    .rosalinda-send {
+      background: var(--primary);
+    }
+    .rosalinda-send:hover:not(:disabled) {
+      background: var(--primary-hover);
+    }
+    .rosalinda-info {
+      color: var(--text-muted);
+      font-size: 12px;
+      margin-top: 10px;
+      line-height: 1.5;
+    }
+  </style>
+</head>
+<body class="bg-gray-900 text-gray-100">
+  <custom-navbar></custom-navbar>
+  <div class="rosalinda-container">
+    <div class="rosalinda-top">
+      <div class="rosalinda-badge"><b>Rosalinda</b> — Espace Codage</div>
+      <div class="rosalinda-badge" id="rosalindaStatus">Micro: prêt</div>
+    </div>
+    <div class="rosalinda-chat">
+      <div class="rosalinda-msgs" id="rosalindaMsgs"></div>
+      <div class="rosalinda-row">
+        <button class="rosalinda-btn" id="rosalindaMicBtn">🎤</button>
+        <input class="rosalinda-input" id="rosalindaInput" placeholder="Écris à Rosalinda…">
+        <button class="rosalinda-btn rosalinda-send" id="rosalindaSendBtn">➤</button>
+        <button class="rosalinda-btn" id="rosalindaSpeakBtn" title="Lire la dernière réponse">🔊</button>
+      </div>
+    </div>
+    <div class="rosalinda-info">
+      ✅ Micro & voix = API du navigateur (Chrome/Edge).<br>
+      ⚠️ Cette version répond avec une "IA locale simple" (règles). Étape suivante : brancher un vrai modèle IA (local ou API).
+    </div>
+  </div>
+  <script>
+    const rosalindaMsgs = document.getElementById("rosalindaMsgs");
+    const rosalindaInput = document.getElementById("rosalindaInput");
+    const rosalindaSendBtn = document.getElementById("rosalindaSendBtn");
+    const rosalindaMicBtn = document.getElementById("rosalindaMicBtn");
+    const rosalindaSpeakBtn = document.getElementById("rosalindaSpeakBtn");
+    const rosalindaStatus = document.getElementById("rosalindaStatus");
+    let lastAIText = "";
+    function addRosalindaMsg(text, who) {
+      const div = document.createElement("div");
+      div.className = `rosalinda-msg ${who === "me" ? "rosalinda-me" : "rosalinda-ai"}`;
+      div.textContent = text;
+      rosalindaMsgs.appendChild(div);
+      rosalindaMsgs.scrollTop = rosalindaMsgs.scrollHeight;
+    }
+    function rosalindaBrain(userText) {
+      const t = userText.toLowerCase();
+      if (t.includes("bonjour") || t.includes("salut")) return "Bonjour 😄 Je suis Rosalinda. Dis-moi ce que tu veux créer : site, thème, image, vidéo, plugin…";
+      if (t.includes("theme") || t.includes("thème")) return "Ok ✅ Dis-moi : (1) style (moderne, luxe, minimal, flashy), (2) couleurs, (3) 3 colonnes ou non, (4) Shopify/WooCommerce/autre.";
+      if (t.includes("image")) return "Je peux préparer une demande d'image. Dis-moi : sujet + style + format (1:1, 16:9, 9:16) + texte à afficher.";
+      if (t.includes("vidéo") || t.includes("video")) return "Je peux préparer une demande vidéo. Dis-moi : durée, style (réaliste/3D), texte à l'écran, musique oui/non.";
+      if (t.includes("micro")) return "Pour le micro : clique 🎤, autorise le micro dans ton navigateur, puis parle. Je transcris et je réponds.";
+      return "Compris ✅ Donne-moi plus de détails (objectif + plateforme + style), et je te génère une réponse claire.";
+    }
+    function rosalindaSpeak(text) {
+      if (!("speechSynthesis" in window)) {
+        alert("Synthèse vocale non supportée sur ce navigateur.");
+        return;
+      }
+      const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = "fr-FR";
+      window.speechSynthesis.cancel();
+      window.speechSynthesis.speak(utterance);
+    }
+    function handleRosalindaSend(text) {
+      const value = (text ?? rosalindaInput.value).trim();
+      if (!value) return;
+      addRosalindaMsg(value, "me");
+      rosalindaInput.value = "";
+      const reply = rosalindaBrain(value);
+      lastAIText = reply;
+      addRosalindaMsg(reply, "ai");
+      rosalindaSpeak(reply);
+    }
+    rosalindaSendBtn.onclick = () => handleRosalindaSend();
+    rosalindaInput.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") handleRosalindaSend();
+    });
+    rosalindaSpeakBtn.onclick = () => lastAIText && rosalindaSpeak(lastAIText);
+    // Micro (STT)
+    let rosalindaRec = null;
+    let rosalindaListening = false;
+    function setupRosalindaSTT() {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (!SpeechRecognition) return null;
+      const recognition = new SpeechRecognition();
+      recognition.lang = "fr-FR";
+      recognition.interimResults = true;
+      recognition.continuous = false;
+      return recognition;
+    }
+    rosalindaRec = setupRosalindaSTT();
+    rosalindaMicBtn.onclick = async () => {
+      if (!rosalindaRec) {
+        alert("Reconnaissance vocale non disponible ici. Essaie Chrome/Edge.");
+        return;
+      }
+      if (rosalindaListening) return;
+      rosalindaListening = true;
+      rosalindaStatus.textContent = "Micro: écoute…";
+      let finalText = "";
+      rosalindaRec.onresult = (e) => {
+        let transcript = "";
+        for (let i = e.resultIndex; i < e.results.length; i++) {
+          transcript += e.results[i][0].transcript;
+          if (e.results[i].isFinal) finalText += e.results[i][0].transcript + " ";
+        }
+        rosalindaInput.value = (finalText || transcript).trim();
+      };
+      rosalindaRec.onerror = () => {
+        rosalindaListening = false;
+        rosalindaStatus.textContent = "Micro: erreur";
+      };
+      rosalindaRec.onend = () => {
+        rosalindaListening = false;
+        rosalindaStatus.textContent = "Micro: prêt";
+        if (rosalindaInput.value.trim()) handleRosalindaSend(rosalindaInput.value);
+      };
+      try { rosalindaRec.start(); } catch (e) {
+        rosalindaListening = false;
+        rosalindaStatus.textContent = "Micro: prêt";
+      }
+    };
+    // Message de démarrage
+    addRosalindaMsg("Bonjour 👋 Je suis Rosalinda. Clique 🎤 pour parler ou écris-moi.", "ai");
+  </script>
+  <script src="components/navbar.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -160,14 +160,20 @@ body {
     border: 1px solid var(--border);
     color: var(--text-muted);
 }
 .nav-label {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 .sidebar-footer {
     display: flex;
     justify-content: space-between;

     border: 1px solid var(--border);
     color: var(--text-muted);
 }
 .nav-label {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: var(--text-light);
 }
+.nav-label a {
+    color: inherit;
+    text-decoration: none;
+    display: block;
+    width: 100%;
+}
 .sidebar-footer {
     display: flex;
     justify-content: space-between;