File size: 4,124 Bytes
d8d37b0 193a47d d8d37b0 ffcd47a 05eec31 d8d37b0 05eec31 d8d37b0 193a47d d8d37b0 0281807 d8d37b0 ffcd47a d8d37b0 0cd8dcd d8d37b0 0cd8dcd 193a47d 74e6aa1 d8d37b0 b412e31 d59a0d7 2216247 d8d37b0 74e6aa1 2216247 74e6aa1 4f00d6e 74e6aa1 8c5d8aa 74e6aa1 242a562 74e6aa1 0281807 d8d37b0 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Translation - huggingface.js</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container-main">
<!-- Back to Home button -->
<div class="row mt-5">
<div class="col-md-12 text-center">
<a href="index.html" class="btn btn-outline-secondary"
style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
</div>
</div>
<!-- Content -->
<div class="container mt-5">
<!-- Centered Titles -->
<div class="text-center">
<h2>Natural Language Processing</h2>
<h4>Translation</h4>
</div>
<!-- Actual Content of this page -->
<form id="hf-form">
<input
type="text"
style="display:none"
autocomplete="username"
value="user"
/>
<div>
<label for="hf-token">Hugging Face Token (optional but limited if absent)</label>
<input
id="hf-token"
placeholder="HF-TOKEN"
type="password"
autocomplete="new-password"
/>
</div>
<div id="translation-container" class="container mt-4">
<h5>Translation w/ Xenova/t5-base:</h5>
<div class="d-flex align-items-center">
<label for="translationText2" class="mb-0 text-nowrap" style="margin-right: 15px;">Enter Text to
Translate:</label>
<input type="text" class="form-control flex-grow-1" id="translationText2" value="My name is Wolfgang and I live in Amsterdam"
placeholder="Enter text" style="margin-right: 15px; margin-left: 15px;">
<button id="translateButton2" class="btn btn-primary">Translate</button>
</div>
<div class="mt-4">
<h4>Output:</h4>
<pre id="outputArea2"></pre>
</div>
</div>
<!-- Back to Home button -->
<div class="row mt-5">
<div class="col-md-12 text-center">
<a href="index.html" class="btn btn-outline-secondary"
style="color: #3c650b; border-color: #3c650b;">Back to Main Page</a>
</div>
</div>
</div>
</div>
</form>
<script type="module">
import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/inference@2.6.4/+esm';
let hf;
// Initialize the sentiment analysis model
async function initializeModel() {
const token = document.getElementById("hf-token").value;
console.log("TOKEN: ", token);
hf = new HfInference();
//console.log(hf);
}
async function translateText() {
// Ensure that hf is initialized before this function is called
if (!hf) {
console.error("HfInference is not initialized.");
return;
}
const textFieldValue = document.getElementById("translationText2").value.trim();
console.log(textFieldValue)
try {
const result = await hf.translation({
model: 't5-base',
inputs: textFieldValue,
});
document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
} catch (error) {
console.error("Error during translation:", error);
}
}
window.addEventListener("DOMContentLoaded", (event) => {
initializeModel();
document.getElementById("translateButton2").addEventListener("click", translateText);
});
</script>
</body>
</html> |