Add interactive token visualization with hover tooltips showing top-5 alternatives

README_SPACE.md

@@ -10,13 +10,15 @@ pinned: false
 # Text Generation & Summarization App
 
 This application provides two AI-powered features:
-- **Text Generation**: Generate text completions using Qwen2.5-0.5B-Instruct
+- **Text Generation**: Generate text completions using Qwen2.5-0.5B-Instruct with interactive token visualization
 - **Summarization**: Summarize long text using BART-large-CNN
 
 ## Features
 - FastAPI backend
 - Interactive web interface
+- **Interactive Token Visualization**: Hover over any generated token to see the top 5 alternative tokens the model considered
 - Real-time text generation and summarization
+- Next word prediction with probability scores
 - Adjustable parameters (max tokens, sampling)
 
 ## Models Used

app.py

@@ -41,15 +41,65 @@ def generate(req: GenRequest):
         )
         return {"generated_text": out[0]["summary_text"]}
     else:
-        # Use text generation pipeline
-        out = generator_pipe(
-            req.text,
-            max_new_tokens=req.max_new_tokens,
-            do_sample=req.do_sample,
-            truncation=True,
-            return_full_text=False,
-        )
-        return {"generated_text": out[0]["generated_text"]}
+        # Use text generation pipeline with token-level alternatives
+        return generate_with_alternatives(req)
+
+def generate_with_alternatives(req: GenRequest):
+    """Generate text token-by-token with top-5 alternatives for each token"""
+    input_text = req.text
+    max_new_tokens = req.max_new_tokens
+    
+    tokens_data = []
+    current_text = input_text
+    
+    for _ in range(max_new_tokens):
+        inputs = tokenizer(current_text, return_tensors="pt")
+        
+        with torch.no_grad():
+            outputs = model(**inputs)
+            next_token_logits = outputs.logits[0, -1, :]
+            
+            # Get probabilities
+            probs = torch.softmax(next_token_logits, dim=-1)
+            
+            # Get top 5 alternatives
+            top_k = 5
+            top_probs, top_indices = torch.topk(probs, top_k)
+            
+            # Choose the greedy token (highest probability)
+            chosen_token_id = top_indices[0].item()
+            chosen_token = tokenizer.decode([chosen_token_id])
+            
+            # Collect alternatives
+            alternatives = []
+            for i in range(top_k):
+                token_id = top_indices[i].item()
+                token_text = tokenizer.decode([token_id])
+                probability = top_probs[i].item() * 100
+                alternatives.append({
+                    "token": token_text,
+                    "probability": round(probability, 2)
+                })
+            
+            tokens_data.append({
+                "token": chosen_token,
+                "alternatives": alternatives
+            })
+            
+            # Update current text with chosen token
+            current_text += chosen_token
+            
+            # Check for end of sequence
+            if chosen_token_id == tokenizer.eos_token_id:
+                break
+    
+    # Reconstruct full text
+    generated_text = "".join([t["token"] for t in tokens_data])
+    
+    return {
+        "generated_text": generated_text,
+        "tokens": tokens_data
+    }
 
 @app.post("/predict_next")
 def predict_next(req: GenRequest):

static/css/style.css

@@ -182,6 +182,120 @@ button:active {
     font-style: italic;
 }
 
+/* Interactive Token Display */
+.interactive-output {
+    line-height: 2;
+    font-size: 16px;
+}
+
+.hoverable-token {
+    position: relative;
+    display: inline-block;
+    padding: 2px 4px;
+    margin: 0 1px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    background: transparent;
+}
+
+.hoverable-token:hover {
+    background: #e3f2fd;
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+}
+
+/* Tooltip for alternatives */
+.token-tooltip {
+    visibility: hidden;
+    opacity: 0;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-10px);
+    background: #2c3e50;
+    color: white;
+    padding: 12px;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    min-width: 250px;
+    max-width: 350px;
+    margin-bottom: 8px;
+    transition: all 0.3s ease;
+    pointer-events: none;
+}
+
+.token-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 8px solid transparent;
+    border-top-color: #2c3e50;
+}
+
+.hoverable-token:hover .token-tooltip {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+.tooltip-header {
+    font-weight: 700;
+    font-size: 0.9em;
+    margin-bottom: 10px;
+    color: #ecf0f1;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    padding-bottom: 6px;
+}
+
+.tooltip-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 6px;
+    margin: 4px 0;
+    border-radius: 4px;
+    background: rgba(255, 255, 255, 0.05);
+    transition: background 0.2s ease;
+}
+
+.tooltip-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.tooltip-item.chosen {
+    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
+    border: 1px solid rgba(102, 126, 234, 0.5);
+}
+
+.tooltip-token {
+    font-family: 'Courier New', monospace;
+    font-weight: 600;
+    font-size: 0.95em;
+    color: #ecf0f1;
+    margin-right: 8px;
+    flex: 1;
+}
+
+.tooltip-prob {
+    font-weight: 700;
+    color: #3498db;
+    font-size: 0.9em;
+    margin-left: 8px;
+}
+
+.chosen-badge {
+    background: #27ae60;
+    color: white;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 0.75em;
+    font-weight: 600;
+    margin-left: 8px;
+}
+
 /* Predictions Section */
 .predictions-section {
     margin-top: 30px;
@@ -293,4 +407,15 @@ button:active {
     .prediction-token {
         font-size: 0.95em;
     }
+    
+    /* Mobile tooltip adjustments */
+    .token-tooltip {
+        min-width: 200px;
+        max-width: 280px;
+        font-size: 0.9em;
+    }
+    
+    .hoverable-token {
+        padding: 3px 5px;
+    }
 }

static/js/app.js

@@ -25,7 +25,15 @@ const generateText = async () => {
 
         if (response.ok) {
             const data = await response.json();
-            outputElement.innerText = data.generated_text;
+            
+            if (mode === "summarize" || !data.tokens) {
+                // Simple text display for summarization or legacy response
+                outputElement.innerText = data.generated_text;
+            } else {
+                // Interactive token display with hover alternatives
+                displayInteractiveTokens(data.tokens, outputElement);
+            }
+            
             outputElement.classList.remove("loading");
         } else {
             outputElement.innerText = "Error: Unable to process request.";
@@ -37,6 +45,49 @@ const generateText = async () => {
     }
 };
 
+const displayInteractiveTokens = (tokens, container) => {
+    container.innerHTML = '';
+    container.classList.add('interactive-output');
+    
+    tokens.forEach((tokenData, index) => {
+        const tokenSpan = document.createElement('span');
+        tokenSpan.className = 'hoverable-token';
+        tokenSpan.textContent = tokenData.token;
+        tokenSpan.dataset.index = index;
+        
+        // Create tooltip with alternatives
+        const tooltip = document.createElement('div');
+        tooltip.className = 'token-tooltip';
+        
+        let tooltipHTML = '<div class="tooltip-header">Top 5 Alternatives:</div>';
+        tokenData.alternatives.forEach((alt, i) => {
+            const isChosen = i === 0;
+            tooltipHTML += `
+                <div class="tooltip-item ${isChosen ? 'chosen' : ''}">
+                    <span class="tooltip-token">${escapeHtml(alt.token)}</span>
+                    <span class="tooltip-prob">${alt.probability}%</span>
+                    ${isChosen ? '<span class="chosen-badge">✓ chosen</span>' : ''}
+                </div>
+            `;
+        });
+        
+        tooltip.innerHTML = tooltipHTML;
+        tokenSpan.appendChild(tooltip);
+        container.appendChild(tokenSpan);
+    });
+};
+
+const escapeHtml = (text) => {
+    const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    return text.replace(/[&<>"']/g, m => map[m]);
+};
+
 const predictNext = async () => {
     const textInput = document.getElementById("textInput").value;