Update app.py

app.py

@@ -4,6 +4,12 @@ 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
+from pathlib import Path
+
 import numpy as np
 import pandas as pd
 import streamlit as st
@@ -163,7 +169,117 @@ def display_image(image_path):
     with hf_fs.open(image_path) as f:
         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
+
+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"
+    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")
+
+def _wrap_paragraph(text: str, width: int) -> list[str]:
+    """Hard-wrap a single paragraph to exactly width chars per line (no hyphen breaks)."""
+    if not text.strip():
+        return [""]
+    return textwrap.wrap(
+        text.strip(),
+        width=width,
+        break_long_words=False,
+        break_on_hyphens=False,
+        replace_whitespace=False,
+        drop_whitespace=False,
+    ) 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] = []
+
+    for p in paragraphs:
+        p = p.strip()
+        if not p:
+            out.append("")  # preserve blank paragraph as a blank numbered line
+            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
+            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()
+    return out
+
+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)
+    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>"
+        for i, ln in enumerate(lines, 1)
+    )
+
+    st.markdown(f"""
+<style>
+#{block_id} {{
+  border: 1px solid #e6e6e6; border-radius: .6rem; padding: .8rem 1rem; background: #fff;
+  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>
+""", unsafe_allow_html=True)
+
+    with st.container(border=True):
+        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 ####################################
 
 # Function to navigate rows
@@ -213,7 +329,9 @@ def show_field(f: Field, index: int, data_collected):
                     if f.name == 'image_name':
                         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),max_height_px=500)
+                        #display_dialogue(os.path.join(input_repo_path, 'dialogues', value))
+                        display_numbered_dialogue(os.path.join(input_repo_path, 'images', value), width_chars=80, max_height_px=520)
+
                     elif f.name == 'patient':
                         st.markdown(f"**Patient:**&nbsp;&nbsp;{value}")
                     else: