diff --git a/README.md b/README.md index 7b2de03..3060dcd 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,50 @@ -# 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 +## āĻĒā§āĻ°āĻ¸ā§āĻ•āĻžāĻ° -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) ([āĻ¨āĻžāĻ¨ āĻšā§ā§ŸāĻžāĻ‚](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/) diff --git a/content/Day1.md b/content/Day1.md index 1bd1d16..5264ddf 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: +## **āĻ¸ā§āĻŸā§āĻ°āĻŋāĻŽāĻ˛āĻŋāĻŸ āĻĄā§‡āĻŽā§‹ āĻ…ā§āĻ¯āĻžāĻĒ āĻšāĻžāĻ˛ā§ āĻ•āĻ°āĻž** +āĻ…ā§āĻ¯āĻžāĻĒ āĻšāĻžāĻ˛ā§ āĻ•āĻ°āĻ¤ā§‡: ```bash streamlit hello ``` 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) 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) 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) diff --git a/content/Day13.md b/content/Day13.md index 525b3bc..b814af6 100644 --- a/content/Day13.md +++ b/content/Day13.md @@ -1,12 +1,13 @@ -# 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). -> 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/) diff --git a/content/Day14.md b/content/Day14.md index e6a9128..fcf6f27 100644 --- a/content/Day14.md +++ b/content/Day14.md @@ -1,31 +1,31 @@ # 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? +## āĻ•āĻŋ āĻ¸ā§āĻŸā§āĻ°āĻŋāĻŽāĻ˛āĻŋāĻŸ āĻ‰āĻĒāĻžāĻĻāĻžāĻ¨ āĻĒāĻžāĻ“āĻ¯āĻŧāĻž āĻ¯āĻžāĻ¯āĻŧ? -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) 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 āĻĄāĻ•ā§āĻŽā§‡āĻ¨ā§āĻŸā§‡āĻļāĻ¨ā§‡āĨ¤ 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/) āĻ†āĻ—ā§āĻ°āĻšā§‡āĻ° āĻ°āĻ‚ āĻ¨āĻŋāĻ°ā§āĻŦāĻžāĻšāĻ¨ āĻ•āĻ°āĻžāĻ° āĻœāĻ¨ā§āĻ¯ āĻāĻ•āĻŸāĻŋ āĻĻā§āĻ°ā§āĻĻāĻžāĻ¨ā§āĻ¤ āĻšāĻžāĻ¤āĻŋāĻ¯āĻŧāĻžāĻ°āĨ¤ 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) diff --git a/content/Day18.md b/content/Day18.md index 0f86239..33d2336 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) 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) 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! 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 diff --git a/content/Day21.md b/content/Day21.md index 2ad6838..ce93c1e 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) 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/) 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) diff --git a/content/Day24.md b/content/Day24.md index fc12a46..a0c9853 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) 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) 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/) diff --git a/content/Day27.md b/content/Day27.md index f9b791e..e8c618c 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) 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) 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) 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. 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! +āĻ†āĻļāĻž āĻ•āĻ°āĻŋ āĻ†āĻĒāĻ¨āĻŋ āĻāĻ‡ āĻŸāĻŋāĻ‰āĻŸā§‹āĻ°āĻŋāĻ¯āĻŧāĻžāĻ˛āĻŸāĻŋ āĻ‰āĻĒāĻ­ā§‹āĻ— āĻ•āĻ°ā§‡āĻ›ā§‡āĻ¨, āĻšā§āĻ¯āĻžāĻĒāĻŋ āĻ¸ā§āĻŸā§āĻ°āĻŋāĻŽāĻ˛āĻŋāĻŸāĻŋāĻ‚! 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)]()] 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) 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)āĨ¤ 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. 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) + diff --git a/content/Day9.md b/content/Day9.md index 931bb21..861cb77 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) 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 +# āĻ›āĻŦāĻŋ diff --git a/streamlit_app.py b/streamlit_app.py index e18e771..a550c54 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] @@ -33,40 +33,40 @@ 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("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