internlm2-chat-1.8b在Ollama中如何实现流式输出？API调用与前端对接教程
本文介绍了如何在星图GPU平台上自动化部署【书生·浦语】internlm2-chat-1.8b镜像，并实现流式输出的API调用与前端对接。该镜像专为智能对话场景设计，可应用于构建实时聊天机器人，提升用户体验和交互效率。
·
internlm2-chat-1.8b在Ollama中如何实现流式输出？API调用与前端对接教程
1. 学习目标与前置知识
本文将带你一步步实现internlm2-chat-1.8b模型在Ollama中的流式输出功能，并完成API调用与前端界面的完整对接。学完本教程后，你将能够：
- 理解流式输出的工作原理和优势
- 掌握Ollama API的流式调用方法
- 构建一个简单的前端聊天界面
- 实现实时的对话交互体验
前置要求：只需要基础的Python和JavaScript知识，不需要深度学习背景。我们将从最基础的安装部署开始，确保每个步骤都清晰易懂。
2. 环境准备与Ollama部署
2.1 安装Ollama
首先确保你的系统已经安装了Ollama。如果还没有安装，可以通过以下命令快速安装：
# Linux/macOS 安装命令
curl -fsSL https://ollama.ai/install.sh | sh
# Windows 安装（需要先安装WSL2）
winget install Ollama.Ollama
2.2 拉取internlm2-chat-1.8b模型
安装完成后，通过命令行拉取所需的模型：
ollama pull internlm2:1.8b
这个命令会自动下载模型文件，下载时间取决于你的网络速度。模型大小约为3.5GB，请确保有足够的磁盘空间。
2.3 验证模型安装
使用以下命令测试模型是否正常工作：
ollama run internlm2:1.8b "你好，介绍一下你自己"
如果看到模型返回的自我介绍，说明安装成功。
3. 理解流式输出的价值
流式输出与传统的批量输出有显著区别，它能带来更好的用户体验：
传统输出方式：用户发送请求后需要等待模型完全生成所有内容，才能看到结果。对于长文本生成，可能需要等待数十秒。
流式输出方式：模型生成一个字就立即返回一个字，用户可以实时看到生成过程，感觉更加流畅自然。
在实际应用中，流式输出特别适合：
- 聊天对话场景
- 长文本生成
- 实时翻译应用
- 代码自动补全
4. API流式调用实战
4.1 基本的Python调用示例
让我们从最简单的Python调用开始。Ollama提供了RESTful API接口，默认端口是11434。
import requests
import json
def simple_chat(message):
"""基础的非流式调用"""
url = "http://localhost:11434/api/generate"
payload = {
"model": "internlm2:1.8b",
"prompt": message,
"stream": False # 非流式模式
}
response = requests.post(url, json=payload)
return response.json()["response"]
# 测试调用
result = simple_chat("你好，请介绍一下上海")
print(result)
4.2 实现流式输出调用
现在我们来实现真正的流式输出，这是本教程的核心部分：
import requests
import json
def stream_chat(message):
"""流式调用函数"""
url = "http://localhost:11434/api/generate"
payload = {
"model": "internlm2:1.8b",
"prompt": message,
"stream": True # 关键参数：启用流式输出
}
# 发送请求并处理流式响应
response = requests.post(url, json=payload, stream=True)
full_response = ""
for line in response.iter_lines():
if line:
# 解析每行JSON数据
data = json.loads(line.decode('utf-8'))
if "response" in data:
chunk = data["response"]
print(chunk, end='', flush=True) # 实时打印
full_response += chunk
return full_response
# 测试流式调用
print("开始流式输出：")
result = stream_chat("写一篇关于人工智能的短文")
print(f"\n\n完整回复：{result}")
4.3 处理流式响应的关键技巧
在实际应用中，你可能需要更精细地控制流式输出：
def advanced_stream_chat(message, callback=None):
"""增强的流式调用，支持回调函数"""
url = "http://localhost:11434/api/generate"
payload = {
"model": "internlm2:1.8b",
"prompt": message,
"stream": True,
"options": {
"temperature": 0.7, # 控制创造性
"top_p": 0.9, # 控制多样性
"max_length": 2048 # 最大生成长度
}
}
try:
response = requests.post(url, json=payload, stream=True, timeout=30)
full_response = ""
for line in response.iter_lines():
if line:
data = json.loads(line.decode('utf-8'))
if "response" in data:
chunk = data["response"]
full_response += chunk
# 如果有回调函数，实时传递生成的内容
if callback:
callback(chunk)
# 检查是否完成
if data.get("done", False):
break
return full_response
except requests.exceptions.Timeout:
print("请求超时，请检查Ollama服务是否正常运行")
return None
except Exception as e:
print(f"发生错误：{e}")
return None
# 使用示例
def print_chunk(chunk):
"""简单的回调函数，实时打印内容"""
print(chunk, end='', flush=True)
print("开始高级流式输出：")
result = advanced_stream_chat("解释一下机器学习的基本概念", callback=print_chunk)
5. 前端界面对接实战
5.1 简单的HTML聊天界面
创建一个基础的聊天界面来展示流式输出的效果：
<!DOCTYPE html>
<html>
<head>
<title>InternLM2 聊天演示</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
#chat-container { border: 1px solid #ccc; height: 400px; overflow-y: auto; padding: 10px; margin-bottom: 10px; }
.message { margin-bottom: 10px; padding: 8px; border-radius: 8px; }
.user { background-color: #e3f2fd; text-align: right; }
.bot { background-color: #f5f5f5; }
#input-area { display: flex; gap: 10px; }
#user-input { flex-grow: 1; padding: 8px; }
button { padding: 8px 16px; }
</style>
</head>
<body>
<h1>InternLM2 聊天演示</h1>
<div id="chat-container"></div>
<div id="input-area">
<input type="text" id="user-input" placeholder="输入你的问题...">
<button onclick="sendMessage()">发送</button>
</div>
<script>
const chatContainer = document.getElementById('chat-container');
const userInput = document.getElementById('user-input');
function addMessage(text, isUser = false) {
const messageDiv = document.createElement('div');
messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;
messageDiv.textContent = text;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
async function sendMessage() {
const message = userInput.value.trim();
if (!message) return;
userInput.value = '';
addMessage(message, true);
// 创建正在输入中的提示
const typingIndicator = document.createElement('div');
typingIndicator.className = 'message bot';
typingIndicator.id = 'typing-indicator';
typingIndicator.textContent = '思考中...';
chatContainer.appendChild(typingIndicator);
chatContainer.scrollTop = chatContainer.scrollHeight;
try {
const response = await fetch('http://localhost:8000/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: message })
});
// 移除思考提示
document.getElementById('typing-indicator').remove();
if (response.ok) {
const data = await response.json();
addMessage(data.response);
} else {
addMessage('抱歉，发生了错误');
}
} catch (error) {
document.getElementById('typing-indicator').remove();
addMessage('连接失败，请检查后端服务');
}
}
// 支持回车键发送
userInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
</script>
</body>
</html>
5.2 实现流式输出的前端界面
上面的基础界面还不够完善，让我们实现真正的流式效果：
<!-- 在前面的HTML基础上，更新JavaScript部分 -->
<script>
// ... 前面的代码保持不变 ...
async function sendMessage() {
const message = userInput.value.trim();
if (!message) return;
userInput.value = '';
addMessage(message, true);
// 创建流式输出的容器
const botMessage = document.createElement('div');
botMessage.className = 'message bot';
botMessage.id = 'streaming-message';
chatContainer.appendChild(botMessage);
chatContainer.scrollTop = chatContainer.scrollHeight;
try {
const response = await fetch('http://localhost:8000/chat-stream', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: message })
});
if (!response.ok) {
throw new Error('请求失败');
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
let accumulatedText = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
const chunk = decoder.decode(value);
const lines = chunk.split('\n');
for (const line of lines) {
if (line.startsWith('data: ')) {
try {
const data = JSON.parse(line.slice(6));
if (data.response) {
accumulatedText += data.response;
botMessage.textContent = accumulatedText;
chatContainer.scrollTop = chatContainer.scrollHeight;
}
} catch (e) {
console.log('解析JSON失败:', e);
}
}
}
}
// 完成后移除id，避免重复
botMessage.removeAttribute('id');
} catch (error) {
botMessage.textContent = '抱歉，发生了错误: ' + error.message;
}
}
</script>
6. 完整的后端API实现
6.1 使用Flask构建后端服务
我们需要一个后端服务来连接前端和Ollama：
from flask import Flask, request, Response, jsonify
from flask_cors import CORS
import requests
import json
app = Flask(__name__)
CORS(app) # 允许跨域请求
@app.route('/chat', methods=['POST'])
def chat():
"""非流式聊天接口"""
data = request.get_json()
message = data.get('message', '')
if not message:
return jsonify({'error': '消息不能为空'}), 400
try:
response = requests.post(
'http://localhost:11434/api/generate',
json={
'model': 'internlm2:1.8b',
'prompt': message,
'stream': False
},
timeout=60
)
result = response.json()
return jsonify({'response': result['response']})
except Exception as e:
return jsonify({'error': str(e)}), 500
@app.route('/chat-stream', methods=['POST'])
def chat_stream():
"""流式聊天接口"""
data = request.get_json()
message = data.get('message', '')
if not message:
return jsonify({'error': '消息不能为空'}), 400
def generate():
try:
# 连接到Ollama的流式接口
response = requests.post(
'http://localhost:11434/api/generate',
json={
'model': 'internlm2:1.8b',
'prompt': message,
'stream': True
},
stream=True,
timeout=60
)
# 转发Ollama的流式响应
for line in response.iter_lines():
if line:
yield f"data: {line.decode('utf-8')}\n\n"
except Exception as e:
yield f"data: {json.dumps({'error': str(e)})}\n\n"
return Response(generate(), mimetype='text/event-stream')
if __name__ == '__main__':
app.run(port=8000, debug=True)
6.2 增强的后端服务
为了更好的用户体验，我们可以添加一些增强功能：
# 在之前的Flask应用基础上添加以下功能
from datetime import datetime
import threading
# 简单的对话历史管理
conversation_histories = {}
@app.route('/chat-with-history', methods=['POST'])
def chat_with_history():
"""带历史记录的流式聊天"""
data = request.get_json()
message = data.get('message', '')
session_id = data.get('session_id', 'default')
if not message:
return jsonify({'error': '消息不能为空'}), 400
# 获取或创建对话历史
if session_id not in conversation_histories:
conversation_histories[session_id] = []
# 构建包含历史的提示
history = conversation_histories[session_id]
full_prompt = build_prompt_with_history(message, history)
def generate():
try:
response = requests.post(
'http://localhost:11434/api/generate',
json={
'model': 'internlm2:1.8b',
'prompt': full_prompt,
'stream': True
},
stream=True,
timeout=60
)
full_response = ""
for line in response.iter_lines():
if line:
data = json.loads(line.decode('utf-8'))
if 'response' in data:
full_response += data['response']
yield f"data: {json.dumps(data)}\n\n"
# 保存到历史记录
conversation_histories[session_id].append({
'user': message,
'bot': full_response,
'timestamp': datetime.now().isoformat()
})
# 限制历史记录长度
if len(conversation_histories[session_id]) > 10:
conversation_histories[session_id] = conversation_histories[session_id][-10:]
except Exception as e:
yield f"data: {json.dumps({'error': str(e)})}\n\n"
return Response(generate(), mimetype='text/event-stream')
def build_prompt_with_history(current_message, history):
"""构建包含历史记录的提示"""
prompt = "以下是我们之前的对话：\n"
for turn in history:
prompt += f"用户: {turn['user']}\n"
prompt += f"助手: {turn['bot']}\n"
prompt += f"\n当前问题: {current_message}\n助手:"
return prompt
# 添加清理过期会话的定时任务
def cleanup_old_sessions():
"""定期清理超过1小时未活动的会话"""
while True:
threading.Event().wait(3600) # 每小时检查一次
current_time = datetime.now()
expired_sessions = []
for session_id, history in conversation_histories.items():
if history:
last_time = datetime.fromisoformat(history[-1]['timestamp'])
if (current_time - last_time).total_seconds() > 3600:
expired_sessions.append(session_id)
for session_id in expired_sessions:
del conversation_histories[session_id]
# 启动清理线程
cleanup_thread = threading.Thread(target=cleanup_old_sessions, daemon=True)
cleanup_thread.start()
7. 常见问题与解决方案
7.1 连接问题排查
问题：无法连接到Ollama服务
- 检查Ollama是否正常运行：
ollama serve - 确认端口11434是否被占用
- 检查防火墙设置
问题：模型加载失败
- 确认模型名称正确：
internlm2:1.8b - 检查模型是否已下载：
ollama list
7.2 性能优化建议
提高响应速度：
- 调整生成参数，减少
max_length - 使用GPU加速（如果可用）
- 优化提示词，让模型更直接回答问题
减少内存占用：
- 限制并发请求数量
- 定期清理对话历史
- 使用更小的模型参数
7.3 流式输出特有的问题
问题：前端接收数据不完整
- 检查SSE（Server-Sent Events）实现是否正确
- 确认网络连接稳定
问题：流式输出中断
- 增加超时时间设置
- 添加重试机制
8. 总结与下一步建议
通过本教程，你已经掌握了internlm2-chat-1.8b在Ollama中实现流式输出的完整流程。从基础的环境部署到复杂的前后端对接，现在你应该能够：
- 熟练使用Ollama API进行流式和非流式调用
- 构建完整的聊天界面并实现实时交互效果
- 处理各种边界情况和性能优化
下一步学习建议：
- 尝试集成更多模型功能，如多轮对话、上下文记忆
- 探索模型参数调优，获得更好的生成效果
- 考虑添加用户认证和对话持久化存储
- 学习如何部署到生产环境
流式输出技术能够显著提升用户体验，特别是在需要长时间等待的AI交互场景中。掌握这项技术将为你的项目带来明显的竞争优势。
获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
3
0- 0
已为社区贡献12条内容
所有评论(0)