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

通过本文你可以了解到:

  • 如何安装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 pdst.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 Imageimage = Image.open('../data/stream_demo/onetwo.jpeg')
st.image(image, caption='Sunset', use_column_width=True)import matplotlib.pyplot as pltplt.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 stif __name__ == '__main__':st.title('Chat with me :sunflower:')# 初始化historyif "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 inputif prompt := st.chat_input("Say something"):# Display user message in chat message containerwith st.chat_message("user"):st.markdown(prompt)# Add user message to chat historyst.session_state.messages.append({"role": "user", "content": prompt})response = f"Echo: {prompt}"# Display assistant response in chat message containerwith st.chat_message("assistant"):st.markdown(response)# Add assistant response to chat historyst.session_state.messages.append({"role": "assistant", "content": response})

在这里插入图片描述

使用Qwen大模型对话

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

对话方式两种:

  • 普通输出
  • 流式输出

python库使用:

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

代码

import os
import sys
import timeimport streamlit as st
from llama_cpp import Llama
from dotenv import load_dotenv, find_dotenvBASE_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() - startprint(f"模型生成时间:{cost}")print(f"大模型回复:\n{response}")if not stream:return response['choices'][0]['message']['content']else:return responsedef 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 += contentyield contentcost_time = time.time() - start_timeprint(f"cost_time: {cost_time}, response: {response}")if __name__ == '__main__':st.title('Chat with Qwen :sunflower:')# 初始化historyif "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 inputif prompt := st.chat_input("Say something"):# Display user message in chat message containerwith st.chat_message("user"):st.markdown(prompt)# Add user message to chat historyst.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.rhkb.cn/news/345865.html

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

相关文章

设计模式之观察者模式ObserverPattern(十一)

一、概述 观察者模式 (Observer Pattern) 是一种行为型设计模式,又被称为发布-订阅 (Publish/Subscribe) 模式,它定义了对象之间的一种一对多的依赖关系,使得当一个对象的状态发生变化时,所有依赖于它的对象都会自动收到通知并更新…

Duck Bro的第512天创作纪念日

Tips:发布的文章将会展示至 里程碑专区 ,也可以在 专区 内查看其他创作者的纪念日文章 我的创作纪念日第512天 文章目录 我的创作纪念日第512天一、与CSDN平台的相遇1. 为什么在CSDN这个平台进行创作?2. 创作这些文章是为了赚钱吗&#xff1f…

手写kNN算法的实现-用欧几里德空间来度量距离

kNN的算法思路:找K个离预测点最近的点,然后让它们进行投票决定预测点的类型。 step 1: kNN存储样本点的特征数据和标签数据step 2: 计算预测点到所有样本点的距离,关于这个距离,我们用欧几里德距离来度量(其实还有很多…

ui自动化中,selenium进行元素定位,以及CSS,xpath定位总结

几种定位方式 简单代码 from selenium import webdriver import time# 创建浏览器驱动对象 from selenium.webdriver.common.by import Bydriver webdriver.Chrome() # 参数写浏览器驱动文件的路径,若配置到环境变量就不用写了 # 访问网址 driver.get…

WPF-UI布局

WPF布局元素有如下几个: Grid:网格。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。StackPanel:栈式面板。可将包含的元素在竖直或水平方向上排成一条直线,当移除一个元素后,后面的元素会自动向前移…

两台电脑通过网线直连共享数据(超详细)- 我的实践记录

原文链接 按照原文的操作,成功通过直连网线连接了两台windows电脑并共享传输数据。 ping不通可能是防火墙没关闭导致的,但是完全关闭防火墙又不安全。 那么有没有不关闭防火墙,能够上网,又能直连另一台电脑呢? 我们…

Linux启动KKfileview文件在线浏览时报错:启动office组件失败,请检查office组件是否可用

目录 1、导论 2、报错信息 3、问题分析 4、解决方法 4.1、下载 4.2、安装步骤 1、导论 今天进行项目部署时,遇到了一个问题。在启动kkfileview时,出现了报错异常: 2024-06-09 06:36:44.765 ERROR 1 --- [ main] cn.keking.service.Of…

全球溃败,苹果可能要全球大降价了,试图摆脱中国制造的后果

苹果一季度在中国市场的出货量暴跌,导致它不得不在中国市场大降价,从3月份就在中国市场大幅度降价,然而目前它在美国和欧洲两大市场也出现大幅衰退,降价可能将成为苹果在全球的举措。 市调机构Canalys公布的一季度数据显示&#x…

Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`.

问题:在代码中使用jest进行单元测试时,报错如下: 解决思路: 根据报错提示出来的 react-dom/test-utils 进行全局搜索,发现没有该引用,故进入该代码块中分析。发现代码中引入testing-library/react &#…

Git使用总结(git使用,git实操,git命令和常用指令)

简介:Git是一款代码版本管理工具,可以记录每次提交的代码,防止代码丢失,可实现版本迭代,解决代码冲突,常用的远程Git仓库:Gitee(国内)、GitHub(国外&#xff…

基于websocket与node搭建简易聊天室

一、前言 上一篇文章介绍了websocket的详细用法与工具类的封装,本篇就基于websocket搭建一个简易实时的聊天室。 在本篇开始之前也可以去回顾一下websocket详细用法:WebSocket详解与封装工具类 二、基于node搭建后台websocket服务 首先确认本机电脑中…

【debug】vscode配置c/c++环境及查看调试信息m1 mac

之前用的一直是clion 但是经过反复调整,发现始终查看不了vector里面的数值(只有指针地址),改用常用的vscode后调试成功 安装 安装vscode 以及vscode中的扩展安装 c/c,c/c extension pack,cmake,cmake tools,code runner,codeLLD…

HarmonyOS(二十三)——HTTP请求实战一个可切换的头条列表

在前一篇文章,我们已经知道如何实现一个http请求的完整流程,今天就用官方列子实战一个简单的新闻列表。进一步掌握ArkTS的声明式开发范式,数据请求,常用系统组件以及touch事件的使用。 主要包含以下功能: 数据请求。…

盘点2024年5月Sui生态发展,了解Sui近期成长历程!

2024年5月是Sui的第一个生日月,Sui迎来了它的上线一周年纪念日。在过去的一年中Sui在技术进步与创新、生态系统的扩展、社区发展与合作伙伴关系以及重大项目和应用推出方面取得重要进展,展示了其作为下一代区块链平台的潜力。 以下是Sui的近期成长历程集…

MySQL的group by与count(), *字段使用问题

文章目录 问题group by到底做了什么举个例子简单来说为什么select字段,count()不能和*共同使用总结 问题 这是一段摘抄自MySQL官网的文字。其大致意思是MySQL拓展了group by的使用,MySQL允许选择没有出现在group by中的字段。换句话说,标准SQ…

暴雨推出X705显示器:23.8英寸100Hz IPS屏

IT资讯 6月 7 日消息,日前,暴雨发布了一款 23.8 英寸 IPS 显示器,直屏、支持 100Hz 刷新率。 据官方介绍,X705 显示器分辨率为 19201080,亮度为 300 尼特(典型值),对比度 1000:1&…

Polar Web【中等】search

Polar Web【中等】search Contents Polar Web【中等】search思路&探索首页一般注入方式 EXP&效果Payload 总结 思路&探索 见到题目标题,预测可能有目录扫描或者输入框查询数据之类情况,具体细节在破解过程中才能清楚 打开站点,显…

【学习笔记】finalshell上传文件夹、上传文件失败或速度为0

出现标题所述的情况,大概率是finalshell上传文件的过程中的权限不够。 可参照:Finalshell上传文件失败或者进度总为百分之零解决方法 如果不成功,建议关闭客户端重试。 同时建议在设置finalshell的ssh连接时根据不同用户设置多个连接&#xf…

Postman环境变量以及设置token全局变量!

前言百度百科解释: 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数,如:临时文件夹位置和系统文件夹位置等。 环境变量是在操作系统中一个具有特定名字的对象,它…

UE5中在地形中加入湖、河

系统水资产添加 前提步骤123 完成 前提 使用版本 UE5.0.3,使用插件为UE内置的Water和water Extras. 步骤 1 记得重启 2 增加地形&#xff0c;把<启用编辑图层>勾选 如果地形没有勾选上编辑图层&#xff0c;那么就会导致湖、河等水景象无法融入地形。 如果忘记勾选…