Update app.py

app.py

@@ -29,19 +29,46 @@ def analyze_text(text, top_k):
     css = """<style>
 .tc{display:flex;flex-wrap:wrap;gap:5px;padding:20px;line-height:2.4;font-family:'Segoe UI',sans-serif}
 .tw{position:relative;display:inline-block}
-.tk{padding:4px 7px;border-radius:6px;cursor:default;font-size:15px;transition:.2s;border:1px solid transparent}
+.tk{padding:4px 7px;border-radius:6px;cursor:pointer;font-size:15px;transition:.2s;border:1px solid transparent;user-select:none}
 .tw:hover .tk{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.18);border-color:#999}
 .tt{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
 background:#1a1a2e;color:#eee;padding:14px;border-radius:12px;font-size:13px;z-index:9999;
 box-shadow:0 10px 30px rgba(0,0,0,.35);min-width:220px;max-height:350px;overflow-y:auto}
+
+/* Bridge the gap between token and tooltip with a pseudo-element */
+.tt::after{content:'';position:absolute;top:100%;left:0;width:100%;height:12px}
+
+/* Show on hover */
 .tw:hover .tt{display:block}
+
+/* Show when pinned via click */
+.tw.pinned .tt{display:block}
+.tw.pinned .tk{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.18);border-color:#999;outline:2px solid #7fdbca}
+
 .th{font-weight:700;font-size:14px;color:#7fdbca;border-bottom:1px solid #333;padding-bottom:6px;margin-bottom:6px}
 .tp{color:#ffd700;margin-bottom:8px}
 .at{color:#ff79c6;font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
 .aw{display:flex;justify-content:space-between;padding:2px 0;font-size:12px}
 .aw .w{color:#c3cee3}.aw .p{color:#666;margin-left:14px}
 .hi{font-weight:700;color:#7fdbca!important}
-</style>"""
+</style>
+<script>
+document.addEventListener('click', function(e) {
+    const tk = e.target.closest('.tk');
+    const tw = tk ? tk.closest('.tw') : null;
+    // If clicked a token, toggle its pin
+    if (tw) {
+        const wasPinned = tw.classList.contains('pinned');
+        // Unpin all others
+        document.querySelectorAll('.tw.pinned').forEach(el => el.classList.remove('pinned'));
+        // Toggle this one
+        if (!wasPinned) tw.classList.add('pinned');
+    } else if (!e.target.closest('.tt')) {
+        // Clicked outside any token or tooltip — unpin all
+        document.querySelectorAll('.tw.pinned').forEach(el => el.classList.remove('pinned'));
+    }
+});
+</script>"""
 
     parts = [css, '<div class="tc">']
     for i in range(len(tokens)):
@@ -79,7 +106,7 @@ box-shadow:0 10px 30px rgba(0,0,0,.35);min-width:220px;max-height:350px;overflow
 
 
 with gr.Blocks(theme=gr.themes.Soft(), css="footer{display:none!important}.main{max-width:960px;margin:auto}") as demo:
-    gr.Markdown("# 🔍 Token Probability Explorer\nPaste text, hover over each token to see its probability and the most likely alternatives.")
+    gr.Markdown("# 🔍 Token Probability Explorer\nPaste text, **hover** to preview or **click** a token to pin its tooltip open. Click elsewhere to dismiss.")
     with gr.Row():
         text_input = gr.Textbox(label="Input Text", placeholder="Paste your text here…", lines=5, scale=4)
         top_k_input = gr.Number(label="# Alternatives", value=10, minimum=1, maximum=200, step=1, scale=1)