|
<!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 = ''; |
|
|
|
const hfApiUrl = 'https://almaatla-fastapi.hf.space/'; |
|
|
|
|
|
|
|
|
|
|
|
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'); |
|
|
|
chatModels.setAttribute('multiple', ''); |
|
|
|
chatModels.innerHTML = ''; |
|
|
|
const models = await fetchLLMModels(); |
|
|
|
|
|
const sortedOptions = Array.from(models).sort((a, b) => a.localeCompare(b)); |
|
console.log(sortedOptions); |
|
|
|
|
|
sortedOptions.forEach(model => { |
|
const option = document.createElement('option'); |
|
option.value = model; |
|
option.text = model; |
|
chatModels.add(option); |
|
}); |
|
|
|
chatModels.size = chatModels.options.length / 4; |
|
} |
|
|
|
|
|
document.getElementById("embed-form").addEventListener("submit", function(event) { |
|
event.preventDefault(); |
|
const text = document.getElementById("embed-input").value; |
|
fetch(hfApiUrl + "embed", { |
|
method: "POST", |
|
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(hfApiUrl + "search", { |
|
method: "POST", |
|
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> |
|
|
