Update app.py

app.py

@@ -75,52 +75,72 @@ def process_file(file_obj):
     return text, name, get_empty_df()
 
 # ------------------------------
-# BUILD HIGHLIGHTED TEXT
-# ------------------------------
-def build_highlighted_text(text, coded_df):
-    entities = []
+# BUILD HTML TRANSCRIPT
+# ------------------------------
+def build_html_transcript(text, coded_df):
+    """
+    Return HTML with optional colored highlights for coded segments.
+    Also inject JS to auto-fill segment box when user highlights text.
+    """
+    display_text = text
     if coded_df is not None and not coded_df.empty:
+        # sort by start index to avoid overlapping HTML issues
         for _, row in coded_df.iterrows():
-            segment = row["Coded Segment"]
-            start = text.find(segment)
-            if start != -1:
-                end = start + len(segment)
-                entities.append({"start": start, "end": end, "label": row["Code"]})
-    return {"text": text, "entities": entities}
+            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)
+
+    # HTML with JS
+    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'>
+        {display_text.replace('\n','<br>')}
+    </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
 # ------------------------------
-def apply_code(coded_df, file_id, full_text, selected_segment, code, *metadata_values):
-    if not selected_segment:
-        return coded_df, "Select a segment first."
+def apply_code(coded_df, file_id, full_text, segment, code, *metadata_values):
+    if not segment:
+        return coded_df, "⚠️ Select a segment first."
     if not code:
-        return coded_df, "Select a code first."
+        return coded_df, "⚠️ Select a code first."
     if not file_id:
-        return coded_df, "Upload a file first."
+        return coded_df, "⚠️ Upload a file first."
 
     meta_dict = dict(zip(METADATA_FIELDS.keys(), metadata_values))
-
-    # extract context
     context = "Context unavailable"
     try:
         n_full = " ".join(full_text.split())
-        n_seg = " ".join(selected_segment.split())
+        n_seg = " ".join(segment.split())
         idx = n_full.index(n_seg)
-        context = "..." + n_full[max(0, idx - 100):idx]
+        context = "..." + n_full[max(0, idx-100):idx]
     except:
         pass
 
     new_row = {
         "File ID": file_id,
+        "Coded Segment": segment,
         "Code": code,
-        "Coded Segment": selected_segment,
         "Context (100 chars)": context,
-        **meta_dict,
+        **meta_dict
     }
-
     new_df = pd.concat([coded_df, pd.DataFrame([new_row])], ignore_index=True)
-    return new_df, f"Segment coded as '{code}'!"
+    return new_df, f"✅ Segment coded as '{code}'!"
 
 # ------------------------------
 # EXPORT XLSX
@@ -137,64 +157,56 @@ def export_excel(df):
 # ------------------------------
 with gr.Blocks(title="Interactive Qualitative Coding") as demo:
     gr.Markdown("# 📑 Interactive Qualitative Coding Tool")
-    gr.Markdown("Click or highlight segments in the transcript to code them.")
+    gr.Markdown("Select text in the transcript (left) to auto-fill coding tools (right).")
 
     # states
     file_id = gr.State("")
     full_text = gr.State("")
     coded_df_state = gr.State(get_empty_df())
 
-    # ---------------- FILE UPLOAD ----------------
+    # ---------------- ROW LAYOUT ----------------
     with gr.Row():
-        file_input = gr.File(label="Upload transcript (.docx, .vtt, .txt)", file_types=[".docx", ".vtt", ".txt"])
-        status = gr.Textbox(label="Status", value="Ready")
+        # LEFT: transcript
+        with gr.Column(scale=3):
+            transcript_html = gr.HTML()
+        # RIGHT: coding tools
+        with gr.Column(scale=2):
+            file_input = gr.File(label="Upload transcript (.docx, .vtt, .txt)", file_types=[".docx",".vtt",".txt"])
+            status = gr.Textbox(label="Status", value="Ready")
 
-    file_input.change(
-        fn=process_file,
-        inputs=file_input,
-        outputs=[full_text, file_id, coded_df_state]
-    )
+            gr.Markdown("## 📝 Metadata")
+            metadata_inputs = []
+            for k, lbl in METADATA_FIELDS.items():
+                metadata_inputs.append(gr.Textbox(label=lbl))
 
-    # ---------------- METADATA ----------------
-    metadata_inputs = []
-    with gr.Row():
-        for k, lbl in METADATA_FIELDS.items():
-            metadata_inputs.append(gr.Textbox(label=lbl))
+            segment_box = gr.Textbox(label="Selected Segment", placeholder="Selected segment", lines=3)
+            code_dropdown = gr.Dropdown(label="Select Code", choices=DEFAULT_CODES)
+            code_btn = gr.Button("Apply Code")
 
-    # ---------------- HIGHLIGHTED TRANSCRIPT ----------------
-    gr.Markdown("## 📖 Transcript (click or highlight segments)")
-    highlighted_text = gr.HighlightedText(value={"text": "", "entities": []}, label="Transcript")
+            gr.Markdown("## 📊 Coded Segments")
+            table = gr.Dataframe(interactive=False)
 
-    # update highlighted text when full_text or coded_df_state changes
-    def update_highlighted(text, df):
-        return build_highlighted_text(text, df)
+            export_btn = gr.Button("Export XLSX")
+            export_file = gr.File(visible=False)
 
-    full_text.change(update_highlighted, inputs=[full_text, coded_df_state], outputs=highlighted_text)
-    coded_df_state.change(update_highlighted, inputs=[full_text, coded_df_state], outputs=highlighted_text)
+    # ---------------- CALLBACKS ----------------
+    file_input.change(fn=process_file, inputs=file_input, outputs=[full_text, file_id, coded_df_state])
 
-    # clicking/highlighting text sets segment box
-    segment_box = gr.Textbox(label="Selected Segment", placeholder="Selected segment appears here", lines=3)
-    highlighted_text.select(lambda x: x, inputs=highlighted_text, outputs=segment_box)
+    def update_transcript(text, df):
+        return build_html_transcript(text, df)
 
-    # ---------------- CODING ----------------
-    code_dropdown = gr.Dropdown(label="Select Code", choices=DEFAULT_CODES)
-    code_btn = gr.Button("Apply Code")
+    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)
+
+    # Apply code
     code_btn.click(
         fn=apply_code,
         inputs=[coded_df_state, file_id, full_text, segment_box, code_dropdown] + metadata_inputs,
         outputs=[coded_df_state, status]
     )
-
-    # ---------------- CODED DATA ----------------
-    gr.Markdown("## 📊 Coded Segments")
-    table = gr.Dataframe(interactive=False)
     coded_df_state.change(lambda x: x, inputs=coded_df_state, outputs=table)
 
-    # ---------------- EXPORT ----------------
-    with gr.Row():
-        export_btn = gr.Button("Export XLSX")
-        export_file = gr.File(visible=False)
-
+    # Export
     export_btn.click(
         export_excel,
         inputs=coded_df_state,