Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Papukaija-kääntäjä</title> | |
| <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}"> | |
| <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> | |
| <script src="{{ url_for('static', filename='scripts.js') }}"></script> | |
| {# Papukaijan pomppiminen käyttää url_for():ia joten helpompi HTML:n kautta #} | |
| <script> | |
| function callFunction() { | |
| // get the form data | |
| var formData = { | |
| translation_request: $('#message').val() | |
| }; | |
| // Add animation class to the image | |
| $(".image").attr("src", "{{ url_for('static', filename='papukaija_miettii.png') }}") | |
| $(".image").addClass("bounce"); | |
| // send the POST request using AJAX | |
| $.ajax({ | |
| type: 'POST', | |
| url: '/submit', | |
| data: formData, | |
| success: function (response) { | |
| $('#result').text(response); // display the response in the result div | |
| } | |
| }); | |
| var observer = new MutationObserver(function () { | |
| // Revert the changes to .image | |
| $(".image").attr("src", "{{ url_for('static', filename='papukaija.png') }}") | |
| $(".image").removeClass("bounce"); | |
| // Disconnect the observer after reverting the changes | |
| observer.disconnect(); | |
| }); | |
| // Configure the observer to watch for changes in the #result element | |
| observer.observe(document.getElementById("result"), {childList: true}); | |
| // Display the response in the result div | |
| $('#result').text(response); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| {# Perus flexbox #} | |
| <div class="container"> | |
| <form id="message-box" class="child"> | |
| <span class="kielen_nimi">Write in english:</span> | |
| <textarea id="message" name="message" autofocus="autofocus" spellcheck="false" | |
| placeholder="write here!"></textarea> | |
| <button class="bottom_filler">Translate! 🇫🇮</button> | |
| </form> | |
| <img src="{{ url_for('static', filename='papukaija.png') }}" class="image" alt="papukaija_image"> | |
| <div id="result-box" class="child"> | |
| <span class="kielen_nimi">🇫🇮 Suomeksi 🇫🇮 </span> | |
| <div id="result"></div> | |
| <span class="bottom_filler"></span> | |
| </div> | |
| </div> | |
| <div id="selitys"><b>🇬🇧ENG -> FI🇫🇮<br>🍹🦜 Papukaija-kääntäjä 🦜🍹<br></b>by Leo Huovinen<br><br>Powered by Helsinki-NLP's <a href="https://huggingface.co/Helsinki-NLP/opus-mt-en-fi">oputs-mt-en-fi.</a><br><br>Try to write in full sentences, to help the AI with proper context!<br>More info at <a href="https://github.com/leo-huovi/Papukaija-translator/">Github.</a> | |
| </div> | |
| </body> | |
| </html> |