File size: 3,462 Bytes
46e7744 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Local Chat (GGUF) — Chat</title>
<style>
body { font-family: Arial, sans-serif; background: #f9f9f9; }
.chat-container { width: 60%; margin: 40px auto; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.messages { max-height: 500px; overflow-y: auto; margin-bottom: 20px; }
.user { color: #0066cc; margin: 10px 0; }
.assistant { color: #333; margin: 10px 0; white-space: pre-wrap; }
textarea { width: 100%; height: 60px; padding: 10px; }
button { padding: 10px 20px; margin-top: 10px; cursor: pointer; }
pre code { background: #f4f4f4; display: block; padding: 10px; border-radius: 4px; }
.copy-btn { background: #0066cc; color: white; padding: 4px 8px; font-size: 12px; border: none; cursor: pointer; float: right; }
</style>
<script>
async function sendMessage() {
const message = document.getElementById("message").value.trim();
if (!message) return;
const chatBox = document.getElementById("messages");
chatBox.innerHTML += `<div class="user"><strong>You:</strong> ${message}</div>`;
document.getElementById("message").value = "";
const response = await fetch("/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: message, history: collectHistory() })
});
const data = await response.json();
let text = data.response;
// Convert Markdown code blocks to HTML with copy button
text = text.replace(/```(.*?)\n([\s\S]*?)```/g, (match, lang, code) => {
const safeCode = code.replace(/</g, "<").replace(/>/g, ">");
return `<div><button class="copy-btn" onclick="copyCode(this)">Copy</button><pre><code class="${lang}">${safeCode}</code></pre></div>`;
});
chatBox.innerHTML += `<div class="assistant"><strong>Assistant:</strong> ${text}</div>`;
chatBox.scrollTop = chatBox.scrollHeight;
}
function collectHistory() {
const userEls = document.querySelectorAll(".user");
const assistantEls = document.querySelectorAll(".assistant");
let history = [];
for (let i = 0; i < userEls.length; i++) {
history.push({
user: userEls[i].innerText.replace("You: ", ""),
assistant: assistantEls[i]?.innerText.replace("Assistant: ", "") || ""
});
}
return history;
}
function copyCode(button) {
const code = button.nextElementSibling.innerText;
navigator.clipboard.writeText(code);
button.textContent = "Copied!";
setTimeout(() => (button.textContent = "Copy"), 2000);
}
</script>
</head>
<body>
<div class="chat-container">
<h2>Local Chat Assistant</h2>
<div id="messages" class="messages"></div>
<textarea id="message" placeholder="Type your message..."></textarea>
<button onclick="sendMessage()">Send</button>
</div>
</body>
</html>
|