在HTML页面通过JavaScript访问DeepSeek-R1（使用硅基流动Api）

2025年3月30日
| 没有评论

前排提醒：

1. 操作系统为Windows11

2. DeepSeek使用的是硅基流动（siliconflow）的API，模型名称为 deepseek-ai/DeepSeek-R1

第一步： 在硅基流动官网的API密钥菜单（ https://cloud.siliconflow.cn/account/ak ）新建密钥

第二步： 新建密钥后，鼠标移动到被隐藏的密钥上，点击即可复制

第三步： 新建一个HTML页面，输入以下HTML代码。注意： 要把 <token> 替换为刚刚复制的密钥

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DeepSeek 智能助手</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --accent-color: #3498db;
            --background: #f8f9fa;
            --border-color: #dfe3e8;
            --text-primary: #2c3e50;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 2rem;
            background: var(--background);
            color: var(--text-primary);
        }

        #chat-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 2rem;
        }

        #input {
            width: 100%;
            padding: 1rem;
            border: 2px solid var(--border-color);
            border-radius: 8px;
            resize: vertical;
            min-height: 120px;
            margin-bottom: 1.5rem;
            transition: border-color 0.3s ease;
            font-size: 1rem;
        }

        #input:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }

        button {
            background: var(--accent-color);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            transition: 
                background 0.3s ease,
                transform 0.1s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        button:hover {
            background: #2980b9;
        }

        button:active {
            transform: scale(0.98);
        }

        #response {
            margin-top: 2rem;
            padding: 1.5rem;
            background: #f8fafc;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            white-space: pre-wrap;
            min-height: 120px;
            position: relative;
        }

        #response::before {
            content: "🤖";
            position: absolute;
            left: -1.2rem;
            top: -1.2rem;
            font-size: 1.8rem;
            background: white;
            border-radius: 50%;
            padding: 0.2rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .loading {
            position: relative;
            opacity: 0.8;
        }

        .loading::after {
            content: "···";
            display: inline-block;
            animation: dotPulse 1.5s infinite;
        }

        @keyframes dotPulse {
            0%, 20% { content: "·  "; }
            40% { content: "·· "; }
            60%, 100% { content: "···"; }
        }

        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }
            
            #chat-container {
                padding: 1.5rem;
            }
            
            #input {
                min-height: 100px;
            }
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <textarea 
            id="input"
            rows="4"
            placeholder="请输入您的问题，例如：如何快速学习机器学习？"
        ></textarea>
        <button onclick="sendToOllama()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z"/>
            </svg>
            发送问题
        </button>
        <div id="response"></div>
    </div>

    <script>
        async function sendToOllama() {
            const input = document.getElementById('input').value.trim();
            const responseDiv = document.getElementById('response');
            const btn = document.querySelector('button');

            if (!input) {
                responseDiv.textContent = '️ 请输入有效的问题内容';
                return;
            }

            try {
                btn.disabled = true;
                responseDiv.classList.add('loading');
                responseDiv.textContent = '思考中';

                const options = {
                    method: 'POST',
                    headers: {
                        'Authorization': 'Bearer <token>',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        model: "deepseek-ai/DeepSeek-R1",
                        messages: [{ role: "user", content: input }],
                        stream: false,
                        max_tokens: 512,
                        temperature: 0.7,
                        top_p: 0.7,
                        top_k: 50,
                        frequency_penalty: 0.5,
                    })
                };

                const resp = await fetch('https://api.siliconflow.cn/v1/chat/completions', options);
                
                if (!resp.ok) throw new Error(`HTTP错误 ${resp.status}`);
                
                const data = await resp.json();
                responseDiv.innerHTML = `
                    <div style="color: var(--accent-color); margin-bottom: 0.8rem;">️ 你的提问：</div>
                    <div style="margin-bottom: 1.2rem;">${input}</div>
                    <div style="color: var(--accent-color); margin-bottom: 0.8rem;">🤖 AI回复：</div>
                    <div>${data.choices[0].message.content}</div>
                `;
                
            } catch (error) {
                console.error('请求失败:', error);
                responseDiv.textContent = ` 请求失败: ${error.message}`;
            } finally {
                btn.disabled = false;
                responseDiv.classList.remove('loading');
            }
        }
    </script>
</body>
</html>

打开HTML页面后，可以进行对话，如下图所示。

人工智能AI, 大模型