💬 Introducción
En este tutorial vas a aprender a usar el teclado de tu netbook para escribir, moverte y trabajar de forma más rápida en Google Docs .
💡 Este es el primer paso para escribir con confianza y aprovechar al máximo tu computadora en la escuela.
📘 TUTORIALES
ASISTENTE ESCOLAR IA
🧠 Asistente Escolar
: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;
}
Seleccioná un tema:
🔓 Tema libre
⌨️ Atajos del teclado
📄 Google Docs
🧱 Padlet
🎨 Canva
🧰 Herramientas TIC para docentes
PREGUNTAR
LIMPIAR
Esperando tu consulta…
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… “;
}
Asistente Escolar