कुछ साल पहले, Photoshop जैसे जटिल सॉफ़्टवेयर को सीधे ब्राउज़र में चलाने का विचार शायद किसी के भी दिमाग में नहीं आया होगा. हालांकि, Adobe ने वेब की कई नई टेक्नोलॉजी का इस्तेमाल करके, अब Photoshop का सार्वजनिक बीटा वर्शन वेब पर उपलब्ध कराया है.
पिछले तीन सालों से, Chrome ऐसे वेब ऐप्लिकेशन को बेहतर बनाने के लिए काम कर रहा है जो ब्राउज़र में ज़्यादा से ज़्यादा काम करना चाहते हैं. Photoshop एक ऐसा वेब ऐप्लिकेशन है. कुछ साल पहले, Photoshop जैसे जटिल सॉफ़्टवेयर को सीधे ब्राउज़र में चलाने का विचार शायद किसी के भी दिमाग में नहीं आया होगा. हालांकि, Adobe ने वेब की कई नई टेक्नोलॉजी का इस्तेमाल करके, अब Photoshop का सार्वजनिक बीटा वर्शन वेब पर उपलब्ध कराया है.
(अगर आपको पढ़ने के बजाय, वीडियो देखना ज़्यादा पसंद है, तो यह लेख वीडियो के तौर पर भी उपलब्ध है.)
इस पोस्ट में, हम पहली बार यह जानकारी शेयर करना चाहते हैं कि हमारे सहयोग से, Photoshop को वेब पर कैसे उपलब्ध कराया जा रहा है. Adobe के सभी एपीआई और अन्य एपीआई का इस्तेमाल, अपने ऐप्लिकेशन में भी किया जा सकता है. वेब की सुविधाओं से जुड़ी ब्लॉग पोस्ट देखकर, इनसे प्रेरणा लें. साथ ही, एपीआई ट्रैकर पर जाकर, हमारे नए और बेहतरीन अपडेट देखें.
Photoshop को वेब पर उपलब्ध कराने की वजह
वेब के बेहतर होते जाने के बावजूद, वेबसाइटों और वेब ऐप्लिकेशन के मुख्य फ़ायदे अब भी पहले जैसे ही हैं. ये फ़ायदे, प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन के मुकाबले बेहतर होते हैं. इन फ़ायदों में कई खास सुविधाएं शामिल हैं. जैसे, लिंक किया जा सकने वाला, कुछ समय के लिए उपलब्ध रहने वाला, और यूनिवर्सल. हालांकि, इनका मकसद आसानी से ऐक्सेस करने, आसानी से शेयर करने, और बेहतर तरीके से साथ मिलकर काम करने की सुविधा उपलब्ध कराना है.
यूआरएल की खास बात यह है कि कोई भी व्यक्ति उस पर क्लिक करके, उसे तुरंत ऐक्सेस कर सकता है. इसके लिए, आपको सिर्फ़ एक ब्राउज़र की ज़रूरत है. इसके लिए, आपको कोई ऐप्लिकेशन इंस्टॉल करने या यह चिंता करने की ज़रूरत नहीं है कि आपके डिवाइस पर कौनसा ऑपरेटिंग सिस्टम चल रहा है. इसका मतलब है कि वेब ऐप्लिकेशन के लिए, उपयोगकर्ताओं के पास ऐप्लिकेशन और उनके दस्तावेज़ों और टिप्पणियों का ऐक्सेस हो सकता है. इस वजह से, वेब को साथ मिलकर काम करने के लिए सबसे सही प्लैटफ़ॉर्म माना जाता है. यह क्रिएटिव और मार्केटिंग टीमों के लिए ज़्यादा से ज़्यादा ज़रूरी होता जा रहा है.
Google Docs, इस आसान ऐक्सेस की सुविधा का पहला उदाहरण था. हममें से ज़्यादातर लोगों को पता है कि कोई दस्तावेज़ बनाना, उसका लिंक किसी को भेजना, और सीधे उस ऐप्लिकेशन में जाना कितना आसान है. साथ ही, किसी खास दस्तावेज़ या टिप्पणी पर जाना भी आसान है. तब से, हमने जो ऐप्लिकेशन दिखाए हैं जैसे कई बेहतरीन ऐप्लिकेशन ने इस मॉडल को अपनाया है. अब Photoshop को भी इसका फ़ायदा मिलेगा.
Photoshop को वेब पर उपलब्ध कराने का तरीका
वेब की शुरुआत, सिर्फ़ दस्तावेज़ों के लिए बने प्लैटफ़ॉर्म के तौर पर हुई थी. हालांकि, समय के साथ यह काफ़ी आगे बढ़ गया है. Gmail जैसे शुरुआती ऐप्लिकेशन से पता चला कि इंटरैक्टिविटी और ऐप्लिकेशन को ज़्यादा जटिल बनाया जा सकता है. तब से, हमें वेब ऐप्लिकेशन और ब्राउज़र वेंडर के साथ मिलकर काम करने की शानदार सुविधाएं मिली हैं. वेब ऐप्लिकेशन, वेब की क्षमताओं को बढ़ाने के लिए लगातार काम कर रहे हैं और ब्राउज़र वेंडर भी वेब की सुविधाओं को बेहतर बना रहे हैं. इस बेहतरीन लूप के नए वर्शन की वजह से, Photoshop को वेब पर उपलब्ध कराया गया है.
Adobe ने पहले Spark और Lightroom को वेब पर उपलब्ध कराया था. साथ ही, वह कई सालों से Photoshop को वेब पर उपलब्ध कराने की कोशिश कर रहा था. हालांकि, JavaScript की परफ़ॉर्मेंस से जुड़ी सीमाओं, उनके कोड के लिए अच्छे कंपाइल टारगेट की कमी, और वेब की सुविधाओं की कमी की वजह से, उन्हें ब्लॉक कर दिया गया था. इन समस्याओं को हल करने के लिए, Chrome ने ब्राउज़र में क्या बनाया है, यह जानने के लिए आगे पढ़ें.
Emscripten की मदद से WebAssembly को पोर्ट करना
WebAssembly और इसका C++ टूलचेन Emscripten, Photoshop को वेब पर उपलब्ध कराने में अहम भूमिका निभा रहे हैं. इसका मतलब है कि Adobe को शुरू से काम नहीं करना पड़ेगा, बल्कि वह Photoshop के मौजूदा कोडबेस का फ़ायदा ले सकता है. WebAssembly, सभी ब्राउज़र में शिप होने वाला एक पोर्टेबल बाइनरी निर्देश सेट है. इसे प्रोग्रामिंग भाषाओं के लिए कंपाइलेशन टारगेट के तौर पर डिज़ाइन किया गया था. इसका मतलब है कि C++ में लिखे गए Photoshop जैसे ऐप्लिकेशन को सीधे वेब पर पोर्ट किया जा सकता है. इसके लिए, उन्हें JavaScript में फिर से लिखने की ज़रूरत नहीं होती. खुद को पोर्ट करने के लिए, Emscripten का पूरा दस्तावेज़ देखें या किसी लाइब्रेरी को पोर्ट करने के तरीके के बारे में निर्देशों वाले इस उदाहरण का पालन करें.
Emscripten एक ऐसा टूलचैन है जिसमें सभी सुविधाएं मौजूद हैं. यह न सिर्फ़ C++ को Wasm में कंपाइल करने में मदद करता है, बल्कि एक ट्रांसलेशन लेयर भी उपलब्ध कराता है. यह लेयर, POSIX API कॉल को वेब एपीआई कॉल में बदलती है. साथ ही, OpenGL को WebGL में भी बदलती है. उदाहरण के लिए, ऐसे ऐप्लिकेशन पोर्ट किए जा सकते हैं जो लोकल फ़ाइल सिस्टम का रेफ़रंस देते हैं. साथ ही, Emscripten, फ़ंक्शन को बनाए रखने के लिए एमुलेट किया गया फ़ाइल सिस्टम उपलब्ध कराएगा.
Emscripten, Photoshop के ज़्यादातर हिस्सों को वेब पर लाने में कुछ समय से सक्षम है. हालांकि, यह ज़रूरी नहीं है कि यह तेज़ी से काम करे. हमने Adobe के साथ मिलकर लगातार काम किया है, ताकि हम Emscripten को बेहतर बना सकें और यह पता लगा सकें कि समस्याएं कहां हैं. Photoshop, मल्टीथ्रेडिंग पर निर्भर करता है. WebAssembly में डाइनैमिक मल्टीथ्रेडिंग की सुविधा जोड़ना ज़रूरी था.
इसके अलावा, C++ में अपवाद के आधार पर गड़बड़ी को मैनेज करना बहुत आम है. हालांकि, Emscripten और WebAssembly में यह सुविधा ठीक से काम नहीं करती थी. हमने W3C में WebAssembly कम्यूनिटी ग्रुप के साथ मिलकर काम किया है. इससे, WebAssembly स्टैंडर्ड और उससे जुड़े टूल को बेहतर बनाया जा सकेगा. साथ ही, WebAssembly में C++ एक्सेप्शन को शामिल किया जा सकेगा.
Emscripten सिर्फ़ बड़े ऐप्लिकेशन पर ही काम नहीं करता, बल्कि इसकी मदद से लाइब्रेरी या छोटे प्रोजेक्ट भी पोर्ट किए जा सकते हैं! उदाहरण के लिए, Emscripten की मदद से, वेब पर लोकप्रिय OpenCV लाइब्रेरी को कैसे कंपाइल किया जा सकता है, यह देखा जा सकता है.
आखिर में, WebAssembly परफ़ॉर्मेंस के बेहतर प्राइमिटिव उपलब्ध कराता है. जैसे, SIMD निर्देश, जो आपके वेब ऐप्लिकेशन की परफ़ॉर्मेंस को काफ़ी बेहतर बनाते हैं. उदाहरण के लिए, Adobe की परफ़ॉर्मेंस के लिए Halide ज़रूरी है. यहां SIMD, औसतन 3 से 4 गुना और कुछ मामलों में 80 से 160 गुना तक की स्पीड बढ़ाता है.
WebAssembly डीबग करना
किसी भी बड़े प्रोजेक्ट को सही टूल के बिना पूरा नहीं किया जा सकता. इसलिए, Chrome की टीम ने WebAssembly की डीबगिंग के लिए पूरी सुविधाओं वाला टूल बनाया है. यह सोर्स कोड को सिलसिलेवार तरीके से देखने, ब्रेकपॉइंट सेट करने, और अपवादों पर रोक लगाने में मदद करता है. साथ ही, रिच टाइप की सुविधा के साथ वैरिएबल की जांच करने में भी मदद करता है. इसके अलावा, DevTools कंसोल में आकलन करने के लिए बुनियादी सहायता भी देता है!
WebAssembly डीबगिंग का इस्तेमाल करने के बारे में आधिकारिक गाइड देखना न भूलें.
बेहतर परफ़ॉर्मेंस वाला स्टोरेज
Photoshop के दस्तावेज़ बहुत बड़े हो सकते हैं. इसलिए, जब उपयोगकर्ता पैन करता है, तब डेटा को डिस्क से मेमोरी में डाइनैमिक तरीके से ले जाना, Photoshop के लिए ज़रूरी है. अन्य प्लैटफ़ॉर्म पर, आम तौर पर mmap की मदद से मेमोरी मैपिंग की जाती है. हालांकि, वेब पर ऐसा करने में समस्या आती है. ऐसा तब तक होता रहा, जब तक ऑरिजिन के निजी फ़ाइल सिस्टम के ऐक्सेस हैंडल को ऑरिजिन के ट्रायल के तौर पर डेवलप और लागू नहीं किया गया! इस नए एपीआई का फ़ायदा पाने का तरीका जानने के लिए, दस्तावेज़ पढ़ें.
कैनवस के लिए P3 कलर स्पेस
पहले, वेब पर रंगों को sRGB कलर स्पेस में दिखाया जाता था. यह नब्बे के दशक के मध्य से मानक है. यह कैथोड-रे ट्यूब मॉनिटर की क्षमताओं पर आधारित है. बीते 25 सालों में कैमरे और मॉनिटर काफ़ी बेहतर हुए हैं. साथ ही, कई बड़े और बेहतर कलर स्पेस को स्टैंडर्ड के तौर पर इस्तेमाल किया जा रहा है. Display P3, सबसे लोकप्रिय आधुनिक कलर स्पेस में से एक है. Photoshop, ब्राउज़र में इमेज को ज़्यादा सटीक तरीके से दिखाने के लिए, Display P3 कैनवस का इस्तेमाल करता है. खास तौर पर, Display P3 डेटा के साथ काम करने वाले आधुनिक डिसप्ले पर, चमकदार सफ़ेद, चमकदार रंग, और शेडो में मौजूद बारीकियां सबसे अच्छी तरह से दिखेंगी. हाई डाइनैमिक रेंज वाले डिसप्ले को चालू करने के लिए, Display P3 Canvas API को और बेहतर बनाया जा रहा है.
वेब कॉम्पोनेंट और Lit
Photoshop एक बड़ा और सुविधाओं से भरा ऐप्लिकेशन है. इसमें दर्जनों वर्कफ़्लो के साथ काम करने वाले सैकड़ों यूज़र इंटरफ़ेस (यूआई) एलिमेंट हैं. ऐप्लिकेशन को कई टीमें बनाती हैं. इसके लिए, वे अलग-अलग टूल और डेवलपमेंट के तरीकों का इस्तेमाल करती हैं. हालांकि, इसके अलग-अलग हिस्सों को एक साथ लाकर, एक बेहतर और बेहतर परफ़ॉर्म करने वाला ऐप्लिकेशन बनाया जाता है.
इस चुनौती से निपटने के लिए, Adobe ने वेब कॉम्पोनेंट और Lit लाइब्रेरी का इस्तेमाल किया. Photoshop के यूज़र इंटरफ़ेस (यूआई) एलिमेंट, Adobe की Spectrum वेब कॉम्पोनेंट लाइब्रेरी से मिलते हैं. यह लाइब्रेरी, Adobe के डिज़ाइन सिस्टम का एक हल्का और बेहतर वर्शन है. यह किसी भी फ़्रेमवर्क के साथ काम करती है या बिना किसी फ़्रेमवर्क के भी काम करती है.
इसके अलावा, Photoshop ऐप्लिकेशन को Lit-based वेब कॉम्पोनेंट का इस्तेमाल करके बनाया गया है. ब्राउज़र के पहले से मौजूद कॉम्पोनेंट मॉडल और शैडो DOM एनकैप्सलमेंट का इस्तेमाल करके, टीम को Adobe की अन्य टीमों के React कोड के कुछ "आइलैंड" को आसानी से इंटिग्रेट करने में मदद मिली.
Workbox की मदद से, सर्विस वर्कर की कैश मेमोरी में डेटा सेव करना
सर्विस वर्कर्स, प्रोग्राम किए जा सकने वाले लोकल प्रॉक्सी के तौर पर काम करते हैं. ये नेटवर्क के अनुरोधों को इंटरसेप्ट करते हैं और नेटवर्क, लंबे समय तक सेव रहने वाले कैश मेमोरी या दोनों के डेटा के साथ जवाब देते हैं.
V8 टीम, परफ़ॉर्मेंस को बेहतर बनाने के लिए लगातार काम कर रही है. जब कोई सेवा वर्कर पहली बार कैश मेमोरी में सेव की गई WebAssembly स्क्रिप्ट के जवाब के साथ जवाब देता है, तो Chrome कोड का ऑप्टिमाइज़ किया गया वर्शन जनरेट और सेव करता है. यह काम, कई मेगाबाइट की WebAssembly स्क्रिप्ट के लिए भी किया जाता है. ये स्क्रिप्ट, Photoshop के कोडबेस में आम तौर पर मौजूद होती हैं. इसी तरह की प्री-कंपाइलेशन तब होती है, जब सर्विस वर्कर अपने install चरण के दौरान JavaScript को कैश मेमोरी में सेव करता है. दोनों ही मामलों में, Chrome कम से कम रनटाइम ओवरहेड के साथ, कैश मेमोरी में सेव की गई स्क्रिप्ट के ऑप्टिमाइज़ किए गए वर्शन को लोड और चला सकता है.
वेब पर Photoshop, एक सर्विस वर्कर को डिप्लॉय करके इसका फ़ायदा लेता है. यह सर्विस वर्कर, अपनी कई JavaScript और WebAssembly स्क्रिप्ट को पहले से कैश मेमोरी में सेव कर लेता है. इन स्क्रिप्ट के यूआरएल, बिल्ड के समय जनरेट होते हैं. साथ ही, कैश मेमोरी को अप-टू-डेट रखने का लॉजिक जटिल हो सकता है. इसलिए, उन्होंने Google की लाइब्रेरी का इस्तेमाल किया. इन लाइब्रेरी को Workbox कहा जाता है. इनकी मदद से, उन्होंने अपनी बिल्ड प्रोसेस के हिस्से के तौर पर, अपना सेवा वर्कर जनरेट किया.
V8 इंजन की स्क्रिप्ट कैश मेमोरी के साथ-साथ, Workbox पर आधारित सर्विस वर्कर की मदद से, परफ़ॉर्मेंस में काफ़ी सुधार हुआ. कोड को चलाने वाले डिवाइस के हिसाब से, इन संख्याओं में अंतर होता है. हालांकि, टीम का अनुमान है कि इन ऑप्टिमाइज़ेशन से, कोड को शुरू करने में लगने वाला समय 75% कम हो गया है.
वेब पर Adobe के लिए आगे क्या है
Photoshop के बीटा वर्शन को लॉन्च करना, सिर्फ़ शुरुआत है. हमने इसकी परफ़ॉर्मेंस और सुविधाओं को बेहतर बनाने के लिए कई काम शुरू कर दिए हैं. ऐसा इसलिए किया जा रहा है, ताकि इस बीटा वर्शन के बाद Photoshop को पूरी तरह से लॉन्च किया जा सके. Adobe, Photoshop के साथ ही Creative Cloud को भी वेब पर उपलब्ध कराने जा रहा है. इससे, क्रिएटिव कॉन्टेंट बनाने और साथ मिलकर काम करने के लिए, यह एक मुख्य प्लैटफ़ॉर्म बन जाएगा. इससे, पहली बार वीडियो बनाने वाले लाखों क्रिएटर्स अपनी कहानी बता पाएंगे और वेब पर नए-नए वर्कफ़्लो का फ़ायदा ले पाएंगे.
Adobe, वेब के लिए नई सुविधाएं उपलब्ध कराता रहता है. इसलिए, Chrome की टीम Adobe और वेब डेवलपर के लिए, वेब को बेहतर बनाने के लिए लगातार साथ काम करती रहेगी. दूसरे ब्राउज़र भी इन आधुनिक ब्राउज़र की सुविधाओं को अपना रहे हैं. इसलिए, हमें यह देखकर खुशी हो रही है कि Adobe अपने प्रॉडक्ट वहां भी उपलब्ध करा रहा है. हम वेब को बेहतर बनाने के लिए लगातार काम कर रहे हैं. इसलिए, आने वाले समय में अपडेट पाने के लिए हमारे साथ बने रहें!
वेब पर Photoshop (बीटा वर्शन) को ऐक्सेस करने के बारे में ज़्यादा जानने के लिए, Adobe सहायता केंद्र पर जाएं.