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.mzph.cn/news/850997.shtml

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

相关文章

(二)深度学习基础练习题(54道选择题)

本文整理了深度学习基础知识相关的练习题,共54道,适用于想巩固深度学习基础的同学。来源:如荷学数据科学题库(技术专项-深度学习)。 1) 2) 3) 4) 5) 6&#…

音程与和弦 音程协和度

2个音符之间的音程计算 1234567,1到7的音程是7度,音程是计算总长度,看音级的个数。 Cubase中的音程计算 下面一个是4度,一个是3度,格子中深色的行就是黑键行。 根据半音数量来确定对应音程的专业术语叫法 旋律音程、…

用咖啡来理解springboot3的自动配置机制

大家好,这里是教授.F 目录 前提知识: 场景引入: 1.Starter依赖: 2.默认配置: 3.自定义配置: 4.条件化配置: 5.自动装配: 具体过程: 扫包路径的配置: 配置…

解锁ChatGPT:从GPT-2实践入手解密ChatGPT

⭐️我叫忆_恒心,一名喜欢书写博客的研究生👨‍🎓。 如果觉得本文能帮到您,麻烦点个赞👍呗! 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧,喜欢的小伙伴给个三连支…

【深度学习】—— 神经网络介绍

神经网络介绍 本系列主要是吴恩达深度学习系列视频的笔记,传送门:https://www.coursera.org/deeplearning-ai 目录 神经网络介绍神经网络的应用深度学习兴起的原因 神经网络,全称人工神经网络(Artificial Neural Network&#xf…

python生成免费的ssl证书

测试SSL证书不需要验证域名权限 执行 pip install cryptography from cryptography import x509 from cryptography.x509.oid import NameOID from cryptography.hazmat.primitives import hashes, serialization from cryptography.hazmat.primitives.asymmetric import r…

私有化AI搜索引擎FreeAskInternet

什么是 FreeAskInternet FreeAskInternet 是一个完全免费、私有且本地运行的搜索聚合器,并使用 LLM 生成答案,无需 GPU。用户可以提出问题,系统将使用 searxng 进行多引擎搜索,并将搜索结果合并到ChatGPT3.5 LLM 中,并…

Python私教张大鹏 Vue3整合AntDesignVue之Breadcrumb 面包屑

显示当前页面在系统层级结构中的位置&#xff0c;并能向上返回。 何时使用 当系统拥有超过两级以上的层级结构时&#xff1b; 当需要告知用户『你在哪里』时&#xff1b; 当需要向上导航的功能时。 案例&#xff1a;面包屑导航基本使用 核心代码&#xff1a; <template…

【Linux文件篇】系统文件、文件描述符与重定向的实用指南

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#xff1a;相信大家对文件都不会太陌生、也不会太熟悉。在没有学习Linux操作系统时&#xff0c;我们在学习C或C时都学过如何去创建、打开、读写等待文件的操作&#xff0c;知道一些语言级别的一些接口与函数。但…

【Anaconda】 anaconda常用命令总结

【Anaconda】 anaconda常用命令总结 一、创建虚拟环境二、激活/使用/进入某个虚拟环境三、退出当前环境四、复制某个虚拟环境五、删除某个环境六、查看当前所有环境七、查看当前虚拟环境下的所有安装包八、安装或卸载包(进入虚拟环境之后&#xff09;九、分享虚拟环境十、源服务…

leetcode刷题记录34-100297. 找到连续赢 K 场比赛的第一位玩家

问题描述 有 n 位玩家在进行比赛&#xff0c;玩家编号依次为 0 到 n - 1 。 给你一个长度为 n 的整数数组 skills 和一个 正 整数 k &#xff0c;其中 skills[i] 是第 i 位玩家的技能等级。skills 中所有整数 互不相同 。 所有玩家从编号 0 到 n - 1 排成一列。 比赛进行方式如…

实体商铺私域流量打造策略:从引流到转化的全链路解析

在数字化时代&#xff0c;实体商铺面临着前所未有的挑战与机遇。随着线上购物的兴起&#xff0c;传统商铺如何吸引并留住顾客&#xff0c;成为了每个实体店家必须面对的问题。私域流量的打造&#xff0c;正是解决这一问题的关键所在。本文将从引流、留存、转化三个方面&#xf…

Java基础教程 - 15 进阶部分

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 15 进阶部分 网络编程、注解、反射、泛型、新特性等&#xff0c;见高级部分。 继续学习 Java进阶教程

冯喜运:6.10周一黄金原油行情趋势分析及独家操作建议

【黄金消息面分析】&#xff1a;上周全球金融市场惊现戏剧性大逆转&#xff0c;美国多项经济数据证实劳动力市场降温&#xff0c;9月降息重返视野令全球风险情绪几乎陷入狂热状态&#xff0c;全球股市接连创新高&#xff0c;但上周五意外“爆表”的非农令市场惊现大逆转&#x…

基于pytorch_lightning测试resnet18不同激活方式在CIFAR10数据集上的精度

基于pytorch_lightning测试resnet18不同激活方式在CIFAR10数据集上的精度 一.曲线1.train_acc2.val_acc3.train_loss4.lr 二.代码 本文介绍了如何基于pytorch_lightning测试resnet18不同激活方式在CIFAR10数据集上的精度 特别说明: 1.NoActive:没有任何激活函数 2.SparseActiva…

Spring (49)OpenFeign

OpenFeign是Spring Cloud在Feign的基础上进行了增强&#xff0c;使其更易于与Spring Boot应用集成。它提供了一种声明式的方法来调用HTTP服务&#xff0c;从而简化了服务间调用的开发。下面我们将通过源码解析和代码演示来深入理解OpenFeign的工作原理及其使用方法。 1. 核心概…

调研管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;管理员管理&#xff0c;基础数据管理&#xff0c;教师类型管理&#xff0c;课程类型管理&#xff0c;公告类型管理 前台账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;论坛&#…

【JS封装-工具函数】强化编程实践:精选JavaScript函数封装集锦-关于工具函数 (如深度克隆、浅拷贝、递归、防抖和节流等)

目录 浅拷贝 深度克隆 递归函数示例&#xff1a;计算数组深度 防抖函数 节流函数 扁平化数组 检查对象是否为空 生成随机字符串 深度比较两个对象是否相等 浅拷贝 /*** 浅拷贝对象或数组。* param {Object|Array} obj 要拷贝的对象或数组。* returns {Object|Array} …

腾讯云和windows11安装frp,实现内网穿透

一、内网穿透目的 实现公网上&#xff0c;访问到windows上启动的web服务 二、内网穿透的环境准备 公网服务器、windows11的电脑、frp软件(需要准备两个软件&#xff0c;一个是安装到公网服务器上的&#xff0c;一个是安装到windows上的) frp下载地址下载版本 1.此版本(老版…

C/C++|std::function 浅度解析

std::function 是 C 标准库中的一个通用多态函数包装器。它可以存储、复制和调用任意可调用目标&#xff08;函数、lambda 表达式、绑定表达式或其他函数对象&#xff09;。 std::function 占有固定尺寸的内存&#xff0c;这是因为它的实现方式决定了这一点。让我们深入探讨这一…