From a379ef40d14bb2ee002f76994dd8ca3ec9a2026b Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 00:20:26 +0100 Subject: [PATCH 01/48] Update README.md --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 7b2de03..118630b 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,26 @@ -# 30 Days Of Streamlit 🎈 +# ā§Šā§Ļ āĻĻāĻŋāύ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ 🎈 -This is the official repo of `#30DaysOfStreamlit` — a 30-day social challenge for you to learn, build and deploy [Streamlit](https://streamlit.io) apps. +āĻāϟāĻŋ āĻšāϞ #30DaysOfStreamlit-āĻāϰ āĻĒā§āϰāϧāĻžāύ āϰ⧇āĻĒā§‹ — āφāĻĒāύāĻžāϰ āϜāĻ¨ā§āϝ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ…ā§āϝāĻžāĻĒāϗ⧁āϞāĻŋ āĻļāĻŋāĻ–āϤ⧇, āϤ⧈āϰāĻŋ āĻ•āϰāϤ⧇ āĻāĻŦāĻ‚ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ 30-āĻĻāĻŋāύ⧇āϰ āϏāĻžāĻŽāĻžāϜāĻŋāĻ• āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ⧎ -## How to participate +## āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻ…āĻ‚āĻļāĻ—ā§āϰāĻšāĻŖ āĻ•āϰāĻŦ⧇āύ -All you need to participate is a computer, a basic understanding of Python, and your curiosity. 🧠 +āĻ…āĻ‚āĻļāĻ—ā§āϰāĻšāĻŖ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āφāĻĒāύāĻžāϰ āϝāĻž āĻĻāϰāĻ•āĻžāϰ āϤāĻž āĻšāϞ āĻāĻ•āϟāĻŋ āĻ•āĻŽā§āĻĒāĻŋāωāϟāĻžāϰ, āĻĒāĻžāχāĻĨāύ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āĻāĻ•āϟāĻŋ āĻĒā§āϰāĻžāĻĨāĻŽāĻŋāĻ• āϧāĻžāϰāĻŖāĻž āĻāĻŦāĻ‚ āφāĻĒāύāĻžāϰ āĻ•ā§ŒāϤ⧂āĻšāϞāĨ¤ 🧠 -A new challenge is released daily via Streamlit's [Twitter](https://twitter.com/streamlit) and [LinkedIn](https://www.linkedin.com/company/streamlit/posts/?feedView=all) accounts as well as the [`#30DaysOfStreamlit` app](https://share.streamlit.io/streamlit/30days/). +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§‡āϰ [āϟ⧁āχāϟāĻžāϰ](https://twitter.com/streamlit) āĻāĻŦāĻ‚ [āϞāĻŋāĻ™ā§āĻ•āĻĄāχāύ](https://www.linkedin.com/company/streamlit/posts/?feedView=all) āĻ…ā§āϝāĻžāĻ•āĻžāωāĻ¨ā§āĻŸā§‡āϰ āĻĒāĻžāĻļāĻžāĻĒāĻžāĻļāĻŋ [`#30DaysOfStreamlit` app](https://share.streamlit.io/streamlit/30days/) āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻĒā§āϰāϤāĻŋāĻĻāĻŋāύ āĻāĻ•āϟāĻŋ āύāϤ⧁āύ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āĻĒā§āϰāĻ•āĻžāĻļāĻŋāϤ āĻšāϝāĻŧāĨ¤ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/streamlit/30days/) -Complete the daily challenges, share your solutions with us on Twitter or LinkedIn, and get rewarded with cool Streamlit swag! 😎 +āĻĒā§āϰāϤāĻŋāĻĻāĻŋāύ⧇āϰ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜāϗ⧁āϞāĻŋ āϏāĻŽā§āĻĒā§‚āĻ°ā§āĻŖ āĻ•āϰ⧁āύ, āϟ⧁āχāϟāĻžāϰ āĻŦāĻž āϞāĻŋāĻ™ā§āĻ•āĻĄāχāύ⧇ āφāĻŽāĻžāĻĻ⧇āϰ āϏāĻžāĻĨ⧇ āφāĻĒāύāĻžāϰ āϏāĻŽāĻžāϧāĻžāύāϗ⧁āϞāĻŋ āĻ­āĻžāĻ— āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻĻā§āĻŦāĻžāϰāĻž āĻĒ⧁āϰāĻ¸ā§āĻ•ā§ƒāϤ āĻšā§‹āύ! 😎 -## What are the daily challenges? +## āĻĻ⧈āύāĻ¨ā§āĻĻāĻŋāύ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āĻ•āĻŋ? -Find out more about the specific challenges by participating! The 30-day challenges are divided by 3 levels of difficulty to appeal to participants of all skill levels: +āĻ…āĻ‚āĻļāĻ—ā§āϰāĻšāĻŖ āĻ•āϰ⧇ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āφāϰāĻ“ āϜāĻžāύ⧁āύ! ā§Šā§Ļ-āĻĻāĻŋāύ⧇āϰ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜāϗ⧁āϞāĻŋ āϏāĻŽāĻ¸ā§āϤ āĻĻāĻ•ā§āώāϤāĻž āĻ¸ā§āϤāϰ⧇āϰ āĻ…āĻ‚āĻļāĻ—ā§āϰāĻšāĻŖāĻ•āĻžāϰ⧀āĻĻ⧇āϰ āĻ•āĻžāϛ⧇ āφāĻŦ⧇āĻĻāύ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ ā§Š āĻ¸ā§āϤāϰ āĻĻā§āĻŦāĻžāϰāĻž āĻŦāĻŋāĻ­āĻ•ā§āϤ: -| Beginner (Days 1-7) | Intermediate (Days 8-23) | Advanced (Days 24-30) | +| āĻĒā§āϰāĻžāĻĨāĻŽāĻŋāĻ• (āĻĻāĻŋāύ ā§§-ā§­) | āĻŽāĻ§ā§āϝāĻŦāĻ°ā§āϤ⧀ (āĻĻāĻŋāύ ā§Ž-ā§¨ā§Š) | āωāĻ¨ā§āύāϤ (āĻĻāĻŋāύ ⧍ā§Ē-ā§Šā§Ļ) | | :--- | :---- | :--- | -| Set up your local and cloud coding environments, install Streamlit, and build your first Streamlit app.| Learn about a new [Streamlit command](https://docs.streamlit.io/library/api-reference) each day and use it to create and deploy a simple Streamlit app. | Learn about important topics such as session state, efficient data and memory management via caching, complex layouts, and much more. +| āφāĻĒāύāĻžāϰ āĻ¸ā§āĻĨāĻžāύ⧀āϝāĻŧ āĻāĻŦāĻ‚ āĻ•ā§āϞāĻžāωāĻĄ āϕ⧋āĻĄāĻŋāĻ‚ āĻĒāϰāĻŋāĻŦ⧇āĻļ āϏ⧇āϟ āφāĻĒ āĻ•āϰ⧁āύ, āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āχāύāĻ¸ā§āϟāϞ āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ āφāĻĒāύāĻžāϰ āĻĒā§āϰāĻĨāĻŽ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύāĨ¤ | āĻĒā§āϰāϤāĻŋāĻĻāĻŋāύ āĻāĻ•āϟāĻŋ āύāϤ⧁āύ [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§](https://docs.streamlit.io/library/api-reference) āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āϜāĻžāύ⧁āύ āĻāĻŦāĻ‚ āĻāĻ•āϟāĻŋ āϏāĻžāϧāĻžāϰāĻŖ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻāĻŦāĻ‚ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāϤ⧇ āĻāϟāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύāĨ¤ | āϏ⧇āĻļāύ āĻ¸ā§āĻŸā§‡āϟ, āĻĻāĻ•ā§āώ āĻĄā§‡āϟāĻž āĻāĻŦāĻ‚ āĻ•ā§āϝāĻžāĻļāĻŋāĻ‚, āϜāϟāĻŋāϞ āύāĻ•āĻļāĻž āĻāĻŦāĻ‚ āφāϰāĻ“ āĻ…āύ⧇āĻ• āĻ•āĻŋāϛ⧁āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻŽā§‡āĻŽāϰāĻŋ āĻŦā§āϝāĻŦāĻ¸ā§āĻĨāĻžāĻĒāύāĻžāϰ āĻŽāϤ⧋ āϗ⧁āϰ⧁āĻ¤ā§āĻŦāĻĒā§‚āĻ°ā§āĻŖ āĻŦāĻŋāώāϝāĻŧ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āϜāĻžāύ⧁āύāĨ¤ ## Prizes From c54b77f50d87210048e199e309d4619eaf3d962c Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 00:39:25 +0100 Subject: [PATCH 02/48] Update README.md --- README.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 118630b..b606377 100644 --- a/README.md +++ b/README.md @@ -22,29 +22,29 @@ | :--- | :---- | :--- | | āφāĻĒāύāĻžāϰ āĻ¸ā§āĻĨāĻžāύ⧀āϝāĻŧ āĻāĻŦāĻ‚ āĻ•ā§āϞāĻžāωāĻĄ āϕ⧋āĻĄāĻŋāĻ‚ āĻĒāϰāĻŋāĻŦ⧇āĻļ āϏ⧇āϟ āφāĻĒ āĻ•āϰ⧁āύ, āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āχāύāĻ¸ā§āϟāϞ āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ āφāĻĒāύāĻžāϰ āĻĒā§āϰāĻĨāĻŽ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύāĨ¤ | āĻĒā§āϰāϤāĻŋāĻĻāĻŋāύ āĻāĻ•āϟāĻŋ āύāϤ⧁āύ [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§](https://docs.streamlit.io/library/api-reference) āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āϜāĻžāύ⧁āύ āĻāĻŦāĻ‚ āĻāĻ•āϟāĻŋ āϏāĻžāϧāĻžāϰāĻŖ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻāĻŦāĻ‚ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāϤ⧇ āĻāϟāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύāĨ¤ | āϏ⧇āĻļāύ āĻ¸ā§āĻŸā§‡āϟ, āĻĻāĻ•ā§āώ āĻĄā§‡āϟāĻž āĻāĻŦāĻ‚ āĻ•ā§āϝāĻžāĻļāĻŋāĻ‚, āϜāϟāĻŋāϞ āύāĻ•āĻļāĻž āĻāĻŦāĻ‚ āφāϰāĻ“ āĻ…āύ⧇āĻ• āĻ•āĻŋāϛ⧁āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻŽā§‡āĻŽāϰāĻŋ āĻŦā§āϝāĻŦāĻ¸ā§āĻĨāĻžāĻĒāύāĻžāϰ āĻŽāϤ⧋ āϗ⧁āϰ⧁āĻ¤ā§āĻŦāĻĒā§‚āĻ°ā§āĻŖ āĻŦāĻŋāώāϝāĻŧ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āϜāĻžāύ⧁āύāĨ¤ -## Prizes +## āĻĒ⧁āϰāĻ¸ā§āĻ•āĻžāϰ -If getting up to speed with the fastest and easiest way to build data apps isn't already the best summer gift, you can also win Streamlit goodies! +āĻĄā§‡āϟāĻž āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋāϰ āĻĻā§āϰ⧁āϤāϤāĻŽ āĻāĻŦāĻ‚ āϏāĻšāϜāϤāĻŽ āωāĻĒāĻžāϝāĻŧ⧇ āĻĻā§āϰ⧁āϤ āĻ—āϤāĻŋāϤ⧇ āωāĻ āĻž āϝāĻĻāĻŋ āχāϤāĻŋāĻŽāĻ§ā§āϝ⧇āχ āϏ⧇āϰāĻž āĻ—ā§āϰ⧀āĻˇā§āĻŽāĻ•āĻžāϞ⧀āύ āωāĻĒāĻšāĻžāϰ āύāĻž āĻšāϝāĻŧ, āϤāĻžāĻšāϞ⧇ āφāĻĒāύāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āϗ⧁āĻĄāĻŋāĻ“ āϜāĻŋāϤāϤ⧇ āĻĒāĻžāϰ⧇āύ! -Complete the daily challenges, share your solutions with us on [Twitter](https://twitter.com/streamlit) or [LinkedIn](https://www.linkedin.com/company/streamlit/posts/?feedView=all), and get rewarded with cool Streamlit swag! 🎁 +āĻĒā§āϰāϤāĻŋāĻĻāĻŋāύ⧇āϰ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜāϗ⧁āϞāĻŋ āϏāĻŽā§āĻĒā§‚āĻ°ā§āĻŖ āĻ•āϰ⧁āύ, [āϟ⧁āχāϟāĻžāϰ](https://twitter.com/streamlit) āĻŦāĻž [āϞāĻŋāĻ™ā§āĻ•āĻĄāχāύ](https://www.linkedin.com/company/streamlit/posts/?feedView=all) āφāĻŽāĻžāĻĻ⧇āϰ āϏāĻžāĻĨ⧇ āφāĻĒāύāĻžāϰ āϏāĻŽāĻžāϧāĻžāύāϗ⧁āϞāĻŋ āĻ­āĻžāĻ— āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ āĻĻ⧁āĻ°ā§āĻĻāĻžāĻ¨ā§āϤ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āϏ⧋āϝāĻŧāĻžāĻ— āĻĻāĻŋāϝāĻŧ⧇ āĻĒ⧁āϰāĻ¸ā§āĻ•ā§ƒāϤ āĻšā§‹āύ! -## Resources +## āϏāĻŽā§āĻĒāĻĻ -- The official [`#30DaysOfStreamlit` app](https://share.streamlit.io/streamlit/30days/) where daily challenges are posted -- Our [Twitter](https://twitter.com/streamlit) and [LinkedIn](https://www.linkedin.com/company/streamlit/posts/?feedView=all) feeds for daily updates -- Streamlit [documentation](https://docs.streamlit.io/) and [cheat sheet](https://docs.streamlit.io/library/cheatsheet) for a thorough reference of Streamlit commands -- Our awesome [Gallery](https://streamlit.io/gallery) for inspiration, templates, and community apps -- Our [blog](https://blog.streamlit.io/how-to-master-streamlit-for-data-science/) for tips and the latest Streamlit info +- āĻ…āĻĢāĻŋāϏāĻŋāϝāĻŧāĻžāϞ [`#30DaysOfStreamlit` app](https://share.streamlit.io/streamlit/30days/) āĻ…ā§āϝāĻžāĻĒ āϝ⧇āĻ–āĻžāύ⧇ āĻĒā§āϰāϤāĻŋāĻĻāĻŋāύ⧇āϰ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āĻĒā§‹āĻ¸ā§āϟ āĻ•āϰāĻž āĻšāϝāĻŧ +- āĻĒā§āϰāϤāĻŋāĻĻāĻŋāύ⧇āϰ āφāĻĒāĻĄā§‡āĻŸā§‡āϰ āϜāĻ¨ā§āϝ āφāĻŽāĻžāĻĻ⧇āϰ [āϟ⧁āχāϟāĻžāϰ](https://twitter.com/streamlit) āĻāĻŦāĻ‚ [āϞāĻŋāĻ™ā§āĻ•āĻĄāχāύ](https://www.linkedin.com/company/streamlit/posts/?feedView=all) āĻĢāĻŋāĻĄ +- āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻĒ⧁āĻ™ā§āĻ–āĻžāύ⧁āĻĒ⧁āĻ™ā§āĻ– āϰ⧇āĻĢāĻžāϰ⧇āĻ¨ā§āϏ⧇āϰ āϜāĻ¨ā§āϝ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ [āĻĄāϕ⧁āĻŽā§‡āĻ¨ā§āĻŸā§‡āĻļāύ](https://docs.streamlit.io/) āĻāĻŦāĻ‚ [āϚāĻŋāϟ āĻļā§€āϟ](https://docs.streamlit.io/library/cheatsheet) +- āĻ…āύ⧁āĻĒā§āϰ⧇āϰāĻŖāĻž, āĻŸā§‡āĻŽāĻĒā§āϞ⧇āϟ āĻāĻŦāĻ‚ āϏāĻŽā§āĻĒā§āϰāĻĻāĻžāϝāĻŧ⧇āϰ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϜāĻ¨ā§āϝ āφāĻŽāĻžāĻĻ⧇āϰ āĻĻ⧁āĻ°ā§āĻĻāĻžāĻ¨ā§āϤ [āĻ—ā§āϝāĻžāϞāĻžāϰāĻŋ](https://streamlit.io/gallery) +- āϟāĻŋāĻĒāϏ āĻāĻŦāĻ‚ āϏāĻ°ā§āĻŦāĻļ⧇āώ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āϤāĻĨā§āϝ⧇āϰ āϜāĻ¨ā§āϝ āφāĻŽāĻžāĻĻ⧇āϰ [āĻŦā§āϞāĻ—](https://blog.streamlit.io/how-to-master-streamlit-for-data-science/) + +## āĻ…āύ⧁āĻŦāĻžāĻĻ -## Translations +#30DaysOfStreamlit āĻāϰ āύāĻžāĻ—āĻžāϞ āĻĒā§āϰāϏāĻžāϰāĻŋāϤ āĻ•āϰāϤ⧇ āφāĻŽāĻžāĻĻ⧇āϰ āϏāĻžāĻšāĻžāĻ¯ā§āϝ āĻ•āϰāϤ⧇ āϚāĻžāύ āĻāĻŦāĻ‚ āχāĻ‚āϰ⧇āϜāĻŋ āφāĻĒāύāĻžāϰ āĻĒā§āϰāĻžāĻĨāĻŽāĻŋāĻ• āĻ­āĻžāώāĻž āύāϝāĻŧ? āĻšā§āϝāĻžāϞ⧇āĻžā§āϜāϗ⧁āϞāĻŋāϕ⧇ āφāĻĒāύāĻžāϰ āĻĒāĻ›āĻ¨ā§āĻĻ⧇āϰ āĻ­āĻžāώāĻžāϝāĻŧ āĻ…āύ⧁āĻŦāĻžāĻĻ āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ āύ⧀āĻšā§‡ āϤāĻžāĻĻ⧇āϰ āϞāĻŋāĻ™ā§āĻ• āĻ•āϰ⧁āύ! -Want to help us expand the reach of `#30DaysOfStreamlit` and English isn't your primary language? Translate the challenges into your preferred language and link to them below! - -- [English](https://github.com/streamlit/30days) (Official): [![30 Days of Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days.streamlit.app) -- [Chinese](https://github.com/TeddyHuang-00/30days-Chinese) (by [Nan Huang](https://github.com/TeddyHuang-00)): [![30 夊å­Ļ Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-chinese.streamlit.app) -- [EspaÃąol](https://github.com/streamlit/30days-spanish/) (by [Emiliano Rosso](https://github.com/arraydude)): [![30 Dias de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-spanish.streamlit.app/) -- [French](https://github.com/streamlit/30days-French) (by [Charly Wargnier](https://github.com/charlyWargnier/)): [![30 Days of Streamlit en Français!](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-french.streamlit.app/) -- [Polish](https://github.com/streamlit/30days-polish) (by [Michał Nowotka](https://github.com/sfc-gh-mnowotka)): [![Streamlit w 30 dni po Polsku](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://w30dni.streamlit.app/) -- [Portuguese](https://github.com/franciscoed/30days) (by [Francisco Edilton](https://github.com/franciscoed)): [![30 Dias de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30dias.streamlit.app/) -- [Russian](https://github.com/kseniaanske/30days) (by [Ksenia Anske](https://github.com/kseniaanske)): [![30 ДĐŊĐĩĐš Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-russian.streamlit.app/) -- [Hindi](https://github.com/streamlit/30days-Hindi): [![Streamlit ⤕āĨ‡ 30 ā¤Ļā¤ŋ⤍](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-hindi.streamlit.app/) +- [āχāĻ‚āϰ⧇āϜāĻŋ](https://github.com/streamlit/30days) (āφāϧāĻŋāĻ•āĻžāϰāĻŋāĻ•): [![30 Days of Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days.streamlit.app) +- [āϚāĻžāχāύāĻŋāϜ](https://github.com/TeddyHuang-00/30days-Chinese) ([Nan Huang](https://github.com/TeddyHuang-00)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 夊å­Ļ Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-chinese.streamlit.app) +- [āĻ¸ā§āĻĒā§āϝāĻžāύāĻŋāĻļ](https://github.com/streamlit/30days-spanish/) ([Emiliano Rosso](https://github.com/arraydude)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 Dias de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-spanish.streamlit.app/) +- [āĻĢāϰāĻžāϏāĻŋ](https://github.com/streamlit/30days-French) ([Charly Wargnier](https://github.com/charlyWargnier/)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 Days of Streamlit en Français!](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-french.streamlit.app/) +- [āĻĒā§‹āϞāĻŋāĻļ](https://github.com/streamlit/30days-polish) ([Michał Nowotka](https://github.com/sfc-gh-mnowotka)) āĻĻā§āĻŦāĻžāϰāĻž: [![Streamlit w 30 dni po Polsku](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://w30dni.streamlit.app/) +- [āĻĒāĻ°ā§āϤ⧁āĻ—ā§€āϜ](https://github.com/franciscoed/30days) ([Francisco Edilton](https://github.com/franciscoed)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 Dias de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30dias.streamlit.app/) +- [āϰāĻžāĻļāĻŋāϝāĻŧāĻžāύ](https://github.com/kseniaanske/30days) ([Ksenia Anske](https://github.com/kseniaanske)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 ДĐŊĐĩĐš Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-russian.streamlit.app/) +- [āĻšāĻŋāĻ¨ā§āĻĻāĻŋ](https://github.com/streamlit/30days-Hindi): [![Streamlit ⤕āĨ‡ 30 ā¤Ļā¤ŋ⤍](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-hindi.streamlit.app/) From b6156f7bdc8648959844352f784c6e011ffb06d4 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 01:00:18 +0100 Subject: [PATCH 03/48] Update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index b606377..3060dcd 100644 --- a/README.md +++ b/README.md @@ -41,10 +41,10 @@ #30DaysOfStreamlit āĻāϰ āύāĻžāĻ—āĻžāϞ āĻĒā§āϰāϏāĻžāϰāĻŋāϤ āĻ•āϰāϤ⧇ āφāĻŽāĻžāĻĻ⧇āϰ āϏāĻžāĻšāĻžāĻ¯ā§āϝ āĻ•āϰāϤ⧇ āϚāĻžāύ āĻāĻŦāĻ‚ āχāĻ‚āϰ⧇āϜāĻŋ āφāĻĒāύāĻžāϰ āĻĒā§āϰāĻžāĻĨāĻŽāĻŋāĻ• āĻ­āĻžāώāĻž āύāϝāĻŧ? āĻšā§āϝāĻžāϞ⧇āĻžā§āϜāϗ⧁āϞāĻŋāϕ⧇ āφāĻĒāύāĻžāϰ āĻĒāĻ›āĻ¨ā§āĻĻ⧇āϰ āĻ­āĻžāώāĻžāϝāĻŧ āĻ…āύ⧁āĻŦāĻžāĻĻ āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ āύ⧀āĻšā§‡ āϤāĻžāĻĻ⧇āϰ āϞāĻŋāĻ™ā§āĻ• āĻ•āϰ⧁āύ! - [āχāĻ‚āϰ⧇āϜāĻŋ](https://github.com/streamlit/30days) (āφāϧāĻŋāĻ•āĻžāϰāĻŋāĻ•): [![30 Days of Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days.streamlit.app) -- [āϚāĻžāχāύāĻŋāϜ](https://github.com/TeddyHuang-00/30days-Chinese) ([Nan Huang](https://github.com/TeddyHuang-00)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 夊å­Ļ Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-chinese.streamlit.app) -- [āĻ¸ā§āĻĒā§āϝāĻžāύāĻŋāĻļ](https://github.com/streamlit/30days-spanish/) ([Emiliano Rosso](https://github.com/arraydude)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 Dias de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-spanish.streamlit.app/) -- [āĻĢāϰāĻžāϏāĻŋ](https://github.com/streamlit/30days-French) ([Charly Wargnier](https://github.com/charlyWargnier/)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 Days of Streamlit en Français!](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-french.streamlit.app/) -- [āĻĒā§‹āϞāĻŋāĻļ](https://github.com/streamlit/30days-polish) ([Michał Nowotka](https://github.com/sfc-gh-mnowotka)) āĻĻā§āĻŦāĻžāϰāĻž: [![Streamlit w 30 dni po Polsku](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://w30dni.streamlit.app/) -- [āĻĒāĻ°ā§āϤ⧁āĻ—ā§€āϜ](https://github.com/franciscoed/30days) ([Francisco Edilton](https://github.com/franciscoed)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 Dias de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30dias.streamlit.app/) -- [āϰāĻžāĻļāĻŋāϝāĻŧāĻžāύ](https://github.com/kseniaanske/30days) ([Ksenia Anske](https://github.com/kseniaanske)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 ДĐŊĐĩĐš Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-russian.streamlit.app/) +- [āϚāĻžāχāύāĻŋāϜ](https://github.com/TeddyHuang-00/30days-Chinese) ([āύāĻžāύ āĻšā§ā§ŸāĻžāĻ‚](https://github.com/TeddyHuang-00)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 夊å­Ļ Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-chinese.streamlit.app) +- [āĻ¸ā§āĻĒā§āϝāĻžāύāĻŋāĻļ](https://github.com/streamlit/30days-spanish/) ([āĻāĻŽāĻŋāϞāĻŋ⧟āĻžāύ⧋ āϰ⧋āϏ⧋](https://github.com/arraydude)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 Dias de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-spanish.streamlit.app/) +- [āĻĢāϰāĻžāϏāĻŋ](https://github.com/streamlit/30days-French) ([āϚāĻžāĻ°ā§āϞāĻŋ āĻ“ā§ŸāĻžāĻ°ā§āĻ—āĻŋāύāĻžāϰ](https://github.com/charlyWargnier/)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 Days of Streamlit en Français!](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-french.streamlit.app/) +- [āĻĒā§‹āϞāĻŋāĻļ](https://github.com/streamlit/30days-polish) ([āĻŽāĻžāχāϕ⧇āϞ āύ⧋āĻŦāϟāĻ•āĻž](https://github.com/sfc-gh-mnowotka)) āĻĻā§āĻŦāĻžāϰāĻž: [![Streamlit w 30 dni po Polsku](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://w30dni.streamlit.app/) +- [āĻĒāĻ°ā§āϤ⧁āĻ—ā§€āϜ](https://github.com/franciscoed/30days) ([āĻĢā§āϰāĻžāĻ¨ā§āϏāĻŋāĻ¸ā§āϕ⧋ āĻāĻĄāĻŋāĻ˛ā§āϟāύ](https://github.com/franciscoed)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 Dias de Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30dias.streamlit.app/) +- [āϰāĻžāĻļāĻŋāϝāĻŧāĻžāύ](https://github.com/kseniaanske/30days) ([āϕ⧇āϏāĻŋāύāĻŋāϝāĻŧāĻž āφāύāϏāϕ⧇](https://github.com/kseniaanske)) āĻĻā§āĻŦāĻžāϰāĻž: [![30 ДĐŊĐĩĐš Streamlit](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-russian.streamlit.app/) - [āĻšāĻŋāĻ¨ā§āĻĻāĻŋ](https://github.com/streamlit/30days-Hindi): [![Streamlit ⤕āĨ‡ 30 ā¤Ļā¤ŋ⤍](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://30days-in-hindi.streamlit.app/) From 9d9bfdfd2af782654bb4331eee96ef13d8bc5698 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 01:11:47 +0100 Subject: [PATCH 04/48] Update streamlit_app.py --- streamlit_app.py | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/streamlit_app.py b/streamlit_app.py index e18e771..80e22b3 100644 --- a/streamlit_app.py +++ b/streamlit_app.py @@ -20,7 +20,7 @@ def update_params(): col1, col2, col3 = st.columns((1, 4, 1)) with col2: st.image(Image.open("streamlit-logo-secondary-colormark-darktext.png")) -st.markdown("# 30 Days of Streamlit") +st.markdown("# ā§Šā§Ļ āĻĻāĻŋāύ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ ") days_list = [f"Day {x}" for x in md_files] @@ -36,37 +36,37 @@ def update_params(): "Start the Challenge 👇", days_list, key="day", on_change=update_params ) -with st.expander("About the #30DaysOfStreamlit"): +with st.expander("#30DaysOfStreamlit āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ"): st.markdown( """ - The **#30DaysOfStreamlit** is a coding challenge designed to help you get started in building Streamlit apps. + **#30DaysOfStreamlit** āĻšāϞ āĻāĻ•āϟāĻŋ āϕ⧋āĻĄāĻŋāĻ‚ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āϝāĻž āφāĻĒāύāĻžāϕ⧇ Streamlit āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻļ⧁āϰ⧁ āĻ•āϰāϤ⧇ āϏāĻžāĻšāĻžāĻ¯ā§āϝ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĄāĻŋāϜāĻžāχāύ āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇āĨ¤ - Particularly, you'll be able to: - - Set up a coding environment for building Streamlit apps - - Build your first Streamlit app - - Learn about all the awesome input/output widgets to use for your Streamlit app + āĻŦāĻŋāĻļ⧇āώ āĻ•āϰ⧇, āφāĻĒāύāĻŋ āϏāĻ•ā§āώāĻŽ āĻšāĻŦ⧇āύ: + - āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ…ā§āϝāĻžāĻĒāϏ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āϕ⧋āĻĄāĻŋāĻ‚ āĻĒāϰāĻŋāĻŦ⧇āĻļ āϏ⧇āϟ āφāĻĒ āĻ•āϰ⧁āύ + - āφāĻĒāύāĻžāϰ āĻĒā§āϰāĻĨāĻŽ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ + - āφāĻĒāύāĻžāϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϜāĻ¨ā§āϝ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āϏāĻŽāĻ¸ā§āϤ āĻĻ⧁āĻ°ā§āĻĻāĻžāĻ¨ā§āϤ āχāύāĻĒ⧁āϟ/āφāωāϟāĻĒ⧁āϟ āωāχāĻœā§‡āϟ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āϜāĻžāύ⧁āύ """ ) # Sidebar st.sidebar.header("About") st.sidebar.markdown( - "[Streamlit](https://streamlit.io) is a Python library that allows the creation of interactive, data-driven web applications in Python." + "[āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§](https://streamlit.io) āĻšāϞ āĻāĻ•āϟāĻŋ āĻĒāĻžāχāĻĨāύ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āϝāĻž āĻĒāĻžāχāĻĨāύ⧇ āχāĻ¨ā§āϟāĻžāϰ⧇āĻ•ā§āϟāĻŋāĻ­, āĻĄā§‡āϟāĻž-āϚāĻžāϞāĻŋāϤ āĻ“āϝāĻŧ⧇āĻŦ āĻ…ā§āϝāĻžāĻĒā§āϞāĻŋāϕ⧇āĻļāύ āϤ⧈āϰāĻŋ āĻ•āϰāϤ⧇ āĻĻ⧇āϝāĻŧ" ) st.sidebar.header("Resources") st.sidebar.markdown( """ -- [Streamlit Documentation](https://docs.streamlit.io/) -- [Cheat sheet](https://docs.streamlit.io/library/cheatsheet) -- [Book](https://www.amazon.com/dp/180056550X) (Getting Started with Streamlit for Data Science) -- [Blog](https://blog.streamlit.io/how-to-master-streamlit-for-data-science/) (How to master Streamlit for data science) +- [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻĄāϕ⧁āĻŽā§‡āĻ¨ā§āĻŸā§‡āĻļāύ](https://docs.streamlit.io/) +- [āϚāĻŋāϟ āĻļā§€āϟ](https://docs.streamlit.io/library/cheatsheet) +- [āĻŦāχ](https://www.amazon.com/dp/180056550X) (āĻĄā§‡āϟāĻž āϏāĻžāϝāĻŧ⧇āĻ¨ā§āϏ⧇āϰ āϜāĻ¨ā§āϝ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻĻāĻŋāϝāĻŧ⧇ āĻļ⧁āϰ⧁ āĻ•āϰāĻž) +- [āĻŦā§āϞāĻ—](https://blog.streamlit.io/how-to-master-streamlit-for-data-science/) (āĻĄā§‡āϟāĻž āϏāĻžāϝāĻŧ⧇āĻ¨ā§āϏ⧇āϰ āϜāĻ¨ā§āϝ āϕ⧀āĻ­āĻžāĻŦ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āφāϝāĻŧāĻ¤ā§āϤ āĻ•āϰāĻŦ⧇āύ) """ ) st.sidebar.header("Deploy") st.sidebar.markdown( - "You can quickly deploy Streamlit apps using [Streamlit Community Cloud](https://streamlit.io/cloud) in just a few clicks." + "āφāĻĒāύāĻŋ āĻŽāĻžāĻ¤ā§āϰ āĻ•āϝāĻŧ⧇āĻ•āϟāĻŋ āĻ•ā§āϞāĻŋāϕ⧇ [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ•āĻŽāĻŋāωāύāĻŋāϟāĻŋ āĻ•ā§āϞāĻžāωāĻĄ](https://streamlit.io/cloud) āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻĻā§āϰ⧁āϤ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§ āĻ…ā§āϝāĻžāĻĒ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤" ) # Display content From 09f4c7fb63c440ae81ce37767f5d754c29037fd6 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 16:47:36 +0100 Subject: [PATCH 05/48] Update Day1.md --- content/Day1.md | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/content/Day1.md b/content/Day1.md index 1bd1d16..fff8bc5 100644 --- a/content/Day1.md +++ b/content/Day1.md @@ -1,40 +1,41 @@ -# Setting up a local development environment +# āĻāĻ•āϟāĻŋ āϞ⧋āĻ•āĻžāϞ āĻĄā§‡āϭ⧇āϞāĻĒāĻŽā§‡āĻ¨ā§āϟ āĻĒāϰāĻŋāĻŦ⧇āĻļ āĻ¸ā§āĻĨāĻžāĻĒāύ -Before we can actually start building Streamlit apps, we will first have to setup a development environment. +āφāϏāϞ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āĻļ⧁āϰ⧁ āĻ•āϰāĻžāϰ āφāϗ⧇, āφāĻŽāĻžāĻĻ⧇āϰ āĻĒā§āϰāĻĨāĻŽā§‡ āĻĄā§‡āϭ⧇āϞāĻĒāĻŽā§‡āĻ¨ā§āĻŸā§‡āϰ āϜāĻ¨ā§āϝ āĻĒāϰāĻŋāĻŦ⧇āĻļ āϏ⧇āϟāφāĻĒ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇āĨ¤ -Let's start by installing and setting up a conda environment. +āφāϏ⧁āύ āĻāĻ•āϟāĻŋ āĻ•āύāĻĄāĻž āĻĒāϰāĻŋāĻŦ⧇āĻļ āχāύāĻ¸ā§āϟāϞ āĻāĻŦāĻ‚ āϏ⧇āϟ āφāĻĒ āĻ•āϰ⧇ āĻļ⧁āϰ⧁ āĻ•āϰāĻŋāĨ¤ -## **Install conda** -- Install `conda` by going to https://docs.conda.io/en/latest/miniconda.html and choose your operating system (Windows, Mac or Linux). -- Download and run the installer to install `conda`. +## **āĻ•āύāĻĄāĻž āχāύāĻ¸ā§āϟāϞ** +- `conda` āχāύāĻ¸ā§āϟāϞ āĻāĻ–āĻžāύ⧇ https://docs.conda.io/en/latest/miniconda.html. āφāĻĒāύāĻŋ āĻ…āĻĒāĻžāϰ⧇āϟāĻŋāĻ‚ āϏāĻŋāĻ¸ā§āĻŸā§‡āĻŽ āĻŦ⧇āϛ⧇ āύāĻŋāύ (āωāχāĻ¨ā§āĻĄā§‹āϏ, āĻŽā§āϝāĻžāĻ• āĻŦāĻž āϞāĻŋāύāĻžāĻ•ā§āϏ). +- āχāύāĻ¸ā§āϟāϞ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āχāύāĻ¸ā§āϟāϞāĻžāϰāϟāĻŋ āĻĄāĻžāωāύāϞ⧋āĻĄ āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ `conda` āϚāĻžāϞāĻžāύāĨ¤ -## **Create a new conda environment** -Now that you have conda installed, let's create a conda environment for managing all the Python library dependencies. +## **āĻāĻ•āϟāĻŋ āύāϤ⧁āύ āĻ•āύāĻĄāĻž āĻĒāϰāĻŋāĻŦ⧇āĻļ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ** -To create a new environment with Python 3.9, enter the following: +āĻāĻ–āύ āϝ⧇āĻšā§‡āϤ⧁ āφāĻĒāύāĻŋ āĻ•āύāĻĄāĻž āχāύāĻ¸ā§āϟāϞ āĻ•āϰ⧇āϛ⧇āύ, āφāϏ⧁āύ āĻĒāĻžāχāĻĨāύ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋāϰ āϏāĻŽāĻ¸ā§āϤ āύāĻŋāĻ°ā§āĻ­āϰāϤāĻž āĻĒāϰāĻŋāϚāĻžāϞāύāĻž āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻ•āύāĻĄāĻž āĻĒāϰāĻŋāĻŦ⧇āĻļ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋāĨ¤ + +āĻĒāĻžāχāĻĨāύ ā§Š.⧝ āĻāϰ āϏāĻžāĻĨ⧇ āĻāĻ•āϟāĻŋ āύāϤ⧁āύ āĻĒāϰāĻŋāĻŦ⧇āĻļ āϤ⧈āϰāĻŋ āĻ•āϰāϤ⧇, āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤāϟāĻŋ āĻĒā§āϰāĻŦ⧇āĻļ āĻ•āϰāĻžāύ: ```bash conda create -n stenv python=3.9 ``` -where `create -n stenv` will create a conda environment named `stenv` and `python=3.9` will setup the conda environment with Python version 3.9. +āϝ⧇āĻ–āĻžāύ⧇ `create -n stenv` āĻāĻ•āϟāĻŋ āĻ•āύāĻĄāĻž āĻĒāϰāĻŋāĻŦ⧇āĻļ āϤ⧈āϰāĻŋ āĻ•āϰāĻŦ⧇ āϝāĻžāϰ āύāĻžāĻŽ `stenv` āĻāĻŦāĻ‚ `python=3.9` āϏ⧇āϟāφāĻĒ āĻĒāϰāĻŋāĻŦ⧇āĻļ āϤ⧈āϰ⧀ āĻ•āϰāĻŦ⧇ āϝāĻžāϰ āϏāĻ‚āĻ¸ā§āĻ•āϰāĻŖ ā§Š.⧝āĨ¤ -## **Activate the conda environment** +## **āĻ•āύāĻĄāĻž āĻĒāϰāĻŋāĻŦ⧇āĻļ āϏāĻ•ā§āϰāĻŋāϝāĻŧ āĻ•āϰ⧁āύ** -To use a conda environment that we had just created that is named `stenv`, enter the following into the command line: +āϤ⧈āϰ⧀ āĻ•āϰāĻž āĻ•āύāĻĄāĻž āĻĒāϰāĻŋāĻŦ⧇āĻļ āϝāĻžāϰ āύāĻžāĻŽ `stenv`, āϕ⧋āĻŽāĻžāĻ¨ā§āĻĄ āϞāĻžāχāύ⧇ āϟāĻžāχāĻĒ āĻ•āϰ⧁āύ: ```bash conda activate stenv ``` -## **Install the Streamlit library** +## **āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāύāĻ¸ā§āϟāϞ āĻ•āϰ⧁āύ** -It's now time to install the `streamlit` library: +āĻāĻ–āύāĻŋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāύāĻ¸ā§āϟāϞ āĻ•āϰāĻžāϰ āϏāĻŽā§Ÿ: ```bash pip install streamlit ``` -## **Launching the Streamlit demo app** -To launch the Streamlit demo app (Figure 1) type: +## **āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ āϚāĻžāϞ⧁ āĻ•āϰāĻž** +āĻ…ā§āϝāĻžāĻĒ āϚāĻžāϞ⧁ āĻ•āϰāϤ⧇(Figure 1): ```bash streamlit hello ``` From 3470fbef754ae350e51581e90aeff5ecde52cd5c Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 16:48:48 +0100 Subject: [PATCH 06/48] Update Day1.md --- content/Day1.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/Day1.md b/content/Day1.md index fff8bc5..5264ddf 100644 --- a/content/Day1.md +++ b/content/Day1.md @@ -35,7 +35,7 @@ pip install streamlit ``` ## **āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ āϚāĻžāϞ⧁ āĻ•āϰāĻž** -āĻ…ā§āϝāĻžāĻĒ āϚāĻžāϞ⧁ āĻ•āϰāϤ⧇(Figure 1): +āĻ…ā§āϝāĻžāĻĒ āϚāĻžāϞ⧁ āĻ•āϰāϤ⧇: ```bash streamlit hello ``` From 7d946b8ec28d8c1dbbc9a1e0d4d651a835da1ca7 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 16:49:53 +0100 Subject: [PATCH 07/48] Update readme.md --- content/images/readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/images/readme.md b/content/images/readme.md index 4148b2f..59bfea4 100644 --- a/content/images/readme.md +++ b/content/images/readme.md @@ -1 +1 @@ -# images +# āĻ›āĻŦāĻŋ From e78a4a822b7b7535691f4214e92276e645b58e33 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 17:08:19 +0100 Subject: [PATCH 08/48] Update Day10.md --- content/Day10.md | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/content/Day10.md b/content/Day10.md index 40fd3be..f2f4968 100644 --- a/content/Day10.md +++ b/content/Day10.md @@ -1,22 +1,22 @@ # st.selectbox -`st.selectbox` allows the display of a select widget. +`st.selectbox` āĻāĻ•āϟāĻŋ āύāĻŋāĻ°ā§āĻŦāĻžāϚāĻŋāϤ āωāχāĻœā§‡āϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -## What we're building? +## āĻ•āĻŋ āϤ⧈āϰ⧀ āĻ•āϰāĻ›āĻŋ āφāĻŽāϰāĻž? -A simple app that asks the user what their favorite color is. +āĻāĻ•āϟāĻŋ āϏāĻžāϧāĻžāϰāĻŖ āĻ…ā§āϝāĻžāĻĒ āϝāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϕ⧇ āϜāĻŋāĻœā§āĻžāĻžāϏāĻž āĻ•āϰ⧇ āϤāĻžāĻĻ⧇āϰ āĻĒā§āϰāĻŋāϝāĻŧ āϰāĻ™ āϕ⧀āĨ¤ -Flow of the app: -1. User selects a color -2. App prints out the selected color +āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻĒā§āϰāĻŦāĻžāĻš: +1. āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀ āĻāĻ•āϟāĻŋ āϰāĻ™ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰ⧇ +2. āĻ…ā§āϝāĻžāĻĒ āύāĻŋāĻ°ā§āĻŦāĻžāϚāĻŋāϤ āϰāĻ™ āĻĒā§āϰāĻŋāĻ¨ā§āϟ āĻ•āϰ⧇ -## Demo app -The deployed Streamlit app should look something like the one shown in the below link: +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ +āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻž āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āύ⧀āĻšā§‡āϰ āϞāĻŋāĻ™ā§āϕ⧇ āĻĻ⧇āĻ–āĻžāύ⧋āϰ āĻŽāϤ⧋ āĻĻ⧇āĻ–āϤ⧇ āĻšāĻŦ⧇: [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.selectbox/) -## Code -Here's the code to implement the above mentioned app: +## āϕ⧋āĻĄ +āωāĻĒāϰ⧇ āωāĻ˛ā§āϞāĻŋāĻ–āĻŋāϤ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āĻŦāĻžāĻ¸ā§āϤāĻŦāĻžāϝāĻŧāύ āĻ•āϰāĻžāϰ āϕ⧋āĻĄ āĻāĻ–āĻžāύ⧇: ```python import streamlit as st @@ -29,35 +29,35 @@ option = st.selectbox( st.write('Your favorite color is ', option) ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž: ```python import streamlit as st ``` -This is followed by creating a header text for the app: +āĻ…ā§āϝāĻžāĻĒ āĻšā§‡āĻĄāĻžāϰ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ: ```python st.header('st.selectbox') ``` -Next, we will create a variable called `option` that will accept user input in the form of a **select** input widget via the `st.selectbox()` command. +āϤāĻžāϰāĻĒāϰ `option` āύāĻžāĻŽā§‡āϰ āĻ­ā§āϝāĻžāϰāĻŋā§Ÿā§‡āĻŦāϞ āϤ⧈āϰ⧀ āĻ•āϰ⧁āύ āϝ⧇āϟāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀ āĻĨ⧇āϕ⧇ āχāύāĻĒ⧁āϟ āύ⧇āĻŦ⧇ **select** āχāύāĻĒ⧁āϟ āωāχāĻœā§‡āϟ āĻĻā§āĻŦāĻžāϰāĻž `st.selectbox()` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āϏāĻžāĻĨ⧇āĨ¤ ```python option = st.selectbox( 'What is your favorite color?', ('Blue', 'Red', 'Green')) ``` -As we can see from the above code box, the `st.selectbox()` command accepts 2 input arguments: -1. The text that goes above the select widget, i.e. `'What is your favorite color?'` -2. The possible values to select from `('Blue', 'Red', 'Green')` +āφāĻŽāϰāĻž āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻšā§āĻ›āĻŋ āϝ⧇ `st.selectbox()` āĻ•āĻŽāĻžāĻ¨ā§āĻĄ ⧍āϟāĻŋ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻŖā§āϟ āύāĻŋāĻšā§āϛ⧇: +1. āϝ⧇ āĻŸā§‡āĻ•ā§āϏāϟāϟāĻŋ āϏāĻŋāϞ⧇āĻ•ā§āϟ āωāχāĻœā§‡āĻŸā§‡āϰ āωāĻĒāϰ⧇ āϝāĻžāϝāĻŧ, āϝāĻž āύāĻžāĻ•āĻŋ `'āφāĻĒāύāĻžāϰ āĻĒā§āϰāĻŋāϝāĻŧ āϰāĻ‚ āĻ•āĻŋ?'` +2. āĻāχ āĻ…āĻĒā§āĻļāύ āϗ⧁āϞāĻŋ āĻŦāĻžāĻ›āĻž āϝ⧇āϤ⧇ āĻĒāĻžāϰ⧇ `('āύ⧀āϞ', 'āϞāĻžāϞ', 'āϏāĻŦ⧁āϜ')` -Finally, we'll print out the selected color as follows: +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž āύāĻŋāĻ°ā§āĻŦāĻžāϚāĻŋāϤ āϰāĻ™āϟāĻŋ āύāĻŋāĻŽā§āύāϰ⧂āĻĒ āĻĒā§āϰāĻŋāĻ¨ā§āϟ āφāωāϟ āĻ•āϰāĻŦ: ```python st.write('Your favorite color is ', option) ``` -## Next steps -Now that you have created the Streamlit app locally, it's time to deploy it to [Streamlit Community Cloud](https://streamlit.io/cloud). +## āĻĒāϰāĻŦāĻ°ā§āϤ⧀ āĻĒāĻĻāĻ•ā§āώ⧇āĻĒ +āĻāĻ–āύ āφāĻĒāύāĻŋ āĻ¸ā§āĻĨāĻžāύ⧀āϝāĻŧāĻ­āĻžāĻŦ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰ⧇āϛ⧇āύ, āĻāϟāĻŋ āĻāϟāĻŋ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ [Streamlit Community Cloud](https://streamlit.io/cloud). -## References -More about [`st.selectbox`](https://docs.streamlit.io/library/api-reference/widgets/st.selectbox) +## āϤāĻĨā§āϝāϏ⧂āĻ¤ā§āϰ +āφāϰ⧋ āĻĻ⧇āϖ⧁āύ [`st.selectbox`](https://docs.streamlit.io/library/api-reference/widgets/st.selectbox) From 8aa750647cec27940941be374c27254e6386d3b3 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 17:18:37 +0100 Subject: [PATCH 09/48] Update Day11.md --- content/Day11.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/Day11.md b/content/Day11.md index 86c5b63..8edecd4 100644 --- a/content/Day11.md +++ b/content/Day11.md @@ -1,13 +1,13 @@ # st.multiselect -`st.multiselect` displays a multiselect widget. +`st.multiselect` āĻāĻ•āϟāĻŋ āĻŽāĻžāĻ˛ā§āϟāĻŋāϏāĻŋāϞ⧇āĻ•ā§āϟ āωāχāĻœā§‡āϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇āĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.multiselect/) -## Code -Here's how to use `st.multiselect`: +## āϕ⧋āĻĄ +āϚāĻŋāĻ¨ā§āϤāĻžāϰ āĻ•āĻžāϰāĻŖ āύ⧇āχāĨ¤ āĻāχāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύ `st.multiselect`: ```python import streamlit as st @@ -21,18 +21,18 @@ options = st.multiselect( st.write('You selected:', options) ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -This is followed by creating a header text for the app: +āϤāĻžāϰāĻĒāϰ āĻšā§‡āĻĄāĻžāϰ āϤ⧈āϰ⧀ āĻ•āϰāϤ⧇: ```python st.header('st.multiselect') ``` -Next, we're going to use the `st.multiselect` widget to accept input where users will be able to select one or more colors of there choice. +āϤāĻžāϰāĻĒāϰ `st.multiselect` āωāχāĻœā§‡āϟ āϝāĻž āϤāĻŋāύāϟāĻŋ āĻ…āĻĒā§āĻļāύ āĻĻ⧇āĻ–āĻžāĻŦ⧇, āϤāĻžāϰ āϕ⧋āĻĄ āĻāϟāĻŋāĨ¤ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀ āϤāĻŋāύāϟāĻŋāϰ āĻŽāĻ§ā§āϝ⧇ āĻāĻ•āϟāĻŋ āϰāĻ‚ āĻŦ⧇āϛ⧇ āύ⧇āĻŦ⧇āĨ¤ ```python options = st.multiselect( @@ -41,10 +41,10 @@ options = st.multiselect( ['Yellow', 'Red']) ``` -Finally, we'll write out the selected colors: +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž āύāĻŋāĻ°ā§āĻŦāĻžāϚāĻŋāϤ āϰāĻ‚ āϞāĻŋāĻ–āĻŦ: ```python st.write('You selected:', options) ``` -## Further reading +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž - [`st.multiselect`](https://docs.streamlit.io/library/api-reference/widgets/st.multiselect) From ed68879447b7a946d9bfb3466839ec54f075962b Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 17:23:32 +0100 Subject: [PATCH 10/48] Update Day12.md --- content/Day12.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/Day12.md b/content/Day12.md index bf5962b..36dee3e 100644 --- a/content/Day12.md +++ b/content/Day12.md @@ -1,13 +1,13 @@ # st.checkbox -`st.checkbox` displays a checkbox widget. +`st.checkbox` āĻšā§‡āĻ•āĻŦāĻ•ā§āϏ āωāχāĻœā§‡āϟ āĻĻ⧇āĻ–āĻžā§ŸāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.checkbox/) -## Code -Here's how to use `st.checkbox`: +## āϕ⧋āĻĄ +`st.checkbox` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ: ```python import streamlit as st @@ -29,30 +29,30 @@ if cola: st.write("Here you go đŸĨ¤") ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -This is followed by creating a header text for the app: +āϤāĻžāϰāĻĒāϰ āĻšā§‡āĻĄāĻžāϰ āϤ⧈āϰ⧀ āĻ•āϰāϤ⧇: ```python st.header('st.checkbox') ``` -Next, we're going to ask a question via `st.write': +āĻāĻ•āϟāĻŋ āĻĒā§āϰāĻļā§āύ āϜāĻŋāĻœā§āĻžāĻžāϏāĻž āĻ•āϰ⧁āύ `st.write' āĻĻā§āĻŦāĻžāϰāĻž: ```python st.write ('What would you like to order?') ``` -We're then going to provide some menu items to tick on: +āφāĻŽāϰāĻž āϤāĻžāϰāĻĒāϰ⧇ āϟāĻŋāĻ• āĻĻ⧇āĻ“āϝāĻŧāĻžāϰ āϜāĻ¨ā§āϝ āĻ•āĻŋāϛ⧁ āĻŽā§‡āύ⧁ āφāχāĻŸā§‡āĻŽ āϏāϰāĻŦāϰāĻžāĻš āĻ•āϰāϤ⧇ āϝāĻžāĻšā§āĻ›āĻŋ: ```python icecream = st.checkbox('Ice cream') coffee = st.checkbox('Coffee') cola = st.checkbox('Cola') ``` -Finally, we're going to print custom text depending on which checkbox was ticked on: +āĻ…āĻŦāĻļ⧇āώ⧇, āϕ⧋āύ āĻšā§‡āĻ•āĻŦāĻ•ā§āϏ⧇ āϟāĻŋāĻ• āĻĻ⧇āĻ“āϝāĻŧāĻž āĻšāϝāĻŧ⧇āϛ⧇ āϤāĻžāϰ āωāĻĒāϰ āύāĻŋāĻ°ā§āĻ­āϰ āĻ•āϰ⧇ āφāĻŽāϰāĻž āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻŸā§‡āĻ•ā§āϏāϟ āĻĒā§āϰāĻŋāĻ¨ā§āϟ āĻ•āϰāϤ⧇ āϝāĻžāĻšā§āĻ›āĻŋ: ```python if icecream: st.write("Great! Here's some more đŸĻ") @@ -64,5 +64,5 @@ if cola: st.write("Here you go đŸĨ¤") ``` -## Further reading +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž - [`st.checkbox`](https://docs.streamlit.io/library/api-reference/widgets/st.checkbox) From d10c1dbe54dc44ac3e8c29d0ff41575f9b108f68 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 17:38:32 +0100 Subject: [PATCH 11/48] Update Day13.md --- content/Day13.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/content/Day13.md b/content/Day13.md index 525b3bc..ca42c18 100644 --- a/content/Day13.md +++ b/content/Day13.md @@ -1,12 +1,15 @@ -# Spin up a cloud development environment +# āĻ•ā§āϞāĻžāωāĻĄ āĻĄā§‡āϭ⧇āϞāĻĒāĻŽā§‡āĻ¨ā§āϟ āĻāύāĻ­āĻžāϝāĻŧāϰāύāĻŽā§‡āĻ¨ā§āϟ āĻŦāĻžāύāĻžāύ ### GitPod -To spin up a development environment on the cloud, we can use [GitPod](https://www.gitpod.io/) and this can be done simply by clicking on the following link: -- Try it 👉 https://gitpod.io/#/https://github.com/dataprofessor/streamlit101/ +āĻāύāĻ­āĻžāϝāĻŧāϰāύāĻŽā§‡āĻ¨ā§āϟ āĻŦāĻžāύāĻžāϤ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύ [GitPod](https://www.gitpod.io/): +- āĻšā§‡āĻˇā§āϟāĻž āĻ•āϰ⧇ āĻĻ⧇āϖ⧁āύ 👉 https://gitpod.io/#/https://github.com/dataprofessor/streamlit101/ -As you can see from the URL above, a GitHub repo URL is appended after `https://gitpod.io/#/` which essentially allow GitPod to spin up a development environment using instructions contained within the GitHub repo URL (namely in the `requirements.txt` file that specifically lists the Python libraries to install). +āφāĻĒāύāĻŋ āύāĻŋāĻļā§āϚāχ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻšā§āϛ⧇āύ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϰ⧇āĻĒā§‹ `https://gitpod.io/#/` āϞāĻŋāĻ™ā§āĻ•āϟāĻŋāϰ āĻĒāϰ āϞāĻžāĻ—āĻžāύ⧋ āφāϛ⧇ which essentially allow GitPod to spin up a development environment using instructions contained within the GitHub repo URL (namely in the `requirements.txt` file that specifically lists the Python libraries to install). -> Note: There are other similar cloud development environment such as: + +āφāĻĒāύāĻŋ āύāĻŋāĻļā§āϚāχ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻšā§āϛ⧇āύ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϰ⧇āĻĒā§‹ `https://gitpod.io/#/` āϞāĻŋāĻ™ā§āĻ•āϟāĻŋāϰ āĻĒāϰ āϞāĻžāĻ—āĻžāύ⧋ āφāϛ⧇āĨ¤ āϤāĻž āĻ•āϰ⧇ GitPod āĻāĻ•āϟāĻŋ āĻĄā§‡āϭ⧇āϞāĻĒāĻŽā§‡āĻ¨ā§āϟ āĻāύāĻ­āĻžā§ŸāϰāύāĻŽā§‡āĻ¨ā§āϟ āϤ⧈āϰ⧀ āĻ•āϰāĻŦ⧇ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϰ⧇āĻĒā§‹ āĻĨ⧇āϕ⧇ āύāĻŋāĻ°ā§āĻĻ⧇āĻļāĻžāĻŦāϞ⧀ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇āĨ¤ (`requirements.txt` āĻĢāĻžāχāϞ⧇ āϕ⧋āύ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āϗ⧁āϞ⧋ āχāύāĻ¸ā§āϟāϞ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇)āĨ¤ + +> āĻĻā§āϰāĻˇā§āϟāĻŦā§āϝ: āĻ…āĻ¨ā§āϝāĻžāĻ¨ā§āϝ āĻ…āύ⧁āϰ⧂āĻĒ āĻ•ā§āϞāĻžāωāĻĄ āωāĻ¨ā§āύāϝāĻŧāύ āĻĒāϰāĻŋāĻŦ⧇āĻļ āϰāϝāĻŧ⧇āϛ⧇ āϝ⧇āĻŽāύ: > - [GitHub Codespaces](https://docs.github.com/en/codespaces/setting-up-your-project-for-codespaces/setting-up-your-python-project-for-codespaces) > - [Replit](https://replit.com/) > - [Cloud9](https://aws.amazon.com/cloud9/) From a953fd8873b07276a6ad0b3a9572a480aea7c6f0 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 17:38:53 +0100 Subject: [PATCH 12/48] Update Day13.md --- content/Day13.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/content/Day13.md b/content/Day13.md index ca42c18..b814af6 100644 --- a/content/Day13.md +++ b/content/Day13.md @@ -4,8 +4,6 @@ āĻāύāĻ­āĻžāϝāĻŧāϰāύāĻŽā§‡āĻ¨ā§āϟ āĻŦāĻžāύāĻžāϤ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύ [GitPod](https://www.gitpod.io/): - āĻšā§‡āĻˇā§āϟāĻž āĻ•āϰ⧇ āĻĻ⧇āϖ⧁āύ 👉 https://gitpod.io/#/https://github.com/dataprofessor/streamlit101/ -āφāĻĒāύāĻŋ āύāĻŋāĻļā§āϚāχ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻšā§āϛ⧇āύ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϰ⧇āĻĒā§‹ `https://gitpod.io/#/` āϞāĻŋāĻ™ā§āĻ•āϟāĻŋāϰ āĻĒāϰ āϞāĻžāĻ—āĻžāύ⧋ āφāϛ⧇ which essentially allow GitPod to spin up a development environment using instructions contained within the GitHub repo URL (namely in the `requirements.txt` file that specifically lists the Python libraries to install). - āφāĻĒāύāĻŋ āύāĻŋāĻļā§āϚāχ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻšā§āϛ⧇āύ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϰ⧇āĻĒā§‹ `https://gitpod.io/#/` āϞāĻŋāĻ™ā§āĻ•āϟāĻŋāϰ āĻĒāϰ āϞāĻžāĻ—āĻžāύ⧋ āφāϛ⧇āĨ¤ āϤāĻž āĻ•āϰ⧇ GitPod āĻāĻ•āϟāĻŋ āĻĄā§‡āϭ⧇āϞāĻĒāĻŽā§‡āĻ¨ā§āϟ āĻāύāĻ­āĻžā§ŸāϰāύāĻŽā§‡āĻ¨ā§āϟ āϤ⧈āϰ⧀ āĻ•āϰāĻŦ⧇ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϰ⧇āĻĒā§‹ āĻĨ⧇āϕ⧇ āύāĻŋāĻ°ā§āĻĻ⧇āĻļāĻžāĻŦāϞ⧀ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇āĨ¤ (`requirements.txt` āĻĢāĻžāχāϞ⧇ āϕ⧋āύ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āϗ⧁āϞ⧋ āχāύāĻ¸ā§āϟāϞ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇)āĨ¤ From 01799c71d9e97cfcb0b8d3c93bd6185b3ffebb9e Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 17:39:45 +0100 Subject: [PATCH 13/48] Update Day14.md --- content/Day14.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/Day14.md b/content/Day14.md index e6a9128..7a3dba8 100644 --- a/content/Day14.md +++ b/content/Day14.md @@ -1,6 +1,6 @@ # Streamlit Components -Components are third-party Python modules that extend what's possible with Streamlit [[1](https://docs.streamlit.io/library/components)]. +āωāĻĒāĻžāĻĻāĻžāύāϗ⧁āϞāĻŋ āĻšāϞ āϤ⧃āϤ⧀āϝāĻŧ āĻĒāĻ•ā§āώ⧇āϰ āĻĒāĻžāχāĻĨāύ āĻŽāĻĄāĻŋāωāϞ āϝāĻž āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§‡āϰ āϏāĻžāĻĨ⧇ āϝāĻž āϏāĻŽā§āĻ­āĻŦ āϤāĻž āĻĒā§āϰāϏāĻžāϰāĻŋāϤ āĻ•āϰ⧇ [[1](https://docs.streamlit.io/library/components)]. ## What Streamlit components are available? From b849d638ffad66cd73486807321c3c8a1c17228d Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 17:52:17 +0100 Subject: [PATCH 14/48] Update Day14.md --- content/Day14.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/content/Day14.md b/content/Day14.md index 7a3dba8..93b9b37 100644 --- a/content/Day14.md +++ b/content/Day14.md @@ -1,31 +1,31 @@ # Streamlit Components -āωāĻĒāĻžāĻĻāĻžāύāϗ⧁āϞāĻŋ āĻšāϞ āϤ⧃āϤ⧀āϝāĻŧ āĻĒāĻ•ā§āώ⧇āϰ āĻĒāĻžāχāĻĨāύ āĻŽāĻĄāĻŋāωāϞ āϝāĻž āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§‡āϰ āϏāĻžāĻĨ⧇ āϝāĻž āϏāĻŽā§āĻ­āĻŦ āϤāĻž āĻĒā§āϰāϏāĻžāϰāĻŋāϤ āĻ•āϰ⧇ [[1](https://docs.streamlit.io/library/components)]. +āωāĻĒāĻžāĻĻāĻžāύāϗ⧁āϞāĻŋ āĻšāϞ āϤ⧃āϤ⧀āϝāĻŧ āĻĒāĻ•ā§āώ⧇āϰ āĻĒāĻžāχāĻĨāύ āĻŽāĻĄāĻŋāωāϞ āϝāĻž āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§‡āϰ āϏāĻžāĻĨ⧇ āϝāĻž āϏāĻŽā§āĻ­āĻŦ āϤāĻž āĻĒā§āϰāϏāĻžāϰāĻŋāϤ āĻ•āϰ⧇ [[1](https://docs.streamlit.io/library/components)]āĨ¤ -## What Streamlit components are available? +## āĻ•āĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āωāĻĒāĻžāĻĻāĻžāύ āĻĒāĻžāĻ“āϝāĻŧāĻž āϝāĻžāϝāĻŧ? -There are several dozens of Streamlit components featured on Streamlit's website [[2](https://streamlit.io/components)]. +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§‡āϰ āĻ“āϝāĻŧ⧇āĻŦāϏāĻžāχāĻŸā§‡ āĻŦ⧇āĻļ āĻ•āϝāĻŧ⧇āĻ• āĻĄāϜāύ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āωāĻĒāĻžāĻĻāĻžāύ āϰāϝāĻŧ⧇āϛ⧇ [[2](https://streamlit.io/components)]. -Fanilo (a Streamlit Creator) curated an amazing list of Streamlit components on a wiki post [[3](https://discuss.streamlit.io/t/streamlit-components-community-tracker/4634)] that lists about 85 Streamlit components as of April 2022. +āĻĢā§āϝāĻžāύāĻŋāϞ⧋āϰ āωāχāĻ•āĻŋ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāϰ⧇āύ āϝ⧇āĻ–āĻžāύ⧇ āĻĒā§āϰāĻžā§Ÿ ā§Žā§ĢāϟāĻŋ āωāĻĒāĻžāĻĻāĻžāύ āφāϛ⧇ [[3](https://discuss.streamlit.io/t/streamlit-components-community-tracker/4634)]āĨ¤ -## How to use? +## āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇? -Streamlit components are just a pip-install away. +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āωāĻĒāĻžāĻĻāĻžāύāϗ⧁āϞāĻŋ āϕ⧇āĻŦāϞ āĻāĻ•āϟāĻŋ āĻĒāĻŋāĻĒ-āχāύāĻ¸ā§āϟāϞ āĻĻā§‚āϰ⧇āĨ¤ -In this tutorial, let's get you started in using the `streamlit_pandas_profiling` component [[4](https://share.streamlit.io/okld/streamlit-gallery/main?p=pandas-profiling)]. +āĻāχ āϟāĻŋāωāĻŸā§‹āϰāĻŋ⧟āĻžāϞ⧇ `streamlit_pandas_profiling` āωāĻĒāĻžāĻĻāĻžāύ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāϰ⧇āύ [[4](https://share.streamlit.io/okld/streamlit-gallery/main?p=pandas-profiling)]. -#### Install the component +#### āĻ•āĻŽā§āĻĒā§‹āύ⧇āĻ¨ā§āϟ āχāύāĻ¸ā§āϟāϞ āĻ•āϰ⧁āύ ```bash pip install streamlit_pandas_profiling ``` -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/streamlit-components/) -## Code -Here's how to build a Streamlit app using a component: +## āϕ⧋āĻĄ +āĻāĻ•āϟāĻŋ āωāĻĒāĻžāĻĻāĻžāύ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϕ⧀āĻ­āĻžāĻŦ⧇ āϤ⧈āϰāĻŋ āĻ•āϰāĻŦ⧇āύ āϤāĻž āĻāĻ–āĻžāύ⧇: ```python import streamlit as st import pandas as pd @@ -40,8 +40,8 @@ pr = df.profile_report() st_profile_report(pr) ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` as well as other libraries used in the app like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāύāĻ‚ āĻ…āĻ¨ā§āύāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st import pandas as pd @@ -49,35 +49,35 @@ import pandas_profiling from streamlit_pandas_profiling import st_profile_report ``` -This is followed by creating a header text for the app: +āϤāĻžāϰāĻĒāϰ āĻšā§‡āĻĄāĻžāϰ āĻŸā§‡āĻ•ā§āϏāϟ āĻŦāĻžāύāĻžāύ: ```python st.header('`streamlit_pandas_profiling`') ``` -Next, we load in the Penguins dataset using the `read_csv` command of `pandas`. +āĻšā§‡āĻĄāĻžāϰ āĻŦāĻžāύāĻžāύ⧋āϰ āĻĒāϰ āĻĒ⧇āĻ™ā§āϗ⧁āχāύāϏ āĻĄāĻžāϟāĻžāϏ⧇āϟ āϞ⧋āĻĄ āĻ•āϰ⧁āύ `read_csv` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āϝāĻž `pandas` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋāϤ⧇ āĻĒāĻžāĻ“ā§ŸāĻž āϝāĻžā§ŸāĨ¤ . ```python df = pd.read_csv('https://raw.githubusercontent.com/dataprofessor/data/master/penguins_cleaned.csv') ``` -Finally, the pandas profiling report is generated via the `profile_report()` command and displayed using `st_profile_report`: +āĻĒāĻžāĻ¨ā§āĻĄāĻžāϰ `profile_report()` āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āĻĻāĻŋā§Ÿā§‡ āĻĒā§āϰ⧋āĻĢāĻžāχāϞ āϰāĻŋāĻĒā§‹āĻ°ā§āϟ āϤ⧈āϰ⧀ āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ āĻĻ⧇āĻ–āĻžāύ⧋āϰ āϜāĻ¨ā§āϝ āĻāχ āĻ•āĻŽāĻžāĻ¨ā§āĻĄāϟāĻŋ `st_profile_report`: ```python pr = df.profile_report() st_profile_report(pr) ``` -## Making your own Components +## āφāĻĒāύāĻžāϰ āύāĻŋāϜāĻ¸ā§āĻŦ āωāĻĒāĻžāĻĻāĻžāύ āϤ⧈āϰāĻŋ -If you're interested in making your own component, please check out the following resources: +āφāĻĒāύāĻŋ āϝāĻĻāĻŋ āύāĻŋāĻœā§‡āϰ āωāĻĒāĻžāĻĻāĻžāύ āϤ⧈āϰāĻŋ āĻ•āϰāϤ⧇ āφāĻ—ā§āϰāĻšā§€ āĻšāύ, āĻ…āύ⧁āĻ—ā§āϰāĻš āĻ•āϰ⧇ āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āϏāĻ‚āĻ¸ā§āĻĨāĻžāύāϗ⧁āϞāĻŋ āĻĻ⧇āϖ⧁āύ: - [Create a Component](https://docs.streamlit.io/library/components/create) - [Publish a Component](https://docs.streamlit.io/library/components/publish) - [Components API](https://docs.streamlit.io/library/components/components-api) - [Blog post on Components](https://blog.streamlit.io/introducing-streamlit-components/) -Alternatively, if you prefer to learn using videos, our engineer Tim Conkling has put together some amazing tutorials: +āĻŦāĻŋāĻ•āĻ˛ā§āĻĒāĻ­āĻžāĻŦ⧇, āφāĻĒāύāĻŋ āϝāĻĻāĻŋ āĻ­āĻŋāĻĄāĻŋāĻ“ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻļāĻŋāĻ–āϤ⧇ āĻĒāĻ›āĻ¨ā§āĻĻ āĻ•āϰ⧇āύ, āφāĻŽāĻžāĻĻ⧇āϰ āĻĒā§āϰāĻ•ā§ŒāĻļāϞ⧀ āϟāĻŋāĻŽ āĻ•āύāĻ•ā§āϞāĻŋāĻ‚ āĻ•āĻŋāϛ⧁ āφāĻļā§āϚāĻ°ā§āϝāϜāύāĻ• āϟāĻŋāωāĻŸā§‹āϰāĻŋāϝāĻŧāĻžāϞ āĻāĻ•āĻ¤ā§āϰ āĻ•āϰ⧇āϛ⧇āύ: - [How to build a Streamlit component | Part 1: Setup and Architecture](https://youtu.be/BuD3gILJW-Q) - [How to build a Streamlit component | Part 2: Part 2: Make a Slider Widget](https://youtu.be/QjccJl_7Jco) -## Further reading about Components +## āωāĻĒāĻžāĻĻāĻžāύ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž 1. [Streamlit Components - API Documentation](https://docs.streamlit.io/library/components) 2. [Featured Streamlit Components](https://streamlit.io/components) 3. [Streamlit Components - Community Tracker](https://discuss.streamlit.io/t/streamlit-components-community-tracker/4634) From cfbbd583b485f0d4801cf08590fc21151cede94e Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 18:37:56 +0100 Subject: [PATCH 15/48] Update Day15.md --- content/Day15.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/Day15.md b/content/Day15.md index 62f3cd1..657bfcd 100644 --- a/content/Day15.md +++ b/content/Day15.md @@ -1,16 +1,16 @@ # st.latex -`st.latex` display mathematical expressions formatted as LaTeX. +`st.latex` āĻ…āĻ‚āϕ⧇āϰ āĻĢāĻ°ā§āĻŽā§āϞāĻž āĻ˛ā§āϝāĻžāĻŸā§‡āĻ•ā§āϏ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻĻ⧇āĻ–āĻžā§ŸāĨ¤ -## What we're building? +## āĻ•āĻŋ āĻŦāĻžāύāĻžāĻšā§āĻ›āĻŋ āφāĻŽāϰāĻž? -A simple app that displays a mathematical equation using LaTeX syntax via the `st.latex` command. +āĻāĻ•āϟāĻŋ āϏāĻšāϜ āĻ…ā§āϝāĻžāĻĒ āϝāĻž LaTeX āϏāĻŋāύāĻŸā§āϝāĻžāĻ•ā§āϏ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ āĻ—āĻžāĻŖāĻŋāϤāĻŋāĻ• āϏāĻŽā§€āĻ•āϰāĻŖ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ `st.latex` āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇āĨ¤. -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.latex/) -## Code -Here's how to use `st.latex`: +## āϕ⧋āĻĄ +āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻšāϝāĻŧ `st.latex`: ```python import streamlit as st @@ -23,18 +23,18 @@ st.latex(r''' ''') ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -This is followed by creating a header text for the app: +āϤāĻžāϰāĻĒāϰ āĻšā§‡āĻĄāĻžāϰ āϤ⧈āϰ⧀ āĻ•āϰāϤ⧇: ```python st.header('st.latex') ``` -Next, we're displaying the mathematical equation via `st.latex`: +āĻ…āĻ‚āϕ⧇āϰ āĻĢāĻ°ā§āĻŽā§āϞāĻž `st.latex` āĻĻāĻŋā§Ÿā§‡ āĻĻ⧇āĻ–āĻžāύ: ```python st.latex(r''' a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} = @@ -43,5 +43,5 @@ st.latex(r''' ''') ``` -## References -- Read more about [`st.latex`](https://docs.streamlit.io/library/api-reference/text/st.latex) in the Streamlit API Documentation. +## āϤāĻĨā§āϝāϏ⧂āĻ¤ā§āϰ +- āφāϰ⧋ āĻĒ⧜⧁āύ [`st.latex`](https://docs.streamlit.io/library/api-reference/text/st.latex) āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ API āĻĄāϕ⧁āĻŽā§‡āĻ¨ā§āĻŸā§‡āĻļāύ⧇āĨ¤ From 3f958aa591d7b07ef676f26dfc58c06aa347bffa Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 19:32:40 +0100 Subject: [PATCH 16/48] Update Day16.md --- content/Day16.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/content/Day16.md b/content/Day16.md index 1353f2a..ae70730 100644 --- a/content/Day16.md +++ b/content/Day16.md @@ -1,17 +1,17 @@ -# Customizing the theme of Streamlit apps +# āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻĨāĻŋāĻŽ āĻ•āĻžāĻ¸ā§āϟāĻŽāĻžāχāϜ āĻ•āϰāĻž We can customize the theme by adjusting parameters in `config.toml`, which is a configuration file stored in the same folder as the app in the `.streamlit` folder. -## What we're building? +## āĻ•āĻŋ āĻŦāĻžāύāĻžāĻšā§āĻ›āĻŋ āφāĻŽāϰāĻž? -A simple app that shows the result of our theme customization. This is made possible by customizing the HTML HEX code inside the [`.streamlit/config.toml`](https://github.com/dataprofessor/streamlit-custom-theme/blob/master/.streamlit/config.toml) file. +āĻāĻ•āϟāĻŋ āϏāĻžāϧāĻžāϰāĻŖ āĻ…ā§āϝāĻžāĻĒ āϝāĻž āĻĨāĻŋāĻŽ āĻ•āĻžāĻ¸ā§āϟāĻŽāĻžāχāϜ āĻ•āϰ⧇āĨ¤ This is made possible by customizing the code inside the [`.streamlit/config.toml`](https://github.com/dataprofessor/streamlit-custom-theme/blob/master/.streamlit/config.toml) āĻāχ āĻĢāĻžāχāϞāϟāĻŋāϰ āϭ⧇āϤāϰ⧇ HTML HEX āϕ⧋āĻĄ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāĻŖ āĻ•āϰ⧇ āϤāĻž āϏāĻŽā§āĻ­āĻŦ. -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/streamlit-custom-theme/) -## Code -Here's the code to the [`streamlit_app.py`](https://github.com/dataprofessor/streamlit-custom-theme/blob/master/streamlit_app.py) file: +## āϕ⧋āĻĄ +āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϕ⧋āĻĄ āĻāχāĻ–āĻžāύ⧇ [`streamlit_app.py`](https://github.com/dataprofessor/streamlit-custom-theme/blob/master/streamlit_app.py): ```python import streamlit as st @@ -32,7 +32,7 @@ number = st.sidebar.slider('Select a number:', 0, 10, 5) st.write('Selected number from slider widget is:', number) ``` -Here's the code to the [`.streamlit/config.toml`](https://github.com/dataprofessor/streamlit-custom-theme/blob/master/.streamlit/config.toml) file: +āĻ•āύāĻĢāĻŋāĻ—āĻžāϰ⧇āĻļāύ āĻĢāĻžāχāϞ⧇āϰ āϕ⧋āĻĄ āĻāχāĻ–āĻžāύ⧇ [`.streamlit/config.toml`](https://github.com/dataprofessor/streamlit-custom-theme/blob/master/.streamlit/config.toml): ```python [theme] primaryColor="#F39C12" @@ -42,18 +42,18 @@ textColor="#FFFFFF" font="monospace" ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -This is followed by creating a title text for the app: +āϤāĻžāϰāĻĒāϰ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϜāĻ¨ā§āϝ āϟāĻžāχāĻŸā§‡āϞ āĻŸā§‡āĻ•ā§āϏāϟ āĻŦāĻžāύāĻžāύ: ```python st.title('Theming with config.toml') ``` -Next, we're going to show the contents of the `.streamlit/config.toml` file which we'll first display a note of this via `st.write` followed by the actual code via `st.code`: +āĻ•āύāĻĢāĻŋāĻ—āĻžāϰ⧇āĻļāύ āĻĢāĻžāχāϞ `.streamlit/config.toml` āϤāĻžāϰ āĻŦāĻŋāώāϝāĻŧāĻŦāĻ¸ā§āϤ⧁ `st.write` āĻĻāĻŋā§Ÿā§‡ āĻĻ⧇āĻ–āĻžāύ āĻāĻŦāĻ‚ āφāϏāϞ āϕ⧋āĻĄā§‡āϰ āϜāĻ¨ā§āϝ `st.code` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύ: ```python st.write('Contents of the ./streamlit/config.toml file of this app') @@ -67,20 +67,20 @@ font="monospace" """) ``` -Finally, we're creating a slider widget in the sidebar followed by displaying the selected number: +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž āύāĻŋāĻ°ā§āĻŦāĻžāϚāĻŋāϤ āύāĻŽā§āĻŦāϰ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ āϏāĻžāχāĻĄāĻŦāĻžāϰ⧇ āĻāĻ•āϟāĻŋ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ āωāχāĻœā§‡āϟ āϤ⧈āϰāĻŋ āĻ•āϰāĻ›āĻŋ: ```python number = st.sidebar.slider('Select a number:', 0, 10, 5) st.write('Selected number from slider widget is:', number) ``` -Let's now take a look at the custom colors that we've used in this app, which is specified in the `.streamlit/config.toml` file: -- `primaryColor="#F39C12"` - This sets the primary color to orange. Notice the orange colors in the slider widget. -- `backgroundColor="#2E86C1"` - This sets the background color to blue. Notice the main panel has a blue background color. -- `secondaryBackgroundColor="#AED6F1"` - This sets the secondary background color to dark gray. Notice the gray background color of the sidebar and the background color of the code box in the main panel. -- `textColor="#FFFFFF"` - The text color is set to white. -- `font="monospace"` - This sets the font to monospace. +āφāϏ⧁āύ āĻāĻ–āύ āφāĻŽāϰāĻž āĻāχ āĻ…ā§āϝāĻžāĻĒāϟāĻŋāϤ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇āĻ›āĻŋ āĻāĻŽāύ āĻ•āĻžāĻ¸ā§āϟāĻŽ āϰāĻ™āϗ⧁āϞāĻŋ āĻĻ⧇āϖ⧇ āύ⧇āĻ“āϝāĻŧāĻž āϝāĻžāĻ• `.streamlit/config.toml` āĻ•āύāĻĢāĻŋāĻ—āĻžāϰ⧇āĻļāύ āĻĢāĻžāχāϞ⧇: +- `primaryColor="#F39C12"` - āĻāϟāĻŋ āĻĒā§āϰāĻžāĻĨāĻŽāĻŋāĻ• āϰāĻ™ āĻ•āĻŽāϞāĻž āϏ⧇āϟ āĻ•āϰ⧇āĨ¤ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ āωāχāĻœā§‡āĻŸā§‡ āĻ•āĻŽāϞāĻž āϰāĻ™āϗ⧁āϞāĻŋ āϞāĻ•ā§āĻˇā§āϝ āĻ•āϰ⧁āύāĨ¤ +- `backgroundColor="#2E86C1"` - āĻāϟāĻŋ āĻĒāϟāĻ­ā§‚āĻŽāĻŋāϰ āϰāĻ™āϕ⧇ āύ⧀āϞ⧇ āϏ⧇āϟ āĻ•āϰ⧇āĨ¤ āϞāĻ•ā§āĻˇā§āϝ āĻ•āϰ⧁āύ āĻŽā§‚āϞ āĻĒā§āϝāĻžāύ⧇āϞ⧇ āĻāĻ•āϟāĻŋ āύ⧀āϞ āĻĒāϟāĻ­ā§‚āĻŽāĻŋāϰ āϰāĻ™ āϰāϝāĻŧ⧇āϛ⧇āĨ¤ +- `secondaryBackgroundColor="#AED6F1"` - āĻāϟāĻŋ āϏ⧇āϕ⧇āĻ¨ā§āĻĄāĻžāϰāĻŋ āĻĒāϟāĻ­ā§‚āĻŽāĻŋāϰ āϰāĻ™āϕ⧇ āĻ—āĻžāĻĸāĻŧ āϧ⧂āϏāϰ⧇ āϏ⧇āϟ āĻ•āϰ⧇āĨ¤ āϏāĻžāχāĻĄāĻŦāĻžāϰ⧇āϰ āϧ⧂āϏāϰ āĻĒāϟāĻ­ā§‚āĻŽāĻŋāϰ āϰāĻ™ āĻāĻŦāĻ‚ āĻĒā§āϰāϧāĻžāύ āĻĒā§āϝāĻžāύ⧇āϞ⧇ āϕ⧋āĻĄ āĻŦāĻ•ā§āϏ⧇āϰ āĻĒāϟāĻ­ā§‚āĻŽāĻŋāϰ āϰāĻ™ āϞāĻ•ā§āĻˇā§āϝ āĻ•āϰ⧁āύāĨ¤ +- `textColor="#FFFFFF"` - āĻĒāĻžāĻ ā§āϝ⧇āϰ āϰāĻ™ āϏāĻžāĻĻāĻžāϤ⧇ āϏ⧇āϟ āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇āĨ¤ +- `font="monospace"` - āĻāϟāĻŋ āĻĢāĻ¨ā§āϟāϟāĻŋāϕ⧇ āĻŽāύ⧋āĻ¸ā§āĻĒ⧇āϏ⧇ āϏ⧇āϟ āĻ•āϰ⧇āĨ¤ -## Further reading +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž - [Theming](https://docs.streamlit.io/library/advanced-features/theming) -- [HTML Color Codes](https://htmlcolorcodes.com/) is a great tool for selecting colors of interest. +- [HTML Color Codes](https://htmlcolorcodes.com/) āφāĻ—ā§āϰāĻšā§‡āϰ āϰāĻ‚ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻĻ⧁āĻ°ā§āĻĻāĻžāĻ¨ā§āϤ āĻšāĻžāϤāĻŋāϝāĻŧāĻžāϰāĨ¤ From ecce01429d360129ea9ec1cc4ac54eabecf2bd7c Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 19:46:32 +0100 Subject: [PATCH 17/48] Update Day17.md --- content/Day17.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/Day17.md b/content/Day17.md index f5c2cc9..de91012 100644 --- a/content/Day17.md +++ b/content/Day17.md @@ -1,13 +1,13 @@ # st.secrets -`st.secrets` allows you to store confidential information such as API keys, database passwords or other credentials. +`st.secrets` āĻ—ā§‹āĻĒāĻ¨ā§€ā§Ÿ āϤāĻĨā§āϝ āϝ⧇āĻŽāύ API keys, database passwords āĻŦāĻž āĻ…āĻ¨ā§āϝāĻžāĻ¨ā§āϝ āϗ⧁āϰ⧁āĻ¤ā§āĻŦāĻĒā§‚āĻ°ā§āĻŖ āϤāĻĨā§āϝāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.secrets/) -## Code -Here's how to use `st.secrets`: +## āϕ⧋āĻĄ +āĻāχāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύ `st.secrets`: ```python import streamlit as st @@ -16,26 +16,26 @@ st.title('st.secrets') st.write(st.secrets['message']) ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -This is followed by creating a title text for the app: +āϤāĻžāϰāĻĒāϰ āϟāĻžāχāĻŸā§‡āϞ āĻŸā§‡āĻ•ā§āϏāϟ āĻŦāĻžāύāĻžāύ: ```python st.title('st.secrets') ``` -Finally, we'll be displaying the stored secrets: +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž āϏāĻžā§āϚāĻŋāϤ āĻ—ā§‹āĻĒāύ⧀āϝāĻŧāϤāĻž āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻŦ: ```python st.write(st.secrets['message']) ``` -It should be noted that, secrets can be stored in Streamlit Community Cloud as shown in the screenshots shown below. +āĻāϟāĻŋ āωāĻ˛ā§āϞ⧇āĻ– āĻ•āϰāĻž āωāϚāĻŋāϤ āϝ⧇, āύ⧀āĻšā§‡ āĻĻ⧇āĻ–āĻžāύ⧋ āĻ¸ā§āĻ•ā§āϰāĻŋāύāĻļāϟāϗ⧁āϞāĻŋāϤ⧇ āĻĻ⧇āĻ–āĻžāύ⧋ āĻšāĻŋāϏāĻžāĻŦ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŽāĻŋāωāύāĻŋāϟāĻŋ āĻ•ā§āϞāĻžāωāĻĄā§‡ āĻ—ā§‹āĻĒāύ⧀āϝāĻŧāϤāĻžāϗ⧁āϞāĻŋ āϏāĻ‚āϰāĻ•ā§āώāĻŖ āĻ•āϰāĻž āϝ⧇āϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ -If working locally, they can be stored in `.streamlit/secrets.toml`, but make sure to avoid uploading this to a GitHub repo when deploying the app. +āĻ¸ā§āĻĨāĻžāύ⧀āϝāĻŧāĻ­āĻžāĻŦ⧇ āĻ•āĻžāϜ āĻ•āϰāϞ⧇ āϤāĻĨā§āϝāϗ⧁āϞ⧋ `.streamlit/secrets.toml` āĻāχāĻ–āĻžāύ⧇ āϰāĻžāϖ⧁āύ , āĻ•āĻŋāĻ¨ā§āϤ⧁ āĻŽāύ⧇ āϰāĻžāĻ–āĻŦ⧇āύ āϝ⧇ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϰ⧇āĻĒā§‹āϤ⧇ āĻĄāĻŋāĻĒā§āϞ⧟ āĻ•āϰāĻžāϰ āϏāĻŽā§Ÿ āĻāχ āĻĢāĻžāχāϞāϟāĻŋ āφāĻĒāϞ⧋āĻĄ āĻ•āϰāĻŦ⧇āύ āύāĻžāĨ¤ -## Further reading -- [Add secrets to your Streamlit apps](https://blog.streamlit.io/secrets-in-sharing-apps/) -- [Secrets management](https://docs.streamlit.io/streamlit-cloud/get-started/deploy-an-app/connect-to-data-sources/secrets-management) +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž +- [āφāĻĒāύāĻžāϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ⧇ āĻ—ā§‹āĻĒāύ⧀āϝāĻŧāϤāĻž āϝ⧋āĻ— āĻ•āϰ⧁āύ](https://blog.streamlit.io/secrets-in-sharing-apps/) +- [āĻ—ā§‹āĻĒāύ āĻŦā§āϝāĻŦāĻ¸ā§āĻĨāĻžāĻĒāύāĻž](https://docs.streamlit.io/streamlit-cloud/get-started/deploy-an-app/connect-to-data-sources/secrets-management) From 291e882a4de3d2997cc667022bef2f5b618e794e Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 19:58:07 +0100 Subject: [PATCH 18/48] Update Day18.md --- content/Day18.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/content/Day18.md b/content/Day18.md index 0f86239..c4bf949 100644 --- a/content/Day18.md +++ b/content/Day18.md @@ -1,15 +1,15 @@ # st.file_uploader -`st.file_uploader` displays a file uploader widget [[1](https://docs.streamlit.io/library/api-reference/widgets/st.file_uploader)]. +`st.file_uploader` āĻĢāĻžāχāϞ āĻĻ⧇āĻ–āĻžā§Ÿ āφāĻĒā§āϞ⧋āĻĄāĻžāϰ āωāχāĻœā§‡āϟ āĻĻā§āĻŦāĻžāϰāĻžāĨ¤ [[1](https://docs.streamlit.io/library/api-reference/widgets/st.file_uploader)]. -By default, uploaded files are limited to 200MB. You can configure this using the server.maxUploadSize config option. For more info on how to set config options, see [[2](https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options)]. +āĻ—āϤāĻžāύ⧁āĻ—āϤāĻŋāĻ• āĻ­āĻžāĻŦ⧇ āφāĻĒāϞ⧋āĻĄ āĻ•āϰāĻž āĻĢāĻžāχāϞ ⧍ā§Ļā§Ļ MB āĻĒāĻ°ā§āϝāĻ¨ā§āϤ āϏ⧀āĻŽāĻžāĻŦāĻĻā§āϧāĨ¤ āφāĻĒāύāĻŋ server.maxUploadSize āĻ•āύāĻĢāĻŋāĻ—āĻžāϰ āĻ…āĻĒāĻļāύ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻāϟāĻŋ āĻ•āύāĻĢāĻŋāĻ—āĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ āĻ•āύāĻĢāĻŋāĻ—āĻžāϰ āĻŦāĻŋāĻ•āĻ˛ā§āĻĒāϗ⧁āϞāĻŋ āϕ⧀āĻ­āĻžāĻŦ⧇ āϏ⧇āϟ āĻ•āϰāĻŦ⧇āύ āϏ⧇ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āφāϰāĻ“ āϤāĻĨā§āϝ⧇āϰ āϜāĻ¨ā§āϝ, āĻĻ⧇āϖ⧁āύāĨ¤ [[2](https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options)]. -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.file_uploader/) -## Code -Here's how to use `st.file_uploader`: +## āϕ⧋āĻĄ +āĻāχāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύ `st.file_uploader`: ```python import streamlit as st import pandas as pd @@ -29,25 +29,25 @@ else: st.info('â˜ī¸ Upload a CSV file') ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` and other prerequisite library like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāύāĻ‚ āĻ…āĻ¨ā§āύāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st import pandas as pd ``` -This is followed by creating a title text for the app: +āϤāĻžāϰāĻĒāϰ āϟāĻžāχāĻŸā§‡āϞ āĻŸā§‡āĻ•ā§āϏāϟ āĻŦāĻžāύāĻžāύ: ```python st.title('st.file_uploader') ``` -Next, we'll use `st.file_uploader` to display a file uploader widget for accepting user input file: +āĻāĻ–āύ āφāĻŽāϰāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦā§‹ `st.file_uploader` āĻĢāĻžāχāϞ āφāĻĒāϞ⧋āĻĄāĻžāϰ āωāχāĻœā§‡āϟ āĻĻ⧇āĻ–āĻžāύ⧋āϰ āϜāĻ¨ā§āϝ āϝāĻž āύāĻžāĻ•āĻŋ āχāωāϏāĻžāϰ āχāύāĻĒ⧁āϟ āĻĢāĻžāχāϞ āĻ¨ā§‡ā§Ÿ: ```python st.subheader('Input CSV') uploaded_file = st.file_uploader("Choose a file") ``` -Finally, we define conditional statements for initially displaying a welcome message inviting users to upload their file (as implemented in the `else` condition). Upon file upload, the `if` statements are activated and the CSV file is read by the `pandas` library and displayed via the `st.write` command. +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āĻĻ⧇āϰ āϤāĻžāĻĻ⧇āϰ āĻĢāĻžāχāϞ āφāĻĒāϞ⧋āĻĄ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āφāĻŽāĻ¨ā§āĻ¤ā§āϰāĻŖ āϜāĻžāύāĻŋāϝāĻŧ⧇ āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŦāĻžāĻ—āϤ āĻŦāĻžāĻ°ā§āϤāĻž āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āϜāĻ¨ā§āϝ āĻļāĻ°ā§āϤāϏāĻžāĻĒ⧇āĻ•ā§āώ āĻŦāĻŋāĻŦ⧃āϤāĻŋ āϏāĻ‚āĻœā§āĻžāĻžāϝāĻŧāĻŋāϤ āĻ•āϰāĻŋ (`else` āĻ•āĻ¨ā§āĻĄāĻŋāĻļāύ⧇ āĻŦāϞāĻž āφāϛ⧇). āĻĢāĻžāχāϞ āφāĻĒāϞ⧋āĻĄ āĻ•āϰāĻžāϰ āĻĒāϰ `if` āĻ¸ā§āĻŸā§‡āϟāĻŽā§‡āĻ¨ā§āϟāϏāϗ⧁āϞ⧋ āϚāĻžāϞ⧁ āĻšā§Ÿ āĻāĻŦāĻ‚ CSV āĻĢāĻžāχāϞ `pandas` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āĻĻāĻŋā§Ÿā§‡ āĻĒā§œā§‡ `st.write` āĻĻāĻŋā§Ÿā§‡ āĻĻ⧇āĻ–āĻžāύ⧋ āĻšā§ŸāĨ¤ ```python if uploaded_file is not None: df = pd.read_csv(uploaded_file) @@ -59,6 +59,6 @@ else: st.info('â˜ī¸ Upload a CSV file') ``` -## Further reading +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž 1. [`st.file_uploader`](https://docs.streamlit.io/library/api-reference/widgets/st.file_uploader) -2. [Set configuration options](https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options) +2. [āĻ•āύāĻĢāĻŋāĻ—āĻžāϰ⧇āĻļāύ āĻŦāĻŋāĻ•āĻ˛ā§āĻĒ āϏ⧇āϟ āĻ•āϰ⧁āύ](https://docs.streamlit.io/library/advanced-features/configuration#set-configuration-options) From dedd5bd023b32c1a1ee6e6cdf1723ee671058014 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 20:32:49 +0100 Subject: [PATCH 19/48] Update Day19.md --- content/Day19.md | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/content/Day19.md b/content/Day19.md index 4c045f2..b80a31f 100644 --- a/content/Day19.md +++ b/content/Day19.md @@ -1,17 +1,17 @@ -# How to layout your Streamlit app +# āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āφāĻĒāύāĻžāϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āĻĒāϰāĻŋāĻ•āĻ˛ā§āĻĒāύāĻž āĻ•āϰāĻŦ⧇āύ -In this tutorial, we're going to use the following commands to layout our Streamlit app: -- `st.set_page_config(layout="wide")` - Displays the contents of the app in wide mode (otherwise by default, the contents are encapsulated in a fixed width box. -- `st.sidebar` - Places the widgets or text/image displays in the sidebar. -- `st.expander` - Places text/image displays inside a collapsible container box. -- `st.columns` - Creates a tabular space (or column) within which contents can be placed inside. +āĻāχ āϟāĻŋāωāĻŸā§‹āϰāĻŋāϝāĻŧāĻžāϞ⧇, āφāĻŽāϰāĻž āφāĻŽāĻžāĻĻ⧇āϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϞ⧇āφāωāϟ āĻ•āϰāϤ⧇ āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āĻ•āĻŽāĻžāĻ¨ā§āĻĄāϗ⧁āϞāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āϝāĻžāĻšā§āĻ›āĻŋ: +- `st.set_page_config(layout="wide")` - āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻŦāĻŋāώāϝāĻŧāĻŦāĻ¸ā§āϤ⧁āϗ⧁āϞāĻŋ āĻĒā§āϰāĻļāĻ¸ā§āϤ āĻŽā§‹āĻĄā§‡ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ (āĻ…āĻ¨ā§āϝāĻĨāĻžāϝāĻŧ āĻ—āϤāĻžāύ⧁āĻ—āϤāĻŋāĻ•āĻ­āĻžāĻŦ⧇ āĻŦāĻŋāώāϝāĻŧāĻŦāĻ¸ā§āϤ⧁āϗ⧁āϞāĻŋ āĻāĻ•āϟāĻŋ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻĒā§āϰāĻ¸ā§āĻĨ⧇āϰ āĻŦāĻžāĻ•ā§āϏ⧇ āĻāύāĻ•ā§āϝāĻžāĻĒāϏ⧁āϞ⧇āϟ āĻ•āϰāĻž āĻšāϝāĻŧāĨ¤) +- `st.sidebar` - āϏāĻžāχāĻĄāĻŦāĻžāϰ⧇ āωāχāĻœā§‡āϟ āĻŦāĻž āĻŸā§‡āĻ•ā§āϏāϟ/āχāĻŽā§‡āϜ āĻĄāĻŋāϏāĻĒā§āϞ⧇ āϰāĻžāϖ⧇āĨ¤ +- `st.expander` - āĻāĻ•āϟāĻŋ āϏāĻ‚āϕ⧋āϚāύāϝ⧋āĻ—ā§āϝ āĻ•āĻ¨ā§āĻŸā§‡āχāύāĻžāϰ āĻŦāĻžāĻ•ā§āϏ⧇āϰ āĻ­āĻŋāϤāϰ⧇ āĻĒāĻžāĻ ā§āϝ/āϚāĻŋāĻ¤ā§āϰ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇āĨ¤ +- `st.columns` - āĻāĻ•āϟāĻŋ āĻŸā§‡āĻŦ⧁āϞāĻžāϰ āĻ¸ā§āĻĨāĻžāύ (āĻŦāĻž āĻ•āϞāĻžāĻŽ) āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āϝāĻžāϰ āĻŽāĻ§ā§āϝ⧇ āĻŦāĻŋāώāϝāĻŧāĻŦāĻ¸ā§āϤ⧁ āĻ­āĻŋāϤāϰ⧇ āϰāĻžāĻ–āĻž āϝ⧇āϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/streamlit-layout/) ## Code -Here's how to customize the layout of your Streamlit app: +āφāĻĒāύāĻžāϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϞ⧇āφāωāϟāϟāĻŋ āϕ⧀āĻ­āĻžāĻŦ⧇ āĻ•āĻžāĻ¸ā§āϟāĻŽāĻžāχāϜ āĻ•āϰāĻŦ⧇āύ āϤāĻž āĻāĻ–āĻžāύ⧇: ```python import streamlit as st @@ -51,30 +51,30 @@ with col3: st.write('👈 Please choose your favorite **food**!') ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -We'll start by first defining the page layout to be displayed in the `wide` mode, which allows the page content to expand to the browser's width. +āφāĻŽāϰāĻž āĻĒā§āϰāĻĨāĻŽā§‡ āĻĒ⧃āĻˇā§āĻ āĻžāϰ āĻŦāĻŋāĻ¨ā§āϝāĻžāϏāϟāĻŋ āϏāĻ‚āĻœā§āĻžāĻžāϝāĻŧāĻŋāϤ āĻ•āϰ⧇ āĻļ⧁āϰ⧁ āĻ•āϰāĻŦ āϝāĻž āĻĒā§āϰāĻĻāĻ°ā§āĻļāĻŋāϤ āĻšāĻŦ⧇ `wide` āĻŽā§‹āĻĄ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇, āϝāĻž āĻĒ⧃āĻˇā§āĻ āĻžāϰ āĻŦāĻŋāώāϝāĻŧāĻŦāĻ¸ā§āϤ⧁āϕ⧇ āĻŦā§āϰāĻžāωāϜāĻžāϰ⧇āϰ āĻĒā§āϰāĻ¸ā§āĻĨ⧇ āĻĒā§āϰāϏāĻžāϰāĻŋāϤ āĻ•āϰāϤ⧇ āĻĻ⧇āϝāĻŧāĨ¤ ```python st.set_page_config(layout="wide") ``` -Next, we'll give the Streamlit app a title. +āϤāĻžāϰāĻĒāϰ āϟāĻžāχāĻŸā§‡āϞ āĻŸā§‡āĻ•ā§āϏāϟ āĻŦāĻžāύāĻžāύ: ```python st.title('How to layout your Streamlit app') ``` -An expandable box titled `About this app` is placed under the app title. Upon expansion, we'll see additional details inside. +āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻāĻ•āϟāĻŋ āĻĒā§āϰāϏāĻžāϰāĻŋāϤ āĻŦāĻžāĻ•ā§āϏ `About this app` āφāϛ⧇ āĻāĻŦāĻ‚ āĻāϟāĻŋ āĻ…ā§āϝāĻžāĻĒ āĻļāĻŋāϰ⧋āύāĻžāĻŽā§‡āϰ āĻ…āϧ⧀āύ⧇ āϰāϝāĻŧ⧇āϛ⧇āĨ¤ āϏāĻŽā§āĻĒā§āϰāϏāĻžāϰāϪ⧇āϰ āĻĒāϰ⧇, āφāĻŽāϰāĻž āĻ­āĻŋāϤāϰ⧇ āĻ…āϤāĻŋāϰāĻŋāĻ•ā§āϤ āĻŦāĻŋāĻŦāϰāĻŖ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻŦāĨ¤ ```python with st.expander('About this app'): st.write('This app shows the various ways on how you can layout your Streamlit app.') st.image('https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png', width=250) ``` -Input widgets for accepting user input is placed in the sidebar as specified by using the `st.sidebar` command before the Streamlit commands `text_input` and `selectbox`. Input values entered or selected by the user are assigned and stored in the `user_name`, `user_emoji` and `user_food` variables. +āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āχāύāĻĒ⧁āϟ āĻ—ā§āϰāĻšāĻŖ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āχāύāĻĒ⧁āϟ āωāχāĻœā§‡āϟāϗ⧁āϞāĻŋ āϏāĻžāχāĻĄāĻŦāĻžāϰ⧇ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻž āĻšāϝāĻŧ `st.sidebar` āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŽāĻžāĻ¨ā§āĻĄāϏ `text_input` and `selectbox` āĻāϗ⧁āϞ⧋āϰ āφāϗ⧇āĨ¤ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āĻĻā§āĻŦāĻžāϰāĻž āĻĒā§āϰāĻŦ⧇āĻļ āĻ•āϰāĻž āĻŦāĻž āύāĻŋāĻ°ā§āĻŦāĻžāϚāĻŋāϤ āχāύāĻĒ⧁āϟ āĻŽāĻžāύāϗ⧁āϞāĻŋ āĻŦāϰāĻžāĻĻā§āĻĻ āĻ•āϰāĻž āĻāĻŦāĻ‚ āϏāĻ‚āϰāĻ•ā§āώāĻŖ āĻ•āϰāĻž āĻšāϝāĻŧ⧎ `user_name`, `user_emoji` āĻāĻŦāĻ‚ `user_food` āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ āĻĻā§āĻŦāĻžāϰāĻžāĨ¤ ```python st.sidebar.header('Input') user_name = st.sidebar.text_input('What is your name?') @@ -82,7 +82,8 @@ user_emoji = st.sidebar.selectbox('Choose an emoji', ['', '😄', '😆', '😊' user_food = st.sidebar.selectbox('What is your favorite food?', ['', 'Tom Yum Kung', 'Burrito', 'Lasagna', 'Hamburger', 'Pizza']) ``` -Finally, we'll create 3 columns using the `st.columns` command which corresponds to `col1`, `col2` and `col3`. Then, we assign contents to each of the column by creating individual code blocks starting with the `with` statement. Underneath this, we create conditional statements that display 1 of 2 alternative text depending on whether the user had provided their input data (specified in the sidebar) or not. By default, the page displays text under the `else` statement. Upon providing user input, the corresponding information that the user gives to the app is displayed under the `Output` header text. +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ ā§ŠāϟāĻŋ āĻ•āϞāĻžāĻŽ āϤ⧈āϰāĻŋ āĻ•āϰāĻŦ `st.columns` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ `col1`, `col2` āĻāĻŦāĻ‚ `col3`āĨ¤ āϤāĻžāϰāĻĒāϰ, āφāĻŽāϰāĻž āĻĒā§āϰāϤāĻŋāϟāĻŋ āĻ•āϞāĻžāĻŽā§‡ āĻŦāĻŋāώāϝāĻŧāĻŦāĻ¸ā§āϤ⧁ āĻŦāϰāĻžāĻĻā§āĻĻ āĻ•āϰāĻŋ āφāϞāĻžāĻĻāĻž āφāϞāĻžāĻĻāĻž āϕ⧋āĻĄ āĻŦā§āϞāĻ• āϤ⧈āϰāĻŋ āĻ•āϰ⧇ `with` āĻŦāĻŋāĻŦ⧃āϤāĻŋ āĻĻāĻŋāϝāĻŧ⧇āĨ¤ āĻāϰ āύ⧀āĻšā§‡, āφāĻŽāϰāĻž āĻļāĻ°ā§āϤāϏāĻžāĻĒ⧇āĻ•ā§āώ āĻŦāĻŋāĻŦ⧃āϤāĻŋ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋ āϝāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀ āϤāĻžāĻĻ⧇āϰ āχāύāĻĒ⧁āϟ āĻĄā§‡āϟāĻž (āϏāĻžāχāĻĄāĻŦāĻžāϰ⧇ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ) āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āϛ⧇ āĻ•āĻŋ āύāĻž āϤāĻžāϰ āωāĻĒāϰ āύāĻŋāĻ°ā§āĻ­āϰ āĻ•āϰ⧇ ⧍āϟāĻŋ āĻŦāĻŋāĻ•āĻ˛ā§āĻĒ āĻĒāĻžāĻ ā§āϝ⧇āϰ āĻŽāĻ§ā§āϝ⧇ ā§§āϟāĻŋ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇āĨ¤ āĻĄāĻŋāĻĢāĻ˛ā§āϟāϰ⧂āĻĒ⧇, āĻĒ⧃āĻˇā§āĻ āĻžāϟāĻŋ `else` āĻŦāĻŋāĻŦ⧃āϤāĻŋāϰ āĻ…āϧ⧀āύ⧇ āĻĒāĻžāĻ ā§āϝ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇āĨ¤ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āχāύāĻĒ⧁āϟ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰāĻžāϰ āĻĒāϰ⧇, āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀ āĻ…ā§āϝāĻžāĻĒ⧇ āϝ⧇ āϏāĻ‚āĻļā§āϞāĻŋāĻˇā§āϟ āϤāĻĨā§āϝ āĻĻ⧇āϝāĻŧ āϤāĻž `Output` āĻļāĻŋāϰ⧋āύāĻžāĻŽā§‡āϰ āĻĒāĻžāĻ ā§āϝ⧇āϰ āĻ…āϧ⧀āύ⧇ āĻĒā§āϰāĻĻāĻ°ā§āĻļāĻŋāϤ āĻšāϝāĻŧāĨ¤ + ```python st.header('Output') @@ -108,5 +109,5 @@ with col3: ``` It is also worthy to note that `f` strings were used to combine pre-canned text together with the user provided values. -## Further reading -- [Layouts and Containers](https://docs.streamlit.io/library/api-reference/layout) +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž +- [āϞ⧇āφāωāϟ āĻāĻŦāĻ‚ āĻ•āĻ¨ā§āĻŸā§‡āχāύāĻžāϰ](https://docs.streamlit.io/library/api-reference/layout) From e68bd5390f04c492b8cbf1beba73b424c5bbb874 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 20:34:26 +0100 Subject: [PATCH 20/48] Update Day20.md --- content/Day20.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/Day20.md b/content/Day20.md index 24921ac..0cac9cf 100644 --- a/content/Day20.md +++ b/content/Day20.md @@ -1,6 +1,6 @@ -# Tech Twitter Space on What is Streamlit? -## (Hosted by Francesco Ciulla) +# āĻŸā§‡āĻ• āϟ⧁āχāϟāĻžāϰ āĻ¸ā§āĻĒ⧇āϏ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŋ? +## (āĻĢā§āϰāĻžāĻ¨ā§āϏ⧇āϏāϕ⧋ āϏāĻŋāωāϞāĻž āĻšā§‹āĻ¸ā§āϟ āĻ•āϰ⧇āϛ⧇āύ) -Join us for a discussion about Streamlit with our host [Francesco Ciulla](https://twitter.com/FrancescoCiull4). +āφāĻŽāĻžāĻĻ⧇āϰ āĻšā§‹āĻ¸ā§āĻŸā§‡āϰ āϏāĻžāĻĨ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āφāϞ⧋āϚāύāĻžāϰ āϜāĻ¨ā§āϝ āφāĻŽāĻžāĻĻ⧇āϰ āϏāĻžāĻĨ⧇ āϝ⧋āĻ— āĻĻāĻŋāύ [āĻĢā§āϰāĻžāĻ¨ā§āϏ⧇āϏāϕ⧋ āϏāĻŋāωāϞāĻž](https://twitter.com/FrancescoCiull4). 👉 Link: https://twitter.com/i/spaces/1dRJZlbglXMKB From 91810fd59a4854ac9f27be61f02848b707e4d89b Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 20:42:32 +0100 Subject: [PATCH 21/48] Update Day21.md --- content/Day21.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/content/Day21.md b/content/Day21.md index 2ad6838..33b5f36 100644 --- a/content/Day21.md +++ b/content/Day21.md @@ -1,13 +1,13 @@ # st.progress -`st.progress` displays a progress bar that updates graphically as the iteration progresses. +`st.progress` āĻāĻ•āϟāĻŋ āĻ…āĻ—ā§āϰāĻ—āϤāĻŋ āĻŦāĻžāϰ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ āϝāĻž āĻĒ⧁āύāϰāĻžāĻŦ⧃āĻ¤ā§āϤāĻŋāϰ āĻ…āĻ—ā§āϰāĻ—āϤāĻŋāϰ āϏāĻžāĻĨ⧇ āϏāĻžāĻĨ⧇ āĻ—ā§āϰāĻžāĻĢāĻŋāĻ•āĻ­āĻžāĻŦ⧇ āφāĻĒāĻĄā§‡āϟ āĻšāϝāĻŧāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.progress/) ## Code -Here's how to use `st.progress`: +āĻāχāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύ `st.progress`: ```python import streamlit as st import time @@ -26,25 +26,26 @@ for percent_complete in range(100): st.balloons() ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` along with the `time` library like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻžāĨ¤ āϤāĻžāϰ āϏāĻžāĻĨ⧇ `time` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇: ```python import streamlit as st import time ``` -Next, we create a title text for the app: +āĻāϰ āĻĒāϰ⧇, āφāĻŽāϰāĻž āĻ…ā§āϝāĻžāĻĒāϟāĻŋāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻĒāĻžāĻ ā§āϝ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋ: ```python st.title('st.progress') ``` -An **About box** is created using `st.expander` and description is displayed via `st.write`: +āĻāĻ•āϟāĻŋ **āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āĻŦāĻžāĻ•ā§āϏ** āϤ⧈āϰāĻŋ āĻ•āϰāĻž āĻšāϝāĻŧ `st.expander` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻāĻŦāĻ‚ āĻŦāĻŋāĻŦāϰāĻŖ `st.write` āĻāϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻĒā§āϰāĻĻāĻ°ā§āĻļāĻŋāϤ āĻšāϝāĻŧ: ```python with st.expander('About this app'): st.write('You can now display the progress of your calculations in a Streamlit app with the `st.progress` command.') ``` -Finally, we define a progress bar and instantiate it with a starting value of `0`. Then, a `for` loop will iterate from `0` until `100` is reached. In each iteration, we use `time.sleep(0.05)` to allow the app to wait for `0.05` before adding a value of `1` to the `my_bar` progress bar and in doing so the graphical display of the bar increases with each iteration. +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž āĻāĻ•āϟāĻŋ āĻ…āĻ—ā§āϰāĻ—āϤāĻŋ āĻŦāĻžāϰ āϏāĻ‚āĻœā§āĻžāĻžāϝāĻŧāĻŋāϤ āĻ•āϰāĻŋ āĻāĻŦāĻ‚ āĻāϟāĻŋāϕ⧇ `0` āĻāϰ āĻĒā§āϰāĻžāϰāĻŽā§āĻ­āĻŋāĻ• āĻŽāĻžāύ āĻĻāĻŋāϝāĻŧ⧇ āχāύāĻ¸ā§āĻŸā§āϝāĻžāĻ¨ā§āϟāĻŋāϝāĻŧ⧇āϟ āĻ•āϰāĻŋāĨ¤ āϤāĻžāϰāĻĒāϰ, āĻāĻ•āϟāĻŋ `for` āϞ⧁āĻĒ `0` āĻĨ⧇āϕ⧇ `100` āĻ āĻĒ⧌āρāĻ›āĻžāύ⧋ āĻĒāĻ°ā§āϝāĻ¨ā§āϤ āĻĒ⧁āύāϰāĻžāĻŦ⧃āĻ¤ā§āϤāĻŋ āĻ•āϰāĻŦ⧇āĨ¤ āĻĒā§āϰāϤāĻŋāϟāĻŋ āĻĒ⧁āύāϰāĻžāĻŦ⧃āĻ¤ā§āϤāĻŋāϤ⧇, āφāĻŽāϰāĻž `time.sleep(0.05)` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŋ āϝāĻžāϤ⧇ āĻ…ā§āϝāĻžāĻĒāϟāĻŋāϕ⧇ `my_bar` āĻĒā§āϰāĻ—ā§āϰ⧇āϏ āĻŦāĻžāϰ⧇ `1` āĻāϰ āĻŽāĻžāύ āϝ⧋āĻ— āĻ•āϰāĻžāϰ āφāϗ⧇ `0.05` āĻāϰ āϜāĻ¨ā§āϝ āĻ…āĻĒ⧇āĻ•ā§āώāĻž āĻ•āϰāĻžāϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āĻ“āϝāĻŧāĻž āĻšāϝāĻŧ āĻāĻŦāĻ‚ āĻāχāĻ­āĻžāĻŦ⧇ āĻŦāĻžāϰ⧇āϰ āĻ—ā§āϰāĻžāĻĢāĻŋāĻ•āĻžāϞ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻŦ⧃āĻĻā§āϧāĻŋ āĻĒāĻžāϝāĻŧ āĻĒā§āϰāϤāĻŋāϟāĻŋ āĻĒ⧁āύāϰāĻžāĻŦ⧃āĻ¤ā§āϤāĻŋāϰ āϏāĻžāĻĨ⧇āĨ¤ + ```python my_bar = st.progress(0) @@ -55,5 +56,5 @@ for percent_complete in range(100): st.balloons() ``` -## Further reading +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž - [`st.progress`](https://docs.streamlit.io/library/api-reference/status/st.progress) From c2f364e7f8795dcf8384a3eef9e771b4d6de898b Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 20:59:43 +0100 Subject: [PATCH 22/48] Update Day22.md --- content/Day22.md | 45 +++++++++++++++++++++++---------------------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/content/Day22.md b/content/Day22.md index 045aafc..e0d86e8 100644 --- a/content/Day22.md +++ b/content/Day22.md @@ -1,26 +1,26 @@ # st.form -`st.form` creates a form that batches elements together with a "Submit" button. +`st.form` āĻāĻ•āϟāĻŋ āĻĢāĻ°ā§āĻŽ āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āϝāĻž āĻāĻ•āϟāĻŋ "Submit" āĻŦāĻžāϟāύ āĻĻāĻŋā§Ÿā§‡ āωāĻĒāĻžāĻĻāĻžāύāϗ⧁āϞāĻŋāϕ⧇ āĻŦā§āϝāĻžāϚ āĻ•āϰ⧇āĨ¤ -Typically, whenever a user interacts with a widget, the Streamlit app is rerun. +āϏāĻžāϧāĻžāϰāĻŖāϤ, āϝāĻ–āύāχ āĻāĻ•āϜāύ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀ āĻāĻ•āϟāĻŋ āωāχāĻœā§‡āĻŸā§‡āϰ āϏāĻžāĻĨ⧇ āχāĻ¨ā§āϟāĻžāϰāĻ…ā§āϝāĻžāĻ•ā§āϟ āĻ•āϰ⧇, āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āĻĒ⧁āύāϰāĻžāϝāĻŧ āϚāĻžāϞ⧁ āĻšāϝāĻŧāĨ¤ -A form is a container that visually groups other elements and widgets together, and contains a Submit button. Herein, a user can interacts with one or more widgets for as many times as they like without causing a rerun. Finally, when the form's Submit button is pressed, all widget values inside the form will be sent to Streamlit in a single batch. +āĻāĻ•āϟāĻŋ āĻĢāĻ°ā§āĻŽ āĻšāϞ āĻāĻ•āϟāĻŋ āϧāĻžāϰāĻ• āϝāĻž āĻĻ⧃āĻļā§āϝāϤ āĻ…āĻ¨ā§āϝāĻžāĻ¨ā§āϝ āωāĻĒāĻžāĻĻāĻžāύ āĻāĻŦāĻ‚ āωāχāĻœā§‡āϟāϗ⧁āϞāĻŋāϕ⧇ āĻāĻ•āĻ¤ā§āϰ⧇ āĻ—ā§‹āĻˇā§āĻ ā§€āĻŦāĻĻā§āϧ āĻ•āϰ⧇ āĻāĻŦāĻ‚ āĻāĻ•āϟāĻŋ āϜāĻŽāĻž āĻŦā§‹āϤāĻžāĻŽ āϧāĻžāϰāĻŖ āĻ•āϰ⧇⧎ āĻāĻ–āĻžāύ⧇, āĻāĻ•āϜāύ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀ āĻĒ⧁āύāσāϰāĻžāύ āύāĻž āϘāϟāĻŋāϝāĻŧ⧇ āĻāĻ• āĻŦāĻž āĻāĻ•āĻžāϧāĻŋāĻ• āωāχāĻœā§‡āĻŸā§‡āϰ āϏāĻžāĻĨ⧇ āϝāϤāĻŦāĻžāϰ āϖ⧁āĻļāĻŋ āϤāϤāĻŦāĻžāϰ āχāĻ¨ā§āϟāĻžāϰāĻ…ā§āϝāĻžāĻ•ā§āϟ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ āĻ…āĻŦāĻļ⧇āώ⧇, āϝāĻ–āύ āĻĢāĻ°ā§āĻŽā§‡āϰ āϜāĻŽāĻž āĻĻ⧇āĻ“āϝāĻŧāĻžāϰ āĻŦā§‹āϤāĻžāĻŽāϟāĻŋ āϚāĻžāĻĒāĻž āĻšāϝāĻŧ, āϤāĻ–āύ āĻĢāĻ°ā§āĻŽā§‡āϰ āĻ­āĻŋāϤāϰ⧇āϰ āϏāĻŽāĻ¸ā§āϤ āωāχāĻœā§‡āϟ āĻŽāĻžāύ āĻāĻ•āĻ• āĻŦā§āϝāĻžāĻšā§‡ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāĻŸā§‡ āĻĒāĻžāĻ āĻžāύ⧋ āĻšāĻŦ⧇āĨ¤ -To add elements to a form object, you can use the `with` notation (preferred) or you could use it as an object notation by just calling methods directly on the form (by first assigning it to a variable and subsequently applying Streamlit methods on it). See in the example app. +āĻāĻ•āϟāĻŋ āĻĢāĻ°ā§āĻŽ āĻ…āĻŦāĻœā§‡āĻ•ā§āĻŸā§‡ āωāĻĒāĻžāĻĻāĻžāύ āϝ⧋āĻ— āĻ•āϰāϤ⧇, āφāĻĒāύāĻŋ `āϏāĻš` āĻ¸ā§āĻŦāϰāϞāĻŋāĻĒāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ (āĻĒāĻ›āĻ¨ā§āĻĻ⧇āϰ) āĻ…āĻĨāĻŦāĻž āφāĻĒāύāĻŋ āĻĢāĻ°ā§āĻŽā§‡ āϏāϰāĻžāϏāϰāĻŋ āĻĒāĻĻā§āϧāϤāĻŋāϗ⧁āϞāĻŋ āĻ•āϞ āĻ•āϰ⧇ āĻāϟāĻŋāϕ⧇ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟ āύ⧋āĻŸā§‡āĻļāύ āĻšāĻŋāϏ⧇āĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ (āĻĒā§āϰāĻĨāĻŽā§‡ āĻāϟāĻŋ āĻāĻ•āϟāĻŋ āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ⧇ āĻŦāϰāĻžāĻĻā§āĻĻ āĻ•āϰ⧇ āĻāĻŦāĻ‚ āĻĒāϰāĻŦāĻ°ā§āϤ⧀āϤ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻĒāĻĻā§āϧāϤāĻŋ āĻĒā§āϰāϝāĻŧā§‹āĻ— āĻ•āϰ⧇ āĻāϟāĻž)āĨ¤ āωāĻĻāĻžāĻšāϰāĻŖ āĻ…ā§āϝāĻžāĻĒ⧇ āĻĻ⧇āϖ⧁āύāĨ¤ -Forms have a few constraints: -- Every form must contain a `st.form_submit_button`. -- `st.button` and `st.download_button` cannot be added to a form. -- Forms can appear anywhere in your app (sidebar, columns, etc), but they cannot be embedded inside other forms. +āĻĢāĻ°ā§āĻŽā§‡āϰ āĻ•āĻŋāϛ⧁ āϏ⧀āĻŽāĻžāĻŦāĻĻā§āϧāϤāĻž āφāϛ⧇: +- āĻĒā§āϰāϤāĻŋāϟāĻŋ āĻĢāĻ°ā§āĻŽā§‡ āĻ…āĻŦāĻļā§āϝāχ āĻāĻ•āϟāĻŋ `st.form_submit_button` āĻĨāĻžāĻ•āϤ⧇ āĻšāĻŦ⧇āĨ¤ +- `st.button` āĻāĻŦāĻ‚ `st.download_button` āϕ⧋āύ⧋ āĻĢāĻ°ā§āĻŽā§‡ āϝ⧋āĻ— āĻ•āϰāĻž āϝāĻžāĻŦ⧇ āύāĻžāĨ¤ +- āĻĢāĻ°ā§āĻŽāϗ⧁āϞāĻŋ āφāĻĒāύāĻžāϰ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϝ⧇ āϕ⧋āύāĻ“ āϜāĻžāϝāĻŧāĻ—āĻžāϝāĻŧ (āϏāĻžāχāĻĄāĻŦāĻžāϰ, āĻ•āϞāĻžāĻŽ, āχāĻ¤ā§āϝāĻžāĻĻāĻŋ) āĻĒā§āϰāĻĻāĻ°ā§āĻļāĻŋāϤ āĻšāϤ⧇ āĻĒāĻžāϰ⧇ āϤāĻŦ⧇ āϏ⧇āϗ⧁āϞāĻŋ āĻ…āĻ¨ā§āϝ āĻĢāĻ°ā§āĻŽāϗ⧁āϞāĻŋāϰ āĻŽāĻ§ā§āϝ⧇ āĻāĻŽā§āĻŦ⧇āĻĄ āĻ•āϰāĻž āϝāĻžāĻŦ⧇ āύāĻžā§ˇ -For more information about forms, check out our [blog post](https://blog.streamlit.io/introducing-submit-button-and-forms/). +āĻĢāĻ°ā§āĻŽ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āφāϰāĻ“ āϤāĻĨā§āϝ⧇āϰ āϜāĻ¨ā§āϝ āĻĻ⧇āϖ⧁āύ [āĻŦā§āϞāĻ— āĻĒā§‹āĻ¸ā§āϟ](https://blog.streamlit.io/introducing-submit-button-and-forms/). -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.form/) -## Code -Here's how to use `st.form`: +## āϕ⧋āĻĄ +āĻāĻ–āĻžāύ⧇ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ `st.form` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ: ```python import streamlit as st @@ -68,19 +68,19 @@ form.form_submit_button('Submit') st.write('Selected value: ', selected_val) ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -This is followed by creating a title text for the app: +āĻāϟāĻŋ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āϟāĻžāχāĻŸā§‡āϞ āĻĒāĻžāĻ ā§āϝ āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āĻ…āύ⧁āϏāϰāĻŖ āĻ•āϰāĻž āĻšāϝāĻŧ: ```python st.title('st.form') ``` -### First example -Let's start with the first example, here we'll apply the `st.form` command via the `with` notation. Inside the form, we'll start with writing a subheader `Order your coffee` then create several input widgets (`st.selectbox`, `st.select_slider` and `st.checkbox`) to collect information about the coffee order. Finally, a submit button is created via the `st.form_submit_button` command, which when clicked on will send all user input as a single batch of information to the app for processing. +### āĻĒā§āϰāĻĨāĻŽ āωāĻĻāĻžāĻšāϰāĻŖ +āĻĒā§āϰāĻĨāĻŽ āωāĻĻāĻžāĻšāϰāĻŖ āĻĻāĻŋāϝāĻŧ⧇ āĻļ⧁āϰ⧁ āĻ•āϰāĻž āϝāĻžāĻ•, āĻāĻ–āĻžāύ⧇ āφāĻŽāϰāĻž `st.form` āĻ•āĻŽāĻžāĻ¨ā§āĻĄāϟāĻŋ `with` āύ⧋āĻŸā§‡āĻļāύ⧇āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻĒā§āϰāϝāĻŧā§‹āĻ— āĻ•āϰāĻŦāĨ¤ āĻĢāĻ°ā§āĻŽā§‡āϰ āĻ­āĻŋāϤāϰ⧇, āφāĻŽāϰāĻž āĻāĻ•āϟāĻŋ āωāĻĒāĻļāĻŋāϰ⧋āύāĻžāĻŽ āϞāĻŋāĻ–āϤ⧇ āĻļ⧁āϰ⧁ āĻ•āϰāĻŦ `āφāĻĒāύāĻžāϰ āĻ•āĻĢāĻŋ āĻ…āĻ°ā§āĻĄāĻžāϰ āĻ•āϰ⧁āύ` āϤāĻžāϰāĻĒāϰ āĻ•āĻĢāĻŋāϰ āĻ…āĻ°ā§āĻĄāĻžāϰ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āϤāĻĨā§āϝ āϏāĻ‚āĻ—ā§āϰāĻš āĻ•āϰāϤ⧇ āĻŦ⧇āĻļ āĻ•āĻŋāϛ⧁ āχāύāĻĒ⧁āϟ āωāχāĻœā§‡āϟ (`st.selectbox`, `st.select_slider` āĻāĻŦāĻ‚ `st.checkbox`) āϤ⧈āϰāĻŋ āĻ•āϰāĻŦāĨ¤ āĻ…āĻŦāĻļ⧇āώ⧇, `st.form_submit_button` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻāĻ•āϟāĻŋ āϏāĻžāĻŦāĻŽāĻŋāϟ āĻŦā§‹āϤāĻžāĻŽ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āĻšāϝāĻŧ, āϝ⧇āϟāĻŋāϤ⧇ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰāĻž āĻšāϞ⧇ āϤāĻž āĻĒā§āϰāĻ•ā§āϰāĻŋāϝāĻŧāĻžāĻ•āϰāϪ⧇āϰ āϜāĻ¨ā§āϝ āĻ…ā§āϝāĻžāĻĒ⧇ āϤāĻĨā§āϝ⧇āϰ āĻāĻ•āĻ• āĻŦā§āϝāĻžāϚ āĻšāĻŋāϏāĻžāĻŦ⧇ āϏāĻŽāĻ¸ā§āϤ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āχāύāĻĒ⧁āϟ āĻĒāĻžāĻ āĻžāĻŦ⧇āĨ¤ ```python # Full example of using the with notation st.header('1. Example of using `with` notation') @@ -101,7 +101,8 @@ with st.form('my_form'): submitted = st.form_submit_button('Submit') ``` -Next, we'll add the logic of what happen's after the submit button is clicked on. By default, whenever the Streamlit app is loaded the `else` statement will be run and we see a message `â˜ī¸ Place your order!`. Whereas upon clicking on the submit button, all user provided input via the various widgets are stored in several variables (e.g. `coffee_bean_val`, `coffee_roast_val`, etc.) and printed out via the `st.markdown` command with the help of f-string. +āĻāϰāĻĒāϰ⧇, āϏāĻžāĻŦāĻŽāĻŋāϟ āĻŦā§‹āϤāĻžāĻŽā§‡ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰāĻžāϰ āĻĒāϰ āϕ⧀ āϘāϟāĻŦ⧇ āϤāĻžāϰ āϝ⧁āĻ•ā§āϤāĻŋ āϝ⧋āĻ— āĻ•āϰāĻŦāĨ¤ āĻĄāĻŋāĻĢāĻ˛ā§āϟāϰ⧂āĻĒ⧇, āϝāĻ–āύāχ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āϞ⧋āĻĄ āĻšāĻŦ⧇ āϤāĻ–āύāχ `āĻ…āĻ¨ā§āϝ` āĻŦāĻŋāĻŦ⧃āϤāĻŋāϟāĻŋ āϚāĻžāϞāĻžāύ⧋ āĻšāĻŦ⧇ āĻāĻŦāĻ‚ āφāĻŽāϰāĻž āĻāĻ•āϟāĻŋ āĻŦāĻžāĻ°ā§āϤāĻž āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻŦ `â˜ī¸ āφāĻĒāύāĻžāϰ āĻ…āĻ°ā§āĻĄāĻžāϰ āĻĻāĻŋāύ!`⧎ āϝ⧇āĻ–āĻžāύ⧇ āϏāĻžāĻŦāĻŽāĻŋāϟ āĻŦā§‹āϤāĻžāĻŽā§‡ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰāĻžāϰ āĻĒāϰ⧇, āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āύ āωāχāĻœā§‡āĻŸā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āϏāĻŽāĻ¸ā§āϤ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āĻĻ⧇āĻ“āϝāĻŧāĻž āχāύāĻĒ⧁āϟ āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āύ āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ⧇ āϏāĻ‚āϰāĻ•ā§āώāĻŖ āĻ•āϰāĻž āĻšāϝāĻŧ (āϝ⧇āĻŽāύ `coffee_bean_val`, `coffee_roast_val` āχāĻ¤ā§āϝāĻžāĻĻāĻŋ) āĻāĻŦāĻ‚ f āĻāϰ āϏāĻžāĻšāĻžāĻ¯ā§āϝ⧇ `st.markdown` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻĒā§āϰāĻŋāĻ¨ā§āϟ āφāωāϟ āĻ•āϰāĻž āĻšāϝāĻŧ f-string āĻĻāĻŋā§Ÿā§‡āĨ¤ + ```python if submitted: st.markdown(f''' @@ -118,8 +119,8 @@ else: ``` -### Second example -Let's now proceed to the second example on using the `st.form` as an object notation. Here, the `st.form` command is assigned to the `form` variable. Subsequently, various Streamlit commands such as `slider` or `form_submit_button` is applied on the `form` variable. +### āĻĻā§āĻŦāĻŋāϤ⧀āϝāĻŧ āωāĻĻāĻžāĻšāϰāĻŖ +āĻāĻ–āύ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟ āύ⧋āĻŸā§‡āĻļāύ āĻšāĻŋāϏ⧇āĻŦ⧇ `st.form` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻžāϰ āĻĻā§āĻŦāĻŋāϤ⧀āϝāĻŧ āωāĻĻāĻžāĻšāϰāϪ⧇ āϝāĻžāĻ“āϝāĻŧāĻž āϝāĻžāĻ•āĨ¤ āĻāĻ–āĻžāύ⧇, `st.form` āĻ•āĻŽāĻžāĻ¨ā§āĻĄāϟāĻŋ `form` āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ⧇ āĻŦāϰāĻžāĻĻā§āĻĻ āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇āĨ¤ āĻĒāϰāĻŦāĻ°ā§āϤ⧀āĻ•āĻžāϞ⧇, āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āύ Streamlit āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āϝ⧇āĻŽāύ `slider` āĻŦāĻž `form_submit_button` `form` āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ⧇ āĻĒā§āϰāϝāĻŧā§‹āĻ— āĻ•āϰāĻž āĻšāϝāĻŧāĨ¤ ```python # Short example of using an object notation st.header('2. Example of object notation') @@ -131,6 +132,6 @@ form.form_submit_button('Submit') st.write('Selected value: ', selected_val) ``` -## Further reading +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž - [`st.form`](https://docs.streamlit.io/library/api-reference/control-flow/st.form) -- [Introducing Submit button and Forms](https://blog.streamlit.io/introducing-submit-button-and-forms/) +- [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻŦāĻžāϟāύ āĻāĻŦāĻ‚ āĻĢāĻ°ā§āĻŽ](https://blog.streamlit.io/introducing-submit-button-and-forms/) From dbc48538eaf6b0b73a140c5de77437ad8ec15090 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 21:19:42 +0100 Subject: [PATCH 23/48] Update Day23.md --- content/Day23.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/Day23.md b/content/Day23.md index 75884af..fdcffdc 100644 --- a/content/Day23.md +++ b/content/Day23.md @@ -1,19 +1,19 @@ # st.experimental_get_query_params -`st.experimental_get_query_params` allows the retrieval of query parameters directly from the URL of the user's browser. +`st.experimental_get_query_params` āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āĻŦā§āϰāĻžāωāϜāĻžāϰ⧇āϰ URL āĻĨ⧇āϕ⧇ āϏāϰāĻžāϏāϰāĻŋ āϕ⧋āϝāĻŧ⧇āϰāĻŋ āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ āĻĒ⧁āύāϰ⧁āĻĻā§āϧāĻžāϰ⧇āϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ -1. The following link loads the demo app with no query parameters (notice the error message): +ā§§. āύāĻŋāĻšā§‡āϰ āϞāĻŋāĻ™ā§āĻ•āϟāĻŋ āϕ⧋āύ āϕ⧋āϝāĻŧ⧇āϰāĻŋ āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ āĻ›āĻžāĻĄāĻŧāĻžāχ āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ āϞ⧋āĻĄ āĻ•āϰ⧇ (āĻ¤ā§āϰ⧁āϟāĻŋāϰ āĻŦāĻžāĻ°ā§āϤāĻžāϟāĻŋ āϞāĻ•ā§āĻˇā§āϝ āĻ•āϰ⧁āύ): [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.experimental_get_query_params/) -2. The following link loads the demo app with query parameters (no error message here): +⧍. āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āϞāĻŋāĻ™ā§āĻ•āϟāĻŋ āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒāϟāĻŋāϕ⧇ āϕ⧋āϝāĻŧ⧇āϰāĻŋ āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ āϏāĻš āϞ⧋āĻĄ āĻ•āϰ⧇ (āĻāĻ–āĻžāύ⧇ āϕ⧋āύāĻ“ āĻ¤ā§āϰ⧁āϟāĻŋ āĻŦāĻžāĻ°ā§āϤāĻž āύ⧇āχ): [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](http://share.streamlit.io/dataprofessor/st.experimental_get_query_params/?firstname=Jack&surname=Beanstalk) -## Code -Here's how to use `st.experimental_get_query_params`: +## āϕ⧋āĻĄ +āĻāĻ–āĻžāύ⧇ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻšāϝāĻŧ `st.experimental_get_query_params`: ```python import streamlit as st @@ -47,24 +47,24 @@ surname = st.experimental_get_query_params()['surname'][0] st.write(f'Hello **{firstname} {surname}**, how are you?') ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -Next, we'll give the app a title: +āĻāϰ āĻĒāϰ⧇, āφāĻŽāϰāĻž āĻ…ā§āϝāĻžāĻĒāϟāĻŋāϕ⧇ āĻāĻ•āϟāĻŋ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻĻ⧇āĻŦ: ```python st.title('st.experimental_get_query_params') ``` -Let's also add an About drop-down box: +āĻāϰ āĻāĻ•āϟāĻŋ āĻĄā§āϰāĻĒ-āĻĄāĻžāωāύ āĻŦāĻ•ā§āϏāĻ“ āϝ⧋āĻ— āĻ•āϰāĻž āϝāĻžāĻ•: ```python with st.expander('About this app'): st.write("`st.experimental_get_query_params` allows the retrieval of query parameters directly from the URL of the user's browser.") ``` -Then, we'll provide instructions to visitors of the app on how they can pass query parameters directly to the URL: +āϤāĻžāϰāĻĒāϰ, āφāĻŽāϰāĻž āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻĻāĻ°ā§āĻļāĻ•āĻĻ⧇āϰ āϏāϰāĻžāϏāϰāĻŋ URL-āĻ āϕ⧋āϝāĻŧ⧇āϰāĻŋ āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰāϗ⧁āϞāĻŋ āϕ⧀āĻ­āĻžāĻŦ⧇ āĻĒāĻžāϏ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇ āϏ⧇ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āύāĻŋāĻ°ā§āĻĻ⧇āĻļāύāĻž āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰāĻŦ: ```python # 1. Instructions st.header('1. Instructions') @@ -77,14 +77,14 @@ such that it becomes ''') ``` -Subsequently, we'll display the contents of the `st.experimental_get_query_params` command. +āĻĒāϰāĻŦāĻ°ā§āϤ⧀āĻ•āĻžāϞ⧇, āφāĻŽāϰāĻž `st.experimental_get_query_params` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻŦāĻŋāώāϝāĻŧāĻŦāĻ¸ā§āϤ⧁ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻŦāĨ¤ ```python # 2. Contents of st.experimental_get_query_params st.header('2. Contents of st.experimental_get_query_params') st.write(st.experimental_get_query_params()) ``` -Finally, we'll select and display selective information from the URL's query parameter: +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž URL āĻāϰ āĻ•ā§āϝ⧋āϝāĻŧāĻžāϰ⧀ āĻĒā§āϝāĻžāϰāĻžāĻŽāĻŋāϟāĻžāϰ āĻĨ⧇āϕ⧇ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ⧀ āϤāĻĨā§āϝ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāĻŦ āĻāĻŦāĻ‚ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻŦ: ```python # 3. Retrieving and displaying information from the URL st.header('3. Retrieving and displaying information from the URL') @@ -95,5 +95,5 @@ surname = st.experimental_get_query_params()['surname'][0] st.write(f'Hello **{firstname} {surname}**, how are you?') ``` -## Further reading +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž - [`st.experimental_get_query_params`](https://docs.streamlit.io/library/api-reference/utilities/st.experimental_get_query_params) From beb6fd30853b71b51c50c4710c0261100917a10a Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 21:33:17 +0100 Subject: [PATCH 24/48] Update Day24.md --- content/Day24.md | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/content/Day24.md b/content/Day24.md index fc12a46..e29bac1 100644 --- a/content/Day24.md +++ b/content/Day24.md @@ -1,32 +1,32 @@ # st.cache -`st.cache` allows you to optimize the performance of your Streamlit app. +`st.cache` āφāĻĒāύāĻžāϕ⧇ āφāĻĒāύāĻžāϰ Streamlit āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻ•āĻ°ā§āĻŽāĻ•ā§āώāĻŽāϤāĻž āĻ…āĻĒā§āϟāĻŋāĻŽāĻžāχāϜ āĻ•āϰāϤ⧇ āĻĻ⧇āϝāĻŧāĨ¤ -Streamlit provides a caching mechanism that allows your app to stay performant even when loading data from the web, manipulating large datasets, or performing expensive computations. This is done with the `@st.cache` decorator. +Streamlit āĻāĻ•āϟāĻŋ āĻ•ā§āϝāĻžāĻļāĻŋāĻ‚ āĻĒā§āϰāĻ•ā§āϰāĻŋāϝāĻŧāĻž āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇ āϝāĻž āĻ“āϝāĻŧ⧇āĻŦ āĻĨ⧇āϕ⧇ āĻĄā§‡āϟāĻž āϞ⧋āĻĄ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ, āĻŦāĻĄāĻŧ āĻĄā§‡āϟāĻžāϏ⧇āϟāϗ⧁āϞāĻŋāϕ⧇ āĻŽā§āϝāĻžāύāĻŋāĻĒ⧁āϞ⧇āϟ āĻ•āϰāĻž āĻŦāĻž āĻŦā§āϝāϝāĻŧāĻŦāĻšā§āϞ āĻ—āĻŖāύāĻž āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧāĻ“ āφāĻĒāύāĻžāϰ āĻ…ā§āϝāĻžāĻĒāϟāĻŋāϕ⧇ āĻĒāĻžāϰāĻĢāϰāĻŽā§āϝāĻžāĻ¨ā§āϟ āĻĨāĻžāĻ•āϤ⧇ āĻĻ⧇āϝāĻŧ⧎ āĻāϟāĻŋ `@st.cache` āĻĄā§‡āϕ⧋āϰ⧇āϟāϰ āĻĻāĻŋāϝāĻŧ⧇ āĻ•āϰāĻž āĻšāϝāĻŧāĨ¤ -When you mark a function with the @st.cache decorator, it tells Streamlit that whenever the function is called it needs to check a few things: +āφāĻĒāύāĻŋ āϝāĻ–āύ `@st.cache` āĻĄā§‡āϕ⧋āϰ⧇āϟāϰ āĻĻāĻŋāϝāĻŧ⧇ āĻāĻ•āϟāĻŋ āĻĢāĻžāĻ‚āĻļāύ āϚāĻŋāĻšā§āύāĻŋāϤ āĻ•āϰ⧇āύ, āϤāĻ–āύ āĻāϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟāϕ⧇ āĻŦāϞ⧇ āϝ⧇ āϝāĻ–āύāχ āĻĢāĻžāĻ‚āĻļāύāϟāĻŋ āĻŦāϞāĻž āĻšāϝāĻŧ āϤāĻ–āύ āĻāϟāĻŋ āĻ•āϝāĻŧ⧇āĻ•āϟāĻŋ āϜāĻŋāύāĻŋāϏ āĻĒāϰ⧀āĻ•ā§āώāĻž āĻ•āϰāϤ⧇ āĻšāĻŦ⧇: -1. The input parameters that you called the function with -2. The value of any external variable used in the function -3. The body of the function -4. The body of any function used inside the cached function +ā§§. āχāύāĻĒ⧁āϟ āĻĒāϰāĻžāĻŽāĻŋāϤāĻŋ āϝāĻž āĻĻāĻŋāϝāĻŧ⧇ āφāĻĒāύāĻŋ āĻĢāĻžāĻ‚āĻļāύ āĻ•āϞ āĻ•āϰ⧇āϛ⧇āύ +⧍. āĻĢāĻžāĻ‚āĻļāύ⧇ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āϝ⧇āϕ⧋āύ⧋ āĻŦāĻžāĻšā§āϝāĻŋāĻ• āϚāϞāϕ⧇āϰ āĻŽāĻžāύ +ā§Š. āĻĢāĻžāĻ‚āĻļāύ⧇āϰ āĻŽā§‚āϞ āĻ…āĻ‚āĻļ +ā§Ē. āĻ•ā§āϝāĻžāĻļāĻĄ āĻĢāĻžāĻ‚āĻļāύ⧇āϰ āĻ­āĻŋāϤāϰ⧇ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āϝ⧇āϕ⧋āύ⧋ āĻĢāĻžāĻ‚āĻļāύ⧇āϰ āĻŦāĻĄāĻŋ -If this is the first time Streamlit has seen these four components with these exact values and in this exact combination and order, it runs the function and stores the result in a local cache. Then, next time the cached function is called, if none of these components changed, Streamlit will just skip executing the function altogether and, instead, return the output previously stored in the cache. +āϝāĻĻāĻŋ āĻāχ āĻĒā§āϰāĻĨāĻŽāĻŦāĻžāϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāχ āϚāĻžāϰāϟāĻŋ āωāĻĒāĻžāĻĻāĻžāύāϕ⧇ āĻāχ āϏāĻ āĻŋāĻ• āĻŽāĻžāύāϗ⧁āϞāĻŋāϰ āϏāĻžāĻĨ⧇ āĻĻ⧇āϖ⧇ āĻĨāĻžāϕ⧇ āĻāĻŦāĻ‚ āĻāχ āϏāĻ āĻŋāĻ• āϏāĻ‚āĻŽāĻŋāĻļā§āϰāĻŖ āĻāĻŦāĻ‚ āĻ•ā§āϰāĻŽā§‡, āĻāϟāĻŋ āĻĢāĻžāĻ‚āĻļāύāϟāĻŋ āϚāĻžāϞāĻžāϝāĻŧ āĻāĻŦāĻ‚ āĻĢāϞāĻžāĻĢāϞāϟāĻŋāϕ⧇ āĻāĻ•āϟāĻŋ āĻ¸ā§āĻĨāĻžāύ⧀āϝāĻŧ āĻ•ā§āϝāĻžāĻļ⧇ āϏāĻ‚āϰāĻ•ā§āώāĻŖ āĻ•āϰ⧇āĨ¤ āϤāĻžāϰāĻĒāϰ⧇, āĻĒāϰ⧇āϰ āĻŦāĻžāϰ āĻ•ā§āϝāĻžāĻļ⧇ āĻ•āϰāĻž āĻĢāĻžāĻ‚āĻļāύāϟāĻŋ āĻ•āϞ āĻ•āϰāĻž āĻšāϞ⧇, āϝāĻĻāĻŋ āĻāχ āωāĻĒāĻžāĻĻāĻžāύāϗ⧁āϞāĻŋāϰ āϕ⧋āύ⧋āϟāĻŋāχ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāĻŋāϤ āύāĻž āĻšāϝāĻŧ, āϤāĻŦ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ āĻĢāĻžāĻ‚āĻļāύāϟāĻŋ āϏāĻŽā§āĻĒā§‚āĻ°ā§āĻŖāϰ⧂āĻĒ⧇ āϚāĻžāϞāĻžāύ⧋ āĻāĻĄāĻŧāĻŋāϝāĻŧ⧇ āϝāĻžāĻŦ⧇ āĻāĻŦāĻ‚ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤ⧇, āĻ•ā§āϝāĻžāĻļ⧇ āĻĒā§‚āĻ°ā§āĻŦ⧇ āϏāĻ‚āϰāĻ•ā§āώāĻŋāϤ āφāωāϟāĻĒ⧁āϟāϟāĻŋ āĻĢāĻŋāϰāĻŋāϝāĻŧ⧇ āĻĻ⧇āĻŦ⧇āĨ¤ -The way Streamlit keeps track of changes in these components is through hashing. Think of the cache as an in-memory key-value store, where the key is a hash of all of the above and the value is the actual output object passed by reference. +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āϝ⧇āĻ­āĻžāĻŦ⧇ āĻāχ āωāĻĒāĻžāĻĻāĻžāύāϗ⧁āϞāĻŋāϰ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύāϗ⧁āϞāĻŋ āĻŸā§āĻ°ā§āϝāĻžāĻ• āϰāĻžāϖ⧇ āϤāĻž āĻšāϞ āĻšā§āϝāĻžāĻļāĻŋāĻ‚āϝāĻŧ⧇āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ā§ˇ āĻ•ā§āϝāĻžāĻļ⧇āϟāĻŋāϕ⧇ āĻāĻ•āϟāĻŋ āχāύ-āĻŽā§‡āĻŽāϰāĻŋ āϕ⧀-āĻ­ā§āϝāĻžāϞ⧁ āĻ¸ā§āĻŸā§‹āϰ āĻšāĻŋāϏāĻžāĻŦ⧇ āĻ­āĻžāĻŦ⧁āύ, āϝ⧇āĻ–āĻžāύ⧇ āϕ⧀āϟāĻŋ āωāĻĒāϰ⧇āϰ āϏāĻŽāĻ¸ā§āϤāϟāĻŋāϰ āĻāĻ•āϟāĻŋ āĻšā§āϝāĻžāĻļ āĻāĻŦāĻ‚ āĻŽāĻžāύāϟāĻŋ āϰ⧇āĻĢāĻžāϰ⧇āĻ¨ā§āϏ āĻĻā§āĻŦāĻžāϰāĻž āĻĒāĻžāϏ āĻ•āϰāĻž āĻĒā§āϰāĻ•ā§ƒāϤ āφāωāϟāĻĒ⧁āϟ āĻ…āĻŦāĻœā§‡āĻ•ā§āϟāĨ¤ -Finally, `@st.cache` supports arguments to configure the cache's behavior. You can find more information on those in our API reference. +āĻ…āĻŦāĻļ⧇āώ⧇, `@st.cache` āĻ•ā§āϝāĻžāĻļ⧇āϰ āφāϚāϰāĻŖ āĻ•āύāĻĢāĻŋāĻ—āĻžāϰ āĻ•āϰāϤ⧇ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟ āϏāĻŽāĻ°ā§āĻĨāύ āĻ•āϰ⧇āĨ¤ āφāĻĒāύāĻŋ āφāĻŽāĻžāĻĻ⧇āϰ API āϰ⧇āĻĢāĻžāϰ⧇āĻ¨ā§āϏ⧇ āϏ⧇āϗ⧁āϞāĻŋ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āφāϰāĻ“ āϤāĻĨā§āϝ āĻĒ⧇āϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ -## How to use? +## āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇? -You can simply add `st.cache` decorator on the preceding line of a custom function that you define in your Streamlit app. See the example below. +āφāĻĒāύāĻŋ āφāĻĒāύāĻžāϰ Streamlit āĻ…ā§āϝāĻžāĻĒ⧇ āϏāĻ‚āĻœā§āĻžāĻžāϝāĻŧāĻŋāϤ āĻāĻ•āϟāĻŋ āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻĢāĻžāĻ‚āĻļāύ⧇āϰ āĻĒā§‚āĻ°ā§āĻŦāĻŦāĻ°ā§āϤ⧀ āϞāĻžāχāύ⧇ āϏāĻšāϜāĻ­āĻžāĻŦ⧇ `st.cache` āĻĄā§‡āϕ⧋āϰ⧇āϟāϰ āϝ⧋āĻ— āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ āύ⧀āĻšā§‡āϰ āωāĻĻāĻžāĻšāϰāĻŖ āĻĻ⧇āϖ⧁āύāĨ¤ ## Demo app [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.cache/) -## Code -Here's how to use `st.cache`: +## āϕ⧋āĻĄ +āĻāĻ–āĻžāύ⧇ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ `st.cache` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ: ```python import streamlit as st import numpy as np @@ -68,8 +68,8 @@ b1 = time() st.info(b1-b0) ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` as well as other libraries used in the app like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāύāĻ‚ āĻ…āĻ¨ā§āύāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st import numpy as np @@ -77,12 +77,12 @@ import pandas as pd from time import time ``` -This is followed by creating a title text for the app: +āĻāϟāĻŋ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻĒāĻžāĻ ā§āϝ āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āĻ…āύ⧁āϏāϰāĻŖ āĻ•āϰāĻž āĻšāϝāĻŧ: ```python st.title('Streamlit Cache') ``` -Next, we'll define 2 custom functions for generating a large DataFrame where the first one makes use of the `st.cache` decorator while the second does not: +āĻāϰ āĻĒāϰ⧇, āφāĻŽāϰāĻž āĻāĻ•āϟāĻŋ āĻŦāĻĄāĻŧ āĻĄā§‡āϟāĻžāĻĢā§āϰ⧇āĻŽ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ 2āϟāĻŋ āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻĢāĻžāĻ‚āĻļāύ āϏāĻ‚āĻœā§āĻžāĻžāϝāĻŧāĻŋāϤ āĻ•āϰāĻŦ āϝ⧇āĻ–āĻžāύ⧇ āĻĒā§āϰāĻĨāĻŽāϟāĻŋ `st.cache` āĻĄā§‡āϕ⧋āϰ⧇āϟāϰ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āϝāĻ–āύ āĻĻā§āĻŦāĻŋāϤ⧀āϝāĻŧāϟāĻŋ āĻ•āϰ⧇ āύāĻž: ```python @st.cache(suppress_st_warning=True) def load_data_a(): @@ -100,7 +100,7 @@ def load_data_b(): return df ``` -Finally, we run the custom function while also timing the run time using the `time()` command. +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻĢāĻžāĻ‚āĻļāύ āϚāĻžāϞāĻžāχ āϝāĻ–āύ `time()` āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āϰāĻžāύ āϟāĻžāχāĻŽ āϟāĻžāχāĻŽāĻŋāĻ‚ āĻ•āϰāĻŋāĨ¤ ```python # Using cache a0 = time() @@ -123,11 +123,11 @@ b1 = time() st.info(b1-b0) ``` -Notice how the first run may provide roughly similar run time. Reload the app and notice how the run time changes when using the `st.cache` decorator. Did you observe any speed increase? +āϞāĻ•ā§āĻˇā§āϝ āĻ•āϰ⧁āύ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻĒā§āϰāĻĨāĻŽ āϰāĻžāύ āĻŽā§‹āϟāĻžāĻŽā§āϟāĻŋ āĻ…āύ⧁āϰ⧂āĻĒ āϰāĻžāύ āϟāĻžāχāĻŽ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āĻĒ⧁āύāϰāĻžāϝāĻŧ āϞ⧋āĻĄ āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ `st.cache` āĻĄā§‡āϕ⧋āϰ⧇āϟāϰ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ āϕ⧀āĻ­āĻžāĻŦ⧇ āϰāĻžāύ āϟāĻžāχāĻŽ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāĻŋāϤ āĻšāϝāĻŧ āϤāĻž āϞāĻ•ā§āĻˇā§āϝ āĻ•āϰ⧁āύāĨ¤ āφāĻĒāύāĻŋ āĻ•āĻŋ āϕ⧋āύ āĻ—āϤāĻŋ āĻŦ⧃āĻĻā§āϧāĻŋ āĻĒāĻ°ā§āϝāĻŦ⧇āĻ•ā§āώāĻŖ āĻ•āϰ⧇āϛ⧇āύ? ## Further reading -- [`st.cache` API Documentation](https://docs.streamlit.io/library/api-reference/performance/st.cache) -- [Optimize performance with `st.cache`](https://docs.streamlit.io/library/advanced-features/caching) -- [Experimental cache primitives](https://docs.streamlit.io/library/advanced-features/experimental-cache-primitives) +- [`st.cache` API āĻĄāϕ⧁āĻŽā§‡āĻ¨ā§āĻŸā§‡āĻļāύ](https://docs.streamlit.io/library/api-reference/performance/st.cache) +- [āϏāĻ™ā§āϗ⧇ āĻ•āĻ°ā§āĻŽāĻ•ā§āώāĻŽāϤāĻž āĻ…āĻĒā§āϟāĻŋāĻŽāĻžāχāϜ āĻ•āϰ⧁āύ `st.cache`āĻĻāĻŋā§Ÿā§‡](https://docs.streamlit.io/library/advanced-features/caching) +- [āĻĒāϰ⧀āĻ•ā§āώāĻžāĻŽā§‚āϞāĻ• āĻ•ā§āϝāĻžāĻļ⧇](https://docs.streamlit.io/library/advanced-features/experimental-cache-primitives) - [`st.experimental_memo`](https://docs.streamlit.io/library/api-reference/performance/st.experimental_memo) - [`st.experimental_singleton`](https://docs.streamlit.io/library/api-reference/performance/st.experimental_singleton) From bf7035e433b73a09f322565e04d4c4a4d3ffc6ed Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 21:44:45 +0100 Subject: [PATCH 25/48] Update Day25.md --- content/Day25.md | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/content/Day25.md b/content/Day25.md index 26efc1c..fbcb369 100644 --- a/content/Day25.md +++ b/content/Day25.md @@ -1,19 +1,19 @@ # st.session_state -We define access to a Streamlit app in a browser tab as a session. For each browser tab that connects to the Streamlit server, a new session is created. Streamlit reruns your script from top to bottom every time you interact with your app. Each reruns takes place in a blank slate: no variables are shared between runs. +āφāĻŽāϰāĻž āĻāĻ•āϟāĻŋ āĻ…āϧāĻŋāĻŦ⧇āĻļāύ āĻšāĻŋāϏāĻžāĻŦ⧇ āĻāĻ•āϟāĻŋ āĻŦā§āϰāĻžāωāϜāĻžāϰ āĻŸā§āϝāĻžāĻŦ⧇ āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒā§āϞāĻŋāϕ⧇āĻļāύ āĻ…ā§āϝāĻžāĻ•ā§āϏ⧇āϏ āĻ•āϰāĻŦā§‹āĨ¤ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āϏāĻžāĻ°ā§āĻ­āĻžāϰ⧇āϰ āϏāĻžāĻĨ⧇ āϏāĻ‚āϝ⧋āĻ—āĻ•āĻžāϰ⧀ āĻĒā§āϰāϤāĻŋāϟāĻŋ āĻŦā§āϰāĻžāωāϜāĻžāϰ āĻŸā§āϝāĻžāĻŦ⧇āϰ āϜāĻ¨ā§āϝ, āĻāĻ•āϟāĻŋ āύāϤ⧁āύ āϏ⧇āĻļāύ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āĻšāϝāĻŧāĨ¤ āφāĻĒāύāĻŋ āϝāĻ–āύāχ āφāĻĒāύāĻžāϰ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϏāĻžāĻĨ⧇ āχāĻ¨ā§āϟāĻžāϰāĻ…ā§āϝāĻžāĻ•ā§āϟ āĻ•āϰ⧇āύ āϤāĻ–āύāχ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āφāĻĒāύāĻžāϰ āĻ¸ā§āĻ•ā§āϰāĻŋāĻĒā§āϟ āωāĻĒāϰ⧇ āĻĨ⧇āϕ⧇ āύ⧀āĻšā§‡ āĻĒ⧁āύāϰāĻžāϝāĻŧ āϚāĻžāϞāĻžāϝāĻŧāĨ¤ āĻĒā§āϰāϤāĻŋāϟāĻŋ āĻĒ⧁āύāσāϰāĻžāύ āĻāĻ•āϟāĻŋ āĻĢāĻžāρāĻ•āĻž āĻ¸ā§āϞ⧇āĻŸā§‡ āϏāĻžā§āϚāĻžāϞāĻŋāϤ āĻšāϝāĻŧ: āϰāĻžāύ⧇āϰ āĻŽāĻ§ā§āϝ⧇ āϕ⧋āύ āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ āĻ­āĻžāĻ— āĻ•āϰāĻž āĻšāϝāĻŧ āύāĻžāĨ¤ -Session State is a way to share variables between reruns, for each user session. In addition to the ability to store and persist state, Streamlit also exposes the ability to manipulate state using Callbacks. +āϏ⧇āĻļāύ āĻ¸ā§āĻŸā§‡āϟ āĻšāϞ āĻĒā§āϰāϤāĻŋāϟāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āϏ⧇āĻļāύ⧇āϰ āϜāĻ¨ā§āϝ āϰāĻŋāϰāĻžāύāϗ⧁āϞāĻŋāϰ āĻŽāĻ§ā§āϝ⧇ āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ āĻļ⧇āϝāĻŧāĻžāϰ āĻ•āϰāĻžāϰ āĻāĻ•āϟāĻŋ āωāĻĒāĻžāϝāĻŧāĨ¤ āĻ¸ā§āĻŸā§‡āϟ āϏāĻžā§āϚāϝāĻŧ āĻāĻŦāĻ‚ āĻ¸ā§āĻĨāĻžāϝāĻŧā§€ āĻ•āϰāĻžāϰ āĻ•ā§āώāĻŽāϤāĻž āĻ›āĻžāĻĄāĻŧāĻžāĻ“, āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āϞāĻŦā§āϝāĻžāĻ• āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻ¸ā§āĻŸā§‡āϟ āĻŽā§āϝāĻžāύāĻŋāĻĒ⧁āϞ⧇āϟ āĻ•āϰāĻžāϰ āĻ•ā§āώāĻŽāϤāĻžāĻ“ āĻĒā§āϰāĻ•āĻžāĻļ āĻ•āϰ⧇āĨ¤ -In this tutorial, we will illustrate the usage of Session State and Callbacks as we build a weight conversion app. +āĻāχ āϟāĻŋāωāĻŸā§‹āϰāĻŋāϝāĻŧāĻžāϞ⧇, āφāĻŽāϰāĻž āĻāĻ•āϟāĻŋ āĻ“āϜāύ āϰ⧂āĻĒāĻžāĻ¨ā§āϤāϰ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ āϏ⧇āĻļāύ āĻ¸ā§āĻŸā§‡āϟ āĻāĻŦāĻ‚ āĻ•āϞāĻŦā§āϝāĻžāϕ⧇āϰ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž āĻ•āϰāĻŦāĨ¤ -`st.session_state` allows the implementation of session state in a Streamlit app. +`st.session_state` āĻāĻ•āϟāĻŋ Streamlit āĻ…ā§āϝāĻžāĻĒ⧇ āϏ⧇āĻļāύ āĻ¸ā§āĻŸā§‡āϟ āĻŦāĻžāĻ¸ā§āϤāĻŦāĻžāϝāĻŧāύ⧇āϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.session_state/) -## Code -Here's how to use `st.session_state`: +## āϕ⧋āĻĄ +āĻāχāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύ `st.session_state`: ```python import streamlit as st @@ -35,18 +35,18 @@ st.header('Output') st.write("st.session_state object:", st.session_state) ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -Firstly, we'll start by creating the title of the app: +āĻĒā§āϰāĻĨāĻŽāϤ, āφāĻŽāϰāĻž āĻ…ā§āϝāĻžāĻĒāϟāĻŋāϰ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āĻļ⧁āϰ⧁ āĻ•āϰāĻŦ: ```python st.title('st.session_state') ``` -Next, we define custom functions for the weight conversion from lbs to kg and vice versa: +āĻāϰ āĻĒāϰ⧇, āφāĻŽāϰāĻž āĻĒāĻžāωāĻ¨ā§āĻĄ āĻĨ⧇āϕ⧇ āϕ⧇āϜāĻŋ āĻ“āϜāύ āϰ⧂āĻĒāĻžāĻ¨ā§āϤāϰ⧇āϰ āĻŦāĻž āϤāĻžāϰ āĻŦāĻŋāĻĒāϰ⧀āϤ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻĢāĻžāĻ‚āĻļāύ āϏāĻ‚āĻœā§āĻžāĻžāϝāĻŧāĻŋāϤ āĻ•āϰāĻŋ: ```python def lbs_to_kg(): st.session_state.kg = st.session_state.lbs/2.2046 @@ -54,7 +54,7 @@ def kg_to_lbs(): st.session_state.lbs = st.session_state.kg*2.2046 ``` -Here, we use `st.number_input` to accept numerical inputs of the weight values: +āĻāĻ–āĻžāύ⧇, āφāĻŽāϰāĻž āĻ“āϜāύ āĻŽāĻžāύ⧇āϰ āϏāĻ‚āĻ–ā§āϝāĻžāϏ⧂āϚāĻ• āχāύāĻĒ⧁āϟ āĻ—ā§āϰāĻšāĻŖ āĻ•āϰāϤ⧇ `st.number_input` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŋ: ```python st.header('Input') col1, spacer, col2 = st.columns([2,1,2]) @@ -63,16 +63,18 @@ with col1: with col2: kilogram = st.number_input("Kilograms:", key = "kg", on_change = kg_to_lbs) ``` -The above 2 custom functions will be called upon as soon as a numerical value is entered into the number box created using the `st.number_input` command. Notice how the `on_change` option specifies the 2 custom functions `lbs_to_kg` and `kg_to_lbs`). -In a nutshell, upon entering a number into the `st.number_input` box the number is converted by these custom functions. +āωāĻĒāϰ⧇āϰ 2āϟāĻŋ āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻĢāĻžāĻ‚āĻļāύāϗ⧁āϞāĻŋāϕ⧇ 'st.number_input` āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āύāĻŽā§āĻŦāϰ āĻŦāĻžāĻ•ā§āϏ⧇ āĻāĻ•āϟāĻŋ āϏāĻ‚āĻ–ā§āϝāĻžāϏ⧂āϚāĻ• āĻŽāĻžāύ āĻĒā§āϰāĻŦ⧇āĻļ āĻ•āϰāĻžāύ⧋ āĻšāĻŦ⧇āĨ¤ āϞāĻ•ā§āĻˇā§āϝ āĻ•āϰ⧁āύ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ `on_change` āĻŦāĻŋāĻ•āĻ˛ā§āĻĒāϟāĻŋ 2āϟāĻŋ āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻĢāĻžāĻ‚āĻļāύ `lbs_to_kg` āĻāĻŦāĻ‚ `kg_to_lbs` āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻ•āϰ⧇āĨ¤ -Finally, the weight values in `kg` and `lbs` units as stored in the session state as `st.session_state.kg` and `st.session_state.lbs` will be printed out via `st.write`: +āϏāĻ‚āĻ•ā§āώ⧇āĻĒ⧇, `st.number_input` āĻŦāĻžāĻ•ā§āϏ⧇ āĻāĻ•āϟāĻŋ āϏāĻ‚āĻ–ā§āϝāĻž āĻĒā§āϰāĻŦ⧇āĻļ āĻ•āϰāĻžāϞ⧇ āϏāĻ‚āĻ–ā§āϝāĻžāϟāĻŋ āĻāχ āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻĢāĻžāĻ‚āĻļāύ āĻĻā§āĻŦāĻžāϰāĻž āϰ⧂āĻĒāĻžāĻ¨ā§āϤāϰāĻŋāϤ āĻšāϝāĻŧāĨ¤ + +āĻĒāϰāĻŋāĻļ⧇āώ⧇, `kg` āĻāĻŦāĻ‚ `lbs` āχāωāύāĻŋāĻŸā§‡āϰ āĻ“āϜāύ⧇āϰ āĻŽāĻžāύāϗ⧁āϞāĻŋ āϏ⧇āĻļāύ āĻ¸ā§āĻŸā§‡āĻŸā§‡ `st.session_state.kg` āĻāĻŦāĻ‚ `st.session_state.lbs` āĻšāĻŋāϏāĻžāĻŦ⧇ āϏāĻ‚āϰāĻ•ā§āώāĻŋāϤ āĻāϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻĒā§āϰāĻŋāĻ¨ā§āϟ āĻ•āϰāĻž āĻšāĻŦ⧇ +`st.write`: ```python st.header('Output') st.write("st.session_state object:", st.session_state) ``` -## Further reading -- [Session State](https://docs.streamlit.io/library/api-reference/session-state) -- [Add statefulness to apps](https://docs.streamlit.io/library/advanced-features/session-state) +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž +- [āϏ⧇āĻļāύ āĻ¸ā§āĻŸā§‡āϟ](https://docs.streamlit.io/library/api-reference/session-state) +- [āĻ…ā§āϝāĻžāĻĒā§āϞāĻŋāϕ⧇āĻļāĻžāύāϗ⧁āϞāĻŋāϤ⧇ āĻ¸ā§āĻŸā§‡āϟ āϝ⧁āĻ•ā§āϤ āĻ•āϰ⧁āύ](https://docs.streamlit.io/library/advanced-features/session-state) From 1157495b271c4733a3075aa1ba3bbf37bb80efa9 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 21:49:30 +0100 Subject: [PATCH 26/48] Update Day14.md --- content/Day14.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/Day14.md b/content/Day14.md index 93b9b37..fcf6f27 100644 --- a/content/Day14.md +++ b/content/Day14.md @@ -41,7 +41,7 @@ st_profile_report(pr) ``` ## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž -āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāύāĻ‚ āĻ…āĻ¨ā§āύāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāĻŦāĻ‚ āĻ…āĻ¨ā§āύāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st import pandas as pd From 9fed5d839602bd9181373668b346a473bf315928 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 21:52:37 +0100 Subject: [PATCH 27/48] Update Day26.md --- content/Day26.md | 36 +++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/content/Day26.md b/content/Day26.md index 46deee9..582d980 100644 --- a/content/Day26.md +++ b/content/Day26.md @@ -1,15 +1,15 @@ -# How to use API by building the Bored API app +# āĻŦā§‹āĻ°ā§āĻĄ āĻāĻĒāĻŋāφāχ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āϕ⧀āĻ­āĻžāĻŦ⧇ API āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ -The Bored API app suggests fun things for you to do when you are bored! +āĻŦā§‹āĻ°ā§āĻĄ API āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āφāĻĒāύāĻžāϰ āϜāĻ¨ā§āϝ āĻŽāϜāĻžāĻĻāĻžāϰ āϜāĻŋāύāĻŋāϏāϗ⧁āϞāĻŋ āĻĒā§āϰāĻ¸ā§āϤāĻžāĻŦ āĻ•āϰ⧇ āϝāĻ–āύ āφāĻĒāύāĻŋ āĻŦāĻŋāϰāĻ•ā§āϤ āĻšāύ! -Technically, it also demonstrates the usage of APIs from within a Streamlit app. +āĻŸā§‡āĻ•āύāĻŋāĻ•ā§āϝāĻžāϞāĻŋ, āĻāϟāĻŋ āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻŽāĻ§ā§āϝ⧇ āĻĨ⧇āϕ⧇ API-āĻāϰ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ“ āĻĻ⧇āĻ–āĻžāϝāĻŧāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ -[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/bored-api-app/) +[![āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/bored-api-app/) -## Code -Here's how to implement the Bored-API app: +## āϕ⧋āĻĄ +āĻŦā§‹āĻ°ā§-API āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āϕ⧀āĻ­āĻžāĻŦ⧇ āĻŦāĻžāĻ¸ā§āϤāĻŦāĻžāϝāĻŧāύ āĻ•āϰāĻŦ⧇āύ āϤāĻž āĻāĻ–āĻžāύ⧇: ```python import streamlit as st import requests @@ -43,32 +43,34 @@ with col3: st.metric(label='Price', value=suggested_activity['price'], delta='') ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` and the `requests` library like so: + + +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāĻŦāĻ‚ `requests` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st import requests ``` -The app's title is displayed via `st.title`: +āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻļāĻŋāϰ⧋āύāĻžāĻŽāϟāĻŋ `st.title` āĻāϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻĒā§āϰāĻĻāĻ°ā§āĻļāĻŋāϤ āĻšāϝāĻŧ: ```python st.title('🏀 Bored API app') ``` -Next, we'll accept user input on the **activity type** by means of the `st.selectbox` command: +āĻāϰāĻĒāϰ, āφāĻŽāϰāĻž `st.selectbox` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ **āĻ…ā§āϝāĻžāĻ•ā§āϟāĻŋāĻ­āĻŋāϟāĻŋ āϟāĻžāχāĻĒ**-āĻ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āχāύāĻĒ⧁āϟ āĻ—ā§āϰāĻšāĻŖ āĻ•āϰāĻŦ: ```python st.sidebar.header('Input') selected_type = st.sidebar.selectbox('Select an activity type', ["education", "recreational", "social", "diy", "charity", "cooking", "relaxation", "music", "busywork"]) ``` -The selected activity mentioned above is then appended to the URL via an f-string, which is then used to retrieve the resulting JSON data: +āωāĻĒāϰ⧇ āωāĻ˛ā§āϞāĻŋāĻ–āĻŋāϤ āύāĻŋāĻ°ā§āĻŦāĻžāϚāĻŋāϤ āĻ•āĻžāĻ°ā§āϝāĻ•āϞāĻžāĻĒ āϤāĻžāϰāĻĒāϰ āĻāĻ•āϟāĻŋ f-āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻāϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ URL āĻ āϏāĻ‚āϝ⧁āĻ•ā§āϤ āĻ•āϰāĻž āĻšāϝāĻŧ, āϝāĻž āϤāĻžāϰāĻĒāϰ āĻĢāϞāĻžāĻĢāϞ JSON āĻĄā§‡āϟāĻž āĻĒ⧁āύāϰ⧁āĻĻā§āϧāĻžāϰ āĻ•āϰāϤ⧇ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšāϝāĻŧ: ```python suggested_activity_url = f'http://www.boredapi.com/api/activity?type={selected_type}' json_data = requests.get(suggested_activity_url) suggested_activity = json_data.json() ``` -Here, we'll display information about the app and the JSON data via the `st.expander` command. +āĻāĻ–āĻžāύ⧇, āφāĻŽāϰāĻž `st.expander` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻ…ā§āϝāĻžāĻĒ āĻāĻŦāĻ‚ JSON āĻĄā§‡āϟāĻž āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āϤāĻĨā§āϝ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻŦāĨ¤ ```python c1, c2 = st.columns(2) with c1: @@ -79,13 +81,13 @@ with c2: st.write(suggested_activity) ``` -We'll then display a suggested activity like so: +āϤāĻžāϰāĻĒāϰ⧇ āφāĻŽāϰāĻž āĻāĻ•āϟāĻŋ āĻĒā§āϰāĻ¸ā§āϤāĻžāĻŦāĻŋāϤ āĻ•āĻžāĻ°ā§āϝāĻ•āϞāĻžāĻĒ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻŦ āϝ⧇āĻŽāύ: ```python st.header('Suggested activity') st.info(suggested_activity['activity']) ``` -Finally, we'll also display the accompanying information of the suggested activity such as the `Number of Participants`, `Type of Activity` and `Price`. +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻŽāϰāĻž āĻĒā§āϰāĻ¸ā§āϤāĻžāĻŦāĻŋāϤ āĻ•ā§āϰāĻŋāϝāĻŧāĻžāĻ•āϞāĻžāĻĒ⧇āϰ āϏāĻšāĻ—āĻžāĻŽā§€ āϤāĻĨā§āϝ āϝ⧇āĻŽāύ `āĻ…āĻ‚āĻļāĻ—ā§āϰāĻšāĻŖāĻ•āĻžāϰ⧀āĻĻ⧇āϰ āϏāĻ‚āĻ–ā§āϝāĻž`, `āĻ•ā§āϰāĻŋāϝāĻŧāĻžāĻ•āϞāĻžāĻĒ⧇āϰ āĻĒā§āϰāĻ•āĻžāϰ` āĻāĻŦāĻ‚ `āĻŽā§‚āĻ˛ā§āϝ` āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻŦāĨ¤ ```python col1, col2, col3 = st.columns(3) with col1: @@ -96,5 +98,5 @@ with col3: st.metric(label='Price', value=suggested_activity['price'], delta='') ``` -## Further reading -- [Bored API](http://www.boredapi.com/) +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž +- [āĻŦā§‹āĻ°ā§āĻĄ API](http://www.boredapi.com/) From 28faab86afe5e65b41c224594590665a332d0476 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 21:57:11 +0100 Subject: [PATCH 28/48] Update Day27.md --- content/Day27.md | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/Day27.md b/content/Day27.md index f9b791e..8fef128 100644 --- a/content/Day27.md +++ b/content/Day27.md @@ -1,38 +1,38 @@ -# Build a draggable and resizable dashboard with Streamlit Elements +# āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āĻŸā§‡āϰ āϏāĻžāĻĨ⧇ āĻāĻ•āϟāĻŋ āĻŸā§‡āύ⧇ āφāύāϤ⧇ āϝ⧋āĻ—ā§āϝ āĻāĻŦāĻ‚ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύāϝ⧋āĻ—ā§āϝ āĻĄā§āϝāĻžāĻļāĻŦā§‹āĻ°ā§āĻĄ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ -Streamlit Elements is a third-party component made by [okld](https://github.com/okld) that gives you the tools to compose beautiful applications and dashboards with Material UI widgets, Monaco editor (Visual Studio Code), Nivo charts, and more. +Streamlit Elements āĻšāϞ [okld](https://github.com/okld) āĻĻā§āĻŦāĻžāϰāĻž āϤ⧈āϰāĻŋ āĻāĻ•āϟāĻŋ āϤ⧃āϤ⧀āϝāĻŧ-āĻĒāĻ•ā§āώ⧇āϰ āωāĻĒāĻžāĻĻāĻžāύ āϝāĻž āφāĻĒāύāĻžāϕ⧇ āωāĻĒāĻžāĻĻāĻžāύ UI āωāχāĻœā§‡āϟ, āĻŽā§‹āύāĻžāϕ⧋ āϏāĻŽā§āĻĒāĻžāĻĻāĻ• (āĻ­āĻŋāĻœā§āϝ⧁āϝāĻŧāĻžāϞ āĻ¸ā§āϟ⧁āĻĄāĻŋāĻ“ āϕ⧋āĻĄ), āύāĻŋāĻ­ā§‹ āϚāĻžāĻ°ā§āϟ āϏāĻš āϏ⧁āĻ¨ā§āĻĻāϰ āĻ…ā§āϝāĻžāĻĒā§āϞāĻŋāϕ⧇āĻļāύ āĻāĻŦāĻ‚ āĻĄā§āϝāĻžāĻļāĻŦā§‹āĻ°ā§āĻĄ āϰāϚāύāĻž āĻ•āϰāĻžāϰ āϏāϰāĻžā§āϜāĻžāĻŽ āĻāĻŦāĻ‚ āφāϰ⧋ āĻ…āύ⧇āĻ• āĻ•āĻŋāϛ⧁ āĻĻā§‡ā§ŸāĨ¤ -## How to use? +## āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇? -### Installation +### āĻ¸ā§āĻĨāĻžāĻĒāύ -The first step is to install Streamlit Elements in your environment: +āĻĒā§āϰāĻĨāĻŽ āϧāĻžāĻĒ āĻšāϞ āφāĻĒāύāĻžāϰ āĻĒāϰāĻŋāĻŦ⧇āĻļ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āωāĻĒāĻžāĻĻāĻžāύāϗ⧁āϞāĻŋ āχāύāĻ¸ā§āϟāϞ āĻ•āϰāĻž: ```bash pip install streamlit-elements==0.1.* ``` -It is recommended to pin the version to `0.1.*`, as future versions might introduce breaking API changes. +āĻ­āĻžāĻ°ā§āϏāύāϟāĻŋāϕ⧇ `ā§Ļ.ā§§ .*`-āĻ āĻĒāĻŋāύ āĻ•āϰāĻžāϰ āĻĒāϰāĻžāĻŽāĻ°ā§āĻļ āĻĻ⧇āĻ“āϝāĻŧāĻž āĻšāĻšā§āϛ⧇, āĻ•āĻžāϰāĻŖ āĻ­āĻŦāĻŋāĻˇā§āϝāϤ āĻ­āĻžāĻ°ā§āϏāύāϗ⧁āϞāĻŋ āĻŦā§āϰ⧇āĻ•āĻŋāĻ‚ API āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ āφāύāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ -### Usage +### āĻŦā§āϝāĻŦāĻšāĻžāϰ -You can refer to [Streamlit Elements README](https://github.com/okld/streamlit-elements#getting-started) for an in-depth usage guide. +āφāĻĒāύāĻŋ āĻ—āĻ­ā§€āϰāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ⧇āϰ āύāĻŋāĻ°ā§āĻĻ⧇āĻļāĻŋāĻ•āĻžāϟāĻŋāϰ āϜāĻ¨ā§āϝ [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āϰāĻŋāĻĄāĻŽāĻŋ ](https://github.com/okld/streamlit-elements#getting-started) āωāĻ˛ā§āϞ⧇āĻ– āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ -## What are we building? +## āφāĻŽāϰāĻž āĻ•āĻŋ āύāĻŋāĻ°ā§āĻŽāĻžāĻŖ āĻ•āϰāĻ›āĻŋ? -The goal of today's challenge is to create a dashboard composed of three Material UI cards: +āφāϜāϕ⧇āϰ āĻšā§āϝāĻžāϞ⧇āĻžā§āĻœā§‡āϰ āϞāĻ•ā§āĻˇā§āϝ āĻšāϞ āϤāĻŋāύāϟāĻŋ āĻŽā§‡āĻŸā§‡āϰāĻŋāϝāĻŧāĻžāϞ UI āĻ•āĻžāĻ°ā§āĻĄā§‡āϰ āϏāĻŽāĻ¨ā§āĻŦāϝāĻŧ⧇ āĻāĻ•āϟāĻŋ āĻĄā§āϝāĻžāĻļāĻŦā§‹āĻ°ā§āĻĄ āϤ⧈āϰāĻŋ āĻ•āϰāĻž: -- A first card with a Monaco code editor to input some data ; -- A second card to display that data in a Nivo Bump chart ; -- A third card to show a YouTube video URL defined with a `st.text_input`. +- āĻ•āĻŋāϛ⧁ āĻĄā§‡āϟāĻž āχāύāĻĒ⧁āϟ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻŽā§‹āύāĻžāϕ⧋ āϕ⧋āĻĄ āϏāĻŽā§āĻĒāĻžāĻĻāĻ• āϏāĻš āĻāĻ•āϟāĻŋ āĻĒā§āϰāĻĨāĻŽ āĻ•āĻžāĻ°ā§āĻĄ; +- āĻāĻ•āϟāĻŋ āύāĻŋāĻ­ā§‹ āĻŦāĻžāĻŽā§āĻĒ āϚāĻžāĻ°ā§āĻŸā§‡ āϏ⧇āχ āĻĄā§‡āϟāĻž āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻĻā§āĻŦāĻŋāϤ⧀āϝāĻŧ āĻ•āĻžāĻ°ā§āĻĄ; +- āĻāĻ•āϟāĻŋ 'st.text_input' āĻĻāĻŋāϝāĻŧ⧇ āϏāĻ‚āĻœā§āĻžāĻžāϝāĻŧāĻŋāϤ āĻāĻ•āϟāĻŋ āχāωāϟāĻŋāωāĻŦ āĻ­āĻŋāĻĄāĻŋāĻ“ URL āĻĻ⧇āĻ–āĻžāύ⧋āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āϤ⧃āϤ⧀āϝāĻŧ āĻ•āĻžāĻ°ā§āĻĄā§ˇ -You can use data generated from Nivo Bump demo there, in 'data' tab: https://nivo.rocks/bump/. +āφāĻĒāύāĻŋ āϏ⧇āĻ–āĻžāύ⧇ āύāĻŋāĻ­ā§‹ āĻŦāĻžāĻŽā§āĻĒ āĻĄā§‡āĻŽā§‹ āĻĨ⧇āϕ⧇ āĻ‰ā§ŽāĻĒāĻ¨ā§āύ āĻĄā§‡āϟāĻž āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ, 'āĻĄā§‡āϟāĻž' āĻŸā§āϝāĻžāĻŦ⧇: https://nivo.rocks/bump/āĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ [![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/okld/streamlit-elements-demo/main) -## Code with line-by-line explanation +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž āϏāĻš āϕ⧋āĻĄ ```python # First, we will need the following imports for our application. @@ -264,6 +264,6 @@ with elements("demo"): ``` -## Any question? +## āϕ⧋āύ āĻĒā§āϰāĻļā§āύ? -Feel free to ask any question regarding Streamlit Elements or this challenge there: [Streamlit Elements Topic](https://discuss.streamlit.io/t/streamlit-elements-build-draggable-and-resizable-dashboards-with-material-ui-nivo-charts-and-more/24616) +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻž āϏ⧇āĻ–āĻžāύ⧇ āĻāχ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ āϝ⧇āϕ⧋āύ⧋ āĻĒā§āϰāĻļā§āύ āύāĻŋāĻ°ā§āĻĻā§āĻŦāĻŋāϧāĻžāϝāĻŧ āĻ•āϰ⧁āύ: [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻŋāώāϝāĻŧ](https://discuss.streamlit.io/t/streamlit-elements-build-draggable-and-resizable-dashboards-with-material- ui-nivo-charts-and-more/24616) From 3dc3cdfd7335687fb3201c298a91c9067f400932 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 22:12:25 +0100 Subject: [PATCH 29/48] Update Day28.md --- content/Day28.md | 40 +++++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/content/Day28.md b/content/Day28.md index 02d68d1..dc34737 100644 --- a/content/Day28.md +++ b/content/Day28.md @@ -1,24 +1,24 @@ # streamlit-shap -[`streamlit-shap`](https://github.com/snehankekre/streamlit-shap) is a Streamlit component that provides a wrapper to display [SHAP](https://github.com/slundberg/shap) plots in [Streamlit](https://streamlit.io/). +[`streamlit-shap`](https://github.com/snehankekre/streamlit-shap) āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āωāĻĒāĻžāĻĻāĻžāύ āϝāĻž [SHAP](https://github.com/slundberg/shap) āĻĒā§āϞāϟāϗ⧁āϞāĻŋ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻŽā§‹āĻĄāĻŧāĻ• āϏāϰāĻŦāϰāĻžāĻš āĻ•āϰ⧇ [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ](https://streamlit.io/)āĨ¤ -The library is developed by our in-house staff [Snehan Kekre](https://github.com/snehankekre) who also maintains the [Streamlit Documentation](https://docs.streamlit.io/) website. +āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋāϟāĻŋ āφāĻŽāĻžāĻĻ⧇āϰ āχāύ-āĻšāĻžāωāϏ āĻ¸ā§āϟāĻžāĻĢ [āĻ¸ā§āύ⧇āĻšāĻžāύ āϕ⧇āĻ•āϰ⧇](https://github.com/snehankekre) āĻĻā§āĻŦāĻžāϰāĻž āϤ⧈āϰāĻŋ āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇, āϝāĻŋāύāĻŋ [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻĄāϕ⧁āĻŽā§‡āĻ¨ā§āĻŸā§‡āĻļāύ](https://docs.streamlit.io/) āĻ“āϝāĻŧ⧇āĻŦāϏāĻžāχāϟāĻ“ āϰāĻ•ā§āώāĻŖāĻžāĻŦ⧇āĻ•ā§āώāĻŖ āĻ•āϰ⧇āύāĨ¤ -Firstly, install Streamlit (of course!) then pip install the `streamlit-shap` library: +āĻĒā§āϰāĻĨāĻŽā§‡, āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āχāύāĻ¸ā§āϟāϞ āĻ•āϰ⧁āύ (āĻ…āĻŦāĻļā§āϝāχ!) āϤāĻžāϰāĻĒāϰ āĻĒāĻŋāĻĒ āχāĻ¨ā§āϏāϟāϞ āĻ•āϰ⧁āύ `streamlit-shap` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ: ```bash pip install streamlit pip install streamlit-shap ``` -There are also other prerequisite libraries to install (e.g. `matplotlib`, `pandas`, `scikit-learn` and `xgboost`) if you haven't yet done so. +āĻāĻ›āĻžāĻĄāĻŧāĻžāĻ“ āχāύāĻ¸ā§āϟāϞ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻ…āĻ¨ā§āϝāĻžāĻ¨ā§āϝ āĻĒā§‚āĻ°ā§āĻŦāĻļāĻ°ā§āϤ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āϰāϝāĻŧ⧇āϛ⧇ (āϝ⧇āĻŽāύ `matplotlib`, `pandas`, `scikit-learn` āĻāĻŦāĻ‚ `xgboost`) āϝāĻĻāĻŋ āφāĻĒāύāĻŋ āĻāĻ–āύāĻ“ āϤāĻž āύāĻž āĻ•āϰ⧇ āĻĨāĻžāϕ⧇āύāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ -[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/streamlit-shap/) +[![āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/streamlit-shap/) -## Code -Here's how to use `streamlit-shap`: +## āϕ⧋āĻĄ +āĻāĻ–āĻžāύ⧇ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ `āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ-āĻļ⧇āĻĒ` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ: ```python import streamlit as st from streamlit_shap import st_shap @@ -104,19 +104,20 @@ import numpy as np import pandas as pd ``` -Next, we'll set the page layout to be wide such that contents in the Streamlit app can spread the full page width. +āĻāϰ āĻĒāϰ⧇, āφāĻŽāϰāĻž āĻĒ⧃āĻˇā§āĻ āĻžāϰ āĻŦāĻŋāĻ¨ā§āϝāĻžāϏāϟāĻŋāϕ⧇ āĻāĻŽāύāĻ­āĻžāĻŦ⧇ āĻĒā§āϰāĻļāĻ¸ā§āϤ āĻ•āϰāϤ⧇ āϏ⧇āϟ āĻ•āϰāĻŦ āϝāĻžāϤ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻŦāĻŋāώāϝāĻŧāĻŦāĻ¸ā§āϤ⧁ āĻĒ⧁āϰ⧋ āĻĒ⧃āĻˇā§āĻ āĻžāϰ āĻĒā§āϰāĻ¸ā§āĻĨāϕ⧇ āĻ›āĻĄāĻŧāĻŋāϝāĻŧ⧇ āĻĻāĻŋāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ ```python st.set_page_config(layout="wide") ``` -Then, we'll load in a dataset from the `shap` library: +āϤāĻžāϰāĻĒāϰ, āφāĻŽāϰāĻž `shap` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āĻĨ⧇āϕ⧇ āĻāĻ•āϟāĻŋ āĻĄā§‡āϟāĻžāϏ⧇āĻŸā§‡ āϞ⧋āĻĄ āĻ•āϰāĻŦ: ```python @st.experimental_memo def load_data(): return shap.datasets.adult() ``` -Subsequently, we'll definite a function called `load_model` for taking in the `X, y` matrix pair as input, perform data splitting to train/test sets, constructing a `DMatrix` and build an XGBoost model. + +āĻĒāϰāĻŦāĻ°ā§āϤ⧀āĻ•āĻžāϞ⧇, āφāĻŽāϰāĻž āχāύāĻĒ⧁āϟ āĻšāĻŋāϏāĻžāĻŦ⧇ `X, y` āĻŽā§āϝāĻžāĻŸā§āϰāĻŋāĻ•ā§āϏ āĻœā§‹āĻĄāĻŧāĻž āύ⧇āĻ“āϝāĻŧāĻžāϰ āϜāĻ¨ā§āϝ `load_model` āύāĻžāĻŽāĻ• āĻāĻ•āϟāĻŋ āĻĢāĻžāĻ‚āĻļāύ āύāĻŋāĻ°ā§āϧāĻžāϰāĻŖ āĻ•āϰāĻŦ, āĻŸā§āϰ⧇āύ/āĻĒāϰ⧀āĻ•ā§āώāĻž āϏ⧇āĻŸā§‡ āĻĄā§‡āϟāĻž āĻŦāĻŋāĻ­āĻžāϜāύ āϏāĻŽā§āĻĒāĻžāĻĻāύ āĻ•āϰāĻŦ, āĻāĻ•āϟāĻŋ `DMatrix` āύāĻŋāĻ°ā§āĻŽāĻžāĻŖ āĻ•āϰāĻŦ āĻāĻŦāĻ‚ āĻāĻ•āϟāĻŋ XGBoost āĻŽāĻĄā§‡āϞ āϤ⧈āϰāĻŋ āĻ•āϰāĻŦāĨ¤ ```python @st.experimental_memo def load_model(X, y): @@ -135,12 +136,12 @@ def load_model(X, y): return model ``` -The title of the Streamlit app is then displayed: +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻļāĻŋāϰ⧋āύāĻžāĻŽāϟāĻŋ āϤāĻžāϰāĻĒāϰ āĻĒā§āϰāĻĻāĻ°ā§āĻļāĻŋāϤ āĻšāϝāĻŧ: ```python st.title("`streamlit-shap` for displaying SHAP plots in a Streamlit app") ``` -An about expander box is implemented to provide details of the app: +āĻ…ā§āϝāĻžāĻĒāϟāĻŋāϰ āĻŦāĻŋāĻļāĻĻ āĻŦāĻŋāĻŦāϰāĻŖ āĻĻ⧇āĻ“āϝāĻŧāĻžāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āϏāĻŽā§āĻĒā§āϰāϏāĻžāϰāĻŖāĻ•āĻžāϰ⧀ āĻŦāĻžāĻ•ā§āϏ āĻĒā§āϰāϝāĻŧā§‹āĻ— āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇: ```python with st.expander('About the app'): st.markdown('''[`streamlit-shap`](https://github.com/snehankekre/streamlit-shap) is a Streamlit component that provides a wrapper to display [SHAP](https://github.com/slundberg/shap) plots in [Streamlit](https://streamlit.io/). @@ -148,7 +149,7 @@ with st.expander('About the app'): ''') ``` -Here, we'll display the header text along with expander box of the `X` and `y` variables of the Input data: +āĻāĻ–āĻžāύ⧇, āφāĻŽāϰāĻž āχāύāĻĒ⧁āϟ āĻĄā§‡āϟāĻžāϰ `X` āĻāĻŦāĻ‚ `y` āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ⧇āϰ āĻāĻ•ā§āϏāĻĒ⧇āĻ¨ā§āĻĄāĻžāϰ āĻŦāĻ•ā§āϏ āϏāĻš āĻšā§‡āĻĄāĻžāϰ āĻŸā§‡āĻ•ā§āϏāϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻŦ: ```python st.header('Input data') X,y = load_data() @@ -162,12 +163,13 @@ with st.expander('y'): st.dataframe(y) ``` -Here, we'll display the header text for the forthcoming SHAP output: +āĻāĻ–āĻžāύ⧇, āφāĻŽāϰāĻž āφāϏāĻ¨ā§āύ SHAP āφāωāϟāĻĒ⧁āĻŸā§‡āϰ āϜāĻ¨ā§āϝ āĻšā§‡āĻĄāĻžāϰ āĻŸā§‡āĻ•ā§āϏāϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻŦ: ```python st.header('SHAP output') ``` -The XGBoost model is then built by using the `load_model` function that was just implemented above. Finally, + +XGBoost āĻŽāĻĄā§‡āϞāϟāĻŋ 'load_model' āĻĢāĻžāĻ‚āĻļāύ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇ āϝāĻž āωāĻĒāϰ⧇ āĻĒā§āϰāϝāĻŧā§‹āĻ— āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇āĨ¤ āĻ…āĻŦāĻļ⧇āώ⧇, ```python # train XGBoost model X,y = load_data() @@ -176,7 +178,7 @@ X_display,y_display = shap.datasets.adult(display=True) model = load_model(X, y) ``` -Here, we'll compute the SHAP values, which are then used to create the Waterfall and Beeswarm plots. +āĻāĻ–āĻžāύ⧇, āφāĻŽāϰāĻž SHAP āĻŽāĻžāύāϗ⧁āϞāĻŋ āĻ—āĻŖāύāĻž āĻ•āϰāĻŦ, āϝāĻž āĻ“ā§ŸāĻžāϟāĻžāϰāĻĢāϞ āĻāĻŦāĻ‚ āĻŦāĻŋāĻ¸ā§āĻŦāĻžāĻ°ā§āĻŽ āĻĒā§āϞāϟāϏ āϤ⧈āϰāĻŋ āĻ•āϰāϤ⧇ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšāϝāĻŧāĨ¤ ```python # compute SHAP values explainer = shap.Explainer(model, X) @@ -188,7 +190,7 @@ with st.expander('Beeswarm plot'): st_shap(shap.plots.beeswarm(shap_values), height=300) ``` -Finally, the Tree SHAP algorithms is used to explain the output of ensemble tree models via the `shap.TreeExplainer` command and visualized via the `shap.force_plot` command: +āĻ…āĻŦāĻļ⧇āώ⧇, Tree SHAP āĻ…ā§āϝāĻžāϞāĻ—āϰāĻŋāĻĻāĻŽāϗ⧁āϞāĻŋ `shap.TreeExplainer` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻāύāϏ⧇āĻŽā§āĻŦāϞ āĻŸā§āϰāĻŋ āĻŽāĻĄā§‡āϞ⧇āϰ āφāωāϟāĻĒ⧁āϟ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž āĻ•āϰāϤ⧇ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšāϝāĻŧ āĻāĻŦāĻ‚ `shap.force_plot` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻ­āĻŋāĻœā§āϝ⧁āϝāĻŧāĻžāϞāĻžāχāϜ āĻ•āϰāĻž āĻšāϝāĻŧ: ```python explainer = shap.TreeExplainer(model) shap_values = explainer.shap_values(X) @@ -200,6 +202,6 @@ with st.expander('Force plot'): st_shap(shap.force_plot(explainer.expected_value, shap_values[:1000,:], X_display.iloc[:1000,:]), height=400, width=1000) ``` -## Further reading +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž - [`streamlit-shap`](https://github.com/snehankekre/streamlit-shap) - [SHAP](https://github.com/slundberg/shap) From c2b76726f4e516305291c25619231bf0548e9e41 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 22:15:14 +0100 Subject: [PATCH 30/48] Update Day29.md --- content/Day29.md | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/Day29.md b/content/Day29.md index 294c71a..cd11aa4 100644 --- a/content/Day29.md +++ b/content/Day29.md @@ -1,32 +1,32 @@ -# How to make a zero-shot learning text classifier using Hugging Face and Streamlit +# āĻšāĻžāĻ—āĻŋāĻ‚āĻĢ⧇āϏ āĻāĻŦāĻ‚ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āϕ⧀āĻ­āĻžāĻŦ⧇ āĻāĻ•āϟāĻŋ āϜāĻŋāϰ⧋-āĻļāϟ āϞāĻžāĻ°ā§āύāĻŋāĻ‚ āĻŸā§‡āĻ•ā§āϏāϟ āĻ•ā§āϞāĻžāϏāĻŋāĻĢāĻžāϝāĻŧāĻžāϰ āϤ⧈āϰāĻŋ āĻ•āϰāĻŦ⧇āύ -In today's challenge, [Charly Wargnier](https://twitter.com/DataChaz) will walk us through the process of developing a zero-shot learning text classifier using Hugging Face and Streamlit. +āφāϜāϕ⧇āϰ āĻšā§āϝāĻžāϞ⧇āĻžā§āĻœā§‡, [āϚāĻžāĻ°ā§āϞāĻŋ āĻ“āϝāĻŧāĻžāĻ°ā§āĻ—āύāĻŋāϝāĻŧāĻžāϰ](https://twitter.com/DataChaz) āφāĻŽāĻžāĻĻ⧇āϰāϕ⧇ āĻšāĻžāĻ—āĻŋāĻ‚ āĻĢ⧇āϏ āĻāĻŦāĻ‚ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻļā§‚āĻ¨ā§āϝ-āĻļāϟ āĻļ⧇āĻ–āĻžāϰ āĻĒāĻžāĻ ā§āϝ āĻļā§āϰ⧇āĻŖāĻŋāĻŦāĻŋāĻ¨ā§āϝāĻžāϏ āϤ⧈āϰāĻŋāϰ āĻĒā§āϰāĻ•ā§āϰāĻŋāϝāĻŧāĻžāϰ āĻŽāĻ§ā§āϝ āĻĻāĻŋāϝāĻŧ⧇ āύāĻŋāϝāĻŧ⧇ āϝāĻžāĻŦ⧇āĨ¤ -## Introduction +## āĻ­ā§‚āĻŽāĻŋāĻ•āĻž -Hey Streamliters! +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟāĻžāϰāϰāĻž! -Today I'm excited to have the opportunity to contribute to the 30DaysofStreamlit challenge via this hands-on tutorial! 🎈 +āφāϜ āφāĻŽāĻŋ āĻāχ āĻšā§āϝāĻžāĻ¨ā§āĻĄāϏ-āĻ…āύ āϟāĻŋāωāĻŸā§‹āϰāĻŋāϝāĻŧāĻžāϞ⧇āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ 30DaysofStreamlit āĻšā§āϝāĻžāϞ⧇āĻžā§āĻœā§‡ āĻ…āĻŦāĻĻāĻžāύ āϰāĻžāĻ–āĻžāϰ āϏ⧁āϝ⧋āĻ— āĻĒ⧇āϝāĻŧ⧇ āωāĻ¤ā§āϤ⧇āϜāĻŋāϤ! 🎈 -## What are we building? +## āφāĻŽāϰāĻž āĻ•āĻŋ āύāĻŋāĻ°ā§āĻŽāĻžāĻŖ āĻ•āϰāĻ›āĻŋ? -We will create a zero-shot learning text classifier using Hugging Face's API inference and Distilbart! +āφāĻŽāϰāĻž āĻšāĻžāĻ—āĻŋāĻ‚āĻĢ⧇āϏ āĻāϰ API āĻ…āύ⧁āĻŽāĻžāύ āĻāĻŦāĻ‚ āĻĄāĻŋāĻ¸ā§āϟāĻŋāϞāĻŦāĻžāĻ°ā§āϟ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ āϜāĻŋāϰ⧋-āĻļāϟ āϞāĻžāĻ°ā§āύāĻŋāĻ‚ āĻŸā§‡āĻ•ā§āϏāϟ āĻ•ā§āϞāĻžāϏāĻŋāĻĢāĻžāϝāĻŧāĻžāϰ āϤ⧈āϰāĻŋ āĻ•āϰāĻŦ! -You will have the mighty power to classify keyphrases on-the-fly, fast, and without pre ML training! +āωāĻĄāĻŧāĻ¨ā§āϤ, āĻĻā§āϰ⧁āϤ, āĻāĻŦāĻ‚ āĻĒā§āϰāĻŋ-āĻāĻŽāĻāϞ āĻĒā§āϰāĻļāĻŋāĻ•ā§āώāĻŖ āĻ›āĻžāĻĄāĻŧāĻžāχ āĻŽā§‚āϞ āĻŦāĻžāĻ•ā§āϝāĻžāĻ‚āĻļāϗ⧁āϞāĻŋāϕ⧇ āĻļā§āϰ⧇āĻŖā§€āĻŦāĻĻā§āϧ āĻ•āϰāĻžāϰ āĻĒā§āϰāĻŦāϞ āĻ•ā§āώāĻŽāϤāĻž āφāĻĒāύāĻžāϰ āĻĨāĻžāĻ•āĻŦ⧇! -Create classifying labels, paste your keyphrases, and you're off! +āĻļā§āϰ⧇āĻŖā§€āĻŦāĻĻā§āϧ āϞ⧇āĻŦ⧇āϞ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ, āφāĻĒāύāĻžāϰ āĻŽā§‚āϞ āĻŦāĻžāĻ•ā§āϝāĻžāĻ‚āĻļ āĻĒ⧇āĻ¸ā§āϟ āĻ•āϰ⧁āύ, āĻāĻŦāĻ‚ āφāĻĒāύāĻŋ āĻŦāĻ¨ā§āϧ! -You can set these labels anything, e.g.: +āφāĻĒāύāĻŋ āĻāχ āϞ⧇āĻŦ⧇āϞāϗ⧁āϞāĻŋ āϝ⧇āϕ⧋āύ⧋ āĻ•āĻŋāϛ⧁ āϏ⧇āϟ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ, āϝ⧇āĻŽāύ: -- Positive, Negative and Neutral for sentiment analysis -- Angry, Happy, Emotional for emotion analysis -- Navigational, Transactional, Informational for intent classification purposes -- Your product range (bags, shoes, boots etc.) +- āĻ…āύ⧁āĻ­ā§‚āϤāĻŋ āĻŦāĻŋāĻļā§āϞ⧇āώāϪ⧇āϰ āϜāĻ¨ā§āϝ āχāϤāĻŋāĻŦāĻžāϚāĻ•, āύ⧇āϤāĻŋāĻŦāĻžāϚāĻ• āĻāĻŦāĻ‚ āύāĻŋāϰāĻĒ⧇āĻ•ā§āώ +- āφāĻŦ⧇āĻ— āĻŦāĻŋāĻļā§āϞ⧇āώāϪ⧇āϰ āϜāĻ¨ā§āϝ āϰāĻžāĻ—āĻžāĻ¨ā§āĻŦāĻŋāϤ, āϖ⧁āĻļāĻŋ, āφāĻŦ⧇āĻ—āĻĒā§āϰāĻŦāĻŖ +- āύ⧇āĻ­āĻŋāϗ⧇āĻļāύāĻžāϞ, āϞ⧇āύāĻĻ⧇āύāĻŽā§‚āϞāĻ•, āωāĻĻā§āĻĻ⧇āĻļā§āϝ āĻļā§āϰ⧇āĻŖā§€āĻŦāĻŋāĻ­āĻžāϗ⧇āϰ āωāĻĻā§āĻĻ⧇āĻļā§āϝ⧇ āϤāĻĨā§āϝāĻ—āϤ +- āφāĻĒāύāĻžāϰ āĻĒāĻŖā§āϝ āĻĒāϰāĻŋāϏ⧀āĻŽāĻž (āĻŦā§āϝāĻžāĻ—, āϜ⧁āϤāĻž, āĻŦ⧁āϟ āχāĻ¤ā§āϝāĻžāĻĻāĻŋ) -You decide! +āϤ⧁āĻŽāĻŋ āĻ āĻŋāĻ• āĻ•āϰ! -Excited? Let's dive in! +āωāĻ¤ā§āϤ⧇āϜāĻŋāϤ? āĻāϰ āĻŽāĻ§ā§āϝ⧇ āĻĄā§āĻŦ āĻĻ⧇āĻ“āϝāĻŧāĻž āϝāĻžāĻ•! -## Read the full blog -👉 [Read the full blog](https://www.charlywargnier.com/post/how-to-create-a-zero-shot-learning-text-classifier-using-hugging-face-and-streamlit) +## āϏāĻŽā§āĻĒā§‚āĻ°ā§āĻŖ āĻŦā§āϞāĻ— āĻĒāĻĄāĻŧ⧁āύ +👉 [āϏāĻŽā§āĻĒā§‚āĻ°ā§āĻŖ āĻŦā§āϞāĻ— āĻĒāĻĄāĻŧ⧁āύ](https://www.charlywargnier.com/post/how-to-create-a-zero-shot-learning-text-classifier-using-hugging-face-and-streamlit) From fb55a471fbd080a5425d2c2f5387b0869ba0a78a Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 22:28:36 +0100 Subject: [PATCH 31/48] Update Day3.md --- content/Day3.md | 53 +++++++++++++++++++++++++------------------------ 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/content/Day3.md b/content/Day3.md index d24dcce..657b41a 100644 --- a/content/Day3.md +++ b/content/Day3.md @@ -1,25 +1,25 @@ # st.button -`st.button` allows the display of a button widget. +`st.button` āĻāĻ•āϟāĻŋ āĻŦā§‹āϤāĻžāĻŽ āωāχāĻœā§‡āϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -## What we're building? +## āφāĻŽāϰāĻž āĻ•āĻŋ āύāĻŋāĻ°ā§āĻŽāĻžāĻŖ āĻ•āϰāĻ›āĻŋ? -A simple app that performs conditionally prints out alternative messages depending on whether the button was pressed or not. +āĻāĻ•āϟāĻŋ āϏāĻžāϧāĻžāϰāĻŖ āĻ…ā§āϝāĻžāĻĒ āϝāĻž āĻļāĻ°ā§āϤāϏāĻžāĻĒ⧇āĻ•ā§āώ⧇ āϏāĻžā§āϚāĻžāϞāĻŋāϤ āĻ•āϰ⧇ āĻŦāĻŋāĻ•āĻ˛ā§āĻĒ āĻŦāĻžāĻ°ā§āϤāĻžāϗ⧁āϞāĻŋāϕ⧇ āĻĒā§āϰāĻŋāĻ¨ā§āϟ āφāωāϟ āĻ•āϰ⧇ āϤāĻž āύāĻŋāĻ°ā§āĻ­āϰ āĻ•āϰ⧇ āĻŦā§‹āϤāĻžāĻŽāϟāĻŋ āϚāĻžāĻĒāĻžāύ⧋ āĻšāϝāĻŧ⧇āϛ⧇ āĻ•āĻŋ āύāĻžāĨ¤ -Flow of the app: +āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻĒā§āϰāĻŦāĻžāĻš: -1. By default, the app prints `Goodbye` -2. Upon clicking on the button, the app displays the alternative message `Why hello there` +1. āĻĄāĻŋāĻĢāĻ˛ā§āϟāϰ⧂āĻĒ⧇, āĻ…ā§āϝāĻžāĻĒāϟāĻŋ `āϗ⧁āĻĄāĻŦāĻžāχ` āĻĒā§āϰāĻŋāĻ¨ā§āϟ āĻ•āϰ⧇ +2. āĻŦāĻžāϟāύ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰāĻžāϰ āĻĒāϰ⧇, āĻ…ā§āϝāĻžāĻĒāϟāĻŋ 'āϕ⧇āύ āĻšā§āϝāĻžāϞ⧋ āϏ⧇āĻ–āĻžāύ⧇' āĻŦāĻŋāĻ•āĻ˛ā§āĻĒ āĻŦāĻžāĻ°ā§āϤāĻž āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ -The deployed Streamlit app should look something like the one shown in the below link: +āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻž āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āύ⧀āĻšā§‡āϰ āϞāĻŋāĻ™ā§āϕ⧇ āĻĻ⧇āĻ–āĻžāύ⧋āϰ āĻŽāϤ⧋ āĻĻ⧇āĻ–āϤ⧇ āĻšāĻŦ⧇: -[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.button/) +[![āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.button/) -## Code +## āϕ⧋āĻĄ -Here's the code to implement the above mentioned app: +āωāĻĒāϰ⧇ āωāĻ˛ā§āϞāĻŋāĻ–āĻŋāϤ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āĻŦāĻžāĻ¸ā§āϤāĻŦāĻžāϝāĻŧāύ āĻ•āϰāĻžāϰ āϕ⧋āĻĄ āĻāĻ–āĻžāύ⧇: ```python import streamlit as st @@ -32,21 +32,21 @@ else: st.write('Goodbye') ``` -## Line-by-line explanation +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st ``` -This is followed by creating a header text for the app: +āĻāϟāĻŋ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻĒāĻžāĻ ā§āϝ āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āĻ…āύ⧁āϏāϰāĻŖ āĻ•āϰāĻž āĻšāϝāĻŧ: ```python st.header('st.button') ``` -Next, we will use conditional statements `if` and `else` for printing alternative messages. +āĻĒāϰāĻŦāĻ°ā§āϤ⧀, āφāĻŽāϰāĻž āĻŦāĻŋāĻ•āĻ˛ā§āĻĒ āĻŦāĻžāĻ°ā§āϤāĻž āĻĒā§āϰāĻŋāĻ¨ā§āϟ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻļāĻ°ā§āϤāϏāĻžāĻĒ⧇āĻ•ā§āώ āĻŦāĻŋāĻŦ⧃āϤāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ `if` āĻāĻŦāĻ‚ `else`āĨ¤ ```python if st.button('Say hello'): @@ -55,33 +55,34 @@ else: st.write('Goodbye') ``` -As we can see from the above code box, the `st.button()` command accepts the `label` input argument of `Say hello`, which is the text that the button displays. +āφāĻŽāϰāĻž āωāĻĒāϰ⧇āϰ āϕ⧋āĻĄ āĻŦāĻ•ā§āϏ āĻĨ⧇āϕ⧇ āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻšā§āĻ›āĻŋ, `st.button()` āĻ•āĻŽāĻžāĻ¨ā§āĻĄāϟāĻŋ `āϏ⧇ āĻšā§āϝāĻžāϞ⧋` āĻāϰ `āϞ⧇āĻŦ⧇āϞ` āχāύāĻĒ⧁āϟ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟ āĻ—ā§āϰāĻšāĻŖ āĻ•āϰ⧇, āϝāĻž āĻŦā§‹āϤāĻžāĻŽāϟāĻŋ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ āĻāĻŽāύ āĻĒāĻžāĻ ā§āϝāĨ¤ -The `st.write` command is used to print text messages of either `Why hello there` or `Goodbye` depending on whether the button was clicked or not, which is implemented via: +`st.write` āĻ•āĻŽāĻžāĻ¨ā§āĻĄāϟāĻŋ `āϕ⧇āύ āĻšā§āϝāĻžāϞ⧋ āϏ⧇āĻ–āĻžāύ⧇` āĻŦāĻž `āϗ⧁āĻĄāĻŦāĻžāχ` āĻāϰ āĻŸā§‡āĻ•ā§āϏāϟ āĻŽā§‡āϏ⧇āϜ āĻĒā§āϰāĻŋāĻ¨ā§āϟ āĻ•āϰāϤ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āĻšāϝāĻŧ āĻŦā§‹āϤāĻžāĻŽāϟāĻŋ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇ āĻ•āĻŋ āύāĻž āϤāĻžāϰ āωāĻĒāϰ āύāĻŋāĻ°ā§āĻ­āϰ āĻ•āϰ⧇, āϝāĻž āĻāϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻĒā§āϰāϝāĻŧā§‹āĻ— āĻ•āϰāĻž āĻšāϝāĻŧ: ```python st.write('Why hello there') ``` -and +āĻāĻŦāĻ‚ ```python st.write('Goodbye') ``` -It is important to note that the above `st.write` statements are placed under the `if` and `else` conditions in order to perform the above mentioned process of alternative displaying of messages +āĻāϟāĻŋ āϞāĻ•ā§āώ āĻ•āϰāĻž āϗ⧁āϰ⧁āĻ¤ā§āĻŦāĻĒā§‚āĻ°ā§āĻŖ āϝ⧇ āωāĻĒāϰ⧇āϰ `st.write` āĻŦāĻŋāĻŦ⧃āϤāĻŋāϗ⧁āϞāĻŋāϕ⧇ `if` āĻāĻŦāĻ‚ `else` āĻļāĻ°ā§āϤ⧇āϰ āĻ…āϧ⧀āύ⧇ āĻŦāĻžāĻ°ā§āϤāĻžāϗ⧁āϞāĻŋāϰ āĻŦāĻŋāĻ•āĻ˛ā§āĻĒ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āωāĻĒāϰ⧇ āωāĻ˛ā§āϞāĻŋāĻ–āĻŋāϤ āĻĒā§āϰāĻ•ā§āϰāĻŋāϝāĻŧāĻž āϏāĻŽā§āĻĒāĻžāĻĻāύ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇ -## Next steps +## āĻĒāϰāĻŦāĻ°ā§āϤ⧀ āĻĒāĻĻāĻ•ā§āώ⧇āĻĒ -Now that you have created the Streamlit app locally, it's time to deploy it to [Streamlit Community Cloud](https://streamlit.io/cloud) as will be explained soon in an upcoming challenge. +āĻāĻ–āύ āϝ⧇āĻšā§‡āϤ⧁ āφāĻĒāύāĻŋ āĻ¸ā§āĻĨāĻžāύ⧀āϝāĻŧāĻ­āĻžāĻŦ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰ⧇āϛ⧇āύ, āĻāϟāĻŋāϕ⧇ [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŽāĻŋāωāύāĻŋāϟāĻŋ āĻ•ā§āϞāĻžāωāĻĄ](https://streamlit.io/cloud) āĻ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ āĻāϏ⧇āϛ⧇ āϝāĻž āĻāĻ•āϟāĻŋ āφāϏāĻ¨ā§āύ āĻšā§āϝāĻžāϞ⧇āĻžā§āĻœā§‡ āĻļā§€āĻ˜ā§āϰāχ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž āĻ•āϰāĻž āĻšāĻŦ⧇āĨ¤ -Because this is the first week of your challenge, we provide the full code (as shown in the code box above) and solution (the demo app) right inside this webpage. +āĻ•āĻžāϰāĻŖ āĻāϟāĻŋ āφāĻĒāύāĻžāϰ āĻšā§āϝāĻžāϞ⧇āĻžā§āĻœā§‡āϰ āĻĒā§āϰāĻĨāĻŽ āϏāĻĒā§āϤāĻžāĻš, āφāĻŽāϰāĻž āĻāχ āĻ“āϝāĻŧ⧇āĻŦāĻĒ⧃āĻˇā§āĻ āĻžāϰ āĻ­āĻŋāϤāϰ⧇āχ āϏāĻŽā§āĻĒā§‚āĻ°ā§āĻŖ āϕ⧋āĻĄ (āωāĻĒāϰ⧇āϰ āϕ⧋āĻĄ āĻŦāĻ•ā§āϏ⧇ āĻĻ⧇āĻ–āĻžāύ⧋ āĻšāϝāĻŧ⧇āϛ⧇) āĻāĻŦāĻ‚ āϏāĻŽāĻžāϧāĻžāύ (āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ) āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰāĻŋāĨ¤ -Moving forward in the next challenges, it is recommended that you first try implementing the Streamlit app yourself. +āĻĒāϰāĻŦāĻ°ā§āϤ⧀ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜāϗ⧁āϞāĻŋāϤ⧇ āĻāĻ—āĻŋāϝāĻŧ⧇ āϝāĻžāĻ“āϝāĻŧāĻžāϰ āϜāĻ¨ā§āϝ, āφāĻĒāύāĻžāϕ⧇ āĻĒā§āϰāĻĨāĻŽā§‡ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āĻĒā§āϰāϝāĻŧā§‹āĻ— āĻ•āϰāĻžāϰ āĻšā§‡āĻˇā§āϟāĻž āĻ•āϰāĻžāϰ āĻĒāϰāĻžāĻŽāĻ°ā§āĻļ āĻĻ⧇āĻ“āϝāĻŧāĻž āĻšāĻšā§āϛ⧇āĨ¤ -Don't worry if you get stuck, you can always take a peek at the solution. +āφāĻĒāύāĻŋ āφāϟāϕ⧇ āϗ⧇āϞ⧇ āϚāĻŋāĻ¨ā§āϤāĻž āĻ•āϰāĻŦ⧇āύ āύāĻž, āφāĻĒāύāĻŋ āϏāĻŦāϏāĻŽāϝāĻŧ āϏāĻŽāĻžāϧāĻžāύāϟāĻŋ āωāρāĻ•āĻŋ āĻĻāĻŋāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ -## References +## āϤāĻĨā§āϝāϏ⧂āĻ¤ā§āϰ + +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ API āĻĄāϕ⧁āĻŽā§‡āĻ¨ā§āĻŸā§‡āĻļāύ⧇ [`st.button`](https://docs.streamlit.io/library/api-reference/widgets/st.button) āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āĻĒāĻĄāĻŧ⧁āύāĨ¤ -Read about [`st.button`](https://docs.streamlit.io/library/api-reference/widgets/st.button) in the Streamlit API Documentation. From 5991d3c8447a81476d7fe900859a8064d35e8872 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 22:36:37 +0100 Subject: [PATCH 32/48] Update Day30.md --- content/Day30.md | 58 ++++++++++++++++++++++++------------------------ 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/content/Day30.md b/content/Day30.md index 3bc0dbe..e2ae2d6 100644 --- a/content/Day30.md +++ b/content/Day30.md @@ -1,35 +1,35 @@ -# The Art of Creating Streamlit Apps +# āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋāϰ āĻļāĻŋāĻ˛ā§āĻĒ -Today's Day 30 of the *#30DaysOfStreamlit* challenge. Congratulations on making this far in the challenge. +*#30DaysOfStreamlit* āĻšā§āϝāĻžāϞ⧇āĻžā§āĻœā§‡āϰ āφāϜāϕ⧇āϰ āĻĻāĻŋāύ ā§Šā§ĻāĨ¤ āĻ…āĻ­āĻŋāύāĻ¨ā§āĻĻāύ āĻāχ āĻšā§āϝāĻžāϞ⧇āĻžā§āĻœā§‡ āĻāϤāĻĻā§‚āϰ āĻ—āĻĄāĻŧāĻžāϰ āϜāĻ¨ā§āϝāĨ¤ -In this tutorial, we're going to put our newfound knowledge from this learning challenge to create Streamlit apps to solve real-world problem. +āĻāχ āϟāĻŋāωāĻŸā§‹āϰāĻŋāϝāĻŧāĻžāϞ⧇, āφāĻŽāϰāĻž āĻŦāĻžāĻ¸ā§āϤāĻŦ-āĻŦāĻŋāĻļā§āĻŦ⧇āϰ āϏāĻŽāĻ¸ā§āϝāĻž āϏāĻŽāĻžāϧāĻžāύ⧇āϰ āϜāĻ¨ā§āϝ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϏ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻāχ āĻļ⧇āĻ–āĻžāϰ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āĻĨ⧇āϕ⧇ āφāĻŽāĻžāĻĻ⧇āϰ āύāϤ⧁āύ āĻœā§āĻžāĻžāύ āϰāĻžāĻ–āϤ⧇ āϝāĻžāĻšā§āĻ›āĻŋāĨ¤ -## Real-world problem +## āĻŦāĻžāĻ¸ā§āϤāĻŦ āĻŦāĻŋāĻļā§āĻŦ⧇āϰ āϏāĻŽāĻ¸ā§āϝāĻž -As a content creator, having access to thumbnail images from YouTube videos are useful resources for social promotion and content creation. +āĻāĻ•āϟāĻŋ āĻŦāĻŋāώāϝāĻŧāĻŦāĻ¸ā§āϤ⧁ āύāĻŋāĻ°ā§āĻŽāĻžāϤāĻž āĻšāĻŋāϏāĻžāĻŦ⧇, āχāωāϟāĻŋāωāĻŦ āĻ­āĻŋāĻĄāĻŋāĻ“ āĻĨ⧇āϕ⧇ āĻĨāĻžāĻŽā§āĻŦāύ⧇āχāϞ āϚāĻŋāĻ¤ā§āϰāϗ⧁āϞāĻŋāϤ⧇ āĻ…ā§āϝāĻžāĻ•ā§āϏ⧇āϏ āĻĨāĻžāĻ•āĻž āϏāĻžāĻŽāĻžāϜāĻŋāĻ• āĻĒā§āϰāϚāĻžāϰ āĻāĻŦāĻ‚ āϏāĻžāĻŽāĻ—ā§āϰ⧀ āϤ⧈āϰāĻŋāϰ āϜāĻ¨ā§āϝ āĻĻāϰāĻ•āĻžāϰ⧀ āϏāĻ‚āĻ¸ā§āĻĨāĻžāύāĨ¤ -Let's figure out how we're going to tackle this problem and build a Streamlit app. +āφāϏ⧁āύ āφāĻŽāϰāĻž āϕ⧀āĻ­āĻžāĻŦ⧇ āĻāχ āϏāĻŽāĻ¸ā§āϝāĻžāϟāĻŋ āĻŽā§‹āĻ•āĻžāĻŦ⧇āϞāĻž āĻ•āϰāϤ⧇ āϝāĻžāĻšā§āĻ›āĻŋ āĻāĻŦāĻ‚ āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻŦ āϤāĻž āϖ⧁āρāĻœā§‡ āĻŦ⧇āϰ āĻ•āϰāĻž āϝāĻžāĻ•āĨ¤ -## Solution +## āϏāĻŽāĻžāϧāĻžāύ -Today, we're going to build `yt-img-app`, which is a Streamlit app that can extract thumbnail images from YouTube videos. +āφāϜ, āφāĻŽāϰāĻž `yt-img-app` āϤ⧈āϰāĻŋ āĻ•āϰāϤ⧇ āϝāĻžāĻšā§āĻ›āĻŋ, āϝ⧇āϟāĻŋ āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϝāĻž āχāωāϟāĻŋāωāĻŦ āĻ­āĻŋāĻĄāĻŋāĻ“ āĻĨ⧇āϕ⧇ āĻĨāĻžāĻŽā§āĻŦāύ⧇āχāϞ āĻ›āĻŦāĻŋ āĻŦ⧇āϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ -In a nutshell, here's the 3 simple steps that we want the Streamlit app to do: +āϏāĻ‚āĻ•ā§āώ⧇āĻĒ⧇, āĻāĻ–āĻžāύ⧇ ā§ŠāϟāĻŋ āϏāĻšāϜ āĻĒāĻĻāĻ•ā§āώ⧇āĻĒ āϝāĻž āφāĻŽāϰāĻž āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āĻ•āϰāϤ⧇ āϚāĻžāχ: -1. Accept a YouTube URL as input from users -2. Perform text processing of the URL to extract the unique YouTube video ID -3. Use the YouTube video ID as an input to a custom function that retrieves and displays the thumbnail image from YouTube videos +ā§§. āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āĻĻ⧇āϰ āĻ•āĻžāĻ› āĻĨ⧇āϕ⧇ āχāύāĻĒ⧁āϟ āĻšāĻŋāϏāĻžāĻŦ⧇ āĻāĻ•āϟāĻŋ āχāωāϟāĻŋāωāĻŦ URL āĻ—ā§āϰāĻšāĻŖ āĻ•āϰ⧁āύ⧎ +⧍. āχāωāύāĻŋāĻ• āχāωāϟāĻŋāωāĻŦ āĻ­āĻŋāĻĄāĻŋāĻ“ āφāχāĻĄāĻŋ āĻāĻ•ā§āϏāĻŸā§āĻ°ā§āϝāĻžāĻ•ā§āϟ āĻ•āϰāϤ⧇ URL-āĻāϰ āĻŸā§‡āĻ•ā§āϏāϟ āĻĒā§āϰāϏ⧇āϏāĻŋāĻ‚ āĻ•āϰ⧁āύ +ā§Š. āĻāĻ•āϟāĻŋ āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻĢāĻžāĻ‚āĻļāύ⧇ āχāύāĻĒ⧁āϟ āĻšāĻŋāϏāĻžāĻŦ⧇ āχāωāϟāĻŋāωāĻŦ āĻ­āĻŋāĻĄāĻŋāĻ“ āφāχāĻĄāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύ āϝāĻž āχāωāϟāĻŋāωāĻŦ āĻ­āĻŋāĻĄāĻŋāĻ“āϗ⧁āϞāĻŋ āĻĨ⧇āϕ⧇ āĻĨāĻžāĻŽā§āĻŦāύ⧇āχāϞ āϚāĻŋāĻ¤ā§āϰ āĻĒ⧁āύāϰ⧁āĻĻā§āϧāĻžāϰ āĻ•āϰ⧇ āĻāĻŦāĻ‚ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ -## Instructions +## āύāĻŋāĻ°ā§āĻĻ⧇āĻļāύāĻž -To get started in using the Streamlit app, copy and paste a YouTube URL into the input text box. +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻļ⧁āϰ⧁ āĻ•āϰāϤ⧇, āχāύāĻĒ⧁āϟ āĻŸā§‡āĻ•ā§āϏāϟ āĻŦāĻ•ā§āϏ⧇ āĻāĻ•āϟāĻŋ āχāωāϟāĻŋāωāĻŦ URL āĻ•āĻĒāĻŋ āĻ•āϰ⧇ āĻĒ⧇āĻ¸ā§āϟ āĻ•āϰ⧁āύāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ -[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/yt-img-app/) +[![āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/yt-img-app/) -## Code -Here's how to build the `yt-img-app` Streamlit app: +## āϕ⧋āĻĄ +āĻāĻ–āĻžāύ⧇ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ `yt-img-app` Streamlit āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻŦ⧇āύ: ```python import streamlit as st @@ -65,18 +65,18 @@ else: st.write('â˜ī¸ Enter URL to continue ...') ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ āĻĒā§āϰāĻĨāĻŽā§‡āχ āϝāĻž āĻ•āϰāϤ⧇ āĻšāĻŦ⧇ āϤāĻž āĻšāϞ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋāϕ⧇ `st` āĻāϰ āĻŽāϤ⧋ āφāĻŽāĻĻāĻžāύāĻŋ āĻ•āϰ⧇ āĻļ⧁āϰ⧁ āĻ•āϰāĻž: ```python import streamlit as st ``` -Next, we display the app's title and accompanying header: +āĻāϰ āĻĒāϰ⧇, āφāĻŽāϰāĻž āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻāĻŦāĻ‚ āϏāĻšāĻ•āĻžāϰ⧀ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻŋ: ```python st.title('đŸ–ŧī¸ yt-img-app') st.header('YouTube Thumbnail Image Extractor App') ``` -While we're at it, we'll might as well throw in an About expandable box. +āφāĻŽāϰāĻž āĻāϟāĻŋāϤ⧇ āĻĨāĻžāĻ•āĻžāĻ•āĻžāϞ⧀āύ, āφāĻŽāϰāĻž āĻāĻ•āϟāĻŋ āϏāĻŽā§āĻĒā§āϰāϏāĻžāϰāĻŖāϝ⧋āĻ—ā§āϝ āĻŦāĻžāĻ•ā§āϏ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇āĻ“ āύāĻŋāĻ•ā§āώ⧇āĻĒ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋāĨ¤ ```python with st.expander('About this app'): st.write('This app retrieves the thumbnail image from a YouTube video.') @@ -90,12 +90,12 @@ selected_img_quality = st.sidebar.selectbox('Select image quality', ['Max', 'Hig img_quality = img_dict[selected_img_quality] ``` -An input text box is displayed to accept user input on the YouTube video URL to use for extracting the image from. +āχāωāϟāĻŋāωāĻŦ āĻ­āĻŋāĻĄāĻŋāĻ“ URL-āĻ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āχāύāĻĒ⧁āϟ āĻ—ā§āϰāĻšāĻŖ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āχāύāĻĒ⧁āϟ āĻŸā§‡āĻ•ā§āϏāϟ āĻŦāĻ•ā§āϏ āĻĒā§āϰāĻĻāĻ°ā§āĻļāĻŋāϤ āĻšāϝāĻŧ āϝāĻž āĻĨ⧇āϕ⧇ āĻ›āĻŦāĻŋāϟāĻŋ āĻŦ⧇āϰ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āĻšāϝāĻŧāĨ¤ ```python yt_url = st.text_input('Paste YouTube URL', 'https://youtu.be/JwSS70SZdyM') ``` -A custom function for performing text processing of the input URL. +āχāύāĻĒ⧁āϟ URL-āĻāϰ āĻĒāĻžāĻ ā§āϝ āĻĒā§āϰāĻ•ā§āϰāĻŋāϝāĻŧāĻžāĻ•āϰāϪ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻ•āĻžāĻ¸ā§āϟāĻŽ āĻĢāĻžāĻ‚āĻļāύāĨ¤ ```python def get_ytid(input_url): if 'youtu.be' in input_url: @@ -105,7 +105,7 @@ def get_ytid(input_url): return ytid ``` -Finally, we use flow control to determine whether to display a reminder to enter the URL (i.e. as in the `else` statement) or to display the YouTube thumbnail image (i.e. as in the `if` statement). +āĻ…āĻŦāĻļ⧇āώ⧇, URL āĻĒā§āϰāĻŦ⧇āĻļ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻ…āύ⧁āĻ¸ā§āĻŽāĻžāϰāĻ• āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻž āĻšāĻŦ⧇ āĻ•āĻŋāύāĻž āϤāĻž āύāĻŋāĻ°ā§āϧāĻžāϰāĻŖ āĻ•āϰāϤ⧇ āφāĻŽāϰāĻž āĻĒā§āϰāĻŦāĻžāĻš āύāĻŋāϝāĻŧāĻ¨ā§āĻ¤ā§āϰāĻŖ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŋ (āϝ⧇āĻŽāύ `else` āĻŦāĻŋāĻŦ⧃āϤāĻŋāϤ⧇) āĻ…āĻĨāĻŦāĻž āχāωāϟāĻŋāωāĻŦ āĻĨāĻžāĻŽā§āĻŦāύ⧇āχāϞ āϚāĻŋāĻ¤ā§āϰ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāϤ⧇ (āϝ⧇āĻŽāύ `if` āĻŦāĻŋāĻŦ⧃āϤāĻŋāϤ⧇)āĨ¤ ```python # Display YouTube thumbnail image if yt_url != '': @@ -118,10 +118,10 @@ else: st.write('â˜ī¸ Enter URL to continue ...') ``` -## Summary +## āϏāĻžāϰāϏāĻ‚āĻ•ā§āώ⧇āĻĒ -In summary, we have seen that in the creation of any Streamlit app, we normally start by first identifying and defining the problem. Next, we devise a solution to tackle the problem by breaking it down into the granular steps, which we implement in the Streamlit app. +āϏāĻ‚āĻ•ā§āώ⧇āĻĒ⧇, āφāĻŽāϰāĻž āĻĻ⧇āϖ⧇āĻ›āĻŋ āϝ⧇ āϕ⧋āύāĻ“ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ, āφāĻŽāϰāĻž āϏāĻžāϧāĻžāϰāĻŖāϤ āĻĒā§āϰāĻĨāĻŽā§‡ āϏāĻŽāĻ¸ā§āϝāĻžāϟāĻŋ āϏāύāĻžāĻ•ā§āϤ āĻāĻŦāĻ‚ āϏāĻ‚āĻœā§āĻžāĻžāϝāĻŧāĻŋāϤ āĻ•āϰ⧇ āĻļ⧁āϰ⧁ āĻ•āϰāĻŋāĨ¤ āĻāϰāĻĒāϰ⧇, āφāĻŽāϰāĻž āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ⧇ āĻĒā§āϰāϝāĻŧā§‹āĻ— āĻ•āϰāĻŋ āĻāĻŽāύ āĻĻāĻžāύāĻžāĻĻāĻžāϰ āϧāĻžāĻĒ⧇ āĻŦāĻŋāĻ­āĻ•ā§āϤ āĻ•āϰ⧇ āϏāĻŽāĻ¸ā§āϝāĻžāϟāĻŋ āĻŽā§‹āĻ•āĻžāĻŦ⧇āϞāĻž āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āϏāĻŽāĻžāϧāĻžāύ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋāĨ¤ -Here, we also have to determine which data or information that we need as input from users, the approach and method to use in processing the user input in order to produce the final desired output. +āĻāĻ–āĻžāύ⧇, āφāĻŽāĻžāĻĻ⧇āϰ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āĻĻ⧇āϰ āĻ•āĻžāĻ› āĻĨ⧇āϕ⧇ āχāύāĻĒ⧁āϟ āĻšāĻŋāϏāĻžāĻŦ⧇ āφāĻŽāĻžāĻĻ⧇āϰ āϕ⧋āύ āĻĄā§‡āϟāĻž āĻŦāĻž āϤāĻĨā§āϝ āĻĒā§āϰāϝāĻŧā§‹āϜāύ āϤāĻž āύāĻŋāĻ°ā§āϧāĻžāϰāĻŖ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇, āĻšā§‚āĻĄāĻŧāĻžāĻ¨ā§āϤ āĻĒāĻ›āĻ¨ā§āĻĻāϏāχ āφāωāϟāĻĒ⧁āϟ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āχāύāĻĒ⧁āϟ āĻĒā§āϰāĻ•ā§āϰāĻŋāϝāĻŧāĻžāĻ•āϰāϪ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻžāϰ āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻŦāĻ‚ āĻĒāĻĻā§āϧāϤāĻŋāĨ¤ -Hope you enjoyed this tutorial, Happy Streamlit-ing! +āφāĻļāĻž āĻ•āϰāĻŋ āφāĻĒāύāĻŋ āĻāχ āϟāĻŋāωāĻŸā§‹āϰāĻŋāϝāĻŧāĻžāϞāϟāĻŋ āωāĻĒāĻ­ā§‹āĻ— āĻ•āϰ⧇āϛ⧇āύ, āĻšā§āϝāĻžāĻĒāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟāĻŋāĻ‚! From a1056ea4b358c3af7704bd14dca8e0b0b5690bc8 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 22:39:05 +0100 Subject: [PATCH 33/48] Update Day4.md --- content/Day4.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/Day4.md b/content/Day4.md index f9461e6..50adc63 100644 --- a/content/Day4.md +++ b/content/Day4.md @@ -1,7 +1,7 @@ -# Building Streamlit apps with Ken Jee +# āϕ⧇āύ āĻœā§€āϰ āϏāĻžāĻĨ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻž -## Watch Ken's video +## āϕ⧇āύ⧇āϰ āĻ­āĻŋāĻĄāĻŋāĻ“ āĻĻ⧇āϖ⧁āύ -Let's follow along and watch how [Ken Jee](https://www.youtube.com/c/KenJee1) builds a Streamlit app in this video: +āφāϏ⧁āύ āĻ…āύ⧁āϏāϰāĻŖ āĻ•āϰāĻŋ āĻāĻŦāĻ‚ āĻāχ āĻ­āĻŋāĻĄāĻŋāĻ“āϤ⧇ āϕ⧀āĻ­āĻžāĻŦ⧇ [āϕ⧇āύ āĻœā§€](https://www.youtube.com/c/KenJee1) āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āĻĻ⧇āϖ⧁āύ: -[![Data Science Portfolio Project from Scratch](https://img.youtube.com/vi/Yk-unX4KnV4/0.jpg)]()] +[![ āĻ¸ā§āĻ•ā§āĻ°ā§āϝāĻžāϚ āĻĨ⧇āϕ⧇ āĻĄā§‡āϟāĻž āϏāĻžāϝāĻŧ⧇āĻ¨ā§āϏ āĻĒā§‹āĻ°ā§āϟāĻĢā§‹āϞāĻŋāĻ“ āĻĒā§āϰāĻ•āĻ˛ā§āĻĒ](https://img.youtube.com/vi/Yk-unX4KnV4/0.jpg)]()] From 465a674dbd791ad9f4634fc5f6f6fcf9d31ec67a Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 22:45:34 +0100 Subject: [PATCH 34/48] Update Day5.md --- content/Day5.md | 74 ++++++++++++++++++++++++------------------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/content/Day5.md b/content/Day5.md index d3356d0..26a06bd 100644 --- a/content/Day5.md +++ b/content/Day5.md @@ -1,29 +1,29 @@ # st.write -`st.write` allows writing text and arguments to the Streamlit app. +`st.write` āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ⧇ āĻŸā§‡āĻ•ā§āϏāϟ āĻāĻŦāĻ‚ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟ āϞ⧇āĻ–āĻžāϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -In addition to being able to display text, the following can also be displayed via the `st.write()` command: +āĻĒāĻžāĻ ā§āϝ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāϤ⧇ āϏāĻ•ā§āώāĻŽ āĻšāĻ“āϝāĻŧāĻžāϰ āĻĒāĻžāĻļāĻžāĻĒāĻžāĻļāĻŋ, āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤāϗ⧁āϞāĻŋ `st.write()` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡āĻ“ āĻĒā§āϰāĻĻāĻ°ā§āĻļāĻŋāϤ āĻšāϤ⧇ āĻĒāĻžāϰ⧇: -- Prints strings; works like `st.markdown()` -- Displays a Python `dict` -- Displays `pandas` DataFrame can be displayed as a table -- Plots/graphs/figures from `matplotlib`, `plotly`, `altair`, `graphviz`, `bokeh` -- And more (see [st.write on API docs](https://docs.streamlit.io/library/api-reference/write-magic/st.write)) +- āĻĒā§āϰāĻŋāĻ¨ā§āϟ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚; `st.markdown()` āĻāϰ āĻŽāϤ⧋ āĻ•āĻžāϜ āĻ•āϰ⧇ +- āĻāĻ•āϟāĻŋ āĻĒāĻžāχāĻĨāύ `dict` āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ +- āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ `pandas` āĻĄā§‡āϟāĻžāĻĢā§āϰ⧇āĻŽāϕ⧇ āĻŸā§‡āĻŦāĻŋāϞ āĻšāĻŋāϏ⧇āĻŦ⧇ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻž āϝ⧇āϤ⧇ āĻĒāĻžāϰ⧇ +- `matplotlib`, `plotly`, `altair`, `graphviz`, `bokeh` āĻĨ⧇āϕ⧇ āĻĒā§āϞāϟ/āĻ—ā§āϰāĻžāĻĢ/āϚāĻŋāĻ¤ā§āϰ +- āĻāĻŦāĻ‚ āφāϰāĻ“ (āĻĻ⧇āϖ⧁āύ [āĻāĻĒāĻŋāφāχ āĻĄāĻ•ā§āϏ⧇ st.write](https://docs.streamlit.io/library/api-reference/write-magic/st.write)) -## What we're building? +## āφāĻŽāϰāĻž āĻ•āĻŋ āύāĻŋāĻ°ā§āĻŽāĻžāĻŖ āĻ•āϰāĻ›āĻŋ? -A simple app showing the various ways on how to use the `st.write()` command for displaying text, numbers, DataFrames and plots. +āĻĒāĻžāĻ ā§āϝ, āϏāĻ‚āĻ–ā§āϝāĻž, āĻĄā§‡āϟāĻžāĻĢā§āϰ⧇āĻŽ āĻāĻŦāĻ‚ āĻĒā§āϞāϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āϜāĻ¨ā§āϝ `st.write()` āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āϕ⧀āĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻšāϝāĻŧ āϤāĻžāϰ āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āύ āωāĻĒāĻžāϝāĻŧ āĻĻ⧇āĻ–āĻžāύ⧋ āĻāĻ•āϟāĻŋ āϏāĻžāϧāĻžāϰāĻŖ āĻ…ā§āϝāĻžāĻĒāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ -The deployed Streamlit app should look something like the one shown in the below link: +āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻž āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āύ⧀āĻšā§‡āϰ āϞāĻŋāĻ™ā§āϕ⧇ āĻĻ⧇āĻ–āĻžāύ⧋āϰ āĻŽāϤ⧋ āĻĻ⧇āĻ–āϤ⧇ āĻšāĻŦ⧇: -[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.write/) +[![āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.write/) -## Code +## āϕ⧋āĻĄ -Here's how to use st.write: +āĻāĻ–āĻžāύ⧇ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ st.write āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ: ```python import numpy as np @@ -63,36 +63,36 @@ c = alt.Chart(df2).mark_circle().encode( st.write(c) ``` -## Line-by-line explanation +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ āĻĒā§āϰāĻĨāĻŽā§‡āχ āϝāĻž āĻ•āϰāϤ⧇ āĻšāĻŦ⧇ āϤāĻž āĻšāϞ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋāϕ⧇ `st` āĻāϰ āĻŽāϤ⧋ āφāĻŽāĻĻāĻžāύāĻŋ āĻ•āϰ⧇ āĻļ⧁āϰ⧁ āĻ•āϰāĻž: ```python import streamlit as st ``` -This is followed by creating a header text for the app: +āĻāϟāĻŋ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻĒāĻžāĻ ā§āϝ āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āĻ…āύ⧁āϏāϰāĻŖ āĻ•āϰāĻž āĻšāϝāĻŧ: ```python st.header('st.write') ``` -**Example 1** -Its basic use case is to display text and Markdown-formatted text: +**āωāĻĻāĻžāĻšāϰāĻŖ 1** +āĻāϰ āĻŽā§ŒāϞāĻŋāĻ• āĻŦā§āϝāĻŦāĻšāĻžāϰ⧇āϰ āĻ•ā§āώ⧇āĻ¤ā§āϰ⧇ āĻĒāĻžāĻ ā§āϝ āĻāĻŦāĻ‚ āĻŽāĻžāĻ°ā§āĻ•āĻĄāĻžāωāύ-āĻĢāϰāĻŽā§āϝāĻžāϟ āĻ•āϰāĻž āĻĒāĻžāĻ ā§āϝ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāĻž āĻšāϝāĻŧ: ```python st.write('Hello, *World!* :sunglasses:') ``` -**Example 2** -As mentioned above, it can also be used to display other data formats such as numbers: +**āωāĻĻāĻžāĻšāϰāĻŖ 2** +āωāĻĒāϰ⧇ āωāĻ˛ā§āϞāĻŋāĻ–āĻŋāϤ āĻšāĻŋāϏāĻžāĻŦ⧇, āĻāϟāĻŋ āĻ…āĻ¨ā§āϝāĻžāĻ¨ā§āϝ āĻĄā§‡āϟāĻž āĻŦāĻŋāĻ¨ā§āϝāĻžāϏ āϝ⧇āĻŽāύ āϏāĻ‚āĻ–ā§āϝāĻž āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāϤ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āϝ⧇āϤ⧇ āĻĒāĻžāϰ⧇: ```python st.write(1234) ``` -**Example 3** -DataFrames can also be displayed as follows: +**āωāĻĻāĻžāĻšāϰāĻŖ ā§Š** +āĻĄāĻžāϟāĻžāĻĢā§āϰ⧇āĻŽ āĻāĻ›āĻžāĻĄāĻŧāĻžāĻ“ āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āĻšāĻŋāϏāĻžāĻŦ⧇ āĻĒā§āϰāĻĻāĻ°ā§āĻļāĻŋāϤ āĻšāϤ⧇ āĻĒāĻžāϰ⧇: ```python df = pd.DataFrame({ @@ -102,15 +102,15 @@ df = pd.DataFrame({ st.write(df) ``` -**Example 4** -You can pass in multiple arguments: +**āωāĻĻāĻžāĻšāϰāĻŖ ā§Ē** +āφāĻĒāύāĻŋ āĻāĻ•āĻžāϧāĻŋāĻ• āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟ āĻĒāĻžāϏ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ: ```python st.write('Below is a DataFrame:', df, 'Above is a dataframe.') ``` -**Example 5** -Finally, you can also display plots as well by passing it to a variable as follows: +**āωāĻĻāĻžāĻšāϰāĻŖ ā§Ģ** +āĻ…āĻŦāĻļ⧇āώ⧇, āφāĻĒāύāĻŋ āύāĻŋāĻŽā§āύāϰ⧂āĻĒ āĻāĻ•āϟāĻŋ āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ⧇ āĻĒāĻžāϏ āĻ•āϰ⧇ āĻĒā§āϞāϟāϗ⧁āϞāĻŋāĻ“ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ: ```python df2 = pd.DataFrame( @@ -121,25 +121,25 @@ c = alt.Chart(df2).mark_circle().encode( st.write(c) ``` -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ -The deployed Streamlit app should look something like the one shown in the below link: +āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻž āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āύ⧀āĻšā§‡āϰ āϞāĻŋāĻ™ā§āϕ⧇ āĻĻ⧇āĻ–āĻžāύ⧋āϰ āĻŽāϤ⧋ āĻĻ⧇āĻ–āϤ⧇ āĻšāĻŦ⧇: -[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.write/) +[![āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.write/) -## Next steps +## āĻĒāϰāĻŦāĻ°ā§āϤ⧀ āĻĒāĻĻāĻ•ā§āώ⧇āĻĒ -Now that you have created the Streamlit app locally, it's time to deploy it to [Streamlit Community Cloud](https://streamlit.io/cloud) as will be explained soon in an upcoming challenge. +āĻāĻ–āύ āϝ⧇āĻšā§‡āϤ⧁ āφāĻĒāύāĻŋ āĻ¸ā§āĻĨāĻžāύ⧀āϝāĻŧāĻ­āĻžāĻŦ⧇ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰ⧇āϛ⧇āύ, āĻāϟāĻŋāϕ⧇ [āĻ¸ā§āĻŸā§āϰ⧀āĻŽāϞāĻŋāϟ āĻ•āĻŽāĻŋāωāύāĻŋāϟāĻŋ āĻ•ā§āϞāĻžāωāĻĄ](https://streamlit.io/cloud) āĻ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ āĻāϏ⧇āϛ⧇ āϝāĻž āĻāĻ•āϟāĻŋ āφāϏāĻ¨ā§āύ āĻšā§āϝāĻžāϞ⧇āĻžā§āĻœā§‡ āĻļā§€āĻ˜ā§āϰāχ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž āĻ•āϰāĻž āĻšāĻŦ⧇āĨ¤ -Because this is the first week of your challenge, we provide the full code (as shown in the code box above) and solution (the demo app) right inside this webpage. +āĻ•āĻžāϰāĻŖ āĻāϟāĻŋ āφāĻĒāύāĻžāϰ āĻšā§āϝāĻžāϞ⧇āĻžā§āĻœā§‡āϰ āĻĒā§āϰāĻĨāĻŽ āϏāĻĒā§āϤāĻžāĻš, āφāĻŽāϰāĻž āĻāχ āĻ“āϝāĻŧ⧇āĻŦāĻĒ⧃āĻˇā§āĻ āĻžāϰ āĻ­āĻŋāϤāϰ⧇āχ āϏāĻŽā§āĻĒā§‚āĻ°ā§āĻŖ āϕ⧋āĻĄ (āωāĻĒāϰ⧇āϰ āϕ⧋āĻĄ āĻŦāĻ•ā§āϏ⧇ āĻĻ⧇āĻ–āĻžāύ⧋ āĻšāϝāĻŧ⧇āϛ⧇) āĻāĻŦāĻ‚ āϏāĻŽāĻžāϧāĻžāύ (āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ) āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰāĻŋāĨ¤ -Moving forward in the next challenges, it is recommended that you first try implementing the Streamlit app yourself. +āĻĒāϰāĻŦāĻ°ā§āϤ⧀ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜāϗ⧁āϞāĻŋāϤ⧇ āĻāĻ—āĻŋāϝāĻŧ⧇ āϝāĻžāĻ“āϝāĻŧāĻžāϰ āϜāĻ¨ā§āϝ, āφāĻĒāύāĻžāϕ⧇ āĻĒā§āϰāĻĨāĻŽā§‡ Streamlit āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āĻĒā§āϰāϝāĻŧā§‹āĻ— āĻ•āϰāĻžāϰ āĻšā§‡āĻˇā§āϟāĻž āĻ•āϰāĻžāϰ āĻĒāϰāĻžāĻŽāĻ°ā§āĻļ āĻĻ⧇āĻ“āϝāĻŧāĻž āĻšāĻšā§āϛ⧇āĨ¤ -Don't worry if you get stuck, you can always take a peek at the solution. +āφāĻĒāύāĻŋ āφāϟāϕ⧇ āϗ⧇āϞ⧇ āϚāĻŋāĻ¨ā§āϤāĻž āĻ•āϰāĻŦ⧇āύ āύāĻž, āφāĻĒāύāĻŋ āϏāĻŦāϏāĻŽāϝāĻŧ āϏāĻŽāĻžāϧāĻžāύāϟāĻŋ āωāρāĻ•āĻŋ āĻĻāĻŋāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ -## Further reading +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž -In addition to [`st.write`](https://docs.streamlit.io/library/api-reference/write-magic/st.write), you can explore the other ways of displaying text: +[`st.write`](https://docs.streamlit.io/library/api-reference/write-magic/st.write) āĻ›āĻžāĻĄāĻŧāĻžāĻ“, āφāĻĒāύāĻŋ āĻĒāĻžāĻ ā§āϝ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āĻ…āĻ¨ā§āϝāĻžāĻ¨ā§āϝ āωāĻĒāĻžāϝāĻŧāϗ⧁āϞāĻŋ āĻ…āĻ¨ā§āĻŦ⧇āώāĻŖ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ: - [`st.markdown`](https://docs.streamlit.io/library/api-reference/text/st.markdown) - [`st.header`](https://docs.streamlit.io/library/api-reference/text/st.header) From 64f0a786767d9c43ab01399ae2bcc428df63304b Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 22:56:05 +0100 Subject: [PATCH 35/48] Update Day6.md --- content/Day6.md | 37 +++++++++++++++++++------------------ 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/content/Day6.md b/content/Day6.md index 818e779..f40c17b 100644 --- a/content/Day6.md +++ b/content/Day6.md @@ -1,34 +1,35 @@ -# Uploading your Streamlit app to GitHub +# # āĻ—āĻŋāϟāĻšāĻžāĻŦ⧇ āφāĻĒāύāĻžāϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āφāĻĒāϞ⧋āĻĄ -## GitHub -Git is a software for keeping track of all changes made to code (i.e. version control). GitHub is a Git repository hosting service that makes data and code publicly available on the web, which allows team collaboration and allow others to contribute to the repo. +## āĻ—āĻŋāϟāĻšāĻžāĻŦ -Housing your Streamlit app in a GitHub repository will allow apps to be deployed to the cloud (the next challenge). +āĻ—āĻŋāϟ āĻšāϞ āĻāĻ•āϟāĻŋ āϏāĻĢā§āϟāĻ“āϝāĻŧā§āϝāĻžāϰ āϝāĻž āϕ⧋āĻĄā§‡ āĻ•āϰāĻž āϏāĻŽāĻ¸ā§āϤ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ⧇āϰ āĻŸā§āĻ°ā§āϝāĻžāĻ• āϰāĻžāĻ–āĻžāϰ āϜāĻ¨ā§āϝ (āϝ⧇āĻŽāύ āϏāĻ‚āĻ¸ā§āĻ•āϰāĻŖ āύāĻŋāϝāĻŧāĻ¨ā§āĻ¤ā§āϰāĻŖ)āĨ¤ āĻ—āĻŋāϟāĻšāĻžāĻŦ āĻšāϞ āĻāĻ•āϟāĻŋ āĻ—āĻŋāϟ āϰāĻŋāĻĒā§‹āϜāĻŋāϟāϰāĻŋ āĻšā§‹āĻ¸ā§āϟāĻŋāĻ‚ āĻĒāϰāĻŋāώ⧇āĻŦāĻž āϝāĻž āĻ“āϝāĻŧ⧇āĻŦ⧇ āϏāĻ°ā§āĻŦāϜāύ⧀āύāĻ­āĻžāĻŦ⧇ āĻĄā§‡āϟāĻž āĻāĻŦāĻ‚ āϕ⧋āĻĄ āωāĻĒāϞāĻŦā§āϧ āĻ•āϰ⧇, āϝāĻž āϟāĻŋāĻŽ āϏāĻšāϝ⧋āĻ—āĻŋāϤāĻžāϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧ āĻāĻŦāĻ‚ āĻ…āĻ¨ā§āϝāĻĻ⧇āϰ āϰ⧇āĻĒā§‹āϤ⧇ āĻ…āĻŦāĻĻāĻžāύ āϰāĻžāĻ–āĻžāϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -## Sign up for GitHub +āφāĻĒāύāĻžāϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋāϕ⧇ āĻāĻ•āϟāĻŋ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϏāĻ‚āĻ—ā§āϰāĻšāĻ¸ā§āĻĨāϞ⧇ āϰāĻžāĻ–āĻž āĻ…ā§āϝāĻžāĻĒāϗ⧁āϞāĻŋāϕ⧇ āĻ•ā§āϞāĻžāωāĻĄā§‡ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻžāϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āĻŦ⧇ (āĻĒāϰāĻŦāĻ°ā§āϤ⧀ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ)āĨ¤ -Firstly, sign up for a [GitHub](https://github.com/) account. +## āĻ—āĻŋāϟāĻšāĻžāĻŦ-āĻāϰ āϜāĻ¨ā§āϝ āϏāĻžāχāύ āφāĻĒ āĻ•āϰ⧁āύ -## Create a GitHub repository +āĻĒā§āϰāĻĨāĻŽāϤ, āĻāĻ•āϟāĻŋ [āĻ—āĻŋāϟāĻšāĻžāĻŦ](https://github.com/) āĻ…ā§āϝāĻžāĻ•āĻžāωāĻ¨ā§āĻŸā§‡āϰ āϜāĻ¨ā§āϝ āϏāĻžāχāύ āφāĻĒ āĻ•āϰ⧁āύāĨ¤ -Follow the following steps to create a GitHub repository: -- In the top right hand corner, click on the **"+"** icon which should reveal a drop-down menu, then click on **"New repository"** (*Figure 1*). +## āĻāĻ•āϟāĻŋ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϏāĻ‚āĻ—ā§āϰāĻšāĻ¸ā§āĻĨāϞ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ -- This should bring to a new webpage called **"Create a new repository"**. Under the **"Repository name"** field, enter a name for your repository, for example, `helloworld` (***Figure 2***). +āĻāĻ•āϟāĻŋ āĻ—āĻŋāϟāĻšāĻžāĻŦ āϏāĻ‚āĻ—ā§āϰāĻšāĻ¸ā§āĻĨāϞ āϤ⧈āϰāĻŋ āĻ•āϰāϤ⧇ āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āĻĒāĻĻāĻ•ā§āώ⧇āĻĒāϗ⧁āϞāĻŋ āĻ…āύ⧁āϏāϰāĻŖ āĻ•āϰ⧁āύ: +- āωāĻĒāϰ⧇āϰ āĻĄāĻžāύāĻĻāĻŋāϕ⧇āϰ āϕ⧋āĻŖāĻžāϝāĻŧ, **"+"** āφāχāĻ•āύ⧇ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰ⧁āύ āϝāĻž āĻāĻ•āϟāĻŋ āĻĄā§āϰāĻĒ-āĻĄāĻžāωāύ āĻŽā§‡āύ⧁ āĻĒā§āϰāĻ•āĻžāĻļ āĻ•āϰāĻŦ⧇, āϤāĻžāϰāĻĒāϰ⧇ **"āύāϤ⧁āύ āϏāĻ‚āĻ—ā§āϰāĻšāĻ¸ā§āĻĨāϞ"** (*āϚāĻŋāĻ¤ā§āϰ 1*) āĻ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰ⧁āύāĨ¤ -- Under the **"Initialize this repository with:"** field, tick on **"Add a README file"**. +- āĻāϟāĻŋ **"āĻāĻ•āϟāĻŋ āύāϤ⧁āύ āϏāĻ‚āĻ—ā§āϰāĻšāĻ¸ā§āĻĨāϞ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ"** āύāĻžāĻŽā§‡ āĻāĻ•āϟāĻŋ āύāϤ⧁āύ āĻ“āϝāĻŧ⧇āĻŦāĻĒ⧇āĻœā§‡ āφāύāϤ⧇ āĻšāĻŦ⧇āĨ¤ **"āϰāĻŋāĻĒā§‹āϜāĻŋāϟāϰāĻŋ āύāĻžāĻŽ"** āĻ•ā§āώ⧇āĻ¤ā§āϰ⧇āϰ āĻ…āϧ⧀āύ⧇, āφāĻĒāύāĻžāϰ āϏāĻ‚āĻ—ā§āϰāĻšāĻ¸ā§āĻĨāϞ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āύāĻžāĻŽ āϞāĻŋāϖ⧁āύ, āωāĻĻāĻžāĻšāϰāĻŖāĻ¸ā§āĻŦāϰ⧂āĻĒ, `āĻšā§āϝāĻžāϞ⧋āĻ“āϝāĻŧāĻžāĻ°ā§āĻ˛ā§āĻĄ` (***āϚāĻŋāĻ¤ā§āϰ 2***)āĨ¤ -- Finally, click on **"Create repository"** (Figure 3). +- **"āĻāχ āϰāĻŋāĻĒā§‹āϜāĻŋāϟāϰāĻŋāϟāĻŋ āĻĻāĻŋāϝāĻŧ⧇ āĻļ⧁āϰ⧁ āĻ•āϰ⧁āύ:"** āĻĢāĻŋāĻ˛ā§āĻĄā§‡āϰ āĻ…āϧ⧀āύ⧇, **"āĻāĻ•āϟāĻŋ āϰāĻŋāĻĄāĻŽāĻŋ āĻĢāĻžāχāϞ āϝ⧋āĻ— āĻ•āϰ⧁āύ"** āĻ āϟāĻŋāĻ• āĻĻāĻŋāύāĨ¤ -Your newly created repository will be available at `https://github.com/dataprofessor/helloworld` where `dataprofessor` is the username and `helloworld` is the repository name. +- āĻ…āĻŦāĻļ⧇āώ⧇, **"āϰāĻŋāĻĒā§‹āϜāĻŋāϟāϰāĻŋ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ"** (āϚāĻŋāĻ¤ā§āϰ ā§Š) āĻ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰ⧁āύāĨ¤ -Below is the screenshot of the newly created repo (Figure 4): +āφāĻĒāύāĻžāϰ āύāϤ⧁āύ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āϏāĻ‚āĻ—ā§āϰāĻšāĻ¸ā§āĻĨāϞ `https://github.com/dataprofessor/helloworld`-āĻ āωāĻĒāϞāĻŦā§āϧ āĻšāĻŦ⧇ āϝ⧇āĻ–āĻžāύ⧇ `dataprofessor` āĻšāϞ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āύāĻžāĻŽ āĻāĻŦāĻ‚ `helloworld` āĻšāϞ āϏāĻ‚āĻ—ā§āϰāĻšāĻ¸ā§āĻĨāϞ⧇āϰ āύāĻžāĻŽāĨ¤ -## Upload files to the GitHub repo +āύ⧀āĻšā§‡ āύāϤ⧁āύ āϤ⧈āϰāĻŋ āϰ⧇āĻĒā§‹āϰ āĻ¸ā§āĻ•ā§āϰāĻŋāύāĻļāϟ (āϚāĻŋāĻ¤ā§āϰ ā§Ē): -Slightly above the file table and adjacent to the green **Code** button, click on **Add file** > **Upload files** (Figure 5). +## āĻ—āĻŋāϟāĻšāĻžāĻŦ āϰ⧇āĻĒā§‹āϤ⧇ āĻĢāĻžāχāϞ āφāĻĒāϞ⧋āĻĄ āĻ•āϰ⧁āύ -This will bring you to a new webpage where the central box says ***Drag files here to add them to your repository*** and **choose your files**, which you can either drag-and-drop files into this box or click on the **choose your files** link to choose files from your local computer. +āĻĢāĻžāχāϞ āĻŸā§‡āĻŦāĻŋāϞ⧇āϰ āϏāĻžāĻŽāĻžāĻ¨ā§āϝ āωāĻĒāϰ⧇ āĻāĻŦāĻ‚ āϏāĻŦ⧁āϜ **āϕ⧋āĻĄ** āĻŦā§‹āϤāĻžāĻŽā§‡āϰ āĻĒāĻžāĻļ⧇, **āĻĢāĻžāχāϞ āϝ⧋āĻ— āĻ•āϰ⧁āύ** > **āĻĢāĻžāχāϞ āφāĻĒāϞ⧋āĻĄ** (āϚāĻŋāĻ¤ā§āϰ 5) āĻ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰ⧁āύāĨ¤ -Click on **Commit changes** to proceed further (Figure 6). +āĻāϟāĻŋ āφāĻĒāύāĻžāϕ⧇ āĻāĻ•āϟāĻŋ āύāϤ⧁āύ āĻ“āϝāĻŧ⧇āĻŦāĻĒ⧇āĻœā§‡ āύāĻŋāϝāĻŧ⧇ āφāϏāĻŦ⧇ āϝ⧇āĻ–āĻžāύ⧇ āϕ⧇āĻ¨ā§āĻĻā§āϰ⧀āϝāĻŧ āĻŦāĻžāĻ•ā§āϏ⧇ āĻŦāϞāĻž āĻšāϝāĻŧ⧇āϛ⧇ ***Drag files here to add them to your repository*** āĻāĻŦāĻ‚ **āφāĻĒāύāĻžāϰ āĻĢāĻžāχāϞāϗ⧁āϞāĻŋ āϚāϝāĻŧāύ āĻ•āϰ⧁āύ**, āϝ⧇āϟāĻŋ āφāĻĒāύāĻŋ āĻāχ āĻŦāĻžāĻ•ā§āϏ⧇ āĻĢāĻžāχāϞāϗ⧁āϞāĻŋāϕ⧇ āĻŸā§‡āύ⧇-āĻāĻ¨ā§āĻĄ-āĻĄā§āϰāĻĒ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ āĻ…āĻĨāĻŦāĻž āφāĻĒāύāĻžāϰ āĻ¸ā§āĻĨāĻžāύ⧀āϝāĻŧ āĻ•āĻŽā§āĻĒāĻŋāωāϟāĻžāϰ āĻĨ⧇āϕ⧇ āĻĢāĻžāχāϞāϗ⧁āϞāĻŋ āϚāϝāĻŧāύ āĻ•āϰāϤ⧇ **choose your files** āϞāĻŋāĻ™ā§āĻ•āϟāĻŋāϤ⧇ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰ⧁āύ⧎ + +āφāϰāĻ“ āĻāĻ—āĻŋāϝāĻŧ⧇ āϝ⧇āϤ⧇ **Commit changes**-āĻ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰ⧁āύ (āϚāĻŋāĻ¤ā§āϰ 6)āĨ¤ From c7a36f4b8d594ded4eafea7807b469e76ba291ea Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 23:02:29 +0100 Subject: [PATCH 36/48] Update Day7.md --- content/Day7.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/content/Day7.md b/content/Day7.md index 8322582..fe18604 100644 --- a/content/Day7.md +++ b/content/Day7.md @@ -1,18 +1,19 @@ -# Deploying your Streamlit app with Streamlit Community Cloud +# āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŽāĻŋāωāύāĻŋāϟāĻŋ āĻ•ā§āϞāĻžāωāĻĄā§‡āϰ āϏāĻžāĻĨ⧇ āφāĻĒāύāĻžāϰ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻž āĻšāĻšā§āϛ⧇ -## Streamlit Community Cloud +## āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŽāĻŋāωāύāĻŋāϟāĻŋ āĻ•ā§āϞāĻžāωāĻĄ -[Streamlit Community Cloud](https://streamlit.io/cloud) is a hosting service for easily deploying Streamlit apps. +[āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŽāĻŋāωāύāĻŋāϟāĻŋ āĻ•ā§āϞāĻžāωāĻĄ](https://streamlit.io/cloud) āĻšāϞ āĻāĻ•āϟāĻŋ āĻšā§‹āĻ¸ā§āϟāĻŋāĻ‚ āĻĒāϰāĻŋāώ⧇āĻŦāĻž āϝāĻžāϤ⧇ āϏāĻšāĻœā§‡ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϗ⧁āϞāĻŋ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāĻž āϝāĻžāϝāĻŧāĨ¤ -## Sign up for Streamlit Community Cloud +## āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŽāĻŋāωāύāĻŋāϟāĻŋ āĻ•ā§āϞāĻžāωāĻĄā§‡āϰ āϜāĻ¨ā§āϝ āϏāĻžāχāύ āφāĻĒ āĻ•āϰ⧁āύ -You can easily sign up for [Streamlit Community Cloud](https://streamlit.io/cloud) by simply logging in with Google or GitHub account. +āφāĻĒāύāĻŋ āϗ⧁āĻ—āϞ āĻŦāĻž āĻ—āĻŋāϟāĻšāĻžāĻŦ āĻ…ā§āϝāĻžāĻ•āĻžāωāĻ¨ā§āϟ āĻĻāĻŋāϝāĻŧ⧇ āϞāĻ— āχāύ āĻ•āϰ⧇ āϏāĻšāĻœā§‡āχ [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŽāĻŋāωāύāĻŋāϟāĻŋ āĻ•ā§āϞāĻžāωāĻĄ](https://streamlit.io/cloud) āĻāϰ āϜāĻ¨ā§āϝ āϏāĻžāχāύ āφāĻĒ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ -## Deploy a Streamlit app +## āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰ⧁āύ -To deploy a Streamlit app, do the following: -1. Sign in with GitHub or Gmail credentials -2. Pick a repo, branch and file -3. Click Deploy +āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰāϤ⧇, āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤāϗ⧁āϞāĻŋ āĻ•āϰ⧁āύ: +1. āĻ—āĻŋāϟāĻšāĻžāĻŦ āĻŦāĻž āϜāĻŋāĻŽā§‡āχāϞ āĻļāĻ‚āϏāĻžāĻĒāĻ¤ā§āϰ āĻĻāĻŋāϝāĻŧ⧇ āϏāĻžāχāύ āχāύ āĻ•āϰ⧁āύ⧎ +2. āĻāĻ•āϟāĻŋ āϰ⧇āĻĒā§‹, āĻļāĻžāĻ–āĻž āĻāĻŦāĻ‚ āĻĢāĻžāχāϞ āϚāϝāĻŧāύ āĻ•āϰ⧁āύ +3. āĻĄāĻŋāĻĒā§āϞ⧟ āĻ āĻ•ā§āϞāĻŋāĻ• āĻ•āϰ⧁āύ + +āϤāĻžāϰāĻĒāϰ⧇ āφāĻĒāύāĻŋ āϝāĻ–āύāχ āĻāĻ•āϟāĻŋ āĻ—āĻŋāϟ āĻĒ⧁āĻļ āĻ•āϰāĻŦ⧇āύ āφāĻĒāύāĻžāϰ āĻ…ā§āϝāĻžāĻĒ āĻ…āĻŦāĻŋāϞāĻŽā§āĻŦ⧇ āφāĻĒāĻĄā§‡āϟ āĻšāĻŦ⧇āĨ¤ -Then any time you do a git push your app will update immediately. From a0de741399b4e51ca6f74086cdf3c64ec096c7b8 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 23:08:47 +0100 Subject: [PATCH 37/48] Update Day8.md --- content/Day8.md | 75 +++++++++++++++++++++++++------------------------ 1 file changed, 38 insertions(+), 37 deletions(-) diff --git a/content/Day8.md b/content/Day8.md index 2753c9b..5ba04de 100644 --- a/content/Day8.md +++ b/content/Day8.md @@ -1,24 +1,24 @@ # st.slider -`st.slider` allows the display of a slider input widget. +`st.slider` āĻāĻ•āϟāĻŋ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ āχāύāĻĒ⧁āϟ āωāχāĻœā§‡āϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -The following data types are supported: int, float, date, time, and datetime. +āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āĻĄā§‡āϟāĻž āĻĒā§āϰāĻ•āĻžāϰāϗ⧁āϞāĻŋ āϏāĻŽāĻ°ā§āĻĨāĻŋāϤ: int, float, date, time, āĻāĻŦāĻ‚ datetime. -## What we're building? +## āφāĻŽāϰāĻž āĻ•āĻŋ āύāĻŋāĻ°ā§āĻŽāĻžāĻŖ āĻ•āϰāĻ›āĻŋ? -A simple app that shows the various ways on how to accept user input by adjusting the slider widget. +āĻāĻ•āϟāĻŋ āϏāĻžāϧāĻžāϰāĻŖ āĻ…ā§āϝāĻžāĻĒ āϝāĻž āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ āωāχāĻœā§‡āϟ āϏāĻžāĻŽāĻžā§āϜāĻ¸ā§āϝ āĻ•āϰ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āχāύāĻĒ⧁āϟ āĻ—ā§āϰāĻšāĻŖ āĻ•āϰāĻžāϰ āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āύ āωāĻĒāĻžāϝāĻŧ āĻĻ⧇āĻ–āĻžāϝāĻŧāĨ¤ -Flow of the app: -1. User selects value by adjusting the slider widget -2. App prints out the selected value +āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻĒā§āϰāĻŦāĻžāĻš: +1. āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ āωāχāĻœā§‡āϟ āϏāĻžāĻŽāĻžā§āϜāĻ¸ā§āϝ āĻ•āϰ⧇ āĻŽāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰ⧇ +2. āĻ…ā§āϝāĻžāĻĒ āύāĻŋāĻ°ā§āĻŦāĻžāϚāĻŋāϤ āĻŽāĻžāύ āĻĒā§āϰāĻŋāĻ¨ā§āϟ āĻ•āϰ⧇ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ -[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.slider/) +[![āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.slider/) -## Code -Here's how to use st.slider: +## āϕ⧋āĻĄ +āĻāĻ–āĻžāύ⧇ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ st.slider āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ: ```python import streamlit as st @@ -63,21 +63,21 @@ st.write("Start time:", start_time) ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ āĻĒā§āϰāĻĨāĻŽā§‡āχ āϝāĻž āĻ•āϰāϤ⧇ āĻšāĻŦ⧇ āϤāĻž āĻšāϞ `āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋāϕ⧇ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st from datetime import time, datetime ``` -This is followed by creating a header text for the app: +āĻāϟāĻŋ āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻĒāĻžāĻ ā§āϝ āϤ⧈āϰāĻŋ āĻ•āϰ⧇ āĻ…āύ⧁āϏāϰāĻŖ āĻ•āϰāĻž āĻšāϝāĻŧ: ```python st.header('st.slider') ``` -**Example 1** +**āωāĻĻāĻžāĻšāϰāĻŖ 1** -Slider: +āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ: ```python st.subheader('Slider') @@ -86,16 +86,16 @@ age = st.slider('How old are you?', 0, 130, 25) st.write("I'm ", age, 'years old') ``` -As we can see, the `st.slider()` command -is used to collect user input about the age of users. +āφāĻŽāϰāĻž āĻĻ⧇āĻ–āϤ⧇ āĻĒāĻžāĻšā§āĻ›āĻŋ, `st.slider()` āĻ•āĻŽāĻžāĻ¨ā§āĻĄ +āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āĻĻ⧇āϰ āĻŦāϝāĻŧāϏ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰāĻ•āĻžāϰ⧀āϰ āχāύāĻĒ⧁āϟ āϏāĻ‚āĻ—ā§āϰāĻš āĻ•āϰāϤ⧇ āĻŦā§āϝāĻŦāĻšā§ƒāϤ āĻšāϝāĻŧāĨ¤ -The first input argument displays the text just above the **slider** widget asking `'How old are you?'`. +āĻĒā§āϰāĻĨāĻŽ āχāύāĻĒ⧁āϟ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟāϟāĻŋ **āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ** āωāχāĻœā§‡āĻŸā§‡āϰ āĻ āĻŋāĻ• āωāĻĒāϰ⧇ āϞ⧇āĻ–āĻžāϟāĻŋ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ āϝāĻž āϜāĻŋāĻœā§āĻžā§‡āϏ āĻ•āϰ⧇ `'āφāĻĒāύāĻžāϰ āĻŦāϝāĻŧāϏ āĻ•āϤ?'`āĨ¤ -The following three integers `0, 130, 25` represents the minimum, maximum and default values, respectively. +āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āϤāĻŋāύāϟāĻŋ āĻĒā§‚āĻ°ā§āĻŖāϏāĻ‚āĻ–ā§āϝāĻž `ā§Ļ, ā§§ā§Šā§Ļ, ⧍ā§Ģ` āϝāĻĨāĻžāĻ•ā§āϰāĻŽā§‡ āϏāĻ°ā§āĻŦāύāĻŋāĻŽā§āύ, āϏāĻ°ā§āĻŦā§‹āĻšā§āϚ āĻāĻŦāĻ‚ āĻĄāĻŋāĻĢāĻ˛ā§āϟ āĻŽāĻžāύāϗ⧁āϞāĻŋāϕ⧇ āωāĻĒāĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰ⧇āĨ¤ -**Example 2** +**āωāĻĻāĻžāĻšāϰāĻŖ ⧍** -Range slider: +āϰ⧇āĻžā§āϜ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ: ```python st.subheader('Range slider') @@ -106,15 +106,15 @@ values = st.slider( st.write('Values:', values) ``` -The range slider allow selection of a lower and upper bound value pair. +āĻĒāϰāĻŋāϏ⧀āĻŽāĻž āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ āĻāĻ•āϟāĻŋ āύāĻŋāĻŽā§āύ āĻāĻŦāĻ‚ āωāĻĒāϰ⧇āϰ āφāĻŦāĻĻā§āϧ āĻŽāĻžāύ āĻœā§‹āĻĄāĻŧāĻž āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāĻžāϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -The first input argument displays the text just above the **range slider** widget asking `'Select a range of values'`. +āĻĒā§āϰāĻĨāĻŽ āχāύāĻĒ⧁āϟ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟāϟāĻŋ **āϰ⧇āĻžā§āϜ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ** āωāχāĻœā§‡āĻŸā§‡āϰ āĻ āĻŋāĻ• āωāĻĒāϰ⧇ āϞ⧇āĻ–āĻžāϟāĻŋ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ āϝāĻž āϜāĻŋāĻœā§āĻžāĻžāϏāĻž āĻ•āϰ⧇ `'āĻŽāĻžāύāϗ⧁āϞāĻŋāϰ āĻāĻ•āϟāĻŋ āĻĒāϰāĻŋāϏāϰ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰ⧁āύ'`āĨ¤ -The following three arguments `0.0, 100.0, (25.0, 75.0)` represents the minimum and maximum values while the last tuple denotes the default values to use as the selected lower (25.0) and upper (75.0) bound values. +āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āϤāĻŋāύāϟāĻŋ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟ `ā§Ļ.ā§Ļ , ā§§ā§Ļā§Ļ.ā§Ļ , (⧍ā§Ģ.ā§Ļ , ā§­ā§Ģ.ā§Ļ)` āĻ¨ā§āϝ⧂āύāϤāĻŽ āĻāĻŦāĻ‚ āϏāĻ°ā§āĻŦāĻžāϧāĻŋāĻ• āĻŽāĻžāύāϗ⧁āϞāĻŋāϕ⧇ āωāĻĒāĻ¸ā§āĻĨāĻžāĻĒāύ āĻ•āϰ⧇ āϝāĻ–āύ āĻļ⧇āώ āϟāĻŋāĻĒāϞāϟāĻŋ āύāĻŋāĻ°ā§āĻŦāĻžāϚāĻŋāϤ āύāĻŋāĻŽā§āύ (25.0) āĻāĻŦāĻ‚ āωāĻĒāϰ⧇āϰ (75.0) āφāĻŦāĻĻā§āϧ āĻŽāĻžāύ āĻšāĻŋāϏāĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĄāĻŋāĻĢāĻ˛ā§āϟ āĻŽāĻžāύāϗ⧁āϞāĻŋāϕ⧇ āύāĻŋāĻ°ā§āĻĻ⧇āĻļ āĻ•āϰ⧇⧎ -**Example 3** +**āωāĻĻāĻžāĻšāϰāĻŖ ā§Š** -Range time slider: +āĻĒāϰāĻŋāϏ⧀āĻŽāĻž āϏāĻŽāϝāĻŧ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ: ```python st.subheader('Range time slider') @@ -125,15 +125,15 @@ appointment = st.slider( st.write("You're scheduled for:", appointment) ``` -The range time slider allows selection of a lower and upper bound value pair of datetime. +āϰ⧇āĻžā§āϜ āϟāĻžāχāĻŽ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ āĻĄā§‡āϟāϟāĻžāχāĻŽā§‡āϰ āĻāĻ•āϟāĻŋ āύāĻŋāĻŽā§āύ āĻāĻŦāĻ‚ āωāĻĒāϰ⧇āϰ āφāĻŦāĻĻā§āϧ āĻŽāĻžāύ āĻœā§‹āĻĄāĻŧāĻž āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāĻžāϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -The first input argument displays the text just above the **range time slider** widget asking `'Schedule your appointment:`. +āĻĒā§āϰāĻĨāĻŽ āχāύāĻĒ⧁āϟ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟ **āϰ⧇āĻžā§āϜ āϟāĻžāχāĻŽ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ** āωāχāĻœā§‡āĻŸā§‡āϰ āĻ āĻŋāĻ• āωāĻĒāϰ⧇ āĻŸā§‡āĻ•ā§āϏāϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ āϝāĻž āϜāĻŋāĻœā§āĻžā§‡āϏ āĻ•āϰ⧇ `'āφāĻĒāύāĻžāϰ āĻ…ā§āϝāĻžāĻĒāϝāĻŧ⧇āĻ¨ā§āϟāĻŽā§‡āĻ¨ā§āĻŸā§‡āϰ āϏāĻŽāϝāĻŧ āύāĻŋāĻ°ā§āϧāĻžāϰāĻŖ āĻ•āϰ⧁āύ:'āĨ¤ -The default values for the lower and upper bound value pairs of datetime are set to 11:30 and 12:45, respectively. +āĻĄā§‡āϟāϟāĻžāχāĻŽā§‡āϰ āύāĻŋāĻŽā§āύ āĻāĻŦāĻ‚ āωāĻĒāϰ⧇āϰ āφāĻŦāĻĻā§āϧ āĻŽāĻžāύ āĻœā§‹āĻĄāĻŧāĻžāϰ āϜāĻ¨ā§āϝ āĻĄāĻŋāĻĢāĻ˛ā§āϟ āĻŽāĻžāύ āϝāĻĨāĻžāĻ•ā§āϰāĻŽā§‡ ā§§ā§§:ā§Šā§Ļ āĻāĻŦāĻ‚ ⧧⧍:ā§Ēā§Ģ āϏ⧇āϟ āĻ•āϰāĻž āĻšāϝāĻŧ⧇āϛ⧇āĨ¤ -**Example 4** +**āωāĻĻāĻžāĻšāϰāĻŖ ā§Ē** -Datetime slider: +āϤāĻžāϰāĻŋāĻ– āϏāĻŽāϝāĻŧ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ: ```python st.subheader('Datetime slider') @@ -145,12 +145,13 @@ start_time = st.slider( st.write("Start time:", start_time) ``` -The datetime slider allows selection of a datetime. +āϤāĻžāϰāĻŋāϖ⧇āϰ āϏāĻŽāϝāĻŧ āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ āĻāĻ•āϟāĻŋ āϤāĻžāϰāĻŋāĻ– āϏāĻŽāϝāĻŧ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāĻžāϰ āĻ…āύ⧁āĻŽāϤāĻŋ āĻĻ⧇āϝāĻŧāĨ¤ -The first input argument displays the text just above the **datetime** slider widget asking `'When do you start?'`. +āĻĒā§āϰāĻĨāĻŽ āχāύāĻĒ⧁āϟ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟ **datetime** āĻ¸ā§āϞāĻžāχāĻĄāĻžāϰ āωāχāĻœā§‡āĻŸā§‡āϰ āĻ āĻŋāĻ• āωāĻĒāϰ⧇ āĻĒāĻžāĻ ā§āϝ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇ āϝāĻž āϜāĻŋāĻœā§āĻžāĻžāϏāĻž āĻ•āϰ⧇ `'āφāĻĒāύāĻŋ āĻ•āĻ–āύ āĻļ⧁āϰ⧁ āĻ•āϰāĻŦ⧇āύ?'`āĨ¤ -The default value for the datetime was set using the `value` option to be January 1, 2020 at 9:30 +āϤāĻžāϰāĻŋāĻ– āϏāĻŽāϝāĻŧ⧇āϰ āϜāĻ¨ā§āϝ āĻĄāĻŋāĻĢāĻ˛ā§āϟ `āĻŽāĻžāύ` āĻŦāĻŋāĻ•āĻ˛ā§āĻĒ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ ā§§ āϜāĻžāύ⧁āϝāĻŧāĻžāϰ⧀, ⧍ā§Ļ⧍ā§Ļ ⧝:ā§Šā§Ļ āĻ āϏ⧇āϟ āĻ•āϰāĻž āĻšāϝāĻŧ⧇āĻ›āĻŋāϞ -## Further reading -You can also explore the following related widget: +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž +āĻāĻ›āĻžāĻĄāĻŧāĻžāĻ“ āφāĻĒāύāĻŋ āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ āωāχāĻœā§‡āϟ āĻ…āĻ¨ā§āĻŦ⧇āώāĻŖ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ: - [`st.select_slider`](https://docs.streamlit.io/library/api-reference/widgets/st.select_slider) + From d556bdcb3f197be774b39faa07479cb28e22fbd0 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 23:30:26 +0100 Subject: [PATCH 38/48] Update Day9.md --- content/Day9.md | 39 ++++++++++++++++++++------------------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/content/Day9.md b/content/Day9.md index 931bb21..1c1be55 100644 --- a/content/Day9.md +++ b/content/Day9.md @@ -1,25 +1,25 @@ # st.line_chart -`st.line_chart` displays a line chart. +`st.line_chart` āĻāĻ•āϟāĻŋ āϞāĻžāχāύ āϚāĻžāĻ°ā§āϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧇āĨ¤ -This is syntax-sugar around `st.altair_chart`. The main difference is this command uses the data's own column and indices to figure out the chart's spec. As a result this is easier to use for many "just plot this" scenarios, while being less customizable. +āĻāϟāĻŋ `st.altair_chart` āĻāϰ āϚāĻžāϰāĻĒāĻžāĻļ⧇ āĻŦāĻžāύāĻžāύ⧋āĨ¤ āĻĒā§āϰāϧāĻžāύ āĻĒāĻžāĻ°ā§āĻĨāĻ•ā§āϝ āĻšāϞ āĻāχ āĻ•āĻŽāĻžāĻ¨ā§āĻĄāϟāĻŋ āϚāĻžāĻ°ā§āĻŸā§‡āϰ āĻŦ⧈āĻļāĻŋāĻˇā§āĻŸā§āϝ āĻŦ⧇āϰ āĻ•āϰāϤ⧇ āĻĄā§‡āϟāĻžāϰ āύāĻŋāϜāĻ¸ā§āĻŦ āĻ•āϞāĻžāĻŽ āĻāĻŦāĻ‚ āϏ⧂āϚāĻ• āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇āĨ¤ āĻĢāϞāĻ¸ā§āĻŦāϰ⧂āĻĒ āĻāϟāĻŋ āĻ…āύ⧇āĻ• "āĻļ⧁āϧ⧁ āĻāχ āĻĒā§āϞāϟ" āĻĒāϰāĻŋāĻ¸ā§āĻĨāĻŋāϤāĻŋāϤ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āϏāĻšāϜ, āϝāĻĻāĻŋāĻ“ āĻ•āĻŽ āĻ•āĻžāĻ¸ā§āϟāĻŽāĻžāχāϜāϝ⧋āĻ—ā§āϝāĨ¤ -If `st.line_chart` does not guess the data specification correctly, try specifying your desired chart using st.altair_chart. +āϝāĻĻāĻŋ `st.line_chart` āĻĄā§‡āϟāĻž āĻ¸ā§āĻĒ⧇āϏāĻŋāĻĢāĻŋāϕ⧇āĻļāύ āϏāĻ āĻŋāĻ•āĻ­āĻžāĻŦ⧇ āĻ…āύ⧁āĻŽāĻžāύ āύāĻž āĻ•āϰ⧇, āϤāĻžāĻšāϞ⧇ st.altair_chart āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āφāĻĒāύāĻžāϰ āĻ•āĻžāĻ™ā§āĻ–āĻŋāϤ āϚāĻžāĻ°ā§āϟ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻ•āϰāĻžāϰ āĻšā§‡āĻˇā§āϟāĻž āĻ•āϰ⧁āύāĨ¤ -## What we're building? +## āφāĻŽāϰāĻž āĻ•āĻŋ āύāĻŋāĻ°ā§āĻŽāĻžāĻŖ āĻ•āϰāĻ›āĻŋ? -A simple app for displaying a line chart. +āĻāĻ•āϟāĻŋ āϞāĻžāχāύ āϚāĻžāĻ°ā§āϟ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āϏāĻšāϜ āĻ…ā§āϝāĻžāĻĒāĨ¤ -Flow of the app: -1. Create a `Pandas` DataFrame from numbers randomly generated via `NumPy`. -2. Create and display the line chart via `st.line_chart()` command. +āĻ…ā§āϝāĻžāĻĒ⧇āϰ āĻĒā§āϰāĻŦāĻžāĻš: +ā§§. 'NumPy' āĻāϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻāϞ⧋āĻŽā§‡āϞ⧋āĻ­āĻžāĻŦ⧇ āϤ⧈āϰāĻŋ āĻšāĻ“āϝāĻŧāĻž āϏāĻ‚āĻ–ā§āϝāĻžāϗ⧁āϞāĻŋ āĻĨ⧇āϕ⧇ āĻāĻ•āϟāĻŋ 'Pandas' āĻĄā§‡āϟāĻžāĻĢā§āϰ⧇āĻŽ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ⧎ +⧍. `st.line_chart()` āĻ•āĻŽāĻžāĻ¨ā§āĻĄā§‡āϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āϞāĻžāχāύ āϚāĻžāĻ°ā§āϟ āϤ⧈āϰāĻŋ āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ āĻĒā§āϰāĻĻāĻ°ā§āĻļāύ āĻ•āϰ⧁āύāĨ¤ -## Demo app +## āĻĄā§‡āĻŽā§‹ āĻ…ā§āϝāĻžāĻĒ -[![Streamlit App](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.line_chart/) +[![āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ](https://static.streamlit.io/badges/streamlit_badge_black_white.svg)](https://share.streamlit.io/dataprofessor/st.line_chart/) -## Code -Here's how to use [`st.line_chart`](https://docs.streamlit.io/library/api-reference/charts/st.line_chart): +## āϕ⧋āĻĄ +āĻāĻ–āĻžāύ⧇ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ [`st.line_chart`](https://docs.streamlit.io/library/api-reference/charts/st.line_chart): ```python import streamlit as st import pandas as pd @@ -35,31 +35,32 @@ st.line_chart(chart_data) ``` -## Line-by-line explanation -The very first thing to do when creating a Streamlit app is to start by importing the `streamlit` library as `st` as well as other libraries like so: +## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž +āĻāĻ•āϟāĻŋ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϏāĻŽāϝāĻŧ āĻĒā§āϰāĻĨāĻŽā§‡āχ āϝ⧇ āĻ•āĻžāϜāϟāĻŋ āĻ•āϰāϤ⧇ āĻšāĻŦ⧇ āϤāĻž āĻšāϞ `āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋāϕ⧇ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āĻ“ āĻ…āĻ¨ā§āϝāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st import pandas as pd import numpy as np ``` -Next, we create a header text for the app: +āĻāϰ āĻĒāϰ⧇, āφāĻŽāϰāĻž āĻ…ā§āϝāĻžāĻĒ⧇āϰ āϜāĻ¨ā§āϝ āĻāĻ•āϟāĻŋ āĻļāĻŋāϰ⧋āύāĻžāĻŽ āĻĒāĻžāĻ ā§āϝ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋ: ```python st.header('Line chart') ``` -Then, we create a DataFrame of randomly generated numbers that contains 3 columns. +āϤāĻžāϰāĻĒāϰ, āφāĻŽāϰāĻž āĻāϞ⧋āĻŽā§‡āϞ⧋āĻ­āĻžāĻŦ⧇ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āϏāĻ‚āĻ–ā§āϝāĻžāϗ⧁āϞāĻŋāϰ āĻāĻ•āϟāĻŋ āĻĄā§‡āϟāĻžāĻĢā§āϰ⧇āĻŽ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋ āϝāĻžāϤ⧇ ā§ŠāϟāĻŋ āĻ•āϞāĻžāĻŽ āĻĨāĻžāϕ⧇āĨ¤ ```python chart_data = pd.DataFrame( np.random.randn(20, 3), columns=['a', 'b', 'c']) ``` -Finally, a line chart is created by using `st.line_chart()` with the DataFrame stored in the `chart_data` variable as the input data: + +āĻ…āĻŦāĻļ⧇āώ⧇, āχāύāĻĒ⧁āϟ āĻĄā§‡āϟāĻž āĻšāĻŋāϏāĻžāĻŦ⧇ `chart_data` āϭ⧇āϰāĻŋāϝāĻŧ⧇āĻŦāϞ⧇ āϏāĻ‚āϰāĻ•ā§āώāĻŋāϤ āĻĄā§‡āϟāĻžāĻĢā§āϰ⧇āĻŽā§‡āϰ āϏāĻžāĻĨ⧇ `st.line_chart()` āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ āϞāĻžāχāύ āϚāĻžāĻ°ā§āϟ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āĻšāϝāĻŧ: ```python st.line_chart(chart_data) ``` -## Further reading -Read more about the following related Streamlit command from which [`st.line_chart`](https://docs.streamlit.io/library/api-reference/charts/st.line_chart) is based on: +## āφāϰāĻ“ āĻĒāĻĄāĻŧāĻž +āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ•āĻŽāĻžāĻ¨ā§āĻĄ āϏāĻŽā§āĻĒāĻ°ā§āϕ⧇ āφāϰāĻ“ āĻĒāĻĄāĻŧ⧁āύ āϝ⧇āϟāĻŋ āĻĨ⧇āϕ⧇ [`st.line_chart`](https://docs.streamlit.io/library/api-reference/charts/st.line_chart) āĻāϰ āωāĻĒāϰ āĻ­āĻŋāĻ¤ā§āϤāĻŋ āĻ•āϰ⧇: - [`st.altair_chart`](https://docs.streamlit.io/library/api-reference/charts/st.altair_chart) From c364d308011c9b73388bcf003a3046bd32d98ea5 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 23:30:51 +0100 Subject: [PATCH 39/48] Update Day9.md --- content/Day9.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/Day9.md b/content/Day9.md index 1c1be55..861cb77 100644 --- a/content/Day9.md +++ b/content/Day9.md @@ -48,7 +48,7 @@ import numpy as np st.header('Line chart') ``` -āϤāĻžāϰāĻĒāϰ, āφāĻŽāϰāĻž āĻāϞ⧋āĻŽā§‡āϞ⧋āĻ­āĻžāĻŦ⧇ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āϏāĻ‚āĻ–ā§āϝāĻžāϗ⧁āϞāĻŋāϰ āĻāĻ•āϟāĻŋ āĻĄā§‡āϟāĻžāĻĢā§āϰ⧇āĻŽ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋ āϝāĻžāϤ⧇ ā§ŠāϟāĻŋ āĻ•āϞāĻžāĻŽ āĻĨāĻžāϕ⧇āĨ¤ +āϤāĻžāϰāĻĒāϰ āφāĻŽāϰāĻž āĻāϞ⧋āĻŽā§‡āϞ⧋āĻ­āĻžāĻŦ⧇ āϤ⧈āϰāĻŋ āĻ•āϰāĻž āϏāĻ‚āĻ–ā§āϝāĻžāϗ⧁āϞāĻŋāϰ āĻāĻ•āϟāĻŋ āĻĄā§‡āϟāĻžāĻĢā§āϰ⧇āĻŽ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋ āϝāĻžāϤ⧇ ā§ŠāϟāĻŋ āĻ•āϞāĻžāĻŽ āĻĨāĻžāϕ⧇āĨ¤ ```python chart_data = pd.DataFrame( np.random.randn(20, 3), From 7e7df6d4cbe1d7ee019186f3656436fdc73a9c48 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 23:33:51 +0100 Subject: [PATCH 40/48] Update Day18.md --- content/Day18.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/Day18.md b/content/Day18.md index c4bf949..33d2336 100644 --- a/content/Day18.md +++ b/content/Day18.md @@ -30,7 +30,7 @@ else: ``` ## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž -āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāύāĻ‚ āĻ…āĻ¨ā§āύāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāĻŦāĻ‚ āĻ…āĻ¨ā§āύāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st import pandas as pd From dc64a2dd9773b810dd10bea54b9a2cdce2751111 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 23:35:01 +0100 Subject: [PATCH 41/48] Update Day21.md --- content/Day21.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/Day21.md b/content/Day21.md index 33b5f36..ce93c1e 100644 --- a/content/Day21.md +++ b/content/Day21.md @@ -27,7 +27,7 @@ st.balloons() ``` ## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž -āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻžāĨ¤ āϤāĻžāϰ āϏāĻžāĻĨ⧇ `time` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇: +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻžāĨ¤ āϤāĻžāϰ āϏāĻžāĻĨ⧇ `time` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻšā§Ÿā§‡āϛ⧇: ```python import streamlit as st import time From 1091257f741e0a6cab092375fa9aba8f193aa2c9 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 23:36:18 +0100 Subject: [PATCH 42/48] Update Day24.md --- content/Day24.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/Day24.md b/content/Day24.md index e29bac1..a0c9853 100644 --- a/content/Day24.md +++ b/content/Day24.md @@ -69,7 +69,7 @@ st.info(b1-b0) ``` ## āϞāĻžāχāύ-āĻŦāĻžāχ-āϞāĻžāχāύ āĻŦā§āϝāĻžāĻ–ā§āϝāĻž -āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāύāĻ‚ āĻ…āĻ¨ā§āύāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰ⧀ āĻ•āϰāĻžāϰ āϜāĻ¨ā§āϝ āĻĒā§āϰāĻĨāĻŽ āϜāĻŋāύāĻŋāϏāϟāĻŋ āĻšāϞ⧋ `streamlit` āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ `st` āĻšāĻŋāϏ⧇āĻŦ⧇ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž āĻāĻŦāĻ‚ āĻ…āĻ¨ā§āύāĻžāĻ¨ā§āϝ āϞāĻžāχāĻŦā§āϰ⧇āϰāĻŋ āχāĻŽā§āĻĒā§‹āĻ°ā§āϟ āĻ•āϰāĻž: ```python import streamlit as st import numpy as np From 1bab3da81dee7e0d96e6c7b26ffa1b4ce9a089c8 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 23:49:14 +0100 Subject: [PATCH 43/48] Update streamlit_app.py --- streamlit_app.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/streamlit_app.py b/streamlit_app.py index 80e22b3..61e7bef 100644 --- a/streamlit_app.py +++ b/streamlit_app.py @@ -75,7 +75,7 @@ def update_params(): st.markdown(f"# đŸ—“ī¸ {i}") j = i.replace(" ", "") with open(f"content/{j}.md", "r") as f: - st.markdown(f.read()) + st.markdown(f.read(), encoding="utf-8") if os.path.isfile(f"content/figures/{j}.csv") == True: st.markdown("---") st.markdown("### Figures") From 2355b899fa7c830722ee03db13a58f75cc44a4e6 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Sun, 19 Mar 2023 23:50:03 +0100 Subject: [PATCH 44/48] Update streamlit_app.py --- streamlit_app.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/streamlit_app.py b/streamlit_app.py index 61e7bef..80e22b3 100644 --- a/streamlit_app.py +++ b/streamlit_app.py @@ -75,7 +75,7 @@ def update_params(): st.markdown(f"# đŸ—“ī¸ {i}") j = i.replace(" ", "") with open(f"content/{j}.md", "r") as f: - st.markdown(f.read(), encoding="utf-8") + st.markdown(f.read()) if os.path.isfile(f"content/figures/{j}.csv") == True: st.markdown("---") st.markdown("### Figures") From f7179fe4527a2903c0deb3a3d941a773d63c80f8 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Fri, 24 Mar 2023 11:45:02 +0100 Subject: [PATCH 45/48] Update Day27.md --- content/Day27.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/Day27.md b/content/Day27.md index 8fef128..75dbc65 100644 --- a/content/Day27.md +++ b/content/Day27.md @@ -266,4 +266,4 @@ with elements("demo"): ## āϕ⧋āύ āĻĒā§āϰāĻļā§āύ? -āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻž āϏ⧇āĻ–āĻžāύ⧇ āĻāχ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ āϝ⧇āϕ⧋āύ⧋ āĻĒā§āϰāĻļā§āύ āύāĻŋāĻ°ā§āĻĻā§āĻŦāĻŋāϧāĻžāϝāĻŧ āĻ•āϰ⧁āύ: [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻŋāώāϝāĻŧ](https://discuss.streamlit.io/t/streamlit-elements-build-draggable-and-resizable-dashboards-with-material- ui-nivo-charts-and-more/24616) +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻž āϏ⧇āĻ–āĻžāύ⧇ āĻāχ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ āϝ⧇āϕ⧋āύ⧋ āĻĒā§āϰāĻļā§āύ āύāĻŋāĻ°ā§āĻĻā§āĻŦāĻŋāϧāĻžāϝāĻŧ āĻ•āϰ⧁āύ: [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻŋāώāϝāĻŧ](https://discuss.streamlit.io/t/streamlit-elements-build-draggable-and-resizable-dashboards-with-material- ui-nivo-charts-and-more/24616) From bc6e603e69e359b08bad6192dc0844d6e79da546 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Fri, 24 Mar 2023 11:45:25 +0100 Subject: [PATCH 46/48] Update Day27.md --- content/Day27.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/Day27.md b/content/Day27.md index 75dbc65..e8c618c 100644 --- a/content/Day27.md +++ b/content/Day27.md @@ -266,4 +266,4 @@ with elements("demo"): ## āϕ⧋āύ āĻĒā§āϰāĻļā§āύ? -āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻž āϏ⧇āĻ–āĻžāύ⧇ āĻāχ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ āϝ⧇āϕ⧋āύ⧋ āĻĒā§āϰāĻļā§āύ āύāĻŋāĻ°ā§āĻĻā§āĻŦāĻŋāϧāĻžāϝāĻŧ āĻ•āϰ⧁āύ: [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻŋāώāϝāĻŧ](https://discuss.streamlit.io/t/streamlit-elements-build-draggable-and-resizable-dashboards-with-material- ui-nivo-charts-and-more/24616) +āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻž āϏ⧇āĻ–āĻžāύ⧇ āĻāχ āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ āϝ⧇āϕ⧋āύ⧋ āĻĒā§āϰāĻļā§āύ āύāĻŋāĻ°ā§āĻĻā§āĻŦāĻŋāϧāĻžāϝāĻŧ āĻ•āϰ⧁āύ: [āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻāϞāĻŋāĻŽā§‡āĻ¨ā§āϟāϏ āĻŦāĻŋāώāϝāĻŧ](https://discuss.streamlit.io/t/streamlit-elements-build-draggable-and-resizable-dashboards-with-material-ui-nivo-charts-and-more/24616) From ff49a9b94f9da2e147a9f06d5335917864f6a422 Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Fri, 24 Mar 2023 11:55:30 +0100 Subject: [PATCH 47/48] Update Day2.md --- content/Day2.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/content/Day2.md b/content/Day2.md index 4673080..2411622 100644 --- a/content/Day2.md +++ b/content/Day2.md @@ -1,14 +1,14 @@ -# Building your first Streamlit app +# āĻĒā§āϰāĻĨāĻŽ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āĻŦāĻžāύāĻžāύ⧋āϰ āĻĒāĻĻāĻ•ā§āώ⧇āĻĒ -## Fire up your IDE +## āφāĻĒāύāĻžāϰ āφāχāĻĄāĻŋāχ(IDE) āĻŦāĻž āχāĻ¨ā§āϟāĻŋāĻ—ā§āϰ⧇āĻŸā§‡āĻĄ āĻĄā§‡āϭ⧇āϞāĻĒāĻŽā§‡āĻ¨ā§āϟ āĻāύāĻ­āĻžā§ŸāϰāύāĻŽā§‡āĻ¨ā§āϟ āϚāĻžāϞ⧁ āĻ•āϰ⧁āύ -Fire up your IDE whether it be Atom, VS Code or even a cloud IDE such as GitPod or GitHub.dev. +āφāĻĒāύāĻžāϰ āφāχāĻĄāĻŋāχ āϚāĻžāϞ⧁ āĻ•āϰ⧁āύ āĻāĻŦāĻ‚ āϏ⧇āϟāĻž āĻāϟāĻŽ, āĻ­āĻŋāĻāϏ āϕ⧋āĻĄ āĻŦāĻž āĻāĻŽāύāĻ•āĻŋ āĻ•ā§āϞāĻžāωāĻĄ āφāχāĻĄāĻŋāχ āϝ⧇āĻŽāύ āĻ—āĻŋāĻŸā§āĻĒāĻĄ āĻŦāĻž āĻ—āĻŋāϟāĻšāĻžāĻŦ.āĻĄā§‡āĻ­ā§‹ āĻšāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ -Create a file called `streamlit_app.py` +āĻāĻ•āϟāĻŋ āĻĢāĻžāχāϞ āϤ⧈āϰ⧀ āĻ•āϰ⧁āύ āϝāĻžāϰ āύāĻžāĻŽ `streamlit_app.py` -## Entering your first lines of code +## āφāĻĒāύāĻžāϰ āϕ⧋āĻĄā§‡āϰ āĻĒā§āϰāĻĨāĻŽ āϞāĻžāχāύāϗ⧁āϞāĻŋ āĻĒā§āϰāĻŦ⧇āĻļ āĻ•āϰāĻžāύ⧋ āĻšāĻšā§āϛ⧇ -To the newly created file, enter the following lines of code: +āϏāĻĻā§āϝ āϤ⧈āϰāĻŋ āĻĢāĻžāχāϞāϟāĻŋāϤ⧇, āϕ⧋āĻĄā§‡āϰ āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āϞāĻžāχāύāϗ⧁āϞāĻŋ āϞāĻŋāϖ⧁āύ: ``` import streamlit as st @@ -16,16 +16,17 @@ import streamlit as st st.write('Hello world!') ``` -Save the file. +āĻĢāĻžāχāϞāϟāĻŋ āϏāĻ‚āϰāĻ•ā§āώāĻŖ āĻ•āϰ⧁āύāĨ¤ -## Fire up the command line terminal +## āϤāĻžāϰāĻĒāϰ āĻ•āĻŽā§āϝāĻžāĻ¨ā§āĻĄ āϞāĻžāχāύ āϟāĻžāĻ°ā§āĻŽāĻŋāύāĻžāϞ āϚāĻžāϞ⧁ āĻ•āϰ⧁āύ -To the terminal, enter the following: +āϟāĻžāĻ°ā§āĻŽāĻŋāύāĻžāϞ⧇ āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āϞāĻžāχāύāϗ⧁āϞāĻŋ āϞāĻŋāϖ⧁āύ: ``` streamlit run streamlit_app.py ``` -A browser window should pop-up showing the newly created Streamlit app. +āĻāĻ•āϟāĻŋ āĻŦā§āϰāĻžāωāϜāĻžāϰ āωāχāĻ¨ā§āĻĄā§‹ āĻĒāĻĒ-āφāĻĒ āĻšāĻ“āϝāĻŧāĻž āωāϚāĻŋāϤ āϏāĻĻā§āϝ āύāĻŋāĻ°ā§āĻŽāĻŋāϤ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒāϟāĻŋ āĻĻ⧇āĻ–āĻžāϝāĻŧāĨ¤ + +**āĻ…āĻ­āĻŋāύāĻ¨ā§āĻĻāύ!** āφāĻĒāύāĻŋ āĻāχāĻŽāĻžāĻ¤ā§āϰ āφāĻĒāύāĻžāϰ āĻĒā§āϰāĻĨāĻŽ āĻ¸ā§āĻŸā§āϰāĻŋāĻŽāϞāĻŋāϟ āĻ…ā§āϝāĻžāĻĒ āϤ⧈āϰāĻŋ āĻ•āϰ⧇āϛ⧇āύ! -**Congratulations!** You have just created your first Streamlit app! From 2b0ed95c7139cf06bf02c3469a30fc9e3b64bc4a Mon Sep 17 00:00:00 2001 From: Ujjayanta Date: Fri, 24 Mar 2023 12:10:11 +0100 Subject: [PATCH 48/48] Update streamlit_app.py --- streamlit_app.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/streamlit_app.py b/streamlit_app.py index 80e22b3..a550c54 100644 --- a/streamlit_app.py +++ b/streamlit_app.py @@ -33,7 +33,7 @@ def update_params(): st.session_state.day = days_list[0] selected_day = st.selectbox( - "Start the Challenge 👇", days_list, key="day", on_change=update_params + "āĻšā§āϝāĻžāϞ⧇āĻžā§āϜ āĻļ⧁āϰ⧁ āĻ•āϰ⧁āύ 👇", days_list, key="day", on_change=update_params ) with st.expander("#30DaysOfStreamlit āϏāĻŽā§āĻĒāĻ°ā§āĻ•āĻŋāϤ"):