Beginner 2-3 hours · 2 APIs
Build a Translation Chat
A simple chat interface that auto-detects the input language and translates it to your target language in real-time.
APIs Used
Data Flow
User Action
API Call
Transform
Output
How It Works
1
User types a message in any language
2
Detect the input language using Detect Language API
3
Translate the message to the target language using LibreTranslate
4
Display both the original and translated messages in a chat-like UI
Code Outline
Pseudocode / JavaScript
// 1. User input
const userMessage = 'Bonjour, comment allez-vous?';
const targetLang = 'en';
// 2. Detect the input language
const detectRes = await fetch('https://ws.detectlanguage.com/0.2/detect', {
method: 'POST',
headers: { 'Authorization': 'Bearer YOUR_API_KEY', 'Content-Type': 'application/json' },
body: JSON.stringify({ q: userMessage })
});
const { data: { detections } } = await detectRes.json();
const sourceLang = detections[0].language; // 'fr'
// 3. Translate the message
const translateRes = await fetch('https://libretranslate.com/translate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ q: userMessage, source: sourceLang, target: targetLang })
});
const { translatedText } = await translateRes.json();
// 4. Display results
console.log(`Original (${sourceLang}): ${userMessage}`);
console.log(`Translated (${targetLang}): ${translatedText}`); Recipe Details
Difficulty Beginner
Time 2-3 hours
APIs Used 2
Tags
Related Recipes
Related Tutorials
Note: These recipes are AI-generated suggestions based on API capabilities. Actual implementation may vary. Always refer to official API documentation for the latest specifications.