Spaces:
Sleeping
Sleeping
File size: 2,683 Bytes
77a970b 37a1881 a6dde64 37a1881 c5dafdd 77a970b c5dafdd 37a1881 77a970b 37a1881 |
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 |
<!-- Original Content -->
<body>
<!-- Add the Loader -->
<div id="loader">
<img src="/static/loading.gif" alt="Loading..." />
</div>
<!-- Original Content -->
<main><section id="text-gen">
<h2>Text generation using Flan T5</h2>
<p>
Model:
<a
href="https://huggingface.co/google/flan-t5-small"
rel="noreferrer"
target="_blank"
>google/flan-t5-small
</a>
</p>
<form class="text-gen-form">
<label for="text-gen-input">Text prompt</label>
<input id="text-gen-input" type="text" value="German: There are many ducks"/>
<button id="text-gen-submit">Submit</button>
<p class="text-gen-output"></p>
</form>
</section></main>
<!-- Other resources -->
<link href="/static/style.css" rel="stylesheet">
<script>
document.addEventListener('DOMContentLoaded', () => {
const loader = document.getElementById('loader');
const textGenInput = document.getElementById('text-gen-input');
const textGenOutput = document.querySelector('.text-gen-output');
/* Function to hide the loader */
const hideLoader = () => {
loader.classList.add('hidden');
};
/* Function to show the loader */
const showLoader = () => {
loader.classList.remove('hidden');
};
/* Submit Button Event Listener */
const textGenForm = document.querySelector('.text-gen-form');
textGenForm.addEventListener('submit', async (event) => {
event.preventDefault();
/* Hide the loader initially */
hideLoader();
/* Get the input value */
const inputValue = textGenInput.value;
/* Show the loader before making the request */
showLoader();
try {
/* Send a POST request to the /infer_t5 endpoint with the input value as JSON data */
const response = await fetch('/infer_t5', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ input: inputValue })
});
/* Parse the response as JSON */
const data = await response.json();
/* Clear the output paragraph */
textGenOutput.innerHTML = '';
/* Display the generated text in the output paragraph */
textGenOutput.insertAdjacentHTML('beforeend', `<span>${data.output}</span>`);
/* Hide the loader finally */
hideLoader();
} catch (err) {
console.error(err);
textGenOutput.innerText = 'Something went wrong.';
hideLoader();
}
});
});
</script>
</body> |