Update app.py

app.py

@@ -7,10 +7,10 @@ client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
 # ---- GPT explanation backend ----
 def explain_text(selected_text):
     if selected_text is None:
-        return ""
+        return "", ""
     selected_text = selected_text.strip()
     if not selected_text:
-        return "Please select or enter some text first."
+        return "Please select or enter some text first.", selected_text
     
     try:
         response = client.chat.completions.create(
@@ -28,9 +28,11 @@ def explain_text(selected_text):
             temperature=0.7,
             max_tokens=500
         )
-        return response.choices[0].message.content
+        explanation = response.choices[0].message.content
+        # Replace the selected text box with the AI explanation
+        return explanation, explanation
     except Exception as e:
-        return f"Error: {str(e)}"
+        return f"Error: {str(e)}", selected_text
 
 
 # ---- Your work content (UNCHANGED) ----
@@ -53,7 +55,7 @@ YOUR_WORK_HTML = """
 """
 
 
-# ---- Hugging Face reference content (FULL ORIGINAL TEXT RESTORED) ----
+# ---- Hugging Face reference content ----
 HF_REFERENCE_HTML = """
 <div id="hf-content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
     <h1>Text Generation (Hugging Face Reference)</h1>
@@ -163,30 +165,59 @@ def switch_content(choice):
         return HF_REFERENCE_HTML
 
 
-with gr.Blocks(
-    head="""
+# This JS uses a more reliable approach:
+# 1. Listens for mouseup on the whole document
+# 2. Finds the Gradio textbox by its data-testid or label, then dispatches
+#    a proper React-compatible input event so Gradio picks up the value change.
+SELECTION_JS = """
 <script>
-document.addEventListener("mouseup", function () {
-    const selection = window.getSelection().toString().trim();
-    if (selection.length > 0) {
-        const textboxContainer = document.querySelector('[aria-label="Selected text"]');
-        if (textboxContainer) {
-            const textarea = textboxContainer.querySelector("textarea");
-            if (textarea) {
-                const nativeSetter = Object.getOwnPropertyDescriptor(
-                    window.HTMLTextAreaElement.prototype,
-                    "value"
-                ).set;
-                nativeSetter.call(textarea, selection);
-                textarea.dispatchEvent(new Event("input", { bubbles: true }));
+(function() {
+    function setGradioTextbox(value) {
+        // Find the textarea inside the component labelled "Selected text"
+        const labels = document.querySelectorAll('label span');
+        for (const label of labels) {
+            if (label.textContent.trim() === 'Selected text') {
+                const container = label.closest('label') || label.parentElement;
+                // Walk up to find the wrapping block, then find textarea
+                let el = container;
+                for (let i = 0; i < 5; i++) {
+                    el = el.parentElement;
+                    if (!el) break;
+                    const ta = el.querySelector('textarea');
+                    if (ta) {
+                        // Use React's native value setter to trigger onChange
+                        const nativeSetter = Object.getOwnPropertyDescriptor(
+                            window.HTMLTextAreaElement.prototype, 'value'
+                        ).set;
+                        nativeSetter.call(ta, value);
+                        ta.dispatchEvent(new Event('input', { bubbles: true }));
+                        ta.dispatchEvent(new Event('change', { bubbles: true }));
+                        return true;
+                    }
+                }
             }
         }
+        return false;
     }
-});
+
+    document.addEventListener('mouseup', function () {
+        // Small delay to let the browser finalize the selection
+        setTimeout(function () {
+            const selection = window.getSelection();
+            if (!selection) return;
+            const text = selection.toString().trim();
+            if (text.length > 0) {
+                setGradioTextbox(text);
+            }
+        }, 50);
+    });
+})();
 </script>
 """
-) as demo:
-    gr.Markdown("### 📘 Highlight text and ask GPT for help")
+
+
+with gr.Blocks(head=SELECTION_JS) as demo:
+    gr.Markdown("### 📘 Highlight text above and click **Explain selection** to get an AI explanation")
     
     view_toggle = gr.Radio(
         choices=["My Work", "HF Reference"],
@@ -204,17 +235,20 @@ document.addEventListener("mouseup", function () {
     
     selected_text = gr.Textbox(
         label="Selected text",
-        placeholder="Highlight text above...",
+        placeholder="Highlight text above to populate this box, then click Explain...",
         lines=3
     )
     
-    explain_btn = gr.Button("Explain selection 🧠")
-    output = gr.Markdown()
-    
+    explain_btn = gr.Button("Explain selection 🧠", variant="primary")
+
+    # The explanation replaces the content of the selected_text box
+    # so the user sees the AI output right where the selection was shown.
+    output = gr.Markdown(label="Explanation")
+
     explain_btn.click(
         fn=explain_text,
         inputs=selected_text,
-        outputs=output,
+        outputs=[output, selected_text],
     )
 
 demo.launch()