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

Streamlit:用Python快速构建交互式Web应用

在传统的Web开发中,开发者常常需要编写大量的前端和后端代码,才能实现一个简单的交互式Web应用。Streamlit 通过简化这一过程,使得你只需要用Python编写代码,就能快速创建具有丰富交互功能的Web应用。本文将介绍如何使用Streamlit,从基本概念到简单的代码示例,帮助你迅速上手。

什么是Streamlit?

Streamlit 是一个基于Python的开源框架,用于快速创建数据应用。它的设计目标是让数据科学家和分析师无需具备前端开发技能,也能轻松构建出交互性强、视觉化效果良好的Web应用。其主要特点包括:

  • 简单直观:只需几行代码即可创建应用。
  • 无需前端开发经验:通过Python代码控制前端的元素和布局。
  • 实时更新:Streamlit会在每次代码变更时自动重新加载页面。

安装Streamlit

要开始使用Streamlit,首先需要安装它。你可以通过pip进行安装:

pip install streamlit

安装完成后,运行以下命令来启动你的第一个Streamlit应用:

streamlit hello

这将启动一个示例应用,并自动在浏览器中打开。通过这个例子,你可以看到Streamlit的基本功能。

创建第一个Streamlit应用

下面是一个简单的例子,展示如何使用Streamlit构建一个交互式的Web应用。我们将创建一个应用,允许用户输入文本,并根据输入的内容生成一个简单的响应。

import streamlit as st# 标题
st.title("Streamlit Demo")# 获取用户输入
user_input = st.text_input("请输入你的名字:")# 根据用户输入生成响应
if user_input:st.write(f"你好,**{user_input}**!欢迎使用Streamlit!")

在上面的代码中,我们使用 st.title() 来设置应用的标题, st.text_input() 来获取用户输入,最后通过 st.write() 来显示输出。只需几行代码,我们就构建了一个带有输入框和动态响应的Web应用。

显示数据和图表

Streamlit不仅可以处理文本,还能方便地显示数据和图表。我们来扩展一下上面的例子,展示如何在Streamlit中展示数据和绘制图表。

import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt# 标题
st.title("数据展示与图表")# 生成数据
data = pd.DataFrame({'列A': np.random.randn(10),'列B': np.random.randn(10)
})# 显示数据表
st.write("生成的随机数据:")
st.dataframe(data)# 绘制图表
st.write("生成的随机数据图表:")
plt.figure(figsize=(10,5))
plt.plot(data['列A'], label='列A')
plt.plot(data['列B'], label='列B')
plt.legend()
st.pyplot(plt)

在这个例子中,我们使用 st.dataframe() 来显示表格数据,使用 st.pyplot() 来嵌入matplotlib生成的图表。你可以看到,Streamlit让数据可视化变得非常简单,而且可以直接使用熟悉的Python库(如Pandas和Matplotlib)。

交互式组件

除了文本和数据展示,Streamlit还提供了各种交互式组件,如按钮、滑块、下拉菜单等。下面是一个简单的例子,展示如何使用这些组件。

import streamlit as stst.title("交互式组件演示")# 滑块
age = st.slider("选择你的年龄:", 0, 100, 25)
st.write(f"你选择的年龄是:**{age}**")# 按钮
if st.button("点击我"):st.write("按钮被点击了!")

在这个例子中,我们使用 st.slider() 来创建一个滑块, st.button() 来创建一个按钮。用户可以通过滑动或点击与应用交互,Streamlit会实时更新 页面内容。

使用Streamlit实现OpenAI Chat页面

接下来,我们通过Streamlit实现一个OpenAI Chat 页面,让用户能够输入问题并获取ChatGPT的回答。这个功能可以通过结合Streamlit和OpenAI的API轻松实现。

前提条件

  1. 获取 OpenAI API Key。
  2. 安装Streamlit和OpenAI库:
pip install streamlit openai

实现代码

下面是一个简单的例子,展示如何通过Streamlit实现聊天功能:

import streamlit as st
import openai# 设置OpenAI API密钥
openai.api_key = '你的OpenAI API Key'# 标题
st.title("OpenAI Chatbot with Streamlit")# 输入框:获取用户输入
user_input = st.text_input("请输入你的问题:")# 聊天按钮
if st.button("发送"):if user_input:# 调用OpenAI API生成回复response = openai.Completion.create(engine="text-davinci-003",  # 或其他你想使用的模型prompt=user_input,max_tokens=150)# 显示回复st.write(f"ChatGPT: **{response.choices[0].text.strip()}**")else:st.write("请输入问题后再点击发送按钮。")

代码说明

  1. API密钥设置:使用 openai.api_key 设置你的API密钥。
  2. 用户输入:通过 st.text_input() 提供一个输入框让用户提交问题。
  3. 生成回复:通过OpenAI API调用 openai.Completion.create() 获取ChatGPT的回复,并通过 st.write() 显示出来。

部署聊天应用

构建好应用后,只需在终端运行以下命令来启动应用:

streamlit run app.py

这样,你就可以在本地体验一个简单的OpenAI Chatbot,用户可以输入问题并得到即时的回复。

部署Streamlit应用

Streamlit还提供了一个专门的部署平台:Streamlit Cloud,通过它你可以轻松将应用部署到云端。

部署步骤:

  1. 将你的代码推送到GitHub等代码仓库。
  2. 访问 Streamlit Cloud,选择代码仓库并部署。
  3. 应用几分钟后即可上线。

总结

Streamlit 是一个非常强大且易于使用的工具,尤其适合那些希望快速构建Web应用的Python开发者。无论是数据分析、机器学习,还是构建与OpenAI结合的聊天应用,Streamlit都能让你快速实现功能,无需前端开发经验

相关文章:

Streamlit:用Python快速构建交互式Web应用

在传统的Web开发中,开发者常常需要编写大量的前端和后端代码,才能实现一个简单的交互式Web应用。Streamlit 通过简化这一过程,使得你只需要用Python编写代码,就能快速创建具有丰富交互功能的Web应用。本文将介绍如何使用Streamlit…...

深入浅出Vue.js组件开发:从基础到高级技巧

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 Vue.js 是一个轻量级且功能强大的 JavaScript 框架,专注于构建用户界面。它的核心优势之一是组件系统,它允许开发者通过模块化、可复用的方式构建复杂的应用程序。在这篇文章中,我们将详细探讨如何开发 Vue.js…...

Python并发编程挑战与解决方案

Python并发编程挑战与解决方案 并发编程是现代软件开发中的一项核心能力,它允许多个任务同时运行,提高程序的性能和响应速度。Python因其易用性和灵活性而广受欢迎,但其全局解释器锁(GIL)以及其他特性给并发编程带来了…...

LeetCode从入门到超凡(五)深入浅出---位运算

引言 大家好,我是GISer Liu😁,一名热爱AI技术的GIS开发者。本系列文章是我跟随DataWhale 2024年9月学习赛的LeetCode学习总结文档;本文主要讲解 位运算算法。💕💕😊 一、 位运算简介 1.什么是位…...

一些 Go Web 开发笔记

原文:Julia Evans - 2024.09.27 在过去的几周里,我花了很多时间在用 Go 开发一个网站,虽然不知道它最终会不会发布,但在这个过程中我学到了一些东西,想记录下来。以下是我的一些收获: Go 1.22 现在有了更…...

[Go语言快速上手]初识Go语言

目录 一、什么是Go语言 二、第一段Go程序 1、Go语言结构 注意 2、Go基础语法 关键字 运算符优先级 三、Go语言数据类型 示例 小结 一、什么是Go语言 Go语言,通常被称为Golang,是一种静态类型、编译型的计算机编程语言。它由Google的Robert Gr…...

基于STM32的智能风扇控制系统设计

引言 本项目将基于STM32微控制器设计一个智能风扇控制系统,通过温度传感器实时检测环境温度,并根据预设的温度范围自动调节风扇的转速。该系统展示了STM32的PWM输出、传感器接口以及自动控制应用的实现。 环境准备 1. 硬件设备 STM32F103C8T6 开发板…...

OpenCV 形态学相关函数详解及用法示例

OpenCV形态学相关的运算包含腐蚀(MORPH_ERODE),膨胀(MORPH_DILATE),开运算(MORPH_OPEN),闭运算(MORPH_CLOSE),梯度运算(MORPH_GRADIENT),顶帽运算(MORPH_TOPHAT),黑帽运算(MORPH_BLACKHAT),击中…...

Kafka学习笔记(三)Kafka分区和副本机制、自定义分区、消费者指定分区

文章目录 前言7 分区和副本机制7.1 生产者分区写入策略7.1.1 轮询分区策略7.1.2 随机分区策略7.1.3 按key分区分配策略7.1.4 自定义分区策略7.1.4.1 实现Partitioner接口7.1.4.2 实现分区逻辑7.1.4.3 配置使用自定义分区器7.1.4.4 分区测试 7.2 消费者分区分配策略7.2.1 RangeA…...

华为 HCIP-Datacom H12-821 题库 (31)

🐣博客最下方微信公众号回复题库,领取题库和教学资源 🐤诚挚欢迎IT交流有兴趣的公众号回复交流群 🦘公众号会持续更新网络小知识😼 1. 默认情况下,IS-IS Level-1-2 路由器会将 Level-2 区域的明细路由信息发布到Lev…...

占位,凑满减

占位,凑满减...

SpringBoot校园资料平台:从零到一的构建过程

1系统概述 1.1 研究背景 如今互联网高速发展,网络遍布全球,通过互联网发布的消息能快而方便的传播到世界每个角落,并且互联网上能传播的信息也很广,比如文字、图片、声音、视频等。从而,这种种好处使得互联网成了信息传…...

czx前端

一、盒模型 标准盒模型:box-sizing: content-box。 外边距边框内边距内容区。 IE盒模型,怪异盒模型:box-sizing: border-box。 外边距内容区(边框内边距内容区)。 二、CSS特性 继承性: 父元素的字体大小&#xf…...

Perforce演讲回顾(上):从UE项目Project Titan,看Helix Core在大型游戏开发中的版本控制与集成使用策略

日前,Perforce携手合作伙伴龙智一同亮相Unreal Fest 2024上海站,分享Helix Core版本控制系统及其协作套件的强大功能与最新动态,助力游戏创意产业加速前行。 Perforce解决方案工程师Kory Luo在活动主会场,带来《Perforce Helix C…...

【含文档】基于Springboot+Andriod的成人教育APP(含源码+数据库+lw)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统定…...

CentOS7系统配置Yum环境

新安装完系统的服务器往往缺少我们常用的依赖包,故需要设置好yum源,方便软件安装,以下是CentOS7为例,系统安装后yum默认安装。 //备份之前的配置文件 mv /etc/yum.repos.d /etc/yum.repos.d.bak mkdir -p /etc/yum.repos.d 1…...

pyqt打包成exe相关流程

1、首先是安装pyinstaller, 在cmd中输入以下安装命令: pip3 install pyinstaller -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple/ 2、安装完毕之后,下一步就是找到你要打包的工程,打包的logo放置如下位置: 3、将log…...

设计模式、系统设计 record part02

软件设计模式: 1.应对重复发生的问题 2.解决方案 3.可以反复使用 1.本质是面向对象 2.优点很多 1.创建型-创建和使用分离 2.结构型-组合 3.行为型-协作 571123种模式 UML-统一建模语言-Unified Modeling Language 1.可视化,图形化 2.各种图(9…...

github双重验证(2FA)启用方法

一、双重验证-2FA 在去年看到过说github启用双重验证的通知,觉得做为一个普通开发者,可能没有这么快会要求启用。结果,今天早晨一来就收到了邮件,要求说在11月底完成2FA的认证,否则权限受限。真是无了语。所谓2FA好理…...

《Linux从小白到高手》理论篇:Linux的系统服务管理

值此国庆佳节,深宅家中,闲来无事,就多写几篇博文。本篇详细深入介绍Linux的系统服务管理。 系统服务通常在系统启动时自动启动,并在后台持续运行,为系统和用户提供特定的功能。例如,网络服务、打印服务、数…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...