利用streamlit结合langchain_aws实现claud3的页面交互

2024-06-08 10:04

本文主要是介绍利用streamlit结合langchain_aws实现claud3的页面交互,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

测试使用的代码如下

import streamlit as st
from langchain_aws import ChatBedrockdef chat_with_model(prompt, model_id):llm = ChatBedrock(credentials_profile_name="default", model_id=model_id, region_name="us-east-1")res = llm.invoke(prompt)return res.content# Streamlit app
st.title("LangChain AWS Chat Interface")# Sidebar for model selection
models = {"Claude-3 Sonnet": "anthropic.claude-3-sonnet-20240229-v1:0","titan": "amazon.titan-text-express-v1","Claude-3 haiku": "anthropic.claude-3-haiku-20240307-v1:0"
}model_choice = st.sidebar.selectbox("Select a Model", list(models.keys()))
model_id = models[model_choice]# Text area for user input
prompt = st.text_area("Enter your prompt here:", "")if st.button("Send"):if prompt:response = chat_with_model(prompt, model_id)st.write(f"模型返回的结果:\n{response}")else:st.write("Please enter a prompt.")

运行代码

streamlit run app.py

运行结果如下

为了实现更友好的界面,修改源码如下

import streamlit as st
from langchain_aws import ChatBedrock# 定义与模型交互的函数
def chat_with_model(prompt, model_id, history):llm = ChatBedrock(credentials_profile_name="default", model_id=model_id, region_name="us-east-1")full_prompt = "\n".join(history + [prompt])res = llm.invoke(full_prompt)return res.content# 初始化 Streamlit 应用
st.set_page_config(page_title="Bedrock Client", layout="wide")
st.title("Bedrock Client")# 定义 CSS 样式
st.markdown("""<style>.sidebar .sidebar-content {background-color: #f0f0f5;}.main .block-container {padding: 2rem;}.chat-history {max-height: 400px;overflow-y: auto;padding: 1rem;background-color: #ffffff;border: 1px solid #ddd;border-radius: 8px;margin-bottom: 1rem;}.chat-input {width: 100%;padding: 1rem;border: 1px solid #ddd;border-radius: 8px;}</style>""",unsafe_allow_html=True
)# 模型字典
models = {"Claude-3 Sonnet": "anthropic.claude-3-sonnet-20240229-v1:0","titan": "amazon.titan-text-express-v1","Claude-3 haiku": "anthropic.claude-3-haiku-20240307-v1:0"
}# 侧边栏选择模型
st.sidebar.header("选择模型")
model_choice = st.sidebar.selectbox("Select a Model", list(models.keys()))
model_id = models[model_choice]# 检查 session_state 中是否有对话历史记录
if "history" not in st.session_state:st.session_state.history = []# 主界面布局
st.sidebar.title("会话")
st.sidebar.button("新建对话", on_click=lambda: st.session_state.update({"history": []}))
st.sidebar.markdown(f"**当前会话** ({len(st.session_state.history) // 2} 条对话)")# 显示对话历史记录
st.markdown("### 对话记录")
chat_history_container = st.container()
with chat_history_container:if st.session_state.history:for message in st.session_state.history:st.markdown(f"<div class='chat-history'>{message}</div>", unsafe_allow_html=True)else:st.markdown("<div class='chat-history'>暂无对话记录</div>", unsafe_allow_html=True)# 输入区域和发送按钮
prompt = st.text_input("Enter your prompt here:", "", key="input", placeholder="输入消息,Shift + Enter 换行 / 触发补全,触发命令", label_visibility="collapsed")if st.button("发送"):if prompt:response = chat_with_model(prompt, model_id, st.session_state.history)st.session_state.history.append(f"User: {prompt}")st.session_state.history.append(f"Model: {response}")st.experimental_rerun()  # 刷新页面以显示新对话else:st.write("Please enter a prompt.")

运行之后界面如下所示

 

这篇关于利用streamlit结合langchain_aws实现claud3的页面交互的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1041875

相关文章

C++对象布局及多态实现探索之内存布局(整理的很多链接)

本文通过观察对象的内存布局,跟踪函数调用的汇编代码。分析了C++对象内存的布局情况,虚函数的执行方式,以及虚继承,等等 文章链接:http://dev.yesky.com/254/2191254.shtml      论C/C++函数间动态内存的传递 (2005-07-30)   当你涉及到C/C++的核心编程的时候,你会无止境地与内存管理打交道。 文章链接:http://dev.yesky

LangChain转换链:让数据处理更精准

1. 转换链的概念 在开发AI Agent(智能体)时,我们经常需要对输入数据进行预处理,这样可以更好地利用LLM。LangChain提供了一个强大的工具——转换链(TransformChain),它可以帮我们轻松实现这一任务。 转换链(TransformChain)主要是将 给定的数据 按照某个函数进行转换,再将 转换后的结果 输出给LLM。 所以转换链的核心是:根据业务逻辑编写合适的转换函

JAVA读取MongoDB中的二进制图片并显示在页面上

1:Jsp页面: <td><img src="${ctx}/mongoImg/show"></td> 2:xml配置: <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001

通过SSH隧道实现通过远程服务器上外网

搭建隧道 autossh -M 0 -f -D 1080 -C -N user1@remotehost##验证隧道是否生效,查看1080端口是否启动netstat -tuln | grep 1080## 测试ssh 隧道是否生效curl -x socks5h://127.0.0.1:1080 -I http://www.github.com 将autossh 设置为服务,隧道开机启动

JavaScript全屏,监听页面是否全屏

在JavaScript中,直接监听浏览器是否进入全屏模式并不直接支持,因为全屏API主要是关于请求和退出全屏模式的,而没有直接的监听器可以告知页面何时进入或退出全屏模式。但是,你可以通过在你的代码中跟踪全屏状态的改变来模拟这个功能。 以下是一个基本的示例,展示了如何使用全屏API来请求全屏模式,并在请求成功或失败时更新一个状态变量: javascriptlet isInFullscreen =

时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测

时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测 目录 时序预测 | MATLAB实现LSTM时间序列未来多步预测-递归预测基本介绍程序设计参考资料 基本介绍 MATLAB实现LSTM时间序列未来多步预测-递归预测。LSTM是一种含有LSTM区块(blocks)或其他的一种类神经网络,文献或其他资料中LSTM区块可能被描述成智能网络单元,因为

vue项目集成CanvasEditor实现Word在线编辑器

CanvasEditor实现Word在线编辑器 官网文档:https://hufe.club/canvas-editor-docs/guide/schema.html 源码地址:https://github.com/Hufe921/canvas-editor 前提声明: 由于CanvasEditor目前不支持vue、react 等框架开箱即用版,所以需要我们去Git下载源码,拿到其中两个主

android一键分享功能部分实现

为什么叫做部分实现呢,其实是我只实现一部分的分享。如新浪微博,那还有没去实现的是微信分享。还有一部分奇怪的问题:我QQ分享跟QQ空间的分享功能,我都没配置key那些都是原本集成就有的key也可以实现分享,谁清楚的麻烦详解下。 实现分享功能我们可以去www.mob.com这个网站集成。免费的,而且还有短信验证功能。等这分享研究完后就研究下短信验证功能。 开始实现步骤(新浪分享,以下是本人自己实现

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作,我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情: 1.创建toolbar布局跟drawerlayout布局 <?xml vers

基于Springboot + vue 的抗疫物质管理系统的设计与实现

目录 📚 前言 📑摘要 📑系统流程 📚 系统架构设计 📚 数据库设计 📚 系统功能的具体实现    💬 系统登录注册 系统登录 登录界面   用户添加  💬 抗疫列表展示模块     区域信息管理 添加物资详情 抗疫物资列表展示 抗疫物资申请 抗疫物资审核 ✒️ 源码实现 💖 源码获取 😁 联系方式 📚 前言 📑博客主页: