Spaces:

Abmacode12
/

codecraft-haven

Running

App Files Files Community

Abmacode12 commited on Dec 18, 2025

Commit

6424ffd

verified ·

1 Parent(s): b26cf7f

<!doctype html>

Browse files

<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 (3) hide show

index.html +7 -1
rosalinda.html +161 -0
style.css +37 -1

index.html CHANGED Viewed

@@ -45,13 +45,19 @@
                 </a>
                 <h2 class="text-xs uppercase tracking-wider text-gray-500 px-3 py-2 mt-4">Raccourcis</h2>
                 <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>

                 </a>
                 <h2 class="text-xs uppercase tracking-wider text-gray-500 px-3 py-2 mt-4">Raccourcis</h2>
+                <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>

rosalinda.html ADDED Viewed

	@@ -0,0 +1,161 @@

+<!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>
+</head>
+<body class="bg-gray-900 text-gray-100">
+    <div class="wrap max-w-4xl mx-auto p-4">
+        <div class="top flex gap-2 items-center justify-between mb-4">
+            <div class="badge px-3 py-2 rounded-full border border-gray-700 bg-gray-800">
+                <b>Rosalinda</b> — Espace Codage
+            </div>
+            <div class="badge px-3 py-2 rounded-full border border-gray-700 bg-gray-800" id="status">
+                Micro: prêt
+            </div>
+        </div>
+        <div class="chat border border-gray-700 rounded-xl overflow-hidden bg-gray-800">
+            <div class="msgs h-[60vh] overflow-auto p-4 flex flex-col gap-3" id="msgs"></div>
+            <div class="row flex gap-2 items-center p-3 border-t border-gray-700">
+                <button id="micBtn" class="p-2 rounded-lg bg-gray-750 hover:bg-gray-700 border border-gray-700">
+                    <i data-feather="mic" class="w-5 h-5"></i>
+                </button>
+                <input id="inp" placeholder="Écris à Rosalinda…"
+                       class="flex-1 bg-gray-750 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-1 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" class="w-5 h-5"></i>
+                </button>
+                <button id="speakBtn" title="Lire la dernière réponse"
+                        class="p-2 rounded-lg bg-gray-750 hover:bg-gray-700 border border-gray-700">
+                    <i data-feather="volume-2" class="w-5 h-5"></i>
+                </button>
+            </div>
+        </div>
+        <div class="small text-gray-400 text-sm mt-4 leading-relaxed">
+            ✅ 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>
+        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 div = document.createElement("div");
+            div.className = `msg max-w-[85%] p-3 rounded-xl border ${who === "me" ?
+                "ml-auto bg-blue-900/10 border-blue-800/50" :
+                "bg-gray-700/50 border-gray-700"}`;
+            div.textContent = text;
+            msgs.appendChild(div);
+            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 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);
+        }
+        sendBtn.onclick = () => handleSend();
+        inp.addEventListener("keydown", (e) => {
+            if (e.key === "Enter") handleSend();
+        });
+        speakBtn.onclick = () => lastAIText && speak(lastAIText);
+        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";
+            }
+        };
+        addMsg("Bonjour 👋 Je suis Rosalinda. Clique 🎤 pour parler ou écris-moi.", "ai");
+    </script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -26,13 +26,49 @@
 button, a, input {
     transition: all 0.15s ease;
 }
 /* Focus styles */
 input:focus, button:focus {
     outline: none;
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
 }
 /* Animation for empty state */
 @keyframes pulse {
     0%, 100% {

 button, a, input {
     transition: all 0.15s ease;
 }
 /* Focus styles */
 input:focus, button:focus {
     outline: none;
     box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
 }
+/* Rosalinda chat styles */
+.wrap {
+    max-width: 980px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+.chat {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 1rem;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.03);
+}
+.msgs {
+    height: 60vh;
+    overflow: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+.msg {
+    max-width: 85%;
+    padding: 0.75rem 1rem;
+    border-radius: 0.875rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+.badge {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.04);
+    font-size: 0.875rem;
+}
 /* Animation for empty state */
 @keyframes pulse {
     0%, 100% {