۵ روش برای شخصی‌سازی رابط کاربری Streamlit

منتشر‌شده در: towardsdatascience به تاریخ ۲۷ آوریل ۲۰۲۱
لینک منبع: 5 ways to customise your Streamlit UI

آیا می‌خواهید یک برنامه کاربردی وب بسازید، اما نمی‌خواهید هیچ یک از چارچوب‌های برنامه کاربردی وب را یاد بگیرید؟ آیا می‌خواهید یک برنامه کاربردی راه‌اندازی کنید، اما متوجه می‌شوید که Heroku بیش از حد پیچیده است؟ پس streamlit برای شما است!

حتی فقط دانشمندان داده مانند من، که نمی‌توانند تفاوت بین HTML و JavaScript را بیان کنند، می‌توانند یک برنامه را در هر زمانی با استفاده ازStreamlit بالا بیاورند.

البته به‌آسانی اشکالات به وجود می‌آیند، به عنوان مثال اینکه چگونه جنبه‌های خاصی از رابط کاربر را شخصی‌سازی کنیم واضح نیست. بنابراین اگر در Streamlit تازه‌کار هستید، ممکن است از روش‌های ساده زیر برای سفارشی کردن رابط کاربری خود آگاه نباشید …

مطالعه مقاله کد پایتون خود را با سرعت C اجرا کنید! توصیه می‌شود.

۱. دکمه منو را مخفی کنید.

به طور پیش‌فرض، یک دکمه همبرگری در بالا سمت راست برنامه شما وجود دارد، که وقتی روی آن کلیک شود منوی Streamlit باز خواهد شد.

خوشبختانه شما می‌توانید این کار را با اضافه کردن موارد کوچک ذیل انجام دهید (با تشکر از مانی برای این کار): در‌حالی‌که این منو شامل تمام انواع موارد درجه یک است، ممکن است بخواهید زمانی که برنامه خود را برای کاربران مستقر می‌کنید، آن را پنهان کنید.

st.markdown(""" <style>

#MainMenu {visibility: hidden;}

footer {visibility: hidden;}

</style> """, unsafe_allow_html=True)

۲. طرح را متراکم کنید.

این روزها ما بیش از حد زندگی خود را صرف اسکرول می کنیم بنابراین مسئولیت تمام توسعه دهندگان نرم‌افزار این است که تلاش کنند تا جایی که ممکن است بر روی یک صفحه نمایش قرار گیرند، در نتیجه میزان پیمایش کاربران خود را کاهش دهند.

یک گام کوچک که می‌توانید بردارید، حذف لایه‌گذاری بین اجزای برنامه‌تان با استفاده از موارد زیر است (با تشکر از مارک برای این کار) :

padding = 0
st.markdown(f""" <style>
.reportview-container .main .block-container{{
padding-top: {padding}rem;
padding-right: {padding}rem;
padding-left: {padding}rem;
padding-bottom: {padding}rem;
}} </style> """, unsafe_allow_html=True)

۳. پالت رنگ سفارشی

اگر کمی عمیق‌تر در «streamlit» کاوش کنید، خیلی زود متوجه می‌شوید که انجام هر نوع کاری چقدر آسان است. به عنوان مثال، من طرفدار زیبایی‌شناسی آبی هستم، و مشتاق بودم که برای برنامه خود به این سمت بروم.

تمام کاری که من باید انجام می‌دادم این بود که یک پوشه streamlit در مخزن خود ایجاد کنم و این فایلconfig.toml (که فقط برخی از گزینه‌های پیکربندی موجود را تنظیم می کند) را اضافه کنم:

[theme]
primaryColor="#2214c7"
backgroundColor="#ffffff"
secondaryBackgroundColor="#e8eef9"
textColor="#000000"
font="sans serif"

شگفت‌انگیز است که یک زیبایی هنری مانند زیبایی‌شناسی آبی می‌تواند به عنوان یک کد کامپیوتری ساده نمایش داده شود.

۴. عنوان و آیکون صفحه را تنظیم کنید.

سال گذشته مجموعه پیکربندی صفحه اضافه شد (به لطف اکرولمیر). این مسئله به شما این امکان را می‌دهد که در میان موارد دیگر، عنوان و شمایلی که در زبانه مرورگر ظاهر می‌شود را تنظیم کنید:

st.set_page_config(page_title=’TrekViz’, page_icon=” ”)

اکنون streamlit از پشتیبانی کامل شکلک برخوردار است.

۵. ستون‌های چندگانه

ستون‌های چندگانه تنها یکی از گزینه‌های چیدمان اضافه‌شده توسط Streamlit در اواخر سال ۲۰۲۰ است. داشتن سه ستون اکنون به سادگی ۱، ۲، ۳ است:

st1, st2, st3 = st.beta_columns(3)

من به شما گفته بودم که حتی می‌توانید یک چیدمان شبکه‌ای ایجاد کنید، اما این فراتر از درک من است.

نتیجه‌گیری

نرم‌افزار streamlit در نگاه اول، فاقد قابلیت شخصی‌سازی زیادی به نظر می‌رسد. اما در زیر سطح، جهانی از امکانات وجود دارد، که تنها تعداد کمی از آن‌ها در این مقاله ذکر شده‌اند. این تیم به طور مداوم بر روی ویژگی‌های جدید کار می‌کند، و نمونه‌های بسیارخوبی از برنامه‌هایStreamlit برای الهام گرفتن وجود دارد. بنابراین دفعه بعد که نیاز دارید یک برنامه کاربردی ایجاد کنید، چرا استریم را در نظر نگیرید؟

این متن با استفاده از ربات ترجمه مقالات فناوری اطلاعات ترجمه شده و به صورت محدود مورد بازبینی انسانی قرار گرفته است.در نتیجه می‌تواند دارای برخی اشکالات ترجمه باشد.

مقالات لینک‌شده در این متن می‌توانند به صورت رایگان با استفاده از مقاله‌خوان ترجمیار به فارسی مطالعه شوند.