add tokenizer api call to display progress bar

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;
+}
 

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`;
+}

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')) {

client/welcome.html

@@ -16,11 +16,11 @@
 </div>
 <!-- Header für Benutzer-Info und Buttons -->
     <header class="header">
-        <h1 class="header-welcome">Ein simples Chat-Interface mit Fokus auf die Privatsphäre.</h1>
+        <h1 class="header-welcome">Ein simples Chat-Interface.</h1>
 
         <div class="header-user-info">
-            <p><strong>Benutzername:</strong> <span id="username">Gast</span></p>
-            <p><strong>Admin:</strong> <span id="isAdmin">Nein</span></p>
+            <p><strong>Benutzername:</strong> <span id="username"></span></p>
+            <p><strong>Admin:</strong> <span id="isAdmin"></span></p>
         </div>
 
         <div class="header-buttons">
@@ -40,14 +40,22 @@
     <!-- Chatbereich -->
 
     <div class="chat-container">
+        <div id="progress-main-div">
+            <div id="progress-container" style="width: 100%; background-color: #f3f3f3; border-radius: 5px; height: 20px;">
+                <div id="progress-bar" style="width: 0; background-color: #4caf50; height: 100%; border-radius: 5px;"></div>
+            </div>
+            <p id="usage-text" style="text-align: center; margin-top: 10px;">0 / 70144 used</p>
+        </div>
         <div class="chat-box" id="chatBox">
             <!-- Nachrichten werden hier angezeigt -->
         </div>
         <div class="chat-input-container">
+
             <textarea id="chatInput" class="chat-input" placeholder="Schreibe eine Nachricht..."></textarea>
             <button id="sendButton" class="chat-send-button">Senden</button>
         </div>
     </div>
+
 </div>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <script type="module" src="js/shared_functions.js"></script>

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