如何使用Streamlit构建一个简单的应用程序,该应用程序允许用户上传图像并与聊天模型进行交互。我们将逐步分析代码的各个部分,并解释其功能。
代码结构
以下是应用程序的主要代码结构:
import streamlit as st
import ollama
from PIL import Image
from io import BytesIO
# 设置可用的模型列表
available_models = [
'yi',
'dolphin-mistral:7b-v2.6-fp16',
'openhermes:7b-mistral-v2.5-q6_K',
'ifioravanti/neuralbeagle14-7b:7b-q8_0',
'llava',
'yi:34b',
'yi:latest',
'qwen:7b',
'mistral:latest',
'qwen:latest',
'qwen2:7b',
'llama2:latest',
'sqlcoder:latest',
'qwen2.5-coder:latest',
'qwen2.5:latest',
]
# 在侧边栏中选择模型
model_choice = st.sidebar.selectbox('选择模型:', available_models)
# 用户输入问题的文本框
user_input = st.text_area('提出一个问题:', '', height=150)
# 自定义样式
st.markdown("""
<style>
.dashed-box {
border: 2px dashed #FFA500;
border-radius: 10px;
padding: 10px;
margin: 10px 0;
}
</style>
""", unsafe_allow_html=True)
# 文件上传组件,允许用户上传图片
uploaded_file = st.file_uploader("上传图片", type=['jpg','png','jpeg'])
# 如果用户上传了文件,打开并显示图片
if uploaded_file:
img = Image.open(uploaded_file)
# 将RGBA图像转换为RGB
if img.mode == 'RGBA':
img = img.convert('RGB')
st.image(img, caption='上传的图片', use_column_width=True)
# 提交按钮
if st.button('提交'):
# 调试信息
st.write("提交按钮被点击")
st.write(f"用户输入: {user_input}")
messages = [{'role': 'user', 'content': user_input}]
# 如果用户上传了图片,将其转换为字节流
if uploaded_file:
with BytesIO() as buffer:
img.save(buffer, 'jpeg')
img_bytes = buffer.getvalue()
messages[0]['images'] = [img_bytes]
st.write("图片已转换为字节流")
# 调用Ollama模型进行聊天
try:
response = ollama.chat(
model=model_choice,
messages=messages,
stream=True
)
st.write("Ollama 模型调用成功")
except Exception as e:
st.error(f"调用 Ollama 模型时出错: {e}")
final_response = ''
# 处理模型返回的响应
for chunk in response:
if 'content' in chunk.get('message', {}):
final_response += chunk['message']['content']
# 显示最终响应
st.markdown(f'<div class="dashed-box">{final_response}</div>', unsafe_allow_html=True)
## 可用模型及其用途
以下是可用模型及其用途:
1. **yi**:
- 通用语言模型,适用于文本生成和对话系统。
2. **dolphin-mistral:7b-v2.6-fp16**:
- 基于 Mistral 架构的高效文本生成模型,使用半精度浮点数以提高计算效率。
3. **openhermes:7b-mistral-v2.5-q6_K**:
- 多语言处理模型,适合多语言对话和翻译任务。
4. **ifioravanti/neuralbeagle14-7b:7b-q8_0**:
- 专注于图像和文本结合的模型,适用于视觉问答和图像描述生成。
5. **llava**:
- 多模态模型,能够处理文本和图像输入,适合图像分类和文本生成。
6. **yi:34b**:
- 大规模语言模型,适用于复杂的自然语言处理任务,生成高质量文本和深入对话。
7. **yi:latest**:
- 最新版本的 yi 模型,提供最新的功能和改进。
8. **qwen:7b**:
- 适用于对话生成和文本理解的模型,具有 7 亿个参数。
9. **mistral:latest**:
- 最新版本的 Mistral 模型,适用于高效的文本生成。
10. **qwen:latest**:
- 最新版本的 qwen 模型,适用于对话生成和文本理解。
11. **qwen2:7b**:
- 适用于对话生成和文本理解的改进版本,具有 7 亿个参数。
12. **llama2:latest**:
- 最新版本的 Llama 模型,适用于多种自然语言处理任务。
13. **sqlcoder:latest**:
- 专注于 SQL 查询生成和数据库交互的模型。
14. **qwen2.5-coder:latest**:
- 适用于代码生成和编程任务的改进版本。
15. **qwen2.5:latest**:
- 最新版本的 qwen2.5 模型,适用于对话生成和文本理解。
代码解析
1. 导入必要的库
首先,我们导入了streamlit
、ollama
、PIL
和BytesIO
库。这些库分别用于构建Web应用、调用聊天模型、处理图像和处理字节流。
2. 设置可用模型列表
我们定义了一个可用模型的列表,用户可以在侧边栏中选择不同的模型进行聊天。
3. 用户输入和文件上传
应用程序提供了一个文本框,用户可以在其中输入问题。同时,用户还可以上传图像文件,支持的格式包括jpg
、png
和jpeg
。
4. 显示上传的图像
如果用户上传了图像,应用程序会打开并显示该图像。如果图像是RGBA格式,则会将其转换为RGB格式,以确保兼容性。
5. 提交按钮和模型调用
用户点击“提交”按钮后,应用程序会收集用户输入和上传的图像,并将其转换为字节流。接着,应用程序调用Ollama聊天模型,并处理返回的响应。
6. 显示最终响应
最后,应用程序将模型的响应以自定义样式显示在页面上,提供良好的用户体验。
结论
通过这段代码,我们成功构建了一个简单的图像上传和聊天模型应用。用户可以方便地与模型进行交互,并上传图像以丰富对话内容。希望这篇文章能帮助你理解如何使用Streamlit和Ollama构建类似的应用程序。
效果
相关代码:gitee