Update app.py

app.py

@@ -4,10 +4,7 @@ from dataclasses import dataclass, field
 from typing import List, Optional, Dict
 from PIL import Image
 
-import re
-import textwrap
-import uuid
-import html as py_html
+import re, textwrap, uuid, html as py_html
 from pathlib import Path
 
 import numpy as np
@@ -170,114 +167,129 @@ def display_image(image_path):
         img = Image.open(f)
         st.image(img, caption='8 most contributing properties', use_column_width=True)
 
-SPEAKER_RE = re.compile(r'^\s*\*\*(T|P):\*\*\s*(.*)$')  # matches **T:** or **P:** at start
+TEXT_STACK  = "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Noto Sans', 'Liberation Sans', sans-serif"
+MONO_STACK  = "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Roboto Mono', monospace"
+SPEAKER_RE = re.compile(r'^\s*\*\*(T|P):\*\*\s*(.*)$')
+
 
 def _read_md_any(path: str) -> str:
-    """Read a UTF-8 .md from HF dataset or local disk based on your `filesystem` flag."""
-    full = path
-    if not full.startswith(input_repo_path):
-        full = f"{input_repo_path}/{path}"  # allow "dialogues/foo.md"
+    full = path if path.startswith(input_repo_path) else f"{input_repo_path}/{path}"
     if filesystem == "hf":
         with hf_fs.open(full, "rb") as f:
             return f.read().decode("utf-8")
-    else:
-        return Path(full).read_text(encoding="utf-8")
+    return Path(full).read_text(encoding="utf-8")
 
 def _wrap_paragraph(text: str, width: int) -> list[str]:
     if not text.strip():
         return [""]
     return textwrap.wrap(
-        text.strip(),
+        text.strip().replace("\u00A0", " "),  # normalize NBSP
         width=width,
         break_long_words=False,
         break_on_hyphens=False,
-        # important: don't carry spaces across lines
-        drop_whitespace=True,          # ← was False
-        replace_whitespace=True        # use normal collapsing
+        drop_whitespace=True,          # <- prevents leading spaces on next line
+        replace_whitespace=True,
     ) or [""]
 
 def _md_dialogue_to_lines(md_text: str, width: int) -> list[str]:
-    """
-    Turn the whole .md dialogue into a list of visual lines:
-    - Bold speaker label only (T:/P:) on the first wrapped line of a paragraph.
-    - Add a blank line between paragraphs.
-    """
     md_text = md_text.replace("\r\n", "\n").replace("\r", "\n").strip("\n")
-    paragraphs = re.split(r"\n\s*\n", md_text)  # split on blank lines
-    out: list[str] = []
-
+    paragraphs = re.split(r"\n\s*\n", md_text)
+    out = []
     for p in paragraphs:
         p = p.strip()
         if not p:
-            out.append("")  # preserve blank paragraph as a blank numbered line
+            out.append("")
             continue
-
         m = SPEAKER_RE.match(p)
         if m:
             speaker, content = m.group(1), m.group(2)
             wrapped = _wrap_paragraph(content, width)
-            # first line with bold speaker label
-            first = f"<strong>{speaker}:</strong> {py_html.escape(wrapped[0])}".rstrip()
-            out.append(first)
-            # continuation lines without label
+            out.append(f"<strong>{speaker}:</strong> {py_html.escape(wrapped[0])}".rstrip())
             for w in wrapped[1:]:
                 out.append(py_html.escape(w))
         else:
-            # plain paragraph (no speaker tag)
             for w in _wrap_paragraph(p, width):
                 out.append(py_html.escape(w))
-
-        # blank line after each paragraph
-        out.append("")
-    # drop trailing blank if you don't want an extra empty at the end
-    if out and out[-1] == "":
-        out.pop()
+        out.append("")  # blank line between paragraphs
+    if out and out[-1] == "": out.pop()
     return out
 
+# Inject global CSS once (prevents FOUC and font swaps)
+def inject_dialogue_css_once():
+    if st.session_state.get("_dlg_css_injected"): return
+    st.session_state["_dlg_css_injected"] = True
+    st.markdown(f"""
+<style id="dlg-css">
+/* container styles (applied per instance inline) */
+
+/* table layout is very stable across rerenders */
+.dlg-table {{
+  border-collapse: separate;
+  border-spacing: 0 0;
+  table-layout: fixed;            /* prevents column jitter */
+  width: max-content;
+  max-width: 100%;
+}}
+.dlg-row td {{
+  vertical-align: top;
+  padding: 0;
+}}
+.dlg-num {{
+  width: 4ch;                     /* fixed gutter */
+  padding-right: 1ch;
+  text-align: right;
+  color: rgba(0,0,0,.55);
+  user-select: none;
+  font-family: {MONO_STACK};
+  font-variant-numeric: tabular-nums;
+}}
+.dlg-txt {{
+  white-space: pre-wrap;
+  word-break: break-word;
+}}
+.dlg-txt strong {{ font-weight: 700; }}
+/* keep rendering consistent */
+.dlg-root {{
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-synthesis: none;
+}}
+</style>
+""", unsafe_allow_html=True)
+
 def display_numbered_dialogue(md_path: str,
                               title: str = "Session Transcription",
                               width_chars: int = 80,
-                              max_height_px: int = 520):
-    """
-    Render the .md dialogue like your screenshot:
-    - left line numbers
-    - wrapped to `width_chars`
-    - scrolls inside the box
-    """
-    text = _read_md_any(md_path)
+                              max_height_px: int = 520,
+                              font_family: str = TEXT_STACK,
+                              font_size: str = "1rem",
+                              show_border: bool = False,
+                              background: str = "transparent"):
+    inject_dialogue_css_once()
+    text  = _read_md_any(md_path)
     lines = _md_dialogue_to_lines(text, width=width_chars)
 
     block_id = f"dlg-{uuid.uuid4().hex[:8]}"
-    # build HTML rows
-    rows_html = "\n".join(
-        f"<div class='row'><span class='num'>{i}</span><span class='txt'>{ln or '&nbsp;'}</span></div>"
+    border_css = "1px solid #e6e6e6" if show_border else "none"
+    radius_css = ".6rem" if show_border else "0"
+    pad_css    = ".8rem 1rem" if show_border else "0"
+
+    # container + table (no CSS grid)
+    rows = "\n".join(
+        f"<tr class='dlg-row'><td class='dlg-num'>{i}</td><td class='dlg-txt'>{ln or '&nbsp;'}</td></tr>"
         for i, ln in enumerate(lines, 1)
     )
 
     st.markdown(f"""
-<style>
-#{block_id} {{
-  max-height: {max_height_px}px; overflow-y: auto;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-  line-height: 1.5;
-}}
-#{block_id} .row {{
-  display: grid; grid-template-columns: 4ch 1fr; column-gap: 1ch; align-items: start;
-}}
-#{block_id} .num {{
-  color: rgba(0,0,0,.55); text-align: right; user-select: none;
-}}
-/* The text column is visually constrained to `width_chars` characters */
-#{block_id} .txt {{
-  max-width: {width_chars}ch; white-space: pre-wrap; word-break: break-word;
-}}
-#{block_id} strong {{ font-weight: 700; }}
-</style>
+<div id="{block_id}" class="dlg-root"
+     style="border:{border_css}; border-radius:{radius_css}; padding:{pad_css};
+            background:{background}; max-height:{max_height_px}px; overflow-y:auto;">
+  <table class="dlg-table" style="font-family:{font_family}; font-size:{font_size};">
+    {rows}
+  </table>
+</div>
 """, unsafe_allow_html=True)
 
-    with st.container(border=False):
-        #st.markdown(f"**{title}**  \n*(wrapped to {width_chars} chars; numbers by visual lines)*")
-        st.markdown(f"<div id='{block_id}'>{rows_html}</div>", unsafe_allow_html=True)
 
 #################################### Streamlit App ####################################