vue实现流式请求ollama api进行ai聊天问答效果代码-html代码-BFW代码库

vue实现流式请求ollama api进行ai聊天问答效果代码

代码语言：html

所属分类：其他

代码描述：vue实现流式请求ollama api进行ai聊天问答效果代码，自动将markdown换换成html，流式输出打字效果，可中断。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Chat with API</title>
    <script  type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/showdown.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
    <style>
        /* 样式可以根据你的需求进一步优化 */
        #historylist {
            min-height: 200px;
            height: 400px;
            background: white;
            overflow-y: scroll;
            border: 1px solid #ccc;
        }
        .mesay, .aisay {
            padding: 10px;
            margin: 10px;
            border-radius: 5px;
        }
        .mesay {
            background-color: aliceblue;
            text-align: right;
        }
        .aisay {
            background-color: #d0e7ff;
            text-align: left;
        }
        #inputpannel{
            display: flex;
        }
        #inputword {
            flex-grow: 1;
            margin-right: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        #inputword:focus {
            resize: none;
          
            border-color:#007bff;
           
        }
        #sendButton {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        #sendButton:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>聊天记录</h2>
        <div id="historylist">
            <div v-for="msg in newmess" :class="{'mesay': msg.role === 'user', 'aisay': msg.role === 'system'}" v-html="msg.content">
                {{ msg.content }}
            </div>
        </div>
        <div id="inputpannel">
            <textarea id="inputword" v-model="userInput" @keydown.enter.prevent="sendMessage"></textarea>
            <button id="sendButton" @click="sendMessage">{{btntext}}</button>
        </div>
    </div>

    <script>


        var converter = new showdown.Converter();
      
       new Vue({
            el: '#app',
            data() {
                return {
                    messages: [],
                    btntext:"发送",
                    userInput: '',
                    apiUrl: 'http://localhost:11434/v1/chat/completions',
                    controller: null // for aborting fetch call
                };
            },
            computed: {
            // `doubleCount` 是一个计算属性，它的依赖会被自动追踪
                newmess() {
                    let temparr=[];
                   this.messages.forEach(element => {
                 
                
                    temparr.push({role:element.role,content:converter.makeHtml(element.content)});

             
                   });
                   return temparr;
                }
            },
            methods: {
                async sendMessage() {
                    if(this.btntext=="终止"){

                        this.abortRequest();
                        this.btntext="发送";
                        return;
                    }
                    const userInputTrimmed = this.userInput.trim();
                    if (userInputTrimmed === '') return;

                 

                    this.messages.push({ content: userInputTrimmed, role: 'user' });
                    this.messages.push({ content: "", role: 'system' });
                    
                    this.controller = new AbortController(); // Create a new controller instance
                    const { signal } = this.controller; // Extract signal from controller
    .........完整代码请登录后点击上方下载按钮下载查看