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

North_D2024-04-04 11:59

文章目录

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 st

st.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_input 和 selectbox 之前加上 st.sidebar 命令，我们将用于接收用户输入的组件放入侧边栏内。用户输入或选择的数值将被赋值并存储在 user_name、user_emoji 和 user_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 命令创建三列，分别名为 col1、col2 和 col3。然后我们使用独立的 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-字符串来将固定的信息与用户的输入数值相结合。

聊天机器人示例代码（简化版）

python 复制代码 
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, AutoTokenizer

MODEL_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 = None

max_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 = None
    if 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.history
    past_key_values = st.session_state.past_key_values
    for 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 = history
    st.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_PATH 和 TOKENIZER_PATH 从环境变量获取，如果没有设置则使用默认值。

  3. 设置Streamlit页面配置：

    • st.set_page_config 设置页面标题、图标以及布局方式。

  4. 使用装饰器 @st.cache_resource 缓存资源函数 get_model()，以避免每次调用时都重新加载模型和tokenizer：

    • 函数内部使用 AutoTokenizer.from_pretrained 和 AutoModel.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进行交互，模型根据用户的输入生成相应的回答，并以聊天形式展示在界面上。同时，用户还可以调整模型生成文本的参数，如最大生成长度、采样策略和随机性温度等。

相关推荐
chaojihaomai2 小时前
AI电商商品图生成中的材质保真问题——扩散模型重建优先级分析与锁定式方案
人工智能·材质
大模型探索者4 小时前
2026 企业智能体平台选型指南：从通用到行业深耕，怎么选？
大数据·人工智能
深圳行云创新5 小时前
北极星知识图谱平台｜太空越来越“拥挤”，知识图谱如何预测空间碎片碰撞风险？
人工智能·知识图谱
Am-Chestnuts5 小时前
国产AI多轮对话归档与多格式导出实践
人工智能·word
麻瓜生活睁不开眼5 小时前
Android16修改全局桌面视图边框四直角显示为弧边圆角
android·java·深度学习
workflower6 小时前
装备企业的 AI 路线图
人工智能·深度学习·机器学习·设计模式·机器人
AKAMAI6 小时前
Linode接口及默认防火墙现已全面开放使用
人工智能·云计算
前端开发江鸟7 小时前
RAG 回答错了，问题到底出在召回、重排，还是生成？
人工智能
美狐美颜SDK开放平台7 小时前
直播app开发如何实现主播级美颜效果？美颜sdk开发方案详解
人工智能·音视频·美颜sdk·视频美颜sdk·美颜api
东方小月7 小时前
从零开发一个 Coding Agent（四）：使用状态机校验大模型事件流
前端·人工智能·后端
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02GitHub 镜像站点032026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片04国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）05微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新06AI科技热点日报 | 2026年07月01日07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费10几个好用的ip纯净度检测网站