开发文档
菜单
本页目录

deepseek接入

源码chat.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --heo-lighttext: #333;
            --heo-none: #fff;
            --chat-bg-light: #fff;
            --message-bg-light: #f8f9fa;
            --user-message-bg-light: #007bff;
            --bot-message-bg-light: #f1f3f5;
            --text-color-light: #333;
            --chat-bg-dark: #121212;
            --message-bg-dark: #1e1e1e;
            --user-message-bg-dark: #004ba0;
            --bot-message-bg-dark: #2b2b2b;
            --text-color-dark: #fff;
        }

        /* 只对.chat-wrapper及其子元素应用样式重置 */
        .chat-wrapper * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* 浅色模式样式 */
        .chat-wrapper .chat-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            max-width: 600px;
            background-color: var(--chat-bg-light);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            height: 80vh;
            margin-top: 10px;
            display: none;
            z-index: 2000; /* 降低 z-index 值，减少层级影响 */
        }

        .chat-wrapper .messages {
            flex: 1;
            overflow-y: auto;
            border: 1px solid #ddd;
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 5px;
            background-color: var(--message-bg-light);
            font-size: 16px;
            color: var(--text-color-light);
        }

        .chat-wrapper .message-content {
            padding: 12px 16px;
            border-radius: 12px;
            max-width: 85%;
            font-size: 16px;
            line-height: 1.6;
            color: var(--text-color-light);
        }

        .chat-wrapper .message.user.message-content {
            background-color: var(--user-message-bg-light);
            color: white;
            text-align: right;
        }

        .chat-wrapper .message.bot.message-content {
            background-color: var(--bot-message-bg-light);
        }

        /* 深色模式样式 */
        @media (prefers-color-scheme: dark) {
            .chat-wrapper .chat-container {
                background-color: var(--chat-bg-dark);
            }

            .chat-wrapper .messages {
                background-color: var(--message-bg-dark);
                border-color: #333;
                color: var(--text-color-dark);
            }

            .chat-wrapper .message-content {
                color: var(--text-color-dark);
            }

            .chat-wrapper .message.user.message-content {
                background-color: var(--user-message-bg-dark);
            }

            .chat-wrapper .message.bot.message-content {
                background-color: var(--bot-message-bg-dark);
            }

            .chat-wrapper .loading {
                color: var(--text-color-dark);
            }

            .chat-wrapper .input-container input {
                background-color: var(--message-bg-dark);
                border-color: #333;
                color: var(--text-color-dark);
            }

            .chat-wrapper .input-container button {
                background-color: var(--user-message-bg-dark);
            }

            .chat-wrapper .input-container button:hover {
                background-color: #003780;
            }
        }

        .chat-wrapper .message {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
        }

        .chat-wrapper .message img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .chat-wrapper .message-content.title {
            font-size: 1.3em;
            font-weight: bold;
            display: block;
            margin: 16px 0 12px 0;
            color: var(--text-color-light);
        }

        .chat-wrapper .message.user {
            flex-direction: row-reverse;
        }

        .chat-wrapper .message.user img {
            margin-left: 10px;
            margin-right: 0;
        }

        .chat-wrapper .input-container {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .chat-wrapper .input-container input {
            flex: 1;
            min-width: 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

        .chat-wrapper .input-container button {
            padding: 10px 15px;
            min-width: 60px;
            white-space: nowrap;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .chat-wrapper .input-container button:hover {
            background-color: #0056b3;
        }

        @media (max-width: 600px) {
            .chat-wrapper .chat-container {
                height: 100vh; /* 高度占满屏幕 */
                width: 100vw; /* 宽度占满屏幕 */
                padding: 15px;
                top: 0;
                left: 0;
                transform: none;
                border-radius: 0; /* 去除圆角 */
                box-shadow: none; /* 去除阴影 */
            }

            .chat-wrapper .messages {
                padding: 20px;
                font-size: 15px;
            }

            .chat-wrapper .input-container {
                gap: 8px;
            }

            .chat-wrapper .input-container input {
                font-size: 14px;
            }

            .chat-wrapper .input-container button {
                padding: 8px 12px;
                font-size: 14px;
            }

            .chat-wrapper .message img {
                width: 30px;
                height: 30px;
            }

            .chat-wrapper .message-content {
                font-size: 15px;
                max-width: 100%;
            }
            /* 确保关闭按钮在手机端显示 */
            .chat-wrapper .input-container #close-chat {
                display: block !important;
            }
        }

        .chat-wrapper .message-content p {
            margin: 10px 0;
            line-height: 1.6;
        }

        .chat-wrapper .message-content.title {
            font-size: 1.3em;
            font-weight: bold;
            display: block;
            margin: 16px 0 12px 0;
            color: var(--text-color-light);
        }

        .chat-wrapper .message-content.bold-text {
            font-weight: bold;
            font-size: 1.1em;
            color: var(--text-color-light);
        }

        .chat-wrapper .message-content.section-title {
            font-size: 1.1em;
            font-weight: bold;
            margin: 16px 0 8px 0;
            color: var(--text-color-light);
        }

        .chat-wrapper .message-content.subsection {
            margin: 8px 0 8px 20px;
        }

        .chat-wrapper .message-content.subtitle {
            font-weight: bold;
        }

        .chat-wrapper .loading {
            text-align: center;
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
        }

        /* 默认关闭按钮隐藏 */
        .chat-wrapper .input-container #close-chat {
            display: none;
        }

    </style>
</head>
<body>
    <div class="chat-wrapper">
        <div class="chat-container" id="chat-container">
            <div class="messages" id="messages" style="position: relative;"></div>
            <div id="loading" class="loading" style="display: none;">加载中...</div>
            <div class="input-container">
                <input id="chat-input" type="text" placeholder="输入消息..." onkeydown="handleKeyDown(event)"/>
                <button onclick="sendMessage()">发送</button>
                <button id="close-chat" onclick="toggleChatBox()">关闭</button>
            </div>
        </div>
    </div>
    <script>
        let conversationHistory = [
            { 
                role: "system", 
                content: "你叫水银灯，由封君小站提供服务。" 
            }
        ];

        function formatMessage(text) {
            if (!text) return '';
            let lines = text.split('\n');
            let formattedLines = lines.map(line => {
                line = line.replace(/\*\*(.*?)\*\*/g, '<span class="bold-text">$1</span>');
                return line;
            });
            let processedText = formattedLines.join('\n');
            let sections = processedText
              .split('###')
              .filter(section => section.trim())
              .map(section => {
                    let lines = section.split('\n').filter(line => line.trim());
                    if (lines.length === 0) return '';
                    let result = '';
                    let currentIndex = 0;
                    while (currentIndex < lines.length) {
                        let line = lines[currentIndex].trim();
                        if (/^\d+\./.test(line)) {
                            result += `<p class="section-title">${line}</p>`;
                        } else if (line.startsWith('-')) {
                            result += `<p class="subsection"><span class="bold-text">${line.replace(/^-/, '').trim()}</span></p>`;
                        } else if (line.includes(':')) {
                            let [subtitle, content] = line.split(':').map(part => part.trim());
                            result += `<p><span class="subtitle">${subtitle}</span>: ${content}</p>`;
                        } else {
                            result += `<p>${line}</p>`;
                        }
                        currentIndex++;
                    }
                    return result;
                });
            return sections.join('');
        }

        function displayMessage(role, message) {
            const messagesContainer = document.getElementById('messages');
            const messageElement = document.createElement('div');
            messageElement.className = `message ${role}`;
            const avatar = document.createElement('img');
            avatar.src = role === 'user'? 'https://fjxzwoss.oss-cn-shanghai.aliyuncs.com/%E7%94%A8%E6%88%B7.png' : 'https://fjxzwoss.oss-cn-shanghai.aliyuncs.com/aislogo.png';
            avatar.alt = role === 'user'? 'User' : 'Bot';
            const messageContent = document.createElement('div');
            messageContent.className ='message-content';
            messageContent.innerHTML = role === 'user'? message : formatMessage(message);
            messageElement.appendChild(avatar);
            messageElement.appendChild(messageContent);
            messagesContainer.appendChild(messageElement);
            messageElement.scrollIntoView({ behavior:'smooth' });
        }

        function sendMessage() {
            const inputElement = document.getElementById('chat-input');
            const message = inputElement.value;
            if (!message.trim()) return;
            displayMessage('user', message);
            inputElement.value = '';
            const loadingElement = document.getElementById('loading');
            if (loadingElement) {
                loadingElement.style.display = 'block';
            }

            conversationHistory.push({ role: "user", content: message });

            // 限制对话历史长度
            const MAX_HISTORY_LENGTH = 10;
            if (conversationHistory.length > MAX_HISTORY_LENGTH) {
                // 保留system消息
                const systemMessage = conversationHistory[0];
                conversationHistory = [systemMessage, ...conversationHistory.slice(-(MAX_HISTORY_LENGTH - 1))];
            }

            const apiKey = 'sk-b19c4364ab404f66955e57d56fab0877';
            const endpoint = 'https://api.deepseek.com/chat/completions';
            const payload = {
                model: "deepseek-chat",
                messages: conversationHistory,
                stream: false
            };
            fetch(endpoint, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${apiKey}`
                },
                body: JSON.stringify(payload)
            })
              .then(response => response.json())
              .then(data => {
                    if (loadingElement) {
                        loadingElement.style.display = 'none';
                    }
                    if (data.choices && data.choices.length > 0) {
                        const botMessage = data.choices[0].message.content;
                        displayMessage('bot', botMessage);
                        conversationHistory.push({ role: "assistant", content: botMessage });
                    } else {
                        displayMessage('bot', '出错了，请稍后再试。');
                    }
                })
              .catch(error => {
                    if (loadingElement) {
                        loadingElement.style.display = 'none';
                    }
                    displayMessage('bot', '出错了，请稍后再试。');
                });
        }

        function isDarkMode() {
            const root = document.documentElement;
            const themeColor = getComputedStyle(root).getPropertyValue('--heo-lighttext');
            return themeColor === 'var(--heo-none)';
        }

        function toggleChatBox() {
            console.log('toggleChatBox called');
            const chatContainer = document.getElementById('chat-container');

            if (!chatContainer) {
                console.error('chat-container not found');
                return;
            }

            if (chatContainer.style.display === 'none' || chatContainer.style.display === '') {
                chatContainer.style.display = 'flex';
            } else {
                chatContainer.style.display = 'none';
            }
        }

        function handleKeyDown(event) {
            const chatContainer = document.getElementById('chat-container');
            if (chatContainer && chatContainer.style.display === 'flex' && event.key === 'Enter') {
                event.preventDefault();
                sendMessage();
            }
        }

        window.toggleChatBox = toggleChatBox;
    </script>
</body>
</html>

源码layout.html，112行

在这里引用
上一篇 主页修改