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

Clean up and polish

Browse Source
This commit is contained in:
Skylar Grant 2025-01-04 11:33:47 -05:00
parent f726414a7d
commit b3b307f2ae
2 changed files with 55 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/js/main.js
View File

@ -6,9 +6,12 @@ const generateEndpoint = '/api/generate';
const userInput = document.getElementById('userInput');
const sendButton = document.getElementById('sendButton');
const outputArea = document.getElementById('outputArea');
const loadingSpinner = document.getElementById('loadingSpinner');
const darkModeToggle = document.getElementById('darkModeToggle');
// Functions
async function sendGen() {
loadingSpinner.classList.remove('hidden');
outputArea.innerHTML = '<span class="text-blue-500">Generating... (please be patient, streaming responses are not enabled yet...)</span>';
const response = await fetch(`${llmHost}${generateEndpoint}`, {
method: 'POST',
@ -51,6 +54,7 @@ async function readResponse(response) {
cleanResponse.push(JSONline.response);
}
}
loadingSpinner.classList.add('hidden');
outputArea.innerHTML = cleanResponse.join('');
return;
}
@ -63,6 +67,11 @@ async function readResponse(response) {
}
}
darkModeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark');
});
// Event listeners
sendButton.addEventListener('click', async () => {
outputArea.innerHTML = '';

53
src/index.html
View File

@ -3,17 +3,54 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Interaction WebApp</title>
<title>voidGPT</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#1e293b',
},
},
},
};
</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>
<body class="bg-gray-100 dark:bg-secondary flex items-center justify-center min-h-screen">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 w-full max-w-lg">
<!-- Header with Dark Mode Toggle -->
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Interact with LLM</h1>
<button id="darkModeToggle"
class="bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-300 p-2 rounded-full">
🌙
</button>
</div>
<script src="./assets/js/main.js"></script>
<!-- Prompt Input Area -->
<textarea id="userInput" rows="4"
class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-lg p-3 focus:ring focus:ring-primary focus:outline-none"
placeholder="Type your prompt here..."></textarea>
<!-- Send Button -->
<button id="sendButton"
class="mt-4 w-full bg-primary text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600">
Send
</button>
<!-- Output Area -->
<div id="outputArea"
class="mt-6 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg p-4 h-48 overflow-y-auto text-gray-800 dark:text-gray-100">
</div>
<!-- Loading Spinner -->
<div id="loadingSpinner"
class="hidden mt-4 flex justify-center items-center">
<div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
</div>
</div>
</body>
</html>