Spaces:

GobLyne
/

Jawi-Translation

Sleeping

File size: 7,859 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jawi Translator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">Jawi Translator</div>
        <!-- <nav>
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact Us</a>
        </nav> -->
    </header>

    <main>
        <section class="greeting">
            <h1>Salam!</h1>
            <p>Kami akan membantu anda untuk terjemahkan diantara perkataan <span class="highlight">Jawi</span> dan <span class="highlight">Rumi</span>. Masukkan perkataan anda dan kami akan uruskan!</p>
        </section>

        <section class="translator">
            <div class="input-box">
                <textarea id="rumi-text" placeholder="Masukkan perkataan Rumi..."></textarea>
                <div class="buttons">
                  <button class="btn clear">Clear</button>
                  <button class="btn translate">Translate</button>
                </div>
            </div>
            <div class="output-box">
                <textarea id="jawi-text" placeholder="Terjemahan Jawi akan diberikan di sini..." readonly></textarea>
                <div class="buttons">
                  <button class="btn copy">Copy</button>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <p>
            Aplikasi Terjemahan Jawi Dalam Talian ini dibangunkan untuk
            membantu memartabatkan semula tulisan Jawi yang telah digunakan sejak sekian lama.
        </p>
        <p style="margin-top: 25px; color: #838383;">Copyright © Jawi Translator 2024</p>
    </footer>
</body>

<!-- <script src="script.js"></script> -->

</html>

<script>
    async function translateText(rumiText) {
    try {
        const response = await fetch('https://huggingface.co/spaces/GobLyne/Jawi-Translation/translate', { // Replace with your FastAPI server URL
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ text: rumiText }),
        });

        if (!response.ok) {
            throw new Error('Failed to fetch translation');
        }

        const data = await response.json();
        return data.translated_text; // Assuming the FastAPI response includes "translated_text"
    } catch (error) {
        console.error('Error:', error);
        return 'Error: Unable to fetch translation';
    }
    }

    // DOM Elements
    const rumiTextArea = document.getElementById("rumi-text");
    const jawiTextArea = document.getElementById("jawi-text");
    const clearButton = document.querySelector(".btn.clear");
    const translateButton = document.querySelector(".btn.translate");
    const copyButton = document.querySelector(".btn.copy");

    // Character limit counter
    const charLimit = 120;
    const charCounter = document.createElement("div");
    charCounter.style.marginTop = "10px";
    charCounter.style.color = "#838383";
    charCounter.textContent = `Characters: 0/${charLimit}`;
    rumiTextArea.parentElement.appendChild(charCounter);

    // Event Listeners
    rumiTextArea.addEventListener("input", () => {
    const inputText = rumiTextArea.value;
    const charCount = inputText.length;

    if (charCount > charLimit) {
        rumiTextArea.value = inputText.slice(0, charLimit);
    }

    charCounter.textContent = `Characters: ${Math.min(charCount, charLimit)}/${charLimit}`;
    });

    clearButton.addEventListener("click", () => {
    rumiTextArea.value = "";
    jawiTextArea.value = "";
    charCounter.textContent = `Characters: 0/${charLimit}`;
    });

    translateButton.addEventListener("click", async () => {
    const rumiText = rumiTextArea.value.trim();

    if (!rumiText) {
        alert("Sila masukkan teks Rumi untuk diterjemahkan.");
        return;
    }

    jawiTextArea.value = "Translating...";

    try {
        const translatedText = await translateText(rumiText);
        jawiTextArea.value = translatedText;
    } catch (error) {
        jawiTextArea.value = "Error: Unable to translate the text. Please try again later.";
        console.error("Translation error:", error);
    }
    });

    copyButton.addEventListener("click", () => {
    if (jawiTextArea.value) {
        jawiTextArea.select();
        document.execCommand("copy");

        // Display text pop-up inside the website
        const popup = document.createElement("div");
        popup.textContent = "Teks telah disalin!";
        popup.style.position = "fixed";
        popup.style.bottom = "20px";
        popup.style.right = "20px";
        popup.style.backgroundColor = "#4CAF50";
        popup.style.color = "white";
        popup.style.padding = "10px";
        popup.style.borderRadius = "5px";
        popup.style.boxShadow = "0px 4px 6px rgba(0, 0, 0, 0.1)";
        popup.style.zIndex = "1000";
        document.body.appendChild(popup);

        setTimeout(() => {
            document.body.removeChild(popup);
        }, 2000);
    } else {
        alert("Tiada teks untuk disalin.");
    }
    });
</script>

<style>
    /* General Reset */
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    body {
    height: 100%;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f8fcf9;
    color: #333;
    }

    header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #edf7f1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    header .logo {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Georgia', serif;
    }

    nav a {
    margin: 0 10px;
    text-decoration: none;
    color: #838383;
    font-weight: bold;
    }

    nav a:hover {
    color: #007a5e;
    }

    main {
    padding: 20px;
    text-align: center;
    }

    .greeting h1 {
    font-size: 2rem;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: left;
    }

    .greeting p {
    font-size: 1.2rem;
    margin-left: 11px;
    margin-right: 11px;
    margin-bottom: 20px;
    text-align: left;
    color: #838383;
    }

    .highlight {
    color: #007a5e;
    font-weight: bold;
    }

    .translator {
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-left: 13px;
    margin-right: 13px;
    }

    .input-box {
    width: 45%;
    resize: none;
    }

    .output-box {
    width: 45%;
    resize: none;
    margin-left: 25px;
    }

    textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    textarea:focus {
    outline: none;
    border-color: #007a5e;
    }

    .buttons {
    display: flex;
    flex-direction: row;
    justify-content: right;
    gap: 10px;
    margin: 10px 0;
    }

    .btn {
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    }

    .btn.clear {
    background-color: #ff6b6b;
    color: white;
    width: 100px;
    justify-content: center;
    }

    .btn.clear:hover {
    background-color: #e54848;
    }

    .btn.translate {
    background-color: #007a5e;
    color: white;
    width: 100px;
    justify-content: center;
    }

    .btn.translate:hover {
    background-color: #005a42;
    }

    .btn.copy {
    background-color: #ffc107;
    color: white;
    }

    .btn.copy:hover {
    background-color: #e0a800;
    }

    footer {
    margin-top: 35px;
    padding: 10px 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #555;
    }
</style>