feat: add multiple models
This commit is contained in:
parent
8e2865c5ac
commit
fee0e643e4
5 changed files with 517 additions and 32 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue