Gradio بدون خادم يعمل بالكامل في متصفحك

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

أدخل جراديو لايت (@gradio/lite): مكتبة تستفيد من Pyodide لجلب Gradio مباشرة إلى متصفحك. في منشور المدونة هذا، سنستكشف ما @gradio/lite هو مراجعة مثال التعليمات البرمجية ومناقشة المزايا التي يقدمها لتشغيل تطبيقات Gradio.

ما هو @gradio/lite؟

@gradio/lite هي مكتبة جافا سكريبت تمكنك من تشغيل تطبيقات Gradio مباشرة داخل متصفح الويب الخاص بك. ويحقق ذلك من خلال استخدام Pyodide، وهو وقت تشغيل Python لـ WebAssembly، والذي يسمح بتنفيذ كود Python في بيئة المتصفح. مع @gradio/lite، أنت تستطيع اكتب كود Python العادي لتطبيقات Gradio الخاصة بك، وسوف تشغيلها بسلاسة في المتصفح دون الحاجة إلى البنية التحتية من جانب الخادم.

ابدء

لنقم بإنشاء تطبيق Gradio “Hello World” في @gradio/lite

1. استيراد JS وCSS

ابدأ بإنشاء ملف HTML جديد، إذا لم يكن لديك ملف بالفعل. استيراد JavaScript وCSS المطابقين لـ @gradio/lite الحزمة باستخدام الكود التالي:

<html>
    <head>
        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
    </head>
</html>

لاحظ أنه يجب عليك بشكل عام استخدام أحدث إصدار من @gradio/lite هذا متاح. يمكنك رؤية الإصدارات المتاحة هنا.

2. قم بإنشاء <gradio-lite> العلامات

في مكان ما في نص صفحة HTML الخاصة بك (أينما تريد عرض تطبيق Gradio)، قم بإنشاء فتح وإغلاق <gradio-lite> العلامات.

<html>
    <head>
        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
    </head>
    <body>
        <gradio-lite>
        </gradio-lite>
    </body>
</html>

ملحوظة: يمكنك إضافة theme صفة إلى <gradio-lite> علامة لإجبار السمة على أن تكون داكنة أو فاتحة (افتراضيًا، تحترم سمة النظام). على سبيل المثال

<gradio-lite theme="dark">
...
</gradio-lite>

3. اكتب تطبيق Gradio الخاص بك داخل العلامات

الآن، اكتب تطبيق Gradio الخاص بك كما تفعل عادةً، في Python! ضع في اعتبارك أنه بما أن هذه لغة بايثون، فإن المسافات البيضاء والمسافات البادئة مهمة.

<html>
    <head>
        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
    </head>
    <body>
        <gradio-lite>
        import gradio as gr

        def greet(name):
            return "Hello, " + name + "!"
        
        gr.Interface(greet, "textbox", "textbox").launch()
        </gradio-lite>
    </body>
</html>

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

ملاحظة على التصحيح: لرؤية أي أخطاء في تطبيق Gradio-lite، افتح المفتش في متصفح الويب الخاص بك. ستتم طباعة جميع الأخطاء (بما في ذلك أخطاء بايثون) هناك.

المزيد من الأمثلة: إضافة ملفات ومتطلبات إضافية

ماذا لو كنت تريد إنشاء تطبيق Gradio يمتد لملفات متعددة؟ أو أن لديها متطلبات بايثون مخصصة؟ كلاهما ممكن مع @gradio/lite!

ملفات متعددة

إضافة ملفات متعددة داخل ملف @gradio/lite التطبيق واضح جدًا: استخدم <gradio-file> علامة. يمكنك الحصول على أكبر عدد ممكن <gradio-file> العلامات كما تريد، ولكن كل واحد يحتاج إلى أن يكون له name يجب أن تحتوي السمة ونقطة الدخول إلى تطبيق Gradio على entrypoint يصف.

هنا مثال:

<gradio-lite>

<gradio-file name="app.py" entrypoint>
import gradio as gr
from utils import add

demo = gr.Interface(fn=add, inputs=["number", "number"], outputs="number")

demo.launch()
</gradio-file>

<gradio-file name="utils.py" >
def add(a, b):
    return a + b
</gradio-file>

</gradio-lite>		

متطلبات إضافية

إذا كان لتطبيق Gradio الخاص بك متطلبات إضافية، فمن الممكن عادةً تثبيتها في المتصفح باستخدام micropip. لقد أنشأنا غلافًا لجعل هذا الأمر مناسبًا بشكل خاص: ما عليك سوى إدراج متطلباتك بنفس بناء الجملة requirements.txt وضمهم بها <gradio-requirements> العلامات.

وهنا نقوم بالتثبيت transformers_js_py لتشغيل نموذج تصنيف النص مباشرة في المتصفح!

<gradio-lite>

<gradio-requirements>
transformers_js_py
</gradio-requirements>

<gradio-file name="app.py" entrypoint>
from transformers_js import import_transformers_js
import gradio as gr

transformers = await import_transformers_js()
pipeline = transformers.pipeline
pipe = await pipeline('sentiment-analysis')

async def classify(text):
    return await pipe(text)

demo = gr.Interface(classify, "textbox", "json")
demo.launch()
</gradio-file>

</gradio-lite>	

جربه: يمكنك رؤية هذا المثال قيد التشغيل في Hugging Face Static Space، والذي يتيح لك استضافة تطبيقات الويب الثابتة (بدون خادم) مجانًا. قم بزيارة الصفحة وستتمكن من تشغيل نموذج التعلم الآلي دون الوصول إلى الإنترنت!

فوائد الاستخدام @gradio/lite

1. النشر بدون خادم

الميزة الأساسية لـ @gradio/lite هي أنه يلغي الحاجة إلى البنية التحتية للخادم. يعمل هذا على تبسيط النشر وتقليل التكاليف المتعلقة بالخادم وتسهيل مشاركة تطبيقات Gradio مع الآخرين.

2. الكمون المنخفض

من خلال تشغيله في المتصفح، يقدم @gradio/lite تفاعلات ذات زمن وصول منخفض للمستخدمين. ليست هناك حاجة لانتقال البيانات من وإلى الخادم، مما يؤدي إلى استجابات أسرع وتجربة مستخدم أكثر سلاسة.

3. الخصوصية والأمن

نظرًا لأن جميع عمليات المعالجة تتم داخل متصفح المستخدم، @gradio/lite يعزز الخصوصية والأمان. تظل بيانات المستخدم على أجهزتهم، مما يوفر راحة البال فيما يتعلق بمعالجة البيانات.

القيود

• حاليا، أكبر قيود في الاستخدام @gradio/lite هو أن تطبيقات Gradio الخاصة بك ستستغرق عمومًا مزيدًا من الوقت (عادةً من 5 إلى 15 ثانية) للتحميل في البداية في المتصفح. وذلك لأن المتصفح يحتاج إلى تحميل وقت تشغيل Pyodide قبل أن يتمكن من عرض كود Python.

• ليست كل حزمة Python مدعومة بواسطة Pyodide. بينما gradio والعديد من الحزم الشائعة الأخرى (بما في ذلك numpy, scikit-learn، و transformers-js) يمكن تثبيته في Pyodide، إذا كان تطبيقك يحتوي على العديد من التبعيات، فمن المفيد التحقق مما إذا كانت التبعيات مضمنة في Pyodide، أو يمكن تثبيتها باستخدام micropip.

جربه!

يمكنك المحاولة على الفور @gradio/lite عن طريق نسخ ولصق هذا الرمز في مكان محلي index.html الملف وفتحه باستخدام المتصفح الخاص بك:

<html>
    <head>
        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
    </head>
    <body>
        <gradio-lite>
        import gradio as gr

        def greet(name):
            return "Hello, " + name + "!"
        
        gr.Interface(greet, "textbox", "textbox").launch()
        </gradio-lite>
    </body>
</html>

لقد أنشأنا أيضًا ساحة لعب على موقع Gradio الإلكتروني تسمح لك بتحرير التعليمات البرمجية بشكل تفاعلي ورؤية النتائج على الفور!

ساحة اللعب: https://www.gradio.app/playground