Ted Hisokawa
14 de julio de 2024 05:20
Aprenda a crear un servicio de traducción de idiomas en tiempo real utilizando AssemblyAI y DeepL en JavaScript. Guía paso a paso para desarrolladores.
En un tutorial completo, AssemblyAI ofrece información sobre cómo crear un servicio de traducción de idiomas en tiempo real utilizando JavaScript. El tutorial aprovecha AssemblyAI para la transcripción de voz a texto en tiempo real y DeepL para traducir el texto transcrito a diferentes idiomas.
Introducción a la traducción en tiempo real
Las traducciones juegan un papel vital en la comunicación y la accesibilidad entre diferentes idiomas. Por ejemplo, un turista en un país extranjero puede tener dificultades para comunicarse si no comprende el idioma local. Transmisión de voz a texto El servicio puede transcribir voz en tiempo real, que luego se puede traducir usando DeepL, lo que hace que la comunicación sea fluida.
Implementación del proyecto
El tutorial comienza con la configuración de un proyecto Node.js. Se instalan dependencias esenciales, incluido Express.js para crear un servidor simple, dotenv para administrar variables de entorno y bibliotecas oficiales para AssemblyAI y DeepL.
mkdir real-time-translation
cd real-time-translation
npm init -y
npm install express dotenv assemblyai deepl-node
Las claves API para AssemblyAI y DeepL se almacenan en un archivo .env para mantenerlas seguras y evitar exponerlas en la interfaz.
Creación del backend
El backend está diseñado para proteger las claves API y generar tokens temporales para una comunicación segura con las API AssemblyAI y DeepL. Las rutas se definen para servir a la interfaz y manejar la generación de tokens y la traducción de texto.
const express = require("express");
const deepl = require("deepl-node");
const { AssemblyAI } = require("assemblyai");
require("dotenv").config();
const app = express();
const port = 3000;
app.use(express.static("public"));
app.use(express.json());
app.get(" (req, res) => {
res.sendFile(__dirname + "/public/index.html");
});
app.get("/token", async (req, res) => {
const token = await client.realtime.createTemporaryToken({ expires_in: 300 });
res.json({ token });
});
app.post("/translate", async (req, res) => {
const { text, target_lang } = req.body;
const translation = await translator.translateText(text, "en", target_lang);
res.json({ translation });
});
app.listen(port, () => {
console.log(`Listening on port ${port}`);
});
Desarrollo front-end
La interfaz consta de una página HTML con cuadros de texto para mostrar la transcripción y traducción, y un botón para iniciar y detener la grabación. El SDK de AssemblyAI y la biblioteca RecordRTC se utilizan para la grabación y transcripción de audio en tiempo real.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Voice Recorder with Transcription</title>
<script src="
</head>
<body>
<div class="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4">
<div class="w-full max-w-6xl bg-white shadow-md rounded-lg p-4 flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
<div class="flex-1">
<label for="transcript" class="block text-sm font-medium text-gray-700">Transcript</label>
<textarea id="transcript" rows="20" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm"></textarea>
</div>
<div class="flex-1">
<label for="translation" class="block text-sm font-medium text-gray-700">Translation</label>
<select id="translation-language" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm">
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="zh">Chinese</option>
</select>
<textarea id="translation" rows="18" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm"></textarea>
</div>
</div>
<button id="record-button" class="mt-4 px-6 py-2 bg-blue-500 text-white rounded-md shadow">Record</button>
</div>
<script src="
<script src="
<script src="main.js"></script>
</body>
</html>
Transcripción y traducción en tiempo real
El archivo main.js maneja la grabación, transcripción y traducción de audio. El servicio de transcripción en tiempo real de AssemblyAI procesa el audio y la API de DeepL traduce las transcripciones finales al idioma seleccionado.
const recordBtn = document.getElementById("record-button");
const transcript = document.getElementById("transcript");
const translationLanguage = document.getElementById("translation-language");
const translation = document.getElementById("translation");
let isRecording = false;
let recorder;
let rt;
const run = async () => {
if (isRecording) {
if (rt) {
await rt.close(false);
rt = null;
}
if (recorder) {
recorder.stopRecording();
recorder = null;
}
recordBtn.innerText = "Record";
transcript.innerText = "";
translation.innerText = "";
} else {
recordBtn.innerText = "Loading...";
const response = await fetch("/token");
const data = await response.json();
rt = new assemblyai.RealtimeService({ token: data.token });
const texts = {};
let translatedText = "";
rt.on("transcript", async (message) => {
let msg = "";
texts[message.audio_start] = message.text;
const keys = Object.keys(texts);
keys.sort((a, b) => a - b);
for (const key of keys) {
if (texts[key]) {
msg += ` ${texts[key]}`;
}
}
transcript.innerText = msg;
if (message.message_type === "FinalTranscript") {
const response = await fetch("/translate", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
text: message.text,
target_lang: translationLanguage.value,
}),
});
const data = await response.json();
translatedText += ` ${data.translation.text}`;
translation.innerText = translatedText;
}
});
rt.on("error", async (error) => {
console.error(error);
await rt.close();
});
rt.on("close", (event) => {
console.log(event);
rt = null;
});
await rt.connect();
navigator.mediaDevices
.getUserMedia({ audio: true })
.then((stream) => {
recorder = new RecordRTC(stream, {
type: "audio",
mimeType: "audio/webm;codecs=pcm",
recorderType: StereoAudioRecorder,
timeSlice: 250,
desiredSampRate: 16000,
numberOfAudioChannels: 1,
bufferSize: 16384,
audioBitsPerSecond: 128000,
ondataavailable: async (blob) => {
if (rt) {
rt.sendAudio(await blob.arrayBuffer());
}
},
});
recorder.startRecording();
recordBtn.innerText = "Stop Recording";
})
.catch((err) => console.error(err));
}
isRecording = !isRecording;
};
recordBtn.addEventListener("click", () => {
run();
});
Conclusión
Este tutorial muestra cómo crear un servicio de traducción de idiomas en tiempo real utilizando AssemblyAI y DeepL en JavaScript. Una herramienta de este tipo puede mejorar significativamente la comunicación y la accesibilidad para los usuarios en diferentes contextos lingüísticos. Para obtener instrucciones más detalladas, visite el sitio original. Tutorial de ensamblaje AI.
Fuente de la imagen: Shutterstock
