প্রকাশিত: ১০ নভেম্বর, ২০২৬
WeTV হল Tencent-এর আন্তর্জাতিক ভিডিও স্ট্রিমিং প্ল্যাটফর্ম। এটি দক্ষিণ-পূর্ব এশিয়া ও অন্যান্য আন্তর্জাতিক মার্কেটের দর্শকদের জন্য ড্রামা সিরিজ, অ্যানিমে ও বিভিন্ন ধরনের শো পরিবেশন করে। ভিডিওর জন্য তৈরি করা সাইটের ক্ষেত্রে, পারফর্ম্যান্সের উপর নির্ভর করে দর্শকরা থাকবেন কিনা, সার্চ ইঞ্জিন কন্টেন্ট দেখাবে কিনা এবং প্লেব্যাক স্মুথ হবে কিনা।
WeTV ওয়েব ইঞ্জিনিয়ারিং টিম এমন কোনও কোড শিপ করে না যা পারফর্ম্যান্সের লক্ষ্য পূরণ করে না। দীর্ঘদিন ধরে, সেই লাইন ধরে রাখার অর্থ হল একজন ডেভেলপারকে তার কাজ বন্ধ করতে হবে, Chrome খুলতে হবে এবং প্রতিবার বিল্ড চেক করতে ব্যর্থ হলে পৃষ্ঠাটি ম্যানুয়ালি প্রোফাইল করতে হবে। একটি রিগ্রেশন ট্র্যাক করে ঠিক করতে প্রায় চার ঘণ্টা সময় লেগেছে।
আজ, একটি AI কোডিং এজেন্ট CI/CD পাইপলাইনের অংশ হিসেবে সেই কাজ করে। এজেন্টের জন্য Chrome DevTools-এর মাধ্যমে, এজেন্ট লাইভ ব্রাউজারে পৃষ্ঠাটি পরীক্ষা করে। মডার্ন ওয়েব নির্দেশিকা-এর সাহায্যে, এটি বর্তমান ওয়েব প্ল্যাটফর্মের স্ট্যান্ডার্ড মেনে সমাধান লেখে। এখন ওয়ার্কফ্লো পারফর্ম্যান্স টেস্টে ব্যর্থ হওয়া ৯০% সমস্যার ডায়াগনসিস ও সমাধান অটোমেটিক করে এবং ব্যর্থ হওয়া চেক থেকে শুরু করে যাচাই করা সমাধান পর্যন্ত সময় চার ঘণ্টা থেকে কমে ৩০ মিনিট হয়ে গেছে—এর মধ্যে সম্পূর্ণ বিল্ড ও ম্যানুয়াল মূল্যায়ন অন্তর্ভুক্ত।
চ্যালেঞ্জ: এডিটর ও ব্রাউজারের মধ্যে আটকে থাকা ডেভেলপার
WeTV-এর ইঞ্জিনিয়াররা আগে থেকেই তাদের IDE-তে AI কোডিং টুল ব্যবহার করতেন। এইসব টুল কোড লিখতে পারলেও, ব্রাউজারে রান করার পরে কোডটি কী করেছে তা দেখতে পেত না। তাই কাজটি দুভাগে ভাগ হয়ে যায়। ইঞ্জিনিয়াররা এডিটরে কোড লেখেন, তারপর Chrome-এ গিয়ে সেটি ডিপ্লয়, পরীক্ষা ও যাচাই করেন। প্রতিটি সমস্যা সমাধান করার অর্থ হল, সেই লুপটি আবার ম্যানুয়ালি চেক করা।
রিলিজ গেটে স্প্লিট সবচেয়ে বেশি ক্ষতিগ্রস্ত হয়। WeTV-এর CI/CD পাইপলাইন প্রতিটি রিলিজের পারফর্ম্যান্স ট্রেস করে এবং Cumulative Layout Shift (CLS) ০.১ বা তার কম রাখে। কোনও বিল্ড সেই সীমা অতিক্রম করলে, পাইপলাইন সেটিকে ফ্ল্যাগ করে, তবে কারণ খুঁজে বের করার কাজটি এখনও ম্যানুয়ালি করা হয়। একজন ইঞ্জিনিয়ারকে Chrome DevTools খুলতে, ট্রেস রেকর্ড করতে, যে এলিমেন্টটি সরানো হয়েছে তা খুঁজে বের করতে, সেই ফলাফলটি এডিটরে ফিরিয়ে আনতে, একটি সমাধান লিখতে এবং আবার চেক করতে হয়েছিল। একটি CLS রিগ্রেশন ঠিক করতে ইঞ্জিনিয়ারিংয়ের সময় থেকে প্রায় চার ঘণ্টা সময় লাগে।
টিমের এমন একজন এজেন্ট প্রয়োজন ছিল যে কাজের দুটি অংশই সামলাতে পারবে: চলমান পৃষ্ঠাটি দেখা এবং তারপর কোডটি একটি পরিচিত স্ট্যান্ডার্ডে ঠিক করা।
সমাধান: এজেন্টকে ব্রাউজার ও ওয়েব স্ট্যান্ডার্ডের সাথে কানেক্ট করুন
WeTV পারফর্ম্যান্স যাচাইকরণকে তার মার্জ রিকোয়েস্ট (MR) ফ্লোতে সরিয়ে নিয়ে গেছে। যখন একজন ডেভেলপার একটি MR খোলেন, তখন CI/CD পাইপলাইন এমন একটি পরিবেশ শুরু করে যেখানে AI কোডিং এজেন্ট দুটি ক্ষমতার সাথে স্থানীয়ভাবে চলে যা টিমের IDE টুলে নেই:
- এজেন্টের জন্য Chrome DevTools: Model Context Protocol (MCP) সার্ভার রান করে এবং এজেন্টকে লাইভ Chrome ইনস্ট্যান্সের সাথে কানেক্ট করে। এজেন্ট পারফর্ম্যান্স ট্রেস (অন্যান্য Chrome DevTools ফিচারের মধ্যে) রেকর্ড করতে পারে এবং ফ্রন্টএন্ড কোড আসলে কীভাবে রেন্ডার করে তা চেক করতে পারে, ঠিক যেভাবে একজন ডেভেলপার DevTools-এ করেন।
- মডার্ন ওয়েব নির্দেশিকা: এটি হল এজেন্টের এমন একটি দক্ষতা যাতে ওয়েব প্ল্যাটফর্মের পেশাদার পদ্ধতি এবং ব্রাউজার কম্প্যাটিবিলিটি ডেটা থাকে। এটি এজেন্টকে পুরনো প্যাটার্ন থেকে দূরে সরিয়ে আধুনিক ওয়েব প্ল্যাটফর্ম ফিচারের উপর তৈরি সমাধানের দিকে নিয়ে যায়।
এজেন্টের জন্য DevTools এজেন্টকে জানায় যে কী কাজ করছে না। মডার্ন ওয়েব নির্দেশিকা কীভাবে এটি ঠিক করে তা নির্ধারণ করে।
বাস্তব উদাহরণ: এপিসোড প্লেব্যাক পৃষ্ঠায় লেআউট শিফ্ট
একটি মার্জ করার অনুরোধ চলাকালীন, এজেন্ট ডেস্কটপ এপিসোড প্লেব্যাক পৃষ্ঠায়
performance_start_trace টুলটি রান করেছে। ট্রেস ০.৩৯-এর CLS রেকর্ড করেছে, যা ০.১ সীমার
প্রায় চার গুণ।
এডিট করার আগে এজেন্টকে ডায়াগনসিস করতে বলুন
WeTV এজেন্টকে ইম্প্রোভাইজ করতে দেয় না। যে প্রম্পট ওয়ার্কফ্লোকে চালায়, সেটি কোনও কোড স্পর্শ করার আগে সমস্যা ডায়াগনসিস করতে এবং মডেল ডিফল্ট হিসেবে যা তৈরি করবে তার উপর নির্ভর করার পরিবর্তে মডার্ন ওয়েব নির্দেশিকার সাথে এর ফলাফল চেক করতে বলে।
WeTV টিমের ব্যবহার করা প্রম্পটের একটি উদাহরণ এখানে দেওয়া হল:
Context:
"The CLS (Cumulative Layout Shift) of this page needs inspection. Diagnose
first, then modify the code, do not guess."
Mandatory Execution Steps:
1. Performance Trace: Use Chrome DevTools for agents to run performance traces
on both Desktop and Mobile views.
2. Identify Culprits: Use CLSCulprits insight to pinpoint the exact DOM elements
causing shifts (capture class/id, timing, and score).
3. Use web best practices for performance and CSS to optimize CLS.
4. Multi-Agent Parallelism: Enable parallel agents for efficiency:
- Agent A: Investigate Player/Main Layout SSR placeholders.
- Agent B: Investigate Sidebar Ads, VIP buttons, Tabs, and late-injected
lists.
- Agent C: Investigate Fonts and other minor factors.
Constraint: Each agent modifies only files within its scope to prevent
conflicts.
5. Root Cause Confirmation: Confirm the root cause before applying fixes.
Prioritize reserving space over changing interaction semantics just to fix
CLS.
6. Verification: After modification, re-test CLS via equivalent CSS injection
or local build. Target: CLS < 0.1.
এই প্রম্পটের দুটি অংশ সবচেয়ে গুরুত্বপূর্ণ। "প্রথমে ডায়াগনসিস করুন, তারপর
কোড পরিবর্তন করুন" এজেন্টকে লক্ষণগুলি প্যাচ করা থেকে বিরত রাখে। ধাপ ২ এজেন্টকে performance_analyze_insight-এর সাথে insightName: 'CLSCulprits' ব্যবহার করতে নির্দেশ করে, যাতে এটি সাধারণ সন্দেহের পরিবর্তে সঠিক এলিমেন্ট, টাইমিং এবং স্কোর রিপোর্ট করে।
নিচের ভিডিওতে, প্রম্পটটি কার্যকর করার সময়, এজেন্ট CLS-এর সাথে সম্পর্কিত আধুনিক ওয়েব ফিচারের মাধ্যমে সমস্যা সমাধান করার জন্য মডার্ন ওয়েব নির্দেশিকায় প্রাসঙ্গিক নির্দেশিকা সার্চ করে এবং এজেন্টের জন্য Chrome DevTools ব্যবহার করে Chrome ব্রাউজার ইনস্ট্যান্স খুলে পারফর্ম্যান্স ট্রেস রেকর্ড করে।
রানটাইম ডায়াগনস্টিকস ও স্ট্রাকচার্ড নির্দেশিকার এই কম্বিনেশন জটিল লেআউট শিফ্টের জন্য অটোমেটিক সমাধান করার সুবিধা চালু করে। অটোমেটেড ওয়ার্কফ্লোর মাধ্যমে সমাধান করা সমস্যার একটি উদাহরণ এখানে দেওয়া হল।
মূল কারণ খুঁজে বের করুন
ট্রেসটি ভিডিও প্লেয়ারের দিকে নির্দেশ করে। WeTV সার্ভারে প্লেয়ার রেন্ডার করে, কিন্তু প্লেয়ারের কন্টেনার এটির জন্য কোনও উচ্চতা রিজার্ভ করেনি। ক্লায়েন্ট পৃষ্ঠাটি হাইড্রেট করার সময়, কন্টেনারের উচ্চতা বৃদ্ধি পায় এবং এর আশেপাশের কন্টেন্ট শিফ্ট হয়ে যায়।
স্ট্যান্ডার্ড-ভিত্তিক সমাধান প্রয়োগ করুন
সার্ভার-সাইড রেন্ডারিংয়ের সময় স্পেস রিজার্ভ করে রাখলে এই সমস্যার সমাধান করা যায়, যাতে হাইড্রেশনের আগেই কন্টেনারের সঠিক উচ্চতা থাকে। এজেন্ট মডার্ন ওয়েব নির্দেশিকা css-layout guide-এর রেফারেন্স নিয়ে যে সমাধান লিখেছে, তার উদাহরণ নিচে দেওয়া হল:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
এজেন্ট CSS প্রয়োগ করার পরে, পাইপলাইন পৃষ্ঠাটি আবার তৈরি করে এবং এজেন্ট একই ট্রেস আবার রান করে। CLS ০.১-এর কম হলে তবেই প্যাচটি হিউম্যান রিভিউয়ের জন্য পাঠানো হয়।
প্রভাব: দ্রুত রিলিজ ও স্থিতিশীল লেআউট
WeTV তাদের CI/CD ওয়ার্কফ্লোতে এজেন্টের জন্য Chrome DevTools এবং মডার্ন ওয়েব নির্দেশিকা যোগ করার পর, ইঞ্জিনিয়ারিং দক্ষতা এবং লেআউট স্থিতিশীলতার ক্ষেত্রে পরিমাপযোগ্য উন্নতি অর্জন করেছে:
- এন্ড-টু-এন্ড ডিবাগিং ও সমাধানের সময় ৮৭% কমেছে (৪ ঘণ্টা থেকে ৩০ মিনিট)।
- সব পুনরাবৃত্ত পারফর্ম্যান্স রিগ্রেশনের ৯০% অটোমেটিক ডায়াগনসিস ও সমাধান করা হয়।
ইঞ্জিনিয়ারদের আর প্রোফাইলিংয়ের জন্য কাজের দিনের অর্ধেক সময় নষ্ট করতে হয় না। কোনও বিল্ড থ্রেশহোল্ড ব্রেক করলে, এজেন্ট ট্রেস পড়ে, সমাধান লেখে, এটি পরীক্ষা করে এবং একজন হিউম্যান রিভিউয়ারকে যাচাই করা প্যাচ প্রদান করে। মানুষ এখনও চূড়ান্ত সিদ্ধান্ত নেয়, কিন্তু তারা এমন একটি সমাধান থেকে শুরু করে যা ইতিমধ্যেই ব্যর্থ হওয়া চেকটি পাস করেছে।
মার্জ অনুরোধের মধ্যে CLS রিগ্রেশন ঠিক করা হয় বলে, সেগুলি প্রোডাকশনে পৌঁছায় না। এটি পৃষ্ঠাগুলিকে ০.১ লক্ষ্যের নিচে রাখে, WeTV-এর সার্চ দৃশ্যমানতা রক্ষা করে এবং চক্রের শেষের দিকে রিলিজ ব্লক করার একটি সাধারণ কারণ সরিয়ে দেয়।
আপনার টিমের জন্য পাঠ
WeTV-এর সেট-আপ তার স্ট্যাকের জন্য নির্দিষ্ট, তবে এর পিছনের প্যাটার্নটি বেশিরভাগ টিমের কাছে চলে যায় যারা পারফর্ম্যান্সের ভিত্তিতে রিলিজ করে:
- যেখানে সমস্যা হয়েছে সেখানে এজেন্ট রান করান। WeTV মার্জ অনুরোধ থেকে এজেন্টকে ট্রিগার করে, তাই কাউকে ব্যর্থ চেক লক্ষ্য করতে হয় না এবং ম্যানুয়ালি সেশন শুরু করতে হয় না।
- এডিট করার আগে এজেন্টকে ডায়াগনসিস করতে বলুন। ট্রেস এবং নামযুক্ত অপরাধীর জন্য জিজ্ঞাসা করা প্রথমে এমন সমাধান তৈরি করে যা অনুমানের পরিবর্তে প্রকৃত উপাদানকে লক্ষ্য করে।
- রানটাইম ডেটা স্ট্যান্ডার্ডের সাথে পেয়ার করুন। ট্রেস এজেন্টকে বলে যে কোন এলিমেন্ট সরানো হয়েছে। মডার্ন ওয়েব নির্দেশিকা এটিকে বলে যে কোন সমাধান বর্তমান প্ল্যাটফর্মের প্র্যাকটিস অনুসরণ করে।
- প্রমাণ প্রয়োজন। যে ট্রেসটি ব্যর্থ হয়েছে সেটি আবার রান করা হল এজেন্টের প্রমাণ যে সমাধানটি কাজ করে। P2ER তার বাধ্যতামূলক অভিজ্ঞতামূলক যাচাইকরণ নিয়মে একই নীতি অনুসরণ করে।
- হিউম্যান ইন দ্য লুপ বজায় রাখুন। এজেন্ট তদন্ত করে এবং একজন ইঞ্জিনিয়ার এমন একটি প্যাচ পর্যালোচনা করেন যা ইতিমধ্যেই চেক পাস করেছে।
মতামত ও ভবিষ্যতের পরিকল্পনা
WeTV দেখেছে যে, এজেন্টের জন্য Chrome DevTools থেকে লাইভ রানটাইম টেলিমেট্রিকে মডার্ন ওয়েব নির্দেশিকার স্ট্যান্ডার্ডাইজড নিয়মের সাথে পেয়ার করার ফলে, রিলিজ প্রসেস থেকে ম্যানুয়াল পারফর্ম্যান্স বিশ্লেষণ বাদ দেওয়া সম্ভব হয়েছে। একই সাথে, এজেন্টের কোড পরিবর্তনকে বর্তমান ওয়েব প্ল্যাটফর্ম স্ট্যান্ডার্ডের সাথে সামঞ্জস্যপূর্ণ রাখা গেছে।
"গতি ও কোয়ালিটি, দুটির ক্ষেত্রেই ফলাফল খুব কার্যকর হয়েছে। এজেন্টের জন্য Chrome DevTools এবং মডার্ন ওয়েব নির্দেশিকা দ্বারা প্রদত্ত ডায়াগনস্টিক ইনসাইট জটিল লেআউট সংক্রান্ত সমস্যা সমাধানের জন্য আমাদের নির্ভরযোগ্য রেফারেন্স প্রদান করেছে। আমরা প্রতিটি সমস্যার সমাধান করার পরে কঠোরভাবে যাচাই করি এবং বর্তমান সাফল্যের হার ও স্থিতিশীলতা আমাদের রিলিজের আত্মবিশ্বাসকে উল্লেখযোগ্যভাবে উন্নত করেছে।"
—Yangjie Zheng, হেড অফ ইঞ্জিনিয়ারিং, WeTV (Tencent)
এরপর, WeTV-এর ইঞ্জিনিয়ারিং টিম, আসন্ন কোড রিলিজের জন্য এন্ড-টু-এন্ড টেস্টিং জুড়ে এজেন্টের জন্য Chrome DevTools এবং মডার্ন ওয়েব নির্দেশিকা নিয়ে আসার পরিকল্পনা করছে।
রিসোর্স
একই ধরনের ওয়ার্কফ্লো সেট-আপ করতে, এইসব রিসোর্স এক্সপ্লোর করুন: