live-panel দিয়ে JSON থেকে অ্যানিমেটেড আর্কিটেকচার ডায়াগ্রাম তৈরি করুন

live-panel কী করে

live-panel একটি JSON সিস্টেম বিবরণকে অ্যানিমেটেড আর্কিটেকচার ডায়াগ্রামে রূপান্তর করে। লেআউট স্থির থাকে, আর প্যাকেটগুলো তারের পথে চলাচল করে, লগ স্ক্রল হয়, কাউন্টার বদলায়, বারগুলোর অবস্থা পরিবর্তিত হয় এবং পাশের ট্রিগারগুলো ক্রমানুসারে জ্বলে ওঠে।

আপনি ফলাফলটি X ও Xiaohongshu-এর মতো প্ল্যাটফর্মের জন্য H.264 MP4 হিসেবে এক্সপোর্ট করতে পারেন, অথবা স্বয়ংসম্পূর্ণ লাইভ ওয়েবপেজ হিসেবে রাখতে পারেন। রিপোজিটরিটি এর SKILL.md ফাইলের মাধ্যমে Claude Code-ধাঁচের স্কিল হিসেবেও কাজ করে।

অন্তর্ভুক্ত Codex agents উদাহরণটি @thedelost-এর একটি আর্কিটেকচার ক্লিপের টার্মিনাল-ধাঁচের চেহারা ও গতি পুনর্নির্মাণ করে। রিপোজিটরিতে একটি লাইট-প্যাস্টেল AI আর্কিটেকচার উদাহরণ এবং একটি Airbnb ভিজ্যুয়ালাইজেশনও রয়েছে।

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

• JSON-এ সংজ্ঞায়িত কনফিগারেশন-নির্ভর ডায়াগ্রাম।
• টার্মিনাল-ডার্ক এবং লাইট-প্যাস্টেল ভিজ্যুয়াল থিম।
• 4:5, 3:4 এবং 1:1 আউটপুটের জন্য ক্যানভাস প্রিসেট।
• অ্যানিমেটেড প্যাকেট, পথ, লগ, কাউন্টার, গেজ, ট্রিগার এবং অবস্থার পরিবর্তন।
• সম্পূর্ণভাবে সময়ের ওপর নির্ভরশীল নির্ধারিত রেন্ডারিং; এতে ওয়াল-ক্লক টাইমিং, Math.random বা CSS অ্যানিমেশন ব্যবহার করা হয় না।
• MP4-এ এক্সপোর্ট অথবা তৈরি করা লাইভ HTML পেজ সংরক্ষণ।
• টেক্সট ওভারফ্লো, ওভারল্যাপ এবং সিকিং সামঞ্জস্য যাচাইয়ের জন্য স্বয়ংক্রিয় ফ্রেম পরীক্ষা।

প্রয়োজনীয় সফটওয়্যার ইনস্টল করুন

live-panel পাইথনের স্ট্যান্ডার্ড লাইব্রেরি ব্যবহার করে, তাই কোনো pip প্যাকেজের প্রয়োজন নেই। রেন্ডার করার আগে নিচের টুলগুলো ইনস্টল করুন:

• Python 3.8 বা পরবর্তী সংস্করণ।
• Chrome বা Chromium।
• ffmpeg।

রিপোজিটরি ডাউনলোড করার পর নিশ্চিত করুন যে python3, Chrome বা Chromium এবং ffmpeg আপনার সিস্টেমের PATH-এ উপলভ্য। রেন্ডারিং স্ক্রিপ্ট ডিফল্টভাবে PATH-এ Chrome ও ffmpeg খুঁজে নেয়।

অন্তর্ভুক্ত একটি উদাহরণ রেন্ডার করুন

Codex agents কনফিগারেশন দিয়ে শুরু করুন। নিচের কমান্ডটি JSON কনফিগারেশনকে একটি MP4 ফাইলে রেন্ডার করে:

python3 scripts/render.py --config examples/codex-agents/config.json --out out.mp4

উদাহরণ কনফিগারেশনগুলো দেখায় কীভাবে প্রকল্পটি স্থির অবস্থানের সঙ্গে অ্যানিমেটেড মেশিন ভেরিয়েবল যুক্ত করে। examples/agent-architecture/ এবং examples/airbnb/-এ আরও প্রস্তুত উদাহরণ রয়েছে।

শুধু ভিডিও তৈরি না করে উৎপন্ন ওয়েবপেজটি রাখতে --html-out যোগ করুন:

python3 scripts/render.py \
  --config examples/codex-agents/config.json \
  --out out.mp4 \
  --html-out page.html

লাইভ অ্যানিমেশন দেখতে ফলস্বরূপ HTML ফাইলটি একটি সামঞ্জস্যপূর্ণ ব্রাউজারে খুলুন। --width, --height, --duration, --fps, --chrome, --ffmpeg, --keep-frames, --audio এবং --crf-এর মতো অপশন দিয়ে আউটপুট সেটিংসও নিয়ন্ত্রণ করতে পারেন।

রেন্ডার করা ফ্রেম যাচাই করুন

ডায়াগ্রাম প্রকাশের আগে ফ্রেম চেকার চালান:

python3 scripts/check_frames.py \
  --config examples/codex-agents/config.json \
  --out-dir frames \
  --repeat

চেকারটি প্রায় ১২০টি সময়বিন্দু নমুনা হিসেবে নেয়, DOM-এ টেক্সট ওভারফ্লো ও উপাদানের ওভারল্যাপ পরিমাপ করে এবং প্রতিনিধিত্বমূলক PNG ফাইল লেখে। --repeat ব্যবহার করলে প্রতিটি এক্সপোর্ট করা ফ্রেম থেকে অন্য সময়বিন্দুতে সিক করে আবার রেন্ডার করা হয়, যাতে ফলাফল অভিন্ন কি না যাচাই করা যায়। কোনো সমস্যা শনাক্ত হলে কমান্ডটি 1 স্ট্যাটাসে শেষ হয়।

নিজের ডায়াগ্রাম তৈরি করুন

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

বেশিরভাগ কাস্টমাইজেশন কনফিগারেশন ফাইলেই করা হয়। রিপোজিটরির নোট অনুযায়ী, সাধারণ ডায়াগ্রাম তৈরির জন্য assets/template.html পরিবর্তন করার দরকার নেই।

ক্যানভাস ও থিম কনফিগার করুন

একটি কনফিগারেশনে ক্যানভাস প্রিসেট, অ্যানিমেশনের সময়কাল, ফ্রেম রেট এবং ঐচ্ছিক প্রিরোল নির্বাচন করা যায়:

{
  "canvas": {
    "preset": "3:4",
    "duration": 28,
    "fps": 30,
    "preroll": 0
  },
  "theme": {
    "preset": "light-pastel",
    "colors": {
      "pk": "#f0575f"
    }
  }
}

উপলভ্য ক্যানভাস প্রিসেটগুলো হলো ১২০০×১৫০০ পিক্সেলের 4:5, ১০৮০×১৪৪০ পিক্সেলের 3:4 এবং ১০৮০×১০৮০ পিক্সেলের 1:1। টার্মিনাল-ডার্ক প্রিসেটে একটি ডার্ক উইন্ডো, মনোস্পেস টাইপোগ্রাফি এবং সেগমেন্টেড টেক্সট-মোড বক্স ব্যবহার করা হয়। লাইট-প্যাস্টেল প্রিসেটে সাদা ব্যাকগ্রাউন্ড, গোলাকার প্যাস্টেল বক্স, গোলাকার SVG তীর এবং সক্রিয় আইটেমে নরম আলো ব্যবহার করা হয়।

ক্যানভাসের অবস্থান পরম পিক্সেল ব্যবহার করে নির্ধারিত হয়। তাই একটি কনফিগারেশন একটি নির্দিষ্ট অ্যাসপেক্ট রেশিওর জন্য তৈরি করা হয়। render.py --width এবং --height লেটারবক্সিংয়ের মাধ্যমে আউটপুটের আকার পরিবর্তন করতে পারলেও, ভিন্ন রেশিওর জন্য সাধারণত কনফিগারেশনটি কপি করে এর বক্সগুলোর অবস্থান নতুনভাবে নির্ধারণ করতে হয়।

উপাদান ও গতি বর্ণনা করুন

কনফিগারেশন স্কিমা বিভিন্ন ধরনের ভিজ্যুয়াল উপাদান সমর্থন করে:

• লেবেল এবং স্বতন্ত্র টেক্সটের জন্য text।
• ফিল, বর্ডার, রেডিয়াস, ড্যাশড স্টাইল, প্রতি-লাইনের আইটেম, বার এবং টেক্সট রানের মতো কনটেইনারসহ বিভিন্ন উপাদানের জন্য box।
• তার ও সংযোগের জন্য line এবং path।
• প্রতীক ও বিভাজকের জন্য glyph এবং rule।
• পলিলাইনের বরাবর চলমান প্যাকেটের জন্য flow।
• ট্রিগার অ্যারোর জন্য tarrow।
• স্ক্রল বা পরিবর্তনশীল লগ কনটেন্টের জন্য log।

পরিবর্তনশীল মান machines-এর অধীনে সংজ্ঞায়িত করা হয়। উপলভ্য মেশিনের ধরনগুলোর মধ্যে রয়েছে counter, cycle, gauge, any_low, lane এবং triggers। প্রতিটি উপাদানে সরাসরি সময়ের লজিক যোগ করার পরিবর্তে ভিজ্যুয়াল স্টেট নিয়ন্ত্রণ করতে এই ভেরিয়েবলগুলো ব্যবহার করুন।

বক্স, পাথ, ফ্লো, লাইন এবং রান when ও then শর্ত ব্যবহার করতে পারে। উদাহরণস্বরূপ, {"var":"seq.i","in":[0,1,2]}-এর মতো কোনো শর্ত মেশিন ভেরিয়েবলের মান তালিকাভুক্ত মানগুলোর একটির সঙ্গে মিললে একটি আইটেম হাইলাইট করতে পারে। একাধিক শর্তকে AND এক্সপ্রেশন হিসেবে গণ্য করা হয়।

নির্ধারিত প্লেব্যাক বুঝুন

উৎপন্ন পেজে window.seek(t) উন্মুক্ত থাকে। প্রতিটি ভিজ্যুয়াল সময়ের মান t-এর একটি বিশুদ্ধ ফাংশন, এবং ছদ্ম-র‍্যান্ডম পছন্দগুলো নির্দিষ্ট-সিডের পূর্ণসংখ্যা হ্যাশ ব্যবহার করে। সাধারণ ব্রাউজার মোডে requestAnimationFrame অ্যানিমেশন চালায়। রেন্ডার করার সময় এক্সপোর্টার seek(i/fps) ব্যবহার করে প্রতিটি ফ্রেমের সময়ে যায় এবং ফলাফল ধারণ করে।

এই নকশার কারণে এক্সপোর্ট করা ফ্রেমগুলো পুনরাবৃত্তিযোগ্য হয়। ফন্ট, অবস্থান বা অ্যানিমেশন শর্ত পরিবর্তনের পর কেন ফ্রেম চেকার ব্যবহার করা উচিত, এটিও তা ব্যাখ্যা করে।

টাইপোগ্রাফি ও লেআউট উন্নত করুন

ফন্ট ফাইল বান্ডেল করা থাকে না। টার্মিনাল থিমগুলো JetBrains Mono, IBM Plex Mono, DejaVu Sans Mono, Noto Sans Mono CJK SC এবং একটি জেনেরিক মনোস্পেস ফন্টের ক্রমে ফলব্যাক করে। হালকা-প্যাস্টেল থিমগুলো Noto Sans CJK SC, PingFang SC, Microsoft YaHei, Helvetica বা Arial ব্যবহার করে; বড় শিরোনামের জন্য ব্যবহার করে Noto Serif CJK SC।

উদাহরণগুলোর সঙ্গে আরও কাছাকাছি মিল পেতে JetBrains Mono এবং Noto CJK ফন্ট ইনস্টল করুন। ইমোজি আইকনের জন্য Noto Color Emoji-এর মতো রঙিন ইমোজি ফন্টও প্রয়োজন। বিভিন্ন ফন্টে গ্লিফের প্রস্থ ভিন্ন হওয়ায় ইনস্টল করা ফন্ট পরিবর্তন করলেই আবার check_frames.py চালান।

উপযোগী রেন্ডারিং টিপস

• আপনার কাঙ্ক্ষিত ভিজ্যুয়াল স্টাইলের সবচেয়ে কাছাকাছি উদাহরণটিকে সূচনাবিন্দু হিসেবে ব্যবহার করুন।
• নির্বাচিত ক্যানভাস অনুপাতের সঙ্গে স্থানাঙ্ক সামঞ্জস্যপূর্ণ রাখুন।
• ভিডিও তৈরিতে ব্যবহৃত সঠিক ছবিগুলো পরিদর্শন করতে --keep-frames ব্যবহার করুন।
• অডিও ট্র্যাক না চাইলে --audio none ব্যবহার করুন।
• এনকোড করা ভিডিওর মান নিয়ন্ত্রণ করতে হলে --crf সমন্বয় করুন।
• লেআউট, ফন্ট বা কনফিগারেশনে প্রতিটি গুরুত্বপূর্ণ পরিবর্তনের পর চেকার চালান।
• Claude Code-এর জন্য রিপোজিটরিটি ~/.claude/skills/live-panel/-এ অথবা আপনার এজেন্টের স্কিল লোডার ব্যবহৃত ডিরেক্টরিতে রাখুন।

স্বীকৃতি ও লাইসেন্সিং

কোডটি MIT লাইসেন্সের অধীনে প্রকাশিত। Codex agents-এর উদাহরণে পুনর্নির্মিত ভিজ্যুয়াল ডিজাইনটি @thedelost-এর, আর হালকা AI আর্কিটেকচার ইনফোগ্রাফিকটি এর মূল নির্মাতা, Xiaohongshu-এর ক্রিয়েটর 林纾-এর। Airbnb-এর পরিসংখ্যানগুলো একটি Latent.Space সাক্ষাৎকারে Airbnb নেতাদের দেওয়া বক্তব্য থেকে নেওয়া, আর অ্যানিমেটেড কাউন্টারগুলো দৃষ্টান্তমূলক।

উপসংহার

live-panel কাঠামোবদ্ধ সিস্টেম বর্ণনাকে পরিশীলিত, পুনরাবৃত্তিযোগ্য মোশন গ্রাফিক্সে রূপান্তরের জন্য একটি ব্যবহারিক কর্মপ্রবাহ সরবরাহ করে। একটি উদাহরণ কপি করুন, JSON সম্পাদনা করুন, ক্যানভাস ও থিম বেছে নিন, MP4 বা লাইভ পেজ রেন্ডার করুন এবং প্রকাশের আগে লেআউটের সমস্যা ধরতে নির্ধারিত ফ্রেম চেকার ব্যবহার করুন।