Update app.py

app.py

@@ -74,39 +74,6 @@ def process_file(file_obj):
             text = f.read()
     return text, name, get_empty_df()
 
-# ------------------------------
-# BUILD HTML TRANSCRIPT
-# ------------------------------
-def build_html_transcript(text, coded_df):
-    display_text = text
-    if coded_df is not None and not coded_df.empty:
-        for _, row in coded_df.iterrows():
-            seg = row["Coded Segment"]
-            color = COLOR_MAP.get(row["Code"], "yellow")
-            display_text = display_text.replace(seg, f"<span style='background-color:{color}'>{seg}</span>", 1)
-
-    safe_text = display_text.replace("\n", "<br>")
-
-    html = f"""
-    <div style='white-space: pre-wrap; font-size:16px; line-height:1.5; max-height:600px; overflow:auto; border:1px solid #ccc; padding:5px;' id='transcript'>
-        {safe_text}
-    </div>
-    <script>
-    const transcript = document.getElementById('transcript');
-    transcript.addEventListener('mouseup', function() {{
-        const selection = window.getSelection().toString();
-        if(selection.length>0){{
-            const tb = document.querySelector('textarea[placeholder="Selected segment"]');
-            if(tb) {{
-                tb.value = selection;
-                tb.dispatchEvent(new Event("input", {{bubbles:true}}));
-            }}
-        }}
-    }});
-    </script>
-    """
-    return html
-
 # ------------------------------
 # APPLY CODE
 # ------------------------------
@@ -152,6 +119,16 @@ def export_excel(df):
     df.to_excel(path, index=False)
     return path, "Excel ready."
 
+# ------------------------------
+# UPDATE HIGHLIGHTED TEXT
+# ------------------------------
+def get_highlighted_text(text, coded_df):
+    highlights = []
+    if coded_df is not None and not coded_df.empty:
+        for _, row in coded_df.iterrows():
+            highlights.append({"text": row["Coded Segment"], "label": row["Code"]})
+    return {"text": text, "entities": highlights}
+
 # ------------------------------
 # GRADIO UI
 # ------------------------------
@@ -174,7 +151,11 @@ with gr.Blocks(title="Interactive Qualitative Coding") as demo:
     with gr.Row():
         # LEFT: transcript
         with gr.Column(scale=3):
-            transcript_html = gr.HTML()
+            transcript_display = gr.HighlightedText(
+                value={"text": "", "entities": []},
+                label="Transcript",
+                interactive=True,
+            )
 
         # RIGHT: coding panel
         with gr.Column(scale=2):
@@ -196,11 +177,18 @@ with gr.Blocks(title="Interactive Qualitative Coding") as demo:
     # ---------------- CALLBACKS ----------------
     file_input.change(fn=process_file, inputs=file_input, outputs=[full_text, file_id, coded_df_state])
 
+    # Update transcript display when text or coded_df changes
     def update_transcript(text, df):
-        return build_html_transcript(text, df)
+        return get_highlighted_text(text, df)
+
+    full_text.change(update_transcript, inputs=[full_text, coded_df_state], outputs=transcript_display)
+    coded_df_state.change(update_transcript, inputs=[full_text, coded_df_state], outputs=transcript_display)
+
+    # Selecting text in transcript auto-fills segment box
+    def fill_segment(selected):
+        return selected["text"] if selected else ""
 
-    full_text.change(update_transcript, inputs=[full_text, coded_df_state], outputs=transcript_html)
-    coded_df_state.change(update_transcript, inputs=[full_text, coded_df_state], outputs=transcript_html)
+    transcript_display.select(fill_segment, inputs=transcript_display, outputs=segment_box)
 
     # Fill code input when selecting dropdown
     code_dropdown.change(lambda x: x, inputs=code_dropdown, outputs=code_input)