Spaces:
Sleeping
Sleeping
| <!-- 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> |