====== Streamlit ======
<= [[start|Terug naar start]]

-> [[stap_1_f|Python, LangChain, Streamlit, Embeddings, Vector DB ed.]]

**[[https://share.streamlit.io/|Streamlit workspace]]**

[[https://streamlit.io/|Streamlit Home]]\\
[[https://github.com/streamlit/streamlit|Streamlit on GitHub]]\\
[[https://docs.streamlit.io/library/get-started|Streamlit documentatie]]\\
**[[https://docs.streamlit.io/library/api-reference|Streamlit API referentie]]**\\
-> [[https://docs.streamlit.io/knowledge-base/tutorials/deploy|Deploy Streamlit apps]]\\
[[https://arnaudmiribel.github.io/streamlit-extras/|Streamlit Extra's]]\\
[[https://cheat-sheet.streamlit.app/|Streamlit cheat-sheet]]\\
**[[https://www.youtube.com/watch?v=5l9COMQ3acc|How to use Streamlit session states and callback functions | Make your apps remember things]]** ✨\\
[[https://www.youtube.com/watch?v=_Um12_OlGgw|Streamlit Elements You Should Know About]] ✨\\

Publiceren:\\
:!: **[[https://share.streamlit.io/|Streamlit workspace - Publiceren + testen Apps]]**\\
-> [[https://www.youtube.com/watch?v=HKoOBiAaHGg|YouTube video: How to Deploy Your App to Streamlit Community Cloud]]\\
-> [[https://docs.streamlit.io/streamlit-community-cloud/share-your-app/embed-your-app|Streamlit app in IFRAME tonen]]\\
- -> [[https://docs.streamlit.io/streamlit-community-cloud/share-your-app/embed-your-app#embed-options|IFRAME embeddings options]]

:!: **[[https://www.youtube.com/watch?v=us1l14STMX4|How to Build Streamlit App & Deploy 🚀 (Python Project) - Tutorial for Beginner]]**\\
:!: **[[https://www.youtube.com/playlist?list=PL2VXyKi-KpYtZzm1K8UKnnBzsOCtekhKq|PLAY LIST YOUTUBE]]**\\
:!: **[[https://www.youtube.com/watch?v=4SO3CUWPYf0|Deploy Your Streamlit App To Render (Free Heroku Alternative)]]**

Video's:\\
**[[https://www.youtube.com/watch?v=JLKUV-LiXjk&list=PLIUOU7oqGTLg5ssYxPGWaci6695wtosGw|Streamlit for ML #1 - Installation and API]]**\\
-> [[https://www.youtube.com/watch?v=U0EoaFFGyTg|Streamlit for ML #2 - Installation and APIs]]\\
-> [[https://www.youtube.com/watch?v=lYDiSCDcxmc|Streamlit for ML #3 - Make Apps Fast with Caching]]!!!\\
-> [[https://www.youtube.com/watch?v=XdxeKiY2UXg|Streamlit for ML #4 - Adding Bootstrap Components]]\\
-> [[https://www.youtube.com/watch?v=mxm8ihWoVbk|Streamlit for ML #5.2 - MUI Card Component Build]]

❗ Chat met website:\\
**[[https://www.youtube.com/watch?v=bupx08ZgSFg|Tutorial | Chat with any Website using Python and Langchain (LATEST VERSION)]]**✨\\
-> **[[https://github.com/alejandro-ao/chat-with-websites|GITHUB: Chat with a Website from URL - LangChain Chatbot with Streamlit GUI]]**✨

[[https://www.youtube.com/watch?v=dXxQ0LR-3Hg|YouTube: Chat with Multiple PDFs / LangChain App Tutorial in Python (Free LLMs and Embeddings)]]\\
[[https://www.youtube.com/watch?v=IaTiyQ2oYUQ|YouTube: Create a ChatGPT clone using Streamlit and LangChain]]\\
[[https://www.youtube.com/watch?v=VL6MAAgwSDM|YouTube: Langchain + Qdrant Cloud | Pinecone FREE Alternative (20GB) | Tutorial]]\\
**[[https://www.youtube.com/watch?v=iQnMADoFaWQ&t=548s|YouTube: Langchain + ChatGPT + Pinecone: A Question Answering Streamlit App]]**\\
**[[https://www.youtube.com/watch?v=SikRy3U7B4A|YouTube: Geheugen: How to add memory to your LLM to remember previous conversation]]**\\
[[https://www.youtube.com/watch?v=xQwDfW7UHMo|Introducing st.connection for connecting to SQL database in 4 lines]]\\
-> [[https://experimental-connection.streamlit.app/|st.experimental_connection]]

[[https://www.youtube.com/watch?v=ZZ4B0QUHuNc&list=PLtqF5YXg7GLmCvTswG32NqQypOuYkPRUE|Serie vide's (volledige cursus)]]\\
-> [[https://www.youtube.com/watch?v=zK4Ch6e1zq8&list=PLtqF5YXg7GLmCvTswG32NqQypOuYkPRUE&index=4|How to Deploy Data Science Web App to Heroku | Streamlit]]

[[https://docs.streamlit.io/library/changelog|Changelog info m.b.t. de laatste versies]]


----

**[[https://www.markdownguide.org/cheat-sheet/|Markdown Cheat-sheet]]**\\
**[[https://emojipedia.org/smirking-face|Emoji's (kopiëren/plakken)]]**

----





===== Installeren =====

<code>
pip install streamlit
</code>

:!: **Bij problemen met gewoon installeren de onderstaande methode gebruiken**
<code>
python -m pip install streamlit
</code>

Test of streamlit werkt:
<code>
streamlit hello
</code>
Een Streamlit App Starten:
<code>
streamlit run app.py
</code>

-> Upgrade streamlit //(versie **1.30.0** nodig)//

<code>
pip install --upgrade streamlit
</code>

----



===== @st.cache_resource =====
:!: **[[https://docs.streamlit.io/library/api-reference/performance/st.cache_resource|st.cache_resource]]** :!:\\
-> @st.cache_resource gebruiken voor database verbindingen en verbindingen met ML models

-> **Zet boven function:**
<code>
import streamlit as st

@st.cache_resource
def get_database_session(_sessionmaker, url):
    # Create a database connection object that points to the URL.
    return connection

s1 = get_database_session(create_sessionmaker(), DATA_URL_1)
# Actually executes the function, since this is the first time it was
# encountered.

s2 = get_database_session(create_sessionmaker(), DATA_URL_1)
# Does not execute the function. Instead, returns its previously computed
# value - even though the _sessionmaker parameter was different
# in both calls.
</code>

<code>
import streamlit as st

@st.cache_resource
def get_database_session(_sessionmaker, url):
    # Create a database connection object that points to the URL.
    return connection

get_database_session.clear()
# Clear all cached entries for this function.
</code>

:!: Als **@st.cache_resource** boven een Class functie staat moet i.p.v. **self**, **_self** worden gebruikt.\\
//Dit benaderd dan de variabele in de Cash//

<code>
@st.cache_resource
def get_llm(_self):
    llm = ChatOpenAI(model_name=_self.a3dmod.aimodel, temperature=_self.a3dmod.temperature)
    return llm
</code>


----

===== Session State =====
[[https://www.youtube.com/watch?v=92jUAXBmZyU|Youtube: Session State basics]]\\
[[https://docs.streamlit.io/library/api-reference/session-state|Session State Tutorial]]

-> Controleer of een waarde al is session_state in opgenomen/aanwezig is:

<code>
# Initialization
if 'key' not in st.session_state:
    st.session_state['key'] = 'value'

# Session State also supports attribute based syntax
if 'key' not in st.session_state:
    st.session_state.key = 'value'          
</code>

-> Reads and updates:

<code>
st.write(st.session_state.key)
</code>

-> Update an item in Session State by assigning it a value::

<code>
st.session_state.key = 'value2'     # Attribute API
st.session_state['key'] = 'value2'  # Dictionary like API
</code>

-> Delete items:

<code>
# Delete a single key-value pair
del st.session_state[key]

# Delete all the items in Session state
for key in st.session_state.keys():
    del st.session_state[key]
</code

-> Session State and Widget State association:

<code>
st.text_input("Your name", key="name")

# This exists now:
st.session_state.name
</code>

----


===== Markdown =====

[[https://www.markdownguide.org/cheat-sheet/|Markdown Cheat-sheet]]



===== Emoji's =====

[[https://emojipedia.org/smirking-face|Emoji's (kopiëren/plakken)]]

=== 🚀  🎈  🤖  ❤️  ⚕️  ☯️  🏥  🗨️  💭  💡  ℹ️  ⚙️  🔧  🚧  🏡  ⚠️  🛟  ⛔  🚫  🪜  🔒  🔓  🔑  ⛓️  ✨  🪄  ⭐  ✨  🎉  🎁  🛒  💰  💲  💫  📱  📧  📫  🚩  🏁  ❔  ❕  ♻️  ✔️  ➕  ❌  🏷️  📂  🗂️  📆  ✏️  🖋️  📝  📄  🔔  ⏰  🔍  🕵️  👤  🧮  🧬  🌍  🧭  🏅  🏆  🤷‍♂️  🕮  📖  📚  📗  📙  🔸  🔹  💎  👑 ===

----

===== Preloader =====
Had beetje moeite om een goede preloader te vinden en gebruiken. Zelf een oplossing gevonden in de vorm van [[https://docs.streamlit.io/library/api-reference/layout/st.empty|st.empty]]. Hiermee kun je een variabele vullen met tekst en als deze niet meer nodig is kun je deze verwijderen:

<code>
preloader = st.empty()   
preloader.text("🕵️ Een moment geduld a.u.b...") 

# En om dan de preloader verwijderen/te legen:
preloader.empty()
</code>

----


===== Systeem variabelen (geheimen ed.) =====

==== secrets.toml ====

**[[https://docs.streamlit.io/streamlit-community-cloud/deploy-your-app/secrets-management|Systeem variabelen - Beheer van geheimen]]**


Wanneer u uw app lokaal ontwikkelt, voegt u een bestand toe met de naam **secrets.toml** in een map met **.streamlitde** hoofdmap van uw app-repository, en kopieert/plakt u uw geheimen in dat bestand. Verdere instructies zijn beschikbaar in de [[https://docs.streamlit.io/library/advanced-features/secrets-management|Streamlit- bibliotheekgeheimenbeheerdocumentatie]]

:!: **Zorg ervoor dat u dit bestand aan uw bestand toevoegt, [[github#gitignore|.gitignore]] zodat u uw geheimen niet prijsgeeft!**\\
-> in online omgeving variabelen in de omgeving invoeren!

<code>
your-LOCAL-repository/
├── .streamlit/
│   ├── config.toml
│   └── secrets.toml # Make sure to gitignore this!
├── your_app.py
└── requirements.txt
</code>

==== config.toml ====

-> In het config.toml bestand kunt u verschillende configuratie-opties instellen, zoals:

<code>
[server]
port = 8501
headless = true
</code>

en b.v.:
<code>
[browser]
gatherUsageStats = false

[theme]
primaryColor = "#F63366"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F2F6"
</code>

-> Aangepaste Thema's: Streamlit ondersteunt aangepaste thema's, zodat u de look en feel van uw app kunt afstemmen op uw merk of voorkeuren.

----

==== secrets.toml ====

-> Omgevingsvariabelen voor Streamlet worden in het "secrets.toml" bestand geplaatst in de ".streamlit" map:

<code>
OPENAI_API_KEY = "XXX"
PINECONE_API_KEY = "XXX"
PINECONE_ENVIRONMENT = "XXX"
PINECONE_INDEX_NAME = "XXX"
</code>

----






====== Deploy Streamlit app ======
[[https://docs.streamlit.io/library/api-reference/utilities/st.set_page_config|Streamlit pagina opties (st.set_page_config)]]

===== Streamlit app publiceren in Streamlit Community Cloud =====

:!: **Bij het aanmaken van de app niet vergeten de systeemvariabelen te zetten voor Streamlit**

-> Volg video:\\
**[[https://www.youtube.com/watch?v=HKoOBiAaHGg|YouTube video: How to Deploy Your App to Streamlit Community Cloud]]**

[[https://share.streamlit.io/|Streamlit workspace]]

----

===== Streamlit app tonen in iframe =====

<code>
<iframe
  src="https://30days.streamlit.app/?embed=true"
  height="800"
  style="width:100%;border:none;"
></iframe>
</code>

==== Data doorgeven op GET manier ====

[[https://docs.streamlit.io/library/api-reference/utilities/st.experimental_get_query_params|Het is ook mogelijk GET data mee te geven in het iFrame zodat die data kan worden uitgelezen door/in de Streamlit app]]:

**URL:** http://192.168.1.76:8501/?naam=Jan\\
//In streamlit app ophalen met://

<code>
url = st.experimental_get_query_params()
if 'naam' in url:
    naam = url['naam'][0]                  
    print(naam) 
</code>

-> Data doorgeven aan Streamlit app in Iframe:

<code>
<iframe
  src="https://30days.streamlit.app/?embed=true&naam=Jan"
  height="800"
  style="width:100%;border:none;"
></iframe>
</code>

----

===== Streamlit app op website tonen (Google) =====

[[https://dev.to/whitphx/how-to-deploy-streamlit-apps-to-google-app-engine-407o|Hoe u Streamlit-apps kunt implementeren in Google App Engine]]\\
[[https://cloud.google.com/appengine/docs/the-appengine-environments|Choose an App Engine environment]]\\
[[https://cloud.google.com/appengine/docs/flexible/migrating|Migrate services from the standard environment to the flexible environment]]\\
[[https://cloud.google.com/appengine/docs/flexible|App Engine flexible environment]]\\

----