JavaScript, Canvas ও Web Audio দিয়ে অ্যাসেট-মুক্ত প্রোসিডিউরাল চলচ্চিত্র তৈরি করুন

procedural-film যা করে

procedural-film হলো একটি এজেন্ট স্কিল, যা কোনো বিষয়কে প্রায় ৩০ সেকেন্ডের উল্লম্ব চলচ্চিত্রে রূপান্তর করে। ছবি, ভিডিও বা অডিও ফাইল একত্র করার পরিবর্তে, প্রতিটি চলচ্চিত্র HTML canvas-এ vanilla JavaScript ব্যবহার করে দৃশ্য আঁকে এবং Web Audio API দিয়ে সাউন্ডট্র্যাক তৈরি করে।

চূড়ান্ত প্রকল্পটি একটি স্বয়ংসম্পূর্ণ HTML প্লেয়ার এবং MP4 এক্সপোর্ট তৈরি করতে পারে। দৃশ্য ও শব্দ কোডের মাধ্যমে তৈরি হওয়ায়, চলচ্চিত্রটির সঙ্গে কোনো মিডিয়া অ্যাসেট থাকে না।

রিপোজিটরিতে examples/butterfly-life-এ একটি সম্পূর্ণ রেফারেন্স প্রোডাকশন রয়েছে। এতে ১৭টি শটে একটি মনার্ক প্রজাপতির জীবনচক্র দেখানো হয়েছে, দৈর্ঘ্য ৩২ সেকেন্ড, গতি ১২০ bpm, এবং ২৪ ফ্রেম প্রতি সেকেন্ডে ১০৮০-বাই-১৯২০ উল্লম্ব ফ্রেম ব্যবহার করা হয়েছে।

প্রধান বৈশিষ্ট্য

• প্রসিডিউরাল ভিজ্যুয়াল: প্রতিটি পিক্সেল vanilla JavaScript এবং Canvas দিয়ে আঁকা হয়।
• সিন্থেসাইজড অডিও: প্রতিটি শব্দ Web Audio-এর মাধ্যমে তৈরি হয়।
• অ্যাসেট-মুক্ত ডেলিভারি: চলচ্চিত্রটি আলাদা কোনো মিডিয়া ফাইলের ওপর নির্ভর করে না।
• উল্লম্ব আউটপুট: রেফারেন্স ওয়ার্কফ্লো ফোনে উপযোগী ১০৮০-বাই-১৯২০ ফরম্যাট লক্ষ্য করে।
• একাধিক ডেলিভারেবল: পাইপলাইন একটি স্বতন্ত্র HTML প্লেয়ার এবং MP4 এক্সপোর্ট তৈরি করে।
• এজেন্ট-ভিত্তিক প্রোডাকশন: সমান্তরাল সাবএজেন্টরা পৃথক দৃশ্য লিখতে পারে, আর সমালোচক দলগুলো শটগুলো পর্যালোচনা করে।
• অন্তর্নির্মিত যাচাই: রেন্ডার করার আগে উদাহরণটিতে ছয়টি পরীক্ষার একটি গুণমান যাচাই ধাপ রয়েছে।

রিপোজিটরির কাঠামো বুঝুন

রিপোজিটরিটি পুনর্ব্যবহারযোগ্য স্কিল এবং একটি সম্পূর্ণ উদাহরণে বিভক্ত:

• skills/procedural-film/-এ এজেন্ট স্কিলটি রয়েছে।
• skills/procedural-film/SKILL.md-এ সম্পূর্ণ প্রোডাকশন পাইপলাইন নির্ধারিত রয়েছে।
• skills/procedural-film/foundation/-এ প্রতিটি নতুন চলচ্চিত্রে কপি করা ইঞ্জিন ও টুল রয়েছে।
• skills/procedural-film/templates/-এ পরিকল্পনা নথির চারটি টেমপ্লেট রয়েছে।
• skills/procedural-film/reference/-এ শট-টাইপের সূচি, দৃশ্য ও মিউজিক গাইড, এবং রেফারেন্স ফ্রেম রয়েছে।
• examples/butterfly-life/-এ প্রজাপতির চলচ্চিত্রটির পরিকল্পনা নথি, সোর্স কোড, টুল, HTML প্লেয়ার এবং ফোনের MP4 রয়েছে।

পূর্বশর্ত

স্কিলটি ব্যবহারের আগে নিচের সফটওয়্যারগুলো ইনস্টল করুন:

• Node.js 20 বা নতুন সংস্করণ
• ffmpeg, আপনার সিস্টেমের PATH-এ উপলভ্য
• Playwright-এর জন্য Chromium
• স্কিল এবং সমান্তরাল সাবএজেন্ট সমর্থনকারী একটি এজেন্ট, যেমন Claude Code

Node.js এবং ffmpeg উপলভ্য আছে কি না নিশ্চিত করুন:

node --version
ffmpeg -version

procedural-film স্কিল ইনস্টল করুন

১. রিপোজিটরি ক্লোন করুন

git clone https://github.com/kuhnhomeuk-cell/procedural-film.git

২. আপনার এজেন্টে স্কিলটি লিংক করুন

ক্লোন করা রিপোজিটরি থাকা ডিরেক্টরি থেকে Claude Code-এর skills ফোল্ডারে একটি সিম্বলিক লিংক তৈরি করুন:

ln -s "$PWD/procedural-film/skills/procedural-film" ~/.claude/skills/procedural-film

সিম্বলিক লিংকটি উপযোগী, কারণ এতে examples/butterfly-life/-এ থাকা সম্পূর্ণ উদাহরণটি স্কিলের পাশে রাখা যায়। আপনি অন্য কোনো সামঞ্জস্যপূর্ণ এজেন্ট ব্যবহার করলে, একই স্কিল ডিরেক্টরিটি সেই এজেন্টের skills ফোল্ডারে লিংক করুন।

৩. উদাহরণের টুল নির্ভরতা ইনস্টল করুন

npm install --prefix examples/butterfly-life/tools

৪. Playwright-এর জন্য Chromium ইনস্টল করুন

npx --prefix examples/butterfly-life/tools playwright install chromium

কোনো বিষয় থেকে চলচ্চিত্র তৈরি করুন

স্কিলটি লিংক করার পর, কোনো বিষয় নিয়ে একটি প্রসিডিউরাল চলচ্চিত্র তৈরি করতে আপনার এজেন্টকে বলুন। উদাহরণ:

একটি মধুমক্ষিকার জীবন নিয়ে একটি প্রসিডিউরাল চলচ্চিত্র তৈরি করো।

এজেন্ট skills/procedural-film/SKILL.md-এ থাকা পাইপলাইন অনুসরণ করে। প্রোডাকশনটি ইচ্ছাকৃতভাবে বিস্তৃত: প্রতি শটের জন্য একজন এজেন্ট একটি দৃশ্য ফাইল লেখে, যা ১,০০০ লাইনের বেশি হতে পারে, এবং এরপর সমালোচক দলগুলো প্রতিটি শট পর্যালোচনা করে।

দীর্ঘ সময় চলা এবং যথেষ্ট রিসোর্স ব্যবহারকারী এজেন্ট সেশনের জন্য প্রস্তুত থাকুন। README-তে উল্লেখ আছে যে একটি সম্পূর্ণ চলচ্চিত্র এজেন্ট ব্যবহারের পরিকল্পনার বড় অংশ ব্যবহার করতে পারে।

প্রজাপতির রেফারেন্স চলচ্চিত্রটি পুনর্নির্মাণ করুন

Node.js, ffmpeg, Playwright এবং Chromium সঠিকভাবে কনফিগার করা হয়েছে কি না যাচাই করার সবচেয়ে সহজ উপায় হলো অন্তর্ভুক্ত উদাহরণটি পুনর্নির্মাণ করা।

১. যাচাই ধাপ চালান

node examples/butterfly-life/tools/check.cjs

check.cjs স্ক্রিপ্টটি প্রকল্পের ছয়টি পরীক্ষার যাচাই ধাপ চালায়। সফল যাচাই হলে স্ট্যাটাস কোড 0 দিয়ে প্রস্থান করে।

২. MP4 রেন্ডার করুন

node examples/butterfly-life/tools/render.cjs

রেন্ডারারটি ফলাফল ভিডিওটি এখানে লিখবে:

examples/butterfly-life/exports/butterfly-life.mp4

৩. স্বতন্ত্র HTML প্লেয়ার পুনর্নির্মাণ করুন

node examples/butterfly-life/tools/build.cjs

এই কমান্ডটি HTML প্লেয়ারটি পুনর্নির্মাণ করে। বিদ্যমান ইন্টার‌্যাক্টিভ প্লেয়ারটি examples/butterfly-life/dist/butterfly-life.html-এ রয়েছে এবং এটি ডাউনলোড করা বা ব্রাউজারে খোলা যায়।

একটি ব্যবহারিক ডেভেলপমেন্ট ওয়ার্কফ্লো

1. একটি স্পষ্টভাবে নির্ধারিত বিষয় দিয়ে শুরু করুন এবং এ বিষয়ে একটি প্রক্রিয়াভিত্তিক চলচ্চিত্র তৈরি করতে এজেন্টকে বলুন।
2. এজেন্ট ও সমান্তরাল সাবএজেন্টদের পরিকল্পনাসংক্রান্ত নথি এবং দৃশ্যের ফাইল তৈরি করতে দিন।
3. প্রাথমিক জেনারেশনের পর থেমে না গিয়ে সমালোচনামূলক পর্যালোচনার ধাপগুলোকে শটগুলো পর্যালোচনা করতে দিন।
4. রেন্ডার করার আগে প্রকল্পের যাচাইকরণ পরীক্ষা চালান।
5. জানানো সমস্যাগুলো সমাধান করুন, তারপর সফলভাবে শেষ না হওয়া পর্যন্ত পরীক্ষাগুলো পুনরায় চালান।
6. MP4 রেন্ডার করুন এবং স্বয়ংসম্পূর্ণ HTML প্লেয়ারটি পুনর্নির্মাণ করুন।
7. ব্রাউজারে প্লেয়ারটি খুলে চূড়ান্ত উল্লম্ব চলচ্চিত্রটি পর্যালোচনা করুন।

উন্নত পরামর্শ

রেফারেন্স চলচ্চিত্রটিকে উৎপাদনের লক্ষ্য হিসেবে ব্যবহার করুন

প্রত্যাশিত প্রকল্প বিন্যাস ও আউটপুটের মান শেখার সময় examples/butterfly-life অধ্যয়ন করুন। এর পরিকল্পনাসংক্রান্ত নথি, সোর্স, টুল, রেন্ডার করা প্লেয়ার এবং রপ্তানি করা ফোন ভিডিও দেখায় যে এই স্কিলটি কী তৈরি করার জন্য নকশা করা হয়েছে।

স্টাইল পরিবর্তনের আগে সহায়ক রেফারেন্সগুলো পড়ুন

reference/ ডিরেক্টরিতে শটের ধরনগুলোর সূচি, দৃশ্যের নির্দেশনা, সংগীতের নির্দেশনা এবং ভিজ্যুয়াল রেফারেন্স ফ্রেম রয়েছে। এই উপকরণগুলো এজেন্ট পাইপলাইনের নেওয়া সিদ্ধান্তগুলোর প্রেক্ষাপট সরবরাহ করে।

প্রতিটি চূড়ান্ত রেন্ডারের আগে যাচাই করুন

render.cjs-এর আগে check.cjs চালান। চূড়ান্ত MP4 তৈরির পূর্বশর্ত হিসেবে ছয়টি পরীক্ষার গেটের সফল এক্সিট কোডকে বিবেচনা করুন।

সময় ও এজেন্ট ব্যবহারের বাজেট নির্ধারণ করুন

এই পাইপলাইন দ্রুত আউটপুটের চেয়ে বিস্তারিত দৃশ্য তৈরি এবং বারবার সমালোচনামূলক পর্যালোচনাকে অগ্রাধিকার দেয়। পৃথক শটের ফাইলে ১,০০০-এর বেশি লাইন থাকতে পারে, তাই এই ওয়ার্কফ্লো একটি ছোট এক-প্রম্পট জেনারেশন কাজের মতো দ্রুত সম্পন্ন হবে বলে ধরে নেবেন না।

স্কিলটি কপি না করে লিংক করে রাখুন

একটি প্রতীকী লিংক স্কিলটিকে ক্লোন করা রিপোজিটরির সঙ্গে সংযুক্ত রাখে এবং বাটারফ্লাই উদাহরণে সুবিধাজনক অ্যাক্সেস বজায় রাখে। এভাবে রিপোজিটরির বিন্যাস থেকে বিচ্ছিন্ন আলাদা কপি করা ইনস্টলেশন তৈরি করাও এড়ানো যায়।

উপসংহার

procedural-film জাভাস্ক্রিপ্টের ড্রয়িং এবং সংশ্লেষিত অডিও ব্যবহার করে সম্পূর্ণভাবে উল্লম্ব চলচ্চিত্র তৈরির একটি এজেন্ট-চালিত পদ্ধতি প্রদান করে। স্কিলটি লিংক করে প্রয়োজনীয় টুল ইনস্টল করার পর, আপনি বিষয় অনুযায়ী একটি চলচ্চিত্রের অনুরোধ করতে, তৈরি করা দৃশ্যগুলো যাচাই করতে, MP4 রপ্তানি করতে এবং প্রচলিত মিডিয়া সম্পদ বান্ডেল না করেই একটি স্বতন্ত্র HTML প্লেয়ার তৈরি করতে পারবেন।

প্রকল্পটি MIT লাইসেন্সের অধীনে উপলভ্য। এর ভিজ্যুয়াল ও সম্পাদকীয় পদ্ধতি কেভিন এনগোর The life of a fruit fly-এর ওপর ভিত্তি করে তৈরি, যার বিবরণ examples/butterfly-life/docs/reference-analysis.md-এ নথিবদ্ধ রয়েছে।