app.py

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()


# Custom HTML for flip card
flip_card_html = """
<center><h1>🇰🇿 DalaT5</h1>
<h2>Қазақша кириллица → латын графикасының транслитераторы</h2>
<h3>Kazakh Cyrillic → Latin Script Transliterator</h3></center>

<hr>

<div class="flip-card">
    <div class="flip-card-inner">
        <div class="flip-card-front">
            <center><h3>Қазақша (KZ)</h3></center><br>
            <p><strong>DalaT5</strong> - <b>кириллицада</b> жазылған табиғи қазақ тілін еркін <b>латын графикасына</b> ауыстыру үшін дайындалған T5 негізіндегі модель, Қазақстанның 2021 жылғы ресми әліпби реформасына негізделген.<br><br>

            Бұл модель құрмет пен қызығушылықтың мәдени қимылы ретінде ұсынылады. Ол қазіргі қазақ тілін бүгінгі адамдар қалай жазады, солай қабылдайды - және оның болашағының тілінде жауап береді.</p>
        </div>
        <div class="flip-card-back">
            <center><h3>English (EN)</h3></center><br>
            <p><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.<br><br>

            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.</p>
        </div>
    </div>
</div>

<br>

<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 card = document.querySelector(".flip-card");
    const inner = document.querySelector(".flip-card-inner");

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

# Custom CSS for flip card
flip_card_css = """
.flip-card {
  background-color: transparent;
  width: 100%;
  max-width: 900px;
  height: 350px;
  perspective: 1000px;
  margin: 0 auto 2rem auto;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 15px;
}

.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;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  font-size: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

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

a:hover {
  opacity: 0.8;
}
"""

# Interface
with gr.Blocks(css = flip_card_css) as demo:
    gr.HTML(flip_card_html)
    gr.Markdown("---")
    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()