Streamlit 构建大语言模型 (LLM) web 界面

文章目录

  • Streamlit 构建大语言模型 (LLM) web 界面
    • 选择Streamlit的原因
      • 原理
      • 流程
      • streamlit布局示例代码
      • 聊天机器人示例代码(简化版)
    • Streamlit在ChatGLM3-6B中的应用

Streamlit 构建大语言模型 (LLM) web 界面

选择Streamlit的原因

  1. 易用性:Streamlit 提供了一个直观且易于使用的环境,让数据科学家和机器学习工程师能够快速构建数据驱动的应用程序,而不需要专业的前端开发技能。对于大语言模型这类复杂模型,Streamlit 可以帮助开发者迅速搭建展示模型效果及交互界面的Web应用,方便用户输入查询、模型预测及结果展示。

  2. 实时互动:通过Streamlit,可以将大语言模型集成到Web应用中,实现实时交互式体验,用户可以直接在浏览器中与模型进行对话或提交请求,并立即得到模型生成的结果。

  3. 简化部署:Streamlit 应用可以通过一行命令部署到云端服务,大大降低了将大语言模型部署为Web服务的门槛,便于模型的分享和使用。

原理

  • 基于Python API:Streamlit 库基于Python编写,允许用户用Python脚本描述UI元素和数据处理逻辑。
  • 响应式设计:Streamlit 应用是动态生成的,每当用户交互或数据发生变化时,都会重新渲染整个页面,更新结果显示。
  • 集成模型调用:在Streamlit应用中,开发者可以方便地调用大语言模型API或本地模型来处理用户输入,然后将模型输出结果展示在网页上。

流程

  1. 安装Streamlit:首先确保Python环境中已安装Streamlit库。
  2. 创建应用脚本:编写Python脚本,定义UI组件(如文本输入框、按钮、文本显示区域等)。
  3. 集成大语言模型:在脚本中添加调用大语言模型的方法,通常是封装好模型预测API调用。
  4. 处理用户输入:监听用户在界面上的操作,如点击按钮或输入问题,触发模型调用。
  5. 展示模型输出:将模型返回的结果通过Streamlit的API显示在网页上。
  6. 运行应用:使用 streamlit run your_script.py 命令启动应用,Streamlit会自动在本地开启一个Web服务器,并在浏览器中打开应用。

streamlit布局示例代码

以下展示了如何自定义你的 Streamlit 应用布局:

import streamlit as stst.set_page_config(layout="wide")st.title('How to layout your Streamlit app')with st.expander('About this app'):st.write('This app shows the various ways on how you can layout your Streamlit app.')st.image('https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png', width=250)st.sidebar.header('Input')
user_name = st.sidebar.text_input('What is your name?')
user_emoji = st.sidebar.selectbox('Choose an emoji', ['', '😄', '😆', '😊', '😍', '😴', '😕', '😱'])
user_food = st.sidebar.selectbox('What is your favorite food?', ['', 'Tom Yum Kung', 'Burrito', 'Lasagna', 'Hamburger', 'Pizza'])st.header('Output')col1, col2, col3 = st.columns(3)with col1:if user_name != '':st.write(f'👋 Hello {user_name}!')else:st.write('👈  Please enter your **name**!')with col2:if user_emoji != '':st.write(f'{user_emoji} is your favorite **emoji**!')else:st.write('👈 Please choose an **emoji**!')with col3:if user_food != '':st.write(f'🍴 **{user_food}** is your favorite **food**!')else:st.write('👈 Please choose your favorite **food**!')
  • 逐行解释

创建 Streamlit 应用时要做的第一件事就是将 streamlit 库导入为 st

import streamlit as st

我们首先令页面的显示模式变为宽屏模式,页面内容将占据浏览器的全部宽度进行显示。

st.set_page_config(layout="wide")

接下来,我们为这个 Streamlit 应用设置一个标题。

st.title('How to layout your Streamlit app')

在应用标题下方创建一个标题名为 About this app 的可折叠区域。在展开时,我们可以看到其其中包含的额外细节。

with st.expander('About this app'):st.write('This app shows the various ways on how you can layout your Streamlit app.')st.image('https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png', width=250)

通过在 text_inputselectbox 之前加上 st.sidebar 命令,我们将用于接收用户输入的组件放入侧边栏内。用户输入或选择的数值将被赋值并存储在 user_nameuser_emojiuser_food 变量之中。

st.sidebar.header('Input')
user_name = st.sidebar.text_input('What is your name?')
user_emoji = st.sidebar.selectbox('Choose an emoji', ['', '😄', '😆', '😊', '😍', '😴', '😕', '😱'])
user_food = st.sidebar.selectbox('What is your favorite food?', ['', 'Tom Yum Kung', 'Burrito', 'Lasagna', 'Hamburger', 'Pizza'])

最后,我们使用 st.columns 命令创建三列,分别名为 col1col2col3。然后我们使用独立的 with 语句将内容放入每列之中。其中我们创建了三个条件分支语句,根据用户是否在侧边栏中提供了输入来显示不同的文字。默认情况下显示的均为 else 语句下的内容。如果用户提供了对应的输入,则会显示在 Output 标题下方。

st.header('Output')col1, col2, col3 = st.columns(3)with col1:if user_name != '':st.write(f'👋 Hello {user_name}!')else:st.write('👈  Please enter your **name**!')with col2:if user_emoji != '':st.write(f'{user_emoji} is your favorite **emoji**!')else:st.write('👈 Please choose an **emoji**!')with col3:if user_food != '':st.write(f'🍴 **{user_food}** is your favorite **food**!')else:st.write('👈 Please choose your favorite **food**!')

值得注意的是,这里我们用 f-字符串来将固定的信息与用户的输入数值相结合。

聊天机器人示例代码(简化版)

import streamlit as st
from transformers import pipeline# 加载预训练的大语言模型
model = pipeline('text-generation', model="gpt-2")def generate_text(prompt):response = model(prompt=prompt, max_length=100, num_return_sequences=1)return response[0]['generated_text']# 创建Web界面组件
st.title("大语言模型交互界面")
user_input = st.text_input("请输入您的问题或话题:")if st.button("生成文本"):generated_text = generate_text(user_input)st.write("模型生成的回答:", generated_text)

在这个例子中,我们使用了Hugging Face Transformers库加载了GPT-2模型,并通过Streamlit创建了一个简单的文本输入框和按钮。当用户输入问题并点击“生成文本”按钮时,模型会生成对应的回复,并在页面上显示结果。

Streamlit在ChatGLM3-6B中的应用

"""
This script is a simple web demo based on Streamlit, showcasing the use of the ChatGLM3-6B model. For a more comprehensive web demo,
it is recommended to use 'composite_demo'.Usage:
- Run the script using Streamlit: `streamlit run web_demo_streamlit.py`
- Adjust the model parameters from the sidebar.
- Enter questions in the chat input box and interact with the ChatGLM3-6B model.Note: Ensure 'streamlit' and 'transformers' libraries are installed and the required model checkpoints are available.
"""import os
import streamlit as st
import torch
from transformers import AutoModel, AutoTokenizerMODEL_PATH = os.environ.get('MODEL_PATH', 'THUDM/chatglm3-6b')
TOKENIZER_PATH = os.environ.get("TOKENIZER_PATH", MODEL_PATH)st.set_page_config(page_title="ChatGLM3-6B Streamlit Simple Demo",page_icon=":robot:",layout="wide"
)@st.cache_resource
def get_model():tokenizer = AutoTokenizer.from_pretrained(TOKENIZER_PATH, trust_remote_code=True)model = AutoModel.from_pretrained(MODEL_PATH, trust_remote_code=True, device_map="auto").eval()return tokenizer, model# 加载Chatglm3的model和tokenizer
tokenizer, model = get_model()if "history" not in st.session_state:st.session_state.history = []
if "past_key_values" not in st.session_state:st.session_state.past_key_values = Nonemax_length = st.sidebar.slider("max_length", 0, 32768, 8192, step=1)
top_p = st.sidebar.slider("top_p", 0.0, 1.0, 0.8, step=0.01)
temperature = st.sidebar.slider("temperature", 0.0, 1.0, 0.6, step=0.01)buttonClean = st.sidebar.button("清理会话历史", key="clean")
if buttonClean:st.session_state.history = []st.session_state.past_key_values = Noneif torch.cuda.is_available():torch.cuda.empty_cache()st.rerun()for i, message in enumerate(st.session_state.history):if message["role"] == "user":with st.chat_message(name="user", avatar="user"):st.markdown(message["content"])else:with st.chat_message(name="assistant", avatar="assistant"):st.markdown(message["content"])with st.chat_message(name="user", avatar="user"):input_placeholder = st.empty()
with st.chat_message(name="assistant", avatar="assistant"):message_placeholder = st.empty()prompt_text = st.chat_input("请输入您的问题")
if prompt_text:input_placeholder.markdown(prompt_text)history = st.session_state.historypast_key_values = st.session_state.past_key_valuesfor response, history, past_key_values in model.stream_chat(tokenizer,prompt_text,history,past_key_values=past_key_values,max_length=max_length,top_p=top_p,temperature=temperature,return_past_key_values=True,):message_placeholder.markdown(response)st.session_state.history = historyst.session_state.past_key_values = past_key_values

这段代码是一个基于Streamlit构建的与预训练大语言模型ChatGLM3-6B交互的简单演示应用。以下是代码逐段解析:

  1. 导入所需库:

    • os: 用于从操作系统环境变量获取模型路径。
    • streamlit as st: 引入Streamlit库,用于构建Web应用程序界面。
    • torch: PyTorch深度学习框架,用于模型的加载和计算。
    • transformers: Hugging Face Transformers库,提供了预训练模型和tokenizer的加载接口。
  2. 定义环境变量:

    • MODEL_PATHTOKENIZER_PATH 从环境变量获取,如果没有设置则使用默认值。
  3. 设置Streamlit页面配置:

    • st.set_page_config 设置页面标题、图标以及布局方式。
  4. 使用装饰器 @st.cache_resource 缓存资源函数 get_model(),以避免每次调用时都重新加载模型和tokenizer:

    • 函数内部使用 AutoTokenizer.from_pretrainedAutoModel.from_pretrained 加载预训练的tokenizer和模型,同时设定模型处于评估模式 (model.eval())。
  5. 初始化会话状态(session state):

    • 存储聊天历史记录 history 和模型需要的过去关键值 past_key_values
  6. 创建侧边栏滑块控制最大生成长度 max_length、采样策略中的 top_p 和温度参数 temperature

  7. 清理会话历史功能:

    • 当用户点击清理按钮时,清空历史记录、过去关键值,并尝试释放GPU缓存,然后刷新页面。
  8. 展示聊天历史:

    • 遍历 history 列表,分别按照用户消息和助手(模型生成)消息样式展示过去的聊天内容。
  9. 用户输入区域:

    • 创建两个空白占位符,分别用于接收用户输入和展示模型生成的回答。
  10. 用户输入事件处理:

    • 获取用户输入的文字内容 prompt_text
    • 将用户输入加入到聊天历史 history 中。
    • 调用模型的 stream_chat 方法,传入用户输入、历史记录、参数设置等,生成模型回复。
    • 将模型回复添加到聊天历史并更新会话状态中的历史记录和过去关键值。

整体而言,该代码实现了一个具有记忆功能的在线聊天应用,用户可以在其中与预训练的大规模语言模型ChatGLM3-6B进行交互,模型根据用户的输入生成相应的回答,并以聊天形式展示在界面上。同时,用户还可以调整模型生成文本的参数,如最大生成长度、采样策略和随机性温度等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/795038.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cisco Unified Communications Manager (CallManager) 15.0 SU1 - 统一通信与协作

Cisco Unified Communications Manager (CallManager) 15.0 SU1 - 统一通信与协作 思科统一通信管理器 (CallManager) 请访问原文链接:https://sysin.org/blog/cisco-ucm-15/,查看最新版。原创作品,转载请保留出处。 作者主页:…

基于开源软件构建存储解决方案的思考

近来看了一些IBM的存储产品的资料,有一些收获。 依据存储软件和搭配硬件,IBM存储产品的组合,大致分类如下: 自研存储软件,搭配自研专有硬件自研存储软件,搭配通用服务器硬件,比如IBM Storage S…

需求分析及设计定义

背景 经过不断的折腾,一切过程都是为了呈现输出,这个阶段就是要交付需求和方案的环节了,很多失败的项目就是上来就到这个环节,倒着捣鼓,先写个文档,做个原型,甚至提出方案,然后再和…

Redis 未授权访问漏洞

出现以下函数 eval函数:因为脚本内容必须通过eval来执行 2.luaopen_io函数:因为此攻击必须通过执行luaopen_io函数来获取 io库 3、.popen函数:恶意命令必须通过io库中的popen函数来执行,为什么拦截规则不是io.popen&#xff0…

状态优先级

文章目录 状态优先级1. 进程状态1.1 进程状态查看1.2 僵尸进程1.3 孤儿进程 2.进程优先级2.1 基本概念2.2 查看系统进程2.3 PRI and NI2.4 PRI vs NI 3. 查看进程优先级的命令3.1 top命令更改nice3.2 其他概念 状态优先级 1. 进程状态 看看Linux内核源代码怎么说 为了弄明白…

深入浅出 -- 系统架构之分布式系统底层的一致性

在分布式领域里,一致性成为了炙手可热的名词,缓存、数据库、消息中间件、文件系统、业务系统……,各类分布式场景中都有它的身影,因此,想要更好的理解分布式系统,必须要理解“一致性”这个概念。 其实关于…

Java NIO Selector选择器简介

文章目录 前言一、IO多路复用二、Selector如何确保多个通道的操作协调一致三、NIO中怎样实现通道的非阻塞IO操作四、网络服务器和客户端简单代码示例服务器端代码客户端端代码 前言 Selector是Java NIO(New I/O)中的核心组件之一,用于检查一…

云原生架构(微服务、容器云、DevOps、不可变基础设施、声明式API、Serverless、Service Mesh)

前言 读完本文,你将对云原生下的核心概念微服务、容器云、DevOps、Immutable Infrastructure、Declarative-API、Serverless、Service Mesh 等有一个相对详细的了解,帮助你快速掌握云原生的核心和要点。 因题主资源有限, 这里会选用部分云服务商的组件进…

LeetCode:1026. 节点与其祖先之间的最大差值(DFS Java)

目录 1026. 节点与其祖先之间的最大差值 题目描述: 实现代码与解析: DFS 原理思路: 1026. 节点与其祖先之间的最大差值 题目描述: 给定二叉树的根节点 root,找出存在于 不同 节点 A 和 B 之间的最大值 V&#xff…

【面经】3月29日 美团/美团平台/后端/一面/1h

面试官先介绍自己部门的业务:存储中心,涉及到大量数据的离线处理(亿级别)。 手撕(删除链表倒数第k个节点) 自我介绍 项目介绍(还没说完被打断了,面试官说你这个感觉就是把功能说了一…

11-1(2)-CSS 背景+CSS 精灵图

个人主页:学习前端的小z 个人专栏:HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 文章目录 一、CSS 背景1 背景颜色2 背景色半透明3 背景图片4 背景平铺5 背景图片位置6 …

【数据结构与算法】(一)数据结构相关的基本概念

文章目录 【数据结构与算法】(一)数据结构相关的基本概念前言1.1 数据结构的研究内容1.2 基本概念和术语1.2.1 数据、数据元素、数据项和数据对象1.2.2 数据结构1.2.3 数据类型和抽象数据类型 1.3 抽象数据类型的表示与实现1.4 算法和算法分析1.4.1 算法…

中国电子学会(CEIT)2021年09月真题C语言软件编程等级考试三级(含详细解析答案)

中国电子学会(CEIT)考评中心历届真题(含解析答案) C语言软件编程等级考试三级 2021年09月 编程题五道 总分:100分一、菲波那契数列(20分) 菲波那契数列是指这样的数列:数列的第一个和第二个数都为1,接下来每个数都等于前面2个数之和。给出一个正整数a,要求菲波…

深度剖析:网络安全中的红蓝对抗策略

红蓝对抗 红蓝对抗服务方案 在蓝队服务中,作为攻击方将开展对目标资产的模拟入侵,寻找攻击路径,发现安全漏洞和隐患。除获取目标系统的关键信息(包括但不限于资产信息、重要业务数据、代码或管理员账号等)外&#x…

9(10)-3-CSS 定位

个人主页:学习前端的小z 个人专栏:HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 文章目录 CSS 定位1 定位组成2 定位模式3 边偏移4 静态定位 static5 相对定位 relative…

如何在iPhone上恢复永久删除的照片?

2007 年,Apple Inc. 推出了这款震撼人心的智能手机,后来被称为 iPhone。您会惊讶地发现,迄今为止,Apple Inc. 已售罄 7 亿台 iPhone 设备。根据 2023 年 8 月的一项调查数据,95% 的智能手机利润都落入了苹果公司的口袋…

ubuntu同步网络时间

安装ntpdate sudo apt-get update sudo apt-get install ntpdate设置系统时间与网络时间同步 sudo ntpdate cn.pool.ntp.org设置时区亚洲上海 sudo cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime设置时间为24小时制 echo "LC_TIMEen_DK.UTF-8" >>/…

Django--方法

path() 方法 一个路由配置模块就是一个urlpatterns列表,列表的每个元素都是一项path,每一项path都是以path()的形式存在。 path()方法可以接收4个参数,其中前2个是必须的:route和view,以及2个可选的参数:k…

跨平台的组播测试工具mping、udp_sender及udp_reciver的源码及使用教程

文章目录 1.前言2.mping工具编译3.mping工具使用3.1 参数说明3.1 组播播发(-s)3.1 组播播发(-r)3.3 Linux下mping测试 4.Linux组播udp_sender及udp_reciver使用4.1 udp_sender源码4.1 udp_reciver源码4.3 编译方法4.4 测试使用4.4…

android11 SystemUI入門之KeyguardPatternView解析

view层级树为&#xff1a; 被包含在 keyguard_host_view.xml中 。 <?xml version"1.0" encoding"utf-8"?> <!-- This is the host view that generally contains two sub views: the widget viewand the security view. --> <com.andro…