Spaces:

fast72
/

deepseek

Sleeping

App Files Files Community

fast72 commited on Mar 28, 2025

Commit

e6d2c34

verified ·

1 Parent(s): bb1af57

Create public/index.html

Browse files

Files changed (1) hide show

public/index.html +99 -0

public/index.html ADDED Viewed

	@@ -0,0 +1,99 @@

+<!DOCTYPE html><html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Chat</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuidv4.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <style>
+        body { background-color: #000; color: #fff; font-family: 'Inter', sans-serif; }
+        .chat-container { background-color: #111; border: 1px solid #333; border-radius: 8px; padding: 16px; width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 8px; }
+        .input-field { background-color: #000; color: #fff; border: 1px solid #333; padding: 8px; width: 100%; border-radius: 4px; }
+        .message { padding: 6px 12px; border-radius: 12px; max-width: 75%; word-wrap: break-word; }
+        .message.user { background-color: #005eff; align-self: flex-end; }
+        .message.bot { background-color: #222; align-self: flex-start; }
+        .reasoning { color: #888; font-style: italic; }
+        .bold { font-weight: bold; }
+        .large-text { font-size: 1.2rem; font-weight: bold; }
+        .monospace { font-family: monospace; color: #fff; background-color: #333; padding: 2px 4px; border-radius: 4px; }
+        .code-block { background-color: #222; padding: 8px; border-radius: 4px; font-family: monospace; white-space: pre-wrap; position: relative; }
+        .copy-btn { position: absolute; top: 4px; right: 4px; background: #444; color: #fff; border: none; padding: 2px 6px; cursor: pointer; font-size: 0.8rem; border-radius: 4px; }
+        pre code { display: block; padding: 10px; border-radius: 5px; }
+    </style>
+</head>
+<body class="flex flex-col items-center justify-center h-screen">
+    <div class="chat-container">
+        <div id="chat" class="h-64 overflow-y-auto flex flex-col gap-2 pb-2"></div>
+        <input id="message" type="text" class="input-field mt-2" placeholder="Ketik pesan..." />
+    </div><script>
+    const sessionId = uuidv4();
+    const chatDiv = document.getElementById('chat');
+    const input = document.getElementById('message');
+    input.addEventListener('keypress', async (event) => {
+        if (event.key === 'Enter' && input.value.trim() !== '') {
+            const message = input.value.trim();
+            input.value = '';
+            addMessage(message, 'user');
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ sessionId, message })
+            });
+            if (!response.body) return;
+            const reader = response.body.getReader();
+            let botMessage = '';
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) break;
+                botMessage += new TextDecoder().decode(value);
+                addMessage(botMessage, 'bot', true);
+            }
+        }
+    });
+    function addMessage(text, sender, replaceLast = false) {
+        if (replaceLast && chatDiv.lastChild) {
+            chatDiv.lastChild.innerHTML = formatMessage(text);
+        } else {
+            const msgDiv = document.createElement('div');
+            msgDiv.classList.add('message', sender);
+            msgDiv.innerHTML = formatMessage(text);
+            chatDiv.appendChild(msgDiv);
+        }
+        chatDiv.scrollTop = chatDiv.scrollHeight;
+        document.querySelectorAll('pre code').forEach((block) => {
+            hljs.highlightElement(block);
+        });
+    }
+    function formatMessage(text) {
+        return text
+            .replace(/\*\*(.*?)\*\*/g, '<span class="bold">$1</span>')
+            .replace(/### (.*?)\n/g, '<div class="large-text">$1</div>')
+            .replace(/`([^`]+)`/g, '<span class="monospace">$1</span>')
+            .replace(/```([\s\S]*?)```/g, (match, code) => {
+                const escapedCode = code.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                return `<div class="code-block"><button class="copy-btn" onclick="copyCode(this)">Copy</button><pre><code class="language-javascript">${escapedCode}</code></pre></div>`;
+            })
+            .replace(/<think>(.*?)<\/think>/g, '<span class="reasoning">$1</span>');
+    }
+    function copyCode(button) {
+        const code = button.nextElementSibling.innerText;
+        navigator.clipboard.writeText(code);
+        button.innerText = "Copied!";
+        setTimeout(() => button.innerText = "Copy", 2000);
+    }
+</script>
+</body>
+</html>