From 38774d518b9546ae055634d13ffb92a85503ddb1 Mon Sep 17 00:00:00 2001 From: Christian Rute Date: Mon, 18 Nov 2024 15:30:08 +0100 Subject: [PATCH] add tokenizer api call to display progress bar --- client/css/styles.css | 8 ++++- client/js/chat.js | 77 +++++++++++++++++++++++++++++++++++++++---- client/js/main.js | 8 +++-- client/welcome.html | 14 ++++++-- docker-compose.yml | 4 +-- 5 files changed, 96 insertions(+), 15 deletions(-) diff --git a/client/css/styles.css b/client/css/styles.css index 690e554..c017430 100644 --- a/client/css/styles.css +++ b/client/css/styles.css @@ -206,7 +206,7 @@ main { align-self: flex-end; } -.chat-message.bot { +.chat-message.assistant { background-color: #e0e0e0; color: #000; align-self: flex-start; @@ -455,4 +455,10 @@ main { } } +/* Progress bar */ + +#progress-main-div { + margin-top: 1rem; + border: none; +} diff --git a/client/js/chat.js b/client/js/chat.js index 0089d1c..cedaf88 100644 --- a/client/js/chat.js +++ b/client/js/chat.js @@ -60,6 +60,10 @@ async function saveMessage(chatId, message) { if (userMessage) { let a = await stream_api_open_ai(userMessage); console.log("Komplette Nachricht: " + a) + // Update progress bar: + let consumption = await tokenize_api_open_ai() + updateProgressBar(consumption.count, consumption.max_model_len); + const chatHistory = JSON.parse(localStorage.getItem(`chatHistory-${chatId}`)) || []; chatHistory.push({ role: "assistant", content: a }); localStorage.setItem(`chatHistory-${chatId}`, JSON.stringify(chatHistory)); @@ -147,7 +151,6 @@ function loadAllChatSessions() { chatCount = Math.max(chatCount, chatId + 1); // Chat-Zähler aktualisieren } }); - console.log(chatCount) for (let i = 0; i < chatCount; i++) {// Aktualisiere die Namen an der Seite updateChatSessionButton(i); @@ -262,9 +265,14 @@ async function stream_api_open_ai(userMessage) { // Neues div-Element für die Antwort des Chatbots erstellen const chatBox = document.getElementById('chatBox'); const botMessageDiv = document.createElement('div'); - botMessageDiv.className = 'chat-message bot'; + botMessageDiv.className = 'chat-message assistant'; chatBox.prepend(botMessageDiv); + let send_message_system = [{ role: "system", content: "You are a knowledgeable assistant." }]; + let send_message_user = getAllCurrentChatMessages(); + let send_message_final = send_message_system.concat(send_message_user) + console.log(send_message_final) + const response = await fetch('http://localhost:8015/v1/chat/completions', { method: 'POST', headers: { @@ -273,10 +281,7 @@ async function stream_api_open_ai(userMessage) { }, body: JSON.stringify({ model: await getModels(), - messages: [ - { role: 'system', content: 'You are a knowledgeable assistant.' }, - ...getAllCurrentChatMessages() - ], + messages: send_message_final, stream: true, temperature: 0.3 }) @@ -321,3 +326,63 @@ async function stream_api_open_ai(userMessage) { } return result; } + +function formatArrayToCustomString(array) { + return '[' + + array.map(dict => { + return '{' + + Object.entries(dict) + .map(([key, value]) => `'${key}':'${value}'`) + .join(', ') + + '}'; + }).join(', ') + + ']'; +} + +// Tokenizer +async function tokenize_api_open_ai() { + + let send_message_system = [{ role: "system", content: "You are a knowledgeable assistant." }]; + let send_message_user = getAllCurrentChatMessages(); + let send_message_final = send_message_system.concat(send_message_user) + let formattedString = `"${formatArrayToCustomString(send_message_final)}"`; + console.log(formattedString) + + const response = await fetch('http://localhost:8015/tokenize', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer YOUR_API_KEY`, + }, + body: JSON.stringify({ + model: await getModels(), + prompt: formattedString, + add_special_tokens: true + }) + }); + // Check if the response is successful + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const json = await response.json(); // Await the response.json() promise + + console.log(json); // Log the parsed JSON response + return json + +} + +// Progress Bar + +// Function to update the progress bar +function updateProgressBar(currentUsage, maxUsage) { + const percentage = (currentUsage / maxUsage) * 100; + + // Update the width of the progress bar + const progressBar = document.getElementById('progress-bar'); + progressBar.style.width = `${percentage}%`; + + // Update the text + const usageText = document.getElementById('usage-text'); + usageText.innerText = `${currentUsage} / ${maxUsage} used`; +} \ No newline at end of file diff --git a/client/js/main.js b/client/js/main.js index f8792aa..c5adc1c 100644 --- a/client/js/main.js +++ b/client/js/main.js @@ -21,11 +21,14 @@ async function loadUserData() { } }); + console.log('Response status:', response.status); + if (!response.ok) { throw new Error('Fehler beim Abrufen der Benutzerdaten'); } const data = await response.json(); + document.getElementById('username').textContent = data.user; document.getElementById('isAdmin').textContent = data.isAdmin ? 'Ja' : 'Nein'; @@ -52,9 +55,6 @@ document.getElementById('logoutBtn').addEventListener('click', () => { window.location.href = 'index.html'; }); -// Funktion um auf die Willkommensseite zurückzukommen -document.getElementById("welcomeButton").addEventListener("click", toWelcome); - function toWelcome() { location.href = 'welcome.html'; } @@ -147,6 +147,8 @@ async function deleteUser(userId) { // Abhängig von der Seite entweder Admin- oder Benutzerdaten laden if (window.location.pathname.includes('admin.html')) { + // Funktion um auf die Willkommensseite zurückzukommen + document.getElementById("welcomeButton").addEventListener("click", toWelcome); await loadAdminData(); await loadUserList(); } else if (window.location.pathname.includes('welcome.html')) { diff --git a/client/welcome.html b/client/welcome.html index 0bc923e..8872f47 100644 --- a/client/welcome.html +++ b/client/welcome.html @@ -16,11 +16,11 @@
-

Ein simples Chat-Interface mit Fokus auf die Privatsphäre.

+

Ein simples Chat-Interface.

@@ -40,14 +40,22 @@
+
+
+
+
+

0 / 70144 used

+
+
+
diff --git a/docker-compose.yml b/docker-compose.yml index f8a1196..e4c21dc 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -15,8 +15,8 @@ services: container_name: database volumes: - mongo-data:/data/db - # ports: - # - "27017:27017" + ports: + - "27017:27017" networks: internal_network: ipv4_address: 172.18.0.3