st chat

세인트 채팅

Streamlit 구성 요소(챗봇 UI용), 예제 앱

저자 - @yashppawar 및 @YashVardhan-AI

설치

pip로 streamlit-chat 설치

pip install streamlit-chat 

사용법, streamlit_chat 에서 message 기능 가져오기

 import streamlit as st
from streamlit_chat import message

message ( "My message" ) 
message ( "Hello bot!" , is_user = True )  # align's the message to the right

스크린샷

채팅의 HTML에 대한 또 다른 예 및 채팅 새로 고침 버튼

 import streamlit as st
from streamlit_chat import message
from streamlit . components . v1 import html

def on_input_change ():
    user_input = st . session_state . user_input
    st . session_state . past . append ( user_input )
    st . session_state . generated . append ( "The messages from Bot n With new line" )

def on_btn_click ():
    del st . session_state . past [:]
    del st . session_state . generated [:]

audio_path = "https://docs.google.com/uc?export=open&id=16QSvoLWNxeqco_Wb2JvzaReSAw5ow6Cl"
img_path = "https://www.groundzeroweb.com/wp-content/uploads/2017/05/Funny-Cat-Memes-11.jpg"
youtube_embed = '''
<iframe width="400" height="215" src="https://www.youtube.com/embed/LMQ5Gauy17k" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media;"></iframe>
'''

markdown = """
### HTML in markdown is ~quite~ **unsafe**
<blockquote>
  However, if you are in a trusted environment (you trust the markdown). You can use allow_html props to enable support for html.
</blockquote>

* Lists
* [ ] todo
* [x] done

Math:

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

$$
L = \ frac{1}{2} \ rho v^2 S C_L
$$

~~~py
import streamlit as st

st.write("Python code block")
~~~

~~~js
console.log("Here is some JavaScript code")
~~~

"""

table_markdown = '''
A Table:

| Feature     | Support              |
| ----------: | :------------------- |
| CommonMark  | 100%                 |
| GFM         | 100% w/ `remark-gfm` |
'''

st . session_state . setdefault (
    'past' , 
    [ 'plan text with line break' ,
     'play the song "Dancing Vegetables"' , 
     'show me image of cat' , 
     'and video of it' ,
     'show me some markdown sample' ,
     'table in markdown' ]
)
st . session_state . setdefault (
    'generated' , 
    [{ 'type' : 'normal' , 'data' : 'Line 1 n Line 2 n Line 3' },
     { 'type' : 'normal' , 'data' : f'<audio controls src=" { audio_path } "></audio>' }, 
     { 'type' : 'normal' , 'data' : f'<img width="100%" height="200" src=" { img_path } "/>' }, 
     { 'type' : 'normal' , 'data' : f' { youtube_embed } ' },
     { 'type' : 'normal' , 'data' : f' { markdown } ' },
     { 'type' : 'table' , 'data' : f' { table_markdown } ' }]
)

st . title ( "Chat placeholder" )

chat_placeholder = st . empty ()

with chat_placeholder . container ():    
    for i in range ( len ( st . session_state [ 'generated' ])):                
        message ( st . session_state [ 'past' ][ i ], is_user = True , key = f" { i } _user" )
        message (
            st . session_state [ 'generated' ][ i ][ 'data' ], 
            key = f" { i } " , 
            allow_html = True ,
            is_table = True if st . session_state [ 'generated' ][ i ][ 'type' ] == 'table' else False
        )
    
    st . button ( "Clear message" , on_click = on_btn_click )

with st . container ():
    st . text_input ( "User Input:" , on_change = on_input_change , key = "user_input" )

스크린샷