tacit/nanochat
1
0
Fork 0
mirror of https://github.com/karpathy/nanochat.git synced 2026-02-26 13:30:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Change in UI

Browse Source
This commit is contained in:
Goderr 2025-10-21 17:49:08 +05:30
parent 0f007889dd
commit 5ec267fabc
1 changed files with 116 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
nanochat/ui.html
View File

@ -5,6 +5,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NanoChat</title>
<link rel="icon" type="image/svg+xml" href="/logo.svg">
<script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
<style>
:root {
color-scheme: light;
@ -231,6 +233,77 @@
border-radius: 0.75rem;
margin-top: 0.5rem;
}
/* Markdown styling */
.message-content table {
border-collapse: collapse;
margin: 0.5rem 0;
width: 100%;
}
.message-content th,
.message-content td {
border: 1px solid #e5e7eb;
padding: 0.5rem;
text-align: left;
}
.message-content th {
background-color: #f9fafb;
font-weight: 600;
}
.message-content code {
background-color: #f3f4f6;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace;
font-size: 0.875em;
}
.message-content pre {
background-color: #f3f4f6;
padding: 0.75rem;
border-radius: 0.5rem;
overflow-x: auto;
margin: 0.5rem 0;
}
.message-content pre code {
background: none;
padding: 0;
}
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4,
.message-content h5,
.message-content h6 {
margin: 1rem 0 0.5rem 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 ul,
.message-content ol {
margin: 0.5rem 0;
padding-left: 1.5rem;
}
.message-content li {
margin: 0.25rem 0;
}
.message-content blockquote {
border-left: 4px solid #e5e7eb;
padding-left: 1rem;
margin: 0.5rem 0;
color: #6b7280;
}
</style>
</head>
<body>
@ -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 <br>
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) {