voidf1sh/web-llm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first try

Browse Source
This commit is contained in:
Skylar Grant 2025-01-04 10:31:07 -05:00
parent f0053b343d
commit 73b75f9946
2 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/assets/js/main.js Normal file
View File

@ -0,0 +1,39 @@
// Variables
const llmHost = 'https://chat.vfsh.me';
const generateEndpoint = '/api/generate';
// Grab elements from the page
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');
const outputArea = document.getElementById('outputArea');
// Functions
async function sendGen() {
const response = await fetch(`${llmHost}${generateEndpoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ model: 'llama3.2', prompt: userInput.value })
});
return response;
}
async function readResponse(response) {
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let done = false;
try {
while (!done) {
const { value, done: readerDone } = await reader.read();
done = readerDone;
const chunk = decoder.decode(value, { stream: true });
outputArea.innerHTML += chunk;
outputArea.scrollTop = outputArea.scrollHeight;
}
} catch (error) {
outputArea.innerHTML = `<span class="text-red-500">Error: ${error.message}</span>`;
}
}

19
src/index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Interaction WebApp</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="bg-white shadow-md rounded-lg p-6 w-full max-w-lg">
<h1 class="text-2xl font-bold mb-4 text-gray-800">Interact with LLM</h1>
<textarea id="userInput" rows="4" class="w-full border border-gray-300 rounded-lg p-2 focus:ring focus:ring-blue-500" placeholder="Type your prompt here..."></textarea>
<button id="sendButton" class="mt-4 w-full bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600">Send</button>
<div id="outputArea" class="mt-6 bg-gray-100 border border-gray-300 rounded-lg p-4 h-48 overflow-y-auto"></div>
</div>
<script src="./assets/js/main.js"></script>
</body>
</html>