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

测试使用的代码如下

复制代码
import streamlit as st
from langchain_aws import ChatBedrock

def 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.")

运行之后界面如下所示

相关推荐
爱喝白开水a15 小时前
LangChain 基础系列之 Prompt 工程详解:从设计原理到实战模板_langchain prompt
开发语言·数据库·人工智能·python·langchain·prompt·知识图谱
cooldream200915 小时前
LangChain PromptTemplate 全解析:从模板化提示到智能链构
langchain·prompt·prompttemplate
serve the people15 小时前
LangChain 表达式语言核心组合:Prompt + LLM + OutputParser
java·langchain·prompt
大模型真好玩21 小时前
LangGraph实战项目:从零手搓DeepResearch(二)——DeepResearch架构设计与实现
人工智能·python·langchain
梵得儿SHI1 天前
Prompt Engineering 核心知识:从基础模式到思维链,掌握大模型高效交互秘籍
大模型·prompt·交互·提示词·对话·大模型提问艺术·极简指令
王道长服务器 | 亚马逊云1 天前
AWS CloudTrail:让每一次操作都“有迹可循”
服务器·网络·云计算·智能路由器·aws
不知道累,只知道类1 天前
Java 在AWS上使用SDK凭证获取顺序
java·aws
王道长AWS_服务器1 天前
AWS Elastic Load Balancing(ELB)—— 多站点负载均衡的正确打开方式
后端·程序员·aws
IT小哥哥呀1 天前
工业互联与设备IOT助力生产制造实践分享
物联网·交互·制造·简单工厂模式
AWS官方合作商1 天前
AWS WAF 深度体验:全新控制台,开启云原生WAF与CloudFront无缝联防新纪元
云原生·aws