Fable 5 و GPT 5.6: أنشئ موقعاً إلكترونياً بقيمة 10,000 دولار بضربة واحدة باستخدام هذه المهارة

CChase AI
Computing/SoftwarePhotography/ArtInternet Technology

Transcript

00:00:00تم إنشاء موقع الويب هذا بالكامل بلقطة واحدة بواسطة “Claude Fable 5” بمهارة واحدة.
00:00:05الأمر لا يقتصر على رسوم متحركة واحدة للتمرير، بل هي عدة رسوم متحركة تم دمجها معاً
00:00:10لتقدم لك تجربة سلسة وعالية الجودة ومتناغمة.
00:00:15هذا أمر مذهل للغاية.
00:00:16هذا منتج متميز للغاية وسأعرض لك المهارة التي تمكّنك من القيام بكل هذا.
00:00:22بالإضافة إلى ذلك، سأوضح لك كيف قمت بذلك ليس فقط داخل “Claude Code”،
00:00:25بل سنقوم بتجربة الشيء نفسه تماماً داخل “GPT 5.6 Sol” الجديد كلياً
00:00:31لأننا لماذا نتوقف عند أداة ذكاء اصطناعي واحدة هذه الأيام؟
00:00:35وهذا الشيء رائع حقاً.
00:00:37كما قلت، إذا حاولت القيام بذلك يدوياً بدون هذا النوع من مهارة رسوم التمرير المتحركة التي وجدتها وطورتها،
00:00:42فأنت تعلم مدى صعوبة الأمر.
00:00:43أنت تقوم بإنشاء مقاطع فيديو متعددة، وتستخرج الإطارات الأولية، وتحاول إنشاء توافق،
00:00:47وتستخرج كل الإطارات واحداً تلو الآخر، إنه عمل شاق للغاية
00:00:50وهذه المهارة تجعل العملية بأكملها سهلة التنفيذ للغاية.
00:00:53يعود الفضل الحقيقي في هذه المهارة إلى “بيتر وانغ”.
00:00:55هو من قام بإنشاء النسخة الأصلية.
00:00:57وجدتها على تويتر وكان لطيفاً بما يكفي لجعلها مفتوحة المصدر.
00:01:00لذا سأضع رابط “عالم التمرير” الخاص به بالأسفل حتى تتمكن من إلقاء نظرة عليه.
00:01:03ما فعلته أنا هو أنني قمت بتطوير هذا العمل وأدخلت بعض التحسينات،
00:01:07أبرزها إدخال مستويات الميزانية حتى تتمكن من القيام بذلك دون الحاجة إلى إنفاق الكثير.
00:01:10نحن لا نحتاج بالضرورة إلى ستة مشاهد مختلفة لموقعنا الإلكتروني
00:01:14وقد أضفت الكثير من التحسينات على نسخة الهاتف المحمول منه وبعض الأمور المتعلقة بتحسين محركات البحث.
00:01:19الطريقة التي تعمل بها رسوم التمرير المتحركة بشكل عام هي أننا نبدأ بصورة واحدة.
00:01:23هذا ما تراه هنا تماماً.
00:01:24ثم نأخذ هذه الصورة ونحولها إلى فيديو.
00:01:27رسوم التمرير المتحركة هذه كانت في مرحلة ما عبارة عن فيديو، لكننا قمنا باستخراج جميع الإطارات الفردية من الفيديو باستخدام “FFmpeg”
00:01:34ثم ربطنا ذلك بالموضع الذي تتواجد فيه أنت، كمستخدم، على موقع الويب.
00:01:40هناك الكثير مما يحدث خلف الكواليس لضمان تجربة سلسة حتى لا يكون الأمر متقطعاً تماماً.
00:01:46وفوق ذلك، نتأكد من أن جميع مشاهدنا تشير إلى بعضها البعض عندما نقوم ببنائها.
00:01:50بهذه الطريقة تبدو جميعها متناغمة.
00:01:52يبدو الأمر كما لو أنه مستوحى من قصة واحدة.
00:01:55أما بالنسبة لكيفية إنشاء الصور ومقاطع الفيديو، فنحن نفعل ذلك من خلال “Higgs field MCP”.
00:02:00ويمكننا القيام بذلك باستخدام “Cloud Code” و”Codex”.
00:02:02لسنا مضطرين لمغادرة الجهاز الطرفي أبداً.
00:02:04إنها تستدعي كل تلك النماذج الخاصة بالصور، وتحديداً “GPT Image 2”، وجميع نماذج الفيديو، مثل “Seed Dance”، من خلال “MCP” أو واجهة سطر الأوامر.
00:02:12الآن لربط تلك الأدوات بوكيل الذكاء الاصطناعي الذي اخترته، ما عليك سوى الانتقال إلى “Higgs field”، ثم “MCP” وواجهة سطر الأوامر، واتباع هذه الخطوات.
00:02:20ما عليك سوى نسخ عنوان “URL” الخاص بـ “MCP” ثم إجراء عملية المصادقة.
00:02:25الشيء الوحيد الذي تحتاجه بعد ذلك هو المهارة نفسها.
00:02:27وسأضع رابط نسختي بالأسفل أيضاً.
00:02:30يمكنك فقط نسخ الرابط وإعطاؤه لـ “Cloud Code” أو “Codex”، أو يمكنك استخدامه كإضافة.
00:02:35كلا الطريقتين تعملان.
00:02:36الآن، كما قلت في المقدمة، سأقوم بتجربة هذا داخل “Codex” مع “Sol 5.6” الجديد تماماً، ولكن هذا هو ما يبدو عليه الأمر داخل “Cloud Code”.
00:02:44إنها نفس العملية تماماً.
00:02:46أنت تمر بمقابلة، وتخبرها بنوع الموقع الذي تحاول بناءه، وما تريده لكل مشهد، وستوجهك خطوة بخطوة.
00:02:53وستتأكد من رأيك، مثلاً: “هل تعجبك هذه الصورة قبل أن تبدأ فعلياً بإنشاء جميع مقاطع الفيديو؟”
00:02:57أنت لا تشغل المهارة فقط لتجد جميع مقاطع الفيديو قد ظهرت دون أن يكون لك أي رأي في العملية.
00:03:01لذا فهي حقاً ترشدك خلال العملية بأكملها.
00:03:04لذا داخل “Codex”، استدعيت مهارة “عالم التمرير”.
00:03:07لقد كتبت فقط “/scroll world”.
00:03:08وقلت إنني أحاول إنشاء موقع ويب لعلامة تجارية متخصصة في رحلات اليابان.
00:03:14والتوجه الفني العام الذي أريده هو أننا سنعتمد نوعاً ما على أسلوب فن طي الورق “الأوريغامي”.
00:03:18الآن، إذا كنت لا تعرف الأسلوب الذي تريده، يمكنك فقط إجراء نقاش ذهاب وإياب مع الذكاء الاصطناعي وسيطرح عليك عدة أسئلة.
00:03:25كنت أعرف مسبقاً نوعاً ما ما أريده.
00:03:27لذا لا تقلق إذا لم تكن لديك فكرة دقيقة عندما تبدأ، بعد أن تقدم له بعض التوجيهات الإبداعية، سيسألك عما تريد القيام به من حيث الميزانية.
00:03:36وما الذي تريد القيام به من حيث ميزانية الهاتف المحمول؟
00:03:38إنه يسأل، كم عدد المشاهد التي تريدها كمرجع؟
00:03:41هذا كان ستة مشاهد.
00:03:43هذه كمية كبيرة من الفيديو، وهي في الواقع رحلة طويلة جداً من البداية إلى النهاية.
00:03:48ربما يكون هذا مبالغاً فيه بالنسبة لمعظم الناس.
00:03:50علاوة على ذلك، سيكلفك هذا الكثير من رصيد “Higgs field”، وقد كلفني حوالي 800 في نهاية المطاف.
00:03:56لذا إذا لم تكن مشتركاً في إحدى الخطط الأكثر تكلفة، فمن المحتمل أن ترغب في الاكتفاء بأربعة مشاهد، أعتقد أنها نقطة توازن رائعة.
00:04:03التالي هو ما تريد فعله مع الهاتف المحمول.
00:04:04لذا يمكنك القيام بكل شيء بدءاً من مجرد قصه بأمان وصولاً إلى سلسلة صور شخصية كاملة، حيث سيقوم بإنشاء مقاطع فيديو إضافية خصيصاً للهاتف المحمول.
00:04:12لذا لديك بعض المساحة للعمل، حسب مدى العمق الذي تريد الوصول إليه في هذا الجانب.
00:04:15ولكن لهذا الفيديو، سنكتفي بالخيار الموفر والقص الآمن.
00:04:20لذا، نوعاً ما أرخص الخيارات، وتفهم أنه يمكنك القيام بعدد أقل من المشاهد أيضاً.
00:04:24يمكنك تقليله إلى ثلاثة، هذا فقط ما يقدمه كافتراضي.
00:04:28لكن بعد ذلك سيأخذك عبر مقترح الرحلة ويقول: “مرحباً، هذا ما سيبدو عليه كل مشهد”.
00:04:32ويقول: “هذا هو عدد عمليات التوليد التي سيستغرقها”.
00:04:35لذا سيستغرق إجمالي أربع عمليات توليد للصور، وأربعة فيديوهات غوص للمشهد.
00:04:40يحتاج الأمر إلى رابط بين بعض مقاطع الفيديو وبعض عمليات التلاشي المتقاطع.
00:04:43لذا في المجموع يقول تسع عمليات توليد ويعطيك وقتاً متوقعاً للتوليد، والذي عادة ما يكون متحفظاً جداً.
00:04:49عادة لا يستغرق الأمر وقتاً طويلاً، حتى عندما نتحدث عن فيديو الذكاء الاصطناعي.
00:04:52وبمجرد الموافقة على ذلك، الشيء التالي الذي سيفعله هو إنشاء المرساة.
00:04:56ستكون المرساة هي إطار البداية.
00:05:00ونحن نتحدث عن إطار البداية ذلك.
00:05:01نحن نتحدث عن شيء مشابه لهذا في الخلفية.
00:05:03ستكون مجرد صورة ثابتة.
00:05:04والآن الأمر متروك لك لتقول: “حسناً، يعجبني هذا”.
00:05:06هذا هو التوجه الفني الذي سيسود في كل مكان.
00:05:09أو “لا، دعونا نغير بعض القطع”.
00:05:11هذا هو الجزء الذي يجب أن تتقنه حقاً، لأنه إذا لم يعجبك وقلت نعم، فسيتم بناء كل شيء عليه.
00:05:17إليك نظرة على الصورة التي أنشأتها.
00:05:19وهي تعجبني الآن.
00:05:20ربما تدرك هذا بالفعل.
00:05:21إذا كنت تفعل كل هذا من خلال “Codex” ومن خلال “Sol”، حسناً، فهي تحتوي على ميزة إنشاء الصور.
00:05:26لسنا بحاجة لإرسال أي طلبات إلى “Higgsfield” لإنشاء صور باستخدام “GPT Image 2”
00:05:31عندما نمتلك هذه القدرة أصلاً داخل “Codex”.
00:05:34لذا ستجعل “Codex” يقوم بذلك أصلاً، لكنك لا تزال مضطراً لإرساله إلى “Higgsfield” من أجل إنشاء الفيديو.
00:05:41على الجانب الآخر، إذا كنت تفعل هذا في “Cloud Code”، فمن الواضح أنها لا تحتوي على ميزة إنشاء الصور.
00:05:44لذا يجب على “Higgsfield” تحمل العبء طوال الطريق.
00:05:48ولكن ها هي الصورة.
00:05:50أنا أحبها.
00:05:51إذن ماذا سنفعل؟
00:05:52سنقول: “مهلاً، هذا رائع”.
00:05:55لا أستطيع الكتابة.
00:05:57المضي قدماً.
00:05:59لذا بعد 32 دقيقة، أكمل موقعنا على الويب.
00:06:01حصلنا على أربعة مشاهد مختلفة.
00:06:02استغرق الأمر 10 عمليات توليد.
00:06:04والآن هو موجود على مضيفنا المحلي وجاهز للانطلاق.
00:06:06إذن دعونا نلقي نظرة.
00:06:07هذا هو موقعنا السياحي الياباني.
00:06:08ما سنفعله هو أننا سنتمرر خلاله ونلقي نظرة سريعة.
00:06:12إذن المسافرون، حصلنا على مترو الأنفاق.
00:06:15ننتقل هنا إلى المنزل.
00:06:17إنه يفتح.
00:06:19ثم يذهبون إلى الفندق.
00:06:20إنه ينفتح.
00:06:22نوعاً ما رائع.
00:06:23ثم لدينا الطائر هنا، الذي يبدأ في الطيران.
00:06:28بشكل عام، ما الذي يعجبني؟
00:06:30وما الذي لا يعجبني؟
00:06:31أعجبتني المرئيات.
00:06:32أعتقد أن هذا يبدو رائعاً للغاية.
00:06:34كما تعلمون، أعتقد أنه داخل كل مشهد، أحببت كيف تطور كل مشهد فردي.
00:06:38مثل هذا الجزء حيث يأتي مترو الأنفاق.
00:06:41رائع.
00:06:41مشكلتي هنا هي الانتقال حيث ننتقل من المشهد الأول إلى المشهد الثاني.
00:06:46انتقال مفاجئ جداً.
00:06:47ربما تريد انتقالاً مفاجئاً.
00:06:48نوعاً ما، أعتقد أن هناك بعض التوجه الإبداعي هناك.
00:06:51لكن هذا شيء يمكننا تغييره.
00:06:52نفس الشيء هنا.
00:06:53بينما ننتقل من المشهد الثاني، تفاصيل لا تصدق، لأكون صادقاً.
00:06:57ولكن بينما ننتقل من المشهد الثاني إلى الثالث، مرة أخرى، انتقال مفاجئ آخر.
00:07:01مقابل المشهد الثالث إلى الرابع، أعتقد أن هذا انتقال رائع.
00:07:04لذا هذا ينفتح.
00:07:06بوم.
00:07:06إنهم في الفندق.
00:07:07ولكن إذا نظرت في الخلفية، لاحظ المشهد رقم أربعة، وهو يدخل الإطار.
00:07:12في البداية يكون ضبابياً، ثم يظهر، ويعطي تأثيراً ثلاثي الأبعاد جداً.
00:07:17ويعطي عمقاً للموقع.
00:07:19ثم ينتقل بسلاسة إلى المشهد الرابع.
00:07:22هذا رائع.
00:07:23لو حدث ذلك من المشهد الأول إلى الثاني ومن الثاني إلى الثالث، لكنت سعيداً جداً.
00:07:28تلك هي شكواي الأساسية من هذا.
00:07:31لكن كل شيء آخر يبدو جيداً.
00:07:32والقدرة على إضافة تلك الأنواع من انتقالات المشاهد وتنعيمها، لا أعتقد أنه
00:07:35سيكون صعباً جداً.
00:07:36لأنه إذا قارنت ذلك التوليد، الذي كان مرة أخرى “Sole GPT 5.6”، بما أنشأناه
00:07:41في “Claude Code”، فإن انتقالات المشاهد هنا بالتأكيد أكثر سلاسة قليلاً.
00:07:45إذن هذا هو المشهد الأول، أليس كذلك؟
00:07:46لذا فهذه الأشياء تندفع من الأعلى وهو انتقال سلس إلى تلك الأشياء
00:07:52لتكون، حسناً، قريبة بقدر الإمكان من السلاسة لتبدو وكأنها أسلاك هنا.
00:07:56نفس الشيء هنا تماماً.
00:07:57نحن ندخل.
00:07:58أوه، بوم.
00:07:58إنه يفتح.
00:07:59ثم نذهب فقط فوق القمة إلى المشهد التالي.
00:08:01لذا مشهد بمشهد مع انتقالات “Fable 5”، أعتقد أننا أفضل.
00:08:06نفس الشيء هنا.
00:08:06بوم.
00:08:07نحن هنا.
00:08:07تصغير.
00:08:08المشهد التالي.
00:08:09هذه شكواي الرئيسية.
00:08:11بالتأكيد سأعطي الأفضلية لـ “Fable 5” مقابل “Sole 5.6” هنا.
00:08:15ولكن هذا بلقطة واحدة، أليس كذلك؟
00:08:18بمهارة واحدة.
00:08:19أنا معجب جداً بشكل عام بمدى جودة إنشاء هذه المهارة.
00:08:25هذا رائع.
00:08:26الآن، السؤال التالي يصبح: “حسناً، هذا مشهد مرئي”.
00:08:29هل يمكننا تحويل هذا إلى موقع ويب أكثر وظيفية اعتماداً على ما تحاول القيام به؟
00:08:33لا أعتقد أن هذه مشكلة على الإطلاق.
00:08:33لا أعتقد أن هذه مشكلة على الإطلاق.
00:08:34أعتقد أن المشاكل التقنية لإنشاء موقع ويب بتمرير متحرك مثل هذا الذي يبدو متناغماً ولا يبدو متقطعاً ولا يبدو منخفض الجودة صعبة للغاية.
00:08:38أعتقد أن المشاكل التقنية لإنشاء موقع ويب بتمرير متحرك مثل هذا الذي يبدو متناغماً ولا يبدو متقطعاً ولا يبدو منخفض الجودة صعبة للغاية.
00:08:43كما تعلمون، إذا طلبت منك القيام بذلك بنفسك، أعتقد أنك ستواجه الكثير من المشاكل.
00:08:46وسيستغرق الأمر الكثير من الوقت للوصول إلى ذلك.
00:08:47مع هذا النوع من الأساس، أعتقد أنه من السهل حقاً القول: “حسناً، ماذا نفعل بالنص؟”
00:08:51ماذا نفعل بالنص؟
00:08:52ماذا نفعل بـ CTA (دعوة لاتخاذ إجراء)؟
00:08:53كيف نسحب المستخدم فعلياً من البطل طوال الطريق؟
00:08:56مثل ملء نوع من النموذج.
00:08:57لا أعتقد أن هذا صعب للغاية.
00:08:58لا أعتقد أننا مضطرون لإعادة اختراع العجلة هناك.
00:09:01هذا ما يفعله كل موقع ويب.
00:09:02والقدرة على وضع ذلك فوق ما لدينا هنا، مرة أخرى، مع “Fable 5” ومع
00:09:06“5.6” ليست تحدياً على الإطلاق.
00:09:09وحقيقة أن هذه مجرد مهارة واحدة في لقطة واحدة هي أمر مذهل.
00:09:13مرة أخرى، إذا كنت تريد القيام بذلك بنفسك، قبل ثلاثة أشهر، ستة أشهر، تسعة أشهر
00:09:16من الآن، كان الأمر نوعاً من الألم.
00:09:18لذا مرة أخرى، تحية لـ “بيتر وانغ” على النسخة الأصلية من المهارة.
00:09:21كلا النسختين، خاصتي وخاصته، ستكونان مرتبطتين في أسفل هذا الوصف.
00:09:24وكما رأيت، هذا أمر مباشر للغاية.
00:09:26أنت حقاً لا تضطر لفعل أي شيء.
00:09:27أنت تحتاج فقط إلى الحضور.
00:09:28تحتاج إلى استدعاء المهارة.
00:09:29تحتاج إلى إعطائها نوعاً من التوجيه الإبداعي، وستبدأ في العمل.
00:09:32لذا هذا هو المكان الذي سأترككم فيه يا رفاق اليوم.
00:09:37أخبروني، كالعادة، برأيكم حول هذا في التعليقات.
00:09:40تأكدوا من التحقق من “Chase AI Plus” إذا كنتم ترغبون في الحصول على “Claude Code Master” الخاص بي
00:09:43فئة والمزيد من دروس الذكاء الاصطناعي مثل هذا تماماً.
00:09:46وبخلاف ذلك، أراكم لاحقاً.

Key Takeaway

تُمكّن مهارة 'عالم التمرير' المستخدمين من بناء مواقع إلكترونية متطورة ذات رسوم متحركة متزامنة بلقطة واحدة، عبر دمج نماذج توليد الفيديو مع واجهات سطر الأوامر مثل Claude Code وCodex.

Highlights

  • تتيح مهارة 'عالم التمرير' (Scroll World) إنشاء مواقع إلكترونية تعتمد على رسوم متحركة متكاملة ومترابطة عبر لقطة واحدة باستخدام الذكاء الاصطناعي.

  • تعتمد العملية على تحويل الصور الثابتة إلى مقاطع فيديو، ثم استخراج كافة الإطارات الفردية باستخدام أداة FFmpeg لربطها بموضع المستخدم أثناء التمرير.

  • استخدام نماذج مثل Higgs field MCP مع Claude Code أو Codex يغني عن مغادرة الجهاز الطرفي أثناء توليد الصور ومقاطع الفيديو.

  • كلف إنشاء موقع الويب المكون من 6 مشاهد حوالي 800 وحدة من رصيد Higgs field، بينما توفر نسخة الأربعة مشاهد توازناً اقتصادياً أفضل.

  • أظهرت المقارنة أن انتقالات المشاهد في Fable 5 تتفوق في السلاسة والتناغم مقارنة بتنفيذ المهمة ذاتها في GPT 5.6 Sol.

Timeline

مفهوم وآلية عمل رسوم التمرير المتحركة

  • تعتمد تقنية التمرير على ربط إطارات الفيديو المستخرجة بموقع المستخدم الفعلي على الصفحة.
  • تُعالج الصور ومقاطع الفيديو برمجياً لضمان تجربة بصرية سلسة بعيداً عن التقطع.
  • تُصمم جميع المشاهد لتشير إلى بعضها البعض مما يضفي طابعاً قصصياً موحداً على الموقع.

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

استخدام أدوات الذكاء الاصطناعي في التوليد

  • يتم استدعاء نماذج GPT Image 2 وSeed Dance مباشرة من خلال واجهة سطر الأوامر عبر Higgs field MCP.
  • توجه المهارة المستخدم خطوة بخطوة وتطلب الموافقة على التصور الفني قبل البدء في عمليات التوليد الكثيفة.
  • تتطلب عملية التوليد توازناً دقيقاً في الميزانية، حيث يؤثر عدد المشاهد المختارة بشكل مباشر على التكلفة الإجمالية.

يتم دمج الأدوات عبر نسخ عنوان URL الخاص بـ MCP وإجراء المصادقة داخل Claude Code أو Codex. لا يحتاج المستخدم للخروج من بيئة الجهاز الطرفي، حيث تتولى المهارة إدارة التوجيه الإبداعي وطلب التحقق من الصور قبل إنشاء مقاطع الفيديو الكاملة. يُنصح بالاكتفاء بأربعة مشاهد بدلاً من ستة للتحكم في استهلاك الرصيد، مع توفير خيارات إضافية لتخصيص عرض المحتوى على الهواتف المحمولة.

تجربة التنفيذ والتحليل الفني

  • تستغرق عملية إنشاء موقع كامل بـ 4 مشاهد حوالي 32 دقيقة باستخدام 10 عمليات توليد.
  • تتفاوت جودة الانتقالات بين Fable 5 وGPT 5.6 Sol، حيث أظهر الأول سلاسة أكبر في الربط بين المشاهد.
  • تظل التحديات التقنية قائمة في الانتقالات المفاجئة بين المشاهد، رغم كفاءة النتيجة النهائية في توليد بيئة ثلاثية الأبعاد.

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

Community Posts

View all posts