您现在的位置是:首页 > 技术教程 正文

LLM大语言模型(二):Streamlit 无需前端经验也能画web页面

admin 阅读: 2024-03-30
后台-插件-广告管理-内容页头部广告(手机)

目录

问题

Streamlit是什么?

怎样用Streamlit画一个LLM的web页面呢? 

文本输出

页面布局

滑动条

按钮

对话框

输入框

总结


问题

假如你是一位后端开发,没有任何的web开发经验,那如何去实现一个LLM的对话交互页面呢?

答案是"Streamlit"

Streamlit是什么?

Streamlit是一个开源Python库。

可以轻松创建和共享用于机器学习和数据科学的漂亮的自定义web应用程序。

只需几分钟,您就可以构建和部署功能强大的数据应用程序。

一句话说明白:用python画web页面

怎样用Streamlit画一个LLM的web页面呢? 

下文将以ChatGLM3的demo为例做介绍。

文本输出

使用Streamlit的markdown组件

st.markdown(message["content"])

markdown组件支持HTML标签(官方不建议这么做),help信息等。 

st.markdown(body, unsafe_allow_html=False, *, help=None)

页面布局

整体分为左和右。

左侧又分为超参数调节、“清理会话历史”按钮。

右侧又分为对话展示框、输入框。

我们来看如何用python实现此布局。

左侧布局:

  1. # 左侧超参数调节组件
  2. # st表示streamlit
  3. # 设置max_length、top_p和temperature
  4. max_length = st.sidebar.slider("max_length", 0, 32768, 8192, step=1)
  5. top_p = st.sidebar.slider("top_p", 0.0, 1.0, 0.8, step=0.01)
  6. temperature = st.sidebar.slider("temperature", 0.0, 1.0, 0.6, step=0.01)
  7. # 清理会话历史按钮
  8. buttonClean = st.sidebar.button("清理会话历史", key="clean")
  9. if buttonClean:
  10. st.session_state.history = []
  11. st.session_state.past_key_values = None
  12. if torch.cuda.is_available():
  13. torch.cuda.empty_cache()
  14. st.rerun()

滑动条

超参数调节使用的滑动条是streamlit的sidebar.slider组件,可以设置最小值、最大值、默认值、step、帮助信息等

  1. st.slider(label, min_value=None, max_value=None,
  2. value=None, step=None, format=None,
  3. key=None, help=None, on_change=None,
  4. args=None, kwargs=None, *, disabled=False,
  5. label_visibility="visible")

按钮

清理会话历史按钮用的是streamlit的button组件,可以设置button展示名称,key组件唯一标识等。返回bool,用于判断按钮是否被触发。

  1. st.button(label, key=None,
  2. help=None, on_click=None,
  3. args=None, kwargs=None, *,
  4. type="secondary", disabled=False,
  5. use_container_width=False)

对话框

右侧是人机对话框,将对话历史逐条渲染,分为user和assistant消息,使用Streamlit的chat_message组件

  1. # 渲染聊天历史记录
  2. for i, message in enumerate(st.session_state.history):
  3. if message["role"] == "user":
  4. with st.chat_message(name="user", avatar="user"):
  5. st.markdown(message["content"])
  6. else:
  7. with st.chat_message(name="assistant", avatar="assistant"):
  8. st.markdown(message["content"])

Streamlit的chat_message组件,隶属于chat组件分类。如果name是 "human"/"user" or "ai"/"assistant",将自动启用系统内置的展示图标等。纯纯的为了LLM对话框而设计的。

st.chat_message(name, *, avatar=None)

输入框

输入框使用了Streamlit的chat_input组件,获取到input后,调用后端LLM生成新的对话内容。

  1. # 初始化输入框和输出框
  2. with st.chat_message(name="user", avatar="user"):
  3. input_placeholder = st.empty()
  4. with st.chat_message(name="assistant", avatar="assistant"):
  5. message_placeholder = st.empty()
  6. # 获取用户输入
  7. prompt_text = st.chat_input("请输入您的问题")
  8. # 如果用户输入了内容,则生成回复
  9. if prompt_text:
  10. input_placeholder.markdown(prompt_text)
  11. history = st.session_state.history
  12. past_key_values = st.session_state.past_key_values
  13. for response, history, past_key_values in model.stream_chat(
  14. tokenizer,
  15. prompt_text,
  16. history,
  17. past_key_values=past_key_values,
  18. max_length=max_length,
  19. top_p=top_p,
  20. temperature=temperature,
  21. return_past_key_values=True,
  22. ):
  23. message_placeholder.markdown(response)
  24. # 更新历史记录和past key values
  25. st.session_state.history = history
  26. st.session_state.past_key_values = past_key_values

总结

Streamlit提供了一种非常便捷且高效的方式,让后端开发也能轻松的画出来简单的web页面。

特别适合LLM这种页面比较简单的场景。

当然它的大头在data science的数据可视化场景。

【推荐阅读】

  1. LLM大语言模型(一):ChatGLM3-6B本地部署-CSDN博客
标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索