Upload app.py

app.py

@@ -1,4 +1,5 @@
 import os, re, string, json
+import html
 import inspect
 import importlib.resources as importlib_resources
 from collections import defaultdict
@@ -163,25 +164,36 @@ CSS = """
   height:auto !important;
 }
 
-/* Dataframes: never wrap any cell; allow sideways scroll instead. */
-#out_df, #out_mean_df{
-  max-width:100% !important;
-}
-/* The scroll container is not always the outer div in Gradio, so target common wrappers too */
-#out_df, #out_mean_df,
-#out_df .table-wrap, #out_mean_df .table-wrap,
-#out_df .wrap, #out_mean_df .wrap{
+/* Results tables (rendered as HTML so we fully control wrapping/scrolling). */
+#out_df .df-scroll, #out_mean_df .df-scroll{
   overflow-x:auto !important;
-  display:block !important;
+  width:100% !important;
 }
-#out_df table, #out_mean_df table{
-  table-layout:auto !important;
+#out_df table.df-table, #out_mean_df table.df-table{
+  border-collapse:collapse !important;
   width:max-content !important;
   min-width:100% !important;
 }
 #out_df th, #out_df td,
 #out_mean_df th, #out_mean_df td{
   white-space:nowrap !important;
+  padding:10px 12px !important;
+  border:1px solid rgba(0,0,0,0.12) !important;
+  text-align:left !important;
+  vertical-align:top !important;
+}
+#out_df thead th, #out_mean_df thead th{
+  font-weight:600 !important;
+  background: rgba(0,0,0,0.03) !important;
+}
+@media (prefers-color-scheme: dark){
+  #out_df th, #out_df td,
+  #out_mean_df th, #out_mean_df td{
+    border:1px solid rgba(255,255,255,0.14) !important;
+  }
+  #out_df thead th, #out_mean_df thead th{
+    background: rgba(255,255,255,0.06) !important;
+  }
 }
 """
 
@@ -596,19 +608,37 @@ def run_model(sentence: str):
         vec_i += 1
     return rows
 
+def _make_html_table(headers, rows):
+    # We render results as plain HTML so we can force:
+    # - no wrapping anywhere
+    # - horizontal scrolling when content is wider than the page
+    th = "".join(f"<th>{html.escape(str(h))}</th>" for h in headers)
+    body_rows = []
+    for row in rows:
+        tds = "".join(f"<td>{html.escape(str(c))}</td>" for c in row)
+        body_rows.append(f"<tr>{tds}</tr>")
+    body = "".join(body_rows)
+    return (
+        '<div class="df-scroll">'
+        f'<table class="df-table"><thead><tr>{th}</tr></thead><tbody>{body}</tbody></table>'
+        '</div>'
+    )
+
 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"]]
+    cols_main = [UI[lang]["w"], UI[lang]["t"], UI[lang]["s"]]
+    cols_mean = [UI[lang]["w"], UI[lang]["t"], UI[lang]["m"]]
     if not rows_state:
-        return (pd.DataFrame(columns=df_cols), pd.DataFrame(columns=dfm_cols), build_overview(lang))
+        return (_make_html_table(cols_main, []), _make_html_table(cols_mean, []), 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 (_make_html_table(cols_main, out_main), _make_html_table(cols_mean, out_mean), build_overview(lang))
 
 with gr.Blocks(css=CSS, title="Marka") as demo:
     with gr.Row(equal_height=False):
@@ -633,23 +663,11 @@ with gr.Blocks(css=CSS, title="Marka") as demo:
             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=False)
-
-    out_df = gr.Dataframe(
-            elem_id="out_df",
-        value=pd.DataFrame(columns=[UI["fo"]["w"], UI["fo"]["t"], UI["fo"]["s"]]),
-        wrap=False, interactive=False, show_label=False,
-        row_count=(0, "fixed"), col_count=(3, "fixed"),
-        visible=False,
-    )
+    out_df = gr.HTML(value="", elem_id="out_df", visible=False)
 
     expanded_acc = gr.Accordion("Útgreinað marking / Expanded tags", open=False, visible=False)
     with expanded_acc:
-        out_mean_df = gr.Dataframe(
-                elem_id="out_mean_df",
-            value=pd.DataFrame(columns=[UI["fo"]["w"], UI["fo"]["t"], UI["fo"]["m"]]),
-            wrap=False, interactive=False, show_label=False,
-            row_count=(0, "fixed"), col_count=(3, "fixed"),
-        )
+        out_mean_df = gr.HTML(value="", elem_id="out_mean_df")
 
     overview_acc = gr.Accordion("Markayvirlit / Tag Overview", open=False, visible=True)
     with overview_acc: