61 lines
2.9 KiB
HTML
61 lines
2.9 KiB
HTML
<!-- https://huggingface.co/Supabase/gte-small -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen py-2">
|
|
<h1 class="text-3xl font-bold mb-4">Web Worker vectorDB Example</h1>
|
|
<form id="text-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
|
<textarea id="text-input" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
|
|
<input type="file" id="file-input" accept=".txt" class="mt-4">
|
|
<button type="submit" class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
|
|
</form>
|
|
|
|
<form id="query-form" style="display: none;" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
|
|
<input type="text" id="query-input" required class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
<button type="submit" class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Query</button>
|
|
</form>
|
|
|
|
<div id="most-similar-sentences" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"></div>
|
|
|
|
<script type="module">
|
|
const worker = new Worker('./dist/worker.bundle.js');
|
|
const mostSimDiv = document.getElementById('most-similar-sentences');
|
|
|
|
document.getElementById('text-form').addEventListener('submit', async event => {
|
|
event.preventDefault();
|
|
mostSimDiv.innerText = ''
|
|
|
|
let text;
|
|
const file = document.getElementById('file-input').files[0];
|
|
if (file) {
|
|
text = await file.text();
|
|
} else {
|
|
text = document.getElementById('text-input').value;
|
|
}
|
|
|
|
worker.postMessage({ type: 'text', text });
|
|
document.getElementById('query-form').style.display = 'block';
|
|
});
|
|
|
|
document.getElementById('query-form').addEventListener('submit', event => {
|
|
event.preventDefault();
|
|
mostSimDiv.innerText = 'thinking...';
|
|
|
|
|
|
const query = document.getElementById('query-input').value;
|
|
worker.postMessage({ type: 'query', query });
|
|
});
|
|
|
|
worker.onmessage = function(event) {
|
|
console.log(event.data);
|
|
mostSimDiv.innerText = event.data.join('\n');
|
|
|
|
};
|
|
</script>
|
|
</body>
|
|
</html> |