import gradio as gr
from transformers import pipeline


# Load model once
model = pipeline("text2text-generation", model = "crossroderick/dalat5")


def transliterate(text: str) -> str:
    """
    Prediction function.
    """
    if text.strip() == "":
        return ""
    
    input_text = f"Cyrillic2Latin: {text.strip()}"
    output = model(input_text, max_length = 128, do_sample = False)[0]["generated_text"]
    
    return output.strip()


# HTML code for the description
description_html = """
<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front">
            <button class="EN">EN</button>
            <h3>Қазақша (KZ)</h3><br>
            <p>
                <span><strong>DalaT5</strong> - <b>кириллицада</b> жазылған табиғи қазақ тілін еркін <b>латын графикасына</b> ауыстыру үшін дайындалған T5 негізіндегі модель, Қазақстанның 2021 жылғы ресми әліпби реформасына негізделген.</span>
                <br>
                <span>Бұл модель құрмет пен қызығушылықтың мәдени қимылы ретінде ұсынылады. Ол қазіргі қазақ тілін бүгінгі адамдар қалай жазады, солай қабылдайды - және оның болашағының тілінде жауап береді.</span>
            </p>
        </div>
        <div class="flip-card-back">
            <button class="KZ">KZ</button>
            <h3>English (EN)</h3><br>
            <p>
                <span><strong>DalaT5</strong> is a T5-based model trained to convert natural Kazakh written in <b>Cyrillic</b> into fluent <b>Latin script</b>, based on the official 2021 alphabet reform of Kazakhstan.</span>
                <br>
                <span>This model is offered as a cultural gesture of respect and curiosity. It accepts modern Kazakh as people write it today - and answers in the language of its future.</span>
            </p>
        </div>
    </div>
</div>

<div style="text-align: center; font-size: 1rem;">
<p>🧠 <a href="https://huggingface.co/crossroderick/dalat5" target="_blank">Model page</a> | 🔤 <a href="https://astanatimes.com/2021/02/kazakhstan-presents-new-latin-alphabet-plans-gradual-transition-through-2031/" target="_blank">Kazakhstan 2021 alphabet reform</a></p>

<br>

<p>Егер сіз үлес қосқыңыз, бірлесіп жұмыс жасағыңыз немесе жай ғана пікір бөліскіңіз келсе – байланысыңыз / If you'd like to contribute, collaborate, or just share feedback – feel free to connect with <a href="https://www.linkedin.com/in/rpereiracruz/" target="_blank">Rodrigo Pereira Cruz</a>. 🇧🇷🇰🇿</p>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const en = document.querySelector(".EN");
    const kz = document.querySelector(".KZ");
    const card = document.querySelector(".flip-card");
    const inner = document.querySelector(".flip-card-inner");

    en.addEventListener("click", function() {
        inner.classList.toggle("flipped");
    });

    kz.addEventListener("click", function() {
        inner.classList.toggle("flipped");
    });
});
</script>
"""

# Custom CSS
description_css = """
.flip-card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    width: 100%;
    max-width: 900px;
    height: 250px;
    margin: 0 auto 2rem auto;
    overflow: hidden;
}

.flip-card-inner {
    position: relative;
    width: 95%;
    height: 99%;
    transition: transform 0.8s;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    z-index: 1;
}

.flip-card .flip-card-inner .EN,
.flip-card .flip-card-inner .KZ {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: 1px solid white;
    padding: 6px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    z-index: 3;
}

.flip-card .flip-card-inner .EN:hover,
.flip-card .flip-card-inner .KZ:hover {
    box-shadow: 5px 5px white;
    top: 13px;
    right: 13px;
}

.flip-card-inner.flipped {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background-color: transparent;
    color: inherit;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flip-card-front p, .flip-card-back p{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.flip-card-front p span, .flip-card-back p span {
    width: 95%;
    margin: 0 10px;
}

.flip-card-back {
    transform: rotateY(180deg);
}

a {
    color: inherit;
    text-decoration: underline;
}

.lg.primary {
    background: #00AFC3;
}
"""

# Interface
with gr.Blocks(css = description_css) as demo:
    gr.HTML("<center><h1>🇰🇿 DalaT5</h1><h2>Қазақша кириллица → латын графикасының транслитераторы</h2><h3>Kazakh Cyrillic → Latin Script Transliterator</h3></center>")
    gr.Image(
        value = "./img/line_sep.png", 
        show_label = False, 
        width = 800, 
        height = 40, 
        show_download_button = False, 
        show_fullscreen_button = False,
        show_share_button = False
    )
    gr.HTML(description_html)
    gr.Interface(
        fn = transliterate,
        inputs = gr.Textbox(
            label = "Қазақ тілінде теріңіз (кириллица) / Type in Kazakh (Cyrillic script)",
            placeholder = "Мен қазақ тілінде сөйлеймін.",
            lines = 6
        ),

        outputs = gr.Textbox(
            label = "Латын графикасының шығуы / Latin script output",
        ),

        theme = "default",
        flagging_mode = "never"
    )


if __name__ == "__main__":
    demo.queue(default_concurrency_limit = 2)
    demo.launch()