Update app.py

app.py

@@ -35,219 +35,55 @@ UI = {
 
 MODEL_LINK = "https://huggingface.co/Setur/BRAGD"
 
-CSS = """:root{
-  /* tell the browser we support both */
-  color-scheme: light dark;
-
-  --primary-500:#89AFA9; --primary-600:#6F9992; --primary-700:#5B7F79;
-  --primary-100:#E1ECEA; --primary-200:#C6DAD6;
-
-  /* LIGHT */
-  --page-bg:#f7f7f8;
-  --panel-bg:#ffffff;
-  --text:#0b1b19;
-  --muted:#4b5a58;
-  --border: rgba(11,27,25,0.15);
-}
-#btn_tag{
-  background: var(--primary-500) !important;
-  border-color: var(--primary-600) !important;
-  color:#0b1b19 !important;
-}
-#btn_tag:hover{
-  background: var(--primary-600) !important;
-}
-
-/* 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) */
-.gr-button-primary, button.primary, .primary{
-  background:var(--primary-500)!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{ padding:0.35rem 0.85rem!important; font-size:0.95rem!important; }
+# ----------------------------
+# Minimal CSS: ONLY the buttons (and a tiny header layout helper)
+# ----------------------------
+CSS = """
+/* Keep Gradio default styling; only override our buttons. */
 
-/* Force Marka/Tag button styling (more reliable than Gradio class names) */
-#btn_tag{
-  background: var(--primary-500) !important;
-  border-color: var(--primary-600) !important;
+#btn_tag, #lang_fo_on, #lang_en_on{
+  background:#89AFA9 !important;
+  border-color:#6F9992 !important;
   color:#0b1b19 !important;
 }
-#btn_tag:hover{
-  background: var(--primary-600) !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;
-}
-
-/* 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;
-  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;
-}
-
-/* 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 !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; }
-
-/* 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 */
+#btn_tag:hover, #lang_fo_on:hover, #lang_en_on:hover{
+  background:#6F9992 !important;
+  border-color:#6F9992 !important;
+  color:#0b1b19 !important;
 }
 
-/* Active/selected */
-.lang_toggle label:has(input:checked){
-  background: #89AFA9 !important;
-  border-color: var(--primary-600) !important;
+#lang_fo_off, #lang_en_off{
+  background:#C6DAD6 !important;
+  border-color:#6F9992 !important;
   color:#0b1b19 !important;
 }
-
-/* Hover: show #89AFA9 (inactive becomes active color on hover) */
-.lang_toggle label:hover{
+#lang_fo_off:hover, #lang_en_off:hover{
   background:#89AFA9 !important;
-  border-color: var(--primary-600) !important;
+  border-color:#6F9992 !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;
+/* Dark mode: make the INACTIVE buttons match what you had before (darker, readable) */
+@media (prefers-color-scheme: dark){
+  #lang_fo_off, #lang_en_off{
+    background:#2a3b38 !important;
+    border-color:#6F9992 !important;
+    color:#e7eceb !important;
+  }
+  #lang_fo_off:hover, #lang_en_off:hover{
+    background:#89AFA9 !important;
+    border-color:#6F9992 !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) --- */
+/* Minimal layout so the language buttons stay hard-right like before */
 #results_hdr{
-  display:grid !important;
-  grid-template-columns: 1fr auto !important;
+  display:flex !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-markdown{ flex:1 1 auto !important; }
 #lang_buttons{
   display:flex !important;
   gap:10px !important;
@@ -255,243 +91,11 @@ a{ color:var(--primary-700)!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;
-}
-
-/* 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;
-}
-@media (prefers-color-scheme: dark){
-  :root{
-    --page-bg:#0f1214;
-    --panel-bg:#151a1e;
-    --text:#e7eceb;
-    --muted:#b8c3c1;
-    --border: rgba(231,236,235,0.18);
-
-    /* keep your brand, just shift the “inactive” background darker */
-    --primary-200:#2a3b38;
-  }
-
-  #btn_tag{
-    background: var(--primary-500) !important;
-    border-color: var(--primary-600) !important;
-    color:#0b1b19 !important;
-    }
-    #btn_tag:hover{
-    background: var(--primary-600) !important;
-    }
-
-  html, body, .gradio-container{
-    background: var(--page-bg) !important;
-    color: var(--text) !important;
-  }
-
-  body, .gradio-container, .prose, .markdown, label, p, span{
-    color: var(--text) !important;
-  }
-
-  .gr-block, .gr-panel, .gr-box, .gr-group, .gr-form{
-    background: transparent !important;
-    border-color: var(--border) !important;
-  }
-
-  #input_box textarea{
-    background: var(--panel-bg) !important;
-    color: var(--text) !important;
-    border: 1px solid var(--border) !important;
-  }
-  #input_box textarea::placeholder{
-    color: var(--muted) !important;
-  }
-
-  .gr-dataframe table{
-    background: var(--panel-bg) !important;
-    color: var(--text) !important;
-  }
-  .gr-dataframe table th,
-  .gr-dataframe table td{
-    background: var(--panel-bg) !important;
-    color: var(--text) !important;
-    border-color: var(--border) !important;
-  }
-
-  .gr-accordion, .gr-accordion *{
-    border-color: var(--border) !important;
-  }
-
-  a{ color: var(--primary-500) !important; }
-
-  .gr-button-primary, button.primary, .primary{
-    color: #0b1b19 !important;
-  }
-
-  #lang_fo_off, #lang_en_off{
-    background: var(--primary-200) !important;
-    border-color: var(--primary-600) !important;
-    color: var(--text) !important;
-  }
-    /* ---------- DARK MODE PATCH: fix Gradio component internals ---------- */
-
-  /* Headings / markdown titles (your “Úrslit”, accordion titles, etc.) */
-  .prose h1, .prose h2, .prose h3, .prose h4, .prose strong,
-  .gr-markdown h1, .gr-markdown h2, .gr-markdown h3, .gr-markdown h4,
-  .gr-markdown, .markdown, .prose {
-    color: var(--text) !important;
-  }
-
-  /* Accordion header/button text */
-  .gr-accordion summary,
-  .gr-accordion summary span,
-  .gr-accordion label,
-  .gr-accordion button {
-    color: var(--text) !important;
-  }
-
-  /* Make accordion header background readable */
-  .gr-accordion summary {
-    background: var(--panel-bg) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 10px !important;
-  }
-
-  /* Dataframe wrapper + all nested table bits */
-  .gr-dataframe,
-  .gr-dataframe .wrap,
-  .gr-dataframe .table-wrap,
-  .gr-dataframe table,
-  .gr-dataframe thead,
-  .gr-dataframe tbody,
-  .gr-dataframe tr,
-  .gr-dataframe th,
-  .gr-dataframe td {
-    background: var(--panel-bg) !important;
-    color: var(--text) !important;
-    border-color: var(--border) !important;
-  }
-
-  /* Fix links inside markdown in dark mode */
-  .gr-markdown a, .prose a {
-    color: var(--primary-500) !important;
-  }
-
-  /* Make inputs/selects/buttons inherit dark text properly */
-  input, textarea, select {
-    color: var(--text) !important;
-  }
-
-  /* FORCE your green primary button (Marka/Tag) even if Gradio theme fights back */
-  button.primary,
-  .gr-button-primary,
-  .gr-button.gr-button-primary,
-  button[data-testid="button"],
-  button:has(span:contains("Marka")),
-  button:has(span:contains("Tag")) {
-    background: var(--primary-500) !important;
-    border-color: var(--primary-600) !important;
-    color: #0b1b19 !important;
-  }
-  button.primary:hover,
-  .gr-button-primary:hover,
-  .gr-button.gr-button-primary:hover {
-    background: var(--primary-600) !important;
-  }
-    /* --- Dataframe: force readable text everywhere inside --- */
-  .gr-dataframe, .gr-dataframe *{
-    color: var(--text) !important;
-    border-color: var(--border) !important;
-  }
-
-  .gr-dataframe,
-  .gr-dataframe .wrap,
-  .gr-dataframe .table-wrap,
-  .gr-dataframe table,
-  .gr-dataframe thead,
-  .gr-dataframe tbody,
-  .gr-dataframe tr,
-  .gr-dataframe th,
-  .gr-dataframe td{
-    background: var(--panel-bg) !important;
-  }
-
-  /* --- Markdown + headings (Úrslit / Results etc.) --- */
-  #results_hdr, #results_hdr *{
-    color: var(--text) !important;
-  }
-
-  .gr-markdown, .gr-markdown *{
-    color: var(--text) !important;
-  }
-
-  /* --- Accordion header (the clickable bar) --- */
-  .gr-accordion summary,
-  .gr-accordion summary *{
-    color: var(--text) !important;
-  }
-
-  .gr-accordion summary{
-    background: var(--panel-bg) !important;
-    border: 1px solid var(--border) !important;
-  }
-
-  /* Accordion content area */
-  .gr-accordion .wrap,
-  .gr-accordion .wrap *{
-    color: var(--text) !important;
-  }
-@media (forced-colors: active){
-  /* Let the OS pick readable colors */
-  *{ forced-color-adjust: auto; }
-}
-
-}
 """
 
 # ----------------------------
@@ -784,9 +388,7 @@ def render(rows_state, lang: str):
         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))
 
-theme = gr.themes.Soft()
-
-with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
+with gr.Blocks(css=CSS, title="Marka") as demo:
     with gr.Row(equal_height=True):
         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")
@@ -801,7 +403,6 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
     state = gr.State([])
     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")
@@ -843,11 +444,10 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
             gr.update(value=df_mean),
             gr.update(value=overview),
             gr.update(visible=True),   # expanded_acc
-            # 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
+            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,
         )
 
@@ -882,7 +482,6 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
         queue=False,
     )
 
-    # Language switch (does NOT rerun the model; just re-renders existing rows)
     btn_lang_fo_on.click(
         on_set_fo,
         inputs=[state],