Programování web aplikací nebylo nikdy jednodušší – Streamlit.io overview

V dnešní době, kdy se programování stává stále více přístupnější díky AI, přichází Streamlit jako ideální platforma pro každého, kdo chce tvořit svoje appky. Dobře, je tu už od roku 2018, ale krásně zapadá do AI vlny. V tomto blogu se podíváme na to, jak Streamlit umožňuje jednoduchý vývoj a deployment aplikací na web doslova za pár kliků.

Předtím, než se pustíme do článku, chtěl bych přece jenom sepsat několik bodů.

Předpoklady:

• Založit si GitHub účet, vstupní brána do světa programování.
• Účet u streamlit.io, díky kterému se dají aplikace jednoduše publikovat jako web aplikaci.
• Stáhnout si Visual Studio Code nebo jakýkoliv editor, který vám vyhovuje
• Orientovat se v terminálu (ať už Win nebo MacOS), GPT vám ale vždy ochotně poradí:)
• GPT promptování a error handling:)

Co je to streamlit.io?

A faster way to build and share data apps. All in pure Python. No front‑end experience required.

Jak už jejich krásný marketing napovídá, jedná se o rychlý způsob, jak programovat appky díky jejich python knihovně. Stačí “napsat” pár řádků a aplikace zázrakem funguje. A nevypadá vůbec špatně. Jejich frontend je vzhledově minimalistický a nabízí nyní každou komponentu, kterou k aplikaci potřebujete. Velkou svobodou při programování je, když někdo za vás vymýšlí, jak bude apka vypadat a vy se snažíte doručit funkcionalitu a cíl projektu. Jasně, taky je fajn si pohrát s UI/UX, ale vývoj to žene kupředu.

Zaměřují se historicky hlavně na datové appky, machine learning appky, ale dá se využít prakticky na cokoliv. Dá se kombinovat s něpřeberným množstvím python knihoven, kreativitě se meze nekladou.

Takhle vypadá streamlit appka. Celkem dobrý, ne?

Takhle to vypadá, když napíšete pár řádků v HTML, žádné vzhled se neaplikuje.

Dobře, to zní fajn, jak tedy ukuchtím Streamlit appku?

Dopředu říkám, že nejsem žádný skilled programátor. Python jsem se v průběhu několika let učil asi tak natřikrát od samotného základu, protože jsem na vše pak zapomněl. Co mi ale zůstalo v hlavě je porozumnění kódu, práce s VS code editorem a základy s terminálem. I to dneska není nutné umět, protože s příchodem GPT když kód nefunguje, AI přispěchá na pomoc.

Zde je příklad promptu, který jsem použil pro moji appku, která vznikla na základě mé potřeby:

Jak můžete vidět, vkládal jsem v tomto případě již svůj vytvořený script pro očištění email kontaktů, nicméně ho opět vyprodukoval GPT:)

Chtěl jsem si ulehčit práci, abych nemusel pořád dokola chodit do Excelu (nemám ho moc v lásce) a štrachat Excel funkce, které by mi porovnali dva seznamy s email kontakty a ošetřili ty, které tam nemají co dělat. Konkrétně v tomhle případě jsem měl jeden seznam s klienty a druhý seznam s leady. Opravdu bychom nechtěli kontaktovat klienty, aby si znova koupili náš produkt:)

Tajný tip: Někdy se mi stávalo, že GPT dodával pouze část kódu. Pokud ale do promptu napíšete slovo “script” namísto “kód”, GPT nebude tak líný vracet celý kód aplikace, který potřebujete.

Zde je GPT výstup, který jsem ani trošku neupravil:

import streamlit as st
import pandas as pd

def clean_emails(df1, df2):
    # Předpokládá se, že emaily jsou v sloupci 'Email' v obou dataframe
    cleaned_df = df1[~df1['Email'].isin(df2['Email'])]
    return cleaned_df

def main():
    st.title("Čištění Emailových Kontaktů")

    # Nahrání souborů uživatelem
    uploaded_file1 = st.file_uploader("Nahrajte první CSV soubor s kontakty:", type="csv")
    uploaded_file2 = st.file_uploader("Nahrajte druhý CSV soubor s existujícími klienty:", type="csv")

    if uploaded_file1 and uploaded_file2:
        # Načtení CSV souborů
        list1 = pd.read_csv(uploaded_file1)
        list2 = pd.read_csv(uploaded_file2)
        
        # Kontrola, zda oba soubory obsahují sloupec 'Email'
        if 'Email' not in list1.columns or 'Email' not in list2.columns:
            st.error("Jeden nebo oba soubory nemají sloupec 'Email'. Prosím, zkontrolujte CSV soubory.")
        else:
            # Vyčištění seznamu
            cleaned_list = clean_emails(list1, list2)
            
            # Umožnění uživateli stáhnout výsledný CSV soubor
            st.write("Vyčištěný seznam kontaktů:")
            st.dataframe(cleaned_list)
            csv = cleaned_list.to_csv(index=False).encode('utf-8')
            st.download_button("Stáhnout vyčištěné kontakty jako CSV", csv, "cleaned_contacts.csv", "text/csv", key='download-csv')

if __name__ == "__main__":
    main()

Celkem 35 řádků, což je na aplikaci, která nemá žádný frontend velmi pěkný výsledek:) Kód jsem si vložil do VS code editoru, kde jsem ho ještě na základě dalšího doptávání s GPT ladil k dokonalosti.

Abyste výslednou aplikaci mohli vidět, do terminálu vložte příkaz:

cd /vase/cesta/ke/slozce/kde/je/ulozen/streamlit/kod
#muj příklad na macOS: cd /Users/stanislavbruch/Documents/Python/script-clients-removal

#pro spuštění appky, streamlit_app.py nahraď svým názvem souboru
streamlit run streamlit_app.py

Pokud by vás zajímalo, jak vypadá finalní podoba, najdete ho v mém GitHub repozitáři, zde je odkaz.

Nejčastější problém jsem měl vždy s tím, kde to moje dílo pak poběží? Streamlit usnadňuje vývojářům práci a poskytuje svůj community cloud zcela zdarma pod doménou .streamlit.app, vše před tečkou si můžete nazvat podle sebe. Podrobný postup je popsán v dokumentaci. Na to je právě potřeba GitHub účet, kde vložíte svůj streamlit kód, propojíte jednoduše Streamlit a GitHub účet a pak appku publikujete na web. Od té doby už nemusí běžet na vašem lokálu, dostanete se k ní kdykoliv a kdekoliv.

Tadá, appka je dostupná zde: https://email-contacts-excluder.streamlit.app/

Lze přidat jakékoliv popisky, moduly a další komponenty. V tomto případě je to velmi jednoduché → drag and drop soubory a hotový výsledek si můžete stáhnout.

Jedinou nevýhodou je, že pokud otevřete web aplikaci po delší době, je potřeba počkat pár sekund, dokud se neprobudí ze zimního spánku. Stačí kliknout na back up! a je opět appka v provozu.

Pokud si nevíte s něčím rády, pomůže i super dokumentace od Streamlitu (doporučuju si ji projít), která vás provede startovní čárou nebo komunitní fórum, kde lidé řeší podobné problémy, jako vy.

Už máte vlastní upečenou appku?

Doufám, že to nebude takový horor replikovat návod, který jsem se snažil popsat. Nebo rovnou zrealizovat vlastní nápad. Jakmile si to jednou zkusíte, appky poběží jako na běžícím páse.

Další inspirace na aplikaci, kterou jsem nutně potřeboval, je DOC to HTML convertor, který převede váš dokument do HTML podoby, například pro váš web nebo CMS. Nic takového jsem na internetech nenašel, tak jsem si ji vytvořit s mým nejlepším kamarádem. Appkám zdar!