Update app.py

app.py

@@ -4,8 +4,9 @@ from dataclasses import dataclass, field
 from typing import List, Optional, Dict
 from PIL import Image
 
-import re, textwrap, uuid, html as py_html
+import re, textwrap, html as py_html
 from pathlib import Path
+from streamlit.components.v1 import html as st_html
 
 import numpy as np
 import pandas as pd
@@ -34,7 +35,6 @@ def get_param_from_url(param):
     return user_id
 
 ########################################################################################
-# CHANGE THE FOLLOWING VARIABLES ACCORDING TO YOUR NEEDS
 
 # 'local' or 'hf'. hf is for Hugging Face file system but has limits on the number of access per hour
 filesystem = 'hf'
@@ -167,31 +167,34 @@ def display_image(image_path):
         img = Image.open(f)
         st.image(img, caption='8 most contributing properties', use_column_width=True)
 
-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:
-    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:
+
+SPEAKER_RE = re.compile(r'^\s*\*\*(T|P):\*\*\s*(.*)$')
+
+def read_md(path: str) -> str:
+    """Read .md file from HF dataset or local disk."""
+    if filesystem == 'hf':
+        with hf_fs.open(path, "rb") as f:
             return f.read().decode("utf-8")
-    return Path(full).read_text(encoding="utf-8")
+    else:
+        # local path
+        return Path(path).read_text(encoding="utf-8")
 
-def _wrap_paragraph(text: str, width: int) -> list[str]:
+def wrap_para(text: str, width: int) -> list[str]:
     if not text.strip():
         return [""]
     return textwrap.wrap(
-        text.strip().replace("\u00A0", " "),  # normalize NBSP
+        text.strip().replace("\u00A0", " "),
         width=width,
         break_long_words=False,
         break_on_hyphens=False,
-        drop_whitespace=True,          # <- prevents leading spaces on next line
+        drop_whitespace=True,
         replace_whitespace=True,
     ) or [""]
 
-def _md_dialogue_to_lines(md_text: str, width: int) -> list[str]:
+def md_dialogue_to_visual_lines(md_text: str, width: int) -> list[str]:
+    """Return a list of wrapped visual lines with <strong>T:/P:</strong> on first line."""
     md_text = md_text.replace("\r\n", "\n").replace("\r", "\n").strip("\n")
     paragraphs = re.split(r"\n\s*\n", md_text)
     out = []
@@ -203,92 +206,76 @@ def _md_dialogue_to_lines(md_text: str, width: int) -> list[str]:
         m = SPEAKER_RE.match(p)
         if m:
             speaker, content = m.group(1), m.group(2)
-            wrapped = _wrap_paragraph(content, width)
+            wrapped = wrap_para(content, width)
             out.append(f"<strong>{speaker}:</strong> {py_html.escape(wrapped[0])}".rstrip())
             for w in wrapped[1:]:
                 out.append(py_html.escape(w))
         else:
-            for w in _wrap_paragraph(p, width):
+            for w in wrap_para(p, width):
                 out.append(py_html.escape(w))
-        out.append("")  # blank line between paragraphs
+        out.append("")  # blank 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,
-                              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]}"
+def render_dialogue(md_path: str,
+                    width_chars: int = 80,
+                    height_px: int = 520,
+                    font_family: str = "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Noto Sans', sans-serif",
+                    font_size: str = "1.05rem",
+                    show_border: bool = False):
+    """Render the .md dialogue with line numbers inside an iframe to avoid Streamlit CSS quirks."""
+    text = read_md(md_path)
+    lines = md_dialogue_to_visual_lines(text, width_chars)
+
     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"
+    padding_css = ".8rem 1rem" if show_border else "0"
 
-    # container + table (no CSS grid)
+    # Build stable HTML (table keeps gutter aligned)
     rows = "\n".join(
-        f"<tr class='dlg-row'><td class='dlg-num'>{i}</td><td class='dlg-txt'>{ln or '&nbsp;'}</td></tr>"
+        f"<tr><td class='num'>{i}</td><td class='txt'>{ln or '&nbsp;'}</td></tr>"
         for i, ln in enumerate(lines, 1)
     )
 
-    st.markdown(f"""
-<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};">
+    html_doc = f"""
+<!doctype html>
+<meta charset="utf-8">
+<style>
+  :root {{
+    --font-text: {font_family};
+    --font-size: {font_size};
+  }}
+  html, body {{
+    margin:0; padding:0; background:transparent;
+    font-family: var(--font-text); font-size: var(--font-size);
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    font-synthesis: none;  /* avoid auto fake-bold */
+  }}
+  .root {{
+    border:{border_css}; border-radius:{radius_css}; padding:{padding_css};
+    height:{height_px}px; overflow:auto; background:transparent;
+    line-height:1.5;
+  }}
+  table {{ border-collapse:collapse; table-layout:fixed; width:max-content; max-width:100%; }}
+  td {{ padding:0; vertical-align:top; }}
+  .num {{
+    width:4ch; padding-right:1ch; text-align:right; color:rgba(0,0,0,.55);
+    user-select:none; font-variant-numeric: tabular-nums;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+  }}
+  .txt {{
+    white-space: pre-wrap; word-break: break-word; max-width:{width_chars}ch;
+  }}
+  strong {{ font-weight:700; }}
+</style>
+<div class="root">
+  <table>
     {rows}
   </table>
 </div>
-""", unsafe_allow_html=True)
+"""
+    # iframe height = inner height; no external scrollbars flashing
+    st_html(html_doc, height=height_px + (16 if show_border else 0), scrolling=False)
 
 
 #################################### Streamlit App ####################################
@@ -341,10 +328,7 @@ def show_field(f: Field, index: int, data_collected):
                         display_image(os.path.join(input_repo_path, 'images', value))
                     elif f.name == 'dialogue_name':
                         #display_dialogue(os.path.join(input_repo_path, 'dialogues', value))
-                        display_numbered_dialogue(os.path.join(input_repo_path, 'dialogues', value), max_height_px=520, 
-                                                show_border=False,                          # no border
-                                                font_family="system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-                                                font_size="1.05rem",)
+                        render_dialogue(os.path.join(input_repo_path, 'dialogues', value), width_chars=80, height_px=520, show_border=False)
                     elif f.name == 'patient':
                         st.markdown(f"**Patient:**&nbsp;&nbsp;{value}")
                     else: