Update app.py

app.py

@@ -11,46 +11,43 @@ from transformers import AutoTokenizer, AutoModelForTokenClassification
 # Config
 # ----------------------------
 MODEL_ID = "Setur/BRAGD"
-TAGS_FILEPATH = "Sosialurin-BRAGD_tags.csv"   # must match model labels
-LABELS_FILEPATH = "tag_labels.json"           # add to repo root (FO+EN labels)
-HF_TOKEN = os.getenv("BRAGD")                 # Space secret
+TAGS_FILEPATH = "Sosialurin-BRAGD_tags.csv"
+LABELS_FILEPATH = "tag_labels.json"
+HF_TOKEN = os.getenv("BRAGD")
 
 if not HF_TOKEN:
     raise RuntimeError("Missing BRAGD token secret (Space → Settings → Secrets → BRAGD).")
 if not os.path.exists(LABELS_FILEPATH):
     raise RuntimeError(f"Missing {LABELS_FILEPATH}. Add it to the Space repo root.")
-if not os.path.exists(TAGS_FILEPATH):
-    raise RuntimeError(f"Missing {TAGS_FILEPATH}. Add it to the Space repo root.")
 
-# Match your demo.py intervals
 INTERVALS = (
     (15, 29), (30, 33), (34, 36), (37, 41), (42, 43), (44, 45), (46, 50),
     (51, 53), (54, 60), (61, 63), (64, 66), (67, 70), (71, 72)
 )
 
-GROUP_ORDER = [
-    "subcategory","gender","number","case","article","proper",
-    "degree","declension","mood","voice","tense","person","definiteness"
-]
+GROUP_ORDER = ["subcategory","gender","number","case","article","proper","degree","declension","mood","voice","tense","person","definiteness"]
+HIDE_CODES = {"subcategory": {"B"}}  # Subcategory B to be removed
 
-# You said Subcategory B doesn't exist and will be deleted from the CSV:
-HIDE_CODES = {"subcategory": {"B"}}
+UI = {
+    "fo": {"w":"Orð", "t":"Mark", "s":"Útgreining", "m":"Útgreinað marking"},
+    "en": {"w":"Word","t":"Tag", "s":"Analysis", "m":"Expanded tags"},
+}
 
 MODEL_LINK = "https://huggingface.co/Setur/BRAGD"
 
-# ----------------------------
-# Theme + CSS
-# ----------------------------
-CSS = """
-:root{
+CSS = """:root{
   --primary-500:#89AFA9; --primary-600:#6F9992; --primary-700:#5B7F79;
   --primary-100:#E1ECEA; --primary-200:#C6DAD6;
+  --page-bg:#f7f7f8;
 }
 
+/* Page background */
+html, body, .gradio-container{
+  background: var(--page-bg) !important;
+}
 body, .gradio-container, .prose, .markdown, textarea, input, select, button, table{
   font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif !important;
 }
-
 a{ color:var(--primary-700)!important; }
 
 /* Primary button (Marka/Tag) */
@@ -59,94 +56,233 @@ a{ color:var(--primary-700)!important; }
   border-color:var(--primary-600)!important;
   color:#0b1b19!important;
 }
-.gr-button-primary:hover, button.primary:hover, .primary:hover{
-  background:var(--primary-600)!important;
+.gr-button-primary:hover, button.primary:hover, .primary:hover{ background:var(--primary-600)!important; }
+.gr-button-primary{ padding:0.35rem 0.85rem!important; font-size:0.95rem!important; }
+
+/* --- Keep the textbox exactly as-is: wrapper blends with page, textarea stays white --- */
+#input_col, #input_col *{
+  background: transparent !important;
+}
+#input_col .gr-block, #input_col .gr-panel, #input_col .gr-box, #input_col .gr-group, #input_col .gr-form{
+  background: transparent !important;
+  box-shadow:none !important;
+  border:0 !important;
+}
+#input_box, #input_box > div, #input_box .wrap, #input_box .container{
+  background: transparent !important;
+  box-shadow:none !important;
+  border:0 !important;
+}
+#input_box textarea{
+  background:#ffffff !important;
 }
 
-/* Keep Orð + Mark on one line; allow Útgreining to wrap */
-.gr-dataframe table td:nth-child(1),
-.gr-dataframe table th:nth-child(1){
-  white-space: nowrap !important;
-  width: 18% !important;
+/* Dataframe columns: keep Orð + Mark single-line */
+.gr-dataframe table td:nth-child(1), .gr-dataframe table th:nth-child(1){
+  white-space: nowrap !important; width: 18% !important;
 }
-.gr-dataframe table td:nth-child(2),
-.gr-dataframe table th:nth-child(2){
-  white-space: nowrap !important;
-  width: 18% !important;
+.gr-dataframe table td:nth-child(2), .gr-dataframe table th:nth-child(2){
+  white-space: nowrap !important; width: 18% !important;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
 }
-.gr-dataframe table td:nth-child(3),
-.gr-dataframe table th:nth-child(3){
-  white-space: normal !important;
-  width: 64% !important;
+.gr-dataframe table td:nth-child(3), .gr-dataframe table th:nth-child(3){
+  white-space: normal !important; width: 64% !important;
 }
 
-/* Results header layout: title left, language buttons right */
+/* Selected = match Marka/Tag exactly */
+/* Hover = subtle */
+/* Keep selected button color on hover; only lighten UNSELECTED on hover */
+/* Push language buttons fully to the right */
+#results_hdr > .gr-markdown{
+  flex:1 1 auto !important;
+}
+/* Results header row: two-column layout, title left, toggle hard-right */
 #results_hdr{
-  display:grid;
-  grid-template-columns:1fr auto;
-  align-items:center;
-  gap:16px;
-  margin-top:10px;
+  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 > .gr-column:first-child{ justify-self:start !important; }
+#results_hdr > .gr-column:last-child{ justify-self:end !important; }
 
-/* Remove any “box” background around the language selector */
+/* Language toggle (gr.Radio): style the LABEL as the button (robust across Gradio DOM variants) */
 .lang_toggle{
   background: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  padding: 0 !important;
-  margin: 0 !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;
-  justify-content:flex-end;
-  gap:10px;
+  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;
 }
 
-/* Hide native radio circles */
-.lang_toggle input[type="radio"]{
-  display:none !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;
 }
 
-/* Button-like labels */
+/* Single visible button layer */
 .lang_toggle label span{
   all: unset;
   display:inline-block;
   cursor:pointer;
   user-select:none;
-  padding:0.35rem 0.90rem;
+  padding:0.35rem 0.85rem;
   font-size:0.95rem;
-  font-weight:600;
   border-radius:10px;
   border:1px solid var(--primary-600);
-  background: var(--primary-200); /* inactive */
+  background: transparent; /* same as page */
   color:#0b1b19;
+  box-shadow:none!important;
 }
 
-/* Selected */
-.lang_toggle input:checked + span{
+/* 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 */
-.lang_toggle label:hover 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 (robust: 4 real buttons, show/hide to indicate active) --- */
+#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;
+}
+#lang_buttons{
+  display:flex !important;
+  gap:10px !important;
+  justify-content:flex-end !important;
+  align-items:center !important;
+  flex-wrap:nowrap !important;
+}
+#lang_buttons .gr-button, #lang_buttons button{
+  padding:0.35rem 0.85rem !important;
+  font-size:0.95rem !important;
+  border-radius:10px !important;
 }
-"""
 
-# ----------------------------
-# UI text
-# ----------------------------
-UI = {
-    "fo": {"w":"Orð", "t":"Mark", "s":"Útgreining", "m":"Útgreinað marking"},
-    "en": {"w":"Word","t":"Tag", "s":"Analysis", "m":"Expanded tags"},
+/* 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_fo_off:hover, #lang_en_off:hover{
+  background:var(--primary-500) !important;
+  border-color:var(--primary-600) !important;
+  color:#0b1b19 !important;
+}
+/* Active: ensure black text */
+#lang_fo_on, #lang_en_on{
+  color:#0b1b19 !important;
+}
+
+/* Keep header transparent, but DON'T nuke button backgrounds */
+#results_hdr, #results_hdr > div{
+  background:transparent !important;
+  box-shadow:none !important;
+  border:0 !important;
+}
+
+/* Prevent Gradio from stacking/stretching language buttons */
+#lang_buttons .gr-button, #lang_buttons button{
+  width:auto !important;
+  min-width:120px !important;
+  flex:0 0 auto !important;
 }
 
+/* Language button colors */
+#lang_buttons .gr-button-primary, #lang_buttons button.primary{
+  background:#89AFA9 !important;
+  border-color:#6F9992 !important;
+  color:#0b1b19 !important;
+}
+#lang_buttons .gr-button-secondary, #lang_buttons button.secondary{
+  background:#C6DAD6 !important;  /* light green */
+  border-color:#6F9992 !important;
+  color:#0b1b19 !important;
+}
+#lang_buttons .gr-button-secondary:hover, #lang_buttons button.secondary:hover{
+  background:#89AFA9 !important;
+  border-color:#6F9992 !important;
+  color:#0b1b19 !important;
+}
+"""
+
 # ----------------------------
 # Tokenization
 # ----------------------------
@@ -188,9 +324,6 @@ def group_from_col(col: str):
             return (g, col.split()[-1])
     return (None,None)
 
-# ----------------------------
-# Decode helpers (your logic)
-# ----------------------------
 def process_tag_features(tag_to_features: dict, intervals):
     arrs = [np.array(tpl) for tpl in set(tuple(a) for a in tag_to_features.values())]
     wt_masks = {wt:[a for a in arrs if a[wt]==1] for wt in range(15)}
@@ -209,23 +342,19 @@ def predict_vectors(logits, attention_mask, begin_tokens, dict_intervals, vec_le
     for idx in range(len(logits)):
         if attention_mask[idx].item()!=1 or begin_tokens[idx]!=1:
             continue
-
         pred = logits[idx]
         vec = torch.zeros(vec_len, device=logits.device)
-
         wt = torch.argmax(softmax(pred[0:15])).item()
         vec[wt]=1
-
         for (a,b) in dict_intervals.get(wt, []):
             seg = pred[a:b+1]
             k = torch.argmax(softmax(seg)).item()
             vec[a+k]=1
-
         vectors.append(vec)
     return vectors
 
 # ----------------------------
-# Load labels (FO/EN)
+# Load labels
 # ----------------------------
 with open(LABELS_FILEPATH, "r", encoding="utf-8") as f:
     LABELS = json.load(f)
@@ -241,7 +370,7 @@ def label_for(lang: str, group: str, wc: str, code: str) -> str:
 def clean_label(s: str) -> str:
     s = (s or "").strip()
     s = re.sub(r"\s+", " ", s)
-    return s.strip(" -;,:") 
+    return s.strip(" -;,:").strip()
 
 # ----------------------------
 # Load model + mapping
@@ -250,18 +379,15 @@ tag_to_features, features_to_tag, VEC_LEN, FEATURE_COLS = load_tag_mappings(TAGS
 
 tokenizer = AutoTokenizer.from_pretrained(MODEL_ID, token=HF_TOKEN)
 model = AutoModelForTokenClassification.from_pretrained(MODEL_ID, token=HF_TOKEN)
-
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 model.to(device); model.eval()
 
-if hasattr(model, "config") and hasattr(model.config, "num_labels"):
-    if model.config.num_labels != VEC_LEN:
-        raise RuntimeError(f"Label size mismatch: model={model.config.num_labels}, csv={VEC_LEN}. Wrong CSV?")
+if hasattr(model, "config") and hasattr(model.config, "num_labels") and model.config.num_labels != VEC_LEN:
+    raise RuntimeError(f"Label size mismatch: model={model.config.num_labels}, csv={VEC_LEN}. Wrong CSV?")
 
 DICT_INTERVALS = process_tag_features(tag_to_features, INTERVALS)
 
-# Build GROUPS from CSV headers
-GROUPS = defaultdict(list)  # group -> [(idx, code, colname)]
+GROUPS = defaultdict(list)
 for i,col in enumerate(FEATURE_COLS):
     g,code = group_from_col(col)
     if g and code not in HIDE_CODES.get(g, set()):
@@ -285,14 +411,7 @@ def group_code(vec: torch.Tensor, group: str) -> str:
             return code
     return ""
 
-# ----------------------------
-# Display rules
-# ----------------------------
-HIDE_IN_ANALYSIS = {
-    ("D", "subcategory", "G"),
-    ("D", "subcategory", "N"),
-}
-
+HIDE_IN_ANALYSIS = {("D","subcategory","G"), ("D","subcategory","N")}
 VOICE_ANALYSIS = {
     "fo": {"A": "gerðsøgn", "M": "miðalsøgn", "v": "orð luttøkuháttur"},
     "en": {"A": "active voice", "M": "middle voice", "v": "supine form"},
@@ -303,20 +422,17 @@ def analysis_text(vec: torch.Tensor, lang: str) -> str:
     tag = vector_to_tag(vec)
     wc = wc_code(vec)
 
-    # DGd override
     if tag == "DGd":
         return "fyriseting" if lang=="fo" else "preposition"
 
     mood = group_code(vec, "mood")
-    if mood == "U":  # luttøkuháttur / supine
+    if mood == "U":
         sup = label_for(lang, "mood", wc, "U") or ("luttøkuháttur" if lang=="fo" else "supine")
         vcode = group_code(vec, "voice") or "v"
         vlabel = VOICE_ANALYSIS[lang].get(vcode, VOICE_ANALYSIS[lang]["v"])
         return f"{clean_label(sup)}, {clean_label(vlabel)}"
 
     parts = []
-
-    # Pronouns + conjunctions: start with subcategory
     if wc in {"P","C"}:
         subc = group_code(vec, "subcategory")
         subl = clean_label(label_for(lang, "subcategory", wc, subc) or "")
@@ -335,12 +451,8 @@ def analysis_text(vec: torch.Tensor, lang: str) -> str:
             continue
         if (wc, g, c) in HIDE_IN_ANALYSIS:
             continue
-
-        lbl = label_for(lang, g, wc, c) or label_for(lang, g, "", c) or ""
-        lbl = clean_label(lbl)
-        if not lbl:
-            continue
-        if lbl not in parts:
+        lbl = clean_label(label_for(lang, g, wc, c) or label_for(lang, g, "", c) or "")
+        if lbl and lbl not in parts:
             parts.append(lbl)
 
     return ", ".join(parts)
@@ -349,24 +461,20 @@ def expanded_text(vec: torch.Tensor, lang: str) -> str:
     lang = "fo" if lang=="fo" else "en"
     wc = wc_code(vec)
     parts = []
-
     wc_lbl = label_for(lang, "word_class", wc, wc)
     parts.append(f"{wc} – {wc_lbl}" if wc_lbl else wc)
-
     for g in GROUP_ORDER:
         c = group_code(vec, g)
         if not c:
             continue
         lbl = label_for(lang, g, wc, c) or label_for(lang, g, "", c)
         parts.append(f"{c} – {lbl}" if lbl else c)
-
     return "; ".join([p for p in parts if p])
 
 def compute_codes_by_wc():
-    codes = defaultdict(lambda: defaultdict(set))  # wc -> group -> set(code)
+    codes = defaultdict(lambda: defaultdict(set))
     for arr in tag_to_features.values():
         arr = np.array(arr)
-
         wc = None
         for idx,code,_ in GROUPS["word_class"]:
             if arr[idx]==1:
@@ -374,7 +482,6 @@ def compute_codes_by_wc():
                 break
         if not wc:
             continue
-
         for g in GROUP_ORDER:
             hidden = HIDE_CODES.get(g, set())
             for idx,code,_ in GROUPS.get(g, []):
@@ -382,7 +489,6 @@ def compute_codes_by_wc():
                     continue
                 if arr[idx]==1:
                     codes[wc][g].add(code)
-
     return codes
 
 CODES_BY_WC = compute_codes_by_wc()
@@ -391,44 +497,29 @@ def build_overview(lang: str) -> str:
     lang = "fo" if lang=="fo" else "en"
     title = "### Markayvirlit" if lang=="fo" else "### Tag Overview"
     lines = [title, ""]
-
     for wc in sorted(CODES_BY_WC.keys()):
         wcl = label_for(lang, "word_class", wc, wc) or ""
         lines.append(f"#### {wc} — {wcl}" if wcl else f"#### {wc}")
-
         for g in GROUP_ORDER:
             cs = sorted(CODES_BY_WC[wc].get(g, set()))
             if not cs:
                 continue
-
             group_name = {
-                "fo": {
-                    "subcategory":"Undirflokkur", "gender":"Kyn", "number":"Tal", "case":"Fall",
-                    "article":"Bundni/óbundni", "proper":"Sernavn / felagsnavn", "degree":"Stig",
-                    "declension":"Bending", "mood":"Háttur", "voice":"Søgn", "tense":"Tíð",
-                    "person":"Persónur", "definiteness":"Bundni/óbundni",
-                },
-                "en": {
-                    "subcategory":"Subcategory", "gender":"Gender", "number":"Number", "case":"Case",
-                    "article":"Definiteness", "proper":"Proper/common noun", "degree":"Degree",
-                    "declension":"Declension", "mood":"Mood", "voice":"Voice", "tense":"Tense",
-                    "person":"Person", "definiteness":"Definiteness",
-                }
+                "fo": {"subcategory":"Undirflokkur","gender":"Kyn","number":"Tal","case":"Fall","article":"Bundni/óbundni",
+                       "proper":"Sernavn / felagsnavn","degree":"Stig","declension":"Bending","mood":"Háttur","voice":"Søgn",
+                       "tense":"Tíð","person":"Persónur","definiteness":"Bundni/óbundni"},
+                "en": {"subcategory":"Subcategory","gender":"Gender","number":"Number","case":"Case","article":"Definiteness",
+                       "proper":"Proper/common noun","degree":"Degree","declension":"Declension","mood":"Mood","voice":"Voice",
+                       "tense":"Tense","person":"Person","definiteness":"Definiteness"},
             }[lang].get(g, g)
-
             lines.append(f"**{group_name}**")
             for c in cs:
                 lbl = label_for(lang, g, wc, c) or label_for(lang, g, "", c)
                 lines.append(f"- `{c}` — {lbl}" if lbl else f"- `{c}`")
             lines.append("")
-
         lines.append("")
-
     return "\n".join(lines).strip()
 
-# ----------------------------
-# Inference
-# ----------------------------
 def run_model(sentence: str):
     s = (sentence or "").strip()
     if not s:
@@ -436,24 +527,13 @@ def run_model(sentence: str):
     tokens = simp_tok(s)
     if not tokens:
         return []
-
-    enc = tokenizer(
-        tokens,
-        is_split_into_words=True,
-        add_special_tokens=True,
-        max_length=128,
-        padding="max_length",
-        truncation=True,
-        return_attention_mask=True,
-        return_tensors="pt",
-    )
-
+    enc = tokenizer(tokens, is_split_into_words=True, add_special_tokens=True, max_length=128,
+                    padding="max_length", truncation=True, return_attention_mask=True, return_tensors="pt")
     input_ids = enc["input_ids"].to(device)
     attention_mask = enc["attention_mask"].to(device)
     word_ids = enc.word_ids(batch_index=0)
 
-    begin = []
-    last = None
+    begin, last = [], None
     for wid in word_ids:
         if wid is None:
             begin.append(0)
@@ -468,9 +548,7 @@ def run_model(sentence: str):
 
     vectors = predict_vectors(logits, attention_mask[0], begin, DICT_INTERVALS, VEC_LEN)
 
-    rows = []
-    vec_i = 0
-    seen = set()
+    rows, vec_i, seen = [], 0, set()
     for i,wid in enumerate(word_ids):
         if wid is None or begin[i]!=1 or wid in seen:
             continue
@@ -485,117 +563,143 @@ def render(rows_state, lang: str):
     lang = "fo" if lang=="fo" else "en"
     df_cols = [UI[lang]["w"], UI[lang]["t"], UI[lang]["s"]]
     dfm_cols = [UI[lang]["w"], UI[lang]["t"], UI[lang]["m"]]
-
     if not rows_state:
-        empty_main = pd.DataFrame(columns=df_cols)
-        empty_mean = pd.DataFrame(columns=dfm_cols)
-        return empty_main, empty_mean, build_overview(lang)
-
+        return (pd.DataFrame(columns=df_cols), pd.DataFrame(columns=dfm_cols), build_overview(lang))
     out_main, out_mean = [], []
     for r in rows_state:
         vec = torch.tensor(r["vec"])
         tag = vector_to_tag(vec)
         out_main.append([r["word"], tag, analysis_text(vec, lang)])
         out_mean.append([r["word"], tag, expanded_text(vec, lang)])
+    return (pd.DataFrame(out_main, columns=df_cols), pd.DataFrame(out_mean, columns=dfm_cols), build_overview(lang))
 
-    return (
-        pd.DataFrame(out_main, columns=df_cols),
-        pd.DataFrame(out_mean, columns=dfm_cols),
-        build_overview(lang),
-    )
-
-# ----------------------------
-# Gradio UI
-# ----------------------------
 theme = gr.themes.Soft()
 
-with gr.Blocks(theme=theme, title="Marka") as demo:
-    # Top: textbox LEFT, info+button RIGHT  (DO NOT CHANGE TEXTBOX)
+with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
     with gr.Row(equal_height=True):
-        with gr.Column(scale=2):
-            inp = gr.Textbox(
-                lines=5,
-                placeholder="Skriva her ... / Type here ...",
-                show_label=False,
-            )
+        with gr.Column(scale=2, elem_id="input_col"):
+            inp = gr.Textbox(lines=6, placeholder="Skriva her ... / Type here ...", show_label=False, elem_id="input_box")
         with gr.Column(scale=1, min_width=320):
             gr.Markdown(
-                "## Marka\n\n"
+                "## Marka\n"
                 "Skriv ein setning í kassan og fá hann markaðan.\n\n"
                 f"Myndil / Model: [{MODEL_ID}]({MODEL_LINK})"
             )
             btn = gr.Button("Marka / Tag", variant="primary")
 
     state = gr.State([])
-
-    # Results header (hidden until first run)
-    with gr.Row(elem_id="results_hdr", visible=False) as results_hdr:
-        gr.Markdown("### Úrslit / Results")
-        lang = gr.Radio(
-            choices=[("Føroyskt","fo"), ("English","en")],
-            value="fo",
-            show_label=False,
-            elem_classes=["lang_toggle"],
-        )
+    lang_state = gr.State("fo")
+
+    # Hide results header + toggle until Tag
+    results_hdr = gr.Row(elem_id="results_hdr", visible=True)
+    with results_hdr:
+        results_title = gr.Markdown("### Úrslit / Results")
+        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"]]),
-        wrap=True,
-        interactive=False,
-        show_label=False,
-        row_count=(0, "fixed"),
-        col_count=(3, "fixed"),
+        wrap=True, interactive=False, show_label=False,
+        row_count=(0, "fixed"), col_count=(3, "fixed"),
         visible=False,
     )
 
-    with gr.Accordion("Útgreinað marking / Expanded tags", open=False, visible=False) as expanded_acc:
+    expanded_acc = gr.Accordion("Útgreinað marking / Expanded tags", open=False, visible=False)
+    with expanded_acc:
         out_mean_df = gr.Dataframe(
             value=pd.DataFrame(columns=[UI["fo"]["w"], UI["fo"]["t"], UI["fo"]["m"]]),
-            wrap=True,
-            interactive=False,
-            show_label=False,
-            row_count=(0, "fixed"),
-            col_count=(3, "fixed"),
-            visible=True,
+            wrap=True, interactive=False, show_label=False,
+            row_count=(0, "fixed"), col_count=(3, "fixed"),
         )
 
-    # Markayvirlit always visible
-    with gr.Accordion("Markayvirlit / Tag Overview", open=False, visible=True):
-        overview_md = gr.Markdown(build_overview("fo"), visible=True)
+    overview_acc = gr.Accordion("Markayvirlit / Tag Overview", open=False, visible=True)
+    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)
+
+        show_fo = (lang_current == "fo")
+        show_en = (lang_current == "en")
+
         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(visible=True),   # results_hdr
+            # results_hdr is always visible now
+            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_lang(rows, lang_choice):
-        df_main, df_mean, overview = render(rows, lang_choice)
+    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,
+                 btn_lang_fo_on, btn_lang_fo_off, btn_lang_en_on, btn_lang_en_off, lang_state],
         queue=False,
     )
 
-    lang.change(
-        on_lang,
-        inputs=[state, lang],
-        outputs=[out_df, out_mean_df, overview_md],
+    # 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_on, btn_lang_fo_off, btn_lang_en_on, btn_lang_en_off],
+        queue=False,
+    )
+    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_on, btn_lang_fo_off, btn_lang_en_on, btn_lang_en_off],
         queue=False,
     )
 
 if __name__ == "__main__":
-    demo.launch(css=CSS)
+    demo.launch()