المنتجات التفاعلية
تحوّل المنتجات التفاعلية الملفات وكتل الشيفرة التي يولدها النموذج إلى لوحة جانبية قابلة للمعاينة. وهي مفيدة للألعاب والمخططات وعروض HTML وحمولات JSON والبرامج النصية والأصول المولّدة.
تختلف المنتجات التفاعلية عن Work. ينشأ المنتج من رد محادثة عادي ويُعرض في المتصفح؛ ولا يمنح النموذج نظام ملفات دائمًا أو shell. تحتفظ مهمة Work بملفات المشروع وسجل المحادثة بصورة دائمة، وتشغّل أدوات النموذج داخل حاوية Docker مخصصة للمهمة.
المدخلات المدعومة
يكتشف Libre WebUI:
- كتل
<artifact>الصريحة - كتل الشيفرة المسيّجة بلغات مناسبة للمنتجات التفاعلية
- مستندات HTML كاملة ومستقلة
- حزم HTML متعددة الملفات مكوّنة من
index.htmlوكتل CSS وJavaScript - مكوّنات JSX وTSX
- مخططات Mermaid
- كتل SVG
- كتل JSON
- مقتطفات الشيفرة والنصوص
أنواع المنتجات
| النوع | سلوك المعاينة |
|---|---|
| HTML | معاينة iframe معزولة مع تفعيل البرامج النصية والتفاعل |
| React | تجميع JSX أو TSX وتركيبه، مع Tailwind ومجموعة المكتبات |
| Mermaid | رسم مخطط في البيئة المعزولة وفق سمة التطبيق |
| SVG | معاينة مرئية مضمّنة |
| JSON | عرض شيفرة منسق |
| شيفرة/نص | عرض شيفرة ملوّنة نحويًا |
حزم HTML متعددة الملفات
عندما يعيد نموذج كتل HTML وCSS وJavaScript مترابطة، يحاول Libre WebUI دمجها في منتج HTML قابل للتشغيل. يزيل مراجع أوراق الأنماط والبرامج النصية المحلية، ويدمج CSS وJavaScript المولّدين المطابقين.
للحصول على النتيجة الأكثر موثوقية، اطلب من النموذج ملف HTML واحدًا مستقلًا:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
عناصر تحكم العارض
تُفتح المنتجات في لوحة جانبية قابلة لتغيير الحجم، وبها:
- علامتا تبويب المعاينة والشيفرة
- نسخ
- تنزيل
- فتح في نافذة جديدة
- عناصر تكبير وملء الشاشة حيثما توفرت
إذا احتاج منتج تفاعلي إلى إدخال من لوحة المفاتيح، فانقر داخل المعاينة أولًا أو افتحه في نافذة جديدة.
سلوك البيئة المعزولة
تُحمّل منتجات HTML عبر GET /api/artifacts/sandbox، وهو مستند صغير في الواجهة
الخلفية يستضيف المعاينة. هذا الفصل مهم: يرث إطار srcdoc سياسة أمان المحتوى الخاصة
بالمضمّن، وتحظر سياسة التطبيق البرامج النصية المضمّنة، فتُحجب المنتجات المعروضة
بهذه الطريقة في الإنتاج. بدلًا من ذلك، يُجلب مضيف البيئة المعزولة عبر الشبكة فيحمل
سياسته الخاصة، ويرث إطار المعاينة الذي ينشئه تلك السياسة.
تسمح سياسة المنتج بالبرامج النصية المضمّنة وeval، لأنهما مما يتكوّن منه المنتج،
ولا تسمّي أي مضيف سوى مضيف التطبيق نفسه. يستطيع المنتج العرض والحساب؛ ولا يستطيع
الجلب من CDN أو الاتصال بجهة خارجية.
يسمح الإطار نفسه بالبرامج النصية والنماذج والنوافذ المنبثقة والمربعات الحوارية وقفل
المؤشر والتنزيلات، لكنه لا يسمح أبدًا بـallow-same-origin. لذلك يعمل المنتج على
أصل مبهم من دون وصول إلى ملفات تعريف ارتباط التطبيق أو تخزينه أو DOM. وتسمح سياسة
ميزاته بالوصول إلى الحافظة وملء الشاشة ووحدات التحكم بالألعاب.
وقت تشغيل المنتجات
تفترض المنتجات المولّدة توفر مكتبات. وبدل السماح لها بالوصول إلى CDN، يضمّن التطبيق ما تطلبه:
| المتاح للمنتجات | طريقة الوصول |
|---|---|
| React وReactDOM وFramer Motion | import ... from 'react' |
| JSX وTSX | تُجمّع داخل الإطار باستخدام Babel |
| أدوات Tailwind | تُولّد من العلامات، بلا build |
| Recharts وChart.js وPlotly وD3 | import ... from '<name>' |
| Three.js مع عناصر التحكم والمحملات والبيئات والمزيد من الإضافات | THREE.OrbitControls، أو عبر import |
| أيقونات Lucide وLodash وMathJS وPapa Parse وTone.js | import ... from '<name>' |
| Mermaid | منتجات mermaid، أو عبر import |
يتلقى المنتج الذي يطلب مكتبة خارج هذه المجموعة إشعارًا يسمّيها، بدل معاينة فارغة وخطأ سياسة في وحدة التحكم.
لا يجلب الإطار أيًا منها. تحمّل صفحة التطبيق — التي تحمل جلسة المستخدم — الحزم
التي تحتاج إليها وتضمّنها في مستند المنتج، وتُجمّع عبارات import الخاصة بالمنتج
إلى عمليات بحث في سجل صغير بدل تركها لحل وحدات الشبكة.
هذا الفصل ليس عرضيًا. للإطار المعزول أصل مبهم، لذلك يعامل المتصفح طلباته كطلبات عبر المواقع ولا يرسل ملف تعريف ارتباط للجلسة. وخلف وكيل مصادقة — Cloudflare Access أو Authelia أو oauth2-proxy — يعود الطلب كتوجيه إلى صفحة تسجيل دخول ترفض سياسة البيئة المعزولة تحميلها، ويفشل المنتج بخطأ في سياسة أمان المحتوى. يلغي التضمين الطلب، فتعمل المنتجات بالطريقة نفسها على حاسوب محمول وخلف بوابة مؤسسة.
تُجمّع منتجات React وتُركّب في البيئة المعزولة: صدّر المكوّن كقيمة الوحدة الافتراضية ليُعرض. تحل كل مكتبة React من السجل نفسه، فتوجد نسخة React واحدة وتعمل hooks بصورة طبيعية.
تظل منتجات HTML التي تحمّل مكتبة من CDN عاملة: يُستبدل عنصر <script> أو <link>
الذي يشير إلى Tailwind أو Chart.js أو D3 أو Three.js أو Papa Parse أو Lodash أو
Mermaid أو React أو Babel ببناء مضمّن في الموضع نفسه من المستند، فتظل البرامج
النصية المضمّنة تجد Chart أو d3 أو React عند تشغيلها. ولا تتوفر مكتبة خارج
هذه المجموعة؛ فضمّنها بدلًا من ذلك.
نظرًا إلى الأصل المبهم للإطار، ترمي localStorage وsessionStorage
وdocument.cookie الحقيقية أخطاء. توفر البيئة المعزولة بدائل في الذاكرة كي يستمر
المنتج الذي يستخدمها؛ وتبقى محتوياتها بقدر مدة المعاينة ولا تُشارك مع التطبيق.
تظل المنتجات تنفذ شيفرة مولّدة: افحص HTML غير الموثوق قبل تنزيله أو إعادة استخدامه خارج المعاينة، ولا تضع أسرارًا في منتج.
مطالبات أفضل
للألعاب:
Build a complete browser game as one HTML file.
Use canvas.
Inline all CSS and JavaScript.
Show controls on screen.
Avoid external assets unless they are optional.
للوحات المعلومات:
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
لمكوّنات React:
Return one React component in a single jsx block.
Export it as the default export.
Style it with Tailwind classes.
Import anything you need from react, recharts, or lucide-react.
لـSVG:
Return only one valid SVG code block with width, height, and viewBox.