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都能让你快速实现功能,无需前端开发经验

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

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

相关文章

Pikachu-SSRF(curl / file_get_content)

SSRF SSRF是Server-side Request Forge的缩写,中文翻译为服务端请求伪造。产生的原因是由于服务端提供了从其他服务器应用获取数据的功能且没有对地址和协议等做过滤和限制。常见的一个场景就是,通过用户输入的URL来获取图片。这个功能如果被恶意使用&am…

Ascend C 自定义算子开发:高效的算子实现

Ascend C 自定义算子开发:高效的算子实现 在 Ascend C 平台上,开发自定义算子能够充分发挥硬件的性能优势,帮助开发者针对不同的应用场景进行优化。本文将以 AddCustom 算子为例,介绍 Ascend C 中自定义算子的开发流程及关键技术…

如何制作一个企业网站,建设网站的基本步骤有哪些?

企业网站是企业的门面和名片,决定网民对企业的第一印象,因此,现在很多公司想做一个属于自己网站,但是不知道怎么做,更不知道从何做起,更别说做成了。为了能够让大家清楚如何做一个企业网站,现在…

Mysql数据库原理--查询收尾+索引+事务

文章目录 1.查询收尾1.1自查询1.2合并查询 2.索引事务2.1约束自动生成索引2.2create手动添加索引2.3.删除手动创建的索引2.4索引背后的数据结构2.5B树的结构特点和优点--经典面试题 3.事务--经典面试题3.1基本理解3.2事务的特性3.3隔离级别 1.查询收尾 1.1自查询 子查询就是套…

《CUDA编程》6.CUDA的内存组织

前面几章讲了一些编写高性能CUDA程序的要点,但还有很多其他需要注意的,其中最重要的就是合理的使用设备内存 1 CUDA的内存组织简介 现代计算机中的内存存在一种组织结构(hierachy),即不同类型的内存具有不同的容量和访问延迟(可以…

力扣203.移除链表元素

题目链接:203. 移除链表元素 - 力扣(LeetCode) 给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.val val 的节点,并返回 新的头节点 。 示例 1: 输入:head [1,2,6…

PDF怎么转换成TXT文本?这4个方法简单还免费,pdf转txt就靠它!

PDF怎么转换成TXT文本?PDF文件虽然广泛支持,但在某些设备或软件上可能无法完全正确显示,尤其是当文件包含特殊字体或复杂布局时。此外,PDF文件的阅读体验也可能受到格式干扰,如复杂的背景颜色或字体样式。将PDF转换为T…

python 实现最小路径和算法

最小路径和算法介绍 最小路径和问题通常指的是在一个网格(如二维数组)中,找到从起点(如左上角)到终点(如右下角)的一条路径,使得路径上经过的元素值之和最小。这类问题可以通过多种…

IDEA几大常用AI插件

文章目录 前言列表GPT中文版TalkXBito AIIDEA自带的AI 前言 最近AI、GPT特别火,IDEA里面又有一堆插件支持GPT,所以做个专题比较一下各个GPT插件 列表 先看idea的plugins里支持哪些,搜索“GPT”之后得到的,我用下来感觉第一第二和…

阿里云云虚拟主机SSL证书安装指南

在安装SSL证书的过程中,您需要确保已经正确获取了SSL证书文件,并且能够访问阿里云云虚拟主机的管理页面。以下是详细的步骤说明: 第一步:准备SSL证书 申请SSL证书:访问华测ctimall网站(https://www.ctimal…

Unite Barcelona主题演讲回顾:深入了解 Unity 6

本周,来自世界各地的 Unity 开发者齐聚西班牙巴塞罗那,参加 Unite 2024。本次大会的主题演讲持续了一个多小时,涵盖新功能的介绍、开发者成功案例的分享,以及在编辑器中进行的技术演示,重点展示了 Unity 6 在实际项目中…

Java | Leetcode Java题解之第457题环形数组是否存在循环

题目&#xff1a; 题解&#xff1a; class Solution {public boolean circularArrayLoop(int[] nums) {int n nums.length;for (int i 0; i < n; i) {if (nums[i] 0) {continue;}int slow i, fast next(nums, i);// 判断非零且方向相同while (nums[slow] * nums[fast]…

游戏开发指南:使用 UOS C# 云函数快速构建与部署服务端逻辑实战教学

零基础的服务端小白&#xff0c;现在也可以使用 Unity 结合 C# 来轻松搞定游戏服务端啦&#xff01; 在本篇文章中&#xff0c;我们将以游戏中的“抽卡”功能为例&#xff0c;展示如何使用 Unity Online Services&#xff08;UOS&#xff09;提供的强大 C# 云函数服务&#xf…

如何革新源代码保密?七大方法教你应对!

在数字化时代&#xff0c;源代码的安全保密对于企业而言至关重要&#xff0c;它不仅关系到企业的核心竞争力&#xff0c;还涉及到知识产权的保护。源代码一旦泄露&#xff0c;可能会给企业带来无法估量的损失。因此&#xff0c;采取有效的源代码保密措施&#xff0c;是每个企业…

焊接缺陷分割系统源码&数据集分享

焊接缺陷分割系统源码&#xff06;数据集分享 [yolov8-seg-C2f-DiverseBranchBlock&#xff06;yolov8-seg-C2f-DCNV3等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI…

Django一分钟:在Django中怎么存储树形结构的数据,DRF校验递归嵌套模型的替代方案

引言 在开发过程中我们可能需要这样的树形结构: [{"data": {"name": "牛奶"},"children": [{"data": {"name": "蒙牛"}, },{"data": {"name": "伊利"}, }]},{"da…

如何使类目树与闭包表相结合

类目树与闭包表结合的教程 类目树和闭包表是非常常见的组合,特别是在处理带有层次关系的分类数据时,这种组合可以让查询和维护更高效。接下来,我们将详细讲解如何将类目树和闭包表结合起来,以实现企业级项目中的分类管理。 什么是类目树? 类目树是一种数据结构,它表示…

减少重复的请求之promise缓存池(构造器版) —— 缓存promise,多次promise等待并返回第一个promise的结果

减少重复的请求之promise缓存池 —— 缓存promise&#xff0c;多次promise等待并返回第一个promise的结果 背景简介 当一个业务组件初始化调用了接口&#xff0c;统一个页面多吃使用同一个组件&#xff0c;将会请求大量重复的接口 如果将promise当作一个普通的对象&#xff0…

LeetCode39:组合总和

题目&#xff1a; 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。 candidates 中的 同一个 数字可以 无限…

web:js原型污染简单解释

1. 什么是对象&#xff1f; 在 JavaScript 中&#xff0c;对象是一种包含属性和方法的数据结构。你可以把对象想象成一个存储键值对的容器。每个键&#xff08;key&#xff09;都有一个对应的值&#xff08;value&#xff09;&#xff0c;这个值可以是数据或者函数。 let per…