用deepseek给出的vue代码对接成功,就是有点卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" c>
<meta http-equiv="X-UA-Compatible" c>
<title></title>
<script src="libs/vue3.js"></script>
<script src="libs/axios.min.js"></script>
</head>
<body>
<div id="app" v-cloak="">
<div>
<h1>DeepSeek 流式输出示例</h1>
<textarea v-model="prompt" placeholder="请输入提示内容"></textarea>
<button @click="generateText">生成文本</button>
<div>
<h2>生成的文本：</h2>
<pre>{{ generatedText }}</pre>
</div>
</div>
</div>
<script type="module">
var data = {
prompt: '', // 用户输入的提示内容
generatedText: '', // 生成的文本
};
var methods = {
async generateText() {
// 清空之前的生成结果
this.generatedText = '';
// DeepSeek API 的 URL 和 API 密钥
const API_URL = 'https://api.deepseek.com/v1/chat/completions';
const API_KEY = 'your key';
try {
// 使用 Fetch API 发送请求
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${API_KEY}`,
},
body: JSON.stringify({
model: 'deepseek-chat',
messages: [{ role: 'user', content: this.prompt }],
stream: true, // 开启流式输出
}),
});
// 检查响应是否成功
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
// 获取流式响应的读取器
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
// 读取流式数据
while (true) {
const { done, value } = await reader.read();
if (done) break;
// 解码流式数据
const chunk = decoder.decode(value, { stream: true });
const lines = chunk.split('\n').filter((line) => line.trim() !== '');
// 处理每一行数据
lines.forEach((line) => {
try {
if(line!==': keep-alive' && line.includes('data:')){
const json = JSON.parse(line.replace('data: ', ''));
const content = json.choices[0].delta.content;
if (content) {
// 将生成的文本片段追加到结果中
this.generatedText += content;
}
}
} catch (error) {
console.error('Error parsing JSON:', error);
}
});
}
} catch (error) {
console.error('Error calling DeepSeek API:', error);
}
}
}
var app = Vue.createApp({
data: function() {
return data;
},
methods:methods,
});
app.mount("#app");
</script>
<style>
[v-cloak] {
display: none;
}
</style>
</body>
</html>
[此贴子已经被作者于2025/2/7 12:18:52编辑过]
加好友 
发短信
Post By：2025/2/7 11:48:00 [显示全部帖子]
