Upload app.py

app.py

@@ -46,16 +46,39 @@ CSS = """
 :root{
   --primary-500:#89AFA9; --primary-600:#6F9992; --primary-700:#5B7F79;
   --primary-100:#E1ECEA; --primary-200:#C6DAD6;
+  --page-bg: #f7f7f8;
+}
+
+/* Force a consistent page background (and remove white "cards" where possible) */
+html, body{
+  background: var(--page-bg) !important;
+}
+.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;
 }
+
+/* Primary button */
 .gr-button-primary, button.primary, .primary{
-  background:var(--primary-500)!important; border-color:var(--primary-600)!important; color:#0b1b19!important;
+  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; }
 a{ color:var(--primary-700)!important; }
 
+/* Remove "card" background around textbox wrapper; keep textarea readable */
+#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 column wrapping: keep Orð + Mark on one line */
 .gr-dataframe table td:nth-child(1),
 .gr-dataframe table th:nth-child(1){
@@ -74,7 +97,7 @@ a{ color:var(--primary-700)!important; }
   width: 64% !important;
 }
 
-/* Results header: make it a clean left-title / right-language bar (no grey blocks) */
+/* Results header: clean left-title / right-language bar (no white container blocks) */
 #results_hdr{
   display:flex;
   align-items:center;
@@ -83,18 +106,22 @@ a{ color:var(--primary-700)!important; }
   padding: 0;
   background: transparent !important;
 }
-#results_hdr > div{
+#results_hdr *{
+  background: transparent !important;
+}
+#results_hdr .gr-block,
+#results_hdr .gr-form,
+#results_hdr .gr-box,
+#results_hdr .gr-panel,
+#results_hdr .gr-group{
   background: transparent !important;
-  padding: 0 !important;
-  margin: 0 !important;
   box-shadow: none !important;
   border: 0 !important;
 }
 
-/* Language toggle (radio styled as segmented buttons) */
+/* Language toggle: segmented buttons, selected matches primary button */
 .lang_toggle{
   display:flex;
-  gap: 8px;
   justify-content:flex-end;
   align-items:center;
 }
@@ -102,31 +129,43 @@ a{ color:var(--primary-700)!important; }
   border: 0 !important;
   padding: 0 !important;
   margin: 0 !important;
+  background: transparent !important;
 }
 .lang_toggle .wrap{
   display:flex !important;
-  gap: 8px !important;
+  gap: 10px !important;
+  background: transparent !important;
 }
 .lang_toggle input{
-  display:none !important; /* removes cursor + text field behavior entirely */
+  display:none !important; /* no cursor ever */
 }
 .lang_toggle label{
   cursor:pointer;
-  padding: 8px 12px;
-  border-radius: 10px;
-  border: 1px solid rgba(0,0,0,.12);
-  background: white;
+  padding: 9px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(0,0,0,.14);
+  background: transparent !important; /* match page background */
   user-select:none;
-  font-size: 0.95rem;
+  font-size: 0.98rem;
+  box-shadow: none !important;
 }
-.lang_toggle input:checked + span,
-.lang_toggle label.selected{
-  background: var(--primary-100) !important;
-  border-color: var(--primary-500) !important;
+.lang_toggle label:hover{
+  border-color: rgba(0,0,0,.22);
+}
+.lang_toggle input:checked + span{
+  background: var(--primary-500) !important;
+  color:#0b1b19 !important;
+  border-radius: 12px;
+  padding: 9px 14px;
+  border: 1px solid var(--primary-600) !important;
+  display:inline-block;
 }
 
 /* Slightly smaller primary button */
 .gr-button-primary{ padding: 0.35rem 0.85rem !important; font-size: 0.95rem !important; }
+
+/* Make the right-side title "Marka" slightly bigger */
+#info_panel h2{ margin-top: 0.2rem; }
 """
 
 # ----------------------------
@@ -271,9 +310,8 @@ def group_code(vec: torch.Tensor, group: str) -> str:
 # Display rules
 # ----------------------------
 HIDE_IN_ANALYSIS = {
-    # Word class D: hide "stýrir falli" / "stýrir ikki falli" in Analysis
-    ("D", "subcategory", "G"),
-    ("D", "subcategory", "N"),
+    ("D", "subcategory", "G"),  # stýrir falli
+    ("D", "subcategory", "N"),  # stýrir ikki falli
 }
 
 VOICE_ANALYSIS = {
@@ -500,25 +538,25 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
                 lines=6,
                 placeholder="Skriva her ... / Type here ...",
                 show_label=False,
+                elem_id="input_box",
             )
-        with gr.Column(scale=1, min_width=320):
+        with gr.Column(scale=1, min_width=320, elem_id="info_panel"):
             gr.Markdown(
-                "### Marka\n"
-                "Skriv setningin í kassan vinstrumegin og fá hann markaðan.\n\n"
-                f"**Myndil / Model:** [{MODEL_ID}]({MODEL_LINK})"
+                "## 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 row (hidden until first run)
+    # Results header row (always visible; table stays hidden until Tag)
     with gr.Row(elem_id="results_hdr"):
-        results_title = gr.Markdown("### Úrslit / Results", visible=False)
+        gr.Markdown("### Úrslit / Results")
         lang = gr.Radio(
             choices=[("Føroyskt","fo"), ("English","en")],
             value="fo",
             show_label=False,
-            visible=False,
             elem_classes=["lang_toggle"],
         )
 
@@ -532,6 +570,7 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
         visible=False,
     )
 
+    # Expanded tags: hidden until tagged
     expanded_acc = gr.Accordion("Útgreinað marking / Expanded tags", open=False, visible=False)
     with expanded_acc:
         out_mean_df = gr.Dataframe(
@@ -543,9 +582,10 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
             col_count=(3, "fixed"),
         )
 
-    overview_acc = gr.Accordion("Markayvirlit / Tag Overview", open=False, visible=False)
+    # Markayvirlit: always visible
+    overview_acc = gr.Accordion("Markayvirlit / Tag Overview", open=False, visible=True)
     with overview_acc:
-        overview_md = gr.Markdown("")
+        overview_md = gr.Markdown(build_overview("fo"))
 
     def on_tag(sentence, lang_choice):
         rows = run_model(sentence)
@@ -555,10 +595,7 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
             gr.update(value=df_main, visible=True),
             gr.update(value=df_mean),
             gr.update(value=overview),
-            gr.update(visible=True),   # results_title
-            gr.update(visible=True),   # lang
             gr.update(visible=True),   # expanded_acc
-            gr.update(visible=True),   # overview_acc
         )
 
     def on_lang(rows, lang_choice):
@@ -572,7 +609,7 @@ with gr.Blocks(theme=theme, css=CSS, title="Marka") as demo:
     btn.click(
         on_tag,
         inputs=[inp, lang],
-        outputs=[state, out_df, out_mean_df, overview_md, results_title, lang, expanded_acc, overview_acc],
+        outputs=[state, out_df, out_mean_df, overview_md, expanded_acc],
         queue=False,
     )