Update app.py

app.py

@@ -74,6 +74,39 @@ 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
 # ------------------------------
@@ -119,16 +152,6 @@ 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
 # ------------------------------
@@ -151,11 +174,7 @@ with gr.Blocks(title="Interactive Qualitative Coding") as demo:
     with gr.Row():
         # LEFT: transcript
         with gr.Column(scale=3):
-            transcript_display = gr.HighlightedText(
-                value={"text": "", "entities": []},
-                label="Transcript",
-                interactive=True,
-            )
+            transcript_html = gr.HTML()
 
         # RIGHT: coding panel
         with gr.Column(scale=2):
@@ -177,23 +196,17 @@ 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
+    # Update transcript when text or coded_df changes
     def update_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 ""
+        return build_html_transcript(text, df)
 
-    transcript_display.select(fill_segment, inputs=transcript_display, outputs=segment_box)
+    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)
 
     # Fill code input when selecting dropdown
     code_dropdown.change(lambda x: x, inputs=code_dropdown, outputs=code_input)
 
-    # Apply code (updates coded data and code list)
+    # Apply code
     code_btn.click(
         fn=apply_code,
         inputs=[coded_df_state, file_id, full_text, segment_box, code_input, code_categories_state] + metadata_inputs,
@@ -203,7 +216,7 @@ with gr.Blocks(title="Interactive Qualitative Coding") as demo:
     # Update dropdown when code list changes
     code_categories_state.change(lambda codes: gr.update(choices=codes), inputs=code_categories_state, outputs=code_dropdown)
 
-    # Update table when coded_df changes
+    # Update table
     coded_df_state.change(lambda x: x, inputs=coded_df_state, outputs=table)
 
     # Export