| <!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> |
|
|
