vue通过ollama接口调用开源模型

转载作者：撒哈拉更新时间：2024-11-09 16:45:51

先展示下最终效果:

第一步：先安装ollama，并配置对应的开源大模型.

安装步骤可以查看上一篇博客:

ollama搭建本地ai大模型并应用调用

第二步：需要注意两个配置，页面才可以调用

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接口调用开源模型的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： openEuler搭建k8s(1.28.2版本)

文章推荐： Nuxt.js应用中的listen事件钩子详解

文章推荐： SpringMVC学习笔记

文章推荐： DDCA——缓存(Cache)：缓存体系结构、缓存操作

开源！开源一个flutter实现的古诗拼图游戏
去年(2023年)年底我初学flutter，看了一些文档和教程，想找个东西*练练手。小时候看过一个关于历史名人儿时事迹的短片，有一集是讲*总理的，有一个细节我记得很清楚：幼年***经常要做一个游戏
windows右键菜单扩展容器[开源]
今天给大家分享一个我做的小工具，可以自定义扩展右键菜单的功能来提高工作效率，效果图如下： image 如上图，右键菜单多了几个我自定义的菜单
开源-Ideal库-常用枚举扩展方法（二）
书接上回，今天继续和大家享一些关于枚举操作相关的常用扩展方法。今天主要分享通过枚举值转换成枚举、枚举名称以及枚举描述相关实现。我们首先修改一下上一篇定义用来测试的正常枚举，新增一个枚举项，
开源-Ideal库-常用枚举扩展方法（一）
今天和大家享一些关于枚举操作相关的常用扩展方法。我们平时用的比较多的是正常枚举，同时还有加[Flags]特性的位标志枚举，因此以下所有扩展方法同时适用正常枚举以及位标志枚举。我们首先定义两
开源-Ideal库-获取特殊时间扩展方法（四）
书接上回，我们继续来分享一些关于特殊时间获取的常用扩展方法。 01、获取当前日期所在月的第一个指定星期几该方法和前面介绍的获取当前日期所在周的第一天（周一）核心思想是一样的，只是把求周一改成
开源-Ideal库-特殊时间扩展方法（三）
书接上回，我们继续来分享一些关于特殊时间获取的常用扩展方法。 01、获取当天的开始时间当天的开始时间指00:00:00时刻，因此只需要获取DateTime的Date属性只获取时间即可，具体代
开源-Ideal库-常用时间转换扩展方法（二）
书接上回，我们继续来分享一些关于时间转换的常用扩展方法。 01、时间转日期时间 TimeOnly 该方式是把TimeOnly类型转为DateTime类型，其中日期部分使用系统当前日期，时间部分
开源-Ideal库-常用时间转换扩展方法（一）
从事软件开发这么多年，平时也积累了一些方便自己快速开发的帮助类，一直在想着以什么方式分享出来，因此有了这个系列文章，后面我将以《开源-Ideal库》系列文章分享一些我认为比较成熟、比较方便、比较好的代
gis - 开源 map
任何人都可以建议我应该使用什么程序/方法？我需要有一个像谷歌地图这样的 map ，我可以在其中显示 map 、添加标记多边形等。但是我不能依赖这样的在线服务，因为客户担心这样的服务会消失，我们的系
sharepoint - 开源 SharePoint？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。想改进这个问题？将问题更新为 on-topic对于堆栈溢出。 6年前关闭。 Improve this qu
licensing - 开源，非商业许可？
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题？ Update the question所以它是on-topic对于堆栈溢出。 11年前关闭。 Improve this qu
.net - 开源.Net报告工具
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be
开源 EDA 项目
您知道 EDA(电子设计自动化)领域有哪些开源项目正在寻找 C++ 程序员吗？最佳答案如果您经常关注 gEDA 的邮件列表，您也许能够加入 gEDA。详情:http://www.gpleda.or
hadoop - 在现有Hadoop集群的数据节点上安装NiFi(开源)
如果现有Hadoop群集上有10个数据节点，则可以在4个或6个数据节点上安装NiFi吗？ NiFi的主要目的是每天将数据从RDBMS加载到高容量的HDFS。数据节点将配置为具有100 GB的高RAM
.net - 开源.NET矢量图形编辑器
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
c# - 开源.Net项目中使用的设计模式示例
Closed. This question is off-topic。它当前不接受答案。
java - 开源 Alfresco
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 10 年前。 Improve thi
java - 开源 OCR
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 4 年前。
开源.NetCore通用工具库Xmtool使用连载-扩展动态对象篇
【Github源码】《上一篇》介绍了Xmtool工具库中的图形验证码类库，今天我们继续为大家介绍其中的扩展动态对象类库。扩展动态对象是整个工具库中最重要的一个设计。
开源.NetCore通用工具库Xmtool使用连载-图形验证码篇
【Github源码】《上一篇》介绍了Xmtool工具库中的Web操作类库，今天我们继续为大家介绍其中的图形验证码类库。图形验证码是为了抵御恶意攻击出现的一种设计；例如用

撒哈拉

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

vue通过ollama接口调用开源模型

ollama搭建本地ai大模型并应用调用