{"id":394,"date":"2026-04-01T10:39:37","date_gmt":"2026-04-01T02:39:37","guid":{"rendered":"http:\/\/47.100.88.125\/?page_id=394"},"modified":"2026-04-10T21:36:47","modified_gmt":"2026-04-10T13:36:47","slug":"ai","status":"publish","type":"page","link":"https:\/\/www.05621997.xyz\/index.php\/ai\/","title":{"rendered":"AI \u5bf9\u8bdd"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"394\" class=\"elementor elementor-394\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9110cd e-con-full e-flex e-con e-parent\" data-id=\"d9110cd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6f75e12 elementor-widget elementor-widget-heading\" data-id=\"6f75e12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">AI \u5bf9\u8bdd<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-81bf2da e-con-full e-flex e-con e-parent\" data-id=\"81bf2da\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ac31af elementor-widget elementor-widget-heading\" data-id=\"2ac31af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h6 class=\"elementor-heading-title elementor-size-default\">\u968f\u95ee\u968f\u7b54 | \u65e0\u7f13\u5b58 | \u4e0a\u4e0b\u6587\u8bb0\u5fc610\u53e5<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7e97118 e-con-full e-flex e-con e-parent\" data-id=\"7e97118\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-acae092 elementor-widget elementor-widget-html\" data-id=\"acae092\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ai-chat-box {\r\n    width: 100%;\r\n    max-width: 900px;\r\n    height: 600px;\r\n    margin: 0 auto;\r\n    background: #ffffff;\r\n    border-radius: 28px !important; \r\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n    border: 1px solid #f0f0f0;\r\n}\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n}\r\n\r\n.chat-header {\r\n    padding: 18px 24px;\r\n    background: #fafbfc;\r\n    border-bottom: 1px solid #f0f0f0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 8px;\r\n    font-size: 18px;\r\n    font-weight: 600;\r\n    color: #111827;\r\n    border-radius: 28px 28px 0 0 !important;\r\n    cursor: pointer;\r\n    position: relative;\r\n}\r\n\r\n.model-dropdown-arrow {\r\n    width: 0;\r\n    height: 0;\r\n    border-left: 5px solid transparent;\r\n    border-right: 5px solid transparent;\r\n    border-top: 5px solid #666;\r\n    transition: transform 0.2s;\r\n    \/* \u9f20\u6807\u79fb\u4e0a\u53bb\u663e\u793a\u5c0f\u624b\uff0c\u63d0\u793a\u53ef\u70b9\u51fb *\/\r\n    cursor: pointer;\r\n}\r\n\r\n.model-dropdown-arrow.rotate {\r\n    transform: rotate(180deg);\r\n}\r\n\r\n.model-dropdown {\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background: #fff;\r\n    border: 1px solid #eee;\r\n    border-radius: 12px;\r\n    width: 180px;\r\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n    z-index: 99;\r\n    display: none;\r\n}\r\n\r\n.model-dropdown.show {\r\n    display: block;\r\n}\r\n.model-item {\r\n    padding: 10px 14px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-size: 14px;\r\n}\r\n.model-current {\r\n    color: #007aff;\r\n    font-weight: 500;\r\n}\r\n.model-disabled {\r\n    color: #999 !important;\r\n    cursor: not-allowed;\r\n}\r\n.model-disabled span {\r\n    color: #ff3b30;\r\n    margin-right: 4px;\r\n}\r\n.model-disabled small {\r\n    color: #ccc;\r\n    font-size: 12px;\r\n}\r\n\r\n.chat-messages {\r\n    flex: 1;\r\n    padding: 24px;\r\n    overflow-y: auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    background: #fafbfc;\r\n}\r\n\r\n.chat-messages::-webkit-scrollbar { width: 6px; }\r\n.chat-messages::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }\r\n\r\n.chat-message {\r\n    display: flex;\r\n    align-items: flex-end;\r\n    gap: 10px;\r\n    word-break: break-word;\r\n    white-space: pre-wrap;\r\n    animation: msgSlide 0.2s ease;\r\n}\r\n\r\n.user-message {\r\n    align-self: flex-end;\r\n    flex-direction: row-reverse;\r\n}\r\n\r\n.ai-message {\r\n    align-self: flex-start;\r\n    flex-direction: row;\r\n}\r\n\r\n.msg-bubble {\r\n    max-width: 82%;\r\n    padding: 14px 18px;\r\n    border-radius: 22px !important;\r\n    line-height: 1.6;\r\n}\r\n.user-bubble {\r\n    background: #007aff;\r\n    color: #fff;\r\n}\r\n.ai-bubble {\r\n    background: #ffffff;\r\n    color: #1f2937;\r\n    border: 1px solid #f0f0f0;\r\n}\r\n\r\n@keyframes msgSlide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n.avatar { \r\n    width: 32px; \r\n    height: 32px; \r\n    border-radius: 50% !important; \r\n    flex-shrink: 0; \r\n    display: flex; \r\n    align-items: center; \r\n    justify-content: center; \r\n    font-size: 13px; \r\n    font-weight: 600;\r\n}\r\n.user-avatar { background: #0066cc; color: #fff; }\r\n.ai-avatar { background: #e6f7ff; color: #007aff; }\r\n\r\n.ai-loading { color: #6b7280; }\r\n.loading-dots { display: inline-flex; gap: 4px; margin-left: 4px; }\r\n.loading-dots span { width: 6px; height: 6px; border-radius: 50%; background: #007aff; animation: dot 1.2s infinite; }\r\n.loading-dots span:nth-child(2){animation-delay:.2s}\r\n.loading-dots span:nth-child(3){animation-delay:.4s}\r\n@keyframes dot { 0%,100%{transform:scale(.8);opacity:.5} 50%{transform:scale(1);opacity:1} }\r\n\r\n.chat-input-bar {\r\n    padding: 16px 24px;\r\n    background: #ffffff;\r\n    border-top: 1px solid #f0f0f0;\r\n    display: flex;\r\n    gap: 12px;\r\n    align-items: center;\r\n    border-radius: 0 0 28px 28px !important;\r\n}\r\n\r\n.chat-input {\r\n    flex: 1;\r\n    padding: 14px 20px;\r\n    border: 1px solid #e5e7eb; \r\n    border-radius: 30px !important; \r\n \r\n    outline: none !important;\r\n    -webkit-outline: none !important;\r\n    outline-offset: 0 !important;\r\n    font-size: 15px;\r\n    transition: all 0.2s ease;\r\n    background: #f9fafb;\r\n}\r\n.chat-input:focus {\r\n \r\n    border: 1px solid #007aff !important;\r\n    background: #fff;\r\n \r\n    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.08) !important;\r\n}\r\n\r\n.send-btn {\r\n    width: 40px;\r\n    height: 40px;\r\n    background: #007aff;\r\n    color: #fff;\r\n    border: none;\r\n    border-radius: 50% !important; \r\n    font-size: 18px;\r\n    cursor: pointer;\r\n    transition: 0.2s;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n.send-btn:hover:not(:disabled) {background:#0066cc}\r\n.send-btn:disabled {background:#d1d5db;cursor:not-allowed}\r\n<\/style>\r\n\r\n<div class=\"ai-chat-box\">\r\n    <div class=\"chat-header\">\r\n        \u5343\u95ee\r\n        <div class=\"model-dropdown-arrow\" id=\"arrowBtn\"><\/div>\r\n        <div class=\"model-dropdown\" id=\"modelMenu\">\r\n            <div class=\"model-item model-current\">\u5343\u95ee<\/div>\r\n            <div class=\"model-item model-disabled\">\u8c46\u5305<small>\u6682\u4e0d\u53ef\u7528<\/small><\/div>\r\n            <div class=\"model-item model-disabled\">DeepSeek<small>\u6682\u4e0d\u53ef\u7528<\/small><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"chat-messages\" id=\"messages\"><\/div>\r\n    \r\n    <div class=\"chat-input-bar\">\r\n        <input type=\"text\" class=\"chat-input\" id=\"question\" placeholder=\"\u53d1\u6d88\u606f...\" autocomplete=\"off\" maxlength=\"30\">\r\n        <button class=\"send-btn\" id=\"sendBtn\">\u2191<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst AI_API_URL = \"\/ai-proxy.php\";\r\nconst messagesEl = document.getElementById(\"messages\");\r\nconst sendBtn = document.getElementById(\"sendBtn\");\r\nconst questionInput = document.getElementById(\"question\");\r\n\r\nconst arrowBtn = document.getElementById(\"arrowBtn\");\r\nconst modelMenu = document.getElementById(\"modelMenu\");\r\n\r\nlet chatHistory = [];\r\nconst MAX_HISTORY_LINES = 10;\r\n\r\n\r\narrowBtn.addEventListener(\"click\", function(e) {\r\n    e.stopPropagation(); \/\/ \u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1\r\n    arrowBtn.classList.toggle(\"rotate\"); \/\/ \u5207\u6362\u7bad\u5934\u65cb\u8f6c\r\n    modelMenu.classList.toggle(\"show\"); \/\/ \u5207\u6362\u83dc\u5355\u663e\u793a\r\n});\r\n\r\n\r\ndocument.addEventListener(\"click\", function() {\r\n    arrowBtn.classList.remove(\"rotate\");\r\n    modelMenu.classList.remove(\"show\");\r\n});\r\n\r\n\r\nmodelMenu.addEventListener(\"click\", function(e) {\r\n    e.stopPropagation();\r\n});\r\n\r\nquestionInput.addEventListener('input', function() {\r\n    if(this.value.length >= 50) {\r\n        alert('\u6700\u591a\u53ea\u80fd\u8f93\u516550\u4e2a\u5b57\u54e6\uff01');\r\n    }\r\n});\r\n\r\nasync function sendMessage() {\r\n    const q = questionInput.value.trim();\r\n    if (!q) return;\r\n\r\n    const userMsg = { role: \"user\", content: q };\r\n    chatHistory.push(userMsg);\r\n    if (chatHistory.length > MAX_HISTORY_LINES) {\r\n        chatHistory = chatHistory.slice(-MAX_HISTORY_LINES);\r\n    }\r\n\r\n    addMessage(q, \"user-message\");\r\n    questionInput.value = \"\";\r\n    sendBtn.disabled = true;\r\n\r\n    const loadText = `\u6b63\u5728\u8f93\u5165<span class=\"loading-dots\"><span><\/span><span><\/span><span><\/span><\/span>`;\r\n    const loading = addMessage(loadText, \"ai-message ai-loading\");\r\n\r\n    try {\r\n        const res = await fetch(AI_API_URL, {\r\n            method: \"POST\",\r\n            headers: { \"Content-Type\": \"application\/json\" },\r\n            body: JSON.stringify({ \r\n                model: \"qwen-plus\", \r\n                messages: [...chatHistory]\r\n            })\r\n        });\r\n        const data = await res.json();\r\n        loading.remove();\r\n        const ans = data?.choices?.[0]?.message?.content || \"\u672a\u83b7\u53d6\u5230\u56de\u590d\";\r\n        \r\n        const aiMsg = { role: \"assistant\", content: ans };\r\n        chatHistory.push(aiMsg);\r\n        if (chatHistory.length > MAX_HISTORY_LINES) {\r\n            chatHistory = chatHistory.slice(-MAX_HISTORY_LINES);\r\n        }\r\n\r\n        addMessage(ans, \"ai-message\");\r\n    } catch (e) {\r\n        loading.remove();\r\n        addMessage(\"\u670d\u52a1\u8bf7\u6c42\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\", \"ai-message\");\r\n        console.error(e);\r\n    } finally {\r\n        sendBtn.disabled = false;\r\n    }\r\n}\r\n\r\nfunction addMessage(text, className) {\r\n    const div = document.createElement(\"div\");\r\n    div.className = \"chat-message \" + className;\r\n    \r\n    let avatar;\r\n    if (className.includes(\"ai-message\")) {\r\n        avatar = document.createElement(\"img\");\r\n        avatar.src = \"https:\/\/www.05621997.xyz\/wp-content\/uploads\/2026\/04\/cropped-profile_pic.jpg\";\r\n        avatar.className = \"avatar ai-avatar\";\r\n        avatar.style.objectFit = \"cover\";\r\n    } else {\r\n        avatar = document.createElement(\"div\");\r\n        avatar.className = \"avatar user-avatar\";\r\n        avatar.textContent = \"\u6211\";\r\n    }\r\n\r\n    const bubble = document.createElement(\"div\");\r\n    bubble.className = className.includes(\"ai-message\") ? \"msg-bubble ai-bubble\" : \"msg-bubble user-bubble\";\r\n    bubble.innerHTML = text;\r\n\r\n    div.appendChild(avatar);\r\n    div.appendChild(bubble);\r\n    messagesEl.appendChild(div);\r\n    messagesEl.scrollTop = messagesEl.scrollHeight;\r\n    return div;\r\n}\r\n\r\nsendBtn.addEventListener(\"click\", sendMessage);\r\nquestionInput.addEventListener(\"keypress\", e => e.key === \"Enter\" && sendMessage());\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AI \u5bf9\u8bdd \u968f\u95ee\u968f\u7b54 | \u65e0\u7f13\u5b58 | \u4e0a\u4e0b\u6587\u8bb0\u5fc610\u53e5 \u5343\u95ee \u5343\u95ee \u8c46\u5305\u6682\u4e0d\u53ef\u7528 DeepSeek\u6682\u4e0d\u53ef\u7528 \u2191<\/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-394","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":95,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/394\/revisions"}],"predecessor-version":[{"id":1172,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/394\/revisions\/1172"}],"wp:attachment":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}