4.3 项目前端页面#
一、Streamlit介绍#
Streamlit 是一个开源 Python 库。它旨在让数据科学家和工程师能够以最少的代码和配置，将他们的数据分析和模型展示转化为交互式的 Web 应用。Streamlit 的设计目标是简单易用，同时保持高度的灵活性和可定制性。 官网地址: https://streamlit.io
二、Streamlit特点#
- 简单易用：
- Streamlit 的 API 非常简洁，只需要几行代码就可以创建一个基本的应用程序。
- 无需复杂的前端开发知识，Python 代码直接决定了应用的界面和功能。
- 快速开发：
- 支持热重载，代码修改后自动更新应用，无需手动重启服务器。
- 丰富的内置组件和功能，可以快速实现常见的数据可视化和交互操作。
- 高度可定制：
- 支持自定义 CSS 样式，可以对应用的外观进行精细调整。
- 可以集成第三方库和框架，如 Plotly、Altair、Pandas 等，扩展应用的功能。
- 强大的社区支持：
- 官方文档详细且拥有一个活跃的社区，提供了大量的示例和教程，帮助用户快速上手。
三、Streamlit常见组件#
Streamlit 提供了许多内置组件，用于创建交互式界面
- 文本和标题：st.write(), st.title(), st.header(), st.subheader()等
- 输入控件：st.text_input(), st.slider(), st.selectbox(), st.checkbox(), st.button()等
- 显示数据：st.dataframe(), st.table(), st.json()等
- 显示图表：st.pyplot(), st.altair_chart(), st.bokeh_chart(), st.plotly_chart()等
- 布局：st.sidebar(), st.columns(), st.expander()等
详见官网: https://docs.streamlit.io/develop/api-reference
四、Streamlit入门案例#
案例1: 制作一个传智教育用户注册平台,提示用户输入用户名,密码,年龄,性别,出生日期,身高等信息。
效果如下：
示例代码:
> import streamlit as st
> from datetime import date
>
> # 设置页面标题
> st.title("传智教育用户注册平台")
>
> # 添加分隔线
> st.divider()
>
> # 用户名输入框
> username = st.text_input(label='请输入用户名:', max_chars=50, key='username')
>
> # 密码输入框
> password = st.text_input(label='请输入密码:', type='password', max_chars=50, key='password')
>
> # 年龄输入框
> age = st.number_input(label='年龄', min_value=0, max_value=200, step=1, key='age')
>
> # 性别选择框
> gender = st.selectbox(label='性别', options=['请选择...', '男', '女', '妖'], index=0, key='gender')
>
> # 是否已婚单选框
> st.radio(label='是否已婚', options=['是', '否'], horizontal=True, key='married')
>
> # 出生日期选择器
> birthdate = st.date_input(label='出生日期', min_value=date(1900, 1, 1), max_value=date.today(), key='birthdate')
>
> # 身高输入框
> height = st.slider(label='身高', min_value=40.0, max_value=300.0, value=175.0, step=0.1, key='height')
>
> # 提交按钮
> submit_button = st.button(label='注册')
>
> # 处理表单提交
> if submit_button:
> st.success(f"注册成功")
> print(f"注册成功！以下是您的信息:\n用户名: {username}\n密码: {password}\n年龄: {age}\n性别: {gender}\n出生日期: {birthdate}\n身高: {height} cm")
> 五、Streamlit构建聊天机器人页面:#
注意: 由于还没有讲解python如何调用后端模型,此处只是简单实现页面效果 效果如下：
代码如下:
> # 1.导包
> import streamlit as st
>
> # 2.设置页面标题
> st.title("黑马智聊机器人")
> # 3.设置页面分隔线
> st.divider()
> # 4.为了好的体验
> # 先让AI说一句话
> st.chat_message("assistant").write("你好，我是黑马智聊机器人，请问有什么可以帮你的？")
> # 5.用户提问输入框
> prompt = st.chat_input('请您输入您的问题:')
> # TODO 注意: 以后用户的提问是页面获取的prompt写入下方write(),本次先写固定的问题
> st.chat_message("user").write('你好')
> # 6.AI回答
> # TODO 注意: 以后AI的回答通过调用大模型获取的答案,放到下面write(),本次先写固定的答案
> st.chat_message("assistant").write('你好,很高兴与你聊天!')
>