File size: 4,750 Bytes
334632d dfacca1 334632d dfacca1 334632d 0baa47d 334632d fa7b924 334632d 0baa47d 334632d fa7b924 334632d |
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 |
<!DOCTYPE html>
<html>
<head>
<title>Text Embedding and Similarity Search</title>
</head>
<body>
<h1>Text Embedding and Similarity Search</h1>
<h2>Embed a string</h2>
<form id="embed-form">
<label for="embed-input">String to embed:</label><br>
<input type="text" id="embed-input" name="embed-input"><br>
<input type="submit" value="Embed">
</form>
<h2>Search for a string</h2>
<form id="search-form">
<label for="search-input">String to search:</label><br>
<input type="text" id="search-input" name="search-input"><br>
<label for="n-input">Number of results to return:</label><br>
<input type="number" id="n-input" name="n-input" min="1" value="5"><br>
<input type="submit" value="Search">
</form>
<div class="form-group">
<label for="chatModels">Chat Models:</label>
<select id="chatModels" multiple>
<option value="claude-3-5-sonnet">claude-3-5-sonnet</option>
<option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
<option value="gpt-4o">GPT-4o</option>
</select>
</div>
<div id="results"></div>
<script>
let apiKey = '';
let apiUrl = '';
////////////////////////////////////////////////
// Populate the model list on api key change
////////////////////////////////////////////////
async function fetchLLMModels() {
try {
const apiBaseUrl = document.getElementById('apiBaseUrl').value;
const apiKey = document.getElementById('apiKey').value;
const response = await fetch(
apiBaseUrl + 'models',
{
method: 'GET',
headers: {
'Authorization': `Bearer ${apiKey}`
}
}
);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
return data.data.map(model => model.id);
} catch (error) {
console.error('Error fetching LLM models:', error);
return ['Error fetching model'];
}
}
async function populateLLMModels() {
const chatModels = document.getElementById('chatModels');
// Set the multiple attribute
chatModels.setAttribute('multiple', '');
// Clear existing options
chatModels.innerHTML = '';
const models = await fetchLLMModels();
// Sort options alphabetically
const sortedOptions = Array.from(models).sort((a, b) => a.localeCompare(b));
console.log(sortedOptions);
// Add new options
sortedOptions.forEach(model => {
const option = document.createElement('option');
option.value = model;
option.text = model;
chatModels.add(option);
});
// Set the size of the select element to match the number of options
chatModels.size = chatModels.options.length / 4;
}
document.getElementById("embed-form").addEventListener("submit", function(event) {
event.preventDefault();
const text = document.getElementById("embed-input").value;
fetch("/embed", {
method: "GET",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({query: 'embed', text: text})
})
.then(response => response.json())
.then(data => {
document.getElementById("results").innerHTML = data.message;
});
});
document.getElementById("search-form").addEventListener("submit", function(event) {
event.preventDefault();
const text = document.getElementById("search-input").value;
const n = document.getElementById("n-input").value;
fetch("/search", {
method: "GET",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({query: 'search', text: text, n: n})
})
.then(response => response.json())
.then(data => {
let resultsHtml = `<h3>Top ${n} results:</h3>`;
for (let i = 0; i < data.distances.length; i++) {
resultsHtml += `<p>${i+1}. Index: ${data.indices[i]}, Distance: ${data.distances[i]}</p>`;
}
document.getElementById("results").innerHTML = resultsHtml;
});
});
</script>
</body>
</html>
|