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

代码语言:html

所属分类:其他

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

代码标签: vue 流式 请求 ollama api 行ai 聊天 问答

下面为部分代码预览,完整代码请点击下载或在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;
            b.........完整代码请登录后点击上方下载按钮下载查看

网友评论0