📝¿Qué es Kahoot!

📘 TUTORIALES

ASISTENTE ESCOLAR IA

:root { –fondo: #f0f6ff; –texto: #1a1a1a; –fondo-claro: #ffffff; –sombra: rgba(0, 0, 0, 0.08); –azul: #0d6efd; –azul-claro: #e0f0ff; –respuesta-bg: #eaf4ff; } body { font-family: ‘Segoe UI’, sans-serif; background: var(–fondo); color: var(–texto); display: flex; flex-direction: column; align-items: center; padding: 2rem; margin: 0; } .contenedor { background: var(–fondo-claro); padding: 2rem; border-radius: 16px; box-shadow: 0 6px 24px var(–sombra); max-width: 720px; width: 100%; border: 1px solid #d0e2ff; } h1 { margin-top: 0; font-size: 1.8rem; display: flex; align-items: center; gap: 0.75rem; color: var(–azul); } #logo { height: 40px; vertical-align: middle; } textarea, select { width: 100%; padding: 1rem; border-radius: 10px; border: 1px solid #c6dafc; font-size: 1rem; margin-top: 1rem; background: #f9fcff; color: var(–texto); transition: border-color 0.3s ease; } textarea:focus, select:focus { border-color: var(–azul); outline: none; background: white; } button { background-color: var(–azul); color: white; padding: 0.75rem 1.5rem; font-size: 1rem; border: none; border-radius: 8px; margin: 1rem 0.5rem 0 0; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s; } button:hover { background-color: #0a58ca; transform: scale(1.03); } #respuesta { margin-top: 1.5rem; background: var(–respuesta-bg); border-left: 4px solid var(–azul); padding: 1rem; border-radius: 10px; font-size: 1rem; white-space: pre-wrap; min-height: 80px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.03); } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #c6dafc; border-top: 2px solid var(–azul); border-radius: 50%; animation: spin 1s linear infinite; margin-left: 0.5rem; } @keyframes spin { to { transform: rotate(360deg); } } .botones { display: flex; justify-content: flex-start; flex-wrap: wrap; } label { margin-top: 1rem; display: block; color: #1a1a1a; font-weight: 600; } async function consultarLlama() { const pregunta = document.getElementById(“pregunta”).value.trim(); const tema = document.getElementById(“tema”).value; const respuesta = document.getElementById(“respuesta”); if (!pregunta) { respuesta.innerHTML = “Por favor escribí una pregunta.“; return; } respuesta.innerHTML = “Pensando… “; let promptFinal; if (tema === “libre”) { promptFinal = pregunta; } else { promptFinal = `Respondé únicamente sobre el siguiente tema: “${tema}”. No respondas sobre otros temas. Pregunta del usuario: “${pregunta}”`; } try { const response = await fetch(“https://profe.sytes.net/completion”, { method: “POST”, headers: { “Content-Type”: “application/json” }, body: JSON.stringify({ prompt: promptFinal, temperature: 0.7, max_tokens: 250, stream: true }) }); if (!response.ok || !response.body) { respuesta.innerText = “Error: ” + response.statusText; return; } const reader = response.body.getReader(); const decoder = new TextDecoder(“utf-8”); let text = “”; let partial = “”; respuesta.innerText = “”; while (true) { const { done, value } = await reader.read(); if (done) break; partial += decoder.decode(value, { stream: true }); const lines = partial.split(“n”); for (let i = 0; i < lines.length – 1; i++) { if (lines[i].startsWith("data: ")) { try { const json = JSON.parse(lines[i].substring(6)); if (json.content) { text += json.content; respuesta.innerText = text; } } catch (e) {} } } partial = lines[lines.length – 1]; } } catch (error) { respuesta.innerText = "Error: " + error.message; } } function limpiarCampos() { document.getElementById("pregunta").value = ""; document.getElementById("respuesta").innerHTML = "Esperando tu consulta…“; }