原生js实现调用ollama api接口流式ai对话聊天效果代码
代码语言:html
所属分类:其他
代码描述:原生js实现调用ollama api接口流式ai对话聊天效果代码,流式打字输出,可中断输出。使用await fetch进行请求,模型可以在ollama中下载,这个代码提供了ui和交互效果。
代码标签: 原生 js 调用 ollama api 接口 流式 ai 对话 聊天
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <style> #historylist{ min-height:200px; height: 400px; background:white; overflow-y: scroll; /* 允许垂直滚动 */ line-height: 20px; } .mesay{ background-color: aliceblue; padding: 10px; margin-top: 10px; } .aisay{ background-color:#d0e7ff; padding: 10px; } /* 文本区域样式 */ #inputword { width: 100%; flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 16px; resize: none; /* 允许垂直调整大小 */ } /* 按钮悬停效果 */ #inputword:focus { border-color: #007bff; /* 设置为你想要的颜色,这里以Bootstrap的蓝色为例 */ outline: none; /* 可选:移除默认的轮廓线 */ box-shadow: 0 0 8px rgba(0, 123, 255, 0.2); /* 可选:添加阴影效果 */ } /* 按钮样式 */ #myButton { padding: 10px 20px; border: none; border-radius: 4px; background-color: #007bff; color: white; font-size: 16px; cursor: pointer; width: 200px; transition: background-color 0.3s ease; } /* 按钮悬停效果 */ #myButton:hover { background-color: #0056b3; } #inputpannel{ display: flex; } </style> </head> <body> <div> 请部署到本地localhost下运行 </div> <h2>聊天记录</h2> <div id="historylist"></div> <div id="inputpannel"><textarea id="inputword" ></textarea><button id="myButton">发送</button></div> <script type="module"> var gid = 1; var controller = null; // 获取按钮元素 const button = document.getElementById('myButton'); const inputword=document.getElementById('inputword'); async function sendRequest(words) { // 准备要发送的数据 controller=new AbortController(); const data = { "stream": true, "model": "gemma:2b", "messages": [{ "role": "system", "content": "你是一个非常专业的助手" }, { "role": "user", "content": words } ] }; //setTimeout(() => controller.abort(), 2000); try { // 使用fetch发送请求 const response = await fetch('http://localhost:11434/v1/chat/completions', { method: 'POST', // 请求方法 signal: controller.signal, headers: { 'Content-Type': 'application/json' // 设置请求头 }, body: JSON.stringify(data) // 请求体 }); // 检查响应状态码 if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}${response.statusText}`); } // 将响应体设置为可读流,并逐步输出数据到可写流 const reader = response.body.getReader(); const decoder = new TextDecoder(); const textDecoder = new TextEncoder(); while (true) { const { done, value } = await reader.read(); if (do.........完整代码请登录后点击上方下载按钮下载查看
网友评论0