From 5ec267fabc99ba52df6b4f85a63560c81f9d3847 Mon Sep 17 00:00:00 2001
From: Goderr <115152190+Goderr@users.noreply.github.com>
Date: Tue, 21 Oct 2025 17:49:08 +0530
Subject: [PATCH 1/4] Change in UI
---
nanochat/ui.html | 119 +++++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 116 insertions(+), 3 deletions(-)
diff --git a/nanochat/ui.html b/nanochat/ui.html
index b2b4605..e742a31 100644
--- a/nanochat/ui.html
+++ b/nanochat/ui.html
@@ -5,6 +5,8 @@
NanoChat
+
+
@@ -282,6 +355,39 @@
let currentTemperature = 0.8;
let currentTopK = 50;
+ // Configure marked.js for better rendering
+ if (typeof marked !== 'undefined') {
+ marked.setOptions({
+ breaks: true, // Convert line breaks to
+ gfm: true, // GitHub Flavored Markdown
+ sanitize: false, // We'll use DOMPurify instead
+ smartypants: false // Disable smart quotes for simplicity
+ });
+ }
+
+ // Markdown rendering function
+ function renderMarkdown(content) {
+ try {
+ if (typeof marked !== 'undefined' && typeof DOMPurify !== 'undefined') {
+ const rawHtml = marked.parse(content);
+ return DOMPurify.sanitize(rawHtml);
+ } else {
+ console.warn('Markdown libraries not loaded, falling back to plain text');
+ return escapeHtml(content);
+ }
+ } catch (error) {
+ console.error('Markdown rendering failed:', error);
+ return escapeHtml(content);
+ }
+ }
+
+ // HTML escape fallback function
+ function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+
chatInput.addEventListener('input', function() {
this.style.height = 'auto';
this.style.height = Math.min(this.scrollHeight, 200) + 'px';
@@ -321,7 +427,13 @@
const contentDiv = document.createElement('div');
contentDiv.className = 'message-content';
- contentDiv.textContent = content;
+
+ // Render markdown for assistant messages, plain text for others
+ if (role === 'assistant' && content) {
+ contentDiv.innerHTML = renderMarkdown(content);
+ } else {
+ contentDiv.textContent = content;
+ }
// Add click handler for user messages to enable editing
if (role === 'user' && messageIndex !== null) {
@@ -395,7 +507,7 @@
messages: messages,
temperature: currentTemperature,
top_k: currentTopK,
- max_tokens: 512
+ max_tokens: 64
}),
});
@@ -421,7 +533,8 @@
const data = JSON.parse(line.slice(6));
if (data.token) {
fullResponse += data.token;
- assistantContent.textContent = fullResponse;
+ // Render markdown in real-time as tokens arrive
+ assistantContent.innerHTML = renderMarkdown(fullResponse);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
} catch (e) {
From 07348bb1d3e32f1fb1304194707442033d7bdbef Mon Sep 17 00:00:00 2001
From: Goderr <115152190+Goderr@users.noreply.github.com>
Date: Tue, 21 Oct 2025 18:01:41 +0530
Subject: [PATCH 2/4] forgot to change the max_tokens
---
nanochat/ui.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/nanochat/ui.html b/nanochat/ui.html
index e742a31..d062cbf 100644
--- a/nanochat/ui.html
+++ b/nanochat/ui.html
@@ -507,7 +507,7 @@
messages: messages,
temperature: currentTemperature,
top_k: currentTopK,
- max_tokens: 64
+ max_tokens: 512
}),
});
From e9c5e911f698bd7c67108d0f580e59ddacab2878 Mon Sep 17 00:00:00 2001
From: Goderr <115152190+Goderr@users.noreply.github.com>
Date: Tue, 21 Oct 2025 20:14:15 +0530
Subject: [PATCH 3/4] change in linespacing of response
---
nanochat/ui.html | 73 ++++++++++++++++++++++++++++++------------------
1 file changed, 46 insertions(+), 27 deletions(-)
diff --git a/nanochat/ui.html b/nanochat/ui.html
index d062cbf..24d0678 100644
--- a/nanochat/ui.html
+++ b/nanochat/ui.html
@@ -1,5 +1,6 @@
+
@@ -101,11 +102,14 @@
}
.message-content {
- white-space: pre-wrap;
line-height: 1.6;
max-width: 100%;
}
+ .message.user .message-content {
+ white-space: pre-wrap;
+ }
+
.message.assistant .message-content {
background: transparent;
border: none;
@@ -221,8 +225,16 @@
}
@keyframes typing {
- 0%, 60%, 100% { opacity: 0.2; }
- 30% { opacity: 1; }
+
+ 0%,
+ 60%,
+ 100% {
+ opacity: 0.2;
+ }
+
+ 30% {
+ opacity: 1;
+ }
}
.error-message {
@@ -237,7 +249,7 @@
/* Markdown styling */
.message-content table {
border-collapse: collapse;
- margin: 0.5rem 0;
+ margin: 0.25rem 0;
width: 100%;
}
@@ -266,7 +278,7 @@
padding: 0.75rem;
border-radius: 0.5rem;
overflow-x: auto;
- margin: 0.5rem 0;
+ margin: 0.25rem 0;
}
.message-content pre code {
@@ -280,22 +292,30 @@
.message-content h4,
.message-content h5,
.message-content h6 {
- margin: 1rem 0 0.5rem 0;
+ margin: 0.75rem 0 0.25rem 0;
font-weight: 600;
}
- .message-content h1 { font-size: 1.5em; }
- .message-content h2 { font-size: 1.3em; }
- .message-content h3 { font-size: 1.1em; }
+ .message-content h1 {
+ font-size: 1.5em;
+ }
+
+ .message-content h2 {
+ font-size: 1.3em;
+ }
+
+ .message-content h3 {
+ font-size: 1.1em;
+ }
.message-content ul,
.message-content ol {
- margin: 0.5rem 0;
+ margin: 0.25rem 0;
padding-left: 1.5rem;
}
.message-content li {
- margin: 0.25rem 0;
+ margin: 0.1rem 0;
}
.message-content blockquote {
@@ -306,11 +326,13 @@
}
+