streamlit:如何快速构建一个应用,不会前端也能写出好看的界面

news2024/11/27 2:34:05

通过本文你可以了解到:

  • 如何安装streamlit,运行起来第一个demo
  • 熟悉streamlit的基本语法,常用的一些组件
  • 使用streamlit库构建应用

大模型学习参考:

  1. 大模型学习资料整理:如何从0到1学习大模型,搭建个人或企业RAG系统,如何评估与优化(更新中…)

欢迎大家访问个人博客网址:https://www.maogeshuo.com,博主努力更新中…

文章目录

  • 前言
  • streamlit 安装
  • streamlit组件介绍
    • 常用组件
    • 高级组件
  • 案例分享
    • 搭建简单对话界面
    • 使用Qwen大模型对话
      • 代码
      • 结果展示

前言

在这里插入图片描述

Streamlit是一个开源的Python框架,供数据科学家和AI/ML工程师使用,只需几行代码即可交付交互式数据应用程序。

官方文档地址:streamlit doc

经验:

  • 官方给出了非常多的组件使用案例,在编写代码时请结合官方文档+pycharm的代码提示+函数注释,函数注释中一班都给出了组件的具体使用
  • 修改完布局后,刷新访问网站,可以实时查看更改后的结果,无需重新streamlite run demo.py

streamlit 安装

pip install streamlit
streamlit hello

执行完streamlit hello后,点击 http://localhost:8501
在这里插入图片描述
查看demo
在这里插入图片描述

streamlit组件介绍

Streamlit是一个用于构建数据科学界面的Python库,它使得创建交互式应用程序变得非常简单。

常用组件

Streamlit 提供了一系列常用组件,用于构建交互式应用程序。以下是常见的 Streamlit 组件:

  1. st.write(): 用于在应用程序中显示文本、数据框架、图表等内容。

  2. st.title(): 添加应用程序的标题。

  3. st.header()st.subheader(): 添加标题和子标题。

  4. st.text(): 显示纯文本。

  5. st.markdown(): 使用 Markdown 语法添加格式化文本。

  6. st.image(): 显示图像。

  7. st.pyplot(): 显示 Matplotlib 图表。

  8. st.altair_chart(): 显示 Altair 图表。

  9. st.dataframe(): 显示数据框。

  10. st.table(): 显示表格。

  11. st.selectbox(): 显示下拉框,用户可以从选项中进行选择。

  12. st.multiselect(): 显示多选框,用户可以从选项中进行多选。

  13. st.slider(): 显示滑块,用户可以调整数值。

  14. st.text_input(): 显示文本输入框,用户可以输入文本。

  15. st.number_input(): 显示数字输入框,用户可以输入数字。

  16. st.text_area(): 显示多行文本输入框。

  17. st.checkbox(): 显示复选框,用户可以勾选或取消勾选。

  18. st.radio(): 显示单选按钮,用户可以从选项中进行单选。

  19. st.button(): 显示按钮,用户可以点击执行相关操作。

  20. st.file_uploader(): 显示文件上传器,用户可以上传文件。

  21. st.date_input()st.time_input(): 显示日期和时间输入框。

  22. st.color_picker(): 显示颜色选择器,用户可以选择颜色。

  23. st.spinner(): 显示加载状态的旋转器。

这些组件可以帮助你构建出功能丰富的交互式应用程序,根据需要选择合适的组件来实现你的应用程序功能。

下面是一些Streamlit中常用的组件及其简要介绍:

  1. st.title(): 用于添加应用程序的标题。

    import streamlit as st
    st.title('My Streamlit App')
    
  2. st.write(): 可以将文本、数据框架、图表等内容写入应用程序。

    st.write('Hello, world!')
    
  3. st.header()st.subheader(): 用于添加标题和子标题。

    st.header('This is a header')
    st.subheader('This is a subheader')
    
  4. st.text(): 显示纯文本。

    st.text('This is some text.')
    
  5. st.markdown(): 可以使用Markdown语法添加格式化文本。

    st.markdown('**This** is some Markdown *text*.')
    
  6. st.image(): 显示图像。

    from PIL import Image
    image = Image.open('example.jpg')
    st.image(image, caption='Sunset', use_column_width=True)
    
  7. st.pyplot()st.altair_chart(): 显示Matplotlib和Altair图表。

    import matplotlib.pyplot as plt
    plt.plot([1, 2, 3])
    st.pyplot()
    
    import altair as alt
    chart = alt.Chart(data).mark_bar().encode(
        x='category',
        y='count'
    )
    st.altair_chart(chart, use_container_width=True)
    
  8. st.dataframe(): 显示数据框。

    import pandas as pd
    df = pd.DataFrame({'Column 1': [1, 2, 3], 'Column 2': [4, 5, 6]})
    st.dataframe(df)
    
  9. st.selectbox(): 显示下拉框,用户可以从选项中进行选择。

    option = st.selectbox('Choose an option', ['Option 1', 'Option 2', 'Option 3'])
    
  10. st.slider(): 显示滑块,用户可以调整数值。

    value = st.slider('Select a value', 0, 100, 50)
    
  11. st.button(): 显示按钮,用户可以点击执行相关操作。

    if st.button('Click me'):
        st.write('Button clicked!')
    

这些是Streamlit中常用的一些组件,可以帮助你构建出功能丰富的交互式数据科学应用程序。

如上常用组件,运行代码streamlit run streamlit_hello.py:

import numpy as np
import streamlit as st
import pandas as pd

st.title('My Streamlit App')

st.write('Hello, world!')

st.header('This is a header')
st.subheader('This is a subheader')

st.text('This is some text.')

st.markdown('**This** is some Markdown *text*.')

from PIL import Image

image = Image.open('../data/stream_demo/onetwo.jpeg')
st.image(image, caption='Sunset', use_column_width=True)

import matplotlib.pyplot as plt

plt.plot([1, 2, 3])
st.pyplot()

import altair as alt
chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])
chart = alt.Chart(chart_data).mark_bar().encode(
    x='category',
    y='count'
)
c = (
    alt.Chart(chart_data)
        .mark_circle()
        .encode(x="a", y="b", size="c", color="c", tooltip=["a", "b", "c"])
        )
st.altair_chart(c, use_container_width=True)


df = pd.DataFrame({'Column 1': [1, 2, 3], 'Column 2': [4, 5, 6]})
st.dataframe(df)

option = st.selectbox('Choose an option', ['Option 1', 'Option 2', 'Option 3'])

value = st.slider('Select a value', 0, 100, 50)

if st.button('Click me'):
    st.write('Button clicked!')

在这里插入图片描述
在这里插入图片描述

高级组件

在 Streamlit 中,除了 st.cache 之外,还有一些其他的缓存相关组件,如 st.cache_datast.cache_resource,它们分别用于缓存数据和资源,以下是它们的介绍:

  1. st.cache_data:

    • st.cache_data 用于缓存数据,通常用于将数据加载到内存中,并在应用程序的多个部分之间共享。这对于那些频繁访问的数据,例如配置文件、数据集等非常有用。
    • 使用方法与 st.cache 类似,你可以将需要缓存的数据加载函数与 @st.cache_data 装饰器一起使用。
    • st.cache 不同,st.cache_data 并不会保存函数的输入参数,它只会缓存函数的输出结果。因此,如果数据的加载方式不依赖于函数的输入参数,则可以使用 st.cache_data 来缓存数据。
  2. st.cache_resource:

    • st.cache_resource 用于缓存外部资源,例如文件、图像、音频等,通常用于减少重复的网络请求或文件读取操作。
    • 你可以使用 @st.cache_resource 装饰器来缓存资源加载函数,这样在多次访问同一资源时,Streamlit 将会从缓存中加载,而不是重新加载资源。
    • st.cachest.cache_data 类似,st.cache_resource 也可以接受参数,用于根据不同的参数值缓存不同的资源。

这些缓存组件提供了不同的功能,可以根据具体的需求选择合适的缓存方式。通过合理地使用缓存,可以显著提高 Streamlit 应用程序的性能和响应速度,同时减少资源消耗。

案例分享

搭建简单对话界面

import streamlit as st

if __name__ == '__main__':
    st.title('Chat with me :sunflower:')

    # 初始化history
    if "messages" not in st.session_state:
        st.session_state.messages = []

    # 展示对话
    for msg in st.session_state.messages:
        with st.chat_message(msg['role']):
            st.markdown(msg["content"])

    # React to user input
    if prompt := st.chat_input("Say something"):
        # Display user message in chat message container
        with st.chat_message("user"):
            st.markdown(prompt)
        # Add user message to chat history
        st.session_state.messages.append({"role": "user", "content": prompt})

    response = f"Echo: {prompt}"
    # Display assistant response in chat message container
    with st.chat_message("assistant"):
        st.markdown(response)
    # Add assistant response to chat history
    st.session_state.messages.append({"role": "assistant", "content": response})

在这里插入图片描述

使用Qwen大模型对话

采用了Qwen大模型量化后的q2版本,具体参考代码,注释也比较全。

对话方式两种:

  • 普通输出
  • 流式输出

python库使用:

  • 基础库:os、sys、time
  • llama_cpp:加载大模型
  • dotenv:加载.env配置的环境变量

代码

import os
import sys
import time

import streamlit as st
from llama_cpp import Llama
from dotenv import load_dotenv, find_dotenv

BASE_DIR = os.path.dirname(__file__)
sys.path.append(BASE_DIR)

# 加载env环境中内容
_ = load_dotenv(find_dotenv())


def get_llm_model(
        prompt: str = None,
        model: str = None,
        temperature: float = 0.0,
        max_token: int = 2048,
        n_ctx: int = 512,
        stream: bool = False):
    """
    根据模型名称去加载模型,返回response数据
    :param stream:
    :param prompt:
    :param model:
    :param temperature:
    :param max_token:
    :param n_ctx:
    :return:
    """
    if model in ['Qwen_q2']:
        model_path = os.environ[model]
        llm = Llama(model_path=model_path, n_ctx=n_ctx)
        start = time.time()
        response = llm.create_chat_completion(
            messages=[
                {
                    "role": "system",
                    "content": "你是一个智能超级助手,请用专业的词语回答问题,整体上下文带有逻辑性,如果不知道,请不要乱说",
                },
                {
                    "role": "user",
                    "content": "{}".format(prompt)
                },
            ],
            temperature=temperature,
            max_tokens=max_token,
            stream=stream
        )
        cost = time.time() - start
        print(f"模型生成时间:{cost}")
        print(f"大模型回复:\n{response}")
        if not stream:
            return response['choices'][0]['message']['content']
        else:
            return response


def get_llm_model_with_stream(
        prompt: str = None,
        model: str = None,
        temperature: float = 0.0,
        max_token: int = 2048,
        n_ctx: int = 512,
        stream: bool = True):
    """
    流式输出结果
    :param prompt:
    :param model:
    :param temperature:
    :param max_token:
    :param n_ctx:
    :param stream:
    :return:
    """
    response = ""
    start_time = time.time()
    stream_results = get_llm_model(prompt, model, temperature, max_token, n_ctx, stream)
    for res in stream_results:
        content = res["choices"][0].get("delta", {}).get("content", "")
        response += content
        yield content
    cost_time = time.time() - start_time
    print(f"cost_time: {cost_time}, response: {response}")


if __name__ == '__main__':
    st.title('Chat with Qwen :sunflower:')

    # 初始化history
    if "messages" not in st.session_state:
        st.session_state.messages = []

    # 展示对话
    for msg in st.session_state.messages:
        with st.chat_message(msg['role']):
            st.markdown(msg["content"])

    # React to user input
    if prompt := st.chat_input("Say something"):
        # Display user message in chat message container
        with st.chat_message("user"):
            st.markdown(prompt)
        # Add user message to chat history
        st.session_state.messages.append({"role": "user", "content": prompt})

    # 普通方式输出
    # if prompt is not None:
    #     response = get_llm_model(prompt=prompt, model="Qwen_q2")
    #     # Display assistant response in chat message container
    #     with st.chat_message("assistant"):
    #         st.markdown(response)
    #     # Add assistant response to chat history
    #     st.session_state.messages.append({"role": "assistant", "content": response})

    # 流式输出
    if prompt is not None:
        stream_res = get_llm_model_with_stream(prompt=prompt, model="Qwen_q2")
        with st.chat_message("assistant"):
            content = st.write_stream(stream_res)
        print("流式输出:", content)
        st.session_state.messages.append({"role": "assistant", "content": content})


# streamlit run chat_with_qwen.py

结果展示

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

鞠小云张霖浩闪耀北京广播电视台春晚发布会,豪门姐弟感爆棚

昨日,2025年北京广播电视台“追梦春晚”全国海选发布会在杭州举行,中国内地青年女演员鞠小云同人气幕后张霖浩,受主办方盛情邀请出席本次活动。从现场流露出的照片中可以看出,鞠小云一袭白色长裙灵动温婉素雅,而张霖浩…

springboot与flowable(1):介绍、Flowable-ui使用

一、工作流引擎使用场景 工作流在企业管理系统中是高频使用的功能,一个最常见的例子是请假加班申请与审批的过程。事实上,工作流引擎能支持的业务场景远远不止单据审批,几乎所有涉及到业务流转、多人按流程完成工作的场景背后都可以通过工作流…

Vue3【二】 VSCode需要安装的Vue语法插件

VSCode需要安装的 适配Vue3的插件 Vue-Official插件安装

A股所有公司ZL申请与创新绩效分析(2000-2022年)

数据简介:专利是创新成果的主要载体,专利所包含的技术、经济、法律等信息主要通过结构化专利专利文献著录项的形式加以呈现。专利申请与创新绩效已成为衡量上市公司竞争力的重要指标。目前,各国ZSCQ管理部门开发管理的开放式平台是获取ZL数据…

PyQt5 多进程 多任务 多线程实现进度条功能 无边框 含源码

概述: 在项目 中我们常遇到,大量计算或者加载数据时,需要用到多线程,此时只能等待,我们这个时间需要添加一下进度条,告诉用户当前需要等待,这时间就需要用到多线程和等待进度条; 效…

【STM32】GPIO输出(江科大)

一、GPIO简介 1.GPIO:通用输入输出口 2.可配置为8种输入输出模式 3.引脚电平:0-3.3V(输出最大3.3V),部分引脚可容忍5V(输入,有FT) 4.输出模式下,可控制端口输出高低电平…

94、二叉树的迭代遍历

实现对二叉树的前后序非递归遍历 题解: 递归的实现就是:递去,归来。每一次递归调用都会把函数的局部变量、参数值和返回地址等压入调用栈中,然后递归返回的时候,从栈顶弹出上一次递归的各项参数,所以这就是…

MySQL系列-安装配置使用说明(MAC版本)

1、前言 本文将介绍MySQL的安装配置以及基本语法操作说明 环境:mac 版本:MySQL 8.0.28 之前电脑安装卸载过,后面在装的时候遇到一些问题,用了四五天才解决,主要是参考 https://blog.csdn.net/zz00008888/article/deta…

IPv6 自动配置流程图

IPv6 自动配置流程图 IPv6 自动配置生命周期 Mark

人事信息管理系统(Java+MySQL)

一、项目背景 在现代企业中,管理大量员工的工作信息、薪资、请假、离职等事务是一项非常繁琐和复杂的任务。传统的手工管理方式不仅效率低下,而且容易出错。为了提高人事管理的效率,减少人工操作带来的错误,企业迫切需要一个高效…

乒乓球烧拍日记之一结构分析

先上图 这是这两年烧过的球拍,最贵的是palio C2 80元左右,大部分球拍儿都是十多元,其中横拍儿是小朋友用的,直拍是我自己用的。照片中球拍儿的分类是按结构特点和材料来分的,最下面的两个剑轮球拍是成品拍儿。胶皮也都…

基于运动控制卡的圆柱坐标机械臂设计

1 方案简介 介绍一种基于运动控制卡制作一款scara圆柱坐标的机械臂设计方案,该方案控制器用运动控制卡制作一台三轴机械臂,用于自动抓取和放料操作。 2 组成部分 该机械臂的组成部分有研华运动控制卡,触摸屏,三轴圆柱坐标的平面运…

多目标融合参数搜索

多目标融合 权重分类目人群。 trick normlize 不同Score之间含义、量级和分布差异较大:评分计算的不同部分的意义、范围和分布存在显著差异,这使得直接比较或融合它们的结果变得困难。显式反馈(如点赞率)存在用户间差异&#…

2、数据操作

索引从0开始 一行 [1,:] 一列[:,1] 子区域:[1:3,1:] 第一行和第二行,从第一列开始 [::3,::2] 每3行一跳,每2列一跳 torch.tensor([[1,2,3,4]] 按位置算 xy ,x-y x*y x**y(幂) 1、广播机制形状不一样,…

2021 hnust 湖科大 操作系统课设 报告+原代码+指导书+流程图源文件

2021 hnust 湖科大 操作系统课设 报告原代码指导书流程图源文件 详情 目录 验证类实验: 1 实验一:Windows进程管理 1 一、 实验题目: 1 二、 实验目的 1 三、 实验内容 1 四、 实验结果与分析 2 五、 小结与心得体会 5 实验二:L…

【前端】详解JavaScript事件代理(事件委托)

😎 作者介绍:我是程序员洲洲,一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 🤓 同时欢迎大家关注其他专栏,我将分享Web前后端开发、人工智能、机器学习、深…

设计模式- 责任链模式(行为型)

责任链模式 责任链模式是一种行为模式,它为请求创建一个接收者对象的链,解耦了请求的发送者和接收者。责任链模式将多个处理器串联起来形成一条处理请求的链。 图解 角色 抽象处理者: 一个处理请求的接口,可以通过设置返回值的方…

Python私教张大鹏 Vue3整合AntDesignVue之Dropdown 下拉菜单

基本用法 核心代码&#xff1a; <template><a-dropdown><a class"ant-dropdown-link" click.prevent>Hover me<DownOutlined /></a><template #overlay><a-menu><a-menu-item><a href"javascript:;"…

IIR滤波器的结构比较(Direct I and Direct II Form)

在 IIR 滤波器的设计和实现中&#xff0c;直接 I 型和直接 II 型结构的主要区别在于计算顺序和存储延迟项的方式。 直接I型结构 特点&#xff1a; 级联形式&#xff1a;直接I型结构的传递函数可以表示为两个级联部分&#xff1a;一个由分子系数组成的部分和一个由分母系数组…

Kaggle -- Titanic - Machine Learning from Disaster

新手kaggle之旅&#xff1a;1 . 泰坦尼克号 使用一个简单的决策树进行模型构建&#xff0c;达到75.8%的准确率&#xff08;有点低&#xff0c;但是刚开始&#xff09; 完整代码如下&#xff1a; import pandas as pd import numpy as npdf pd.read_csv("train.csv&quo…