Spaces:

Abmacode12
/

code-whisperer-haven

Running

App Files Files Community

Abmacode12 commited on Dec 18, 2025

Commit

fa7f49a

verified ·

1 Parent(s): 6f4b8e1

) 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>

✅ Là, tu as déjà Rosalinda qui parle + écoute + répond.

3) Étape suivante : brancher un “vrai cerveau” (LLM)

Pour que Rosalinda puisse vraiment générer du code, répondre comme une vraie IA, etc., tu as 2 chemins :

Option B — IA en local (pas de facturation, mais dépend de ton PC)

Installer un moteur LLM local (ex : Ollama)

Ton backend Node appelle http://localhost:11434/api/chat
Avantage : pas d’API payante. Inconvénient : dépend de la puissance.

Option C — IA via API (plus simple, souvent plus puissant)

Tu mets une clé API dans un .env

Ton backend Node appelle un modèle
Avantage : qualité + stabilité. Inconvénient : quotas.

Si tu me dis juste “local” ou “API”, je te donne le backend complet (Express + endpoint /api/chat) prêt à coller.

Files changed (3) hide show

index.html +7 -1
rosalinda.html +163 -0
style.css +5 -0

index.html CHANGED Viewed

@@ -51,7 +51,13 @@
                     </div>
                     <span>Bibliothèque</span>
                 </a>
-                <a href="#" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-700 mb-1">
                     <div class="p-2 bg-gray-600 rounded-lg">
                         <i data-feather="settings" class="w-4 h-4"></i>
                     </div>

                     </div>
                     <span>Bibliothèque</span>
                 </a>
+                <a href="rosalinda.html" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-700 mb-1">
+                    <div class="p-2 bg-gray-600 rounded-lg">
+                        <i data-feather="message-circle" class="w-4 h-4"></i>
+                    </div>
+                    <span>Rosalinda</span>
+                </a>
+<a href="#" class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-700 mb-1">
                     <div class="p-2 bg-gray-600 rounded-lg">
                         <i data-feather="settings" class="w-4 h-4"></i>
                     </div>

rosalinda.html ADDED Viewed

	@@ -0,0 +1,163 @@

+<!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="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <div class="container mx-auto p-4 max-w-4xl">
+        <div class="flex justify-between items-center mb-4">
+            <div class="px-4 py-2 bg-gray-800 rounded-full border border-gray-700">
+                <span class="font-bold">Rosalinda</span> — Espace Codage
+            </div>
+            <div class="px-4 py-2 bg-gray-800 rounded-full border border-gray-700" id="status">
+                Micro: prêt
+            </div>
+        </div>
+        <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
+            <div class="h-[60vh] overflow-y-auto p-4 flex flex-col gap-3" id="msgs"></div>
+            <div class="p-3 border-t border-gray-700 bg-gray-900/50 flex items-center gap-2">
+                <button id="micBtn" class="p-2 rounded-lg hover:bg-gray-700">
+                    <i data-feather="mic"></i>
+                </button>
+                <input id="inp" type="text" placeholder="Écris à Rosalinda…"
+                       class="flex-1 bg-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <button id="sendBtn" class="p-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white">
+                    <i data-feather="send"></i>
+                </button>
+                <button id="speakBtn" title="Lire la dernière réponse" class="p-2 rounded-lg hover:bg-gray-700">
+                    <i data-feather="volume-2"></i>
+                </button>
+            </div>
+        </div>
+        <div class="text-sm text-gray-400 mt-4">
+            ✅ Micro & voix = API du navigateur (Chrome/Edge).<br>
+            ⚠️ Cette version répond avec une "IA locale simple". Prochaine étape : brancher un vrai modèle IA.
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        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 msgDiv = document.createElement("div");
+            msgDiv.className = `p-3 rounded-lg max-w-[80%] ${who === "me" ? "ml-auto bg-blue-900/30" : "mr-auto bg-gray-700"}`;
+            msgDiv.textContent = text;
+            msgs.appendChild(msgDiv);
+            msgs.scrollTop = msgs.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 speak(text) {
+            if (!("speechSynthesis" in window)) {
+                alert("TTS non supporté sur ce navigateur.");
+                return;
+            }
+            const utterance = new SpeechSynthesisUtterance(text);
+            utterance.lang = "fr-FR";
+            window.speechSynthesis.cancel();
+            window.speechSynthesis.speak(utterance);
+        }
+        function handleSend(text) {
+            const inputText = (text ?? inp.value).trim();
+            if (!inputText) return;
+            addMsg(inputText, "me");
+            inp.value = "";
+            const reply = rosalindaBrain(inputText);
+            lastAIText = reply;
+            addMsg(reply, "ai");
+            speak(reply);
+        }
+        sendBtn.addEventListener("click", () => handleSend());
+        inp.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") handleSend();
+        });
+        speakBtn.addEventListener("click", () => lastAIText && speak(lastAIText));
+        let recognition = null;
+        let isListening = false;
+        function setupSpeechRecognition() {
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            if (!SpeechRecognition) return null;
+            const recognizer = new SpeechRecognition();
+            recognizer.lang = "fr-FR";
+            recognizer.interimResults = true;
+            recognizer.continuous = false;
+            return recognizer;
+        }
+        recognition = setupSpeechRecognition();
+        micBtn.addEventListener("click", async () => {
+            if (!recognition) {
+                alert("Reconnaissance vocale non disponible ici. Essaie Chrome/Edge.");
+                return;
+            }
+            if (isListening) return;
+            isListening = true;
+            statusEl.textContent = "Micro: écoute…";
+            let finalText = "";
+            recognition.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();
+            };
+            recognition.onerror = () => {
+                isListening = false;
+                statusEl.textContent = "Micro: erreur";
+            };
+            recognition.onend = () => {
+                isListening = false;
+                statusEl.textContent = "Micro: prêt";
+                if (inp.value.trim()) handleSend(inp.value);
+            };
+            try {
+                recognition.start();
+            } catch (e) {
+                isListening = false;
+                statusEl.textContent = "Micro: prêt";
+            }
+        });
+        // Initial message
+        addMsg("Bonjour 👋 Je suis Rosalinda. Clique sur le micro pour parler ou écris-moi.", "ai");
+    </script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -17,6 +17,11 @@
 ::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.2);
 }
 /* Animation for empty state icons */
 @keyframes pulse {

 ::-webkit-scrollbar-thumb:hover {
     background: rgba(255, 255, 255, 0.2);
 }
+/* Chat message styles */
+#msgs {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255,255,255,0.1) rgba(255,255,255,0.05);
+}
 /* Animation for empty state icons */
 @keyframes pulse {