วิธีสร้างแชทบอทแบบ Streamlit ใน 10 นาที

1. ให้คำแนะนำ

ในสตูดิโอ เราจะไปที่ หน้าแรก ในแถบด้านข้างทางซ้ายมือ

คุณควรเห็นส่วน คำแนะนำ อยู่ตรงกลางด้านหน้า คลิกที่ส่วนคำแนะนำเพื่อเพิ่มหรือแก้ไขคำแนะนำในรูปแบบข้อความธรรมดา

สิ่งนี้จะทำให้บอตของเรามีคำสั่ง บุคลิก และแนวทางป้องกัน โดยใช้ภาษาธรรมดา คุณสามารถบังคับบอตของคุณให้ทำตามพฤติกรรมที่ต้องการได้อย่างมีประสิทธิภาพ ทำให้บอตฟังดูเป็นมนุษย์มากขึ้น และ 

2. สร้างการไหล

นี่คือจุดที่รายละเอียดของบุคลิกภาพของบอทอยู่: การเข้าถึงข้อมูลที่เจาะจง ขั้นตอนแบบตายตัว การดำเนินการโค้ด ฯลฯ

อย่าประเมินพลังของความเรียบง่ายต่ำเกินไป โหนดอิสระเพียงโหนดเดียว สามารถแข่งขันกับฟังก์ชันการทำงานของตัวแทนการใช้เหตุผลได้ ฉันมีโหนดหนึ่งที่เชื่อมต่อกับฐานความรู้ (KB) ของฉัน

3. เพิ่มฐานความรู้

หากคำแนะนำเกี่ยวกับบรรยากาศ ฐานความรู้จะเป็นข้อเท็จจริงที่หนักแน่นและชัดเจน ในกรณีของฉัน ข้อเท็จจริงที่เป็นปัญหาคือไวน์ใน ชุดข้อมูล Wine Reviews ซึ่งเป็นรายการไวน์ คำอธิบาย และราคา ฉันจะถือว่านี่เป็นสินค้าคงคลังไวน์โดยพฤตินัยสำหรับบอตของเราเพื่อนำไปตรวจสอบโดยซอมเมลิเยร์

ฉันจะคลิกที่ ตาราง ในแผงด้านซ้าย แล้วคลิก ตารางใหม่ ที่ด้านซ้ายบนของเพจ และตั้งชื่อที่อธิบายให้ชัดเจน 

คลิกที่ จุดไข่ปลาแนวตั้ง (⋮) ที่ด้านบนขวา แล้วกด นำเข้า

ลากไฟล์ .csv ของคุณลงในโหมดที่ปรากฏขึ้นและทำตามขั้นตอนบนหน้าจอ

หากต้องการให้บอทของคุณเข้าถึงตารางได้ ให้ไปที่ ฐานความรู้ ในแถบด้านข้างทางซ้ายมือ

คลิก ไอคอนตาราง สีเขียวเล็กๆ และเลือกแหล่งที่มาที่เกี่ยวข้อง คลิก เพิ่มตาราง

ตรวจสอบให้แน่ใจว่าโฟลว์ของคุณสามารถเข้าถึงฐานความรู้ได้ และคุณก็พร้อมใช้งานแล้ว

1. เพิ่มข้อมูลประจำตัวของคุณ

class BotpressClient:
   def __init__(self, api_id=None, user_key=None):
       self.api_id = api_id or os.getenv("CHAT_API_ID")
       self.user_key = user_key or os.getenv("USER_KEY")
       self.base_url = f"{BASE_URI}/{self.api_id}"
       self.headers = {
           **HEADERS,
           "x-user-key": self.user_key,
       }

คุณสามารถเพิ่มของคุณได้อย่างอิสระ Chat API ID ในไฟล์ .env – ช่วยในการดีบักได้ แต่ก็ไม่จำเป็นอย่างยิ่ง เราจะจัดการกับ API ID และคีย์ผู้ใช้เมื่อเราสร้างแอป Streamlit

ฉันเก็บไว้ ฐาน_URI และ ส่วนหัว ในแบบแยกกัน ค่าคงที่.py ไฟล์สำหรับความยุ่งวุ่นวาย

# constants.py

BASE_URI = "https://chat.botpress.cloud"
HEADERS = {
   "accept": "application/json",
   "Content-Type": "application/json",
}

2. สร้างวิธีการร้องขอ

   def _request(self, method, path, json=None):
       url = f"{self.base_url}{path}"
       try:
           response = requests.request(method, url, headers=self.headers, json=json)
           response.raise_for_status()
           return response.json()
       except requests.HTTPError:
           return response.status_code, response.text


   # --- Core API Methods ---


   def get_user(self):
       return self._request("GET", "/users/me")


   def create_user(self, name, id):
       user_data = {"name": name, "id": id}
       return self._request("POST", "/users", json=user_data)


   def set_user_key(self, key):
       self.user_key = key
       self.headers["x-user-key"] = key


   def create_and_set_user(self, name, id):
       new_user = self.create_user(name, id)
       self.set_user_key(new_user["key"])


   def create_conversation(self):
       return self._request("POST", "/conversations", json={"body": {}})


   def list_conversations(self):
       return self._request("GET", "/conversations")


   def get_conversation(self, conversation_id):
       return self._request("GET", f"/conversations/{conversation_id}")


   def create_message(self, message, conversation_id):
       payload = {
           "payload": {"type": "text", "text": message},
           "conversationId": conversation_id,
       }
       return self._request("POST", "/messages", json=payload)


   def list_messages(self, conversation_id):
       return self._request("GET", f"/conversations/{conversation_id}/messages")

ดังที่กล่าวไว้ เกือบทั้งหมดนี้เชื่อมโยงกับจุดสิ้นสุดใน API ฉันแค่รวมไว้ในคลาส

3. สร้างตัวรับฟัง SSE

นี่คือขอบเขตของการแฮ็ก เพื่อฟังการอัปเดตการสนทนาและวนซ้ำไปยังฟรอนต์เอนด์ของ Streamlit ไคลเอนต์ต้องมีวิธีการฟังและยอมรับ เหตุการณ์ที่เซิร์ฟเวอร์ส่งมา จากบ็อตของเรา

 def listen_conversation(self, conversation_id):
       url = f"{self.base_url}/conversations/{conversation_id}/listen"
       for event in sseclient.SSEClient(url, headers=self.headers):
           print(event.data)
           if event.data == "ping":
               continue
           data = json.loads(event.data)["data"]
	    yield {"id": data["id"], "text": data["payload"]["text"]}

ฟังก์ชันนี้จะใช้ conversation_id (ซึ่งจะเข้าถึงได้โดยโปรแกรมภายในแอป) และให้ข้อมูลเข้ามาเมื่อเกิดขึ้น

1. ปรับเปลี่ยนโค้ดสำเร็จรูป

ในทางทฤษฎี คุณสามารถทำให้แอปทำงานได้โดยมีการเปลี่ยนแปลงเล็กน้อยในตัวอย่างสำเร็จรูปในตัวอย่าง Streamlit

# app.py


from client import BotpressClient
import streamlit as st
from constants import CONVERSATION_ID


st.title("Botpress Front-end for Streamlit")


client = BotpressClient(
   api_id=st.secrets["CHAT_API_ID"], user_key=st.secrets["USER_KEY"]
)


if "messages" not in st.session_state:
   messages = client.list_messages(CONVERSATION_ID)
   next_token = messages["meta"]["nextToken"]
   st.session_state.messages = messages["messages"][::-1]


for message in st.session_state.messages:
   with st.chat_message(message["userId"]):
       st.markdown(message["payload"]["text"])


if prompt := st.chat_input("*wine*-d it up"):
   st.session_state.messages.append({"role": "user", "content": prompt})


   with st.chat_message("user"):
       st.markdown(prompt)


   client.create_message(prompt, conversation_id=CONVERSATION_ID)
  
   with st.chat_message("assistant"):
response_box = st.empty()
       last_rendered = ""
	
       for message in client.listen_conversation(CONVERSATION_ID):


           message_id = message["id"]
           message_text = message["text"]


           if message_id != last_rendered:
               last_rendered = message_id
               response_box.markdown(message_text)
               st.session_state.messages.append(
                   {"role": "assistant", "content": message_text}
               )

เรากำลังอ่านตัวแปรลับที่นี่ ดังนั้นให้สร้างไฟล์ .streamlit/secrets.toml และวางตัวแปรของคุณไว้ภายใน:

รหัส API ของการสนทนา - “รหัส API ของคุณ”
รหัสผู้ใช้ - “รหัสผู้ใช้ของคุณ”

งานหนักกำลังเกิดขึ้นใน:

with st.chat_message("assistant"):
response_box = st.empty()
       last_rendered = ""
	
       for message in client.listen_conversation(CONVERSATION_ID):


           message_id = message["id"]
           message_text = message["text"]


           if message_id != last_rendered:
               last_rendered = message_id
               response_box.markdown(message_text)
               st.session_state.messages.append(
                   {"role": "assistant", "content": message_text}
               )

โดยที่ไคลเอนต์จะยึดติดกับองค์ประกอบการแชทเพื่อส่งและรับข้อความ

วิธีนี้ได้ผล แต่ไม่เหมาะเนื่องจากเหตุผลบางประการ:

• คุณจะต้องสร้างการสนทนาใหม่แยกต่างหาก
• ข้อความเก่าจะมีการจัดรูปแบบแตกต่างจากข้อความใหม่ เนื่องจากไม่มีการกำหนดบทบาท (ผู้ใช้หรือผู้ช่วย)
• คุณไม่สามารถสลับการสนทนาได้

2. สร้างการสนทนาแบบไดนามิก

เมื่อเริ่มต้นจากศูนย์ ฉันจะสร้างการสนทนาใหม่โดยอัตโนมัติหรือเปิดการสนทนาล่าสุด:

# app.py


from client import BotpressClient
import streamlit as st


st.title("Botpress Front-end for Streamlit")


client = BotpressClient(
   api_id=st.secrets["CHAT_API_ID"], user_key=st.secrets["users"][0]["key"]
)


# user info
user = client.get_user()
user_id = user["user"]["id"]


conversations = client.list_conversations()["conversations"]
conversation_ids = [conv["id"] for conv in conversations]




# conversation
def create_conversation():
   res = client.create_conversation()
   print(f"Created new conversation: {res}")
   conversation_id = res["conversation"]["id"]
   st.session_state.active_conversation = conversation_id
   st.session_state.messages = []
   st.rerun()




if not conversations:
   create_conversation()


if "active_conversation" not in st.session_state:
   st.session_state["active_conversation"] = conversations[0]["id"]

โปรดทราบว่าฉันได้แก้ไขคีย์ลับเพื่อให้สามารถจัดเก็บผู้ใช้หลายคนได้ คุณจะต้องแก้ไข .streamlit/ความลับ.toml ไฟล์เพื่อสะท้อนให้เห็นว่า:

[[ผู้ใช้]] คีย์ = "คีย์ผู้ใช้ของคุณ"

คุณสามารถทำซ้ำบล็อกนี้ได้มากเท่าที่คุณต้องการ โดยจัดเก็บผู้ใช้เป็น อาร์เรย์ของตาราง

3. ให้ผู้ใช้สร้างและสลับระหว่างการสนทนา

ตามที่หัวข้อบอกไว้ นี่จะสร้างรายการดรอปดาวน์ที่ด้านบนพร้อมด้วยปุ่มเพื่อให้คุณเลือกการสนทนาของคุณ

col1, col2 = st.columns([5, 1])
with col1:
   conversation_id = st.selectbox(
       "Select Conversation",
       options=[conv["id"] for conv in conversations],
       index=conversation_ids.index(st.session_state.active_conversation),
   )


with col2:
   st.markdown("<div style='height: 1.9em'></div>", unsafe_allow_html=True)
   if st.button("➕"):
       create_conversation()


selected_conversation = client.get_conversation(conversation_id)

4. กำหนดบทบาทที่ถูกต้องสำหรับข้อความที่ผ่านมา

เราจะแก้ไขปัญหาการจัดรูปแบบจากด้านบนโดยกำหนดบทบาทผู้ใช้หรือผู้ช่วยให้กับข้อความที่ผ่านมาแต่ละข้อความ:

if (
   "messages" not in st.session_state
   or st.session_state.get("active_conversation") != conversation_id
):
   st.session_state.active_conversation = conversation_id
   st.session_state.messages = []


   messages = client.list_messages(conversation_id)
   next_token = messages["meta"].get("nextToken")


   for message in messages["messages"][::-1]:
       role = "user" if message["userId"] == user_id else "assistant"
       text = message["payload"]["text"]
       st.session_state.messages.append({"role": role, "content": text})

สิ่งนี้ทำให้โค้ดของเราตรงตามโครงสร้างที่ Streamlit คาดหวัง

5. เพิ่มตรรกะการส่งข้อความ

สิ่งนี้แทบจะเหมือนเดิมหรือมากกว่านั้น เพียงแต่ปรับให้เข้ากับโครงสร้างใหม่

# display chat history
for message in st.session_state.messages:
   with st.chat_message(message["role"]):
       st.markdown(message["content"])


if prompt := st.chat_input("*wine*-d it up"):


   st.session_state.messages.append({"role": "user", "content": prompt})
   client.create_message(prompt, conversation_id=conversation_id)


   with st.chat_message("user"):
       st.markdown(prompt)


   with st.chat_message("assistant"):
       stream = client.listen_conversation(conversation_id=conversation_id)
       response = st.write_stream(stream)


   st.session_state.messages.append({"role": "assistant", "content": response})

5. สร้างผู้ใช้

ตรรกะพร้อมแล้ว แต่คุณจะต้องสร้างผู้ใช้เพื่อเรียกใช้แอป ฉันเลือกที่จะเพิ่มสิ่งนี้แยกต่างหากเพื่อจำลองประสบการณ์การสมัครใช้บริการ โชคดีสำหรับคุณ ฉันได้เขียนสคริปต์ไว้ด้วย:

# create_user.py


import argparse
from pathlib import Path
from client import *
from constants import *

secrets_path = Path(".streamlit") / "secrets.toml"

template = """[[users]]
key="{}"

"""

client = BotpressClient()

def create_user(name, id, add_to_secrets=True):
   res = client.create_user(name, id)
   if not add_to_secrets:
       return res

   secrets_path.touch(exist_ok=True)

   with open(secrets_path, "a") as f:
       f.write(template.format(res["user"]["id"], res["key"]))

   return res


if __name__ == "__main__":
   parser = argparse.ArgumentParser(
       description="Create a Botpress user and optionally store secrets."
   )
   parser.add_argument("--name", required=True, help="Display name of the user.")
   parser.add_argument(
       "--id", required=True, help="User ID. If omitted, one is generated by the API."
   )
   parser.add_argument("--chat_api_id", help="ID for the Botpress Chat API integration. Taken from `.env` file if not provided.")
   parser.add_argument(
       "--no-secrets",
       action="store_true",
       help="Do not append to .streamlit/secrets.toml.",
   )

   args = parser.parse_args()

   print(f"Creating user: {args.name} (ID: {args.id or 'auto-generated'})")
   result = create_user(name=args.name, id=args.id, add_to_secrets=not args.no_secrets)

   print("✅ User created:")
   print(result)

หากคุณมีของคุณ Chat API ID คุณสามารถรันได้:

python create_user.py –ชื่อ ชื่อของคุณ –id รหัสผู้ใช้บางคน –รหัสแชท API ของคุณ

นี่จะเป็นการจัดการกับการสร้างผู้ใช้และเพิ่มลงในไฟล์ความลับของคุณ

เหตุใดฉันจึงควรเลือก Streamlit มากกว่าเฟรมเวิร์ก front-end อื่นๆ ในการสร้างแชทบอท

คุณควรเลือก Streamlit เพื่อสร้างแชทบอท หากคุณต้องการโซลูชันที่รวดเร็วโดยใช้ Python ที่ให้คุณสามารถสร้างต้นแบบแอปแบบโต้ตอบได้อย่างรวดเร็วโดยไม่จำเป็นต้องมีความเชี่ยวชาญด้านส่วนหน้า เนื่องจาก Streamlit จัดการองค์ประกอบ UI เช่น ส่วนประกอบแชทและการจัดการสถานะด้วยโค้ดขั้นต่ำ

Streamlit chatbot เหมาะสำหรับการใช้งานจริงหรือสำหรับต้นแบบเท่านั้น

แชทบอท Streamlit นั้นยอดเยี่ยมสำหรับการสร้างต้นแบบและเครื่องมือภายใน แต่สำหรับแอปการผลิตที่เผยแพร่ต่อสาธารณะซึ่งมีปริมาณการใช้งานสูงหรือการออกแบบขั้นสูง คุณอาจต้องมีเลเยอร์เพิ่มเติม เช่น พร็อกซีแบบย้อนกลับ การเสริมความแข็งแกร่งด้านความปลอดภัย และอาจต้องมีเฟรมเวิร์กส่วนหน้าที่แข็งแกร่งยิ่งขึ้นเพื่อรองรับการปรับขนาด

รูปลักษณ์และความรู้สึกของแชทบอทที่สร้างด้วย Streamlit ปรับแต่งได้มากเพียงใด

แม้ว่า Streamlit จะช่วยให้คุณปรับแต่งรูปแบบพื้นฐาน เช่น สี แบบอักษร และเค้าโครงได้ แต่ก็มีความยืดหยุ่นน้อยกว่าเฟรมเวิร์กเว็บแบบเดิม หากต้องการการออกแบบที่กำหนดเองอย่างแท้จริง คุณจะต้องฝัง HTML/CSS หรือ JavaScript ที่กำหนดเอง ซึ่งสามารถทำได้ แต่จะมีความซับซ้อนเพิ่มขึ้นเมื่อเทียบกับการใช้วิดเจ็ตในตัวของ Streamlit

ฉันสามารถรวม Streamlit chatbot เข้ากับเว็บไซต์ที่มีอยู่ได้หรือไม่ หรือต้องทำงานแบบสแตนด์อโลน?

โดยทั่วไปแล้วแชทบอท Streamlit จะทำงานเป็นแอปเว็บแบบสแตนด์อโลนบน URL ของตัวเอง แต่คุณสามารถฝังแชทบอทเข้าในเว็บไซต์ที่มีอยู่แล้วได้ผ่าน iframe แม้ว่าจะต้องจัดการด้านรูปแบบและความปลอดภัยเพื่อให้ผู้ใช้ได้รับประสบการณ์การฝังที่ราบรื่นก็ตาม

มีค่าใช้จ่ายเท่าไรในการติดตั้ง Streamlit chatbot เพื่อใช้งานสาธารณะ?

การใช้งาน Streamlit chatbot นั้นฟรีหากโฮสต์ไว้ในเครื่องหรือบน Streamlit Community Cloud สำหรับแอปขนาดเล็ก แต่หากใช้งานสาธารณะในระดับขนาดใหญ่ ค่าใช้จ่ายจะอยู่ที่ประมาณ 5–50 ดอลลาร์ต่อเดือนบนแพลตฟอร์มคลาวด์ เช่น Heroku, AWS หรือ DigitalOcean ทั้งนี้ ขึ้นอยู่กับข้อกำหนดด้านปริมาณการใช้งานและเวลาทำงาน