File size: 3,254 Bytes
9c8b886 ca89fb8 119c9ba 86629ee e0ac6c4 74b3e32 9c8b886 e0ac6c4 9c8b886 e0ac6c4 86629ee 119c9ba 86629ee 9c8b886 e0ac6c4 9c8b886 e0ac6c4 9c8b886 e0ac6c4 adc0cc3 9c8b886 e0ac6c4 9c8b886 e0ac6c4 adc0cc3 e0ac6c4 9c8b886 e0ac6c4 9c8b886 e0ac6c4 9c8b886 e0ac6c4 9c8b886 d126a30 9c8b886 e0ac6c4 adc0cc3 e0ac6c4 9c8b886 e0ac6c4 9c8b886 adc0cc3 9c8b886 e0ac6c4 9c8b886 e0ac6c4 9c8b886 e0ac6c4 86629ee adc0cc3 | 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 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swedish → English Translator</title>
<script
type="module"
crossorigin
src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js">
</script>
<link
rel="stylesheet"
crossorigin
href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css">
<style>
body {
max-width: 900px;
margin: 0 auto;
padding: 24px;
font-family: Arial, sans-serif;
}
#status {
color: #555;
margin: 8px 0 18px;
}
#error {
color: #b00020;
white-space: pre-wrap;
margin-top: 12px;
}
textarea {
width: 100%;
min-height: 120px;
padding: 12px;
box-sizing: border-box;
font-size: 16px;
}
button {
margin: 14px 0;
padding: 10px 18px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>English → Swedish Translator</h1>
<p>
This translation model runs directly in your browser.
The first translation can take a little while because the model must download.
</p>
<p id="status">Loading translation model…</p>
<label for="input">Swedish text</label>
<textarea
id="input"
placeholder="Write an Swedish sentence here..."
disabled
></textarea>
<br>
<button id="translate-button" disabled>Translate</button>
<label for="output">English translation</label>
<textarea id="output" readonly></textarea>
<p id="error"></p>
<script type="module">
import { pipeline, env } from
"https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.2";
const status = document.getElementById("status");
const input = document.getElementById("input");
const output = document.getElementById("output");
const button = document.getElementById("translate-button");
const errorBox = document.getElementById("error");
let translator;
async function loadModel() {
try {
env.allowLocalModels = false;
translator = await pipeline(
"translation",
"Xenova/opus-mt-sv-en"
);
status.textContent = "Model ready. Enter Swedish text and click Translate.";
input.disabled = false;
button.disabled = false;
} catch (error) {
console.error(error);
status.textContent = "The translation model could not load.";
errorBox.textContent = String(error);
}
}
button.addEventListener("click", async () => {
const text = input.value.trim();
if (!text) {
output.value = "Please write something first.";
return;
}
button.disabled = true;
status.textContent = "Translating…";
errorBox.textContent = "";
try {
const result = await translator(text);
output.value = result[0].translation_text;
status.textContent = "Done.";
} catch (error) {
console.error(error);
status.textContent = "Translation failed.";
errorBox.textContent = String(error);
} finally {
button.disabled = false;
}
});
loadModel();
</script>
</body>
</html> |