ebSkola

9. tēma / 9.4

9.4 HTML un Python sasaiste

Stundas uzdevums: Saprast HTML un Python sasaisti - kā Streamlit ģenerē HTML un kā pielāgot izskatu.

SR 2.4.7. Lietotāja saskarne SR 2.4.11. Bibliotēkas

70 min plāns: Teorija un paraugs (~10 min) · 1. uzdevums (~15 min) - ieliec savu HTML Streamlit lapā · 2. uzdevums (~25 min) - uzraksti CSS kartiņu stilu · 3. uzdevums (~20 min) - saliec divu kolonnu izkārtojumu. Papildu uzdevumu sāc tikai tad, ja pārējie trīs ir gatavi.

Pirms sāc: atver savu 9.3 stundas lapa.py. Atceries: HTML Streamlit lapā strādā tikai ar unsafe_allow_html=True.

Teorija: HTML/CSS Streamlit kontekstā

Streamlit aiz kulisēm ģenerē HTML, CSS un JavaScript. Tu vari ielikt savu HTML/CSS, lai padarītu lietotni unikālu.

import streamlit as st

# Pielāgots HTML
st.markdown(
    "<h1 style='color: #FFB142;'>Krāsains virsraksts</h1>",
    unsafe_allow_html=True
)

# Pielāgots CSS visai lapai
st.markdown("""
<style>
.stButton button {
    background-color: #948979;
    color: white;
    border-radius: 6px;
    padding: 10px 20px;
}
</style>
""", unsafe_allow_html=True)

# Kolonnas izkārtojumam
col1, col2, col3 = st.columns(3)
with col1:
    st.metric("Spēlētāji", 142)
with col2:
    st.metric("Spēles", 1024, delta=12)
with col3:
    st.metric("Vidējais", 87, delta=-3)

UZMANĪBA: unsafe_allow_html=True ir bīstams, ja saturs nāk no lietotāja - XSS uzbrukums!

Praktiskie uzdevumi

1. uzdevums -

Ieliec savu HTML Streamlit lapā

Beigās tu redzēsi atšķirību starp tekstu un HTML.

  1. Pievieno st.markdown("<h1>Krāsains virsraksts</h1>") bez papildu parametra.
  2. Palaid un pieraksti, ko lapa parādīja.
  3. Pievieno parametru unsafe_allow_html=True.
  4. Palaid vēlreiz un salīdzini rezultātu.
  5. Pievieno virsrakstam stilu style='color: #FFB142;'.
  6. Pieraksti, kāpēc šis parametrs saucas unsafe.

Gatavs, kad: bez parametra lapa parāda tagus kā tekstu, ar to - īstu oranžu virsrakstu.

2. uzdevums -

Uzraksti CSS kartiņu stilu

Beigās tavi dati izskatīsies kā kartiņas, nevis kā vienkāršs teksts.

  1. Pievieno st.markdown blokā <style> tagu.
  2. Uzraksti tajā klasi .metric-card ar fona krāsu un padding.
  3. Pievieno tai border-radius un border-left.
  4. Izveido div ar šo klasi un ieliec tajā vienu skaitli.
  5. Palaid un pārbaudi, vai kartiņai ir apaļi stūri.
  6. Nomaini border-left krāsu un palaid vēlreiz.
  7. Pieraksti, kāpēc CSS jāpievieno tikai vienu reizi lapā.

Gatavs, kad: ekrānā ir kartiņa ar krāsainu kreiso maliņu un apaļiem stūriem.

3. uzdevums -

Saliec divu kolonnu izkārtojumu

Beigās tava lapa izmantos visu ekrāna platumu.

  1. Pievieno col1, col2 = st.columns(2).
  2. Ieliec vienu kartiņu with col1: blokā.
  3. Ieliec otru kartiņu with col2: blokā.
  4. Palaid un pārbaudi, vai abas ir blakus.
  5. Nomaini uz st.columns([2, 1]) un palaid vēlreiz.
  6. Pieraksti, kā mainījās kolonnu platums.
  7. Sašaurini pārlūka logu un pieraksti, kas notiek ar kolonnām.

Gatavs, kad: abas kartiņas ir blakus, un ar [2, 1] pirmā kolonna ir divreiz platāka.

Papildu uzdevums - Pievieno lapas ikonu un nosaukumu

Ja pamatdarbs ir gatavs, noformē pārlūka cilni.

  1. Pievieno faila sākumā st.set_page_config(page_title="Mans projekts", page_icon="🎮").
  2. Pārliecinies, ka šī rinda ir pirms visām citām st. komandām.
  3. Palaid un paskaties uz pārlūka cilnes nosaukumu.
  4. Pārvieto rindu zemāk un pieraksti, kāda kļūda rodas.
  5. Ieliec to atpakaļ pirmajā vietā.

Gatavs, kad: cilnē redzams tavs nosaukums ar ikonu, un tu zini, ka šī rinda drīkst būt tikai pirmā.

Biežākās kļūdas

  • unsafe_allow_html ar lietotāja datiem: XSS risks. Vienmēr html.escape() ievadīto.
  • CSS netiek piemērots: Streamlit izolē CSS - lieto specifiskus selektorus.
  • Aizmirsts close-tag HTML: Pārlūks parsē kļūdu, lapa salauzta.

Koda piemērs

import streamlit as st

st.markdown("""
<style>
.metric-card {
    background: #393E46;
    padding: 20px;
    border-radius: 8px;
    border-left: 5px solid #FFB142;
}
</style>
""", unsafe_allow_html=True)

col1, col2 = st.columns(2)
with col1:
    st.markdown(
        '<div class="metric-card"><h3>Spēlētāji</h3><div class="metric-value">142</div></div>',
        unsafe_allow_html=True
    )
with col2:
    st.metric("Vidējie punkti", 87, delta=5)
Pielāgota karte ar oranžu apmali un lielu skaitli.
Paralēls metric ar zaļu delta zīmi.