From 28f8eed1f8653bbe870a524ec098d4c673906787 Mon Sep 17 00:00:00 2001 From: Vincent Douillet Date: Sat, 28 Jun 2025 20:06:20 +0200 Subject: improve ui --- index.html | 57 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 44 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 484353c..fcbbcb4 100644 --- a/index.html +++ b/index.html @@ -8,18 +8,41 @@ div#chat>p { width: 100%; } + + .question { + display: flex; + justify-content: right + } + + .answer { + background: lightgray; + border-radius: 10px; + display: inline-block; + padding: 1em; + } + + .answer p:first-child { + margin-top: 0; + } + + .answer p:last-child { + margin-bottom: 0; + } - +

A(I)MA - A(I)sk me anything!

Ask below :-)

@@ -46,24 +69,29 @@ prompt.value = ''; // append request to the chat - appendChat("> " + promptValue); + appendChat('

' + promptValue + '

', "question"); // call the api fetch('http://localhost:11434/api/generate', { method: 'POST', body: JSON.stringify({ - model: "codegemma:7b", + model: "gemma3:4b", prompt: promptValue, stream: false }) }) .then(response => response.json()) - .then(data => appendChat(markdownParser(data.response))) + .then(data => { + appendChat(markdownParser(data.response), "answer"); + }) .catch(error => console.error(error)); }); - function appendChat(message) { - const messageDisplay = document.createElement('p'); - messageDisplay.textContent = message; + + // append text to chat + function appendChat(html, className) { + const messageDisplay = document.createElement('div'); + messageDisplay.innerHTML = html; + messageDisplay.className = className; chat.appendChild(messageDisplay); } @@ -91,13 +119,16 @@ var preMode = false; var listMode = false; for (var line of lines) { + if (!line) + continue; + // Check for pre-formatted block mode const preMatch = line.match(blockPreRegex); if (preMatch) { if (preMode) output.push(''); else - output.push('

');
+            output.push('');
           preMode = !preMode;
           continue;
         }
@@ -123,7 +154,7 @@
         // handle italic text
         var italicMatch = line.match(italicRegex);
         while (italicMatch) {
-          line = line.replace(italicMatch[0], `${italicMatch[1]}`);
+          line = line.replace(italicMatch[0], `${italicMatch[1]}`);
           italicMatch = line.match(italicRegex);
         }
 
-- 
cgit v1.2.3