File size: 7,468 Bytes
84f2f65 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Saliency Pro</title>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
line-height: 1.5;
background-color: #f9fafb;
color: #111827;
}
h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
text-align: center;
}
p.description {
text-align: center;
color: #4b5563;
margin-bottom: 2rem;
}
.container {
background: white;
padding: 2rem;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
textarea {
width: 100%;
height: 150px;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 1rem;
resize: vertical;
margin-bottom: 1rem;
box-sizing: border-box;
}
.controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.slider-group {
display: flex;
align-items: center;
gap: 1rem;
flex-grow: 1;
}
input[type="range"] {
flex-grow: 1;
max-width: 300px;
}
button {
background-color: #3b82f6;
color: white;
border: none;
padding: 0.5rem 1.5rem;
font-size: 1rem;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #2563eb;
}
button:disabled {
background-color: #9ca3af;
cursor: not-allowed;
}
#result-container {
margin-top: 2rem;
padding: 1.5rem;
background-color: #f3f4f6;
border-radius: 0.375rem;
min-height: 100px;
white-space: pre-wrap;
font-size: 1.125rem;
}
/* Token specific styles */
.token {
transition: font-weight 0.2s;
}
.highlighted {
font-weight: 800; /* Extra bold */
color: #000;
}
#loading {
display: none;
color: #6b7280;
text-align: center;
margin-top: 1rem;
}
</style>
</head>
<body>
<h1>Text Saliency Pro</h1>
<p class="description">Improve reading comprehension using LLM attention vectors.<br>Words with attention above the threshold will be bolded.</p>
<div class="container">
<textarea id="text-input" placeholder="Enter or paste your text here...">In this project I want to use the attention vectors of a llm to bold the most important words in an input text to improve reading comprehension.</textarea>
<div class="controls">
<button id="analyze-btn">Analyze Text</button>
<div class="slider-group">
<label for="threshold">Attention Threshold: <span id="threshold-val">0.50</span></label>
<input type="range" id="threshold" min="0" max="1" step="0.01" value="0.5">
</div>
</div>
<div id="loading">Analyzing attention vectors with Gemma 2B... Please wait.</div>
<div id="result-container">
<!-- Processed text will appear here -->
</div>
</div>
<script>
const inputArea = document.getElementById('text-input');
const analyzeBtn = document.getElementById('analyze-btn');
const thresholdSlider = document.getElementById('threshold');
const thresholdVal = document.getElementById('threshold-val');
const resultContainer = document.getElementById('result-container');
const loading = document.getElementById('loading');
let currentTokens = []; // Array of {token: str, word: str, score: float}
// Update threshold display
thresholdSlider.addEventListener('input', (e) => {
thresholdVal.textContent = parseFloat(e.target.value).toFixed(2);
renderTokens(); // Re-render instantly when slider changes
});
// Analyze text when button is clicked
analyzeBtn.addEventListener('click', async () => {
const text = inputArea.value.trim();
if (!text) return;
// Update UI state
analyzeBtn.disabled = true;
loading.style.display = 'block';
resultContainer.innerHTML = '';
try {
// Call the FastAPI backend
const response = await fetch('/analyze', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ text })
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
currentTokens = data.words || [];
renderTokens();
} catch (error) {
console.error('Error analyzing text:', error);
resultContainer.innerHTML = '<span style="color: red;">Error analyzing text. Is the backend running?</span>';
} finally {
// Restore UI state
analyzeBtn.disabled = false;
loading.style.display = 'none';
}
});
// Render the tokens based on the current threshold
function renderTokens() {
if (!currentTokens.length) return;
const threshold = parseFloat(thresholdSlider.value);
resultContainer.innerHTML = ''; // Clear existing
currentTokens.forEach((item, index) => {
// Skip the <bos> token (usually first)
if (index === 0 && (item.token.includes('<bos>') || item.word.includes('<bos>'))) {
return;
}
const span = document.createElement('span');
span.className = 'token';
// Add bolding if score is above threshold
if (item.score >= threshold) {
span.classList.add('highlighted');
}
// If the raw token started with a space, add it here.
// The backend replaced the special block char with a normal space.
// Depending on the tokenizer, 'word' might be better to display if it represents whole words,
// but for subwords, using the raw token with correct spacing is usually best.
let displayText = item.token;
span.textContent = displayText;
resultContainer.appendChild(span);
});
}
</script>
</body>
</html> |