Major layout update

app.py

@@ -19,6 +19,92 @@ def transliterate(text: str) -> str:
     return output.strip()
 
 
+# Custom HTML for flip card
+flip_card_html = """
+<h3>Қазақша кириллица → латын графикасының транслитераторы / Kazakh Cyrillic → Latin Script Transliterator</h3>
+
+<hr>
+<br><br>
+
+<div class="flip-card">
+    <div class="flip-card-inner">
+        <div class="flip-card-front">
+            <h3>Қазақша (KZ)</h3>
+            <p><strong>DalaT5</strong> - **кириллицада** жазылған табиғи қазақ тілін еркін **латын графикасына** ауыстыру үшін дайындалған T5 негізіндегі модель, Қазақстанның 2021 жылғы ресми әліпби реформасына негізделген.<br><br>
+
+            Бұл модель құрмет пен қызығушылықтың мәдени қимылы ретінде ұсынылады. Ол қазіргі қазақ тілін бүгінгі адамдар қалай жазады, солай қабылдайды - және оның болашағының тілінде жауап береді.</p>
+        </div>
+        <div class="flip-card-back">
+            <h3>English (EN)</h3>
+            <p><strong>DalaT5</strong> is a T5-based model trained to convert natural Kazakh written in **Cyrillic** into fluent **Latin script**, 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><br>
+   🔤 <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>
+"""
+
+# Custom CSS for flip card
+flip_card_css = """
+.flip-card {
+  background-color: transparent;
+  width: 100%;
+  max-width: 450px;
+  height: 250px;
+  perspective: 1000px;
+  margin: 0 auto 2rem auto;
+}
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+  border-radius: 15px;
+}
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  background-color: #fefefe;
+  border-radius: 15px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.flip-card-front {
+  background-color: #f0f8ff;
+}
+
+.flip-card-back {
+  background-color: #e6f7ff;
+  transform: rotateY(180deg);
+}
+"""
+
+
 # App description (Markdown style)
 description = """
 ### Қазақша кириллица → латын графикасының транслитераторы / Kazakh Cyrillic → Latin Script Transliterator
@@ -48,28 +134,25 @@ DalaT5 - **кириллицада** жазылған табиғи қазақ т
 """
 
 # Interface
-demo = gr.Interface(
-    fn = transliterate,
-    inputs = gr.Textbox(
-        label = "Қазақ тілінде теріңіз (кириллица) / Type in Kazakh (Cyrillic script)",
-        placeholder = "Мен қазақ тілінде сөйлеймін.",
-        lines = 6
-    ),
-
-    outputs = gr.Textbox(
-        label = "Латын графикасының шығуы / Latin script output"
-    ),
-
-    title = "🇰🇿 DalaT5",
-    description = description,
-    theme = "default",
-    flagging_mode = "never",
-    css = """
-        footer {visibility: hidden;}
-        .gradio-container {padding: 1.5rem}
-        .input_text, .output_text {font-size: 1.1rem}
-    """
-)
+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",
+        ),
+
+        title = "🇰🇿 DalaT5",
+        description = description,
+        theme = "default",
+        flagging_mode = "never"
+    ).render()
 
 
 if __name__ == "__main__":