Adding debugging

app.py

@@ -8,87 +8,84 @@ client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
 def explain_text(selected_text):
     if selected_text is None:
         return ""
-
     selected_text = selected_text.strip()
     if not selected_text:
         return "Please select or enter some text first."
-
+    
     prompt = f"""
-You are an expert machine learning instructor.
-
-The user highlighted the following text from a learning resource:
+You are an expert machine learning instructor. The user highlighted the following text from a learning resource:
 
 \"\"\"
 {selected_text}
 \"\"\"
 
-Explain it clearly and intuitively.
-Assume the reader has basic ML knowledge.
-Keep it concise and educational.
+Explain it clearly and intuitively. Assume the reader has basic ML knowledge. Keep it concise and educational.
 """
-
+    
     response = client.responses.create(
         model="gpt-5",
         input=prompt,
     )
-
     return response.output_text
 
-
-# ---- Page content (replace later with markdown file) ----
+# ---- Page content ----
 PAGE_HTML = """
 <div id="content" style="max-width: 800px; margin: auto; font-size: 16px; line-height: 1.6;">
-<h1>Text Generation</h1>
-
-<p>
-Text generation is the task of producing natural language text given an input prompt.
-It is commonly used for chatbots, creative writing, summarization, and code generation.
-</p>
-
-<p>
-Most modern text generation models are based on the transformer architecture
-and are trained using next-token prediction.
-</p>
-
-<p>
-During inference, the model repeatedly samples the most likely next token
-until a stopping condition is reached.
-</p>
+    <h1>Text Generation</h1>
+    <p>
+        Text generation is the task of producing natural language text given an input prompt. 
+        It is commonly used for chatbots, creative writing, summarization, and code generation.
+    </p>
+    <p>
+        Most modern text generation models are based on the transformer architecture and are 
+        trained using next-token prediction.
+    </p>
+    <p>
+        During inference, the model repeatedly samples the most likely next token until a 
+        stopping condition is reached.
+    </p>
 </div>
+"""
 
+with gr.Blocks(head="""
 <script>
 document.addEventListener("mouseup", () => {
-    const selection = window.getSelection().toString();
+    const selection = window.getSelection().toString().trim();
     if (selection.length > 0) {
-        const textbox = document.querySelector("textarea");
+        // Find the Gradio textbox by its data attribute
+        const textbox = document.querySelector('textarea[data-testid="textbox"]');
         if (textbox) {
-            textbox.value = selection;
+            // Update the value
+            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+                window.HTMLTextAreaElement.prototype, 
+                "value"
+            ).set;
+            nativeInputValueSetter.call(textbox, selection);
+            
+            // Trigger change event so Gradio picks it up
             textbox.dispatchEvent(new Event("input", { bubbles: true }));
         }
     }
 });
 </script>
-"""
-
-
-with gr.Blocks() as demo:
+""") as demo:
     gr.Markdown("### 📘 Highlight text and ask GPT-5 for help")
-
     gr.HTML(PAGE_HTML)
-
+    
     selected_text = gr.Textbox(
         label="Selected text",
         placeholder="Highlight text above...",
-        visible=False,
+        lines=3,
+        interactive=True
     )
-
+    
     explain_btn = gr.Button("Explain selection 🧠")
     output = gr.Markdown()
-
+    
     explain_btn.click(
         fn=explain_text,
         inputs=selected_text,
         outputs=output,
     )
 
-demo.launch()
+demo.launch()