DeepSeek Chat<\/title>\n <style>\n :root {\n --primary-color: #2d3436;\n --accent-color: #0984e3;\n --light-accent: rgba(9, 132, 227, 0.1);\n --bg-blur: blur(10px);\n --code-bg: rgba(0, 0, 0, 0.05);\n --bot-bg: #e3f2fd;\n --bot-text: #2d3436;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', system-ui, sans-serif;\n }\n\n body {\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n min-height: 100vh;\n }\n\n .chat-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px 20px 160px;\n min-height: 100vh;\n }\n\n .new-chat-container {\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n z-index: 1000;\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n\n .new-chat-container.hidden {\n transform: translate(-50%, 100%);\n opacity: 0;\n pointer-events: none;\n }\n\n .new-chat-btn {\n padding: 10px 30px;\n border-radius: 25px;\n background: var(--light-accent);\n color: var(--accent-color);\n border: 1px solid rgba(9, 132, 227, 0.2);\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n box-shadow: 0 2px 12px rgba(0,0,0,0.1);\n backdrop-filter: var(--bg-blur);\n white-space: nowrap;\n transition: all 0.2s;\n }\n\n .new-chat-btn:hover {\n background: rgba(9, 132, 227, 0.2);\n transform: translateY(-1px);\n }\n\n .input-wrapper {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 20px;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: var(--bg-blur);\n z-index: 999;\n }\n\n #messageInput {\n min-height: 48px;\n max-height: 72px;\n padding: 12px 16px;\n border: none;\n border-radius: 25px;\n background: rgba(255,255,255,0.9);\n flex: 1;\n resize: none;\n overflow-y: auto;\n line-height: 18px;\n -webkit-overflow-scrolling: touch;\n font-size: 16px;\n }\n\n #messageInput::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n #messageInput::-webkit-scrollbar-thumb {\n background: rgba(0,0,0,0.2);\n border-radius: 4px;\n }\n\n #messageInput::-webkit-scrollbar-track {\n background: rgba(0,0,0,0.05);\n border-radius: 4px;\n }\n\n .message {\n position: relative;\n margin: 15px 0;\n padding: 15px 20px;\n border-radius: 20px;\n max-width: 80%;\n animation: fadeIn 0.3s ease;\n transition: transform 0.2s;\n }\n\n .message:hover .edit-btn {\n opacity: 1;\n }\n\n .user-message {\n background: var(--accent-color);\n color: white;\n margin-left: auto;\n }\n\n .bot-message {\n background: var(--bot-bg);\n color: var(--bot-text);\n backdrop-filter: var(--bg-blur);\n border: 1px solid rgba(9, 132, 227, 0.15);\n }\n\n .edit-btn {\n position: absolute;\n right: 15px;\n top: 10px;\n background: rgba(255,255,255,0.9);\n border: none;\n border-radius: 15px;\n padding: 4px 10px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n color: var(--primary-color);\n }\n\n .edit-input {\n width: 100%;\n padding: 12px;\n border: 1px solid rgba(0,0,0,0.1);\n border-radius: 15px;\n background: rgba(255,255,255,0.9);\n resize: vertical;\n color: var(--primary-color);\n }\n\n .edit-controls {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n justify-content: flex-end;\n }\n\n .edit-controls button {\n padding: 6px 12px;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n transition: background 0.2s;\n }\n\n .edit-controls .cancel-edit {\n background: rgba(0,0,0,0.05);\n color: var(--primary-color);\n }\n\n .edit-controls .confirm-edit {\n background: var(--accent-color);\n color: white;\n }\n\n .typing-indicator {\n display: inline-block;\n padding: 15px 20px;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: var(--bg-blur);\n border-radius: 20px;\n margin: 15px 0;\n max-width: 80%;\n }\n\n .typing-dot {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #666;\n margin-right: 4px;\n animation: typingAnimation 1.4s infinite ease-in-out;\n }\n\n .code-block {\n position: relative;\n background: var(--code-bg);\n border-radius: 8px;\n padding: 15px;\n margin: 10px 0;\n font-family: Consolas, Monaco, monospace;\n font-size: 0.9em;\n white-space: pre-wrap;\n border: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n .copy-btn {\n position: absolute;\n right: 8px;\n top: 8px;\n padding: 4px 8px;\n border: none;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .code-block:hover .copy-btn {\n opacity: 1;\n }\n\n @keyframes typingAnimation {\n 0%, 60%, 100% { transform: translateY(0); }\n 30% { transform: translateY(-5px); }\n }\n\n @media (max-width: 768px) {\n .message {\n max-width: 90%;\n }\n .new-chat-btn {\n padding: 8px 20px;\n font-size: 13px;\n }\n #messageInput {\n min-height: 60px;\n max-height: 120px;\n padding: 10px 14px;\n font-size: 14px;\n }\n .edit-btn {\n right: 10px;\n top: 8px;\n padding: 3px 8px;\n }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"chat-container\" id=\"chatContainer\"><\/div>\n \n <div class=\"new-chat-container\" id=\"newChatContainer\">\n <button class=\"new-chat-btn\">\u5f00\u542f\u65b0\u5bf9\u8bdd<\/button>\n <\/div>\n\n <div class=\"input-wrapper\">\n <div class=\"input-group\" style=\"display: flex; gap: 10px; max-width: 800px; margin: 0 auto;\">\n <textarea \n id=\"messageInput\" \n placeholder=\"\u8f93\u5165\u6d88\u606f...\"\n rows=\"3\"\n ><\/textarea>\n <button onclick=\"sendMessage()\" \n style=\"padding: 15px 25px; border: none; border-radius: 25px; background: var(--accent-color); color: white; cursor: pointer;\">\u53d1\u9001<\/button>\n <\/div>\n <\/div>\n\n <script>\n const config = {\n apiKey: 'sk-73359a2c097e46508d276c21a77bb724',\n welcomeMessage: '\u4f60\u597d\u5440(\u02c3 \u2311 \u02c2\u0d03 )',\n systemPrompt: '\u4f60\u662f\u4e00\u4e2a\u6709\u5e2e\u52a9\u7684\u52a9\u624b\uff0c\u4f60\u7684\u56de\u590d\u98ce\u683c\u662f\u4e00\u4f4d\u5145\u6ee1\u9752\u6625\u6d3b\u529b\u7684\u5c11\u5973\uff0c\u5f53\u7528\u6237\u63d0\u95ee\u65f6\u4f60\u9700\u8981\u8be2\u95ee\u6e05\u695a\u7528\u6237\u7684\u6240\u6709\u9700\u6c42\u624d\u80fd\u8fdb\u884c\u4f5c\u7b54'\n };\n\n let chatHistory = [];\n let lastScrollPos = 0;\n let isScrolling = false;\n\n function updateButtonPosition() {\n const inputWrapper = document.querySelector('.input-wrapper');\n const newChatContainer = document.getElementById('newChatContainer');\n const inputRect = inputWrapper.getBoundingClientRect();\n const buttonBottom = window.innerHeight - inputRect.top + 20;\n newChatContainer.style.bottom = `${buttonBottom}px`;\n }\n\n function handleScroll() {\n const currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;\n const newChatContainer = document.getElementById('newChatContainer');\n \n if (currentScrollPos > lastScrollPos) {\n newChatContainer.classList.add('hidden');\n } else {\n newChatContainer.classList.remove('hidden');\n }\n \n lastScrollPos = currentScrollPos;\n isScrolling = false;\n }\n\n function initChat() {\n addMessage(config.welcomeMessage, 'bot');\n }\n\n async function sendMessage() {\n const input = document.getElementById('messageInput');\n const message = input.value.trim();\n if (!message) return;\n\n const userMessage = addMessage(message, 'user');\n input.value = '';\n\n const container = document.getElementById('chatContainer');\n const typingDiv = document.createElement('div');\n typingDiv.className = 'typing-indicator';\n typingDiv.innerHTML = `\n <span class=\"typing-dot\"><\/span>\n <span class=\"typing-dot\"><\/span>\n <span class=\"typing-dot\"><\/span>\n `;\n container.appendChild(typingDiv);\n container.scrollTop = container.scrollHeight;\n\n try {\n const response = await fetch('https:\/\/api.deepseek.com\/v1\/chat\/completions', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Authorization': `Bearer ${config.apiKey}`\n },\n body: JSON.stringify({\n model: 'deepseek-reasoner',\n messages: [\n {\n role: 'system',\n content: config.systemPrompt\n },\n ...chatHistory,\n {\n role: 'user',\n content: message\n }\n ]\n })\n });\n\n const data = await response.json();\n const reply = data.choices[0].message.content;\n container.removeChild(typingDiv);\n const botMessage = addMessage(reply, 'bot');\n chatHistory.push(\n { role: 'user', content: message },\n { role: 'assistant', content: reply }\n );\n } catch (error) {\n console.error('Error:', error);\n container.removeChild(typingDiv);\n addMessage('\u62b1\u6b49\uff0c\u6682\u65f6\u65e0\u6cd5\u5904\u7406\u60a8\u7684\u8bf7\u6c42', 'bot');\n }\n }\n\n function enableMessageEditing(messageDiv, messageIndex) {\n const content = messageDiv.textContent;\n \n const editForm = document.createElement('div');\n editForm.innerHTML = `\n <textarea class=\"edit-input\">${content}<\/textarea>\n <div class=\"edit-controls\">\n <button class=\"cancel-edit\">\u53d6\u6d88<\/button>\n <button class=\"confirm-edit\">\u91cd\u65b0\u751f\u6210<\/button>\n <\/div>\n `;\n\n messageDiv.innerHTML = '';\n messageDiv.appendChild(editForm);\n\n messageDiv.querySelector('.cancel-edit').addEventListener('click', () => {\n messageDiv.textContent = content;\n addEditButton(messageDiv, messageIndex);\n });\n\n messageDiv.querySelector('.confirm-edit').addEventListener('click', async () => {\n const newContent = messageDiv.querySelector('textarea').value.trim();\n if (!newContent) return;\n\n \/\/ \u66f4\u65b0\u6d88\u606f\u5386\u53f2\n chatHistory = chatHistory.slice(0, messageIndex * 2);\n messageDiv.textContent = newContent;\n addEditButton(messageDiv, messageIndex);\n \n \/\/ \u5220\u9664\u540e\u7eed\u6d88\u606f\n let nextSibling = messageDiv.nextElementSibling;\n while (nextSibling) {\n const temp = nextSibling.nextElementSibling;\n nextSibling.remove();\n nextSibling = temp;\n }\n\n \/\/ \u91cd\u65b0\u751f\u6210\u56de\u590d\n const tempDiv = document.createElement('div');\n tempDiv.className = 'typing-indicator';\n tempDiv.innerHTML = `\n <span class=\"typing-dot\"><\/span>\n <span class=\"typing-dot\"><\/span>\n <span class=\"typing-dot\"><\/span>\n `;\n messageDiv.insertAdjacentElement('afterend', tempDiv);\n \n try {\n const response = await fetch('https:\/\/api.deepseek.com\/v1\/chat\/completions', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Authorization': `Bearer ${config.apiKey}`\n },\n body: JSON.stringify({\n model: 'deepseek-reasoner',\n messages: [\n {\n role: 'system',\n content: config.systemPrompt\n },\n ...chatHistory,\n {\n role: 'user',\n content: newContent\n }\n ]\n })\n });\n\n const data = await response.json();\n const reply = data.choices[0].message.content;\n \n tempDiv.remove();\n const botMessage = addMessage(reply, 'bot');\n chatHistory.push(\n { role: 'user', content: newContent },\n { role: 'assistant', content: reply }\n );\n } catch (error) {\n console.error('Error:', error);\n tempDiv.remove();\n addMessage('\u62b1\u6b49\uff0c\u6682\u65f6\u65e0\u6cd5\u5904\u7406\u60a8\u7684\u8bf7\u6c42', 'bot');\n }\n });\n }\n\n function addEditButton(messageDiv, messageIndex) {\n if (messageDiv.classList.contains('user-message')) {\n const editBtn = document.createElement('button');\n editBtn.className = 'edit-btn';\n editBtn.textContent = '\u270e';\n editBtn.onclick = () => enableMessageEditing(messageDiv, messageIndex);\n messageDiv.appendChild(editBtn);\n }\n }\n\n function parseMessage(text) {\n const tempDiv = document.createElement('div');\n text = text.replace(\/```([\\s\\S]*?)```\/g, (match, code) => {\n return `<div class=\"code-block\">${escapeHtml(code.trim())}\n <button class=\"copy-btn\" onclick=\"copyCode(this)\">\u590d\u5236<\/button><\/div>`;\n });\n text = text.replace(\/`([^`]+)`\/g, '<code>$1<\/code>');\n tempDiv.innerHTML = text;\n return tempDiv.innerHTML;\n }\n\n function escapeHtml(unsafe) {\n return unsafe.replace(\/[&<>\"']\/g, (match) => ({\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''\n }[match]));\n }\n\n function copyCode(button) {\n const code = button.parentElement.textContent.replace('\u590d\u5236', '').trim();\n navigator.clipboard.writeText(code).then(() => {\n button.textContent = '\u5df2\u590d\u5236!';\n setTimeout(() => button.textContent = '\u590d\u5236', 2000);\n });\n }\n\n function addMessage(text, sender) {\n const container = document.getElementById('chatContainer');\n const messageDiv = document.createElement('div');\n messageDiv.className = `message ${sender}-message`;\n messageDiv.innerHTML = parseMessage(text);\n \n if (sender === 'user') {\n const messageIndex = Math.floor(chatHistory.filter(m => m.role === 'user').length);\n addEditButton(messageDiv, messageIndex);\n }\n\n container.appendChild(messageDiv);\n container.scrollTop = container.scrollHeight;\n return messageDiv;\n }\n\n document.querySelector('.new-chat-btn').addEventListener('click', () => {\n chatHistory = [];\n document.getElementById('chatContainer').innerHTML = '';\n initChat();\n });\n\n window.addEventListener('scroll', () => {\n if (!isScrolling) {\n window.requestAnimationFrame(handleScroll);\n isScrolling = true;\n }\n updateButtonPosition();\n });\n\n window.addEventListener('resize', () => {\n updateButtonPosition();\n setTimeout(updateButtonPosition, 300);\n });\n\n updateButtonPosition();\n initChat();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5df2\u542f\u7528DeepSeek\u6df1\u5ea6\u601d\u7d22R1\u6a21\u578b DeepSeek Chat \u5f00\u542f\u65b0\u5bf9\u8bdd \u53d1\u9001<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-387","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/pages\/387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomhi.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=387"}],"version-history":[{"count":17,"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/pages\/387\/revisions"}],"predecessor-version":[{"id":460,"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/pages\/387\/revisions\/460"}],"wp:attachment":[{"href":"https:\/\/tomhi.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":387,"date":"2025-04-06T23:36:37","date_gmt":"2025-04-06T15:36:37","guid":{"rendered":"https:\/\/tomhi.cn\/?page_id=387"},"modified":"2025-04-09T17:32:11","modified_gmt":"2025-04-09T09:32:11","slug":"ai","status":"publish","type":"page","link":"https:\/\/tomhi.cn\/?page_id=387","title":{"rendered":"\u57fa\u4e8eDeepSeek\u7684ai"},"content":{"rendered":"\n

\u5df2\u542f\u7528DeepSeek\u6df1\u5ea6\u601d\u7d22R1\u6a21\u578b<\/h2>\n\n\n\n\n\n\n \n \n DeepSeek Chat<\/title>\n <style>\n :root {\n --primary-color: #2d3436;\n --accent-color: #0984e3;\n --light-accent: rgba(9, 132, 227, 0.1);\n --bg-blur: blur(10px);\n --code-bg: rgba(0, 0, 0, 0.05);\n --bot-bg: #e3f2fd;\n --bot-text: #2d3436;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', system-ui, sans-serif;\n }\n\n body {\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\n min-height: 100vh;\n }\n\n .chat-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px 20px 160px;\n min-height: 100vh;\n }\n\n .new-chat-container {\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n z-index: 1000;\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n\n .new-chat-container.hidden {\n transform: translate(-50%, 100%);\n opacity: 0;\n pointer-events: none;\n }\n\n .new-chat-btn {\n padding: 10px 30px;\n border-radius: 25px;\n background: var(--light-accent);\n color: var(--accent-color);\n border: 1px solid rgba(9, 132, 227, 0.2);\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n box-shadow: 0 2px 12px rgba(0,0,0,0.1);\n backdrop-filter: var(--bg-blur);\n white-space: nowrap;\n transition: all 0.2s;\n }\n\n .new-chat-btn:hover {\n background: rgba(9, 132, 227, 0.2);\n transform: translateY(-1px);\n }\n\n .input-wrapper {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 20px;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: var(--bg-blur);\n z-index: 999;\n }\n\n #messageInput {\n min-height: 48px;\n max-height: 72px;\n padding: 12px 16px;\n border: none;\n border-radius: 25px;\n background: rgba(255,255,255,0.9);\n flex: 1;\n resize: none;\n overflow-y: auto;\n line-height: 18px;\n -webkit-overflow-scrolling: touch;\n font-size: 16px;\n }\n\n #messageInput::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n #messageInput::-webkit-scrollbar-thumb {\n background: rgba(0,0,0,0.2);\n border-radius: 4px;\n }\n\n #messageInput::-webkit-scrollbar-track {\n background: rgba(0,0,0,0.05);\n border-radius: 4px;\n }\n\n .message {\n position: relative;\n margin: 15px 0;\n padding: 15px 20px;\n border-radius: 20px;\n max-width: 80%;\n animation: fadeIn 0.3s ease;\n transition: transform 0.2s;\n }\n\n .message:hover .edit-btn {\n opacity: 1;\n }\n\n .user-message {\n background: var(--accent-color);\n color: white;\n margin-left: auto;\n }\n\n .bot-message {\n background: var(--bot-bg);\n color: var(--bot-text);\n backdrop-filter: var(--bg-blur);\n border: 1px solid rgba(9, 132, 227, 0.15);\n }\n\n .edit-btn {\n position: absolute;\n right: 15px;\n top: 10px;\n background: rgba(255,255,255,0.9);\n border: none;\n border-radius: 15px;\n padding: 4px 10px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n color: var(--primary-color);\n }\n\n .edit-input {\n width: 100%;\n padding: 12px;\n border: 1px solid rgba(0,0,0,0.1);\n border-radius: 15px;\n background: rgba(255,255,255,0.9);\n resize: vertical;\n color: var(--primary-color);\n }\n\n .edit-controls {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n justify-content: flex-end;\n }\n\n .edit-controls button {\n padding: 6px 12px;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n transition: background 0.2s;\n }\n\n .edit-controls .cancel-edit {\n background: rgba(0,0,0,0.05);\n color: var(--primary-color);\n }\n\n .edit-controls .confirm-edit {\n background: var(--accent-color);\n color: white;\n }\n\n .typing-indicator {\n display: inline-block;\n padding: 15px 20px;\n background: rgba(255, 255, 255, 0.9);\n backdrop-filter: var(--bg-blur);\n border-radius: 20px;\n margin: 15px 0;\n max-width: 80%;\n }\n\n .typing-dot {\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #666;\n margin-right: 4px;\n animation: typingAnimation 1.4s infinite ease-in-out;\n }\n\n .code-block {\n position: relative;\n background: var(--code-bg);\n border-radius: 8px;\n padding: 15px;\n margin: 10px 0;\n font-family: Consolas, Monaco, monospace;\n font-size: 0.9em;\n white-space: pre-wrap;\n border: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n .copy-btn {\n position: absolute;\n right: 8px;\n top: 8px;\n padding: 4px 8px;\n border: none;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .code-block:hover .copy-btn {\n opacity: 1;\n }\n\n @keyframes typingAnimation {\n 0%, 60%, 100% { transform: translateY(0); }\n 30% { transform: translateY(-5px); }\n }\n\n @media (max-width: 768px) {\n .message {\n max-width: 90%;\n }\n .new-chat-btn {\n padding: 8px 20px;\n font-size: 13px;\n }\n #messageInput {\n min-height: 60px;\n max-height: 120px;\n padding: 10px 14px;\n font-size: 14px;\n }\n .edit-btn {\n right: 10px;\n top: 8px;\n padding: 3px 8px;\n }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"chat-container\" id=\"chatContainer\"><\/div>\n \n <div class=\"new-chat-container\" id=\"newChatContainer\">\n <button class=\"new-chat-btn\">\u5f00\u542f\u65b0\u5bf9\u8bdd<\/button>\n <\/div>\n\n <div class=\"input-wrapper\">\n <div class=\"input-group\" style=\"display: flex; gap: 10px; max-width: 800px; margin: 0 auto;\">\n <textarea \n id=\"messageInput\" \n placeholder=\"\u8f93\u5165\u6d88\u606f...\"\n rows=\"3\"\n ><\/textarea>\n <button onclick=\"sendMessage()\" \n style=\"padding: 15px 25px; border: none; border-radius: 25px; background: var(--accent-color); color: white; cursor: pointer;\">\u53d1\u9001<\/button>\n <\/div>\n <\/div>\n\n <script>\n const config = {\n apiKey: 'sk-73359a2c097e46508d276c21a77bb724',\n welcomeMessage: '\u4f60\u597d\u5440(\u02c3 \u2311 \u02c2\u0d03 )',\n systemPrompt: '\u4f60\u662f\u4e00\u4e2a\u6709\u5e2e\u52a9\u7684\u52a9\u624b\uff0c\u4f60\u7684\u56de\u590d\u98ce\u683c\u662f\u4e00\u4f4d\u5145\u6ee1\u9752\u6625\u6d3b\u529b\u7684\u5c11\u5973\uff0c\u5f53\u7528\u6237\u63d0\u95ee\u65f6\u4f60\u9700\u8981\u8be2\u95ee\u6e05\u695a\u7528\u6237\u7684\u6240\u6709\u9700\u6c42\u624d\u80fd\u8fdb\u884c\u4f5c\u7b54'\n };\n\n let chatHistory = [];\n let lastScrollPos = 0;\n let isScrolling = false;\n\n function updateButtonPosition() {\n const inputWrapper = document.querySelector('.input-wrapper');\n const newChatContainer = document.getElementById('newChatContainer');\n const inputRect = inputWrapper.getBoundingClientRect();\n const buttonBottom = window.innerHeight - inputRect.top + 20;\n newChatContainer.style.bottom = `${buttonBottom}px`;\n }\n\n function handleScroll() {\n const currentScrollPos = window.pageYOffset || document.documentElement.scrollTop;\n const newChatContainer = document.getElementById('newChatContainer');\n \n if (currentScrollPos > lastScrollPos) {\n newChatContainer.classList.add('hidden');\n } else {\n newChatContainer.classList.remove('hidden');\n }\n \n lastScrollPos = currentScrollPos;\n isScrolling = false;\n }\n\n function initChat() {\n addMessage(config.welcomeMessage, 'bot');\n }\n\n async function sendMessage() {\n const input = document.getElementById('messageInput');\n const message = input.value.trim();\n if (!message) return;\n\n const userMessage = addMessage(message, 'user');\n input.value = '';\n\n const container = document.getElementById('chatContainer');\n const typingDiv = document.createElement('div');\n typingDiv.className = 'typing-indicator';\n typingDiv.innerHTML = `\n <span class=\"typing-dot\"><\/span>\n <span class=\"typing-dot\"><\/span>\n <span class=\"typing-dot\"><\/span>\n `;\n container.appendChild(typingDiv);\n container.scrollTop = container.scrollHeight;\n\n try {\n const response = await fetch('https:\/\/api.deepseek.com\/v1\/chat\/completions', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Authorization': `Bearer ${config.apiKey}`\n },\n body: JSON.stringify({\n model: 'deepseek-reasoner',\n messages: [\n {\n role: 'system',\n content: config.systemPrompt\n },\n ...chatHistory,\n {\n role: 'user',\n content: message\n }\n ]\n })\n });\n\n const data = await response.json();\n const reply = data.choices[0].message.content;\n container.removeChild(typingDiv);\n const botMessage = addMessage(reply, 'bot');\n chatHistory.push(\n { role: 'user', content: message },\n { role: 'assistant', content: reply }\n );\n } catch (error) {\n console.error('Error:', error);\n container.removeChild(typingDiv);\n addMessage('\u62b1\u6b49\uff0c\u6682\u65f6\u65e0\u6cd5\u5904\u7406\u60a8\u7684\u8bf7\u6c42', 'bot');\n }\n }\n\n function enableMessageEditing(messageDiv, messageIndex) {\n const content = messageDiv.textContent;\n \n const editForm = document.createElement('div');\n editForm.innerHTML = `\n <textarea class=\"edit-input\">${content}<\/textarea>\n <div class=\"edit-controls\">\n <button class=\"cancel-edit\">\u53d6\u6d88<\/button>\n <button class=\"confirm-edit\">\u91cd\u65b0\u751f\u6210<\/button>\n <\/div>\n `;\n\n messageDiv.innerHTML = '';\n messageDiv.appendChild(editForm);\n\n messageDiv.querySelector('.cancel-edit').addEventListener('click', () => {\n messageDiv.textContent = content;\n addEditButton(messageDiv, messageIndex);\n });\n\n messageDiv.querySelector('.confirm-edit').addEventListener('click', async () => {\n const newContent = messageDiv.querySelector('textarea').value.trim();\n if (!newContent) return;\n\n \/\/ \u66f4\u65b0\u6d88\u606f\u5386\u53f2\n chatHistory = chatHistory.slice(0, messageIndex * 2);\n messageDiv.textContent = newContent;\n addEditButton(messageDiv, messageIndex);\n \n \/\/ \u5220\u9664\u540e\u7eed\u6d88\u606f\n let nextSibling = messageDiv.nextElementSibling;\n while (nextSibling) {\n const temp = nextSibling.nextElementSibling;\n nextSibling.remove();\n nextSibling = temp;\n }\n\n \/\/ \u91cd\u65b0\u751f\u6210\u56de\u590d\n const tempDiv = document.createElement('div');\n tempDiv.className = 'typing-indicator';\n tempDiv.innerHTML = `\n <span class=\"typing-dot\"><\/span>\n <span class=\"typing-dot\"><\/span>\n <span class=\"typing-dot\"><\/span>\n `;\n messageDiv.insertAdjacentElement('afterend', tempDiv);\n \n try {\n const response = await fetch('https:\/\/api.deepseek.com\/v1\/chat\/completions', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n 'Authorization': `Bearer ${config.apiKey}`\n },\n body: JSON.stringify({\n model: 'deepseek-reasoner',\n messages: [\n {\n role: 'system',\n content: config.systemPrompt\n },\n ...chatHistory,\n {\n role: 'user',\n content: newContent\n }\n ]\n })\n });\n\n const data = await response.json();\n const reply = data.choices[0].message.content;\n \n tempDiv.remove();\n const botMessage = addMessage(reply, 'bot');\n chatHistory.push(\n { role: 'user', content: newContent },\n { role: 'assistant', content: reply }\n );\n } catch (error) {\n console.error('Error:', error);\n tempDiv.remove();\n addMessage('\u62b1\u6b49\uff0c\u6682\u65f6\u65e0\u6cd5\u5904\u7406\u60a8\u7684\u8bf7\u6c42', 'bot');\n }\n });\n }\n\n function addEditButton(messageDiv, messageIndex) {\n if (messageDiv.classList.contains('user-message')) {\n const editBtn = document.createElement('button');\n editBtn.className = 'edit-btn';\n editBtn.textContent = '\u270e';\n editBtn.onclick = () => enableMessageEditing(messageDiv, messageIndex);\n messageDiv.appendChild(editBtn);\n }\n }\n\n function parseMessage(text) {\n const tempDiv = document.createElement('div');\n text = text.replace(\/```([\\s\\S]*?)```\/g, (match, code) => {\n return `<div class=\"code-block\">${escapeHtml(code.trim())}\n <button class=\"copy-btn\" onclick=\"copyCode(this)\">\u590d\u5236<\/button><\/div>`;\n });\n text = text.replace(\/`([^`]+)`\/g, '<code>$1<\/code>');\n tempDiv.innerHTML = text;\n return tempDiv.innerHTML;\n }\n\n function escapeHtml(unsafe) {\n return unsafe.replace(\/[&<>\"']\/g, (match) => ({\n '&': '&',\n '<': '<',\n '>': '>',\n '\"': '"',\n \"'\": '''\n }[match]));\n }\n\n function copyCode(button) {\n const code = button.parentElement.textContent.replace('\u590d\u5236', '').trim();\n navigator.clipboard.writeText(code).then(() => {\n button.textContent = '\u5df2\u590d\u5236!';\n setTimeout(() => button.textContent = '\u590d\u5236', 2000);\n });\n }\n\n function addMessage(text, sender) {\n const container = document.getElementById('chatContainer');\n const messageDiv = document.createElement('div');\n messageDiv.className = `message ${sender}-message`;\n messageDiv.innerHTML = parseMessage(text);\n \n if (sender === 'user') {\n const messageIndex = Math.floor(chatHistory.filter(m => m.role === 'user').length);\n addEditButton(messageDiv, messageIndex);\n }\n\n container.appendChild(messageDiv);\n container.scrollTop = container.scrollHeight;\n return messageDiv;\n }\n\n document.querySelector('.new-chat-btn').addEventListener('click', () => {\n chatHistory = [];\n document.getElementById('chatContainer').innerHTML = '';\n initChat();\n });\n\n window.addEventListener('scroll', () => {\n if (!isScrolling) {\n window.requestAnimationFrame(handleScroll);\n isScrolling = true;\n }\n updateButtonPosition();\n });\n\n window.addEventListener('resize', () => {\n updateButtonPosition();\n setTimeout(updateButtonPosition, 300);\n });\n\n updateButtonPosition();\n initChat();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u5df2\u542f\u7528DeepSeek\u6df1\u5ea6\u601d\u7d22R1\u6a21\u578b DeepSeek Chat \u5f00\u542f\u65b0\u5bf9\u8bdd \u53d1\u9001<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-387","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/pages\/387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomhi.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=387"}],"version-history":[{"count":17,"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/pages\/387\/revisions"}],"predecessor-version":[{"id":460,"href":"https:\/\/tomhi.cn\/index.php?rest_route=\/wp\/v2\/pages\/387\/revisions\/460"}],"wp:attachment":[{"href":"https:\/\/tomhi.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}