|
|
<!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;
|
|
|
|
|
|
|
|
|
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>
|
|
|
|
