Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Embedding Demo</title> | |
| <!-- Include Tailwind CSS via CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Include Heroicons for the copy icon --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| </head> | |
| <body class="bg-gray-100 flex items-center justify-center min-h-screen"> | |
| <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md"> | |
| <h1 class="text-2xl font-bold mb-6 text-center">Embedding Demo</h1> | |
| <div class="mb-4"> | |
| <label for="inputText" class="block text-gray-700 text-sm font-bold mb-2">Enter Text:</label> | |
| <textarea id="inputText" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" rows="4" placeholder="Enter text to embed..."></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="modelSelect" class="block text-gray-700 text-sm font-bold mb-2">Select Model:</label> | |
| <select id="modelSelect" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| <!-- Options will be populated by JavaScript --> | |
| </select> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <button id="embedButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50 disabled:cursor-not-allowed"> | |
| Get Embedding | |
| </button> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2">Embedding Result:</label> | |
| <div class="flex items-center bg-gray-200 rounded"> | |
| <div id="result" class="p-4 text-gray-800 text-sm overflow-auto max-h-60 flex-grow"> | |
| <p>Embedding result will appear here...</p> | |
| </div> | |
| <button id="copyButton" class="p-4 self-start text-gray-600 hover:text-gray-800 focus:outline-none"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', async () => { | |
| const modelSelect = document.getElementById('modelSelect'); | |
| try { | |
| const response = await fetch('/v1/models'); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| // Clear existing options | |
| modelSelect.innerHTML = ''; | |
| // Populate dropdown with models | |
| data.data.forEach(model => { | |
| const option = document.createElement('option'); | |
| option.value = model.id; | |
| option.textContent = model.id; | |
| modelSelect.appendChild(option); | |
| }); | |
| } catch (error) { | |
| console.error('Error fetching models:', error); | |
| // Optionally, add an error message to the dropdown or a separate element | |
| const option = document.createElement('option'); | |
| option.value = ''; | |
| option.textContent = 'Error loading models'; | |
| modelSelect.appendChild(option); | |
| } | |
| }); | |
| document.getElementById('embedButton').addEventListener('click', async () => { | |
| const inputText = document.getElementById('inputText').value; | |
| const model = document.getElementById('modelSelect').value; | |
| const resultDiv = document.getElementById('result'); | |
| const copyButton = document.getElementById('copyButton'); | |
| const embedButton = document.getElementById('embedButton'); // Get button reference | |
| if (!inputText) { | |
| resultDiv.textContent = 'Please enter some text.'; | |
| return; | |
| } | |
| resultDiv.textContent = 'Fetching embedding...'; | |
| copyButton.style.display = 'none'; // Hide copy button while fetching | |
| embedButton.disabled = true; // Disable button | |
| try { | |
| const response = await fetch('/v1/embeddings', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| input: inputText, | |
| model: model, | |
| encoding_format: 'float' // Assuming 'float' is the only supported format | |
| }), | |
| }); | |
| if (!response.ok) { | |
| const error = await response.json(); | |
| throw new Error(`HTTP error! status: ${response.status}, detail: ${error.detail}`); | |
| } | |
| const data = await response.json(); | |
| resultDiv.textContent = JSON.stringify(data, null, 2); // Display pretty-printed JSON | |
| copyButton.style.display = 'block'; // Show copy button after result is displayed | |
| } catch (error) { | |
| resultDiv.textContent = `Error: ${error.message}`; | |
| console.error('Error fetching embedding:', error); | |
| copyButton.style.display = 'none'; // Hide copy button on error | |
| } finally { | |
| embedButton.disabled = false; // Re-enable button | |
| } | |
| }); | |
| document.getElementById('copyButton').addEventListener('click', async () => { | |
| const resultDiv = document.getElementById('result'); | |
| const textToCopy = resultDiv.textContent; | |
| try { | |
| await navigator.clipboard.writeText(textToCopy); | |
| // Optional: Provide visual feedback to the user | |
| alert('Copied to clipboard!'); | |
| } catch (err) { | |
| console.error('Failed to copy text: ', err); | |
| // Optional: Provide visual feedback to the user | |
| alert('Failed to copy text.'); | |
| } | |
| }); | |
| // Initially hide the copy button | |
| document.getElementById('copyButton').style.display = 'none'; | |
| </script> | |
| </body> | |
| </html> |