reflex تحميل - تحميل رمز المصدر reflex

reflex

بايثون

v0.6.6.post3

تنزيل

 + Searching for Pynecone? You are in the right repo. Pynecone has been renamed to Reflex. +

تطبيقات ويب عالية الأداء وقابلة للتخصيص بلغة Python الخالصة. نشر في ثوان.

منعكس

Reflex عبارة عن مكتبة لإنشاء تطبيقات ويب متكاملة بلغة Python الخالصة.

الميزات الرئيسية:

Pure Python - يمكنك كتابة الواجهة الأمامية والخلفية لتطبيقك باستخدام لغة Python، دون الحاجة إلى تعلم Javascript.
المرونة الكاملة - من السهل البدء باستخدام Reflex، ولكن يمكن أيضًا توسيع نطاقه ليشمل التطبيقات المعقدة.
النشر الفوري - بعد الإنشاء، انشر تطبيقك باستخدام أمر واحد أو استضفه على خادمك الخاص.

راجع صفحة الهندسة المعمارية الخاصة بنا للتعرف على كيفية عمل Reflex أسفل الغطاء.

تثبيت

افتح المحطة وقم بتشغيلها (يتطلب إصدار Python 3.9+):

pip install reflex

؟ أنشئ تطبيقك الأول

يؤدي تثبيت reflex أيضًا إلى تثبيت أداة سطر الأوامر reflex .

اختبر نجاح التثبيت عن طريق إنشاء مشروع جديد. (استبدل my_app_name باسم مشروعك):

mkdir my_app_name
cd my_app_name
reflex init

يقوم هذا الأمر بتهيئة تطبيق القالب في دليلك الجديد.

يمكنك تشغيل هذا التطبيق في وضع التطوير:

reflex run

من المفترض أن تشاهد تطبيقك يعمل على http://localhost:3000.

يمكنك الآن تعديل الكود المصدري في my_app_name/my_app_name.py . يتميز Reflex بالتحديثات السريعة حتى تتمكن من رؤية تغييراتك على الفور عند حفظ التعليمات البرمجية الخاصة بك.

؟ التطبيق المثال

لنتناول مثالاً: إنشاء واجهة مستخدم لإنشاء الصور حول DALL·E. من أجل التبسيط، نسميها فقط OpenAI API، ولكن يمكنك استبدالها بنموذج ML يتم تشغيله محليًا.

هنا هو الكود الكامل لإنشاء هذا. ويتم كل هذا في ملف بايثون واحد!

 import reflex as rx
import openai

openai_client = openai . OpenAI ()


class State ( rx . State ):
    """The app state."""

    prompt = ""
    image_url = ""
    processing = False
    complete = False

    def get_image ( self ):
        """Get the image from the prompt."""
        if self . prompt == "" :
            return rx . window_alert ( "Prompt Empty" )

        self . processing , self . complete = True , False
        yield
        response = openai_client . images . generate (
            prompt = self . prompt , n = 1 , size = "1024x1024"
        )
        self . image_url = response . data [ 0 ]. url
        self . processing , self . complete = False , True


def index ():
    return rx . center (
        rx . vstack (
            rx . heading ( "DALL-E" , font_size = "1.5em" ),
            rx . input (
                placeholder = "Enter a prompt.." ,
                on_blur = State . set_prompt ,
                width = "25em" ,
            ),
            rx . button (
                "Generate Image" , 
                on_click = State . get_image ,
                width = "25em" ,
                loading = State . processing
            ),
            rx . cond (
                State . complete ,
                rx . image ( src = State . image_url , width = "20em" ),
            ),
            align = "center" ,
        ),
        width = "100%" ,
        height = "100vh" ,
    )

# Add state and page to the app.
app = rx . App ()
app . add_page ( index , title = "Reflex:DALL-E" )

دعونا كسر هذا إلى أسفل.

شرح الاختلافات بين أجزاء الواجهة الخلفية والواجهة الأمامية لتطبيق DALL-E.

واجهة المستخدم المنعكسة

لنبدأ بواجهة المستخدم.

 def index ():
    return rx . center (
        ...
    )

تحدد وظيفة index هذه الواجهة الأمامية للتطبيق.

نحن نستخدم مكونات مختلفة مثل center و vstack و input و button لبناء الواجهة الأمامية. يمكن أن تتداخل المكونات داخل بعضها البعض لإنشاء تخطيطات معقدة. ويمكنك استخدام وسيطات الكلمات الرئيسية لتصميمها باستخدام القوة الكاملة لـ CSS.

يأتي Reflex مزودًا بأكثر من 60 مكونًا مدمجًا لمساعدتك على البدء. نحن نعمل على إضافة المزيد من المكونات بشكل فعال، ومن السهل إنشاء المكونات الخاصة بك.

ولاية

يمثل Reflex واجهة المستخدم الخاصة بك كوظيفة لحالتك.

 class State ( rx . State ):
    """The app state."""
    prompt = ""
    image_url = ""
    processing = False
    complete = False

تحدد الحالة جميع المتغيرات (التي تسمى vars) في التطبيق والتي يمكن تغييرها والوظائف التي تغيرها.

تتكون الحالة هنا من prompt و image_url . هناك أيضًا processing منطقية complete للإشارة إلى وقت تعطيل الزر (أثناء إنشاء الصورة) ومتى يتم عرض الصورة الناتجة.

معالجات الأحداث

 def get_image ( self ):
    """Get the image from the prompt."""
    if self . prompt == "" :
        return rx . window_alert ( "Prompt Empty" )

    self . processing , self . complete = True , False
    yield
    response = openai_client . images . generate (
        prompt = self . prompt , n = 1 , size = "1024x1024"
    )
    self . image_url = response . data [ 0 ]. url
    self . processing , self . complete = False , True

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

لدينا DALL·E. يحتوي التطبيق على معالج حدث، get_image الذي يمكنك من خلاله الحصول على هذه الصورة من OpenAI API. سيؤدي استخدام yield في منتصف معالج الأحداث إلى تحديث واجهة المستخدم. وإلا فسيتم تحديث واجهة المستخدم في نهاية معالج الحدث.

التوجيه

وأخيرًا، قمنا بتعريف تطبيقنا.

 app = rx . App ()

نضيف صفحة من جذر التطبيق إلى مكون الفهرس. نضيف أيضًا عنوانًا سيظهر في علامة تبويب معاينة الصفحة/المتصفح.

 app . add_page ( index , title = "DALL-E" )

يمكنك إنشاء تطبيق متعدد الصفحات عن طريق إضافة المزيد من الصفحات.

؟ موارد

؟ مستندات | ⁉️ المدونة | مكتبة المكونات | ⁉️ قوالب | ؟ النشر

✅ الحالة

تم إطلاق Reflex في ديسمبر 2022 باسم Pynecone.

اعتبارًا من فبراير 2024، أصبحت خدمة الاستضافة لدينا في مرحلة ألفا! خلال هذا الوقت، يمكن لأي شخص نشر تطبيقاته مجانًا. اطلع على خريطة الطريق الخاصة بنا لمعرفة ما تم التخطيط له.

لدى Reflex إصدارات وميزات جديدة تأتي كل أسبوع! تأكد من النجمة و ? مشاهدة هذا المستودع للبقاء على اطلاع.

المساهمة

نحن نرحب بالمساهمات من أي حجم! فيما يلي بعض الطرق الجيدة للبدء في مجتمع Reflex.

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

نحن نبحث بنشاط عن المساهمين، بغض النظر عن مستوى مهاراتك أو خبرتك. للمساهمة تحقق من CONTIBUTING.md