forked from yigagilbert/translate-sunbird-api
-
Notifications
You must be signed in to change notification settings - Fork 0
/
translate.html
119 lines (91 loc) · 4.53 KB
/
translate.html
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>SunbirdAI Translation Page</title>
<link rel="icon" type="image/x-icon" href="./img/sunbirdAi.svg">
<style>
body {
background-image: url('./img/sunbirdAi.svg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 98% 24%;
}
</style>
</head>
<body>
<form class="flex-nowrap space-y-8" id="translationForm">
<h1 class="text-blue-600 text-center text-bold text-3xl font-mon0" >SunbirdAI Translation Tool</h1><br>
<div class="space-y-1">
<label class="text-blue-600 text-center flex justify-center italic text-sm subpixel-antialiased" for="textToTranslate">Text to translate:</label><br>
<div class="flex justify-center ">
<textarea class="flex justify-center bg-blue-300 px-4 py-6 text-center rounded-lg shadow-2xl" id="textToTranslate" rows="4" cols="50"></textarea><br>
</div>
</div>
<div class="flex flex-wrap justify-center space-x-4" >
<label class="text-blue-600 text-center text-bold text-lg " for="sourceLang">Source Language:
<input class="text-center rounded-lg shadow-lg italic" type="text" id="sourceLang" placeholder="e.g., eng,lug,ach,teo,lgg,nyn"><br>
</label>
<label class="text-blue-600 text-center text-bold text-lg" for="targetLang">Target Language:
<input class="text-center rounded-lg shadow-lg italic" type="text" id="targetLang" placeholder="e.g., eng,lug,ach,teo,lgg,nyn"><br>
</label>
</div>
<div class="flex justify-center">
<button class="flex text-sm px-2 py-3 bg-blue-600 text-white text-bold text-center bg-gradient-to-r from-teal-400 to-blue-500 hover:from-pink-500 hover:to-orange-500 rounded-full shadow-md cursor-pointer w-32 place-content-center " type="button" onclick="translateText()">
Translate
</button>
</div>
</form>
<div class="space-y-8"><br>
<h2 class="text-center text-blue-600 text-2xl ">Translation Result:</h2>
<div class="flex justify-center text-wrap text-center shadow-sm" id="translationResult"></div>
</div>
<script>
const translationUrl = 'https://api.sunbird.ai/tasks/nllb_translate';
const apiToken = ''; // Replace with your actual API token
const requestHeaders = {
"Authorization": `Bearer ${apiToken}`,
"Content-Type": "application/json"
};
const getTranslation = async (text, sourceLang, targetLang) => {
console.log(`sourceLang ${sourceLang}`);
console.log(`targetLang ${targetLang}`);
const requestOptions = {
method: "POST",
headers: requestHeaders,
body: JSON.stringify({ source_language: sourceLang, target_language: targetLang, text })
};
try {
const response = await fetch(translationUrl, requestOptions);
if (!response.ok) {
throw new Error(`${response.status} ${response.statusText}`);
}
const responseJson = await response.json();
if (!responseJson || !responseJson.output) {
throw new Error("Invalid response structure");
}
const translatedText = responseJson.output.translated_text;
console.log(`translatedText ${translatedText}`);
return translatedText;
} catch (err) {
console.error(err);
return "Translation failed, try again.";
}
};
function translateText() {
const text = document.getElementById('textToTranslate').value;
const sourceLang = document.getElementById('sourceLang').value;
const targetLang = document.getElementById('targetLang').value;
const resultContainer = document.getElementById('translationResult');
getTranslation(text, sourceLang, targetLang).then(translatedText => {
resultContainer.innerText = translatedText;
}).catch(error => {
console.error('Error translating text:', error);
resultContainer.innerText = 'Translation failed. Please try again.';
});
}
</script>
</body>
</html>