利用streamlit开发大模型API调用对话网页应用

利用streamlit开发大模型API调用对话网页应用

介绍

Streamlit是一个用于构建数据应用的开源框架,其简单易用的界面使得数据科学家和开发人员能够快速创建交互式应用。而OpenAI API则提供了强大的语言模型,可以生成自然语言响应。将这两者结合起来,可以轻松创建一个与用户进行对话的应用,用于测试大模型API。
在这里插入图片描述

整体代码

事前准备,确保已正确安装所需库:

pip install openai==0.28
pip install streamlit==1.35

理论上兼容openai的大模型API都可以使用;
代码:

import streamlit as st
import openai# 设置页面配置
st.set_page_config(page_title="LLM Chat App",page_icon="💬",layout="centered",
)# 应用标题
st.title("LLM Chat App")# 输入API参数
st.sidebar.header("API Configuration")
api_base_url = st.sidebar.text_input("API Base URL", "https://api.deepseek.com/v1")
api_key = st.sidebar.text_input("API Key", type="password")
model_name = st.sidebar.text_input("Model Name", "deepseek-chat")# 设置OpenAI API密钥和base URL
openai.api_key = api_key
openai.api_base = api_base_url# 聊天记录
if "messages" not in st.session_state:st.session_state.messages = []# 显示聊天记录
def display_chat(messages):for i, message in enumerate(messages):role = message["role"]content = message["content"]if role == "user":st.markdown(f"**I:** {content}", unsafe_allow_html=True)else:st.markdown(f"**AI:** {content}", unsafe_allow_html=True)# 发送消息并获取响应
def send_message(user_input):if user_input:st.session_state.messages.append({"role": "user", "content": user_input})# 调用OpenAI APItry:response = openai.ChatCompletion.create(model=model_name,messages=st.session_state.messages,)response_message = response["choices"][0]["message"]["content"]st.session_state.messages.append({"role": "assistant", "content": response_message})# 刷新页面以显示对话结果st.rerun()except openai.error.OpenAIError as e:st.error(f"OpenAI API Error: {e}")# 显示聊天记录
display_chat(st.session_state.messages)# 输入区域
if api_key and api_base_url and model_name:user_input = st.text_input("You:")if st.button("Send"):send_message(user_input)
else:st.warning("Please enter your API Base URL, API Key, and Model Name in the sidebar.")

常用大模型API介绍

大模型API是接入大模型的基础设施,网上各种AI公司都提供这类服务,并且大多在新用户注册的时候都送大量免费tokens,用来测试练习绰绰有余;一些常用的大模型API如下:

服务商网站
deepseekhttps://platform.deepseek.com/
质谱AIhttps://open.bigmodel.cn/
kimihttps://platform.moonshot.cn/

使用方法都大同小异,在其开发者平台获取API与API key后,即可实现调用;

代码片段说明

每段代码的详细功能如下,便于修改;

设置页面配置

首先,我们需要设置页面的基本配置:

st.set_page_config(page_title="LLM Chat App",page_icon="💬",layout="centered",
)

这段代码设置了页面的标题、图标和布局。page_title设置了页面的标题为“LLM Chat App”,page_icon设置了一个聊天图标,而layout参数设置页面布局为居中显示。

应用标题

接下来,我们为应用添加一个标题:

st.title("LLM Chat App")

st.title函数会在页面顶部显示一个大标题。

输入API参数

我们需要在侧边栏中输入API配置参数:

st.sidebar.header("API Configuration")
api_base_url = st.sidebar.text_input("API Base URL", "https://api.deepseek.com/v1")
api_key = st.sidebar.text_input("API Key", type="password")
model_name = st.sidebar.text_input("Model Name", "deepseek-chat")

这里,我们在侧边栏添加了一个标题,并分别为API Base URL、API Key和Model Name创建了输入框。type="password"参数确保API Key输入框为密码形式,隐藏用户输入的内容。

设置OpenAI API密钥和Base URL

接下来,我们设置OpenAI API的密钥和Base URL:

openai.api_key = api_key
openai.api_base = api_base_url

通过将用户输入的API密钥和Base URL赋值给openai.api_keyopenai.api_base,我们可以确保后续API调用使用这些参数。

聊天记录

我们需要保存和显示聊天记录:

if "messages" not in st.session_state:st.session_state.messages = []

st.session_state是Streamlit提供的一个会话状态字典,可以在不同的交互之间保存数据。我们检查st.session_state中是否存在messages键,如果不存在,则初始化一个空列表。

显示聊天记录

我们创建一个函数来显示聊天记录:

def display_chat(messages):for i, message in enumerate(messages):role = message["role"]content = message["content"]if role == "user":st.markdown(f"**I:** {content}", unsafe_allow_html=True)else:st.markdown(f"**AI:** {content}", unsafe_allow_html=True)

这个函数遍历消息列表,并根据消息的角色(用户或AI)以不同的格式显示内容。

发送消息并获取响应

我们创建一个函数来处理用户输入并获取AI的响应:

def send_message(user_input):if user_input:st.session_state.messages.append({"role": "user", "content": user_input})# 调用OpenAI APItry:response = openai.ChatCompletion.create(model=model_name,messages=st.session_state.messages,)response_message = response["choices"][0]["message"]["content"]st.session_state.messages.append({"role": "assistant", "content": response_message})# 刷新页面以显示对话结果st.rerun()except openai.error.OpenAIError as e:st.error(f"OpenAI API Error: {e}")

这个函数首先将用户输入添加到聊天记录中,然后调用OpenAI API获取响应,并将AI的响应也添加到聊天记录中。如果调用过程中发生错误,则显示错误信息。

显示聊天记录

在主程序中,我们调用display_chat函数显示聊天记录:

display_chat(st.session_state.messages)

输入区域

最后,我们创建用户输入区域和发送按钮:

if api_key and api_base_url and model_name:user_input = st.text_input("You:")if st.button("Send"):send_message(user_input)
else:st.warning("Please enter your API Base URL, API Key, and Model Name in the sidebar.")

如果API配置参数全部填入,我们显示一个输入框和发送按钮。用户输入消息后点击“Send”按钮,会调用send_message函数处理消息。否则,显示一个警告信息,提醒用户输入必要的API参数。

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

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

相关文章

【Computer Security : Art and Science】【Second Edition】

以下是书的目录: #### 第一部分:介绍 1. 计算机安全概述 - 1.1 基本组件 - 1.2 威胁 - 1.3 策略与机制 - 1.4 假设与信任 - 1.5 保证 - 1.6 操作问题 - 1.7 人为问题 - 1.8 综合概述 - 1.9 总结 - 1.10 研究问…

redis-基础篇(2)

黑马redis-基础篇笔记 3. redis的java客户端-Jedis 在Redis官网中提供了各种语言的客户端,地址:https://redis.io/docs/clients/ 标记为❤的就是推荐使用的java客户端,包括: Jedis和Lettuce:这两个主要是提供了Redi…

半结构化数据

定义: 半结构化数据是一种数据类型,它既不是完全结构化也不是完全非结构化。 特点: 元素组合、元素可变性、位置和顺序可变、重复性、可嵌套 应用: 网页内容、xml文档、json对象、电子邮件、日志文件 半结构化可转换成结构化…

webClient + fastJSON2 获取json格式的数据,同时解析至java class 并 下划线转驼峰

webClient中 .accept(MediaType.APPLICATION_JSON) 决定返回值是什么格式一般情况可以不写,但这里要获取JSON格式的 .bodyToMono(String.class)指定返回类型 fastJSON2中 Student student JSON.parseObject(result, Student.class, JSONReader.Feature.SupportSm…

# 消息中间件 RocketMQ 高级功能和源码分析(十)

消息中间件 RocketMQ 高级功能和源码分析(十) 一、消息中间件 RocketMQ 源码分析: 消息消费概述 1、集群模式和广播模式 消息消费以组的模式开展,一个消费组内可以包含多个消费者,每一个消费者组可订阅多个主题&…

PointCloudLib 点云边缘点提取 C++版本

0.实现效果 1.算法原理 PCL(Point Cloud Library)中获取点云边界的算法主要基于点云数据的几何特征和法向量信息。以下是对该算法的详细解释,按照清晰的格式进行归纳: 算法概述 PCL中的点云边界提取算法主要用于从3D点云数据中识别并提取出位于物体边界上的点。这些边界…

邀请函 | 人大金仓邀您相聚第十三届中国国际国防电子展览会

盛夏六月 备受瞩目的 第十三届中国国际国防电子展览会 将于6月26日至28日 在北京国家会议中心盛大举办 作为数据库领域国家队 人大金仓 将携系列行业解决方案 和创新实践成果亮相 期待您莅临指导 ↓↓↓↓↓↓ CIDEX 2024 中国国际国防电子展览会(简称CIDEX&#xf…

前端核心框架Vue指令详解

目录 ▐ 关于Vue指令的介绍 ▐ v-text与v-html ▐ v-on ▐ v-model ▐ v-show与v-if ▐ v-bind ▐ v-for ▐ 前言:在学习Vue框架过程中,大家一定要多参考官方API ! Vue2官方网址https://v2.cn.vuejs.org/v2/guide/ ▐ 关于Vue指令的…

免费制作流程图网页版本

超级好用的5个免费在线版流程图制作网站_流程图网站-CSDN博客

汽车IVI中控开发入门及进阶(三十):视频图像滚动问题分析(imx6+TVP5150+Camera)

前言: DA主控SOC采用imx6,TVP5150作为camera摄像头视频的解码decode芯片,imx6采用linux系统。 关于imx6,请参阅:汽车IVI中控开发入门及进阶(二十九):i.MX6-CSDN博客 Contributor III:

multiprocessing多进程计算及与rabbitmq消息通讯实践

1. 需求与设计 我所设计的计算服务旨在满足多个客户对复杂计算任务的需求。由于这些计算任务通常耗时较长且资源消耗较大,为了优化客户体验并减少等待时间,我采取了并行计算的策略来显著提升计算效率。 为实现这一目标,我计划利用Python的m…

Vue的移动端开发:使用Vue和相关技术,例如Weex或者Nativescript,进行移动端开发

介绍 Vue.js Vue.js 的核心概念和特性: 响应式数据绑定:Vue.js 的一个核心特性就是其响应式数据绑定系统,这意味着当数据更新时,所有运用到这些数据的地方都会适时地更新。组件化:Vue.js 很大程度上依赖于组件化,这意味着你可以创建可重复使用的代码片段,显著提高开发效…

基于Java实训中心管理系统设计和实现(源码+LW+调试文档+讲解等)

💗博主介绍:✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者,博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 🌟文末获取源码数据库🌟 感兴趣的可以先收藏起来,…

实现具有多个实现类的接口并为每个实现类定义一个名字的方法

在Java中,实现具有多个实现类的接口并为每个实现类定义一个名字的方法,可以通过使用工厂模式或服务定位器模式来完成。以下是使用工厂模式的一个示例: 定义接口和实现类 首先,定义一个接口和多个实现类: // 接口 publ…

获取当前的域名与端口

在JavaScript中,你可以使用window.location对象来获取当前页面的URL,并从中提取域名和端口。但是,请注意,如果端口是默认的(例如,HTTP的80或HTTPS的443),则URL中可能不包含端口号。 …

EasyExcel导入导出Excel数据

EasyExcel 是阿里巴巴开源的一个用于读写Excel文件的Java库。它提供了简单的API,可以方便地操作Excel文件,特别适合处理大数据量的Excel文件。 EasyExcel的主要特点: 高性能:设计用于高效处理大数据量。内存管理:采用流模式读写…

堆(数据结构篇)

数据结构之堆(优先队列) 二叉堆 概念: 优先队列是一个根据优先性而先去执行操作的一种特殊队列,平常队列是先进先出,但是优先队列是根据优先级选择先出的元素。优先队列的主要操作有插入和删除最小值 堆(heap)通常是指二叉堆,因…

碳化硅陶瓷膜的生产工艺和应用

一、生产工艺 碳化硅陶瓷膜的生产工艺多样,其中浸渍提拉法和喷涂法为两大主流技术。 浸渍提拉法 浸渍提拉法是一种广泛应用的制备方法。其过程主要包括:先将陶瓷颗粒或者聚合物前体分散在水或有机溶剂中,形成均质稳定的制膜液。随后&#xff…

Jenkins macos 下 failed to create dmg 操作不被允许hdiutil: create failed - 操作不被允许?

解决方案: 打开设置,选择“隐私与安全”,选择“完全磁盘访问权限”,点击“”,选择jenkins的路径并添加。 同理,添加java的访问权限。

Python14 面向对象编程

1.什么是面向对象编程OOP Python的面向对象编程(Object-Oriented Programming,简称OOP)是一种编程范式,它使用“对象”来设计应用程序和计算机程序。这些对象由数据和能够操作这些数据的方法组成。面向对象编程的主要目标是提高软…