vue通过ollama接口调用开源模型实现人机对话功能
更新时间：2024年11月11日 09:41:17 作者：小G同学
文章介绍了如何在本地安装ollama并配置开源大模型,以及如何通过JavaScript和Vue.js实现人机对话功能,感兴趣的朋友一起看看吧
先展示下最终效果：
第一步：先安装ollama，并配置对应的开源大模型。
安装步骤可以查看上一篇博客：
第二步：需要注意两个配置，页面才可以调用
1）OLLAMA_HOST= "0.0.0.0:11434"
2）若应用部署服务器后想调用，需要配置：OLLAMA_ORIGINS=*
第三步：js流式调用大模型接口方法
async startStreaming(e) {
if(e.ctrkey&&e.keyCode==13){
this.form.desc+='\n';
}
document.getElementById("txt_suiwen").disabled="true";
// 如果已经有一个正在进行的流式请求，则中止它
if (this.controller) {
this.controller.abort();
}
setTimeout(()=>{
this.scrollToBottom();
},50);
var mymsg=this.form.desc.trim();
if(mymsg.length>0){
this.form.desc='';
this.message.push({
user:this.username,
msg:mymsg
})
this.message.push({
user:'GPT',
msg:'',
dot:''
});
// 创建一个新的 AbortController 实例
this.controller = new AbortController();
const signal = this.controller.signal;
this.arequestData.messages.push({role:"user",content:mymsg});
try {
const response = await fetch('http://127.0.0.1:11434/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body:JSON.stringify(this.arequestData),
signal
});
if (!response.body) {
this.message[this.message.length-1].msg='ReadableStream not yet supported in this browser.';
throw new Error('ReadableStream not yet supported in this browser.');
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
let result = '';
this.message[this.message.length-1].dot='⚪';
while (true) {
const { done, value } = await reader.read();
if (done) {
break;
}
result += decoder.decode(value, { stream: true });
// 处理流中的每一块数据，这里假设每块数据都是完整的 JSON 对象
const jsonChunks = result.split('\n').filter(line => line.trim());
//console.log(result)
for (const chunk of jsonChunks) {
try {
const data = JSON.parse(chunk);
//console.log(data.message.content)
this.message[this.message.length-1].msg+=data.message.content;
setTimeout(()=>{
this.scrollToBottom();
},50);
} catch (e) {
//this.message[this.message.length-1].msg=e;
// 处理 JSON 解析错误
//console.error('Failed to parse JSON:', e);
}
}
// 清空 result 以便处理下一块数据
result = '';
}
} catch (error) {
if (error.name === 'AbortError') {
console.log('Stream aborted');
this.message[this.message.length-1].msg='Stream aborted';
} else {
console.error('Streaming error:', error);
this.message[this.message.length-1].msg='Stream error'+error;
}
}
this.message[this.message.length-1].dot='';
this.arequestData.messages.push({
role: 'assistant',//this.message[this.message.length-1].user,//"GPT",
content: this.message[this.message.length-1].msg
})
setTimeout(()=>{
this.scrollToBottom();
},50);
}else{
this.form.desc='';
}
document.getElementById("txt_suiwen").disabled="";
document.getElementById("txt_suiwen").focus();
}
}vue完整代码如下：
<template>
<el-row :gutter="12" class="demo-radius">
<div
class="radius"
:style="{
borderRadius: 'base'
}">
<div class="messge" id="messgebox" ref="scrollDiv">
<ul>
<li v-for="(item, index) in message" :key="index" style="list-style-type:none;">
<div v-if="item.user == username" class="mymsginfo" style="float:right">
<div>
<el-avatar style="float: right;margin-right: 30px;background: #01bd7e;">
<!-- {{ item.user.substring(0, 2) }} -->
<img :alt="item.user.substring(0, 2)" :src=userphoto />
</el-avatar>
</div><div style="float: right;margin-right: 10px;margin-top:10px;width:80%;text-align: right;"> {{ item.msg }} </div>
</div>
<div v-else class="chatmsginfo" >
<div>
<el-avatar style="float: left;margin-right: 10px;"> {{ item.user }} </el-avatar>
</div>
<div style="float: left;margin-top:10px;width:80%;">
<img alt="loading" v-if="item.msg == ''" class="loading" src="../../assets/loading.gif"/>
<MdPreview style="margin-top:-20px;" :autoFoldThreshold="9999" :editorId="id" :modelValue=" item.msg + item.dot " />
<!-- {{ item.msg }} -->
</div>
</div>
</li>
</ul>
</div>
<div class="inputmsg">
<el-form :model="form" >
<el-form-item >
<el-avatar style="float: left;background: #01bd7e;margin-bottom: -44px;margin-left: 4px;z-index: 999;width: 30px;height: 30px;">
<img alt="jin" :src=userphoto />
</el-avatar>
<el-input id="txt_suiwen" :prefix-icon="userphoto" resize="none" autofocus="true" :autosize="{ minRows: 1, maxRows: 2 }" v-model="form.desc" placeholder="说说你想问点啥....按Enter键可直接发送" @keydown.enter.native.prevent="startStreaming($event)" type="textarea" />
</el-form-item>
</el-form>
</div>
</div>
</el-row>
</template>
<script setup>
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
const id = 'preview-only';
</script>
<script>
export default {
data() {
return {
form: {
desc: ''
},
message:[],
username:sessionStorage.name,
userphoto:sessionStorage.photo,
loadingtype:false,
controller: null,
arequestData : {
model: "qwen2",//"llama3.1",
messages: []
}
}
},
mounted() {
},
methods: {
scrollToBottom() {
let elscroll=this.$refs["scrollDiv"];
elscroll.scrollTop = elscroll.scrollHeight+30
},
clearForm(formName){
this.form.desc='';
},
async startStreaming(e) {
if(e.ctrkey&&e.keyCode==13){
this.form.desc+='\n';
}
document.getElementById("txt_suiwen").disabled="true";
// 如果已经有一个正在进行的流式请求，则中止它
if (this.controller) {
this.controller.abort();
}
setTimeout(()=>{
this.scrollToBottom();
},50);
var mymsg=this.form.desc.trim();
if(mymsg.length>0){
this.form.desc='';
this.message.push({
user:this.username,
msg:mymsg
})
this.message.push({
user:'GPT',
msg:'',
dot:''
});
// 创建一个新的 AbortController 实例
this.controller = new AbortController();
const signal = this.controller.signal;
this.arequestData.messages.push({role:"user",content:mymsg});
try {
const response = await fetch('http://127.0.0.1:11434/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body:JSON.stringify(this.arequestData),
signal
});
if (!response.body) {
this.message[this.message.length-1].msg='ReadableStream not yet supported in this browser.';
throw new Error('ReadableStream not yet supported in this browser.');
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
let result = '';
this.message[this.message.length-1].dot='⚪';
while (true) {
const { done, value } = await reader.read();
if (done) {
break;
}
result += decoder.decode(value, { stream: true });
// 处理流中的每一块数据，这里假设每块数据都是完整的 JSON 对象
const jsonChunks = result.split('\n').filter(line => line.trim());
//console.log(result)
for (const chunk of jsonChunks) {
try {
const data = JSON.parse(chunk);
//console.log(data.message.content)
this.message[this.message.length-1].msg+=data.message.content;
setTimeout(()=>{
this.scrollToBottom();
},50);
} catch (e) {
//this.message[this.message.length-1].msg=e;
// 处理 JSON 解析错误
//console.error('Failed to parse JSON:', e);
}
}
// 清空 result 以便处理下一块数据
result = '';
}
} catch (error) {
if (error.name === 'AbortError') {
console.log('Stream aborted');
this.message[this.message.length-1].msg='Stream aborted';
} else {
console.error('Streaming error:', error);
this.message[this.message.length-1].msg='Stream error'+error;
}
}
this.message[this.message.length-1].dot='';
this.arequestData.messages.push({
role: 'assistant',//this.message[this.message.length-1].user,//"GPT",
content: this.message[this.message.length-1].msg
})
setTimeout(()=>{
this.scrollToBottom();
},50);
}else{
this.form.desc='';
}
document.getElementById("txt_suiwen").disabled="";
document.getElementById("txt_suiwen").focus();
}
},
beforeDestroy() {
// 组件销毁时中止流式请求
if (this.controller) {
this.controller.abort();
}
}
}
</script>
<style scoped>
.radius{
margin:0 auto;
}
.demo-radius .title {
color: var(--el-text-color-regular);
font-size: 18px;
margin: 10px 0;
}
.demo-radius .value {
color: var(--el-text-color-primary);
font-size: 16px;
margin: 10px 0;
}
.demo-radius .radius {
min-height: 580px;
height: 85vh;
width: 70%;
border: 1px solid var(--el-border-color);
border-radius: 14px;
margin-top: 10px;
}
.messge{
width:96%;
height:84%;
/* border:1px solid red; */
margin: 6px auto;
overflow: hidden;
overflow-y: auto;
}
.inputmsg{
width:96%;
height:12%;
/* border:1px solid blue; */
border-top:2px solid #ccc;
margin: 4px auto;
padding-top: 10px;
}
.mymsginfo{
width:100%;
height:auto;
min-height:50px;
}
::-webkit-scrollbar {width: 6px;height: 5px;
}
::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0.2);border-radius: 10px;
}
::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.5);border-radius: 10px;
}
::-webkit-scrollbar-button {background-color: #7c2929;height: 0;width: 0px;
}
::-webkit-scrollbar-corner {background-color: black;
}
</style>
<style>
.el-textarea__inner{
padding-left: 45px;
padding-top: .75rem;
padding-bottom: .75rem;
}
</style>到此这篇关于vue通过ollama接口调用开源模型实现人机对话的文章就介绍到这了,更多相关vue ollama接口人机对话内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
element ui设置table自适应表格宽,不自动换行问题
这篇文章主要介绍了element ui设置table自适应表格宽,不自动换行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要为大家详细介绍了Vue如何利用自定义指令实现按钮权限控制效果，文中的示例代码讲解详细，具有一定的学习价值，需要的可以参考下2023-05-05
这篇文章主要介绍了mpvue将vue项目转换为小程序的相关资料及mpvue开发流程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
vue中的render函数,它返回的是一个虚拟节点vnode,也就是我们要渲染的节点,下面这篇文章主要给大家介绍了关于Vue中render函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue如何设置动态的栅格占位、水平偏移量、类名、样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了Vue.js搭建移动端购物车界面，重点介绍基本结构和数据渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家介绍了vue this.$router六种方法使用示例总结分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章介绍了Vue.js中v-for指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue环境如何实现div focus blur焦点事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Rsbuild,一个基于Rspack的高效Web构建工具,将Rspack的强大功能与易用性相结合,是你项目搭建的不二之选,Rsbuild不仅提供了开箱即用的体验,还引入了高性能的构建机制,本文给大家介绍了Vue2迁移Rsbuild详细步骤,需要的朋友可以参考下2024-10-10
最新评论