چگونه می توان یک داشبورد زنده در زمان واقعی را با streamlit ساخت

آیا تا به حال فکر کرده اید که می توانید یک داشبورد در زمان واقعی در پایتون بسازید بدون اینکه یک خط HTML ، CSS یا JavaScript بنویسید؟

بله، تو میتونی! در این پست ، شما یاد خواهید گرفت:

1. نحوه وارد کردن کتابخانه های مورد نیاز و خواندن داده های ورودی
2. نحوه تنظیم داشبورد اساسی
3. نحوه طراحی رابط کاربری
4. نحوه تازه کردن داشبورد برای زمان واقعی یا فید داده های زنده
5. نحوه به روزرسانی خودکار

نمی توانید صبر کنید و می خواهید به سمت راست پرش کنید؟در اینجا Repo Code و آموزش ویدیویی آورده شده است.

داشبورد زنده در زمان واقعی چیست؟

داشبورد زنده در زمان واقعی یک برنامه وب است که برای نمایش شاخص های کلیدی عملکرد (KPI) استفاده می شود.

اگر می خواهید یک داشبورد بسازید تا بتواند بازار سهام ، داده های سنسور IoT ، آموزش مدل AI یا هر چیز دیگری را با داده های جریان ، نظارت کنید ، این آموزش برای شما مناسب است.

1. نحوه وارد کردن کتابخانه های معادل R و خواندن داده های ورودی

در اینجا کتابخانه هایی که برای این داشبورد نیاز دارید وجود دارد:

• جریان (ST). همانطور که ممکن است حدس زده باشید ، برای ساختن برنامه وب/داشبورد از StreamLit استفاده خواهید کرد.
• زمان ، numpy (NP). از آنجا که شما منبع داده ای ندارید ، باید یک فید داده زنده را شبیه سازی کنید. برای تولید داده ها از NUMPY استفاده کنید و آن را با کتابخانه TIME (مگر اینکه از قبل فید داده زنده داشته باشید) به صورت زنده (حلقه دار) بسازید.
• پاندا (PD). برای خواندن منبع داده ورودی از پاندا استفاده خواهید کرد. در این حالت ، از یک فایل مقادیر جدا شده کاما (CSV) استفاده خواهید کرد.

پیش بروید و تمام کتابخانه های مورد نیاز را وارد کنید:

می توانید داده های ورودی خود را در CSV با استفاده از pd. read_csv () بخوانید. اما به یاد داشته باشید ، این منبع داده می تواند از API ، JSON یا یک شی XML یا حتی یک CSV که در فواصل منظم به روز می شود ، پخش شود.

در مرحله بعد ، تماس pd. read_csv () را در یک تابع جدید get_data () اضافه کنید تا به درستی ذخیره شود.

حافظه پنهان چیست؟ساده است. اضافه کردن دکوراتور @St. Experimental_Memo باعث می شود عملکرد get_data () یک بار اجرا شود. سپس هر بار که برنامه خود را دوباره اجرا می کنید ، داده ها یادداشت می ماند! به این ترتیب می توانید دوباره و دوباره از بارگیری مجموعه داده جلوگیری کنید. اطلاعات بیشتر در مورد ذخیره سازی در اسناد Streamlit را بخوانید.

2. نحوه انجام تنظیمات داشبورد A asic

حالا بیایید یک داشبورد اساسی را تنظیم کنیم. با پارامترهایی که به هدف زیر خدمت می کنند ، از Stset_page_config () استفاده کنید:

• عنوان برنامه وب page_title در برچسب HTML و در برگه مرورگر
• Favicon که از آرگومان page_icon استفاده می کند (همچنین در برگه مرورگر)
• Layout = "Wide" که برنامه وب/داشبورد وب را با یک طرح صفحه گسترده ارائه می دهد

3. نحوه طراحی یک رابط u ser

یک داشبورد معمولی حاوی مؤلفه های اصلی طراحی UI زیر است:

• عنوان صفحه
• یک فیلتر سطح بالا
• کارتهای KPI/خلاصه
• نمودارهای تعاملی
• یک جدول داده

بیایید با جزئیات به آنها بپردازیم.

عنوان صفحه

عنوان به عنوان برچسب ارائه می شود. برای نمایش عنوان ، از St. Title () استفاده کنید. رشته "داشبورد علوم داده در زمان واقعی / زنده" را می گیرد و آن را در عنوان صفحه نمایش می دهد.

فیلتر سطح بالا

ابتدا با استفاده از St. Selectbox () فیلتر را ایجاد کنید. با لیستی از گزینه ها ، کشویی را نمایش می دهد. برای تولید آن ، عناصر منحصر به فرد ستون کار را از DataFrame DF بگیرید. مورد انتخاب شده در یک شی به نام job_filter ذخیره می شود:

اکنون که UI فیلتر شما آماده است ، از job_filter استفاده کنید تا DataFrame DF خود را فیلتر کنید.

کارتهای KPI/خلاصه

قبل از اینکه بتوانید KPI های خود را طراحی کنید ، با استفاده از St.columns (3) طرح خود را به یک طرح 3 ستون تقسیم کنید. این سه ستون KPI1 ، KPI2 و KPI3 است. St. Metric () به شما در ایجاد کارت KPI کمک می کند. از آن برای پر کردن یک kpi در هر یک از این ستون ها استفاده کنید.

برچسب St. Metric () به شما در نمایش عنوان KPI کمک می کند. مقدار ** استدلالی است که به شما کمک می کند تا متریک (مقدار) واقعی و افزودنی هایی مانند Delta را نشان دهید تا مقدار KPI را با هدف KPI مقایسه کنید.

نمودارهای تعاملی

طرح خود را به 2 ستون تقسیم کرده و آنها را با نمودارها پر کنید. بر خلاف متریک فوق ، از بند With برای پر کردن نمودارهای تعاملی در ستون های مربوطه استفاده کنید:

• چگالی_مپ در fig_col1
• هیستوگرام در FIG_COL2

جدول داده

برای نمایش قاب داده از St. DataFrame () استفاده کنید. به یاد داشته باشید ، قاب داده شما بر اساس گزینه فیلتر انتخاب شده در بالا فیلتر می شود:

4- نحوه تجدید داشبورد برای زمان واقعی یا فید داده های زنده

از آنجایی که هنوز یک فید داده در زمان واقعی یا زنده ندارید ، می خواهید قاب داده موجود خود را شبیه سازی کنید (مگر اینکه قبلاً یک فید داده زنده یا داده های زمان واقعی در جریان داشته باشید).

برای شبیه سازی آن ، از یک حلقه برای 0 تا 200 ثانیه استفاده کنید (به عنوان گزینه ، در هر تکرار ، خواب /مکث دوم خواهید داشت):

در داخل حلقه ، از تصادفی Numpy استفاده کنید. برای تولید یک عدد تصادفی بین 1 تا 5 استفاده کنید. از آن به عنوان یک ضرب برای تصادفی کردن مقادیر ستون های سن و تعادل که برای معیارها و نمودارهای خود استفاده کرده اید استفاده کنید.

5. چگونه به یک مؤلفه UTOUDATE

اکنون می دانید که چگونه یک برنامه وب StreamLit انجام دهید!

برای نمایش فید داده های زنده با KPI/Metrics/نمودارهای به روزرسانی خودکار ، تمام این اجزای موجود در یک ظرف تک عنصر را با استفاده از Stempty () قرار دهید. آن را نگهبان مکان بنام:

اجزای خود را با استفاده از یک بند با یک محل نگهدارنده قرار دهید. به این ترتیب آنها را در هر تکرار به روزرسانی داده جایگزین خواهید کرد. کد زیر حاوی مکان نگهدارنده است.container () به همراه مؤلفه های UI که در بالا ایجاد کرده اید:

ودر اینجا کد کامل است!

برای اجرای این داشبورد در رایانه محلی خود:

1. کد را به عنوان یک app. py یکپارچه ذخیره کنید.
2. ترمینال یا فرمان خود را در همان مسیری که App. py در آن ذخیره می شود باز کنید.
3. EXECUTE streamLit Run App. py برای داشبورد برای شروع کار در LocalHost خود و پیوند در ترمینال شما نمایش داده می شود و همچنین به عنوان یک برگه جدید در مرورگر پیش فرض شما باز می شود.

پیچیدن

تبریک می گویم! شما یاد گرفته اید که چگونه داشبورد زنده در زمان واقعی خود را با Streamlit بسازید. امیدوارم در این راه سرگرم شوید.

اگر سوالی دارید ، لطفاً آنها را در زیر نظرات خود را در زیر بگذارید یا در [email protected] یا در LinkedIn به من دسترسی پیدا کنید.< SPAN> اجزای خود را با استفاده از یک بند با یک محل نگهدارنده قرار دهید. به این ترتیب آنها را در هر تکرار به روزرسانی داده جایگزین خواهید کرد. کد زیر حاوی مکان نگهدارنده است.container () به همراه مؤلفه های UI که در بالا ایجاد کرده اید: