كيفية إنشاء أزرار في Jupyter

تفاعل مع وظائفك عن طريق النقر فوق الأزرار الموجودة في دفتر ملاحظاتك

الصورة من قبل أوين بيرد على Unsplash

أنا حقًا أحب Jupyter Notebooks. عندما أستخدم واحدًا ، أشعر أنه كتاب تهجئة تفاعلي: قادر على عرض النصوص والصور ومقاطع الفيديو ، بما في ذلك صيغ الرياضيات والرمز ، وإنشاء بيئة داخلية مع المتغيرات والوظائف الخاصة بك. مقارنة بنحت الأحجار مع ملاحظاتك ، تجعلك هذه الأداة تشعر وكأنك في المستقبل.

وما زال هناك جانب مثير للاهتمام من أجهزة الكمبيوتر المحمولة لم أذكرها: يمكنك أيضًا التفاعل بفاعلية مع الكمبيوتر الدفتري الخاص بك عن طريق التعامل مع التطبيقات المصغّرة مباشرة والسماح بنوع معين من تفاعلات المستخدم-الكمبيوتر. دعونا نرى كيف يمكننا القيام بذلك باستخدام ipywidgets ، وهي حزمة رائعة جدًا بها جميع الأدوات التي تحتاجها لإنشاء واجهة مستخدم رسومية بسيطة.

التركيب

لنبدأ من خلال تثبيت وتمكين الحزمة التي تنفذ الكود التالي في جهازك.

نقطة تثبيت ipywidgets
jupyter nbextension تمكين --py widgetsnbextension

إذا كنت تعمل مع Jupyter Lab: ستحتاج إلى تثبيت node.js وتمكينه باستخدام أمر مختلف:

jupyter labextension install @ jupyter-widgets / jupyterlab-manager

قبل أن نبدأ ، من المهم التمييز بين نوعين من الحاجيات:

  • يدعم بعضها التفاعل مع المستخدم ، على سبيل المثال إطارات النص والأزرار وخانات الاختيار.
  • بينما يتصرف آخرون كحاويات تجمع عناصر واجهة تعامل المستخدم معًا ، على سبيل المثال الصناديق واللوحات وعلامات التبويب.

خلق الحاجيات

الآن بعد أن تم تثبيت الحزمة لدينا ، يمكننا على الفور إنشاء أي عنصر واجهة مستخدم في دفتر ملاحظاتنا. يمكنك النقر هنا لمراجعة قائمة الحاجيات المتاحة حاليًا على طول الكود لتهيئتها. دعونا نرى بعض الأمثلة التي تحدد بعض الحاجيات:

# بعض الوظائف المفيدة لاستخدامها على طول الحاجيات
من IPython.display عرض الاستيراد ، تخفيض السعر ، clear_output
# حزم القطعة
استيراد ipywidgets كما الحاجيات
# تحديد بعض الحاجيات
النص = الحاجيات. النص (
       القيمة = "النص الخاص بي" ،
       الوصف = "العنوان" ،)
التقويم = widgets.DatePicker (
           الوصف = "اختر التاريخ")
شريط التمرير = الحاجيات.
         القيمة = 1،
         دقيقة = 0،
         الحد الأقصى = 10.0،
         خطوة = 0.1،)
القائمة = الحاجيات.
       خيارات = ['أحمر' ، 'أزرق' ، 'أخضر'] ،
       القيمة = 'الحمراء'،
       وصف = 'اللون:')
مربع الاختيار = الحاجيات.
           الوصف = "تحقق لعكس" ،)

كما هو موضح أعلاه (وفي معظم الحالات) ، فإن تهيئة عناصر واجهة المستخدم تتضمن استدعاء وظيفة بسيطة وتحديد بعض الحجج التي تشرح نفسها بنفسها ، إنها حقًا واضحة جدًا. حددنا هنا قائمة منسدلة وشريط تمرير وخانة اختيار ونافذة نصية وتقويم في دفتر ملاحظاتنا. يمكنك عرض أي منها عن طريق استدعاء الكائن على خلية:

قائمة طعام

ولكن لعرضها كليًا ، نحتاج إلى استخدام أداة حاوية.

خلق الحاويات

يتم تعريف أكثرها شيوعًا باستخدام الدالتين VBox و HBox وتعمل على عرض التطبيقات المصغّرة رأسيًا أو أفقيًا على التوالي. يتوقعون حجة واحدة: قائمة الحاجيات.

box = widgets.VBox ([نص ، شريط تمرير ، قائمة ، تقويم ، مربع اختيار])
صندوق

نظرًا لأن حاويتي VBox و HBox هما أيضًا عنصر واجهة مستخدم ، يمكننا استخدامها داخل بعضها البعض. دعونا نرى مثالا وهمية:

widgets.HBox ([box، box])
يتم عرض حاوية VBox الخاصة بنا الآن مرتين أفقياً باستخدام HBox

بدلاً من ذلك ، يمكننا استخدام نوع آخر من الحاوية في الأعلى. دعونا نرى الحاوية Tab. في حين أنه أكثر تعقيدًا بعض الشيء ، فإنه يساعدنا على استخدام أفضل للمساحة:

# تحديد قائمة بمحتويات نوافذنا
الأطفال = [مربع ، مربع]
# تهيئة علامة تبويب
علامة تبويب = widgets.Tab ()
# وضع علامة التبويب ويندوز
tab.children = الأطفال
# تغيير عنوان النافذة الأولى والثانية
tab.set_title (0 ، "مربع")
tab.set_title (1 ، "نسخة من المربع")
التبويب
الاحتفاظ بحاويات VBox في نافذتين مختلفتين باستخدام علامة تبويب

الحاجيات عقد سمات

الآن بعد أن عرفنا كيفية إنشاء عناصر واجهة مستخدمنا وتخطيطها ، من المهم حقًا أن نضع في اعتبارنا أن كل من هذه الأدوات يتم تعريفها ككائن ويحمل سماته الخاصة. يمكنك القول أن كل عنصر واجهة مستخدم لديه مجموعة من الفروق الدقيقة ، على سبيل المثال ، تحتوي القائمة على سمة تسمى خيارات:

خيارات القائمة
مجموعة من الخيارات المحددة لدينا

من شأن إعادة تعريف هذه السمة تغيير الخيارات الحالية لعنصر واجهة المستخدم.

menu.options = ("أحمر" ، "أزرق" ، "أخضر" ، "أسود")
قائمة طعام

باستثناء الحاويات ، تعتبر السمة المشتركة بين جميع عناصر واجهة المستخدم التي حددناها أعلاه هي القيمة وقد تكون الأكثر فائدة. هذا يعني بالضبط ما يجب أن يفعله: يطلق عليه إرجاع القيمة الحالية لعنصر واجهة المستخدم.

# القيمة الحالية للنص ، مربع الاختيار والتقويم
print ('نص القطعة له قيمة {} ، من {}'. تنسيق (text.value ، نوع (text.value)))
print ('خانة اختيار عنصر واجهة المستخدم لها قيمة {} ، من {}'. تنسيق (checkbox.value ، اكتب (checkbox.value)))
print ('يحتوي تقويم عنصر واجهة المستخدم على قيمة {} ، من {}'. تنسيق (calendar.value ، اكتب (calendar.value)))
لاحظ أن عناصر واجهة المستخدم المختلفة تحتوي على أنواع مختلفة من القيم!

أن تكون قادرًا على استرداد قيمة عنصر واجهة المستخدم لدينا هو ما يسمح لك حقًا بالتفاعل مع الشفرة الخاصة بك. دعونا نرى مثالا وهمية باستخدام القائمة.

# سنستخدم قيمة القائمة لعرض قطعة الأرض وعنوانها
استيراد matplotlib.pyplot كما PLT
plt.plot ([1،2،3] ، لون = قائمة. قيمة)
plt.title ('A {} line'.format (menu.value))
plt.show ()

سيؤدي تغيير قيمة menuwidget وإعادة تنفيذ الرمز أعلاه إلى تغيير عنوان السطر ولونه. يمكننا القيام بذلك لأن خيارات القائمة تتوافق مع القيم الصالحة للون وسيطة plt.plot.

هذا يسلط الضوء على خاصية مفيدة من الحاجيات: يمكنك استخدامها للسيطرة على الأشياء دون الحاجة إلى كتابتها بوضوح.

إنشاء أزرار

ربما لاحظت أن كل ما قمنا به أعلاه يشمل النقر على عناصر واجهة المستخدم واختيار العناصر. ولكن لكي نكون قادرين فعليًا على تشغيل شيء ما ، فإننا ننفذ أسطر من التعليمات البرمجية. نحتاج إلى عنصر واجهة مستخدم قادر على إطلاق استجابة وتنفيذ التعليمات البرمجية ، نحتاج إلى قوة الزر.

تشبه عملية إنشاء زر إلى ما يشبه طريقة تعريفنا لعناصر واجهة المستخدم:

button = widgets.Button (description = 'My Button')
لا شيء يحدث ...

ولكن لكي نجعل زرنا يعمل ، نحتاج أيضًا إلى تحديد ما يحدث عندما نضغط عليه. بعبارات بسيطة ، يتحقق هذا من خلال:

  • تحديد عنصر واجهة تعامل مخرجات يعرض الاستجابة.
  • تحديد وظيفة ليتم تنفيذها.
  • ربط زرنا ، الناتج والوظيفة معًا.

إليك مقتطف صغير استخدمه طوال الوقت عند إنشاء زر جديد: سيكون هذا هو القالب الخاص بأمثلةنا.

button = widgets.Button (description = 'My Button')
خارج = الحاجيات. الإخراج ()
def on_button_clicked (_):
      # "ربط الوظيفة بالإخراج"
      بدون:
          # ماذا يحدث عندما نضغط على الزر
          clear_output ()
          طباعة ("يحدث شيء ما!")
# ربط الزر والعمل معًا باستخدام طريقة الزر
button.on_click (on_button_clicked)
# عرض زر وإخراجها معا
widgets.VBox ([زر، انتهت])
لاحظ كيف نستخدم VBox لعرض الزر وإخراجه رأسيًا

تعمل وظيفة clear_output على تحديث عرضنا في كل مرة يتم فيها الضغط على زرنا. إذا تجاهلنا هذه الوظيفة ، فسيؤدي الضغط على الزر عدة مرات إلى طباعة "شيء ما يحدث" عدة مرات ، وهو أمر غير مرغوب فيه. إن عنصر واجهة المستخدم Output widget ممتع حقًا: يمكننا استخدامه لعرض بيانات الطباعة (كما فعلنا أعلاه) ، والمؤامرات ، ومقاطع الفيديو ، والصور ، وأساسًا

أي شيء يعرض بشكل جيد في دفتر Jupyter سيعرض جيدًا في أداة الإخراج.

دعونا نرى مثالًا تافهًا على كيفية استخدامنا لعرض تخفيض السعر.

من IPython.display استيراد تخفيض السعر
# استخدام الإخراج لعرض تخفيض السعر
markdown_out = widgets.Output ()
مع markdown_out:
    display (Markdown ('Slider value is $ {} $'. format (slider.value)))
markdown_out
باستخدام تخفيض السعر لعرض قيمة القطعة

لاحظ أننا نجعل قيمة شريط التمرير بمثابة تعبير رياضي عن طريق إحاطة العنصر النائب برموز $.

أمثلة

الآن وقد أصبح لدينا نظرة عامة حول كيفية تحديد وتنظيم واستخدام الأدوات المصغرة ، رأينا جميع الأدوات التي نحتاجها لتجميع شيء رائع. دعنا نرى بعض الأمثلة العملية! تأكد من نسخ هذه الصقها في دفاتر ملاحظاتك لرؤية التطبيقات المصغّرة قيد التنفيذ.

استكشاف المتغيرات العالمية

يرغب بعض الأشخاص في معرفة المتغيرات المحددة بسهولة في بيئة العمل الخاصة بك. دعنا نقدم القليل من المساعدة لهذا الغرض. سنقوم بعمل قائمة لتحديد خيار من المتغيرات العالمية الخاصة بنا ، وسوف يؤدي الضغط على الزر إلى التحقق من نوعه وطباعته.

  • السطر 4: باستخدام globals ، نحصل على قائمة بجميع المتغيرات العالمية المحددة في نطاقنا.
  • نستبعد المتغيرات ذات الشرطات السفلية ونستخدم الباقي كخيارات لقائمتنا (السطر 12).
  • نقوم بإنشاء زر وإخراج ووظيفة حيث نقوم بطباعة نوع المتغير المحدد (الأسطر 14-20).
  • قم بربط الزر ووظيفته معًا (السطر 22) ، وعرض الحاوية مع الحاجيات لدينا (السطر 24).
نحن نستخدم مقتطف الزر

استكشاف مجموعة البيانات

دعونا نقدم عرضًا آخر لما يمكنك القيام به لاستكشاف مجموعة بيانات باستخدام قائمة وزر مرة أخرى. سنستخدم مستخدمي القائمة لتحديد قيمة محددة ، والضغط على الزر سوف يحسب رؤى متنوعة من مجموعة البيانات وفقًا لها ويعرض النتائج باستخدام تخفيض السعر.

  • في السطر 8 ، نحدد مستخدمي القائمة لدينا بالقيم الفريدة لعمودنا df ['Users'] كخيارات.
  • في السطور 16 و 17 و 18 ، نحدد زرًا ومخرجًا ووظيفة. سوف تستفيد الوظيفة من users.value لتعيين مجموعة بياناتنا وحساب بعض المتغيرات.
  • يتم تمريرها داخل العناصر النائبة في السلسلة (الأسطر 40-48). في السطر 50 ، نربط زرنا بالوظيفة مع طريقة الزر .on_click ().
  • في السطر 52 ، نعرض أخيرًا قائمتنا وزرنا وخرجنا داخل الحاوية VBox.
لا تفعل التطبيقات المصغّرة أي شيء بمفردها ، لذا يتعين عليك كتابة بعض التعليمات البرمجية للوصول إلى مكان ما. يتيح هذا المثال طريقة بديهية لتصور النتائج في البيانات ومشاركتها: فهي تعرض قائمة من الملاحظات.

2D / 3D غرافر

يمكنك أيضًا عرض HTML داخل دفتر ملاحظات ، لذلك دعونا نرى عرضًا تجميعيًا لعناصر واجهة التعامل لإنشاء أداة تعريف للتعبيرات الرياضية باستخدام Graph3d (مكتبة Javascript) و matplotlib. سنقوم باستدعاء قيمة نافذة النص (المعادلة) داخل exec للدالة ، والتي تنفذ كود python كسلسلة. في كل مرة نضغط فيها على الزر ، نحسب النقاط للرسم البياني لدينا من خلال تنفيذ ما بداخل المعادلة. قيم كرمز python. (أفهم أنه قد يكون هناك طريقة أفضل للقيام بذلك).

كتبت بعض التعليمات حول كيفية استخدامها:

رسم بياني ثنائي الأبعاد

كتابة إما X أو Y في مربع النص المعادلة سوف تجعل قطعة في بعدين. إذا دخلنا في كل من X و Y فسوف يعرض مؤامرة ثلاثية الأبعاد.

3D الرسم البياني

نحن هنا نستخدم نفس الخطوات كما كان من قبل: نحن نحدد زرًا ومخرجًا ووظيفة (تستخدم قيم عناصر واجهة المستخدم الأخرى) ونربطها معًا. هذا هو الشيء الرئيسي الذي تحتاج إلى تذكره إذا كنت تريد استخدام أزرار للتفاعل مع التعليمات البرمجية الخاصة بك. نأمل أن يكون هذا واضحًا الآن بما فيه الكفاية.

إليك الرمز الذي استخدمته للقيام بذلك:

إعادة استخدام واجهة المستخدم الرسومية الخاصة بك

بعد أن تكون قد مررت بجهد لتجميع واجهة المستخدم الرسومية ، فأنت تريد أن تكون قادرًا على الاحتجاج بها متى احتجت إلى ذلك. هناك طريقة سريعة لك للاتصال بأدواتك المصغّرة للحصول على المساعدة باستخدام٪ run (أمر سحري مدمج من Jupyter. يمكنك استخدام هذا لتنفيذ شفرة أجهزة الكمبيوتر المحمولة الأخرى في بيئة الكمبيوتر الدفتري الحالي دون أي جهد ، وهذا مفيد جدا.

لنفترض أنك قمت منذ فترة طويلة بتعريف بعض الأدوات المصغرة في ملف يسمى math_widgets.ipynb وتريد الاتصال بها في دفتر ملاحظاتك الحالي. كل ما عليك فعله هو استدعاء الأمر السحري الذي يحدد مسار الملف:

٪ run math_widgets.ipynb

الاستنتاجات

  • تتيح لك إضافة تطبيقات مصغّرة إلى دفاتر ملاحظاتك أن تعمل كوسيط بين الكود والإخراج من خلال التفاعل مع المتغيرات.
  • إنه مناسب تمامًا لاستكشاف الأشياء وتغيير المكالمات الوظيفية ديناميكيًا.
  • قد لا يكون أيضًا الشيء الأكثر إنتاجية.

هذا كل شيء ، آمل أن يشجعك هذا البرنامج التعليمي على بدء إنشاء التطبيقات المصغّرة واستخدامها في دفاتر ملاحظاتك!