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

测试使用的代码如下

1. import streamlit as st
2. from langchain_aws import ChatBedrock
4. def chat_with_model(prompt, model_id):
5.     llm = ChatBedrock(credentials_profile_name="default", model_id=model_id, region_name="us-east-1")
6.     res = llm.invoke(prompt)
7.     return res.content
9. # Streamlit app
10. st.title("LangChain AWS Chat Interface")
12. # Sidebar for model selection
13. models = {
14.     "Claude-3 Sonnet": "anthropic.claude-3-sonnet-20240229-v1:0",
15.     "titan": "amazon.titan-text-express-v1",
16.     "Claude-3 haiku": "anthropic.claude-3-haiku-20240307-v1:0"
17. }
19. model_choice = st.sidebar.selectbox("Select a Model", list(models.keys()))
20. model_id = models[model_choice]
22. # Text area for user input
23. prompt = st.text_area("Enter your prompt here:", "")
25. if st.button("Send"):
26.     if prompt:
27.         response = chat_with_model(prompt, model_id)
28.         st.write(f"模型返回的结果:\n{response}")
29.     else:
30.         st.write("Please enter a prompt.")

复制代码

运行代码
streamlit run app.py
运行结果如下

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

1. import streamlit as st
2. from langchain_aws import ChatBedrock
4. # 定义与模型交互的函数
5. def chat_with_model(prompt, model_id, history):
6.     llm = ChatBedrock(credentials_profile_name="default", model_id=model_id, region_name="us-east-1")
7.     full_prompt = "\n".join(history + [prompt])
8.     res = llm.invoke(full_prompt)
9.     return res.content
11. # 初始化 Streamlit 应用
12. st.set_page_config(page_title="Bedrock Client", layout="wide")
13. st.title("Bedrock Client")
15. # 定义 CSS 样式
16. st.markdown(
17.     """
18.     <style>
19.     .sidebar .sidebar-content {
20.         background-color: #f0f0f5;
21.     }
22.     .main .block-container {
23.         padding: 2rem;
24.     }
25.     .chat-history {
26.         max-height: 400px;
27.         overflow-y: auto;
28.         padding: 1rem;
29.         background-color: #ffffff;
30.         border: 1px solid #ddd;
31.         border-radius: 8px;
32.         margin-bottom: 1rem;
33.     }
34.     .chat-input {
35.         width: 100%;
36.         padding: 1rem;
37.         border: 1px solid #ddd;
38.         border-radius: 8px;
39.     }
40.     </style>
41.     """,
42.     unsafe_allow_html=True
43. )
45. # 模型字典
46. models = {
47.     "Claude-3 Sonnet": "anthropic.claude-3-sonnet-20240229-v1:0",
48.     "titan": "amazon.titan-text-express-v1",
49.     "Claude-3 haiku": "anthropic.claude-3-haiku-20240307-v1:0"
50. }
52. # 侧边栏选择模型
53. st.sidebar.header("选择模型")
54. model_choice = st.sidebar.selectbox("Select a Model", list(models.keys()))
55. model_id = models[model_choice]
57. # 检查 session_state 中是否有对话历史记录
58. if "history" not in st.session_state:
59.     st.session_state.history = []
61. # 主界面布局
62. st.sidebar.title("会话")
63. st.sidebar.button("新建对话", on_click=lambda: st.session_state.update({"history": []}))
64. st.sidebar.markdown(f"**当前会话** ({len(st.session_state.history) // 2} 条对话)")
66. # 显示对话历史记录
67. st.markdown("### 对话记录")
68. chat_history_container = st.container()
69. with chat_history_container:
70.     if st.session_state.history:
71.         for message in st.session_state.history:
72.             st.markdown(f"<div class='chat-history'>{message}</div>", unsafe_allow_html=True)
73.     else:
74.         st.markdown("<div class='chat-history'>暂无对话记录</div>", unsafe_allow_html=True)
76. # 输入区域和发送按钮
77. prompt = st.text_input("Enter your prompt here:", "", key="input", placeholder="输入消息，Shift + Enter 换行 / 触发补全，触发命令", label_visibility="collapsed")
79. if st.button("发送"):
80.     if prompt:
81.         response = chat_with_model(prompt, model_id, st.session_state.history)
82.         st.session_state.history.append(f"User: {prompt}")
83.         st.session_state.history.append(f"Model: {response}")
84.         st.experimental_rerun()  # 刷新页面以显示新对话
85.     else:
86.         st.write("Please enter a prompt.")

复制代码

运行之后界面如下所示
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。