Update app.py

app.py

@@ -3,6 +3,7 @@ import os
 from dataclasses import dataclass, field
 from typing import List, Optional, Dict
 from PIL import Image
+import html
 
 import numpy as np
 import pandas as pd
@@ -154,11 +155,38 @@ def get_path():
 
 def display_dialogue(hf_path: str):
     txt = load_text(hf_path)
-    #st.code(txt, language="markdown", line_numbers=True)
-    st.markdown(
-        f"<details><summary><b>Herr Laus</b></summary><div>{txt}</div></details><br>",
-    unsafe_allow_html=True)
-    
+    markdown_with_line_numbers(txt, title="Session Transcription")
+    #st.markdown(
+    #    f"<details><summary><b>Herr Laus</b></summary><div>{txt}</div></details><br>",
+    #unsafe_allow_html=True)
+
+def markdown_with_line_numbers(text: str, title: str | None = None):
+    # escape to avoid HTML injection, keep original newlines
+    escaped = html.escape(text)
+    lines = escaped.splitlines()
+    # keep blank lines visible so numbering doesn't collapse
+    body = "".join(f"<span>{ln or '&nbsp;'}</span>" for ln in lines)
+
+    css = """
+<style>
+.ln pre { counter-reset: line; margin: 0; white-space: pre-wrap; }
+.ln pre span { display: block; }
+.ln pre span::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 4ch;             /* gutter width */
+  margin-right: 1ch;
+  text-align: right;
+  opacity: .6;
+}
+.ln { border: 1px solid #ddd; border-radius: .5rem; padding: .75rem; }
+</style>
+"""
+    st.markdown(css + (f"<p><b>{html.escape(title)}</b></p>" if title else "") +
+                f'<div class="ln"><pre>{body}</pre></div>',
+                unsafe_allow_html=True)
+
 def display_image(image_path):
     with hf_fs.open(image_path) as f:
         img = Image.open(f)
@@ -363,7 +391,7 @@ st.markdown(
 div[data-testid="stMarkdownContainer"] > p {
     font-size: 1rem;
 }
-    section.main > div {max-width:80rem}
+    section.main > div {max-width:100rem}
     </style>
     """, unsafe_allow_html=True)