Translation Demo - AWS Translate Integration

Language Switcher

Current Locale: en

Text Translation Demo

Input Text (English):

Object Translation Demo

Test Object (English):

{
  "title": "Welcome to our medical clinic",
  "description": "We provide the best healthcare services",
  "services": [
    "Cancer Treatment",
    "Telemedicine",
    "Emergency Care"
  ]
}

Auto Translation Component Demo

Static Content (Auto-translated based on locale):

Welcome to our medical clinic. We provide comprehensive healthcare services.

Medical Terms:

Cancer Treatment
Telemedicine Services
Emergency Care
Preventive Medicine

Common UI Elements:

API Usage Examples

Direct API Call:

// Translate single text
const response = await fetch('/api/translate', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    text: 'Hello world',
    targetLanguage: 'ar',
    sourceLanguage: 'en'
  })
});

const result = await response.json();
console.log(result.result); // Translated text

Using the Hook:

// In your component
const { translateText, isLoading } = useTranslation();

const handleTranslate = async () => {
  const translated = await translateText('Hello world');
  console.log(translated);
};

Using the Component:

// Automatic translation based on locale
<TranslatedContent content="Your text here" />