جراديو 6 يتم شحنها بهدوء وهي ميزة قوية جدًا:
gr.HTML يدعم الآن القوالب المخصصة وتفاعل CSS وJavaScript. مما يعني أنه يمكنك إنشاء أي مكون ويب تقريبًا – ويمكن لـ Claude (أو أي برنامج Frontier LLM آخر) إنشاء كل شيء في طلقة واحدة: الواجهة الأمامية، والواجهة الخلفية، وإدارة الحالة، كل ذلك في ملف Python واحد.لقد اختبرنا ذلك من خلال إنشاء أنواع مختلفة من التطبيقات. كل ملف عبارة عن ملف Python واحد، ولا توجد خطوة بناء، ويمكن نشره في Hugging Face Spaces في ثوانٍ.
تطبيقات الإنتاجية
مؤقت بومودورو: مؤقت تركيز حيث تنمو شجرة البيكسل الفنية أثناء عملك. يبدأ كبذرة، ثم تنبت أغصانًا، وتنمو أوراقًا. أكمل الجلسة وستنضم الشجرة إلى غابتك. تتبع الجلسة، وتبديل السمات، وأوضاع الاستراحة – كل ذلك تفاعلي، كل ذلك في ملف واحد.
عادةً ما تتطلب الرسوم المتحركة للشجرة وحدها مكون React منفصلاً. هنا يتم تضمين الإطارات الرئيسية لـ CSS فقط css_template وتحديثات الحالة في js_on_load.
تطبيقات الأعمال
خريطة الحرارة لمساهمة GitHub: انقر فوق أي خلية لتبديل المساهمات. موضوعات ألوان متعددة. مولدات الأنماط (الشرائط، الموسمية، العشوائية). الإحصائيات المباشرة التي يتم تحديثها أثناء التحرير.
مجلس كانبان: السحب والإفلات الكامل بين الأعمدة. التحرير المضمن (انقر نقرًا مزدوجًا فوق أي بطاقة). ميزة البحث التي يمكنها التصفية في الوقت الفعلي. أعمدة قابلة للطي.
عادةً ما يعني السحب والإفلات سحب المكتبة. هنا يتم توصيل أحداث سحب HTML5 الأصلية js_on_load، مع مزامنة الحالة مرة أخرى مع Python عبر trigger('change').
تطبيقات إبداعية
عجلة تدور للفوز: رسوم متحركة سلسة لـ CSS، حالة التدوير التي تستمر عبر عمليات إعادة العرض. تكوينات محددة مسبقًا لقرارات نعم/لا واختيار المطعم واختيار الفريق. يمكنك أيضًا إضافة شرائح غزل مخصصة أثناء التنقل.
تطبيقات تعلم الآلة
هذا هو المكان gr.HTML يصبح عمل ML مثيرًا للاهتمام حقًا: يمكنك إنشاء مكونات متخصصة يمكنها التعامل مع تنسيق الإخراج الدقيق الخاص بك، ثم استخدامها مثل أي مكون Gradio مدمج.
عارض الكشف: عارض مخصص لاكتشاف الكائنات وتجزئة المثيلات ونتائج تقدير الوضع. يعرض المربعات المحيطة، وأقنعة التجزئة، ونقاط المفاتيح، والوصلات الهيكلية – كل ذلك في صورة قابلة لإعادة الاستخدام gr.HTML فئة فرعية يتم توصيلها مباشرة بخط أنابيب النموذج الخاص بك.
قام المجتمع ببناء بعض المكونات الإبداعية باستخدام gr.HTML أيضًا:
التحكم بالكاميرا ثلاثية الأبعاد لتحرير الصور: إطار عرض Three.js كامل داخل تطبيق Gradio! اسحب المقابض للتحكم في السمت والارتفاع والمسافة. تظهر صورتك التي تم تحميلها في المشهد ثلاثي الأبعاد، ويتم تغذية معلمات الكاميرا مباشرة في أحدث نموذج لتحرير الصور من Qwen. تتطلب هذه الأنواع من عناصر التحكم التفاعلية ثلاثية الأبعاد عادةً واجهة أمامية منفصلة – مع Gradio فهي واحدة فقط gr.HTML فئة فرعية🔥
نسخ الكلام في الوقت الحقيقي: النسخ المباشر باستخدام نموذج Voxtral من ميسترال. عرض النص مخصص gr.HTML مكون مزود بشارات حالة متحركة وعداد WPM مباشر ومخرجات مصممة يتم تحديثها أثناء التحدث. تعليقات واجهة المستخدم في الوقت الفعلي دون استخدام React!
كيف يعمل
كل gr.HTML يأخذ المكون ثلاثة قوالب:
gr.HTML(
value={"count": 0},
html_template="<button>Clicked ${value.count} times</button>",
css_template="button { background: #667eea; color: white; }",
js_on_load="""
element.querySelector('button').onclick = () => {
props.value = { count: props.value.count + 1 };
trigger('change');
};
"""
)
${value} يحقن حالة بايثون. props.value يقوم بتحديثه من JavaScript. trigger('change') تتم المزامنة مرة أخرى مع بايثون. هذه هي واجهة برمجة التطبيقات بأكملها.
للمكونات القابلة لإعادة الاستخدام، فئة فرعية gr.HTML:
class Heatmap(gr.HTML):
def __init__(self, value=None, theme="green", **kwargs):
super().__init__(
value=value,
theme=theme,
html_template=TEMPLATE,
css_template=STYLES,
js_on_load=SCRIPT,
**kwargs
)
الآن Heatmap() يعمل مثل gr.Image() أو gr.Slider() – استخدمه في الكتل، أو قم بتوصيل معالجات الأحداث، أو كل ما تحتاجه.
لماذا يعد هذا مهمًا لبرمجة Vibe؟
عندما تطلب من برنامج LLM الخاص بك إنشاء مكون مخصص، فإن إخراج الملف الفردي هو كل شيء. لا “قم الآن بإنشاء ملف الأنماط” أو “قم بتوصيل هذا إلى تكوين البناء الخاص بك.” ملف بايثون واحد فقط يتم تشغيله على الفور.
تصبح حلقة التعليقات: صف ما تريد ← احصل على الكود ← gradio app.py → رؤيته يعمل → وصف ما يجب إصلاحه → كرر. تستغرق كل دورة ثوانٍ مع وضع إعادة التحميل في Gradio.
النشر إلى المساحات باستخدام gradio deploy أو مشاركة رابط مؤقت مع demo.launch(share=True). في غضون ثوانٍ قليلة من الفكرة إلى التطبيق المباشر.
يأتي Gradio مزودًا بـ 32 مكونًا تفاعليًا، ولكن في بعض الأحيان يحتاج تطبيق الويب المثالي الذي يعمل بالذكاء الاصطناعي إلى شيء خاص. هذا هو المكان gr.HTML يأتي.
إذا كانت لديك فكرة، حاول أن تبنيها بها gr.HTML: قم بوصف ما تريده لماجستير القانون الخاص بك، وقم بإنشاء الكود، وتشغيله. قد تتفاجأ بما يمكنك شحنه خلال 5 دقائق.
القراءة المقترحة:
