feat: add multiple models

This commit is contained in:
nobody 2025-10-30 16:26:48 -07:00
commit fee0e643e4
Signed by: GrocerPublishAgent
GPG key ID: D460CD54A9E3AB86
5 changed files with 517 additions and 32 deletions

View file

@ -1,4 +1,4 @@
CTYPE HTML>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf8" />
@ -36,6 +36,23 @@ CTYPE HTML>
font-weight: normal;
color: #a0a0a0;
}
.controls {
width: 700px;
margin: 15px auto;
font-family: sans-serif;
}
.controls label {
margin-right: 10px;
color: #4d4d4d;
}
.controls select {
padding: 5px 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
cursor: pointer;
}
span.sentence {
--salience: 1;
background-color: rgba(249, 239, 104, var(--salience));
@ -51,16 +68,27 @@ CTYPE HTML>
<body>
<h1>
Salience
<span>automatic sentence highlights based on their significance to the document</span>
<span>sentence highlights based on their significance to the document</span>
</h1>
<div class="controls">
<label for="model-select">Model:</label>
<select id="model-select">
<option value="">Loading...</option>
</select>
</div>
<p id="content"></p>
<script type="text/javascript">
const content = document.querySelector('#content')
const modelSelect = document.querySelector('#model-select')
let adjacency = null
let currentModel = 'all-mpnet-base-v2'
function scale(score) {
return Math.max(0, Math.min(1, score ** 3 - 0.95))
}
let exponent = 5
const redraw = () => {
if (!adjacency) return
const sentences = document.querySelectorAll('span.sentence')
@ -90,31 +118,62 @@ CTYPE HTML>
})
}
}
function loadSalience(model) {
// Clear existing content
content.innerHTML = ''
adjacency = null
fetch(`/salience?model=${encodeURIComponent(model)}`).then(async res => {
const data = await res.json()
console.log(data)
const source = data.source
const intervals = data.intervals
const tokens = intervals.map(([start, end]) => source.substr(start, end - start))
adjacency = data.adjacency
tokens.forEach((t, i) => {
const token = document.createElement('span')
token.innerText = t
token.classList.add('sentence')
content.appendChild(token)
if (tokens[i+1] && intervals[i+1][0] > intervals[i][1]) {
const intervening = document.createElement('span')
const start = intervals[i][1]
intervening.innerText = source.substr(start, intervals[i+1][0] - start)
content.appendChild(intervening)
}
})
redraw()
})
}
// Load available models and populate dropdown
fetch('/models').then(async res => {
const models = await res.json()
modelSelect.innerHTML = ''
models.forEach(model => {
const option = document.createElement('option')
option.value = model
option.textContent = model
if (model === currentModel) {
option.selected = true
}
modelSelect.appendChild(option)
})
})
// Handle model selection change
modelSelect.addEventListener('change', (e) => {
currentModel = e.target.value
loadSalience(currentModel)
})
// Disabled functionality to center highlights on a selected fragment
// document.addEventListener('mousemove', redraw)
// document.addEventListener('mouseup', redraw)
fetch('/salience').then(async res => {
const data = await res.json()
console.log(data)
const source = data.source
const intervals = data.intervals
const tokens = intervals.map(([start, end]) => source.substr(start, end - start))
adjacency = data.adjacency
tokens.forEach((t, i) => {
const token = document.createElement('span')
token.innerText = t
token.classList.add('sentence')
content.appendChild(token)
if (tokens[i+1] && intervals[i+1][0] > intervals[i][1]) {
const intervening = document.createElement('span')
const start = intervals[i][1]
intervening.innerText = source.substr(start, intervals[i+1][0] - start)
content.appendChild(intervening)
}
})
redraw()
})
// Load initial salience data
loadSalience(currentModel)
</script>
</body>
</html>