Spaces:
Running
Running
File size: 4,910 Bytes
d8d37b0 193a47d a9d79f0 d8d37b0 193a47d d8d37b0 193a47d d8d37b0 a9d79f0 d8d37b0 ffcd47a 05eec31 d8d37b0 05eec31 d8d37b0 193a47d d8d37b0 0281807 d8d37b0 ffcd47a d8d37b0 ffcd47a d8d37b0 193a47d 74e6aa1 d8d37b0 193a47d 74e6aa1 d8d37b0 74e6aa1 d8d37b0 74e6aa1 193a47d 74e6aa1 8c5d8aa 74e6aa1 193a47d d8d37b0 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 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Translation - huggingface.js</title>
<!--
<script type="module">
// Import the library
//import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]';
// Make it available globally
//window.pipeline = pipeline;
</script>
-->
<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;
hf = new HfInference(token);
}
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);
}
}
/*
document.getElementById('hf-form').addEventListener('submit', async (event) => {
event.preventDefault();
// You can also omit "model" to use the recommended model for the task
let result = await hf.translation({
model: 't5-base',
inputs: textFieldValue,
document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
});
console.log(result);
});
*/
// Initialize the model after the DOM is completely loaded
window.addEventListener("DOMContentLoaded", (event) => {
initializeModel();
document.getElementById("translateButton2").addEventListener("click", translateText);
});
</script>
</body>
</html> |