Upload app.py

app.py

@@ -116,24 +116,105 @@ a{ color:var(--primary-700)!important; }
 #results_hdr > .gr-column:first-child{ justify-self:start !important; }
 #results_hdr > .gr-column:last-child{ justify-self:end !important; }
 
+/* Language toggle (gr.Radio): style the LABEL as the button (robust across Gradio DOM variants) */
+.lang_toggle{
+  background: transparent !important;
+  justify-self:end !important;
+}
+.lang_toggle fieldset{
+  border:0!important;
+  padding:0!important;
+  margin:0!important;
+  background:transparent!important;
+}
+.lang_toggle .wrap{
+  display:flex!important;
+  gap:10px!important;
+  background:transparent!important;
+  padding:0!important;
+  margin:0!important;
+}
+.lang_toggle input{
+  display:none!important;
+}
 
 /* Kill any default Gradio "pill" styling inside */
+.lang_toggle label *{
+  background:transparent!important;
+  box-shadow:none!important;
+  border:0!important;
+}
 
 /* The actual button */
+.lang_toggle label{
+  display:inline-flex !important;
+  align-items:center !important;
+  justify-content:center !important;
+  cursor:pointer !important;
+  user-select:none !important;
+
+  padding:0.35rem 0.85rem !important;
+  font-size:0.95rem !important;
+  border-radius:10px !important;
+
+  border:1px solid var(--primary-600) !important;
+  background: var(--primary-200) !important;  /* inactive: lighter than #89AFA9 */
+  color:#0b1b19 !important;                  /* black-ish */
+}
 
 /* Active/selected */
+.lang_toggle label:has(input:checked){
+  background: #89AFA9 !important;
+  border-color: var(--primary-600) !important;
+  color:#0b1b19 !important;
+}
 
 /* Hover: show #89AFA9 (inactive becomes active color on hover) */
+.lang_toggle label:hover{
+  background:#89AFA9 !important;
+  border-color: var(--primary-600) !important;
+  color:#0b1b19 !important;
+}
 
 
 /* Remove Gradio's default label styling completely */
+.lang_toggle label{
+  background:transparent!important;
+  border:0!important;
+  padding:0!important;
+  margin:0!important;
+  box-shadow:none!important;
+}
 
 /* Single visible button layer */
+.lang_toggle label span{
+  all: unset;
+  display:inline-block;
+  cursor:pointer;
+  user-select:none;
+  padding:0.35rem 0.85rem;
+  font-size:0.95rem;
+  border-radius:10px;
+  border:1px solid var(--primary-600);
+  background: transparent; /* same as page */
+  color:#0b1b19;
+  box-shadow:none!important;
+}
 
 /* Selected state (robust selectors) */
+.lang_toggle input:checked ~ span,
+.lang_toggle label:has(input:checked) span{
+  background:var(--primary-500)!important;
+  border-color:var(--primary-600)!important;
+  color:#0b1b19!important;
+}
 
 /* Hover: only unselected gets light background */
-/* --- Language buttons (real buttons, not Radio pills) --- */
+.lang_toggle label:hover input:not(:checked) ~ span,
+.lang_toggle label:hover:not(:has(input:checked)) span{
+  background:var(--primary-200)!important;
+}
+/* --- Language buttons (robust: 4 real buttons, show/hide to indicate active) --- */
 #results_hdr{
   display:grid !important;
   grid-template-columns: 1fr auto !important;
@@ -150,41 +231,32 @@ a{ color:var(--primary-700)!important; }
   box-shadow:none !important;
   border:0 !important;
 }
-
 #lang_buttons{
   display:flex !important;
   gap:10px !important;
   justify-content:flex-end !important;
   align-items:center !important;
 }
-
-/* Match Marka/Tag geometry */
-#lang_buttons .gr-button,
-#lang_buttons button{
+#lang_buttons .gr-button, #lang_buttons button{
   padding:0.35rem 0.85rem !important;
   font-size:0.95rem !important;
   border-radius:10px !important;
 }
 
-/* Inactive = lighter green, black text */
-#lang_buttons .gr-button-secondary,
-#lang_buttons button.secondary{
+/* Inactive: lighter than #89AFA9, black text */
+#lang_fo_off, #lang_en_off{
   background:var(--primary-200) !important;
   border-color:var(--primary-600) !important;
   color:#0b1b19 !important;
 }
-
 /* Hover inactive -> active color (#89AFA9) */
-#lang_buttons .gr-button-secondary:hover,
-#lang_buttons button.secondary:hover{
+#lang_fo_off:hover, #lang_en_off:hover{
   background:var(--primary-500) !important;
   border-color:var(--primary-600) !important;
   color:#0b1b19 !important;
 }
-
-/* Active already uses primary; ensure black text */
-#lang_buttons .gr-button-primary,
-#lang_buttons button.primary{
+/* Active: ensure black text */
+#lang_fo_on, #lang_en_on{
   color:#0b1b19 !important;
 }
 """
@@ -500,11 +572,11 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
     results_hdr = gr.Row(elem_id="results_hdr", visible=False)
     with results_hdr:
         results_title = gr.Markdown("### Úrslit / Results")
-            choices=[("Føroyskt","fo"), ("English","en")],
-            value="fo",
-            show_label=False,
-            elem_classes=["lang_toggle"],
-        )
+        with gr.Row(elem_id="lang_buttons"):
+            btn_lang_fo_on  = gr.Button("Føroyskt", variant="primary",   elem_id="lang_fo_on",  visible=True)
+            btn_lang_fo_off = gr.Button("Føroyskt", variant="secondary", elem_id="lang_fo_off", visible=False)
+            btn_lang_en_on  = gr.Button("English",  variant="primary",   elem_id="lang_en_on",  visible=False)
+            btn_lang_en_off = gr.Button("English",  variant="secondary", elem_id="lang_en_off", visible=True)
 
     out_df = gr.Dataframe(
         value=pd.DataFrame(columns=[UI["fo"]["w"], UI["fo"]["t"], UI["fo"]["s"]]),
@@ -529,42 +601,81 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
         rows = run_model(sentence)
         df_main, df_mean, overview = render(rows, lang_current)
 
-        fo_var = "primary" if lang_current == "fo" else "secondary"
-        en_var = "primary" if lang_current == "en" else "secondary"
+        show_fo = (lang_current == "fo")
+        show_en = (lang_current == "en")
 
         return (
             rows,
             gr.update(value=df_main, visible=True),
-            gr.update(value=df_mean, visible=True),
-            gr.update(value=overview, visible=True),
-            gr.update(visible=True),   # results_hdr
+            gr.update(value=df_mean),
+            gr.update(value=overview),
             gr.update(visible=True),   # expanded_acc
-            gr.update(variant=fo_var),
-            gr.update(variant=en_var),
+            gr.update(visible=True),   # results_hdr
+            gr.update(visible=show_fo),   # fo_on
+            gr.update(visible=not show_fo), # fo_off
+            gr.update(visible=show_en),   # en_on
+            gr.update(visible=not show_en), # en_off
+            lang_current,
         )
 
-    def on_set_lang(rows, lang_choice):
-        df_main, df_mean, overview = render(rows, lang_choice)
-        return (gr.update(value=df_main), gr.update(value=df_mean), gr.update(value=overview))
+    def on_set_lang(rows, lang_value):
+        df_main, df_mean, overview = render(rows, lang_value)
+
+        show_fo = (lang_value == "fo")
+        show_en = (lang_value == "en")
+
+        return (
+            lang_value,
+            gr.update(value=df_main),
+            gr.update(value=df_mean),
+            gr.update(value=overview),
+            gr.update(visible=show_fo),
+            gr.update(visible=not show_fo),
+            gr.update(visible=show_en),
+            gr.update(visible=not show_en),
+        )
+
+    def on_set_fo(rows):
+        return on_set_lang(rows, "fo")
+
+    def on_set_en(rows):
+        return on_set_lang(rows, "en")
 
     btn.click(
         on_tag,
-        inputs=[inp, lang],
-        outputs=[state, out_df, out_mean_df, overview_md, expanded_acc, results_hdr],
+        inputs=[inp, lang_state],
+        outputs=[state, out_df, out_mean_df, overview_md, expanded_acc, results_hdr,
+                 btn_lang_fo_on, btn_lang_fo_off, btn_lang_en_on, btn_lang_en_off, lang_state],
         queue=False,
     )
 
-    btn_lang_fo.click(
+    # Language switch (does NOT rerun the model; just re-renders existing rows)
+    btn_lang_fo_on.click(
         on_set_fo,
         inputs=[state],
-        outputs=[lang_state, out_df, out_mean_df, overview_md, btn_lang_fo, btn_lang_en],
+        outputs=[lang_state, out_df, out_mean_df, overview_md,
+                 btn_lang_fo_on, btn_lang_fo_off, btn_lang_en_on, btn_lang_en_off],
         queue=False,
     )
-
-    btn_lang_en.click(
+    btn_lang_fo_off.click(
+        on_set_fo,
+        inputs=[state],
+        outputs=[lang_state, out_df, out_mean_df, overview_md,
+                 btn_lang_fo_on, btn_lang_fo_off, btn_lang_en_on, btn_lang_en_off],
+        queue=False,
+    )
+    btn_lang_en_on.click(
+        on_set_en,
+        inputs=[state],
+        outputs=[lang_state, out_df, out_mean_df, overview_md,
+                 btn_lang_fo_on, btn_lang_fo_off, btn_lang_en_on, btn_lang_en_off],
+        queue=False,
+    )
+    btn_lang_en_off.click(
         on_set_en,
         inputs=[state],
-        outputs=[lang_state, out_df, out_mean_df, overview_md, btn_lang_fo, btn_lang_en],
+        outputs=[lang_state, out_df, out_mean_df, overview_md,
+                 btn_lang_fo_on, btn_lang_fo_off, btn_lang_en_on, btn_lang_en_off],
         queue=False,
     )