当前位置: 首页 > news >正文

(二)利用Streamlit创建第一个app——单页面、多页面

1 单页面app

Step1:创建一个新的Python脚本。我们称之为uber_pickups.py。
Step2:在您喜爱的IDE或文本编辑器中打开uber_pickups.py,然后添加以下行:

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

Step3:每个好的应用程序都有一个标题,所以让我们添加一个:

st.title('Uber pickups in NYC')

Step4:现在是从命令行运行Streamlit的时候了,在终端执行一下命令:

streamlit run uber_pickups.py

运行Streamlit应用程序与任何其他Python脚本都没有区别。无论何时需要查看应用程序,都可以使用此命令。

可以看到在默认浏览器自动打开了刚刚运行的网站。除此之外,在运行终端会给出两个链接,如下:
在这里插入图片描述
一个是本地链接;一个是你的设备所在的局域网链接!将此链接放入浏览器中即可访问您所搭建的网页。

2 多页面APP

随着应用程序的规模越来越大,将它们组织成多个页面变得非常有用。这使得应用程序更易于作为开发人员进行管理,更易于作为用户进行导航。Streamlit为创建多页应用程序提供了一种无摩擦的方式。页面会自动显示在应用侧边栏中的一个漂亮的导航小部件中,单击页面将导航到页面,而无需重新加载前端-这使得应用浏览速度极快!

2.1 运行多页应用程序

运行多页应用程序与运行单页应用程序相同。运行多页应用程序的命令是:

streamlit run [entrypoint file]

“入口点文件”是应用程序将向用户显示的第一个页面。向应用程序添加页面后,入口点文件将显示为侧边栏中最顶部的页面。您可以将入口点文件视为应用程序的“主页”。例如,假设你的入口点文件是Home.py。然后,要运行你的应用程序,你可以运行streamlit运行Home.py,这将启动你的应用并执行Home.py中的代码。

2.2 添加页面

创建入口点文件后,可以通过在相对于入口点文件的页面/目录中创建.py文件来添加页面。例如,如果入口点文件是Home.py,则可以创建pages/About.py文件来定义“关于”页面。以下是多页应用程序的有效目录结构:

Home.py # This is the file you run with "streamlit run"
└─── pages/└─── About.py # This is a page└─── 2_Page_two.py # This is another page└─── 3_😎_three.py # So is this

在这里插入图片描述

在文件名中添加表情符号时,最好使用带编号的前缀,以便在终端中自动完成。终端自动完成可能会被unicode(表情符号的表示方式)所混淆。

页面定义为pages/ directory中的.py文件。页面的文件名根据下面一节中的规则转换为侧边栏中的页面名称。例如,About.py文件将在侧边栏中显示为“About”,2_Page_two.py显示为“Page two”,3_😎_three.py显示为“😎 three”:
只有pages/directory 中的.py文件将作为页面加载。Streamlit忽略pages/directory和子目录中的所有其他文件。

2.3 如何在 UI 中标记和排序页面

2.3.1如何在 UI 中标记和排序页面

文件名由四个不同部分组成:
数字:如果文件前缀为数字
分割:可以是 _- 、空间或其任意组合。
标签:

相关文章:

(二)利用Streamlit创建第一个app——单页面、多页面

1 单页面app Step1:创建一个新的Python脚本。我们称之为uber_pickups.py。 Step2:在您喜爱的IDE或文本编辑器中打开uber_pickups.py,然后添加以下行: import streamlit as st import pandas as pd import numpy as npStep3&…...

一条sql查询语句在mysql中的执行过程是什么

mysql的连接器 我们想要在mysql中执行一条sql查询语句,首先需要连接到mysql服务,那么客户端首先要向mysql服务端发起连接请求,我们可以在客户端用mysql -h [ip] -P [port] -u 用户名 -p 密码 命令向服务端发起连接请求,这个连接请…...

网络互联究竟是需要什么协议相同,什么协议不同?

混淆概念的几个说法: 说法1: “以太网交换机不可以实现采用不同网络层协议的互联” 原因:以太网交换机是数据链路层的设备,不懂网络层的知识 说法2: “网桥可互联不同的物理层、不同的MAC子层以及不同速率的以太网”…...

ajax axios json

目录 一、ajax概述 1. 概念 2. 实现方式 (1)原生的JS实现方式(了解) (2) JQeury实现方式 二、axios 介绍 三、axios使用 1. axios 发送get/post请求 2. axios验证用户名称是否存在 四、json 1. …...

外观模式——提供统一入口

1、简介 1.1、概述 在软件开发中,有时候为了完成一项较为复杂的功能,一个类需要和多个其他业务类交互,而这些需要交互的业务类经常会作为一个完整的整体出现,由于涉及的类比较多,导致使用时代码较为复杂。此时&#…...

Vue中导入并读取Excel数据

在工作中遇到需要前端上传excel文件获取到相应数据处理之后传给后端并且展示上传文件的数据. 一、引入依赖 npm install -S file-saver xlsxnpm install -D script-loadernpm install xlsx二、在main.js中引入 import XLSX from xlsx三、创建vue文件 <div><el-uplo…...

CUDA常用函数

cudaDeviceSynchronize cudaDeviceSynchronize是一个CUDA函数&#xff0c;用于同步当前设备上的所有CUDA流。它会阻塞调用它的线程&#xff0c;直到所有设备上的CUDA流都执行完为止。这可以确保在进行后续的CUDA操作时&#xff0c;先前的操作已经完成。 在CUDA程序中&#xff0…...

72. ElasticSearch常用命令

索引管理 1新建索引 curl -XPUT http://10.42.172.35:9200/index012 读写权限 curl -XPUT -d {"blocks.read":false} http://10.42.172.35:9200/index01/_settings3 查看索引 单个 curl -XGET http://10.42.172.35:9200/index01/_settings多个 curl -XGET http…...

2023.7.26(同余方程的通解与特解)

Water(扩欧求特解与通解) 题意&#xff1a;给容量分别为A与B的水杯&#xff0c;问确切喝到C水的最小操作次数 有4种操作&#xff1a;选一杯全喝&#xff0c;选一杯全部倒掉&#xff0c;选一杯装满&#xff0c;将一杯的水尽量倒到另一杯中 思路&#xff1a;只有AxByC有解时才能确…...

Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像(图生图,img2img)为例

Diffusion扩散模型学习3——Stable Diffusion结构解析-以图像生成图像&#xff08;图生图&#xff0c;img2img&#xff09;为例 学习前言源码下载地址网络构建一、什么是Stable Diffusion&#xff08;SD&#xff09;二、Stable Diffusion的组成三、img2img生成流程1、输入图片编…...

LangChain||什么是LangChain? LangChain有什么用?

从Auto-GPT说起&#xff1a; Auto-GPT可以调用本地电脑工具处理复杂信息;Auto-GPT可以围绕目标查阅资 料、“独立思考”、及时反馈、并 及时调整下一步操作…Auto-GPT的诞生&#xff0c;创造了大家 对“将LLM作为智慧大脑来高效 处理综合复杂任务”的想象;首次尝试串联大语言模…...

秋招算法备战第28天 | 93.复原IP地址、78.子集、90.子集II

93. 复原 IP 地址 - 力扣&#xff08;LeetCode&#xff09; 这个问题可以通过深度优先搜索(DFS)的方法来解决。我们要做的就是在字符串的每个可能位置插入点&#xff0c;然后检查生成的每一部分是否在 0-255 的范围内&#xff0c;以及是否没有前导零&#xff08;除非这一部分本…...

Mongodb空间索引的使用以及与Django的对接

Mongodb的空间索引 Mongodb数据库大家都非常熟悉&#xff0c;是一个基于分布式文件存储的开源数据库系统&#xff0c;在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能&#xff0c;数据结构由键值(key>value)对组成。MongoDB 文档类似于 JSON 对…...

Windows安装MySQL数据库

MySQL数据库安装 MySQL下载 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 可以选择下载msi或zip&#xff0c;以下为zip模式安装步骤 下载了mysql的zip安装包之后解压即可&#xff1b; Windows安装步骤 初始化MySQL&#xff0c;并记录生成的用户密码root的随机…...

聊聊函数式编程中的“式”

当谈到函数式编程的“式”时&#xff0c;通常指的是函数的组合、转换和应用&#xff0c;以及处理数据的方式和风格。在函数式编程中&#xff0c;式是用来构建程序逻辑的基本单元。 下面更详细解释函数式编程中的几个关键式&#xff1a; 函数的组合&#xff1a; 函数式编程中…...

ubuntu目录分析

在Ubuntu根目录下&#xff0c;以下是一些常见文件夹的含义&#xff1a; /bin&#xff1a;存放可执行文件&#xff0c;包含一些基本的命令和工具。 /boot&#xff1a;存放启动时所需的文件&#xff0c;如内核和引导加载程序。 /dev&#xff1a;包含设备文件&#xff0c;用于与硬…...

Python 进阶(三):正则表达式(re 模块)

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 1. 导入re模块2. re模块中的常用函数2.1 re.search()2.2 re.findall()2.3 re.sub()2.4…...

Vue2 第六节 key的作用与原理

&#xff08;1&#xff09;虚拟DOM &#xff08;2&#xff09;v-for中的key的作用 一.虚拟DOM 1.虚拟DOM就是内存中的数据 2.原生的JS没有虚拟DOM: 如果新的数据和原来的数据有重复数据&#xff0c;不会在原来的基础上新加数据&#xff0c;而是重新生成一份 3. Vue会有虚拟…...

React之组件的生命周期

React之组件的生命周期 一、概述二、整体说明三、挂载阶段四、更新阶段五、卸载阶段 一、概述 生命周期:一个事务从创建到最后消亡经历的整个过程组件的生命周期&#xff1a;组件从被创建到挂载到页面中运行&#xff0c;再到组件不用时卸载的过程意义&#xff1a;理解组件的生…...

linux -网络编程-多线程并发服务器

目录 1.三次握手和四次挥手 2 滑动窗口 3 函数封装思想 4 高并发服务器 学习目标&#xff1a; 掌握三次握手建立连接过程掌握四次握手关闭连接的过程掌握滑动窗口的概念掌握错误处理函数封装实现多进程并发服务器实现多线程并发服务器 1.三次握手和四次挥手 思考: 为什么…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

wpf在image控件上快速显示内存图像

wpf在image控件上快速显示内存图像https://www.cnblogs.com/haodafeng/p/10431387.html 如果你在寻找能够快速在image控件刷新大图像&#xff08;比如分辨率3000*3000的图像&#xff09;的办法&#xff0c;尤其是想把内存中的裸数据&#xff08;只有图像的数据&#xff0c;不包…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

WPF八大法则:告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...