WEB项目接入Deepseek（硅基流动）

文末有彩蛋哦！！！

---

这里调用的api为硅基流动的，如用的是其他平台的请自行改url

核心

URL

POST api.siliconflow /v1/chat/completions

headers :

{ 'Authorization': 'Bearer XXX', 'Content-Type': 'application/json' }

请求参数：

{ "model": "你的模型", "messages": [ { "role": "user", "content": prompt } ], "stream": true, // "max_tokens": 512, // "stop": ["null"], // "temperature": 0.7, "top_p": 0.7, // "top_k": 50, "frequency_penalty": 0.5, "n": 1, // "response_format": { "type": "text" }, // "tools": [{ "type": "function", "function": { "description": "<string>", "name": "<string>", "parameters": {}, "strict": false } }] } 使用示例（代码）

这里用react的代码做了个简单的示例

AIApi.jsx：

import { useEffect, useState, useRef } from 'react'; import './AIApi.scss'; export default function AIApi() { const [dialogRecords, setDialogRecords] = useState([]); // ref 存储textarea 内容 const inputRef = useRef(null); // 实例创建时发送 axios useEffect(() => { // handleSubmit(); }, []); let handleSubmit = async (event) => { event.preventDefault(); streamOllamaResponse(inputRef.current.value); } async function streamOllamaResponse(prompt) { setDialogRecords((dialogRecords) => [...dialogRecords, { id: new Date().getTime(), content: prompt, reasoning_content: '', type: 'user' }]); const data = { "model": "deepseek-ai/DeepSeek-R1-Distill-Qwen-7B", "messages": [ { "role": "user", "content": prompt } ], "stream": true, // "max_tokens": 512, // "stop": ["null"], // "temperature": 0.7, "top_p": 0.7, // "top_k": 50, "frequency_penalty": 0.5, "n": 1, // "response_format": { "type": "text" }, // "tools": [{ "type": "function", "function": { "description": "<string>", "name": "<string>", "parameters": {}, "strict": false } }] } const url = ' api.siliconflow /v1/chat/completions'; const headers = { 'Authorization': 'Bearer apikey。。。', 'Content-Type': 'application/json' } const response = await fetch(url, { method: 'POST', headers: headers, body: JSON.stringify(data) }); if (!response.ok) { console.error(`请求失败，状态码: ${response.status}`); return; } const reader = response.body.getReader(); const decoder = new TextDecoder('utf-8'); let buffer = ''; const processText = ({ done, value }) => { if (done) { // 处理最后可能剩余的数据 processDataChunk(buffer, ''); // Stream complete return; } let chunk = decoder.decode(value, { stream: true }); buffer += chunk; let eventEndIndex = buffer.indexOf('\n\n'); // console.log("chunk", chunk); while (eventEndIndex !== -1) { const eventData = buffer.slice(0, eventEndIndex); processDataChunk(eventData, ''); buffer = buffer.slice(eventEndIndex + 2); eventEndIndex = buffer.indexOf('\n\n'); } // next chunk return reader.read().then(processText); }; // 开始读取第一个数据块 return reader.read().then(processText); } function processDataChunk(eventData, outputDiv) { // 检查是否以 "data:" 开头 if (eventData.startsWith('data:')) { // 提取数据部分 const data = eventData.slice(5).trim(); try { // 尝试解析为 JSON（如果数据是 JSON 格式） const parsedData = JSON.parse(data); // console.log(parsedData); let id = parsedData.id; let content = parsedData.choices[0].delta.content || ''; let reasoning_content = parsedData.choices[0].delta.reasoning_content || ''; setDialogRecords((dialogRecords) =>{ let recordIndex = dialogRecords.findIndex(item => item.id == id); console.log(id, content, recordIndex); if (recordIndex === -1) { return [...dialogRecords, { id, content, reasoning_content, type: 'assistant' }]; } else { let newRecords = [...dialogRecords]; newRecords[recordIndex].content += content; newRecords[recordIndex].reasoning_content += reasoning_content; console.log(newRecords); return newRecords; } }) } catch (parseError) { console.error(data); } } } return ( <div className='ai-container'> <h2>AI api Page</h2> <div className='ai-content'> <div className='output-container'> {dialogRecords.map((item, index) => { return ( <div key={index} className={`output-item ${item.type}`}> <div className='reasoning-content'>{item.reasoning_content}</div> <div className='content'>{item.content}</div> </div> ) })} </div> <div className='input-container'> <textarea ref={inputRef} name="" id="" placeholder='请输入您的问题'></textarea> <button onClick={handleSubmit}>提交</button> </div> </div> </div> ) }

AIApi.scss：

.ai-container{ padding: 20px; padding-bottom: 140px; .output-item{ padding: 20px 0; max-width: 80%; .reasoning-content{ color: #8b8b8b; white-space: pre-wrap; margin: 0; padding: 0 0 0 13px; line-height: 26px; position: relative; border-left: 1px solid #e0e0e0; } &.user{ text-align: right; margin-left: auto; } &.assistant{ text-align: left; margin-right: auto; } } .input-container{ background-color: #fff; padding: 0px 40px; width: 100%; height: 140px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; position: fixed; bottom: 0; left: 0; border-top: 1px solid #e0e0e0; textarea{ flex: 1; padding: 20px; // width: 100%; background-color: #f0f0f0; border-radius: 8px; border-color: #e0e0e0; outline: none; height: 3em; } button{ flex-shrink: 0; margin-left: 10px; } } } 效果

---

文末彩蛋！！（粉丝福利）

DeepSeek使用技巧大全.rar： pan.quark /s/6e769f336d4b