ব্রাউজারে সরাসরি ফটোশপের মতো জটিল সফ্টওয়্যার চালানোর ধারণা কয়েক বছর আগে কল্পনা করা কঠিন ছিল। যাইহোক, বিভিন্ন নতুন ওয়েব প্রযুক্তি ব্যবহার করে, Adobe এখন ওয়েবে ফটোশপের একটি পাবলিক বিটা নিয়ে এসেছে।
গত তিন বছর ধরে, ক্রোম এমন ওয়েব অ্যাপ্লিকেশনগুলিকে শক্তিশালী করার জন্য কাজ করছে যা ব্রাউজারে যা সম্ভব তার সীমানা ঠেলে দিতে চায়৷ তেমনই একটি ওয়েব অ্যাপ্লিকেশন হল ফটোশপ। ব্রাউজারে সরাসরি ফটোশপের মতো জটিল সফ্টওয়্যার চালানোর ধারণা কয়েক বছর আগে কল্পনা করা কঠিন ছিল। যাইহোক, বিভিন্ন নতুন ওয়েব প্রযুক্তি ব্যবহার করে, Adobe এখন ওয়েবে ফটোশপের একটি পাবলিক বিটা নিয়ে এসেছে।
(আপনি যদি পড়ার চেয়ে দেখতে পছন্দ করেন তবে এই নিবন্ধটি ভিডিও হিসাবেও উপলব্ধ।)
এই পোস্টে, আমরা প্রথমবারের মতো আমাদের সহযোগিতা কীভাবে ফটোশপকে ওয়েবে প্রসারিত করছে তার বিশদ বিবরণ শেয়ার করতে চাই। আপনি Adobe ব্যবহৃত সমস্ত API এবং আপনার নিজের অ্যাপে আরও অনেক কিছু ব্যবহার করতে পারেন। অনুপ্রেরণার জন্য আমাদের ওয়েব সক্ষমতা সম্পর্কিত ব্লগ পোস্টগুলি পরীক্ষা করে দেখুন এবং আমরা যে সর্বশেষ এবং সর্বশ্রেষ্ঠ কাজ করছি তার জন্য আমাদের API ট্র্যাকারটি দেখুন৷
ফটোশপ কেন ওয়েবে এলো
যেহেতু ওয়েব বিকশিত হয়েছে, একটি জিনিস যা পরিবর্তিত হয়নি তা হল মূল সুবিধাগুলি যা ওয়েবসাইট এবং ওয়েব অ্যাপগুলি প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ্লিকেশনগুলির উপর অফার করে৷ এই সুবিধাগুলির মধ্যে অনেকগুলি অনন্য ক্ষমতা রয়েছে যেমন লিঙ্কযোগ্য, ক্ষণস্থায়ী এবং সর্বজনীন, কিন্তু তারা সহজ অ্যাক্সেস, সহজ ভাগাভাগি এবং দুর্দান্ত সহযোগিতা সক্ষম করে।
একটি URL এর সহজ ক্ষমতা হল যে কেউ এটিতে ক্লিক করতে পারে এবং তাৎক্ষণিকভাবে এটি অ্যাক্সেস করতে পারে। আপনার যা দরকার তা হল একটি ব্রাউজার। আপনি কোন অপারেটিং সিস্টেম চালাচ্ছেন তা নিয়ে কোনও অ্যাপ্লিকেশন ইনস্টল করার বা চিন্তা করার দরকার নেই। ওয়েব অ্যাপ্লিকেশনগুলির জন্য, এর অর্থ ব্যবহারকারীরা অ্যাপ্লিকেশন এবং তাদের নথি এবং মন্তব্যগুলিতে অ্যাক্সেস পেতে পারেন৷ এটি ওয়েবকে একটি আদর্শ সহযোগিতা প্ল্যাটফর্ম করে তোলে, যা সৃজনশীল এবং বিপণন দলগুলির জন্য আরও বেশি প্রয়োজনীয় হয়ে উঠছে।
Google ডক্স এই সরলীকৃত অ্যাক্সেসের পথপ্রদর্শক। আমাদের মধ্যে বেশিরভাগই জানি যে একটি নথি শুরু করা, কাউকে লিঙ্ক পাঠানো এবং অবিলম্বে শুধুমাত্র অ্যাপ্লিকেশন নয়, নির্দিষ্ট নথি বা মন্তব্যে ঝাঁপ দেওয়া কতটা সহজ। তারপর থেকে, আশ্চর্যজনক অ্যাপ্লিকেশনের আধিক্য, যেমন আমরা অতীতে দেখিয়েছি , এই মডেলটি গ্রহণ করেছে এবং এখন ফটোশপও উপকৃত হবে।
ফটোশপ কিভাবে ওয়েবে এলো
ওয়েবটি শুধুমাত্র নথিপত্রের জন্য উপযুক্ত একটি প্ল্যাটফর্ম হিসাবে শুরু হয়েছিল, কিন্তু এর ইতিহাস জুড়ে নাটকীয়ভাবে বৃদ্ধি পেয়েছে। জিমেইলের মতো প্রারম্ভিক অ্যাপগুলি দেখিয়েছিল যে আরও জটিল ইন্টারঅ্যাক্টিভিটি এবং অ্যাপ্লিকেশনগুলি অন্তত সম্ভব ছিল। তারপর থেকে, আমরা চিত্তাকর্ষক সহ-উন্নয়ন দেখেছি যেখানে ওয়েব অ্যাপগুলি যা সম্ভব তার সীমানাকে ঠেলে দেয় এবং ব্রাউজার বিক্রেতারা ওয়েব ক্ষমতা আরও প্রসারিত করে প্রতিক্রিয়া জানায়। এই গুণী লুপের সর্বশেষ পুনরাবৃত্তি যা ওয়েবে ফটোশপকে সক্ষম করেছে।
অ্যাডোব আগে ওয়েবে স্পার্ক এবং লাইটরুম নিয়ে এসেছিল এবং বহু বছর ধরে ফটোশপ ওয়েবে আনতে আগ্রহী ছিল। যাইহোক, তারা জাভাস্ক্রিপ্টের কর্মক্ষমতা সীমাবদ্ধতা, তাদের কোডের জন্য একটি ভাল কম্পাইল লক্ষ্যের অনুপস্থিতি এবং ওয়েব ক্ষমতার অভাব দ্বারা অবরুদ্ধ ছিল। এই সমস্যাগুলি সমাধান করতে ব্রাউজারে Chrome কী তৈরি করেছে তা জানতে পড়ুন।
Emscripten দিয়ে WebAssembly পোর্টিং
WebAssembly এবং এর C++ টুলচেন Emscripten হল ফটোশপের ওয়েবে আসার ক্ষমতা আনলক করার চাবিকাঠি, কারণ এর মানে হল যে অ্যাডোবকে স্ক্র্যাচ থেকে শুরু করতে হবে না, কিন্তু তাদের বিদ্যমান ফটোশপ কোডবেস ব্যবহার করতে পারে। WebAssembly হল একটি পোর্টেবল বাইনারি নির্দেশনা সেট শিপিং সমস্ত ব্রাউজারে যা প্রোগ্রামিং ভাষার জন্য একটি সংকলন লক্ষ্য হিসাবে ডিজাইন করা হয়েছিল। এর মানে হল যে ফটোশপের মতো অ্যাপ্লিকেশনগুলি যা C++ এ লেখা আছে সেগুলি জাভাস্ক্রিপ্টে পুনর্লিখনের প্রয়োজন ছাড়াই সরাসরি ওয়েবে পোর্ট করা যেতে পারে। নিজেকে পোর্ট করা শুরু করতে, সম্পূর্ণ Emscripten ডকুমেন্টেশন দেখুন, অথবা কিভাবে একটি লাইব্রেরি পোর্ট করতে হয় তার এই নির্দেশিত উদাহরণ অনুসরণ করুন।
Emscripten হল একটি সম্পূর্ণ বৈশিষ্ট্যযুক্ত টুলচেন যা আপনাকে শুধুমাত্র আপনার C++ Wasm-এ কম্পাইল করতে সাহায্য করে না, কিন্তু একটি অনুবাদ স্তর প্রদান করে যা POSIX API কলগুলিকে ওয়েব API কলে পরিণত করে এমনকি OpenGL কে WebGL-এ রূপান্তর করে। উদাহরণস্বরূপ, আপনি স্থানীয় ফাইল সিস্টেমের উল্লেখ করে এমন অ্যাপ্লিকেশন পোর্ট করতে পারেন এবং Emscripten কার্যকারিতা বজায় রাখার জন্য একটি অনুকরণ করা ফাইল সিস্টেম প্রদান করবে ।
এমস্ক্রিপ্টেন কিছু সময়ের জন্য ফটোশপের বেশিরভাগ অংশ ওয়েবে আনতে সক্ষম হয়েছে, তবে এটি অগত্যা যথেষ্ট দ্রুত ছিল না। আমরা ক্রমাগত Adobe-এর সাথে কাজ করেছি যেখানে বাধা আছে তা বের করতে এবং Emscripten এর উন্নতি করতে। ফটোশপ মাল্টিথ্রেডিংয়ের উপর নির্ভর করে। ওয়েব অ্যাসেম্বলিতে গতিশীল মাল্টিথ্রেডিং আনা একটি গুরুত্বপূর্ণ প্রয়োজন ছিল।
এছাড়াও, C++-এ ব্যতিক্রম-ভিত্তিক ত্রুটি হ্যান্ডলিং খুবই সাধারণ, কিন্তু Emscripten এবং WebAssembly-এ ভালভাবে সমর্থিত ছিল না। WebAssembly-এ C++ ব্যতিক্রম আনতে আমরা WebAssembly স্ট্যান্ডার্ড এবং এর চারপাশে টুলিং উন্নত করতে W3C-তে WebAssembly কমিউনিটি গ্রুপের সাথে কাজ করেছি।
Emscripten শুধুমাত্র বড় অ্যাপ্লিকেশনে কাজ করে না, তবে আপনাকে লাইব্রেরি বা ছোট প্রকল্প পোর্ট করতে দেয়! উদাহরণস্বরূপ, আপনি কীভাবে জনপ্রিয় OpenCV লাইব্রেরিকে Emscripten-এর মাধ্যমে ওয়েবে কম্পাইল করতে পারেন তা দেখতে পারেন।
সবশেষে, WebAssembly SIMD নির্দেশাবলীর মত উন্নত পারফরম্যান্স প্রিমিটিভ অফার করে যা নাটকীয়ভাবে আপনার ওয়েব অ্যাপের কর্মক্ষমতা উন্নত করে। উদাহরণস্বরূপ, Adobe-এর কর্মক্ষমতার জন্য Halide অপরিহার্য, এবং এখানে SIMD গড়ে একটি 3–4× স্পীডআপ এবং কিছু ক্ষেত্রে 80-160× স্পিডআপ প্রদান করে।
WebAssembly ডিবাগিং
কাজের জন্য উপযুক্ত সরঞ্জাম ছাড়া কোনো বড় প্রকল্প সফলভাবে সম্পন্ন করা যায় না এবং এই কারণেই Chrome টিম সম্পূর্ণ বৈশিষ্ট্যযুক্ত WebAssembly ডিবাগিং সমর্থন তৈরি করেছে। এটি সোর্স কোডের মাধ্যমে পদক্ষেপ নেওয়া, ব্রেকপয়েন্ট সেট করা এবং ব্যতিক্রমগুলিতে বিরতি, সমৃদ্ধ ধরণের সমর্থন সহ পরিবর্তনশীল পরিদর্শন এবং এমনকি DevTools কনসোলে মূল্যায়নের জন্য মৌলিক সমর্থন প্রদান করে!
কিভাবে WebAssembly ডিবাগিং ব্যবহার করতে হয় সেই বিষয়ে প্রামাণিক নির্দেশিকাটি দেখতে ভুলবেন না।
উচ্চ কর্মক্ষমতা স্টোরেজ
ফটোশপের নথিগুলি কত বড় হতে পারে তা বিবেচনা করে, ফটোশপের একটি গুরুত্বপূর্ণ প্রয়োজন হল ব্যবহারকারীর চারপাশে প্যান করার সাথে সাথে অন-ডিস্ক থেকে ইন-মেমরিতে ডাটা স্থানান্তর করার ক্ষমতা। অন্যান্য প্ল্যাটফর্মে, এটি সাধারণত mmap মাধ্যমে মেমরি ম্যাপিংয়ের মাধ্যমে সম্পন্ন করা হয়, কিন্তু ওয়েবে এটি কার্যকরভাবে সম্ভব হয়নি—অর্থাৎ অরিজিন প্রাইভেট ফাইল সিস্টেম অ্যাক্সেস হ্যান্ডেলগুলি তৈরি এবং একটি অরিজিন ট্রায়াল হিসেবে বাস্তবায়িত না হওয়া পর্যন্ত! আপনি ডকুমেন্টেশনে এই নতুন এপিআই কীভাবে লিভারেজ করবেন তা পড়তে পারেন।
ক্যানভাসের জন্য P3 রঙের স্থান
ঐতিহাসিকভাবে, ওয়েবে রঙগুলি sRGB রঙের জায়গায় নির্দিষ্ট করা হয়েছে, যা ক্যাথোড-রে টিউব মনিটরের ক্ষমতার উপর ভিত্তি করে নব্বই দশকের মাঝামাঝি থেকে একটি আদর্শ। মধ্যবর্তী ত্রৈমাসিক শতাব্দীতে ক্যামেরা এবং মনিটরগুলি অনেক দূর এগিয়েছে, এবং অনেক বড় এবং আরও সক্ষম রঙের স্থানগুলিকে প্রমিত করা হয়েছে। সবচেয়ে জনপ্রিয় আধুনিক রঙের স্থানগুলির মধ্যে একটি হল ডিসপ্লে P3 । ব্রাউজারে আরও নির্ভুলভাবে ছবি প্রদর্শন করতে ফটোশপ একটি ডিসপ্লে P3 ক্যানভাস ব্যবহার করে। বিশেষ করে, উজ্জ্বল সাদা, উজ্জ্বল রং এবং ছায়ায় বিশদ বিবরণ সহ আধুনিক ডিসপ্লেতে যতটা সম্ভব সেরা প্রদর্শন করা হবে যা ডিসপ্লে P3 ডেটা সমর্থন করে। ডিসপ্লে P3 ক্যানভাস API উচ্চ গতিশীল পরিসরের প্রদর্শন সক্ষম করার জন্য আরও তৈরি করা হচ্ছে।
ওয়েব উপাদান এবং লিট
ফটোশপ একটি বিখ্যাত বৃহৎ এবং বৈশিষ্ট্য-সমৃদ্ধ অ্যাপ্লিকেশন, শত শত UI উপাদান সহ কয়েক ডজন ওয়ার্কফ্লো সমর্থন করে। অ্যাপটি একাধিক দল বিভিন্ন ধরনের টুলস এবং ডেভেলপমেন্ট প্র্যাকটিস ব্যবহার করে তৈরি করেছে, কিন্তু এর আলাদা অংশগুলিকে একটি সুসংহত, উচ্চ-পারফর্মিং সমগ্রে একত্রিত করতে হবে।
এই চ্যালেঞ্জ মোকাবেলা করার জন্য, Adobe ওয়েব কম্পোনেন্টস এবং লিট লাইব্রেরিতে পরিণত হয়েছে। ফটোশপের UI উপাদানগুলি অ্যাডোবের স্পেকট্রাম ওয়েব কম্পোনেন্টস লাইব্রেরি থেকে আসে, একটি হালকা ওজনের, অ্যাডোব ডিজাইন সিস্টেমের কার্যকরী বাস্তবায়ন যা কোনও কাঠামোর সাথে কাজ করে, বা কোনও কাঠামোর সাথে কাজ করে না।
আরও কী, সম্পূর্ণ ফটোশপ অ্যাপটি লিট-ভিত্তিক ওয়েব উপাদান ব্যবহার করে তৈরি করা হয়েছে। ব্রাউজারের বিল্ট-ইন কম্পোনেন্ট মডেল এবং শ্যাডো ডম এনক্যাপসুলেশনের উপর ঝুঁকে, দলটি অন্যান্য অ্যাডোব টিম দ্বারা প্রদত্ত প্রতিক্রিয়া কোডের কয়েকটি "দ্বীপ" পরিষ্কারভাবে সংহত করা সহজ বলে মনে করেছে।
ওয়ার্কবক্সের সাথে পরিষেবা কর্মী ক্যাশ করছে
পরিষেবা কর্মীরা একটি প্রোগ্রামেবল স্থানীয় প্রক্সি হিসাবে কাজ করে, নেটওয়ার্ক অনুরোধে বাধা দেয় এবং নেটওয়ার্ক থেকে ডেটা, দীর্ঘস্থায়ী ক্যাশে বা উভয়ের মিশ্রণের সাথে প্রতিক্রিয়া জানায়।
পারফরম্যান্স উন্নত করার জন্য V8 টিমের প্রচেষ্টার অংশ হিসাবে, প্রথমবার যখন কোনও পরিষেবা কর্মী একটি ক্যাশে করা WebAssembly প্রতিক্রিয়ার সাথে সাড়া দেয়, Chrome কোডের একটি অপ্টিমাইজ করা সংস্করণ তৈরি করে এবং সঞ্চয় করে-এমনকি মাল্টি-মেগাবাইট WebAssembly স্ক্রিপ্টগুলির জন্য, যা ফটোশপ কোডবেসে সাধারণ। . একটি অনুরূপ প্রি-কম্পাইলেশন সঞ্চালিত হয় যখন জাভাস্ক্রিপ্ট তার install ধাপের সময় একজন পরিষেবা কর্মী দ্বারা ক্যাশে করা হয়। উভয় ক্ষেত্রেই, ক্রোম ন্যূনতম রানটাইম ওভারহেড সহ ক্যাশে করা স্ক্রিপ্টগুলির অপ্টিমাইজ করা সংস্করণগুলিকে লোড এবং কার্যকর করতে সক্ষম।
ওয়েবে ফটোশপ একটি পরিষেবা কর্মী মোতায়েন করে এটির সুবিধা নেয় যেটি তার অনেক জাভাস্ক্রিপ্ট এবং ওয়েব অ্যাসেম্বলি স্ক্রিপ্টগুলিকে প্রিক্যাচ করে৷ যেহেতু এই স্ক্রিপ্টগুলির URLগুলি বিল্ড টাইমে তৈরি হয়, এবং ক্যাশে আপ টু ডেট রাখার যুক্তি জটিল হতে পারে, তাই তারা তাদের বিল্ড প্রক্রিয়ার অংশ হিসাবে তাদের পরিষেবা কর্মী তৈরি করতে ওয়ার্কবক্স নামক Google দ্বারা রক্ষণাবেক্ষণ করা লাইব্রেরির একটি সেটের দিকে ফিরে যায়৷
একটি ওয়ার্কবক্স-ভিত্তিক পরিষেবা কর্মী এবং V8 ইঞ্জিনের স্ক্রিপ্ট ক্যাশিং পরিমাপযোগ্য কর্মক্ষমতা উন্নতির দিকে পরিচালিত করে। কোডটি কার্যকর করার ডিভাইসের উপর ভিত্তি করে নির্দিষ্ট সংখ্যাগুলি পরিবর্তিত হয়, কিন্তু দল অনুমান করে যে এই অপ্টিমাইজেশনগুলি কোড ইনিশিয়ালাইজেশনে ব্যয় করা সময়কে 75% কমিয়েছে।
ওয়েবে অ্যাডোবের জন্য পরবর্তী কী
ফটোশপ বিটা লঞ্চ হল সবেমাত্র শুরু, এবং আমরা ইতিমধ্যেই বেশ কিছু পারফরম্যান্স এবং বৈশিষ্ট্যের উন্নতি পেয়েছি কারণ ফটোশপ এই বিটা পরে তাদের সম্পূর্ণ লঞ্চের দিকে ট্র্যাক করছে৷ Adobe ফটোশপের সাথে থামছে না এবং ক্রিয়েটিভ ক্লাউডকে আক্রমনাত্মকভাবে ওয়েবে প্রসারিত করার পরিকল্পনা করছে, এটি সৃজনশীল বিষয়বস্তু তৈরি এবং সহযোগিতা উভয়ের জন্য একটি প্রাথমিক প্ল্যাটফর্ম করে। এটি লক্ষাধিক প্রথমবারের নির্মাতাদের তাদের গল্প বলতে এবং ওয়েবে উদ্ভাবনী কর্মপ্রবাহ থেকে উপকৃত হতে সক্ষম করবে৷
যেহেতু Adobe যা সম্ভব তার সীমানাকে এগিয়ে নিয়ে যাচ্ছে, Chrome টিম Adobe এবং সাধারণভাবে প্রাণবন্ত ওয়েব ডেভেলপার ইকোসিস্টেমের জন্য ওয়েবকে এগিয়ে নিয়ে যাওয়ার জন্য আমাদের সহযোগিতা অব্যাহত রাখবে৷ যেহেতু অন্যান্য ব্রাউজারগুলিও এই আধুনিক ব্রাউজার ক্ষমতাগুলি ধরতে পারে, আমরা Adobe তাদের পণ্যগুলিকে সেখানে উপলব্ধ করতে দেখে আনন্দিত৷ ভবিষ্যতের আপডেটের জন্য আমাদের সাথে থাকুন কারণ আমরা ওয়েবকে এগিয়ে নিয়ে যাচ্ছি!
আপনি Adobe সহায়তা কেন্দ্রে ওয়েবে (বিটা) ফটোশপ অ্যাক্সেস করার বিষয়ে আরও জানতে পারেন৷