عن المشروع

# مهارة رسوم السبورة البيضاء المتحركة من SRT مهارة تحويل ترجمات SRT إلى فيديو رسوم سبورة بيضاء مرسومة يدويًا حسب ترتيب السرد. تجمع بين **تنظيم الأقنعة المقسمة** و**رسم الخطوط المتدفق**: يظهر كل عنصر تباعًا مع الترجمة، ويستمر رأس القلم في رسم الخطوط داخل المنطقة، ثم تُضاف الألوان تدريجيًا، وأخيرًا يتم التصدير إلى MP4. مناسبة لتحويل شروحات المعرفة، وسرد القصص، وترجمات الدروس، أو نصوص الفيديوهات القصيرة إلى رسوم متحركة مرسومة يدويًا على خلفية ورقية بلون بيج دافئ. ## أمثلة على النتائج **المشهد: الاستيلاء على الموز في جبل القرود** —— مع ترتيب سرد الترجمة، يتم رسم الجبل الاصطناعي والقرد الصغير تباعًا، ثم القرد الكبير الذي يستولي على الموز، والأطفال المتفرجين. ![الاستيلاء على الموز في جبل القرود: عرض رسوم السبورة البيضاء المتحركة من SRT](examples/scene-01-monkey-mountain-stream.gif) الرسم الخطي الأصلي: [عرض PNG](examples/scene-01-monkey-mountain.png). ## القدرات الأساسية - تحليل ترجمات SRT وتقسيم المشاهد حسب المدة المقترحة 25–35 ثانية - إخراج استراتيجية اللقطات والرسوم التوضيحية أولًا، لضمان أن كل مشهد يعبر عن معنى أساسي واحد فقط - إنشاء ترتيب رسم دلالي للعناصر بناءً على أحداث الترجمة بدلًا من إحداثيات الصورة - استخدام `annotation.json` لإدارة المناطق والتوقيت وارتباط الترجمة ومناطق الحماية من التداخل - استخدام خطوط متدفقة مستمرة لكل منطقة: أولًا `ink` لرسم الخطوط، ثم `color` لإضافة الألوان - دعم منصة معاينة المتصفح لضبط المناطق والترتيب والوقت وارتباط الترجمة - دعم عرض كل مشهد على حدة ودمج عدة مشاهد، وإخراج MP4 كامل ## طريقة العمل جوهر هذه المهارة هو "التحكم بالترجمة والتأكيد خطوة بخطوة". بعد إتمام كل خطوة يتم انتظار التأكيد، لتجنب إهدار تكلفة العرض عندما لا تكون اللقطات أو الرسوم الخطية أو العلامات قد تم إقرارها بعد: 1. تحليل SRT وإخراج استراتيجية اللقطات والرسوم التوضيحية. 2. بعد التأكيد، إنشاء رسوم خطية بأسلوب موحد. 3. بعد تأكيد الرسوم الخطية، إنشاء العلامات بالاعتماد على الترجمة والصورة الأصلية، وتحميلها في منصة المعاينة. 4. بعد تأكيد العلامات، إنشاء صورة فحص المناطق والاتجاهات. 5. ضبط المناطق وترتيب السرد والتوقيت وارتباط الترجمة في منصة المعاينة وحفظها. 6. بعد تأكيد العلامات النهائية، عرض كل مشهد إلى MP4. 7. في المشاريع متعددة المشاهد، يتم الدمج بعد تأكيد كل مشهد نهائي. ## المواصفات البصرية - خلفية ورقية بلون بيج دافئ: يُقترح `#F5EBD7` - خطوط رسم رمادية داكنة، مع استخدام الأحمر والبرتقالي والأزرق فقط كلمسات مفاهيمية قليلة - رسم يدوي بسيط للغاية، خلفية نظيفة ومساحات فارغة كافية - عدم استخدام نصوص المشاهد أو التسميات أو الإحساس الفوتوغرافي أو التأثيرات ثلاثية الأبعاد أو القوام المعقد ## التثبيت والبيئة تأتي المهارة مع سكربت مستقل لتحضير بيئة Python الافتراضية. عند التشغيل لأول مرة نفّذ: ```bash python scripts/prepare_env.py --check python scripts/prepare_env.py ``` عند النجاح سيُخرج الأمر الأول `ENV_PY=<المسار>`؛ استخدم هذا المفسر في العروض اللاحقة لضمان عزل الاعتماديات. ## بنية مواد المشروع ```text assets/whiteboard/<اسم المشروع>/ ├── scene-01-<الاسم>.png ├── scene-01-<الاسم>.annotation.json ├── scene-01-<الاسم>-whiteboard.mp4 └── scene-01-<الاسم>-preview.mp4 ``` يجب أن تتطابق أسماء الصور والعلامات، مثلًا `scene-01-demo.png` يقابلها `scene-01-demo.annotation.json`. ## تنسيق العلامات يستخدم كل عنصر إحداثيات بكسل صحيحة من الصورة الأصلية، ويرتبط بأحداث الترجمة عبر `sequence` و`subtitle` و`narrativeRole`. يجب ترتيب المناطق وفق "تمهيد المشهد ← الشخصيات/الأشياء الرئيسية ← الحركة أو التغيير ← رد الفعل/النتيجة". ```json { "sceneId": "scene-01", "canvas": { "width": 1672, "height": 941 }, "storyBasis": "القرد الصغير على جبل القرود يحمل موزة، القرد الكبير يستولي على الموزة، والأطفال يشاهدون بجانبه.", "sceneDurationMs": 9000, "elements": [ { "id": "rockery", "label": "مشهد جبل القرود", "sequence": 1, "narrativeRole": "تمهيد مشهد القصة", "subtitle": "القرد الصغير يجلس على قمة جبل القرود ويحمل موزة في يده.", "type": "structure", "region": { "x": 20, "y": 120, "width": 540, "height": 780 }, "reveal": { "direction": "top_to_bottom", "startMs": 300, "durationMs": 2600, "maskPaddingPx": 22, "protectedRegions": [] }, "handPath": { "start": [290, 130], "end": [290, 890], "easing": "easeInOut" } } ] } ``` يُستخدم `direction` و`handPath` كوكيل مستطيل في منصة المعاينة؛ أما الخطوط الحقيقية في الفيديو النهائي فيتم توليدها تلقائيًا بواسطة عارض الخطوط المتدفق. بالنسبة للكائنات المتداخلة، حدد في `protectedRegions` للعناصر الأقدم المناطق التي يجب تأخير ظهورها، لتجنب ظهور المحتوى اللاحق مبكرًا. ## الأوامر الشائعة تحليل الترجمة وإنشاء لقطات مقترحة: ```bash python scripts/parse_srt.py <الترجمة.srt> --target-sec 30 --min-sec 25 --max-sec 35 ``` إنشاء صورة فحص المناطق: ```bash python scripts/render_annotation_preview.py <مسار الصورة> <مسار العلامات> <مسار صورة المعاينة> ``` افتح `assets/preview.html`، واستخدم "فتح مجلد" لتحميل دليل المشهد، ويمكنك تحرير المناطق والترتيب والوقت وارتباط الترجمة. عرض مشهد واحد: ```bash <ENV_PY> scripts/render_stream_whiteboard.py <مسار الصورة> <مسار العلامات> <الإخراج.mp4> assets/drawing-hand.png \ --ink-path grid --color-fill contour-wipe ``` دمج عدة مشاهد: ```bash <ENV_PY> scripts/merge_scenes.py --inputs مشهد1.mp4 مشهد2.mp4 مشهد3.mp4 --output final.mp4 ``` ## فحص الجودة - الإطار الأول هو خلفية ورقية بيج دافئ نظيفة، دون خطوط تظهر مبكرًا - `canvas` مطابق لأبعاد الصورة الأصلية، وجميع المناطق إحداثيات بكسل صحيحة داخل اللوحة - `sequence` و`startMs` متوافقان مع ترتيب سرد الترجمة - في الإطارات الوسطى، لا تظهر المناطق غير المبدوءة ومناطق الحماية مبكرًا - رأس القلم قريب من الخط المتدفق الحالي؛ عند وضوح الخطوط يمكن اختيار `--ink-path skeleton` - بعد نهاية كل مشهد يبقى عرض الصورة الكاملة لمدة 0.5 ثانية على الأقل؛ ترتيب دمج المشاهد المتعددة متوافق مع لقطات الترجمة ## محتويات المستودع ```text srt-whiteboard-animation/ ├── SKILL.md # سير العمل الكامل والقيود ├── assets/ │ ├── drawing-hand.png # مادة اليد │ ├── preview.html # منصة المعاينة والتحرير المحلية ├── examples/ # مواد أمثلة README ├── scripts/ │ ├── parse_srt.py # تحليل الترجمة واقتراح اللقطات │ ├── render_annotation_preview.py # صورة فحص العلامات │ ├── render_stream_whiteboard.py # عارض MP4 للخطوط المتدفقة │ ├── merge_scenes.py # دمج المشاهد المتعددة │ └── prepare_env.py # تحضير بيئة الاعتماديات └── agents/openai.yaml # بيانات Codex الوصفية ``` ## المساهمة نرحب بتقديم Issue أو Pull Request. أي تعديل يتعلق بمنطق الرسم يجب فحصه باستخدام ترجمات وعلامات وفيديو نهائي حقيقي للتحقق من حماية الأقنعة والتوقيت والصورة النهائية. ## الترخيص هذا المشروع مفتوح المصدر بموجب MIT License، راجع [LICENSE](LICENSE). ## عن المؤلف عجوز يحب تربية الأسماك / AI Builder / يبني شركة فردية بفريق ذكاء اصطناعي. Douyin وBilibili والحساب الرسمي: 江哥是老登啊