reflex_copy/docs/pe

---

### **✨ برنامه های تحت وب قابل تنظیم، کارآمد تماما پایتونی که در چند ثانیه مستقر(دپلوی) می‎شود. ✨** [](https://badge.fury.io/py/reflex)  [![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction) [](https://pepy.tech/projects/reflex) [![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)

---

English | 简体中文 | 繁體中文 | Türkçe | हिंदी | Português (Brasil) | Italiano | Español | 한국어 | 日本語 | Deutsch | Persian (پارسی) | Tiếng Việt

---

Reflex - رفلکس

رفلکس(Reflex) یک کتابخانه برای ساخت برنامه های وب فول استک تماما پایتونی است.

ویژگی های کلیدی:

• تماما پایتونی - فرانت اند و بک اند برنامه خود را همه در پایتون بنویسید، بدون نیاز به یادگیری جاوا اسکریپت.
• انعطاف پذیری کامل - شروع به کار با Reflex آسان است، اما می تواند به برنامه های پیچیده نیز تبدیل شود.
• دپلوی فوری - پس از ساخت، برنامه خود را با یک دستور دپلوی کنید یا آن را روی سرور خود میزبانی کنید.

برای آشنایی با نحوه عملکرد Reflex صفحه معماری را ببینید.

⚙️ Installation - نصب و راه اندازی

یک ترمینال را باز کنید و اجرا کنید (نیازمند Python 3.10+):

pip install reflex

🥳 اولین برنامه خود را ایجاد کنید

نصب reflex همچنین reflex در خط فرمان را نصب میکند.

با ایجاد یک پروژه جدید موفقیت آمیز بودن نصب را تست کنید. (my_app_name را با اسم پروژه خودتان جایگزین کنید):

mkdir my_app_name
cd my_app_name
reflex init

این دستور یک برنامه الگو(تمپلیت) را در فهرست(دایرکتوری) جدید شما مقداردهی اولیه می کند

می توانید این برنامه را در حالت توسعه(development) اجرا کنید:

reflex run

باید برنامه خود را در حال اجرا ببینید در http://localhost:3000.

اکنون می‌توانید کد منبع را در «my_app_name/my_app_name.py» تغییر دهید. Reflex دارای تازه‌سازی‌های سریعی است، بنابراین می‌توانید تغییرات خود را بلافاصله پس از ذخیره کد خود مشاهده کنید.

🫧 Example App - برنامه نمونه

بیایید یک مثال بزنیم: ایجاد یک رابط کاربری برای تولید تصویر 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")

بیاید سادش کنیم

Reflex UI - رابط کاربری رفلکس

بیایید با رابط کاربری شروع کنیم.

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

تابع index قسمت فرانت اند برنامه را تعریف می کند.

ما از اجزای مختلفی مثل center, vstack, input و button استفاده میکنیم تا فرانت اند را بسازیم. اجزاء را می توان درون یکدیگر قرار داد برای ایجاد طرح بندی های پیچیده می توانید از args کلمات کلیدی برای استایل دادن به آنها از CSS استفاده کنید.

رفلکس دارای بیش از 60 جزء برای کمک به شما برای شروع. ما به طور فعال اجزای بیشتری را اضافه می کنیم, و این خیلی آسان است که اجزا خود را بسازید.

State - حالت

رفلکس رابط کاربری شما را به عنوان تابعی از وضعیت شما نشان می دهد.

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

حالت تمام متغیرها(variables) (به نام vars) را در یک برنامه که می توانند تغییر دهند و توابعی که آنها را تغییر می دهند تعریف می کند..

در اینجا حالت از یک prompt و image_url تشکیل شده است. همچنین دو بولی processing و complete برای نشان دادن زمان غیرفعال کردن دکمه (در طول تولید تصویر) و زمان نمایش تصویر نتیجه وجود دارد.

Event Handlers - کنترل کنندگان رویداد

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 در وسط کنترل‌کننده رویداد باعث به‌روزرسانی رابط کاربری می‌شود. در غیر این صورت رابط کاربری در پایان کنترل کننده رویداد به روز می شود.

Routing - مسیریابی

بالاخره اپلیکیشن خود را تعریف می کنیم.

app = rx.App()

ما یک صفحه از root برنامه را به جزء index اضافه می کنیم. ما همچنین عنوانی را اضافه می کنیم که در برگه پیش نمایش/مرورگر صفحه نمایش داده می شود.

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

با افزودن صفحات بیشتر می توانید یک برنامه چند صفحه ای ایجاد کنید.

📑 Resources - منابع

📑 [اسناد](https://reflex.dev/docs/getting-started/introduction)   |   🗞️ [وبلاگ](https://reflex.dev/blog)   |   📱 [کتابخانه جزء](https://reflex.dev/docs/library)   |   🖼️ [قالب ها](https://reflex.dev/templates/)   |   🛸 [استقرار](https://reflex.dev/docs/hosting/deploy-quick-start)  

✅ Status - وضعیت

رفلکس(reflex) در دسامبر 2022 با نام Pynecone راه اندازی شد.

از سال 2025، Reflex Cloud برای فراهم کردن بهترین تجربه میزبانی برای برنامه های Reflex راه‌اندازی شده است. ما به توسعه آن ادامه خواهیم داد و ویژگی‌های بیشتری را پیاده‌سازی خواهیم کرد.

رفلکس(reflex) هر هفته نسخه ها و ویژگی های جدیدی دارد! مطمئن شوید که :star: ستاره و :eyes: این مخزن را تماشا کنید تا به روز بمانید.

Contributing - مشارکت کردن

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

• به Discord ما بپیوندید: Discord ما بهترین مکان برای دریافت کمک در مورد پروژه Reflex و بحث در مورد اینکه چگونه می توانید کمک کنید است.
• بحث های GitHub: راهی عالی برای صحبت در مورد ویژگی هایی که می خواهید اضافه کنید یا چیزهایی که گیج کننده هستند/نیاز به توضیح دارند.
• قسمت مشکلات GitHub: قسمت مشکلات یک راه عالی برای گزارش اشکال هستند. علاوه بر این، می توانید یک مشکل موجود را حل کنید و یک PR(pull request) ارسال کنید.

ما فعالانه به دنبال مشارکت کنندگان هستیم، فارغ از سطح مهارت یا تجربه شما. برای مشارکت CONTRIBUTING.md را بررسی کنید.

All Thanks To Our Contributors - با تشکر از همکاران ما:

License - مجوز

رفلکس متن باز و تحت مجوز Apache License 2.0 است.