Update app.py

app.py

@@ -119,7 +119,7 @@ def switch_content(choice):
     return YOUR_WORK_HTML if choice == "My Work" else HF_REFERENCE_HTML
 
 
-# ---- All the magic: floating sticky button + inline DOM replacement ----
+# ---- All the magic: floating sticky button + popup tooltip ----
 HEAD_HTML = """
 <style>
   /* ── Floating toolbar ─────────────────────────────────────────── */
@@ -154,7 +154,6 @@ HEAD_HTML = """
   }
   #explain-fab:hover:not(:disabled) { background: #3730a3; }
   #explain-fab:disabled { background: #4b5563; cursor: not-allowed; }
-
   #explain-fab-preview {
     max-width: 180px;
     overflow: hidden;
@@ -166,44 +165,16 @@ HEAD_HTML = """
     border-left: 1px solid rgba(255,255,255,0.3);
     padding-left: 10px;
   }
-
-  /* ── Inline replacement styles ───────────────────────────────── */
-  .ai-inline {
-    background: linear-gradient(135deg, #fef3c7, #fde68a);
-    border-left: 3px solid #f59e0b;
-    border-radius: 4px;
-    padding: 1px 6px;
-    font-style: italic;
-    color: #1c1917;
-    cursor: help;
-    transition: background 0.3s;
-  }
-  .ai-inline:hover {
-    background: linear-gradient(135deg, #fde68a, #fbbf24);
-  }
-  .ai-inline-loading {
-    background: #e5e7eb !important;
-    border-left-color: #9ca3af !important;
-    color: #6b7280 !important;
-    animation: ai-pulse 1.2s ease-in-out infinite;
-  }
-  @keyframes ai-pulse {
-    0%, 100% { opacity: 0.5; }
-    50%       { opacity: 1;   }
-  }
 </style>
-
 <script>
 (function () {
   'use strict';
-
   let savedRange    = null;
   let selectedText  = '';
-  let placeholder   = null;
   let isExplaining  = false;
   let lastSeenOutput = '';
+  let popup = null;
 
-  /* ── Build the floating button ──────────────────────────────────── */
   function buildFAB() {
     if (document.getElementById('explain-fab')) return;
     const btn = document.createElement('button');
@@ -239,7 +210,6 @@ HEAD_HTML = """
     fab.disabled        = true;
   }
 
-  /* ── Selection tracking ─────────────────────────────────────────── */
   document.addEventListener('mouseup', function (e) {
     if (e.target.closest('#explain-fab') || isExplaining) return;
     setTimeout(function () {
@@ -254,70 +224,67 @@ HEAD_HTML = """
     }, 50);
   });
 
-  /* ── Explain click ──────────────────────────────────────────────── */
   function onExplainClick() {
     if (!selectedText || !savedRange || isExplaining) return;
     isExplaining = true;
     setFABLoading();
-
-    /* Delete the highlighted text and drop in a loading span */
-    try {
-      savedRange.deleteContents();
-      placeholder = document.createElement('span');
-      placeholder.className = 'ai-inline ai-inline-loading';
-      placeholder.textContent = '⏳ explaining…';
-      savedRange.insertNode(placeholder);
-      window.getSelection().removeAllRanges();
-    } catch (err) {
-      console.warn('[explain] range insert failed', err);
-    }
-
-    /* Trigger the hidden Gradio button → calls Python backend */
     const hiddenBtn = document.querySelector('#hidden-explain-trigger button');
     if (hiddenBtn) hiddenBtn.click();
   }
 
-  /* ── Poll the hidden output textarea for results ────────────────── */
-    function watchOutput() {
-      const target = document.querySelector('#hidden-output');
-      if (!target) {
-        setTimeout(watchOutput, 500);
-        return;
-      }
-    
-      const observer = new MutationObserver(() => {
-        const ta = document.querySelector('#hidden-output textarea');
-        if (!ta) return;
-    
-        const val = ta.value.trim();
-        if (isExplaining && val && val !== lastSeenOutput) {
-          lastSeenOutput = val;
-          applyExplanation(val);
-        }
-      });
-    
-      observer.observe(target, { subtree: true, childList: true });
+  function watchOutput() {
+    const target = document.querySelector('#hidden-output');
+    if (!target) {
+      setTimeout(watchOutput, 500);
+      return;
     }
 
-  function applyExplanation(text) {
-    if (placeholder) {
-      if (!text || text.startsWith('__NO_SELECTION__') || text.startsWith('__ERROR__')) {
-        /* Restore original text on failure */
-        placeholder.replaceWith(document.createTextNode(selectedText));
-      } else {
-        placeholder.classList.remove('ai-inline-loading');
-        placeholder.textContent = text;
-        placeholder.title = 'AI explanation — original: "' + selectedText + '"';
+    const observer = new MutationObserver(() => {
+      const ta = document.querySelector('#hidden-output textarea');
+      if (!ta) return;
+
+      const val = ta.value.trim();
+      if (isExplaining && val && val !== lastSeenOutput) {
+        lastSeenOutput = val;
+        showPopup(val);
       }
-      placeholder = null;
-    }
+    });
+
+    observer.observe(target, { subtree: true, childList: true });
+  }
+
+  function showPopup(text) {
+    if (popup) popup.remove();
+    popup = document.createElement('div');
+    popup.style.position = 'absolute';
+    popup.style.background = '#fef3c7';
+    popup.style.border = '1px solid #f59e0b';
+    popup.style.borderRadius = '6px';
+    popup.style.padding = '10px';
+    popup.style.maxWidth = '300px';
+    popup.style.zIndex = 99999;
+    popup.style.boxShadow = '0 4px 20px rgba(0,0,0,0.3)';
+    popup.style.fontSize = '14px';
+    popup.style.lineHeight = '1.5';
+    popup.style.color = '#1c1917';
+    popup.textContent = text;
+
+    document.body.appendChild(popup);
+
+    // Position near selection
+    const rect = savedRange.getBoundingClientRect();
+    popup.style.top  = `${window.scrollY + rect.bottom + 8}px`;
+    popup.style.left = `${window.scrollX + rect.left}px`;
+
+    // Remove after 20s
+    setTimeout(() => { if(popup) popup.remove(); popup = null; }, 20000);
+
     isExplaining = false;
-    savedRange   = null;
     selectedText = '';
+    savedRange = null;
     hideFAB();
   }
 
-  /* ── Push selected text into the hidden Gradio textbox ─────────── */
   function pushToGradioInput(value) {
     const ta = document.querySelector('#hidden-input textarea');
     if (!ta) return;
@@ -327,7 +294,6 @@ HEAD_HTML = """
     ta.dispatchEvent(new Event('change', { bubbles: true }));
   }
 
-  /* ── Boot ───────────────────────────────────────────────────────── */
   function boot() {
     buildFAB();
     watchOutput();
@@ -346,7 +312,7 @@ HEAD_HTML = """
 with gr.Blocks(head=HEAD_HTML) as demo:
     gr.Markdown(
         "### 📘 Highlight any text — a floating **Explain 🧠** button will appear. "
-        "Click it to replace the selection with an inline AI explanation."
+        "Click it to show an AI explanation in a popup near your selection."
     )
 
     view_toggle = gr.Radio(