Podczas rozwiązywania zadania z poprzedniego rozdziału – system powiadomień, część z Was mogła zobaczyć w przeglądarce taki oto czerwony komunikat o błędzie:streamlit.errors.StreamlitAPIException: The value ":alarm_clock:" is not a valid emoji. Shortcodes are not allowed, please use a single character instead.
O co tutaj chodzi? Przecież w poprzedniej lekcji kody z dwukropkami działały!
To jedna z najważniejszych i mylących reguł w Streamlit. Musisz zapamiętać, że Streamlit traktuje emoji dwojako, w zależności od tego gdzie je wpiszesz:
- Wewnątrz zwykłego tekstu (st.markdown) – kody tekstowe (tzw. shortcodes ) takie jak
:heart:czy:alarm_clock:działają bez problemu. Streamlit sam zamienia je w locie na obrazki. - W parametrze
icon="..."(w ramkach alertów) – tutaj kody tekstowe są całkowicie zakazane. Streamlit oczekuje w tym miejscu wyłącznie jednego czystego znaku Unicode (czyli prawdziwego, wklejonego obrazka emoji).
❌ Tak NIE zadziała (błąd):
# Użycie shortcode w argumencie icon spowoduje awarię aplikacji
st.info("Kawiarnia czynna do 21:00.", icon=":alarm_clock:")
✔ Tak zadziała idealnie:
# Musisz wkleić bezpośrednio "żywe" emoji jak jeden znak
st.info("Kawiarnia czynna do 21:00.", icon="⏰")
Jak szybko wkleić prawdziwe emoji w kodzie?
Zamiast pisać kod w dwukropkach, użyj skrótu klawiszowego, który otworzy systemowe okienko z ikonami:
- Windows: klawisz
Windows+.(kropka) - Mac:
Command+Control+Space
Wyszukaj tam zegar, kliknij go i wklej do cudzysłowu parametru icon lub sam wskoczy tam gdzie jest obecnie kursor!
Oto oficjalne i poprawione rozwiązanie tego ćwiczenia:
import streamlit as st
st.title("System Powiadomień Kawiarni")
# 1. Niebieska ramka informacyjna z ikoną zegara
st.info("Kawiarnia jest dziś czynna do godziny 21:00", icon="⏰")
# 2. Zielona ramka sukcesu z ikoną prezentu
st.success("Kod rabatowy AKTYWNY! Naliczono 15% zniżki.", icon="🎉")
🖊 Okiem Autora: Uwielbiam te kolorowe ramki z alertami, bo niesamowicie ożywiają aplikację bez dotykania kodu CSS. Pamiętam jednak swój błąd z początku : używałem czerwonego st.error do zwykłych, mało ważnych przypomnień. Czerwony kolor podświadomie wywołuje u użytkownika lekki stres. Rezerwuj go tylko na prawdziwe, krytyczne błędy!
W następnym wpisie przejdziemy do kolejnego kroku – ożywimy nasza stronę!