Built-in AI

<!doctype html>
<meta charset="utf-8">
<title>IA integrada · ejemplo mínimo</title>
<!-- Detecta el idioma, traduce, resume y pregunta al modelo del navegador. Chrome 138+ (Prompt API: 148+), escritorio. -->
<textarea id="text" rows="4" cols="60">La Casa Botines es un edificio modernista de Antoni Gaudí en León, terminado en 1892.</textarea>
<p>
  <button id="translate">Detectar y traducir al inglés</button>
  <button id="summarize">Resumir</button>
  <button id="prompt">Preguntar</button>
  <progress id="progress" max="1" value="0"></progress>
</p>
<pre id="out"></pre>
<script type="module">
const $ = (s) => document.querySelector(s);
const out = $('#out');
// Las descargas del modelo informan del progreso (0..1)
const monitor = (m) => m.addEventListener('downloadprogress', (e) => ($('#progress').value = e.loaded));

// create() necesita un gesto del usuario si el modelo aún no está descargado: llámalo desde un clic.
$('#translate').onclick = async () => {
  if (!('LanguageDetector' in self && 'Translator' in self)) return (out.textContent = 'Translator / LanguageDetector no disponibles.');
  const detector = await LanguageDetector.create({ monitor });
  const [{ detectedLanguage: sourceLanguage, confidence }] = await detector.detect($('#text').value);
  const options = { sourceLanguage, targetLanguage: 'en' };
  if ((await Translator.availability(options)) === 'unavailable') return (out.textContent = `No se puede traducir desde «${sourceLanguage}».`);
  const translator = await Translator.create({ ...options, monitor });
  out.textContent = `${sourceLanguage} (${Math.round(confidence * 100)} %) → en\n${await translator.translate($('#text').value)}`;
};

$('#summarize').onclick = async () => {
  if (!('Summarizer' in self)) return (out.textContent = 'Summarizer no disponible.');
  const options = { type: 'tldr', format: 'plain-text', length: 'short', expectedInputLanguages: ['es'], outputLanguage: 'es' };
  if ((await Summarizer.availability(options)) === 'unavailable') return (out.textContent = 'El modelo no está disponible en este equipo.');
  const summarizer = await Summarizer.create({ ...options, monitor });
  out.textContent = '';
  for await (const chunk of summarizer.summarizeStreaming($('#text').value)) out.textContent += chunk;
};

$('#prompt').onclick = async () => {
  if (!('LanguageModel' in self)) return (out.textContent = 'Prompt API (LanguageModel) no disponible.');
  const io = { expectedInputs: [{ type: 'text', languages: ['es'] }], expectedOutputs: [{ type: 'text', languages: ['es'] }] };
  if ((await LanguageModel.availability(io)) === 'unavailable') return (out.textContent = 'El modelo no está disponible en este equipo.');
  const session = await LanguageModel.create({
    ...io, monitor,
    initialPrompts: [{ role: 'system', content: 'Responde en español, en una sola frase.' }],
  });
  out.textContent = '';
  for await (const chunk of session.promptStreaming(`¿Quién diseñó este edificio? ${$('#text').value}`)) out.textContent += chunk;
  // Salida estructurada: await session.prompt(texto, { responseConstraint: { type: 'boolean' } })
};
</script>