Layout update

app.py

@@ -19,8 +19,8 @@ def transliterate(text: str) -> str:
     return output.strip()
 
 
-# Custom HTML for flip card
-flip_card_html = """
+# HTML code for the description
+description_html = """
 <center><h1>🇰🇿 DalaT5</h1>
 <h2>Қазақша кириллица → латын графикасының транслитераторы</h2>
 <h3>Kazakh Cyrillic → Latin Script Transliterator</h3></center>
@@ -30,16 +30,22 @@ flip_card_html = """
 <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>
+            <button class="EN">EN</button>
+            <h3>Қазақша (KZ)</h3><br>
+            <p>
+                <span><strong>DalaT5</strong> - <b>кириллицада</b> жазылған табиғи қазақ тілін еркін <b>латын графикасына</b> ауыстыру үшін дайындалған T5 негізіндегі модель, Қазақстанның 2021 жылғы ресми әліпби реформасына негізделген.</span>
+                <br><br>
+                <span>Бұл модель құрмет пен қызығушылықтың мәдени қимылы ретінде ұсынылады. Ол қазіргі қазақ тілін бүгінгі адамдар қалай жазады, солай қабылдайды - және оның болашағының тілінде жауап береді.</span>
+            </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>
+            <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><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>
@@ -56,70 +62,116 @@ flip_card_html = """
 
 <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");
 
-    card.addEventListener("click", function() {
+    en.addEventListener("click", function() {
+        inner.classList.toggle("flipped");
+    });
+
+    kz.addEventListener("click", function() {
         inner.classList.toggle("flipped");
     });
 });
 </script>
 """
 
-# Custom CSS for flip card
-flip_card_css = """
+# Custom CSS
+description_css = """
 .flip-card {
-  background-color: transparent;
-  width: 100%;
-  max-width: 900px;
-  height: 250px;
-  perspective: 1000px;
-  margin: 0 auto 2rem auto;
-  cursor: pointer;
+    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: 100%;
-  height: 100%;
-  transition: transform 0.8s;
-  transform-style: preserve-3d;
-  border-radius: 15px;
+    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);
+    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: 16px;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+    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);
+    transform: rotateY(180deg);
 }
 
 a {
-  color: inherit;
-  text-decoration: underline;
+    color: inherit;
+    text-decoration: underline;
 }
 """
 
 # Interface
-with gr.Blocks(css = flip_card_css) as demo:
-    gr.HTML(flip_card_html)
+with gr.Blocks(css = description_css) as demo:
+    gr.HTML(description_html)
     gr.Markdown("---")
     gr.Interface(
         fn = transliterate,