لم يكن عرض مشروع Python بواجهة مستخدم أسهل من أي وقت مضى. باستخدام Streamlit Framework ، يمكنك إنشاء واجهة مستخدم تستند إلى المتصفح باستخدام رمز Python فقط. في هذه المقالة ، سنقوم بإنشاء واجهة مستخدم لبرنامج المتاهة المفصل في المقالة السابقة .
ستريمليت
Streamlit هو إطار ويب لعلماء البيانات لنشر النماذج والمرئيات بسهولة باستخدام Python. إنه سريع وبسيط ، بالإضافة إلى أنه جميل ومريح. هناك أدوات مدمجة لإدخال المستخدم مثل تحميل الصور وشرائط التمرير وإدخال النص وعناصر HTML المألوفة الأخرى مثل مربعات الاختيار وأزرار الاختيار. عندما يتفاعل المستخدم مع تطبيق التدفق ، يتم إعادة تشغيل البرنامج النصي python من الأعلى إلى الأسفل ، وهو أمر مهم يجب مراعاته عند النظر في الحالات المختلفة لتطبيقك.
يمكنك تثبيت Streamlit باستخدام النقطة:
pip install streamlitوقم بتشغيل الدفق في نص Python النصي:
streamlit run app.pyاستخدم حالات
في المقالة السابقة ، أنشأنا برنامج Python الذي سوف يجتاز متاهة معطى ملف صورة وموقع بداية / نهاية. نود تحويل هذا البرنامج إلى تطبيق ويب من صفحة واحدة حيث يمكن للمستخدم تحميل صورة متاهة (أو استخدام صورة متاهة افتراضية) ، وضبط مواقع البداية والنهاية للمتاهة ، ورؤية المتاهة التي اجتازها.
أولاً ، دعنا ننشئ واجهة مستخدم لمحمل الصور والقدرة على استخدام الصورة الافتراضية. يمكننا إضافة إخراج النص باستخدام وظائف مثل st.write () أو st.title (). نقوم بتخزين الملف الذي تم تحميله ديناميكيًا باستخدام الوظيفة st.file_uploader (). أخيرًا ، ستعرض st.checkbox () قيمة منطقية بناءً على ما إذا كان المستخدم قد حدد المربع أم لا.
import streamlit as st
import cv2
import matplotlib.pyplot as plt
import numpy as np
import maze
st.title('Maze Solver')
uploaded_file = st.file_uploader("Choose an image", ["jpg","jpeg","png"]) #image uploader
st.write('Or')
use_default_image = st.checkbox('Use default maze')النتيجة:
بعد ذلك يمكننا عرض صورتنا الافتراضية أو الصورة المحملة بتنسيق صورة OpenCV قابل للاستخدام.
if use_default_image:
opencv_image = cv2.imread('maze5.jpg')
elif uploaded_file is not None:
file_bytes = np.asarray(bytearray(uploaded_file.read()), dtype=np.uint8)
opencv_image = cv2.imdecode(file_bytes, 1)بمجرد تحميل الصورة ، نريد أن نظهر الصورة ، مع وضع علامة على نقطة البداية والنهاية. سنستخدم أشرطة التمرير للسماح للمستخدم بنقل هذه النقاط. تضيف الدالة st.sidebar () شريطًا جانبيًا إلى الصفحة ، ويقبل st.slider () عدديًا ضمن الحد الأدنى والحد الأقصى. يمكننا تحديد القيم الدنيا والقصوى لشريط التمرير بشكل ديناميكي اعتمادًا على حجم صورة المتاهة الخاصة بنا.
if opencv_image is not None:
st.subheader('Use the sliders on the left to position the start and end points')
start_x = st.sidebar.slider("Start X", value= 24 if use_default_image else 50, min_value=0, max_value=opencv_image.shape[1], key='sx')
start_y = st.sidebar.slider("Start Y", value= 332 if use_default_image else 100, min_value=0, max_value=opencv_image.shape[0], key='sy')
finish_x = st.sidebar.slider("Finish X", value= 309 if use_default_image else 100, min_value=0, max_value=opencv_image.shape[1], key='fx')
finish_y = st.sidebar.slider("Finish Y", value= 330 if use_default_image else 100, min_value=0, max_value=opencv_image.shape[0], key='fy')
marked_image = opencv_image.copy()
circle_thickness=(marked_image.shape[0]+marked_image.shape[0])//2//100 #circle thickness based on img size
cv2.circle(marked_image, (start_x, start_y), circle_thickness, (0,255,0),-1)
cv2.circle(marked_image, (finish_x, finish_y), circle_thickness, (255,0,0),-1)
st.image(marked_image, channels="RGB", width=800)
كلما قام المستخدم بتعديل أشرطة التمرير ، يتم إعادة رسم الصورة بسرعة وتتغير النقاط.
بعد أن يحدد المستخدم وضعي البداية والنهاية ، نريد زرًا لحل المتاهة وعرض الحل. يتم عرض عنصر st.spinner () فقط أثناء تشغيل العملية الفرعية الخاصة به ، ويتم استخدام استدعاء st.image () لعرض الصورة.
if marked_image is not None:
if st.button('Solve Maze'):
with st.spinner('Solving your maze'):
path = maze.find_shortest_path(opencv_image,(start_x, start_y),(finish_x, finish_y))
pathed_image = opencv_image.copy()
path_thickness = (pathed_image.shape[0]+pathed_image.shape[0])//200
maze.drawPath(pathed_image, path, path_thickness)
st.image(pathed_image, channels="RGB", width=800)
زر
الحل
انتاج |
في أقل من 40 سطرًا من التعليمات البرمجية ، أنشأنا واجهة مستخدم بسيطة لتطبيق تصوير Python. لم نكن بحاجة إلى كتابة أي رمز واجهة تقليدي. بالإضافة إلى قدرة Streamlit على استيعاب كود Python البسيط ، يقوم Streamlit بإعادة تشغيل الأجزاء المطلوبة من النص البرمجي بذكاء من الأعلى إلى الأسفل كلما تفاعل المستخدم مع الصفحة أو عندما يتغير النص البرمجي. هذا يسمح بالتدفق المباشر للبيانات والتطور السريع.
يمكنك العثور على الشفرة الكاملة على Github والجزء الأول الذي يشرح خوارزمية حل المتاهة هنا . يمكن العثور على وثائق Streamlit بما في ذلك المفاهيم الهامة وعناصر واجهة المستخدم الإضافية هنا .
تعرف على تفاصيل كيفية الحصول على مهنة رفيعة المستوى من الصفر أو المستوى الأعلى في المهارات والراتب من خلال الحصول على دورات SkillFactory المدفوعة عبر الإنترنت:
- دورة تعلم الآلة (12 أسبوعًا)
- تدريب مهنة علوم البيانات من الصفر (12 شهرًا)
- مهنة التحليلات مع أي مستوى بداية (9 أشهر)
- بايثون لدورة تطوير الويب (9 شهور)