AI-Ollama使用llama模型vue2中流式响应，模仿AI提问逐字渲染，呈现打印机效果

岂不闻

已于 2025-03-14 08:44:16 修改

阅读量794

点赞数 13

分类专栏： AI 文章标签： ai 前端

于 2025-03-06 17:13:33 首次发布

本文链接：https://blog.youkuaiyun.com/2301_76671906/article/details/146074796

版权

AI 专栏收录该内容

5 篇文章

订阅专栏

1.前言

在vue2中非流式响应数据，请求响应完成后，将返回文本数据渲染。在Ollama API模型交互中，通过设置stream的状态为true开启流式响应。

{
  "model": "<model-name>",  // 模型名称
  "prompt": "<input-text>", // 输入的提示词
  "stream": false,          // 是否启用流式响应（默认 false）
  "options": {              // 可选参数
    "temperature": 0.7,     // 温度参数
    "max_tokens": 100       // 最大 token 数
  }
}

参考文档Ollama API 交互 | 菜鸟教程https://www.runoob.com/ollama/ollama-api.html

2.流式响应-API.js

const API_URL = 'http://localhost:11434'; // Ollama默认的API端口是11434

export const generateText = async function*(prompt){
    try {
        // fetch发送请求
        const response = await fetch(`${API_URL}/api/generate`, {
            method: 'POST',
            body: JSON.stringify({
                model: 'llama3.2', // 指定模型
                prompt: prompt,   // 输入的提示文本
                stream: true,     // 启用流式传输
            }),
        });
        // 检测校验是否成功
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        // 获取响应体的ReadableStream的读取器
        const reader = response.body.getReader();
        while (true) {
            // 读取下一个二进制数据块
            const { done, value } = await reader.read();

            //数据传输完成
            if (done) break;

            // 二进制数据块解码为字符串
            const chunk = new TextDecoder().decode(value);

            // 转换为json格式的文本流 yield返回
            yield JSON.parse(chunk);
        }
    } 
    catch (error) {
        // 记录生成文本过程中的错误
        console.error('Error generating text:', error);
        throw error;
    }
};

fetch API: 使用 fetch 发送 POST 请求，并启用流式传输 (stream: true)。
response.body.getReader(): 获取响应体的 ReadableStream 的读取器，用于逐步读取流式数据。
await reader.read(): 读取下一个二进制数据块，返回一个包含 done 和 value 的对象。done 表示是否读取完毕，value 是读取到的二进制数据。
new TextDecoder().decode(value): 将二进制数据解码为字符串。
yield JSON.parse(chunk): 将字符串解析为 JSON 对象，并通过 yield 返回，使得调用方可以逐步处理流式数据
在 fetch 中处理流式数据的关键在于使用 response.body.getReader() 来逐步读取数据块，并通过 yield 返回解析后的 JSON 对象。

3. 组件调用

<template>
	<div>
		<div class="textContainer">{{ generatedText }}</div>
		<textarea v-model="prompt" placeholder="输入你的问题" style="width: 600px;"></textarea>
		<button @click="generateText">发送</button>
	</div>
</template>
<script>
import { generateText } from '../api/api.js'; // 引入你的API服务文件

export default {
	data() {
		return {
			prompt: '',
			generatedText: ''
		};
	},
	methods: {
		// 调用函数 传入输入提示文本 获取数据流
		async generateText() {
			try {
				const dataStream = generateText(this.prompt);
				// for await循环逐步处理数据流中的每个分块
				for await (const chunk of dataStream) {
					// 是否包含响应数据
					if (chunk.response) {
						// 分块数据流响应数据逐步添加到渲染文本
						this.generatedText += chunk.response; // 逐步渲染返回的数据
					}
				}
			}
			catch (error) {
				console.error('Error generating text:', error);
			}
		},
	}
};
</script>
<style scoped>
	.textContainer {
		height: 400px;
		color: violet;
		border: 2px solid red;
		border-radius: 10px;
		margin: 100px;
	}
</style>