Bahagian Perkemas Bina Antara Muka Sembang

Mari Bina Antara Muka Sembang dalam Streamlit: Cara Mudah

Pernah mahu membina antara muka sembang anda sendiri tetapi fikir ia akan menjadi terlalu rumit? Nah, saya mendapat berita baik - dengan Streamlit, ia sangat mudah. Mari kita membuat apl sembang asas yang kemudiannya boleh anda kembangkan kepada sesuatu yang lebih canggih.

Apa yang Kami Bina

Kami sedang mencipta antara muka sembang yang membolehkan pengguna menaip mesej dan mendapatkan respons. Anggap ia sebagai asas untuk chatbot atau pembantu AI masa depan anda. Bahagian yang terbaik? Anda hanya memerlukan beberapa baris kod Python untuk mewujudkannya.

Bermula

Mula-mula, mari sediakan apl Streamlit kami. Kami memerlukan reka letak lebar yang bagus untuk memberi ruang kepada mesej sembang kami:

import streamlit as st  
import time  

st.set_page_config(  
    page_title="Chat App",  
    layout="wide",  
    initial_sidebar_state="collapsed",  
)  

st.title("Let's Chat!")  

Menjejaki Mesej

Apl sembang memerlukan ingatan - mereka perlu mengingati apa yang dikatakan sebelum ini dalam perbualan. Streamlit mempunyai ciri kemas yang dipanggil keadaan sesi yang sesuai untuk ini:

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

Ini mencipta senarai untuk menyimpan sejarah sembang kami. Anggap ia sebagai buku nota tempat kita menulis semua yang dikatakan.

Menunjukkan Perbualan

Sekarang mari paparkan mesej sembang kami. Kami akan melihat sejarah mesej kami dan menunjukkan setiap mesej dalam gelembung sembang:

for msg in st.session_state.messages:  
    with st.chat_message(msg["role"]):  
        st.write(msg["content"])  

Mendapatkan Input Pengguna

Di sinilah keajaiban berlaku. Kami akan menambah kotak teks di mana pengguna boleh menaip mesej mereka:

prompt = st.chat_input("Say something...")  

if prompt:  
    # Add user message to chat  
    st.session_state.messages.append({"role": "user", "content": prompt})  
    with st.chat_message("user"):  
        st.write(prompt)  

    # Add a simple bot response  
    time.sleep(1)  # A brief pause to make it feel more natural  
    bot_response = f"You said: {prompt}"  
    st.session_state.messages.append({"role": "bot", "content": bot_response})  
    with st.chat_message("bot"):  
        st.write(bot_response)  

Menjadikannya Sendiri

Buat masa ini, bot kami hanya mengulangi apa yang anda katakan. Tetapi di sinilah anda boleh menjadi kreatif! Anda boleh:

• Sambungkannya kepada model AI untuk respons yang lebih bijak
• Tambah butang untuk balasan pantas
• Sertakan imej atau emoji dalam jawapan
• Simpan perbualan ke pangkalan data

Kod Lengkap

Inilah semuanya bersama-sama dalam satu pakej kemas:

import streamlit as st  
import time  

st.set_page_config(page_title="Chat App", layout="wide", initial_sidebar_state="collapsed")  
st.title("Let's Chat!")  

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

for msg in st.session_state.messages:  
    with st.chat_message(msg["role"]):  
        st.write(msg["content"])  

prompt = st.chat_input("Say something...")  

if prompt:  
    st.session_state.messages.append({"role": "user", "content": prompt})  
    with st.chat_message("user"):  
        st.write(prompt)  

    time.sleep(1)  
    bot_response = f"You said: {prompt}"  
    st.session_state.messages.append({"role": "bot", "content": bot_response})  
    with st.chat_message("bot"):  
        st.write(bot_response)  

Dan begitulah! Antara muka sembang yang berfungsi di bawah 30 baris kod. Cukup keren, bukan?

Lain kali, kami akan melihat untuk menambahkan beberapa kecerdasan AI untuk menjadikan bot kami benar-benar memahami dan membalas mesej. Nantikan!

Ingin mencuba ini? Hanya salin kod, pasang Streamlit (pip install streamlit), dan jalankan dengan streamlit run your_file.py. Selamat mengekod!

---

? Dapatkan Kod: GitHub - jamesbmour/blog_tutorials
? Tutorial Streamlit Berkaitan:JustCodeIt
? Sokong kerja saya: Beli Saya Kopi

Atas ialah kandungan terperinci Bahagian Perkemas Bina Antara Muka Sembang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!