template/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Translate</title>
    <script>
        function translateTerm() {
            const term = document.getElementById('translateTerm').value;
            fetch('/translate', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ term: term })
            })
            .then(response => response.json())
            .then(data => {
                const translationDiv = document.getElementById('translation');
                if (data.success) {
                    translationDiv.textContent = data.translation;
                    translationDiv.style.display = 'block';
                } else {
                    translationDiv.textContent = data.error;
                    translationDiv.style.display = 'block';
                }
            });
        }
    </script>
</head>
<body>
    <h1>Translate</h1>
    <textarea id="translateTerm" placeholder="Enter term to translate"></textarea>
    <button onclick="translateTerm()">Translate</button>
    <div id="translation" style="display:none;"></div>
</body>
</html>