Lekcja 12 - webGUI, Streamlit (notatki)

Gdy przeglądamy strony internetowe, to niezależnie od przeglądarki czy systemu wyglądają one podobnie. Wynika to z tego, że dość konsekwentne są opisy stron internetowych. Stąd warto się zastanowić nad przygotowaniem aplikacji pod przeglądarkę, którą możemy opublikować w sieci i która niezależnie od odbiorcy będzie wyglądała podobnie.

Streamlit

Streamlit to zestaw bibliotek umożliwiających stworzenie frameworku do pracy z danymi. Nie trzeba do niego opanowywać innych języków programowania, wystarczy python. Ma jednak jedną wadę, dość ciężko go spersonalizować, ponieważ wiele rzeczy jest odgórnie ustalone np. wielkość i kolor nagłówków.

By zacząć z niego korzystać musimy wpierw zainstalować tę bibliotekę poprzez wpisanie do terminala: pip install streamlit. Potem na początku aplikacji trzeba się do niego odwołać poprzez import streamlit as st, i wpisać samą aplikację.

Uwaga! Tę aplikację trzeba uruchamiać przez przeglądarkę, robi się to poprzez wpisanie w terminalu: streamlit run nazwa_aplikacji.py. Niekiedy przez konfigurację komputera nie jest to możliwe, w takiej sytuacji można skorzystać z darmowej stronki replit, by obejrzeć swoją aplikację w przeglądarce.

Teraz warto zapoznać się z dokumentacją streamlita, która jest dostępna online, a następnie spróbujemy stworzyć pierwszą, podstawową aplikację webową:

import streamlit as st

st.set_page_config(page_title="Moja aplikacja")
st.title("Jakiś tytuł")

Teraz zobaczymy jak stworzyć komponenty tekstowe:

st.title("Twój tytuł")
st.header("Twój nagłówek")
st.subheader("Podnagłówek")
st.write("zwykły tekst")

Tytuły i nagłówki, można też wpisywać przy pomocy Markdowna (więcej o Markdownie tutaj):

st.write("""Zwykły tekst
#Tytuł H1
##Nagłówek H2""")

Możemy też wstawić komponenty wymagające interakcji od użytkownika:

pole_tekstowe = st.text_input(label="Podaj imię: "

suwak = st.slider(label=Suwak, min_value=0, max_value=100)

kratka = st.checkbox(label="Kratka")

zwierzeta = ["pies", "kot", "chomik", "rybki"]
wybor = st.multiselect(label="Wybierz swoje zwierze", options = zwierzeta)

Oraz komponenty do wykresów:

st.bar_chart

import pandas as pd
import streamlit as st

st.write("Wykres słupkowy na podstawie csv")
news_df = pd.read_csv("Twoj_plik.csv")
print(news_df)
print(type(news_df))
print(news_df.dtypes)

st.bar_chart(news_df, x=Show)

Kolejnym komponentem jest wstawianie obrazków

st.image("obrazek.jpg")

Oraz przycisk

przycisk = st.button(label = "Wciśnij mnie!")

Choć Streamlit potrafi zbierać dane od użytkownika to w momencie odświeżenia strony (czyli przy każdorazowym użyciu komponentów), tracimy wszystkie wprowadzone wcześniej dane. Stąd w momencie gdy chcemy zapobiec utraceniu danych musimy skorzystać z bardziej skomplikowanych struktur jak formularz.

import streamlit as st

def zliczaj_slowa(tekst:str) -> int:
  slowa_lista = tekst.split()
  ilosc_slow = len(slowa_lista)
  return ilosc_slow

#lub krócej: return len(slowa_lista)

st.title("Zliczaj słowa")
st.write("Aplikacja zlicza ilość słów wprowadzonych w pole tekstowe")
pole_tekstowe = st.text_area(label="Wprowadź tekst: ")
zliczaj_przycisk = st.button("Zliczaj")
if zliczaj_przycisk:
  ilosc_slow = zliczaj_slowa(pole_tekstowe)
  st.write(f"Ilosc slow: {ilosc_slow}")

Ćwiczenie

Stwórz aplikację "rzucającą monetą"

import streamli as st
import random

obrazki = ("orzel.jpg", "reszka.jpg")
     
przycisk_rzut = st.button(label = "Wciśnij mnie!")
if przycisk_rzut:
    st.image(random.choice(obrazki))

Stwórz aplikację "rzucającą" kością, uwzględnij możliwość wybierania ilości kości i ich rodzaju (ile ścianek):

import random

losowa_liczba = random.randit(1, 6)
#losuje liczbę od 1 do 6 włącznie

st.write(liczba)

import random

print("Rzuć kością")
ilosc_scianek = int(input("Wprowadź liczbę: "))
ilosc_kostek = int(input("Wprowadź liczbę: "))

for losowa_liczba in range(ilosc_kostek):
    losowa_liczba = random.randint(1, ilosc_scianek)
    print(losowa_liczba)

st.title("Rzuć kością")
ilosc_scianek = st.slider('Wybierz liczbę ścianek', 1, 30)
ilosc_kostek = st.slider('Wybierz liczbę kości', 1, 10)

przycisk_rzut_koscia = st.button(label = "Rzut kością!")
if przycisk_rzut_koscia:
    for losowa_liczba in range(ilosc_kostek):
      losowa_liczba = random.randint(1, ilosc_scianek)
      st.write(losowa_liczba)