diff options
| author | Vincent Douillet <vincent@vdouillet.fr> | 2025-06-28 20:06:20 +0200 |
|---|---|---|
| committer | Vincent Douillet <vincent@vdouillet.fr> | 2025-06-28 20:06:20 +0200 |
| commit | 28f8eed1f8653bbe870a524ec098d4c673906787 (patch) | |
| tree | c62cbc16270f5b807f51ca3a8397e51534dd6501 | |
| parent | 143fc2871b05a105123b22ef8185deac345eb44d (diff) | |
improve ui
| -rw-r--r-- | index.html | 57 |
1 files changed, 44 insertions, 13 deletions
@@ -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;
+ }
</style>
</head>
-<body style="margin: 0;">
+<body style="margin: 0">
<main
style="display: flex; flex-direction: column; justify-content: space-between; height: 100vh; align-items: center;">
<h1 style="text-align: center;">A(I)MA - A(I)sk me anything!</h1>
- <div id="chat" style="padding: 20px; width: 80%; justify-content: center;">
- <p id="placeholder">Ask below :-)</p>
+ <div id="chat" style="padding: 20px; width: 70%; justify-content: center;">
+ <div id="placeholder" class="answer">
+ <p>Ask below :-)</p>
+ </div>
</div>
- <form style="display: flex; justify-content: center; align-items: center; padding: 20px; width: 80%">
- <input id="prompt" type="text" placeholder="Enter your message here" style="padding: 10px; width: 100%; margin-right: 10px;">
+ <form style="display: flex; justify-content: center; align-items: center; padding: 20px; width: 70%">
+ <input id="prompt" type="text" placeholder="Enter your prompt here"
+ style="padding: 10px; width: 100%; margin-right: 10px;">
<button id="generate" type="submit" style="padding: 10px;">Generate</button>
</form>
</main>
@@ -46,24 +69,29 @@ prompt.value = '';
// append request to the chat
- appendChat("> " + promptValue);
+ appendChat('<p style="background:lightblue;border-radius:10px;padding:1em">' + promptValue + '</p>', "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('</pre>');
else
- output.push('<pre>');
+ output.push('<pre style="padding-left:3em">');
preMode = !preMode;
continue;
}
@@ -123,7 +154,7 @@ // handle italic text
var italicMatch = line.match(italicRegex);
while (italicMatch) {
- line = line.replace(italicMatch[0], `<strong>${italicMatch[1]}</strong>`);
+ line = line.replace(italicMatch[0], `<em>${italicMatch[1]}</em>`);
italicMatch = line.match(italicRegex);
}
|