2023-06-18 16:29:26 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2023-06-18 22:27:18 +00:00
|
|
|
<title>LoLLMs Endpoint Test</title>
|
2023-06-18 16:29:26 +00:00
|
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
|
|
|
<style>
|
|
|
|
|
.hover\:bg-blue-600:hover {
|
|
|
|
|
background-color: #2563eb;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.active\:bg-blue-700:active {
|
|
|
|
|
background-color: #1d4ed8;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
2023-06-18 22:27:18 +00:00
|
|
|
<body class="bg-gray-100 w-full">
|
|
|
|
|
<div class="flex items-center justify-center min-h-screen w-full">
|
|
|
|
|
<div class="w-full bg-blue-300 p-6 rounded shadow m-4">
|
|
|
|
|
<h1 class="text-2xl font-bold mb-4">LoLLMs Playground</h1>
|
2023-06-18 16:29:26 +00:00
|
|
|
<div id="connection-section">
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<label for="host" class="block text-sm font-medium text-gray-700">Host:</label>
|
|
|
|
|
<input id="host" type="text" class="mt-1 p-2 border border-gray-300 rounded-md w-full"
|
|
|
|
|
value="localhost" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<label for="port" class="block text-sm font-medium text-gray-700">Port:</label>
|
|
|
|
|
<input id="port" type="number" class="mt-1 p-2 border border-gray-300 rounded-md w-full" value="9600" />
|
|
|
|
|
</div>
|
|
|
|
|
<button id="connect-btn"
|
|
|
|
|
class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-4 rounded">Connect</button>
|
2023-06-18 22:27:18 +00:00
|
|
|
<label class="hidden" id = "connecting">connecting ...</label>
|
2023-06-18 16:29:26 +00:00
|
|
|
</div>
|
2023-06-18 22:27:18 +00:00
|
|
|
<div id="generation-section" class="hidden w-full">
|
|
|
|
|
<div>
|
|
|
|
|
<button id="generate-btn"
|
2023-06-18 16:29:26 +00:00
|
|
|
class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-4 rounded">Generate
|
|
|
|
|
Text</button>
|
2023-06-18 22:27:18 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<button id="stop-btn"
|
|
|
|
|
class="bg-red-500 hover:bg-red-600 active:bg-red-700 text-white font-bold py-2 px-4 rounded hidden">Stop
|
|
|
|
|
Generation</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<textarea id="text" class="mt-4 p-2 border border-gray-300 rounded-md h-64 overflow-y-scroll w-full" type="text"></textarea>
|
|
|
|
|
</div>
|
2023-06-18 16:29:26 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
const socket = io();
|
|
|
|
|
const connectButton = document.getElementById('connect-btn');
|
|
|
|
|
const generateButton = document.getElementById('generate-btn');
|
2023-06-18 22:27:18 +00:00
|
|
|
const stopButton = document.getElementById('stop-btn');
|
2023-06-18 16:29:26 +00:00
|
|
|
const connectionSection = document.getElementById('connection-section');
|
|
|
|
|
const generationSection = document.getElementById('generation-section');
|
2023-06-18 22:27:18 +00:00
|
|
|
const connectingText = document.getElementById('connecting');
|
2023-06-18 16:29:26 +00:00
|
|
|
|
2023-06-18 22:27:18 +00:00
|
|
|
// Append the received chunks to the text div
|
2023-06-18 16:29:26 +00:00
|
|
|
function appendToOutput(chunk) {
|
2023-06-18 22:27:18 +00:00
|
|
|
const outputDiv = document.getElementById('text');
|
|
|
|
|
outputDiv.value += chunk;
|
2023-06-18 16:29:26 +00:00
|
|
|
outputDiv.scrollTop = outputDiv.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Event handler for receiving generated text chunks
|
|
|
|
|
socket.on('text_chunk', data => {
|
|
|
|
|
console.log('Received chunk:', data.chunk);
|
|
|
|
|
appendToOutput(data.chunk);
|
|
|
|
|
});
|
|
|
|
|
|
2023-06-18 22:27:18 +00:00
|
|
|
// Event handler for receiving generated text chunks
|
|
|
|
|
socket.on('text_generated', data => {
|
|
|
|
|
console.log('text generated:', data.text);
|
|
|
|
|
// Toggle button visibility
|
|
|
|
|
generateButton.classList.remove('hidden');
|
|
|
|
|
stopButton.classList.add('hidden');
|
|
|
|
|
});
|
|
|
|
|
|
2023-06-18 16:29:26 +00:00
|
|
|
// Event handler for successful connection
|
|
|
|
|
socket.on('connect', () => {
|
2023-06-18 22:27:18 +00:00
|
|
|
console.log('Connected to LoLLMs server');
|
2023-06-18 16:29:26 +00:00
|
|
|
connectButton.disabled = true;
|
2023-06-18 22:27:18 +00:00
|
|
|
connectingText.classList.add("hidden")
|
2023-06-18 16:29:26 +00:00
|
|
|
connectionSection.classList.add('hidden');
|
|
|
|
|
generationSection.classList.remove('hidden');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Event handler for error during text generation
|
2023-06-18 22:27:18 +00:00
|
|
|
socket.on('buzzy', error => {
|
|
|
|
|
console.error('Server is busy. Wait for your turn', error);
|
|
|
|
|
const outputDiv = document.getElementById('text');
|
|
|
|
|
outputDiv.value += `<p class="text-red-500">Error: ${error.message}</p>`;
|
2023-06-18 16:29:26 +00:00
|
|
|
outputDiv.scrollTop = outputDiv.scrollHeight;
|
2023-06-18 22:27:18 +00:00
|
|
|
// Toggle button visibility
|
|
|
|
|
generateButton.classList.remove('hidden');
|
|
|
|
|
stopButton.classList.add('hidden');
|
|
|
|
|
|
2023-06-18 16:29:26 +00:00
|
|
|
});
|
|
|
|
|
|
2023-06-18 22:27:18 +00:00
|
|
|
// Event handler for error during text generation
|
|
|
|
|
socket.on('generation_canceled', error => {
|
|
|
|
|
// Toggle button visibility
|
|
|
|
|
generateButton.classList.remove('hidden');
|
|
|
|
|
stopButton.classList.add('hidden');
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-06-18 16:29:26 +00:00
|
|
|
// Triggered when the "Connect" button is clicked
|
|
|
|
|
connectButton.addEventListener('click', () => {
|
|
|
|
|
const hostInput = document.getElementById('host');
|
|
|
|
|
const portInput = document.getElementById('port');
|
|
|
|
|
const host = hostInput.value.trim();
|
|
|
|
|
const port = parseInt(portInput.value);
|
|
|
|
|
|
|
|
|
|
if (host && port) {
|
|
|
|
|
socket.io.uri = `http://${host}:${port}`;
|
|
|
|
|
socket.connect();
|
2023-06-18 22:27:18 +00:00
|
|
|
connectingText.classList.remove("hidden")
|
2023-06-18 16:29:26 +00:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Triggered when the "Generate Text" button is clicked
|
|
|
|
|
generateButton.addEventListener('click', () => {
|
2023-06-18 22:27:18 +00:00
|
|
|
const outputDiv = document.getElementById('text');
|
|
|
|
|
var prompt = outputDiv.value
|
|
|
|
|
console.log(prompt)
|
|
|
|
|
// Trigger the 'generate_text' event with the prompt
|
|
|
|
|
socket.emit('generate_text', { prompt, personality: -1, n_predicts: 1024 });
|
|
|
|
|
|
|
|
|
|
// Toggle button visibility
|
|
|
|
|
generateButton.classList.add('hidden');
|
|
|
|
|
stopButton.classList.remove('hidden');
|
|
|
|
|
});
|
2023-06-18 16:29:26 +00:00
|
|
|
|
2023-06-18 22:27:18 +00:00
|
|
|
// Triggered when the "Stop Generation" button is clicked
|
|
|
|
|
stopButton.addEventListener('click', () => {
|
|
|
|
|
// Trigger the 'cancel_generation' event
|
|
|
|
|
socket.emit('cancel_generation',{});
|
2023-06-18 16:29:26 +00:00
|
|
|
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
