飞色 网站建设,创建一个免费网站,手机怎么查看网站代码实现的,山东建设局网站首页一、下载ollama(官网下载比较慢#xff0c;可以找个网盘资源下) 二、安装ollama 三、打开cmd#xff0c;拉取模型deepseek-r1:14b(根据显存大小选择模型大小#xff09;
ollama pull deepseek-r1:14b 四、运行模型 ollama run deepseek-r1:14b
五、使用网页api访问#x…一、下载ollama(官网下载比较慢可以找个网盘资源下) 二、安装ollama 三、打开cmd拉取模型deepseek-r1:14b(根据显存大小选择模型大小
ollama pull deepseek-r1:14b 四、运行模型 ollama run deepseek-r1:14b
五、使用网页api访问可以使用openweb-ui也可以自己实现页面下面是使用vue实现的页面
const ChildOllama {data() {return {userInput: ,chatHistory: [],// 请根据实际情况修改 Ollama API 的 URLollamaApiUrl: http://localhost:11434/v1/chat,currentResponse: }},watch: {// 监听 messages 数组的变化chatHistory: {handler() {// 数据变化时将滚动条移动到最下方this.scrollToBottom();},deep: true}},methods: {// 将滚动条移动到最下方的方法scrollToBottom() {// 获取滚动 div 的引用const scrollDiv this.$refs.scrollDiv;// 设置滚动条位置到最下方scrollDiv.scrollTop scrollDiv.scrollHeight;},async sendMessage() {if (this.userInput.trim() ) return;// 添加用户消息到历史记录const userMessage { role: user, content: this.userInput };this.chatHistory.push(userMessage);try {// 构造请求数据const response await fetch(http://localhost:11434/api/chat, {method: POST,headers: {Content-Type: application/json,},body: JSON.stringify({model: deepseek-r1:14b, // 使用的模型messages: this.chatHistory,stream: true, // 启用流式传输}),});if (!response.ok) {throw new Error(请求失败状态码: ${response.status});}this.currentResponse ;const reader response.body.getReader();const decoder new TextDecoder();let done false;while (!done) {const { value, done: readerDone } await reader.read();done readerDone;if (value) {const chunk decoder.decode(value, { stream: true });const lines chunk.split(\n).filter(line line.trim() ! );for (const line of lines) {if (line) {try {const data JSON.parse(line.replace(/^data: /, ));if (data.done) {// 流式响应结束添加完整回复到历史记录const ollamaMessage { role: assistant, content: this.currentResponse };this.chatHistory.push(ollamaMessage);} else {this.currentResponse data.message.content || ;}} catch (error) {console.error(Error parsing JSON:, error);}}}}}} catch (error) {console.error(Error sending message:, error);}// 清空输入框this.userInput ;// try {// // 将当前输入添加到对话历史中// this.conversationHistory.push({ role: user, content: this.inputText });//// // 构造完整的提示信息包含对话历史// let fullPrompt ;// this.conversationHistory.forEach((item) {// fullPrompt ${item.role user ? 用户: : 助手: }${item.content}\n;// });//// // 清空之前的响应文本// this.responseText ;// // 发起流式请求// const response await fetch(http://localhost:11434/api/generate, {// method: POST,// headers: {// Content-Type: application/json// },// body: JSON.stringify({// model: deepseek-r1:14b,// prompt: fullPrompt,// stream: true // 开启流式响应// })// });//// if (!response.ok) {// throw new Error(请求失败状态码: ${response.status});// }//// // 处理流式数据// const reader response.body.getReader();// const decoder new TextDecoder();// let done false;// let currentResponse ;// while (!done) {// const { value, done: readerDone } await reader.read();// done readerDone;// if (value) {// const chunk decoder.decode(value, { stream: true });// // 解析 JSON 数据// const lines chunk.split(\n).filter(line line.trim() ! );// for (const line of lines) {// try {// const data JSON.parse(line);// if (data.response) {// // 更新响应文本// currentResponse data.response;// this.responseText data.response;// }// } catch (error) {// console.error(解析 JSON 数据时出错:, error);// }// }// }// }// // 将助手的回复添加到对话历史中// this.conversationHistory.push({ role: assistant, content: currentResponse });// } catch (error) {// console.error(请求出错:, error);// }}},template:div classollama-chat!-- 显示对话历史的区域 --
!-- div classhistory-area--
!-- div v-for(item, index) in conversationHistory :keyindex classresponse-area--
!-- span :classitem.role user ? user-message : assistant-message--
!-- {{ item.role user ? 用户: : 助手: }}--
!-- /span--
!-- span{{ item.content }}/span--
!-- /div--
!-- /div--
!-- textarea v-modelinputText placeholder请输入问题/textarea--
!-- button clicksendRequest发送请求/button--
!-- --
!-- div classresponse-area{{ responseText }}/div--h1Ollama Chat/h1div refscrollDiv classchat-history response-areadiv v-for(message, index) in chatHistory :keyindexpstrong{{ message.role user ? You : Ollama }}:/strong {{ message.content }}/p/div/divinputv-modeluserInputplaceholderType your message...keyup.entersendMessage stylewidth: 70%;padding: 5px;margin-right: 10px;/button clicksendMessageSend/buttonbutton clickscrollToBottombotom/buttondiv classchat-history response-area{{ currentResponse }}/div
/div
}
