Spaces:
Running
Running
File size: 1,911 Bytes
bcfd8ed 75a0eef bcfd8ed 75a0eef |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<html>
<head>
<meta charset="utf-8">
<title>Sema API Integration Example</title>
</head>
<body>
<h1>Translate and Detect Source Language</h1>
<form action="#" method="post">
<label for="userinput">Enter text to translate:</label>
<input type="text" id="userinput" name="userinput">
<label for="target_lang">Enter target language:</label>
<input type="text" id="target_lang" name="target_lang">
<input type="submit" value="Translate">
</form>
<div id="output"></div>
<script>
const form = document.querySelector('form');
const targetLangInput = document.querySelector('#target_lang');
const outputDiv = document.querySelector('#output');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const userInput = document.querySelector('#userinput').value;
const targetLang = targetLangInput.value || 'swh_Latn';
try {
const response = await fetch('https://kamau1-sema-api.hf.space/translate_detect/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
userinput: userInput,
target_lang: targetLang
})
});
const data = await response.json();
const sourceLanguage = data.source_language;
const translatedText = data.translations[0].text;
outputDiv.innerHTML = `
<p><strong>Output:</strong></p>
<p>Source Language: ${source_language}</p>
<p>Translated Text: ${translated_text}</p>
`;
} catch (error) {
console.error(error);
outputDiv.textContent = 'An error occurred while translating the text. Please check the input and try again.';
}
});
</script>
</body>
</html>
|