Location>code7788 >text

vue calls open source models through the ollama interface

Popularity:65 ℃/2024-11-09 15:41:05
<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=" == username" class="mymsginfo" style="float:right"> <div> <el-avatar style="float: right;margin-right: 30px;background: #01bd7e;"> <!-- {{ (0, 2) }} --> <img :alt="(0, 2)" :src=userphoto /> </el-avatar> </div><div style="float: right;margin-right: 10px;margin-top:10px;width:80%;text-align: right;"> {{ }} </div> </div> <div v-else class="chatmsginfo" > <div> <el-avatar style="float: left;margin-right: 10px;"> {{ }} </el-avatar> </div> <div style="float: left;margin-top:10px;width:80%;"> <img alt="loading" v-if=" == ''" class="loading" src="../../assets/"/> <MdPreview style="margin-top:-20px;" :autoFoldThreshold="9999" :editorId="id" :modelValue=" + " /> <!-- {{ }} --> </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="" placeholder= "Say what you want to ask .... Press Enter to send directly" @="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/'; const id = 'preview-only'; </script> <script> export default { data() { return { form: { desc: '' }, message:[], username:, userphoto:, loadingtype:false, controller: null, arequestData : { model: "qwen2",//"llama3.1", messages: [] } } }, mounted() { }, methods: { scrollToBottom() { let elscroll=this.$refs["scrollDiv"]; = +30 }, clearForm(formName){ this.=''; }, async startStreaming(e) { if(&&==13){ this.+='\n'; } ("txt_suiwen").disabled="true"; // If there is already a streaming request in progress, abort it if (this.controller) { this.(); } setTimeout(()=>{ this.scrollToBottom(); },50); var mymsg=this.(); if(>0){ this.=''; this.({ user:this.username, msg:mymsg }) this.({ user:'GPT', msg:'', dot:'' }); // Creating a new instance of AbortController this.controller = new AbortController(); const signal = this.; this.({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:(this.arequestData), signal }); if (!) { this.message[this.-1].msg='ReadableStream not yet supported in this browser.'; throw new Error('ReadableStream not yet supported in this browser.'); } const reader = (); const decoder = new TextDecoder(); let result = ''; this.message[this.-1].dot=''; while (true) { const { done, value } = await (); if (done) { break; } result += (value, { stream: true }); // Processes each piece of data in the stream, assuming that each piece of data is a complete JSON object const jsonChunks = ('\n').filter(line => ()); //(result) for (const chunk of jsonChunks) { try { const data = (chunk); //() this.message[this.-1].msg+=; setTimeout(()=>{ this.scrollToBottom(); },50); } catch (e) { //[-1].msg=e; // Handling JSON Parsing Errors //('Failed to parse JSON:', e); } } // Clear the result to process the next chunk of data result = ''; } } catch (error) { if ( === 'AbortError') { ('Stream aborted'); this.message[this.-1].msg='Stream aborted'; } else { ('Streaming error:', error); this.message[this.-1].msg='Stream error'+error; } } this.message[this.-1].dot=''; this.({ role: 'assistant',//[-1].user,//"GPT", content: this.message[this.-1].msg }) setTimeout(()=>{ this.scrollToBottom(); },50); }else{ this.=''; } ("txt_suiwen").disabled=""; ("txt_suiwen").focus(); } }, beforeDestroy() { // Aborting streaming requests on component destruction if (this.controller) { this.(); } } } </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>