Spaces:
Sleeping
Sleeping
File size: 6,540 Bytes
231d431 |
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 134 135 136 137 138 139 140 141 142 |
<!DOCTYPE html>
<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> |