Upload app.py

app.py

@@ -35,8 +35,7 @@ UI = {
 
 MODEL_LINK = "https://huggingface.co/Setur/BRAGD"
 
-CSS = """
-:root{
+CSS = """:root{
   --primary-500:#89AFA9; --primary-600:#6F9992; --primary-700:#5B7F79;
   --primary-100:#E1ECEA; --primary-200:#C6DAD6;
   --page-bg:#f7f7f8;
@@ -51,7 +50,7 @@ body, .gradio-container, .prose, .markdown, textarea, input, select, button, tab
 }
 a{ color:var(--primary-700)!important; }
 
-/* Primary button */
+/* Primary button (Marka/Tag) */
 .gr-button-primary, button.primary, .primary{
   background:var(--primary-500)!important;
   border-color:var(--primary-600)!important;
@@ -60,7 +59,7 @@ a{ color:var(--primary-700)!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; }
 
-/* --- Make the entire left input area blend with page background --- */
+/* --- Keep the textbox exactly as-is: wrapper blends with page, textarea stays white --- */
 #input_col, #input_col *{
   background: transparent !important;
 }
@@ -74,7 +73,6 @@ a{ color:var(--primary-700)!important; }
   box-shadow:none !important;
   border:0 !important;
 }
-/* Keep the actual typing area white */
 #input_box textarea{
   background:#ffffff !important;
 }
@@ -91,47 +89,88 @@ a{ color:var(--primary-700)!important; }
   white-space: normal !important; width: 64% !important;
 }
 
-/* Results header row: no card backgrounds */
+/* Results header row: kill ALL white "cards"/panels behind the language buttons */
 #results_hdr{
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:12px;
-  padding:0;
+  padding:0 !important;
+  margin:0 !important;
   background:transparent !important;
+  box-shadow:none !important;
+  border:0 !important;
 }
-#results_hdr .gr-block, #results_hdr .gr-panel, #results_hdr .gr-box, #results_hdr .gr-group, #results_hdr .gr-form{
+#results_hdr, #results_hdr *{
+  background:transparent !important;
+  box-shadow:none !important;
+}
+#results_hdr .gr-block,
+#results_hdr .gr-panel,
+#results_hdr .gr-box,
+#results_hdr .gr-group,
+#results_hdr .gr-form,
+#results_hdr .gr-row,
+#results_hdr .gr-column{
   background:transparent !important;
   box-shadow:none !important;
   border:0 !important;
 }
 
-/* Language toggle: look like the Marka button */
-.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; }
-.lang_toggle input{ display:none!important; }
-
-/* Base button style (same geometry as Marka button) */
+/* Language toggle (gr.Radio) — remove Gradio's own button styling, keep only ours */
+.lang_toggle{
+  background: transparent !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 label{
+  /* This removes the OUTER "button" Gradio paints */
+  background:transparent!important;
+  border:0!important;
+  padding:0!important;
+  margin:0!important;
+  box-shadow:none!important;
+  border-radius:0!important;
+}
+.lang_toggle input{
+  display:none!important; /* no cursor, no default radio */
+}
 .lang_toggle label span{
+  /* This is the ONLY visible button layer */
+  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;
+  background: transparent; /* same as page background */
   color:#0b1b19;
+  box-shadow:none!important;
+  outline:none!important;
 }
-
-/* Selected = exactly like Marka button */
+/* Selected = match Marka/Tag exactly */
 .lang_toggle input:checked + span{
   background:var(--primary-500)!important;
   border-color:var(--primary-600)!important;
   color:#0b1b19!important;
 }
+/* Hover = subtle */
 .lang_toggle label:hover span{
-  background:var(--primary-200);
-}
-"""
+  background:var(--primary-200)!important;
+}"""
 
 # ----------------------------
 # Tokenization