Ted Hisokawa
Jul 14, 2024 05:20
Discover ways to create a real-time language translation service utilizing AssemblyAI and DeepL in JavaScript. Step-by-step information for builders.
In a complete tutorial, AssemblyAI affords insights into making a real-time language translation service utilizing JavaScript. The tutorial leverages AssemblyAI for real-time speech-to-text transcription and DeepL for translating the transcribed textual content into varied languages.
Introduction to Actual-Time Translation
Translations play a important position in communication and accessibility throughout completely different languages. As an example, a vacationer abroad could wrestle to speak if they do not perceive the native language. AssemblyAI’s Streaming Speech-to-Textual content service can transcribe speech in real-time, which might then be translated utilizing DeepL, making communication seamless.
Setting Up the Venture
The tutorial begins with establishing a Node.js mission. Important dependencies are put in, together with Specific.js for making a easy server, dotenv for managing setting variables, and the official libraries for AssemblyAI and DeepL.
mkdir real-time-translation
cd real-time-translation
npm init -y
npm set up specific dotenv assemblyai deepl-node
API keys for AssemblyAI and DeepL are saved in a .env file to maintain them safe and keep away from exposing them within the frontend.
Creating the Backend
The backend is designed to maintain API keys safe and generate momentary tokens for safe communication with the AssemblyAI and DeepL APIs. Routes are outlined to serve the frontend and deal with token era and textual content translation.
const specific = require(“specific”);
const deepl = require(“deepl-node”);
const { AssemblyAI } = require(“assemblyai”);
require(“dotenv”).config();
const app = specific();
const port = 3000;
app.use(specific.static(“public”));
app.use(specific.json());
app.get(“https://blockchain.information/”, (req, res) => {
res.sendFile(__dirname + “/public/index.html”);
});
app.get(“/token”, async (req, res) => {
const token = await consumer.realtime.createTemporaryToken({ expires_in: 300 });
res.json({ token });
});
app.put up(“/translate”, async (req, res) => {
const { textual content, target_lang } = req.physique;
const translation = await translator.translateText(textual content, “en”, target_lang);
res.json({ translation });
});
app.hear(port, () => {
console.log(`Listening on port ${port}`);
});
Frontend Improvement
The frontend consists of an HTML web page with textual content areas for displaying the transcription and translation, and a button to begin and cease recording. The AssemblyAI SDK and RecordRTC library are utilized for real-time audio recording and transcription.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta title=”viewport” content material=”width=device-width, initial-scale=1.0″ />
<title>Voice Recorder with Transcription</title>
<script src=”https://cdn.tailwindcss.com”></script>
</head>
<physique>
<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>
<choose id=”translation-language” class=”mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm”>
<possibility worth=”es”>Spanish</possibility>
<possibility worth=”fr”>French</possibility>
<possibility worth=”de”>German</possibility>
<possibility worth=”zh”>Chinese language</possibility>
</choose>
<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”>File</button>
</div>
<script src=”https://www.unpkg.com/assemblyai@newest/dist/assemblyai.umd.min.js”></script>
<script src=”https://www.WebRTC-Experiment.com/RecordRTC.js”></script>
<script src=”foremost.js”></script>
</physique>
</html>
Actual-Time Transcription and Translation
The primary.js file handles the audio recording, transcription, and translation. The AssemblyAI real-time transcription service processes the audio, and the DeepL API interprets the ultimate transcriptions into the chosen language.
const recordBtn = doc.getElementById(“record-button”);
const transcript = doc.getElementById(“transcript”);
const translationLanguage = doc.getElementById(“translation-language”);
const translation = doc.getElementById(“translation”);
let isRecording = false;
let recorder;
let rt;
const run = async () => {
if (isRecording) {
if (rt) {
await rt.shut(false);
rt = null;
}
if (recorder) {
recorder.stopRecording();
recorder = null;
}
recordBtn.innerText = “File”;
transcript.innerText = “”;
translation.innerText = “”;
} else {
recordBtn.innerText = “Loading…”;
const response = await fetch(“/token”);
const knowledge = await response.json();
rt = new assemblyai.RealtimeService({ token: knowledge.token });
const texts = {};
let translatedText = “”;
rt.on(“transcript”, async (message) => {
let msg = “”;
texts[message.audio_start] = message.textual content;
const keys = Object.keys(texts);
keys.type((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”, {
technique: “POST”,
headers: {
“Content material-Sort”: “software/json”,
},
physique: JSON.stringify({
textual content: message.textual content,
target_lang: translationLanguage.worth,
}),
});
const knowledge = await response.json();
translatedText += ` ${knowledge.translation.textual content}`;
translation.innerText = translatedText;
}
});
rt.on(“error”, async (error) => {
console.error(error);
await rt.shut();
});
rt.on(“shut”, (occasion) => {
console.log(occasion);
rt = null;
});
await rt.join();
navigator.mediaDevices
.getUserMedia({ audio: true })
.then((stream) => {
recorder = new RecordRTC(stream, {
sort: “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 = “Cease Recording”;
})
.catch((err) => console.error(err));
}
isRecording = !isRecording;
};
recordBtn.addEventListener(“click on”, () => {
run();
});
Conclusion
This tutorial demonstrates methods to construct a real-time language translation service utilizing AssemblyAI and DeepL in JavaScript. Such a device can considerably improve communication and accessibility for customers in several linguistic contexts. For extra detailed directions, go to the unique AssemblyAI tutorial.
Picture supply: Shutterstock
