{ const LETTERS = "abcdefghijklmnopqrstuvwxyzéèêàùâîôûç "; function randomLetter() { return LETTERS[Math.floor(Math.random() * LETTERS.length)]; } function randomWord() { return data.vocabulary[Math.floor(Math.random() * data.vocabulary.length)]; } function randomToken() { const id = Math.floor(Math.random() * 50257); try { const decoded = gptTokenizer.decode([id]); return decoded.length > 0 ? decoded : "·"; } catch { return "·"; } } // --- State --- let mode = "words"; let generated = []; let running = false; const SEQ_LENGTH = 15; async function generateSequence() { if (running) { running = false; return; } running = true; updateStopButton(); for (let i = 0; i < SEQ_LENGTH && running; i++) { generate(); await new Promise(r => setTimeout(r, 150)); } running = false; updateStopButton(); } function updateStopButton() { const btn = container.querySelector("#gen-seq"); if (btn) { btn.textContent = running ? "⏹ Arrêter" : "Suite aléatoire →"; btn.style.opacity = running ? "0.7" : "1"; } } // --- DOM --- const container = document.createElement("div"); container.style.cssText = "font-family: sans-serif; max-width: 620px; padding: 1.5rem 0;"; container.innerHTML = `

`; // --- Logic --- function escapeHtml(s) { return s.replace(/&/g,"&").replace(//g,">"); } function renderOutput() { const textareaEl = container.querySelector("#gen-input"); const outputEl = container.querySelector("#gen-output"); const countEl = container.querySelector("#gen-count"); const sep = mode === "letters" ? "" : " "; const parts = generated.map((unit, i) => { const isLast = i === generated.length - 1; const style = isLast ? "background:rgba(255,180,0,0.3); border-radius:4px; padding:2px 6px; font-size:1.1em; font-weight:500;" : ""; return `${escapeHtml(unit)}`; }); outputEl.innerHTML = escapeHtml(textareaEl.value) + (generated.length ? sep + parts.join(sep) : ""); countEl.textContent = generated.length > 0 ? `${generated.length} ${mode === "letters" ? "lettre(s)" : mode === "words" ? "mot(s)" : "token(s)"} générés` : ""; } function generate() { let unit; if (mode === "letters") unit = randomLetter(); else if (mode === "words") unit = randomWord(); else unit = randomToken(); generated.push(unit); container.querySelector("#gen-reset").style.opacity = "1"; container.querySelector("#gen-reset").style.borderColor = "#bbb"; container.querySelector("#gen-reset").style.color = "inherit"; renderOutput(); } function reset() { generated = []; running = false; container.querySelector("#gen-reset").style.opacity = "0.35"; container.querySelector("#gen-reset").style.borderColor = "#ddd"; container.querySelector("#gen-reset").style.color = "gray"; updateStopButton(); renderOutput(); } // --- Events --- const textareaEl = container.querySelector("#gen-input"); const presetEl = container.querySelector("#gen-preset"); const modeEl = container.querySelector("#gen-mode"); // Init textarea with first preset textareaEl.value = data.presets[0].text; container.querySelector("#gen-reset").style.opacity = "0.35"; presetEl.addEventListener("change", () => { const val = presetEl.value; if (val !== "custom") { textareaEl.value = data.presets[parseInt(val)].text; textareaEl.style.color = "inherit"; } generated = []; renderOutput(); }); textareaEl.addEventListener("input", () => { presetEl.value = "custom"; generated = []; renderOutput(); }); modeEl.addEventListener("change", () => { mode = modeEl.value; generated = []; renderOutput(); }); container.querySelector("#gen-one").addEventListener("click", generate); container.querySelector("#gen-seq").addEventListener("click", generateSequence); container.querySelector("#gen-reset").addEventListener("click", reset); renderOutput(); return container; }