العودة إلى المشاريع
SaaS DevelopmentLiveWeb
Adstacker: مولد إعلانات الفيديو بالذكاء الاصطناعي
منصة SaaS مدعومة بالذكاء الاصطناعي تحول تحميل فيديو واحد إلى مئات من أشكال الإعلانات ذات العلامة التجارية - المنسقة عبر تطبيق ويب Next.js، ولوحة تحكم إدارية، وواجهة برمجة تطبيقات NestJS، وخدمة عرض Remotion، وعامل توليد BullMQ. تدفع توليد مجموعات تلقائي، وعرض معزز بوحدات معالجة الرسومات (GPU)، وترجمات متعددة الأنماط، وتتبع التقدم في الوقت الفعلي عبر WebSocket، وفوترة الاشتراكات المدعومة من Stripe.
17+
Technologies
11+
Key Features
Web
Platform
الميزات الرئيسية
محرك توليف AI يولد جميع تباديل Hook x Body x CTA6 أنواع من الرسوم المتحركة - تلاشي (fade)، انزلاق للأعلى/للأسفل (slide-up/down)، تكبير/تصغير (scale)، آلة كاتبة (typewriter)، ارتداد (bounce)6 أنماط ترجمة - Hormozi, MrBeast, GaryVee, Abdal, TikTok Viral, Clean Corporateجميع نسب العرض إلى الارتفاع الأربعة - 9:16, 16:9, 1:1, 4:5عرض Remotion + FFmpeg معزز بوحدات معالجة الرسومات (GPU)
أبرز نقاط التطوير
هندسة بنية خلفية NestJS كاملة مع Mongoose و CRUD معياريمحرك توليف مع توليد الجداء الديكارتيمحرك تركيب فيديو Remotion بستة أنواع من الرسوم المتحركةمسار توليد BullMQ مع التحكم بالتزامنتتبع التقدم في الوقت الفعلي عبر WebSocketدورة حياة اشتراك Stripe مع أرصدة مدفوعة بـ webhookتحليلات تجميع MongoDB للوحة تحكم الإدارة
المكدس التقني
Next.jsReactTypeScriptTailwind CSSshadcn/uiNestJS 11MongooseMongoDBRedisBullMQRemotionFFmpegAWS S3WebSocketStripe
مساهمتنا
هندسة البنية الخلفية
صممنا البنية الخلفية الكاملة لـ NestJS من الصفر - مخططات Mongoose، واجهات برمجة تطبيقات CRUD المعيارية، التحقق من صحة DTO، وطبقة الربط التي تحول المصفوفات المسطحة للواجهة الأمامية إلى مستندات مدمجة في الواجهة الخلفية.
محرك التوليف
بنينا محرك حساب التوليف الذي يسرد جميع التباديل الصالحة لـ Hook x Body x CTA x Subtitle ويضع كل منها في قائمة انتظار كـ BullMQ job مستقلة.
مسار عرض الفيديو
طورنا تركيبات Remotion (VideoComposition, HookOverlay, BodyOverlay, CtaOverlay) بستة أنواع من الرسوم المتحركة وجمعناها عند بدء تشغيل الخادم لتنفيذ المهام بسرعة.
عامل التوليد
نفذنا معالج التوليد لـ BullMQ: تحميل S3، عرض Remotion renderMedia()، تحسين ترميز FFmpeg، توليد الصور المصغرة، تحميل S3، وتحديث قاعدة البيانات، مع معالجة الأخطاء وإعادة المحاولة.
نظام الترجمة
بنينا 6 أنماط عرض ترجمة في SubtitleRenderer.tsx تغطي Hormozi، وAbdal، وMrBeast، وGaryVee، وTikTok Viral، وClean Corporate عبر جميع نسب العرض إلى الارتفاع الأربعة.
التقدم في الوقت الفعلي
دمجنا بوابة WebSocket لتتبع تقدم التوليد في الوقت الفعلي مع دعم SSE الاحتياطي، مما يتيح تحديثات حالة المهام المباشرة على الواجهة الأمامية دون الحاجة إلى الاستقصاء.
تكامل الفوترة
نفذنا دورة حياة اشتراك Stripe الكاملة - جلسات الدفع، بوابة الفوترة، معالج webhook مع الجسم الخام والتحقق من التوقيع، تخصيص الرصيد عند الاشتراك، وجدولة إعادة تعيين الرصيد شهريًا.
نظام المشاركة والتحميل
بنينا نظام المشاركة والتحميل - رموز قابلة للمشاركة تعتمد على nanoid، وصول إلى S3 signed URL العام بدون مصادقة، إلغاء الروابط، ورؤوس تحميل Content-Disposition.
وحدة الإدارة
طورنا وحدة الإدارة باستخدام MongoDB aggregation pipelines لتحليلات لوحة التحكم، وبيانات المخططات الزمنية، وإدارة المستخدمين، وإدارة الاشتراكات.
تكامل كامل
قدنا التكامل الكامل بين الواجهة الأمامية والخلفية عبر تطبيق المستخدم ولوحة الإدارة - استبدلنا جميع المخازن الوهمية بمكالمات API حية، ووصلنا تقدم WebSocket، وتحققنا من رحلة المستخدم الكاملة من البداية إلى النهاية.
النتائج
أشكال الإعلانات: المئات من تحميل واحدالعرض: Remotion + FFmpeg معزز بوحدات معالجة الرسومات (GPU)تغطية الأنماط: 6 أنماط ترجمة × 6 رسوم متحركة × 4 نسبالبنية: منصة منسقة بخمسة مكونات
ما يجعل هذا مميزاً
يحول تحميل فيديو واحد إلى مئات من أشكال الإعلانات ذات العلامة التجارية من خلال توليد مجموعات تلقائي، وعرض معزز بوحدات معالجة الرسومات (GPU)، ودعم ترجمة متعدد الأنماط - مصمم خصيصًا لمسوقي الأداء.
الأسئلة الشائعة
قامت MicrocosmWorks ببناء محرك حساب التوليفات الذي يحسب الناتج الديكارتي لجميع تباديل Hook x Body x CTA x Subtitle. يتم تعريف كل عنصر إدخال (hooks، أجزاء النص الرئيسية، CTAs) بواسطة المستخدم، ويقوم المحرك بتعداد كل توليفة صالحة، ثم يضع كل منها في قائمة انتظار كـ BullMQ job مستقل. يعني هذا النهج أن مقطع فيديو يحتوي على 5 hooks، و 3 أجزاء نص رئيسية (bodies)، و 4 CTAs، و 6 أنماط ترجمة يولد 360 شكل إعلان فريد تلقائيًا.
نفذت MicrocosmWorks 6 أنماط لعرض الترجمة في Adstacker: Hormozi, MrBeast, GaryVee, Abdal, TikTok Viral, وClean Corporate. يتمتع كل نمط بخصائص مميزة للخط واللون والرسوم المتحركة والموضع تتطابق مع تنسيقات المبدعين الشائعة التي يتعرف عليها مسوقو الأداء. يتعامل SubtitleRenderer مع جميع نسب العرض إلى الارتفاع الأربع (9:16, 16:9, 1:1, 4:5) و6 أنواع من الرسوم المتحركة (fade, slide-up, slide-down, scale, typewriter, bounce) ضمن تركيبات Remotion.
قامت MicrocosmWorks ببناء خط أنابيب العرض (rendering pipeline) باستخدام تركيبات Remotion المجمعة عند بدء تشغيل الخادم لتنفيذ المهام بسرعة، بالاشتراك مع FFmpeg لتحسين الترميز. تدير BullMQ قائمة انتظار المهام غير المتزامنة (async job queue) مع تحكم قابل للتكوين في التزامن (concurrency control)، بحيث يتم عرض تنويعات متعددة بالتوازي عبر موارد GPU المتاحة. تتعامل كل مهمة مع خط الأنابيب الكامل: تنزيل S3، Remotion renderMedia، ترميز FFmpeg، إنشاء الصور المصغرة، تحميل S3، وتحديث قاعدة البيانات، مع معالجة الأخطاء وإعادة المحاولة التلقائية.
قامت MicrocosmWorks بدمج WebSocket gateway يدفع تقدم الإنشاء في الوقت الفعلي لكل شكل متغير في قائمة الانتظار إلى الـ frontend، مع خيار احتياطي SSE (Server-Sent Events) للبيئات التي لا تتوفر فيها اتصالات WebSocket. يرى المستخدمون تحديثات الحالة المباشرة لكل شكل متغير بما في ذلك حالات الانتظار، المعالجة، نسبة العرض، والاكتمال. هذا يلغي الحاجة إلى polling ويوفر ملاحظات فورية حول حالة مسار الإنشاء.
طبقت MicrocosmWorks نظام فوترة الاشتراكات عبر Stripe مع تخصيص الأرصدة المدفوع بواسطة webhook. عندما يشترك المستخدم أو يجدد اشتراكه، يقوم معالج الـ webhook بتخصيص أرصدة التوليد بناءً على مستوى خطته. يستهلك كل توليد لمتغير فيديو رصيدًا واحدًا، وتقوم وظيفة cron شهرية بإعادة تعيين أرصدة الرصيد. توفر لوحة تحكم المسؤول تحليلات تجميعية من MongoDB تعرض أنماط استخدام الرصيد، وإيرادات الاشتراكات، والاستهلاك لكل مستخدم لاتخاذ قرارات التسعير.
هل لديك مشروع مشابه في ذهنك؟
دعنا نناقش كيف يمكننا تحقيق رؤيتك بنفس مستوى الخبرة والتفاني.
