first try

2025-01-04 10:31:07 -05:00 · 2025-01-04 10:31:07 -05:00 · 73b75f9946
commit 73b75f9946
parent f0053b343d
2 changed files with 58 additions and 0 deletions
--- a/src/assets/js/main.js
+++ b/src/assets/js/main.js
@ -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>`;
+    }
+}
--- a/src/index.html
+++ b/src/index.html
@ -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>