🗂️ Terug naar start
🚀 🗂️ Steamlit Start

Streamlit kolommen documentatie

Ik wilde een pagina maken in een Streamlit GUI die bestond uit 2 kolommen. In de linker kolom een een chat gedeelte en in de rechterkolom ruimte om aanvullende data te laatste. Het plaatsen van een chat in een kolom is in streamlit nog niet zo simpel. Hieronder de oplossing die ik er voor bedacht heb:

from appbase.functions import A3DFunctions
from appbase.sematicrouter import A3DSematicRouter
from appbase.teksten import A3DTeksten
from catviseur.viseurcontroler import A3DControler
import streamlit as st
from langchain_core.messages import AIMessage, HumanMessage

class CATviseur:
    def __init__(self):
        self.a3dfunc = A3DFunctions()
        self.a3dteks = A3DTeksten()
        self.a3dcont = A3DControler()
        self.a3dsema = A3DSematicRouter()

    def pageIni(self):
        # INI data ==================================
        # Initialize caht history
        if "chat_history" not in st.session_state:
            st.session_state['chat_history'] = []   
        # INI teller (om CATja eerste bericht te tonen)
        if "teller" not in st.session_state:
            st.session_state['teller'] = 0    
            # INI unieke ID om chat op te slaan (nodig voor eventuele logging)
        if "chat_id" not in st.session_state:            
            st.session_state['chat_id'] = self.a3dfunc.maak_unieke_id(st.session_state['client_id'])
        # Volgorde van de chatgeschiedenis (nodig voor eventuele logging)
        if "volgorde" not in st.session_state:
            st.session_state['volgorde'] = 0   
        # Pre vraag tekst
        if "prevraagtekst" not in st.session_state:
            st.session_state['prevraagtekst'] = self.a3dfunc.getPreVraagTekst()

        # VIEW ======================================
        self.buildView()

    def buildView(self): 
        col1, col2 = st.columns([2, 2])
        user_query = ''
        response = ''  

        # Linker kolom ****************************************************     
        with col1:
            # Gebruik een container om de chatgeschiedenis weer te geven
            chat_container = st.container(border=True, height=600)
            # Toon het eerste bericht van CATja
            if len(st.session_state['chat_history']) == 0:
                with chat_container:                   
                    with st.chat_message("AI", avatar='😺'):
                        st.markdown(self.a3dteks.get_intro_tekst_chat(st.session_state['naam']), unsafe_allow_html=True)

            # Invoer van de gebruiker weer te geven
            input_container = st.container()
            with input_container:                 
                # Gebruik een invoerveld om berichten van de gebruiker te ontvangen
                user_query = st.chat_input(placeholder="Type hier je vraag aan CATja...") 
                if user_query is not None and user_query != "": 
                    # Preloader
                    with st.spinner(f"🔍😺 {user_query[:400]}..."):                                      
                        # VRAAG GEBRUIKER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	                    
                        response = self.a3dcont.get_rag_data(user_query)  
                        st.session_state.chat_history.append(HumanMessage(content=user_query))                
                        st.session_state.chat_history.append(AIMessage(content=response))

                        # Log AI dialog via API ########################
                        self.a3dcont.log_ai_dialog(user_query, response)

                # reset chat knop +++++++++++++++++++++++++++++++++++++
                if st.button("🔄 Nieuwe Chat 🪄 *Chat Geheugen Wissen*"):
                    self.a3dcont.reset_chat( self.a3dfunc.maak_unieke_id(st.session_state['client_id']) )

            # plaats de chatgeschiedenis in de container
            with chat_container:
                for message in st.session_state.chat_history:
                    if isinstance(message, AIMessage):
                        with st.chat_message("AI", avatar='😺'):
                            st.write(message.content)
                    elif isinstance(message, HumanMessage):
                        with st.chat_message("Human", avatar='👤'):
                            st.write(message.content)       

        # Rechter kolom ****************************************************
        with col2:
            top_rechts_container = st.container()
            if len(st.session_state['chat_history']) == 0:               
                with top_rechts_container:
                    st.success(self.a3dteks.get_uitleg_start() , icon="💡")
            else:
                with top_rechts_container:
                    st.subheader("⚓ Huidige Chat Onderwerp:")
                    # Eerste vraag van gebruiker = chatonderwerp
                    chatonderwerp = st.session_state['chat_history'][0].content
                    st.success(f"**{chatonderwerp}**", icon="🗨️")
                    uitleg = self.a3dteks.get_nieuwonderwerpuitleg()
                    st.info(f"{uitleg}", icon="💡")
                    
                    # reset chat knop 2 +++++++++++++++++++++++++++++++
                    if st.button("🔄 Nieuw Chat Onderwerp"):
                        self.a3dcont.reset_chat( self.a3dfunc.maak_unieke_id(st.session_state['client_id']) )

                    st.markdown('---', unsafe_allow_html=True)
                    coll1, coll2, coll3 = st.columns([1, 2, 1])
                    with coll2:
                        semadata = self.a3dsema.route_catsistent(chatonderwerp)
                        centered_text = f"""
                        <div style="text-align: center;">
                            {self.a3dcont.get_sematic_links(semadata)}</div>
                        """
                        st.markdown(centered_text, unsafe_allow_html=True)


cat = CATviseur()
cat.pageIni()

In dit geval moet de chatcontainer een hoogte hebben anders werk het niet:

chat_container = st.container(border=True, height=600)