Upload app.py

app.py

@@ -116,103 +116,76 @@ 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 */
-.lang_toggle label:hover input:not(:checked) ~ span,
-.lang_toggle label:hover:not(:has(input:checked)) span{
-  background:var(--primary-200)!important;
+/* --- Language buttons (real buttons, not Radio pills) --- */
+#results_hdr{
+  display:grid !important;
+  grid-template-columns: 1fr auto !important;
+  align-items:center !important;
+  gap:12px !important;
+  padding:0 !important;
+  margin:0 !important;
+  background:transparent !important;
+  box-shadow:none !important;
+  border:0 !important;
+}
+#results_hdr, #results_hdr *{
+  background:transparent !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{
+  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{
+  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{
+  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{
+  color:#0b1b19 !important;
 }
 """
 
@@ -521,12 +494,12 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
             btn = gr.Button("Marka / Tag", variant="primary")
 
     state = gr.State([])
+    lang_state = gr.State("fo")
 
     # Hide results header + toggle until Tag
     results_hdr = gr.Row(elem_id="results_hdr", visible=False)
     with results_hdr:
         results_title = gr.Markdown("### Úrslit / Results")
-        lang = gr.Radio(
             choices=[("Føroyskt","fo"), ("English","en")],
             value="fo",
             show_label=False,
@@ -552,19 +525,25 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
     with overview_acc:
         overview_md = gr.Markdown(build_overview("fo"))
 
-    def on_tag(sentence, lang_choice):
+    def on_tag(sentence, lang_current):
         rows = run_model(sentence)
-        df_main, df_mean, overview = render(rows, lang_choice)
+        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"
+
         return (
             rows,
             gr.update(value=df_main, visible=True),
-            gr.update(value=df_mean),
-            gr.update(value=overview),
-            gr.update(visible=True),   # expanded_acc
+            gr.update(value=df_mean, visible=True),
+            gr.update(value=overview, visible=True),
             gr.update(visible=True),   # results_hdr
+            gr.update(visible=True),   # expanded_acc
+            gr.update(variant=fo_var),
+            gr.update(variant=en_var),
         )
 
-    def on_lang(rows, lang_choice):
+    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))
 
@@ -575,10 +554,17 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
         queue=False,
     )
 
-    lang.change(
-        on_lang,
-        inputs=[state, lang],
-        outputs=[out_df, out_mean_df, overview_md],
+    btn_lang_fo.click(
+        on_set_fo,
+        inputs=[state],
+        outputs=[lang_state, out_df, out_mean_df, overview_md, btn_lang_fo, btn_lang_en],
+        queue=False,
+    )
+
+    btn_lang_en.click(
+        on_set_en,
+        inputs=[state],
+        outputs=[lang_state, out_df, out_mean_df, overview_md, btn_lang_fo, btn_lang_en],
         queue=False,
     )