Spaces:
Running
Running
File size: 4,272 Bytes
d8d37b0 193a47d d8d37b0 ffcd47a 05eec31 d8d37b0 05eec31 d8d37b0 193a47d d8d37b0 0281807 d8d37b0 ffcd47a d8d37b0 ffcd47a d8d37b0 193a47d 74e6aa1 d8d37b0 b412e31 d59a0d7 eaab7c0 d8d37b0 74e6aa1 d8d37b0 74e6aa1 193a47d 74e6aa1 8c5d8aa 74e6aa1 016393e 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 115 116 117 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Translation - huggingface.js</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
</form>
<!-- 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>
<script type="module">
import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+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();
try {
let 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);
if (error.response && error.response.json) {
error.response.json().then(json => {
console.error("Error details:", json);
});
}
}
}
window.addEventListener("DOMContentLoaded", (event) => {
initializeModel();
document.getElementById("translateButton2").addEventListener("click", translateText);
});
</script>
</body>
</html> |