超炫酷, 不用学前端也能自己做网页!这个Python库,3分钟内复刻GPT WEB应用

大家好,我是海鸽。

今天,我要和大家分享如何将请求 GPT 的案例,快速“复刻”成 GPT 网页版。这不仅简单,而且对于我们这些后端开发者来说,简直是福音!

先睹为快

看看这个界面,是不是感觉很熟悉?

这就是我们今天要介绍的主角-Streamlit,此篇文章我们仅仅从复刻一个聊天机器人的角度介绍,认识一下其强大之处。

初识Streamlit

Streamlit 是一个开源的 Python 库,它允许数据科学家快速地将数据脚本转换为交互式网页应用程序。

使用 Streamlit,你可以轻松地创建和分享数据应用,而无需深入了解前端开发。它特别适合于机器学习、数据分析和数据可视化项目。

白话一下就是,Streamlit 可以让没有任何前端基础的人,使用 Python 开发 Web 应用,没有复杂的配置,没有复杂的语法,开箱即用,拎包入住。

Streamlit 的主要特性

Streamlit 作为一个用于快速构建数据应用的 Python 库,其核心特性主要包括:

  1. 快速开发:使用 Streamlit,你可以用很少的代码快速搭建起一个基本的 Web 应用。

  2. 数据可视化:Streamlit 支持多种数据可视化库,如 Matplotlib、Plotly、Bokeh 等,可以轻松地将图表和数据展示在 Web 应用中。

  3. 部署简单:Streamlit 应用可以通过 Streamlit 共享、部署到 Heroku、AWS 等云平台,或者使用 Docker 容器化部署。

  4. 易于集成:Streamlit 可以很容易地与现有的 Python 数据科学栈集成,包括 Pandas、NumPy、Scikit-learn 等。

这些特性使得 Streamlit 成为数据科学家、分析师和机器学习工程师快速展示和分享他们工作的强大工具。

Streamlit 的安装和使用过程相对简单,以下是基本步骤:

安装 Streamlit

首先,你需要确保你的计算机上安装了 Python。然后,通过 pip 安装 Streamlit。在命令行中运行以下命令:

pip install streamlit==1.36.0

创建一个 Streamlit 应用

  1. 创建 Python 脚本:创建一个新的 Python 文件,例如 app.py

  2. 创建.env配置文件:免费的GPT KEY获取、免费的千义通问KEY获取

OPENAI_API_KEY=sk-Y8wTnsdeG************7gw*******3LG
DASHSCOPE_API_KEY=sk-b***********192e00
  1. 编写代码:在 app.py 中编写你的 Streamlit 应用代码。以下是一个简单的示例:
# !usr/bin/env python
# -*- coding:utf-8 _*-
# __author__:lianhaifeng# 导入 Streamlit 库
import streamlit as stfrom gpt_bot_stream import stream_invoke
from qw_bot import xiao_hei_zi# 使用 Streamlit 的 API 来创建应用
st.title('10分钟编写大模型应用')st.caption('利用大模型和Streamlit复刻一个闽南菜助手应用')with st.sidebar:option = st.selectbox('选择大模型引擎',('GPT-3.5', 'GPT-4', "qwen-turbo", "qwen-max"))model_mapping = {'GPT-3.5': 'gpt-3.5-turbo','GPT-4': 'gpt-4','qwen-turbo': 'qwen-turbo','qwen-max': 'qwen-max',
}def set_model(model_option: str):"""根据用户选择设置模型参数"""return model_mapping.get(model_option, "gpt-3.5-turbo")# 根据选项设置会话状态中的OpenAI模型参数
st.session_state["openai_model"] = set_model(option)# 检查会话状态中是否已有消息列表,如果没有,则初始化为空列表
if "messages" not in st.session_state:st.session_state.messages = []# 遍历会话状态中的消息列表
for message in st.session_state.messages:# 使用与消息角色对应的聊天消息区域with st.chat_message(message["role"]):# 在聊天消息区域显示消息内容st.markdown(message["content"])
# 初始化一个聊天输入框,鼓励用户输入消息并@特定的助手
prompt = st.chat_input("随时@你想要的[海哥Python]+ 使用闽南菜助手!")# 如果用户输入了消息
if prompt:# 将用户消息添加到会话状态中的消息列表st.session_state.messages.append({"role": "user", "content": prompt})# 显示用户消息with st.chat_message("user"):st.markdown(prompt)# 检查是否启用了特定的OpenAI模型if st.session_state["openai_model"] in ["gpt-3.5-turbo", "gpt-4", "qwen-turbo", "qwen-max"]:# 显示助手正在思考的消息with st.chat_message("assistant"):with st.spinner("Thinking..."):# 准备向后端服务请求的数据request_inputs = {"messages": st.session_state.messages,"model_name": st.session_state["openai_model"]}print(request_inputs)# 调用后端服务,获取助手的回复if request_inputs["model_name"] in ["qwen-turbo", "qwen-max"]:stream_invoke = xiao_hei_ziresponse = st.write_stream(stream_invoke(**request_inputs))# 显示助手的回复st.markdown(response)# 将助手的回复添加到消息列表st.session_state.messages.append({"role": "assistant", "content": response})

导入的 GPT 大模型请求(gpt_bot_stream.py):

#! -*-conding=: UTF-8 -*-from langchain_openai import ChatOpenAI
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import StrOutputParserfrom dotenv import load_dotenv, find_dotenv  # 导入dotenv库,用于加载环境变量_ = load_dotenv(find_dotenv())  # 加载.env文件中的环境变量output_parser = StrOutputParser()def stream_invoke(messages, model_name: str = "gpt-3.5-turbo"):llm = ChatOpenAI(temperature=0.9, streaming=True, base_url="https://api.chatanywhere.com.cn/v1",model_name=model_name)prompt = ChatPromptTemplate.from_messages([("system", "你是世界级的大厨,精通闽南菜,请根据提供的信息,回答问题。"),("user", "{input}")])prompt_llm = prompt | llm | output_parserreturn prompt_llm.stream(messages)if __name__ == '__main__':for response in stream_invoke(messages="介绍一下泉州海蛎煎?详细些!"):print(response)

导入的千问大模型请求(qw_bot.py):

#! -*-conding=: UTF-8 -*-from dotenv import find_dotenv, load_dotenv
from langchain_community.llms import Tongyi
from langchain_core.runnables import RunnableSequence
from langchain.prompts import PromptTemplateload_dotenv(find_dotenv())def xiao_hei_zi(messages: str = '介绍一下泉州海蛎煎?详细些!', model_name: str = "qwen-turbo"):llm = ""match model_name:case "qwen-turbo":llm = Tongyi(temperature=1, model_name=model_name)case "qwen-max":llm = Tongyi(temperature=1, model_name=model_name)if not llm:llm = Tongyi(temperature=1, model_name=model_name)print(llm.model_name)template = '''你是世界级的大厨,精通闽南菜,请根据提供的信息,回答问题,详细些!。问题:{question}'''prompt = PromptTemplate(template=template,input_variables=["question"])chain = RunnableSequence(prompt | llm)res = chain.stream({"question": messages})print(res)return resif __name__ == '__main__':xiao_hei_zi()

运行 Streamlit 应用

在命令行中,确保你位于包含 app.py 的目录下,然后运行以下命令:

streamlit run app.py

这将启动一个本地服务器,并在默认的浏览器中打开你的 Streamlit 应用。你可以通过 http://localhost:8501 访问它。

🌟 结语

如果分享你的信息,对你有用!别忘了三连击哦!!点赞在看关注

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

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

相关文章

php,python AES/CBC/PKCS7Padding加密解密 base64/hex编码

1. python版本 import base64 from Crypto.Cipher import AES from Crypto.Util.Padding import pad, unpadclass AESUtilCBC:def __init__(self, key, iv):self.key key.encode(utf-8)self.iv iv.encode(utf-8)self.pad_length AES.block_sizedef encrypt(self, data):try…

flutter是app跨平台最优解吗?

哈喽,我是老刘 最近在知乎上看到这样一个问题 我们先来解释一下问题中碰到的几个现象的可能原因,然后聊聊跨平台的最优解问题 问题解释 1、跟手、丝滑问题 这个问题其实很多人是有误解的,觉得原生的就丝滑跟手 其实不是这样的 我在做Flut…

『 Linux 』 进程间通信 - 匿名管道 (万字)

文章目录 什么是管道匿名管道的直接原理pipe( )系统调用接口匿名管道代码示例匿名管道的特征总结 什么是管道 管道(Pipe) 是一种基本的进程间通信(IPC)机制,允许一个进程与另一个进程之间进行数据传输; 管道工作方式类似于生活中的水管因此命名为管道,数据从一端流入另一段流出…

NSSCTF-Web题目16

目录 [GDOUCTF 2023]受不了一点 1、题目 2、知识点 3、思路 [UUCTF 2022 新生赛]ez_upload 1、题目 2、知识点 3、思路 [GDOUCTF 2023]受不了一点 1、题目 2、知识点 php代码审计、数组绕过、弱比较绕过 3、思路 打开题目,出现代码,我们进行代…

【STM32】江科大STM32学习笔记汇总(已完结)

00. 目录 文章目录 00. 目录01. STM32学习笔记汇总02. 相关资料下载03. 打赏04. 附录 01. STM32学习笔记汇总 【STM32】STM32学习笔记-课程简介(01) 【STM32】STM32学习笔记-STM32简介(02) 【STM32】STM32学习笔记-软件安装(03) 【STM32】STM32学习笔记-新建工程(04) 【ST…

VUE div的右上角的角标/标签

一、效果图 二、代码 <div class"comp-overview"><div class"overview-item" v-for"(item,index) in overviewInfoList" :key"index"><div class"angle_mark"><span>{{item.label}}</span>&…

2024上海初中生古诗文大会倒计时4个月:单选题真题示例和独家解析

现在距离2024年初中生古诗文大会还有4个多月时间&#xff0c;我们继续来看10道选择题真题和详细解析&#xff0c;以下题目截取自我独家制作的在线真题集&#xff0c;都是来自于历届真题&#xff0c;去重、合并后&#xff0c;每道题都有参考答案和解析。 为帮助孩子自测和练习&…

Qt 信号与槽的使用详解 - 多种绑定形式、同步异步、Lambda表达式等

Qt 信号与槽的使用详解 - 多种绑定形式、同步异步、Lambda表达式等 引言一、信号与槽常见的绑定形式二、信号与槽的连接方式 - 同步异步 引言 在Qt框架中&#xff0c;信号与槽&#xff08;Signals and Slots&#xff09;机制是一种强大的通信方式&#xff0c;它允许对象之间进…

Linux常用命令、基本配置、shell基本语法整合

Linux常用命令的使用 Linux文件系统 和 Windows文件系统目录&#xff1a; Windows是分C盘、D盘、E盘…的&#xff0c;但是在Linux中是有一个最大的目录&#xff0c;称之为根目录&#xff0c;用 / 表示&#xff0c;根目录下面会有很多子目录&#xff0c;这些子目录其实可以理解…

百度comate 专业版免费试用90天

我发现一个编码效率提升好帮手——Baidu Comate&#xff0c;结合文心大模型和百度编程大数据&#xff0c;为你生成优质编程代码。现在通过我的链接注册&#xff0c;立得90天专业版体验卡&#xff0c;来吧&#xff0c;让我们一起释放“十倍”软件生产力&#xff01; https://com…

如何利用自助式商业智能(BI)打破组织中的数据孤岛?

前言 许多组织都存在数据问题。当许多员工远程工作&#xff08;或在混合环境中&#xff09;并在多个位置使用多个设备访问公司数据时&#xff0c;他们正在处理信息过载问题。这只会加剧数据孤岛的问题。 数据孤岛正是它听起来的样子&#xff1a;孤立在一个孤立的用户/环境中的…

[深度学习]循环神经网络RNN

RNN&#xff08;Recurrent Neural Network&#xff0c;即循环神经网络&#xff09;是一类用于处理序列数据的神经网络&#xff0c;广泛应用于自然语言处理&#xff08;NLP&#xff09;、时间序列预测、语音识别等领域。与传统的前馈神经网络不同&#xff0c;RNN具有循环结构&am…

【详述】BP神经网络建模流程一步一步详述

本文来自《老饼讲解-BP神经网络》https://www.bbbdata.com/ 目录 一、BP神经网络的建模流程二、BP神经网络的建模分步讲解2.1.数据归一化2.2.数据划分2.3.网络结构设置2.4.网络训练2.5.训练效果评估 本文梳理BP神经网络的建模流程&#xff0c;供大家建模时进行借鉴。 一、BP神经…

SPECweb2009调优指南

【写在前面】 飞腾开发者平台是基于飞腾自身强大的技术基础和开放能力&#xff0c;聚合行业内优秀资源而打造的。该平台覆盖了操作系统、算法、数据库、安全、平台工具、虚拟化、存储、网络、固件等多个前沿技术领域&#xff0c;包含了应用使能套件、软件仓库、软件支持、软件适…

计算机网络-BGP路由负载分担

在大型网络中&#xff0c;到达同一目的地通常会存在多条有效BGP路由&#xff0c;设备只会优选一条最优的BGP路由&#xff0c;将该路由加载到路由表中使用&#xff0c;这一特点往往会造成很多流量负载不均衡的情况。 通过配置BGP负载分担&#xff0c;可以使得设备同时将多条等代…

spring boot整合WebSocket实现群聊功能 通俗易懂教程

首先获取消息的内容&#xff0c;即payload。将payload转换为JSONObject对象&#xff0c;并从中获取消息类型type。如果消息类型是"join"&#xff0c;则从消息中获取群组ID&#xff0c;并将当前WebSocketSession的ID加入到该群组对应的Set中。如果消息类型是"lea…

Python爬取中国福彩网彩票数据并以图表形式显示

网页分析 首先打开中国福彩网&#xff0c;点击双色球&#xff0c;选择往期开奖栏目 进入栏目后&#xff0c;选定往期的奖金数目作为我们想要爬取的目标内容 明确目标后&#xff0c;开始寻找数据所在的位置 鼠标右击页面&#xff0c;打开网页源代码&#xff0c;在源代码中搜索…

vue3-openlayers 轨迹回放(历史轨迹)(ol-animation-path实现)

本篇介绍一下使用vue3-openlayers轨迹回放&#xff08;历史轨迹&#xff09;&#xff08;ol-animation-path实现&#xff09; 1 需求 轨迹回放&#xff08;历史轨迹&#xff09;实时轨迹 2 分析 轨迹回放&#xff08;历史轨迹&#xff09;&#xff0c;一般是一次性拿到所有…

功能测试【测试用例模板、Bug模板、手机App测试★】

功能测试 Day01 web项目环境与测试流程、业务流程测试一、【了解】web项目环境说明1.1 环境的定义&#xff1a;项目运行所需要的所有的软件和硬件组合1.2 环境(服务器)的组成&#xff1a;操作系统数据库web应用程序项目代码1.3 面试题&#xff1a;你们公司有几套环境&#xff1…

淘宝用户行为分析大数据可视化

文章目录 1. 项目概述2. 技术栈3. 目录结构4. 数据处理流程5. 前端部分5.1 HTML (index.html)5.2 CSS (layer.css)5.3 JavaScript (chart.js) 6. 后端部分7. 数据可视化7.1 ECharts 图表 8. 主要功能模块9. 代码解析10. 数据接口11. 项目功能描述12. 代码功能实现12.1 HTML (in…