当前位置: 首页 > 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.三次握手和四次挥手 思考: 为什么…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

云计算——弹性云计算器(ECS)

弹性云服务器&#xff1a;ECS 概述 云计算重构了ICT系统&#xff0c;云计算平台厂商推出使得厂家能够主要关注应用管理而非平台管理的云平台&#xff0c;包含如下主要概念。 ECS&#xff08;Elastic Cloud Server&#xff09;&#xff1a;即弹性云服务器&#xff0c;是云计算…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...