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 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_data 和 st.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.cache 和 st.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

结果展示

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

SQL Chat：从SQL到SPEAKL的数据库操作新纪元

SQL Chat：从SQL到SPEAKL的数据库操作新纪元

引言 SQL Chat是一款创新的、对话式的SQL客户端工具。 它采用自然语言处理技术，让你能够像与人交流一样，通过日常对话的形式对数据库执行查询、修改、创建及删除操作 极大地简化了数据库管理流程，提升了数据交互的直观性和效率。 在这个框…
阅读更多...
【漏洞复现】用友NC pagesServlet SQL注入漏洞(XVE-2024-13067)

【漏洞复现】用友NC pagesServlet SQL注入漏洞(XVE-2024-13067)

0x01 产品简介 用友NC是由用友公司开发的一套面向大型企业和集团型企业的管理软件产品系列。这一系列产品基于全球最新的互联网技术、云计算技术和移动应用技术，旨在帮助企业创新管理模式、引领商业变革。 0x02 漏洞概述 用友NC /portal/pt/servlet/pagesServlet…
阅读更多...
关于 Redis 中集群

关于 Redis 中集群

哨兵机制中总结到，它并不能解决存储容量不够的问题，但是集群能。 广义的集群：只要有多个机器，构成了分布式系统，都可以称之为一个“集群”，例如主从结构中的哨兵模式。 狭义的集群：redis 提供的…
阅读更多...
MySQLWorkbench导出sql文件

MySQLWorkbench导出sql文件

MySQLWorkbench导出sql文件 前言效果图导出操作选择要导出的数据库遇到的问题解决问题查看mysql路径前言 在完成数据库搭建之后，需要为上线做准备，那么就需要导出数据库的建库sql了 本篇文章讲解的是mysql Workbench 导出数据建库脚本 效果图 导出操作 选择要导出的数据库…
阅读更多...
java 深拷贝和浅拷贝

java 深拷贝和浅拷贝

深拷贝和浅拷贝的概念 浅拷贝：只对基本数据类型进行拷贝，针对于引用数据类型，只是拷贝了对象的引用，没有真实的创建一个新的对象就是浅拷贝 深拷贝：在对引用数据类型拷贝过程中，创建了一个新的对象&#xf…
阅读更多...
Dell服务器根据GPU温度调整风扇转速

Dell服务器根据GPU温度调整风扇转速

前言 dell服务器自动风扇是根据CPU温度来调速的，我跑AI的时候cpu温度不高但是GPU温度很高导致显卡卡死PVE虚拟机直接挂起无法运行，我看了下也没有基于显卡温度调速的脚本，于是我就自己写了一个 基于ipmi工具 乌班图等linux先安装ipmi apt …
阅读更多...
算法金 | A - Z，115 个数据科学 机器学习 江湖黑话（全面）

算法金 | A - Z，115 个数据科学 机器学习 江湖黑话（全面）

大侠幸会，在下全网同名「算法金」 0 基础转 AI 上岸，多个算法赛 Top 「日更万日，让更多人享受智能乐趣」 机器学习本质上和数据科学一样都是依赖概率统计，今天整整那些听起来让人头大的机器学习江湖黑话 A - C A/B Testing (A/B …
阅读更多...
电子电器架构——智能座舱设备终端

电子电器架构——智能座舱设备终端

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 屏蔽力是信息过载时代一个人的特殊竞争力，任何消耗你的人和事，多看一眼都是你的不对。非必要不费力证明自己，无利益不试图说服别人，是精神上的节…
阅读更多...
电路笔记 : 嘉立创EDA 导入、查找、设计管理器(快速寻找网络标签)功能+DRC错误检查和处理

电路笔记 : 嘉立创EDA 导入、查找、设计管理器(快速寻找网络标签)功能+DRC错误检查和处理

导入功能 查找功能 可查找多种类型，如原件名称、网络标签等 设计管理器 图层查看 DRC错误 规则设置 线距问题 大多数PCB制造商能够可靠地生产5 mil间距的走线和间隙。这是一个常见的标准，适合大多数消费级和工业级电子产品。在5 mil以上的间距&#xff…
阅读更多...
设计软件有哪些？照明工具篇，渲染100邀请码1a12

设计软件有哪些？照明工具篇，渲染100邀请码1a12

阴影和照明涉及到图片的真实感和氛围，所以熟练使用照明工具是设计师的必备能力，这次我们介绍一些照明工具。 1、VRaySun VRaySun是VRay渲染器中的一个功能，用于模拟太阳光源。它是一种方便易用的光源类型，能够产生逼真的日光效果…
阅读更多...
MySQL与PostgreSQL关键对比三（索引类型）

MySQL与PostgreSQL关键对比三（索引类型）

目录 索引类型 B-tree 索引 Hash 索引 Full-text 索引 GiST 索引 GIN 索引 BRIN 索引 索引创建示例 MySQL PostgreSQL 结论 以下SQL语句的执行如果需要开发工具支持，可以尝试使用SQLynx或Navicat来执行。 MySQL和PostgreSQL在索引方面有许多相似之处&am…
阅读更多...
Puppeteer实战案例：自动化抓取社交媒体上的媒体资源

Puppeteer实战案例：自动化抓取社交媒体上的媒体资源

在当今数字化时代，社交媒体已成为人们获取信息、分享生活和进行商业推广的重要平台。随着社交媒体内容的爆炸性增长，自动化抓取社交媒体上的媒体资源变得尤为重要。本文将介绍如何使用Puppeteer这一强大的自动化工具来实现这一目标。 1. Puppeteer简介 …
阅读更多...
从零开始理解AdaBoost算法：设计思路与算法流程（二）【权值更新与加权表决、数学公式】

从零开始理解AdaBoost算法：设计思路与算法流程（二）【权值更新与加权表决、数学公式】

设计思路 AdaBoost算法属于Boosting算法家族中的一种，其基本思路是将多个弱分类器组合成一个强分类器。 “强分类器”是指一个分类准确率较高的模型“弱分类器”则是指分类准确率略高于随机猜测的简单模型。 AdaBoost的核心思想是通过 加权 的方式逐步提高分类器…
阅读更多...
在Modelarts上微调量化Llama3，并用docker部署

在Modelarts上微调量化Llama3，并用docker部署

本文概述 本文先使用llama-factory去微调llama3大模型，然后使用llama.cpp去量化模型并打包为docker部署到服务器上让qq机器人能够调用服务，实现qq群内问答。 效果展示 环境准备 本文使用华为云的Modelarts的notebook去进行的模型微调 ubuntu20.04&#x…
阅读更多...
黑马es学习

黑马es学习

es 0. 基础概念0.1 倒排索引0.2 文档、索引0.3 与mysql对比 1 基本操作1.1 mapping 索引库操作1.2 单个文档CRUD 3. DSL查询3.1 查询所有3.2 全文检索3.3 精确查询3.4 复合查询-相关性得分3.5 分页3.6 高亮3.7 总结 2. RestClientmysql与es数据同步es集群去重 黑马视频 官方使…
阅读更多...
【李宏毅-生成式 AI】Spring 2024, HW5：LLM Fine-tuning 实验记录

【李宏毅-生成式 AI】Spring 2024, HW5：LLM Fine-tuning 实验记录

文章目录 1. Task Overview2. Overall Workflow3. Dataset 介绍4. 代码介绍4.1 环境介绍4.2 下载 dataset4.3 下载并加载模型4.2 Notebook 代码1）import 部分2）固定 seed3）加载 LLM4）加载 tokenizer5）设置解码参数6&am…
阅读更多...
【Linux系统化学习】传输层——TCP协议

【Linux系统化学习】传输层——TCP协议

目录 预备知识 全双工协议 协议缓冲区 TCP协议 TCP协议格式 六个标志位 两个问题 确认应答机制 流量控制 超时重传机制 连接管理机制 CLOSE_WAIT状态 TIME_WAIT状态 滑动窗口 拥塞控制 延迟应答 捎带应答 粘包问题 TCP的异常情况 TCP小结 TCP/UDP协议对比…
阅读更多...
数据结构：插入排序和希尔排序

数据结构：插入排序和希尔排序

插入排序 逆序的情况下： 时间复杂度：O(N^2) 空间复杂度：O(1) 顺序的情况下： 时间复杂度：O(N) 空间复杂度…
阅读更多...
【教程】怎么获取IPV6,我教你

【教程】怎么获取IPV6,我教你

1.png 所以IPV6诞生了 IPV6拥有超大的地址空间 IPv4 采用 32 位地址长度，可以为我们提供 2^32 大约 43 亿个地址，而 IPv6 采用 128 位地址长度，为我们提供了 2^128 个地址 博主的家里用的宽带是移动宽带，众所周知，…
阅读更多...
【qt】绘图

【qt】绘图

绘图 一.画家二.绘图事件三.坐标体系四.画笔1.setColor2.setWidth3.setStyle4.setCapStyle5.setJoinStyle6.给画家配置笔 五.画刷1.setColor2.setStyle3.给画家设置刷子 六.用到的类汇总1.QRect 矩形2.QPoint 点3.QImage 图片4.QPixmap 图片5.QLine 线6.QPainterPath 路径 七.开…
阅读更多...
最新文章

Copyright @ 2022~2023