File size: 4,606 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 d8d37b0 193a47d d8d37b0 6bf8b5f d8d37b0 193a47d 8c5d8aa 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 |
<!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/transformers@2.5.4';
// Make it available globally
//window.pipeline = pipeline;
</script>
-->
<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>
</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/inference@2.6.4/+esm';
// Initialize the sentiment analysis model
async function initializeModel() {
const token = document.getElementById('hf-token').value;
const hf = new HfInference(token);
}
async function translateText() {
const textFieldValue = document.getElementById("translationText2").value.trim();
let result = await hf.translation({
model: 't5-base',
inputs: textFieldValue,
});
document.getElementById("outputArea2").innerText = JSON.stringify(result, null, 2);
}
/*
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> |