Hugging Face DeepSite: مولد تطبيقات الويب أحادية الملف المدعوم بالذكاء الاصطناعي

Hugging Face DeepSite هو مولد تطبيقات ويب مفتوح المصدر يعمل في المتصفح. اوصف التطبيق الذي تريده بنص عادي، وسيستدعي DeepSite نموذج لغة كبير لإنتاج ملف واحد مستقل .html — مع CSS و JavaScript مدمجين — يعمل فورًا في أي متصفح. بدون أدوات بناء، بدون إطار عمل، بدون تبعيات للتثبيت. إنه قائم بالكامل على المتصفح، لذا يتبع مستخدمو Windows و macOS و Linux نفس الخطوات.

ما يولده DeepSite

كل مخرج DeepSite عبارة عن ملف.html واحد. المكتبات الخارجية التي يختار النموذج تضمينها — Chart.js و Tailwind CSS عبر CDN و Alpine.js — يتم تحميلها من رابط CDN في <head>، وليس مضمنة. هذا يحافظ على حجم الملف صغيرًا وقابلًا للنقل فورًا.

DeepSite مناسب جيدًا لـ:

• الحاسبات التفاعلية ومحولات الوحدات
• لوحات تصور البيانات باستخدام Chart.js أو ما شابه
• الألعاب البسيطة في المتصفح (لعبة canvas ثنائية الأبعاد، ألغاز كلمات)
• نماذج واجهات المستخدم والنماذج القابلة للنقر
• الأدوات والأدوات المساعدة أحادية الغرض

إنه ليس بديلاً لتطبيقات React أو Vue متعددة الملفات. يجب أن تتعامل المشاريع التي تحتاج إلى قاعدة بيانات أو مصادقة أو إدارة حالة معقدة مع مخرج DeepSite كقالب بداية، وليس كمنتج نهائي.

كيفية استخدام DeepSite

1. افتح المساحة. انتقل إلى huggingface.co/spaces/enricoros/deepsite. لا يلزم تسجيل الدخول على المثيل العام، على الرغم من أنك قد تدخل طابورًا خلال ساعات الذروة.
2. اكتب موجزك. في حقل الموجز، اوصف التطبيق بشكل ملموس. بدلاً من «حاسبة»، اكتب «حاسبة البقشيش مع منزلق للنسبة المئوية (10–30%)، وحقل لإجمالي الفاتورة، وإخراج تقسيم الشخص الواحد.» التحديد يحسن الجودة.
3. اختر نموذجًا. تعرض المساحة قائمة منسدلة للنموذج. تختلف الخيارات مع قيام المسؤول بتحديث المساحة؛ يتم عرض القائمة الحالية في واجهة المستخدم. للمقارنة المصنفة للنماذج الأساسية حسب قدرة الترميز والتكلفة، انظر لوحة تصنيف النماذج اللغوية الكبيرة (LLM).
4. انقر على Generate. يقوم النموذج بدفق HTML إلى جزء المحرر على اليسار. تعرض معاينة مباشرة في الجزء الأيمن في الوقت الفعلي.
5. كرر مع الرسائل المتابعة. استخدم إدخال الدردشة أسفل المعاينة للتحسين: «التبديل إلى خلفية مظلمة»، «أضف زرًا لإعادة التعيين»، «استخدم خطًا أكبر للنتيجة.» يقوم النموذج بتعديل الملف الموجود بدلاً من إعادة الإنشاء من البداية.
6. قم بالتحميل أو النشر. انقر على تحميل HTML لحفظ الملف محليًا، أو انقر على النشر إلى Spaces لنشره كمساحة Hugging Face جديدة تحت حسابك.

فهم المعاينة المباشرة

يعرض جزء المعاينة HTML الخاص بك داخل iframeمرنًا. قد تحظر بعض واجهات برمجة تطبيقات المتصفح — تحديد الموقع الجغرافي والكاميرا وكتابة الحافظة — بواسطة سياسات sandbox iframe في بيئة Hugging Face. إذا كانت الميزة تعمل في المحرر ولكن ليس في المعاينة، قم بتنزيل الملف وافتحه مباشرة في متصفحك للاختبار بدون صندوق الرمل.

نشر تطبيقك

الـ النشر إلى Spaces يتعامل الزر مع سير العمل كاملاً تلقائيًا (يتطلب تسجيل الدخول إلى Hugging Face):

1. إنشاء مساحة جديدة تحت حسابك مع ضبط SDK على Static — بدون خادم، فقط استضافة الملفات.
2. رفع index.html كملف وحيد.
3. تعيين عنوان URL عام في huggingface.co/spaces/<your-username>/<space-name>.

Static Spaces مجانية. التطبيق يمكن الوصول إليه علنًا في غضون ثوانٍ من النشر. يمكنك أيضًا استضافة الملف في أي مكان يخدم محتوى ثابتًا:

المنصة	كيفية النشر	الطبقة المجانية
Hugging Face Spaces (Static)	استخدم زر النشر المدمج	نعم
GitHub Pages	التزم index.html بمستودع، وفعّل Pages في الإعدادات	نعم
Netlify	اسحب وأفلت الملف على netlify.com/drop	نعم
Vercel	تشغيل vercel --prod من دليل يحتوي على الملف	نعم (تنطبق قيود)
أي خادم ويب	انسخ إلى جذر المستند، وقدّمه كـ HTML ثابت	متفاوتة

نسخ المساحة للحصول على حدود معدل أعلى

Space العام مشترك؛ خلال فترات الذروة قد تنتظر في طابور. تكرار النسخ يعطيك مثيلاً خاصاً يعمل على حسابك الخاص على Hugging Face مع حصة API خاصة به.

1. سجّل الدخول إلى Hugging Face.
2. افتح huggingface.co/spaces/enricoros/deepsite.
3. انقر على قائمة النقاط الثلاث (…) في الزاوية العلوية اليمنى واختر Duplicate this Space.
4. اختر اسماً وحالة الرؤية (عام أو خاص)، ثم انقر Duplicate Space.
5. في إعدادات Space المكرّر، أضف سراً باسم HF_TOKEN يحتوي على رمز Hugging Face API مع وصول Inference API. سيستخدم DeepSite هذا الرمز لجميع استدعاءات النموذج.

إذا كنت تقرر بين الاعتماد على Space العام المجاني والدفع مقابل حصة استدلال خاصة بك، فإن self-hosting vs API break-even calculator يمكنه تحديد فرق التكلفة بناءً على حجم الإنشاء المتوقع لديك.

تشغيل DeepSite محليًا

المصدر الخاص بـ DeepSite عبارة عن مستودع git قياسي مستضاف على Hugging Face. يمكنك استنساخه وتشغيله محلياً مقابل خادم استدلال محلي (Ollama أو vLLM أو llama.cpp مع نقطة نهاية متوافقة مع OpenAI).

git clone https://huggingface.co/spaces/enricoros/deepsite
cd deepsite
npm install
npm run dev

قد تتغير أسماء متغيرات البيئة لنقطة النهاية بين الإصدارات؛ تحقق من README.md أو أي.env.example ملف بعد الاستنساخ بدلاً من الاعتماد على اسم متغير ثابت. لتشغيل نموذج قادر على توليد الأكواد محلياً، تحقق أولاً مما إذا كان معالج الرسومات لديك يحتوي على ذاكرة كافية — نماذج تركز على الأكواد بـ معاملات 7B–34B هي النطاق العملي لمعظم الأجهزة الاستهلاكية. استخدم حاسبة VRAM للتأكد من أن معالج الرسومات لديك يمكنه التعامل مع نموذجك المستهدف قبل تنزيله.

نصائح الموجز للحصول على مخرجات أفضل

• سمّ عناصر واجهة المستخدم بشكل صريح. «قائمة منسدلة لاختيار العملة» أكثر موثوقية من «طريقة لاختيار عملة».
• حدد النمط البصري. «الوضع الداكن، تخطيط قائم على البطاقات، زوايا مستديرة» توجه CSS. بدون تلميحات أسلوبية، يختلف الناتج على نطاق واسع بين النماذج.
• سمّ المكتبات التي تريدها. «استخدم Chart.js لمخطط الأعمدة» أكثر موثوقية من الأمل في أن يختار النموذج مكتبة مناسبة.
• اجعل النطاق صغيراً. الأدوات أحادية الغرض تُنتج نتائج جيدة. التطبيقات متعددة الشاشات تُنتج أكواداً منتفخة وأصعب في التكرار في ملف واحد.
• اصقل بالمتابعات. عادةً ما يفوق مسودة تقريبية يتم صقلها برسائل موجهة ثلاث أو أربع مرات طلباً واحداً ضخماً.

القيود

• الناتج محدود بطول الناتج الأقصى للنموذج. قد يتم قطع التطبيقات المعقدة جداً في منتصف الملف؛ قلل النطاق إذا حدث هذا.
• لا يوجد استمرار للجلسة: إغلاق علامة التبويب في المتصفح يفقد المحادثة. قم بتنزيل الملف قبل الإغلاق.
• المكتبات المعتمدة على CDN تتطلب اتصال بالإنترنت للعرض بشكل صحيح عند فتح الملف محلياً.
• واجهة أمامية فقط: لا توجد منطق من جانب الخادم، لا قاعدة بيانات، لا مصادقة في الناتج المُنشأ.

الأسئلة المتكررة

هل DeepSite مجاني للاستخدام؟

Space العام مجاني خاضع لحصص الحوسبة المشتركة من Hugging Face. تكرار النسخ أيضاً مجاني، لكن استدعاءات Inference API مقابل حسابك الخاص على Hugging Face يتم فرض رسوم عليها بعد المستوى المجاني. التكاليف تعتمد على النموذج وعادةً ما تكون منخفضة لمهام توليد الأكواد القصيرة.

ما النماذج التي يستخدمها DeepSite؟

يتم الاحتفاظ بقائمة النماذج من قبل مؤلف Space وتتغير بمرور الوقت؛ شملت الإصدارات نماذج عائلة Llama DeepSeek متغيرات Coder ونماذج Qwen Coder. تحقق من القائمة المنسدلة في Space الحي للحصول على الخيارات الحالية — لا تعتمد على أي قائمة ثابتة في الوثائق الخارجية.

هل يمكنني استخدام ناتج DeepSite تجارياً؟

الكود المُنشأ نفسه لا يحمل ترخيصاً متأصلاً — أنت قدّمت الطلب والناتج هو كود وظيفي. ومع ذلك، المكتبات المستضافة على CDN المضمنة بواسطة النموذج (Chart.js و Tailwind وغيرها) تحمل تراخيصها الخاصة (عادةً MIT أو Apache 2.0). دقّق في أي واردات CDN في الملف قبل الاستخدام التجاري.

كيف يقارن DeepSite مع مولدات الأكواد الأخرى بدعم AI؟

التخصص الخاص بـ DeepSite هو الناتج بدون إعداد وملف واحد مع معاينة فورية في المتصفح. تقدم الأدوات مثل GitHub Copilot و Cursor و v0.dev توليد مشاريع أكثر غنى متعددة الملفات لكنها تتطلب IDE أو اشتراكاً مدفوعاً. DeepSite هو أسرع طريق من الفكرة إلى النموذج الأولي القابل للمشاركة. للحصول على عرض مصنّف للنماذج الأساسية حسب الذكاء والتكلفة، انظر إلى لوحة تصنيف النماذج اللغوية الكبيرة (LLM).

التطبيق المُنشأ معطوب في المعاينة. ماذا يجب أن أفعل؟

قم بتنزيل الملف وافتحه مباشرة في متصفحك أولاً — عدة واجهات برمجية للمتصفح محجوبة داخل iframe الرملي. إذا كانت لا تزال معطوبة محلياً، أرسل رسالة متابعة تصف المشكلة المحددة («المخطط لا يعرض»، «نقرة الزر لا تفعل شيئاً») بدلاً من إعادة الإنشاء من البداية. إذا انتهى الملف في منتصف العلامة أو منتصف البرنامج النصي، تم قطع الناتج — بسّط نطاق الطلب أو تبديل إلى نموذج بحد أقصى أعلى للناتج.

هل يمكنني الاستضافة الذاتية لـ DeepSite مع نموذج محلي?

نعم. استنسخ المستودع، وقم بتشغيله محلياً مع npm run dev، وقم بتكوين نقطة نهاية النموذج للإشارة إلى خادم استدلال محلي. نموذج توليد أكواد يحتوي على معاملات 7B على الأقل ينتج ناتجاً قابلاً للاستخدام؛ نماذج 34B+ تحسّن الجودة بشكل كبير لكن تتطلب VRAM أكثر بكثير. تحقق من حاسبة VRAM مقابل مواصفات معالج الرسومات لديك قبل الالتزام بحجم نموذج.