Traducción
Para generar la traducción de un idioma a otro, podemos utilizar la clase Translator. Primero crearemos un objeto de la clase llamando al método estático create y pasándole el idioma del texto original y también al cual queremos traducir. Una vez creado el objeto, llamamos al método translate y le pasamos el texto original. Nos devolverá una promesa con el texto traducido, o un error si algo falla.
Es posible que si queremos utilizar esta funcionalidad para probarla nada más carga la página, nos aparezca un error al crear el objeto indicando que requiere interacción de usuario. Para asegurarnos, lo mejor es vincular esta funcionalidad a una llamada que se genere a partir de un evento o similar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="index.js"></script>
</head>
<body>
<p><textarea type="text" id="input" rows="5" cols="50"></textarea></p>
<p>
<select id="lang">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="de">German</option>
</select>
<button id="button">Translate</button></p>
<p><textarea type="text" id="output" rows="5" cols="50" readonly></textarea></p>
</body>
</html>Traducir en streaming
Es posible que el texto original sea largo y tarde en procesarlo entero, generando una espera que el usuario puede interpretar como que algo está fallando. Por ello, se puede hacer que el traductor nos vaya devolviendo trozos del texto traducido y podamos ir añadiéndolos a la interfaz poco a poco, para que el usuario entienda que la traducción está avanzando. Para esto tenemos el método translateStreaming.
//...
async function translate(text, input, output) {
// Creamos objeto Translator
return translator.translateStreaming(text);
}
button.addEventListener("click", async () => {
button.disabled = true;
try {
//...
const stream = await translate(text, inputLang, outputLang);
output.value = "";
for await (const chunk of stream) {
console.log(chunk);
output.value += chunk;
}
} catch (error) {
output.value = error.toString();
} finally {
button.disabled = false;
}
});En el momento de escribir esto, al menos en el navegador Chrome, esta funcionalidad no funciona como debería, devolviendo un único trozo con todo el texto traducido.