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