Carrera Creador IA · Nivel 4 de 5 · 9-16 añosPRO

IA en tu app

Tu web le pregunta a una IA y muestra la respuesta.

Tu Carrera · 0 de 5 nivelesse hacen en orden

Paso 1 de 6

Tu web va a USAR una IA de verdad

Hasta ahora tu web hacía cosas sola. Hoy va a pedirle ayuda a una IA: le manda una instrucción (un prompt) y la IA responde. Eso se llama llamar a una API.

👉 Lee el código. Lo de abajo dentro de `<script>` ya está hecho: tu web le habla a la IA con `fetch('/api/habla-con-ia')`. Dale Siguiente.

tu código · index.html

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title></title>
<style>
  body{font-family:system-ui,sans-serif;background:#0b1020;color:#e8e8f0;min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;padding:24px}
  .app{max-width:460px;width:100%;text-align:center}
  h1{font-size:30px;margin:.2em 0;color:#8b5cf6}
  input{width:100%;box-sizing:border-box;padding:12px;border-radius:10px;border:1px solid #444;background:#161a2e;color:#fff;font-size:15px}
  button{margin-top:10px;padding:12px 22px;border:0;border-radius:999px;background:#4dffd6;color:#07080f;font-weight:bold;font-size:15px;cursor:pointer}
  #resp{margin-top:18px;padding:16px;border-radius:12px;background:#161a2e;min-height:48px;text-align:left;line-height:1.5;white-space:pre-wrap}
</style>
</head>
<body>
<div class="app">
  <h1></h1>
  <p>Escribe abajo y dale al botón.</p>
  <input id="caja" placeholder="">
  <br>
  <button id="btn"></button>
  <div id="resp">Aquí va a salir lo que responda la IA. 👇</div>
</div>
<script>
// === Esto ya está hecho por ti: habla con la IA de la Academia ===
var caja = document.getElementById('caja');
var resp = document.getElementById('resp');
// 👇 ESTA es la instrucción (prompt) que tu app le manda a la IA.
// La IA recibe: tu prompt + un espacio + lo que el usuario escribió.
var miPrompt = `Eres un robot amistoso. Responde corto, divertido y para niños a esto:`;

document.getElementById('btn').onclick = async function () {
  var pregunta = caja.value;
  resp.textContent = 'Pensando... 🤔';
  try {
    var r = await fetch('/api/habla-con-ia', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt: miPrompt + ' ' + pregunta })
    });
    var d = await r.json();
    resp.textContent = d.ok ? d.texto : (d.mensaje || 'La IA está descansando.');
  } catch (e) {
    resp.textContent = 'No me pude conectar con la IA.';
  }
};
</script>
</body>
</html>

tu web en vivo · 14 etiquetas

← Nivel 3 Nivel 5: Tu app final (capstone) →