دوز مباشرة للمحتوى الرئيسي
دروس فالذكاء الاصطناعي

بنّي وشغّل ستوديو مفتوح المصدر للصور والفيديو بالذكاء الاصطناعي مع OpenHiggsfield AI

تعلّم كيفاش تثبّت OpenHiggsfield AI، تربط مفتاح المنصّة ديالك، تنشئ الوسائط، تدبّر النتائج، وتفهم البنية ديال Next.js اللي مبنية على الكتالوج.

بنّي وشغّل ستوديو مفتوح المصدر للصور والفيديو بالذكاء الاصطناعي مع OpenHiggsfield AI

شنو هو OpenHiggsfield AI؟

OpenHiggsfield AI هو بديل مجاني ومفتوح المصدر لـ Higgsfield AI. كيوفّر ستوديو موحّد فالمتصفح لتوليد الصور والفيديوهات باستعمال 40 موديل: 12 موديل للصور و28 موديل للفيديو. كتستعمل مفتاح المنصة ديالك، وتقدر تفتح الستوديو المستضاف أو تشغّل التطبيق عندك.

المشروع مبني بـ Next.js 16 App Router وReact 19 وZustand وCSS عادي وpnpm. الكاتالوغ ديالو كيشمل موديلات من عائلات بحال Nano Banana وSoul وGemini وKling وVeo وWan وFlux وGPT Image وIdeogram وRecraft وLTX وMiniMax وPixVerse وGrok وQwen.

الستوديو مجاني ومفتوح المصدر، ولكن طلبات التوليد كتستعمل مفتاح المنصة ديالك.

المميزات الرئيسية

محرّر واحد للصور والفيديوهات

شريط تعليمات واحد كيتكلف بتوليد الصور والفيديوهات بجوج. الموديل اللي مختار هو اللي كيحدّد نوع الناتج. ضغط على Cmd + Enter فـ macOS أو Ctrl + Enter فالمنصات الأخرى باش تصيفط الطلب.

كل موديل كيصرّح بالإعدادات والأدوار ديال الوسائط اللي كيدعمها. بهاد الشكل، الواجهة كتعرض غير عناصر التحكم المناسبة، بحال نسبة الأبعاد والدقة والمدة وصيغة الإخراج والصوت وعدد النتائج وتحسين التعليمات.

إدخالات الوسائط حسب الموديل

على حساب الموديل المختار، تقدر تزيد مدخلات مدعومة بحال الإطار الأول أو الأخير، ووسائط مرجعية، وفيديو، أو صوت. كل دور كيتبع الحدود اللي معلنة فداك الموديل.

الملفات المرفوعة كتمشي مباشرة لـ Vercel Blob وكتتحوّل لعناوين URL عمومية اللي تقدر طلبات التوليد تستعملها. واختيار الوسائط يقدر حتى يعاود يستعمل الملفات من مكتبة الرفع أو من العمليات المكتملة فالسجل المحلي.

التوليد على دفعات والتقدم المباشر

الستوديو كيدعم حتى لأربع نتائج فكل إرسال. الموديلات اللي عندها إعداد أصلي للعدد كتستعمل هاد الخيار؛ والموديلات الأخرى كيتبعث ليها طلب واحد لكل نتيجة.

العناصر النائبة ديال النتائج كيبانو مباشرة من بعد الإرسال. OpenHiggsfield AI كيتحقق من حالة الطلب كل أربع ثواني، بمهلة أقصاها عشر دقايق، وكيعرض كل نتيجة مكتملة فور ما كتولي متاحة.

المعرض وتدبير النتائج

  • أربع نطاقات للمعرض: الصور، الفيديو، الأصول، والمفضلة.
  • تخطيط Masonry: النتائج كتبان بنسبة الأبعاد الحقيقية ديالها، والجديدة كتجي الأولى.
  • إجراءات العناصر: إعادة الاستعمال، والإضافة للمفضلة، والحذف، واختيار النتائج بشكل فردي.
  • عارض مفصّل: تفقد التعليمات، والموديل، والإعدادات النهائية، والطابع الزمني، والوسائط بالحجم الكامل.
  • عمليات جماعية: تحميل، أو إضافة للمفضلة، أو إزالة منها، أو حذف العناصر المختارة.
  • التراجع: النتائج المحذوفة يمكن استرجاعها خلال ست ثواني.
  • استرجاع الأعطاب: العمليات الفاشلة أو الملغاة أو المصنفة NSFW كيبقى السبب ديالها محفوظ، وكيكون متاح مسار لإعادة المحاولة.

اختيار إعادة الاستعمال كيرجع الموديل الأصلي والتعليمات والإعدادات، وهاد الشي كيخليه مفيد للخدمة التكرارية، ماشي غير لنسخ نص التعليمات.

السجل المحلي

السجل كيتخزن فـ IndexedDB فالمتصفح الحالي. ككيحتافظ حتى لـ 60 سجل، بينما العناصر المفضلة كتبقى محفوظة وما كتتحيدش بسبب الوصول لهاد الحد. وحيت عناوين URL ديال النتائج تابعة لمنصة التوليد، يقدرو السجلات القديمة يبقاو فالسجل من بعد ما تسالي مدة صلاحية وسائط CDN ديالهم.

الخيار 1: استعمل الستوديو المستضاف

أسرع طريقة باش تبدا هي تفتح openhiggsfield.ai. هاد النسخة كتخدم كاملة فالمتصفح وما كتحتاج لا تثبيت Node.js لا إعداد محلي.

  1. حل الستوديو المستضاف.
  2. اختار إضافة مفتاح.
  3. لصق مفتاح المنصة ديالك بصيغة id:secret.
  4. اختار موديل للصور أو للفيديو.
  5. دخل التعليمات وضبط الإعدادات المتاحة.
  6. صيفط الطلب وتسنى حتى تكمل عناصر النتائج.

المفتاح كيتعالج بواسطة server action وكيتخزن فـ cookie من نوع httpOnly. المتصفح ما كيتاصلش مباشرة بواجهة برمجة التوليد. إلا ما كان حتى مفتاح متاح، الستوديو كيفتح نافذة المفتاح عوض ما يفشل بلا ما يوضح السبب.

الخيار 2: ثبّت OpenHiggsfield AI محلياً

المتطلبات

خاصك بيئة تطوير قادرة تشغّل المشروع بـ pnpm. وخصك حتى مفتاح منصة متوافق باش تولّد النتائج. كما أن سير عمل الرفع كيحتاج رمز Vercel Blob بصلاحيات القراءة والكتابة.

ثبّت الاعتماديات وبدا التطوير

نسخ أو حمّل المستودع، حل المجلد ديالو فطرفية، وشغّل:

pnpm install
pnpm dev

خادم التطوير كيبدا فـ http://localhost:3000. حل داك العنوان، ضغط على إضافة مفتاح، ودخل المفتاح بصيغة id:secret.

ضبط متغيرات البيئة

حدّد أصل واجهة برمجة التوليد ورمز Vercel Blob فالبيئة اللي كيستعملها التطبيق:

HF_API_BASE_URL=
OPEN_HIGGSFIELD_READ_WRITE_TOKEN=
  • HF_API_BASE_URL كيحدّد الأصل ديال واجهة برمجة التوليد، وكيكون خاص بالخادم فقط.
  • OPEN_HIGGSFIELD_READ_WRITE_TOKEN كيوفّر صلاحية القراءة والكتابة لرفع الملفات إلى Vercel Blob.

ما تكشفش أصل واجهة برمجة التوليد ولا بيانات الاعتماد الخاصة فالكود اللي كيخدم فالعميل. المشروع مصمم بحيث تكون server actions هي الجهات الوحيدة اللي كتستعمل واجهة برمجة التوليد.

أوامر الإنتاج

بنِ وقدّم نسخة الإنتاج باستعمال:

pnpm build
pnpm start

المستودع فيه حتى أمر خاص بالهوية البصرية كيعيد بناء الأيقونات وبطاقة Open Graph فـ public/:

pnpm brand

ولّد أول نتيجة ديالك

  1. تأكّد بلّي المؤشّر ديال المفتاح فالشريط الفوقاني كيبان فيه بلّي كاين مفتاح متاح.
  2. حلّ منتقي النماذج القابل للبحث.
  3. ختار نموذج ديال الصور ولا الفيديو.
  4. كتب prompt فالمحرّر المشترك.
  5. راجع الإعدادات اللي تخرجات لهاد النموذج.
  6. إلا كان النموذج كيدعم هادشي، زِد ميديا مرجعية ولا إدخال آخر خاص بالدور ديالو.
  7. ختار حجم دفعة حتى لأربعة، فالحالات المناسبة.
  8. ضغط على Cmd + Enter ولا Ctrl + Enter.

فطلب بسيط ديال صورة، تقدر تكتب:

A cinematic photograph of a glass observatory above a misty forest at sunrise

وبالنسبة لنموذج ديال الفيديو، يقدر يكون prompt موجّه للحركة بحال:

The camera slowly approaches a glass observatory while morning fog moves through the trees

الخيارات كتختلف حسب النموذج. استعمل غير الإعدادات وأدوار الميديا اللي كيبانوا فالأستوديو، وما تفترضش بلّي كل نموذج كيدعم نفس الإدخالات.

إعادة استعمال الأصول والتشغيلات السابقة

ملي كيقبل النموذج الميديا، حلّ منتقي الأصول للدور المناسب. كيقدّم جوج مصادر من نفس المكتبة:

  • التحميلات: الملفات اللي ترفعات من قبل عبر الأستوديو.
  • السجل: الميديا ديال عمليات التوليد اللي سالات.

المنتقي كيفلتر العناصر حسب النوع اللي كيحتاجو الدور المختار. بهاد الطريقة تقدر تستعمل صورة سالية كإطار بداية ولا كمرجع، ملي النموذج المختار كيصرّح بلّي كيدعم هاد الإدخال.

باش تعاود تولّد نتيجة سابقة، اختار إعادة الاستعمال من بطاقة ديالها فالمعرض ولا إعادة الإنشاء فالمشاهد. الأستوديو كيرجّع النموذج والإعدادات والـprompt، باش تقدر تبدّل تفصيل واحد وتولّد نسخة أخرى.

خدم بفعالية فالمعرض

استعمل نطاقَي الصور والفيديو باش تركّز على نوع معيّن من الميديا، والأصول باش تشوف كل التشغيلات اللي سالات، والمفضّلة باش تبقى النتائج المهمة ساهلة الوصول. شريط التبويبات كيدعم التنقّل بمفاتيح الأسهم.

باش تسيّر نتائج متعددة، كليك على خانة الاختيار ديال بطاقة باش تدخل لوضع التحديد. كليك مع Shift كيوسّع التحديد على واحد النطاق. من بعد تقدر تدير تنزيلات جماعية، تبديلات فالمفضّلة، ولا الحذف. ضغط على Esc باش تخرج من وضع التحديد.

التنزيلات الجماعية كتخدم بالتتابع وكتبين التقدّم. التقرير النهائي كيعطيك الملفات اللي رفضها CDN. إلا حيدتي العناصر الغلط، استعمل زر التراجع اللي كيبقى متاح لست ثواني قبل ما يسالي الوقت.

كيفاش خدامة بنية التوليد

كل عملية توليد ككتبدا بكائن واحد فيه النموذج المختار، والـprompt، والميديا، والإعدادات:

{ model, prompt, media, settings }

الواجهة كتبني هاد الكائن وكتدوزو لإجراء فالخادم. هاد الإجراء كيلقى النموذج فالفهرس وكيحوّل قيم الأستوديو للحقول اللي كتتوقّعها واجهة برمجة التوليد، بحال image_urls وaspect_ratio.

طلبات الإرسال والحالة كتتبع هاد الأنماط فالخادم:

POST /{model}
GET /requests/{id}/status
Authorization: Key <api_key>

المتصفّح ما كيتاصلش مباشرة بواجهة برمجة التوليد. التحميلات كتتعالج بوحدها: العميل كيرفع الملفات لـVercel Blob عبر /api/blob، اللي كيصدر رموز مقيّدة النطاق. روابط blob: المحلية كتستعمل غير للمعاينات.

تنظيم المشروع

src/
  app/
    /api/blob
    base.css
  generation/
  openhiggsfield/
  • src/app/ فيها صفحة الأستوديو اللي كتاخد كامل الشاشة، ونقطة نهاية رموز Blob، وأنماط canvas على مستوى الوثيقة.
  • src/generation/ فيها طلبات التوليد، وإجراءات الخادم، وتحويلات API، وفهرس النماذج، ومخازن Zustand.
  • src/openhiggsfield/ فيها المحرّر، والمعرض، والمشاهد، ومنتقي النماذج، والإعدادات، ومنتقي الأصول، وشريط التحديد، وCSS ديال الأستوديو.

نصائح متقدمة

اعتبر الفهرس هو مصدر الحقيقة

سلوك النماذج كيتحكّم فيه الفهرس الموجود فـsrc/generation/catalog/. كل مدخلة فالفهرس كتزوّد الواجهة بالإعدادات وأدوار الميديا ديالها، وبهذا الأستوديو ما كيحتاجش لائحة أخرى ثابتة ومكتوبة يدوياً للتحكّمات.

ملي توسّع المشروع بنموذج مدعوم من خدمة التوليد، تبّع النمط الموجود فتعريفات الفهرس. تأكّد بلّي الإعدادات المسموح بها وأدوار الميديا كيمثّلو الـAPI بدقّة، وما تزيدش تحكّمات خاصة بالنموذج فبلاصة أخرى فالأستوديو.

خلّي الولوج للـAPI فالخادم

حافظ على الحدّ الفاصل الحالي ديال إجراءات الخادم ملي تخصّص المشروع. المصادقة ديال التوليد كتستعمل Authorization: Key <api_key>، ونقل هاد الاستدعاءات لكود المتصفّح غادي يضعف التصميم اللي كيخلّي التواصل مع الـAPI وبيانات الاعتماد فالخادم.

فهم نموذج الحالة ديال Zustand

التطبيق كيستعمل خمسة مخازن صغار ديال Zustand، عوض ما يدير مخزن لكل نموذج. مسارات الصور والفيديو كيتشاركو حالة الـprompt والميديا، بينما الإعدادات مفهرسة حسب معرّف النموذج، ومخزن نشط صغير كيتبّع الحالة الحالية. التخصيصات خاصها تحافظ على بنية الإعدادات الموجّهة حسب النموذج.

خطّط لروابط الميديا اللي كتسالي صلاحيتها

السجل فـIndexedDB يقدر يبقى مدة أطول من الملفات المستضافة فـCDN ديال منصة التوليد. سجلات المفضّلة كيتحتافظ بها عمداً، ولكن هادشي ما كيضمنش بقاء روابط الميديا البعيدة خدامة. نزّل النتائج المهمة عوض ما تعتمد غير على سجل المتصفّح.

استعمل المفضّلة فجلسات التكرار الطويلة

الحدّ العادي للسجل هو 60 سجل، بينما العناصر المفضّلة ما كيتحيدوش بسبب هاد الحد. علّم النتائج الواعدة كمفضّلة فالجلسات الطويلة، ومن بعد استعمل إعادة الاستعمال ولا إعادة الإنشاء باش تكمّل تحسين الـprompts والإعدادات ديالها.

الخلاصة

OpenHiggsfield AI كيجمع بين توليد الصور والفيديو فستوديو واحد مفتوح المصدر ومبني على كاتالوگ. تقدر تستعمل النسخة المستضافة دغيا، ولا تستضيف تطبيق Next.js عندك، وتربط المفتاح ديالك، وتخدم بإعدادات خاصة بكل موديل، وتعاود تستعمل الأصول، وتدبّر النتائج من خلال گاليري ديال المتصفح كيبقى محفوظ. حتى الحد الفاصل ديال API المخصص للسيرفر والكاتالوگ التصريحي كيوفّرو أساس واضح للتخصيص.