Update app.py

app.py

@@ -7,6 +7,7 @@ try:
 except ImportError:
     docx = None
 
+# Default codes
 DEFAULT_CODES = [
     "Communication Barrier",
     "Emotional Support",
@@ -30,6 +31,7 @@ COLOR_MAP = {
     "Follow-up Needed": "orange",
 }
 
+# --- File reading functions
 def read_docx(path):
     if not docx:
         return "Error: python-docx not installed."
@@ -51,6 +53,7 @@ def get_empty_df():
         columns=["File ID", "Coded Segment", "Code"] + list(METADATA_FIELDS.keys())
     )
 
+# --- Process uploaded file
 def process_file(file_obj):
     if file_obj is None:
         return "", "", get_empty_df()
@@ -65,6 +68,40 @@ def process_file(file_obj):
             text = f.read()
     return text, name, get_empty_df()
 
+# --- Build transcript HTML with highlight
+def build_transcript_html(text, df):
+    display_text = text
+    if df is not None and not df.empty:
+        for _, row in 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 id='transcript' style='white-space: pre-wrap; font-size:16px; line-height:1.5; max-height:600px; overflow:auto; border:1px solid #ccc; padding:5px;'>
+        {safe_text}
+    </div>
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {{
+        const transcript = document.getElementById('transcript');
+        transcript.addEventListener('mouseup', function() {{
+            const sel = window.getSelection().toString();
+            if(sel.length>0){{
+                const state_input = document.getElementById('selected_segment_state');
+                if(state_input) {{
+                    state_input.value = sel;
+                    state_input.dispatchEvent(new Event("input", {{bubbles:true}}));
+                }}
+            }}
+        }});
+    }});
+    </script>
+    """
+    return html
+
+# --- Apply code to selected segment
 def apply_code(df, segment, code, file_id, *metadata_values):
     if not file_id:
         return df, "⚠️ Upload a file first"
@@ -77,11 +114,13 @@ def apply_code(df, segment, code, file_id, *metadata_values):
     df = pd.concat([df, pd.DataFrame([new_row])], ignore_index=True)
     return df, f"✅ Segment coded as '{code}'"
 
+# --- Add new code to dropdown
 def add_new_code(new_code, code_list):
     if new_code and new_code not in code_list:
         code_list.append(new_code)
     return code_list
 
+# --- Export coded data
 def export_excel(df):
     if df.empty:
         return None, "Nothing to export"
@@ -99,24 +138,20 @@ with gr.Blocks() as demo:
     coded_df_state = gr.State(get_empty_df())
     code_categories_state = gr.State(DEFAULT_CODES)
 
-    # Metadata
+    # --- Metadata
     with gr.Row():
         metadata_inputs = []
         for k, lbl in METADATA_FIELDS.items():
             metadata_inputs.append(gr.Textbox(label=lbl))
 
-    # Main interface
+    # --- Main interface
     with gr.Row():
-        # Left: transcript selection
+        # Left: transcript
         with gr.Column(scale=3):
-            transcript_text = gr.Textbox(
-                label="Transcript (Select text below to code)",
-                lines=25,
-                interactive=True,
-                placeholder="Select a segment of this text..."
-            )
+            transcript_html = gr.HTML()
+            hidden_segment = gr.Textbox(interactive=False, visible=False, elem_id="selected_segment_state")
 
-        # Right: coding
+        # Right: coding controls
         with gr.Column(scale=2):
             gr.Markdown("## 🏷️ Code Category")
             code_dropdown = gr.Dropdown(label="Select code", choices=DEFAULT_CODES)
@@ -133,19 +168,29 @@ with gr.Blocks() as demo:
             file_input = gr.File(label="Upload transcript", file_types=[".docx", ".vtt", ".txt"])
             status = gr.Textbox(label="Status", value="Ready")
 
-    # Callbacks
-    file_input.change(fn=process_file, inputs=file_input, outputs=[transcript_text, file_id, coded_df_state])
+    # --- Callbacks
+    file_input.change(
+        fn=process_file, inputs=file_input, outputs=[full_text, file_id, coded_df_state]
+    )
+
+    def update_transcript(text, df):
+        return build_transcript_html(text, df)
+
+    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)
 
     add_code_btn.click(add_new_code, inputs=[code_input, code_categories_state], outputs=[code_categories_state])
     code_categories_state.change(lambda codes: gr.update(choices=codes), inputs=code_categories_state, outputs=code_dropdown)
 
+    # Apply button
     apply_btn.click(
         apply_code,
-        inputs=[coded_df_state, transcript_text, code_dropdown, file_id] + metadata_inputs,
+        inputs=[coded_df_state, hidden_segment, code_dropdown, file_id] + metadata_inputs,
         outputs=[coded_df_state, status],
     )
 
     coded_df_state.change(lambda df: df, inputs=coded_df_state, outputs=table)
+
     export_btn.click(export_excel, inputs=coded_df_state, outputs=[export_file, status]).then(
         lambda f: gr.update(visible=f is not None),
         inputs=export_file,