Added chat page

2025-09-13 20:22:09 +01:00
parent 49d924be20
commit 1abb1b5106
1 changed files with 72 additions and 0 deletions
--- a/templates/chattest.html
+++ b/templates/chattest.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Streaming Response</title>
+
+</head>
+<body>
+
+    <div class="container">
+        <h1>AiThingy</h1>
+        <p>Enter a message, chatId, and auth token below:</p>
+        <input placeholder="Message" id="message"></input>
+        <input placeholder="ChatId" id="chatid"></input>
+        <input placeholder="Token" id="token"></input>
+        <button onclick="startStreaming()">Send Message</button>
+
+        <br>
+
+        <textarea id="response-output" readonly placeholder="Waiting for streaming data..."></textarea>
+    </div>
+
+    <script>
+        async function startStreaming() {
+            const outputArea = document.getElementById('response-output');
+            outputArea.value = 'Connecting to endpoint...\n';
+            const chatId = document.getElementById("chatid").value;
+            const endpointUrl = 'http://127.0.0.1:5000/api/chat/' + chatId + '/generate';
+            const postData = {
+                "message": document.getElementById("message").value
+            };
+
+            try {
+                const response = await fetch(endpointUrl, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'token': document.getElementById("token").value
+                    },
+                    body: JSON.stringify(postData)
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder('utf-8');
+                let receivedChunks = '';
+
+                while (true) {
+                    const { done, value } = await reader.read();
+
+                    if (done) {
+                        break;
+                    }
+
+                    const chunk = decoder.decode(value, { stream: true });
+                    const jsonString = chunk.substring(6);
+                    const data = JSON.parse(jsonString);
+                    outputArea.value = data["response"];
+                }
+            } catch (error) {
+                console.error('An error has occurred:', error);
+                outputArea.value += `\n\n--- An error has occurred: ${error.message} ---`;
+            }
+        }
+    </script>
+
+</body>
+</html>