कुछ साल पहले ही 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 पोर्टिंग
वेब पर काम करने के लिए Photoshop की क्षमता को अनलॉक करने के लिए WebAssembly और उसका C++ टूलचेन Emscripten बेहद अहम है. इसका मतलब है कि 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 की परफ़ॉर्मेंस के लिए हैलाइड ज़रूरी है. यहां सिमD में औसत रूप से 3–4× स्पीडअप और कुछ मामलों में 80–160× स्पीडअप की स्पीड दिखती है.
WebAssembly डीबग करना
कोई भी बड़ा प्रोजेक्ट, सही टूल के बिना पूरा नहीं हो सकता. इसी वजह से Chrome की टीम ने WebAssembly डीबग करने की पूरी सुविधा डेवलप की है. इससे सोर्स कोड को समझने, ब्रेकपॉइंट सेट करने, और अपवादों को रोकने, और DevTools कंसोल में आकलन करने के लिए बुनियादी सहायता, और बेहतर तरीके से डेटा की अलग-अलग जांच करने में मदद मिलती है!
WebAssembly डीबगिंग को इस्तेमाल करने के तरीके के बारे में आधिकारिक गाइड ज़रूर देखें.
बेहतर परफ़ॉर्मेंस वाला स्टोरेज
यह देखते हुए कि Photoshop के दस्तावेज़ कितने बड़े हो सकते हैं, Photoshop के लिए यह बेहद ज़रूरी है कि वह डेटा को डिस्क पर मौजूद डेटा से इन-मेमोरी तक डाइनैमिक तरीके से तब ले जाए, जब उपयोगकर्ता चारों ओर घूमता हो. दूसरे प्लैटफ़ॉर्म पर यह काम, आम तौर पर mmap की मदद से मेमोरी मैपिंग से किया जाता है. हालांकि, वेब पर ऐसा करना मुमकिन नहीं है. ऐसा तब तक होता है, जब तक ऑरिजिन ट्रायल के तौर पर ऑरिजिन निजी फ़ाइल सिस्टम के ऐक्सेस हैंडल को डेवलप और लागू नहीं किया जाता! इस नए एपीआई से फ़ायदा पाने का तरीका जानने के लिए, दस्तावेज़ में जाएं.
कैनवस के लिए P3 कलर स्पेस
पुराने समय से, वेब पर रंगों को sRGB कलर स्पेस में दिखाया जाता था, जो नब्बे के दशक के बाद का एक मानक है. यह कैथोड-रे ट्यूब मॉनिटर की क्षमताओं पर आधारित होता है. तीसरी सदी के बीच के समय में, कैमरे और मॉनिटर ने काफ़ी तरक्की की है. साथ ही, कई बड़े और ज़्यादा कारगर कलर स्पेस बनाए गए हैं. सबसे लोकप्रिय मॉडर्न कलर स्पेस में से एक Display P3 है. ब्राउज़र में इमेज को ज़्यादा सटीक तरीके से दिखाने के लिए, Photoshop Display P3 कैनवस का इस्तेमाल करता है. खास तौर पर, चमकदार सफ़ेद, चमकीले रंग, और गहरे हिस्सों को हल्का करने वाली इमेज, Display P3 डेटा के साथ काम करने वाले आधुनिक डिसप्ले पर सबसे अच्छी तरह दिखेंगी. Display P3 Canvas API को और बेहतर बनाया जा रहा है, ताकि हाई डाइनैमिक रेंज डिसप्ले को चालू किया जा सके.
वेब कॉम्पोनेंट और लिट
Photoshop एक बड़ा और मशहूर ऐप्लिकेशन है, जिसमें काफ़ी सुविधाएं मौजूद हैं. इसमें सैकड़ों यूज़र इंटरफ़ेस (यूआई) एलिमेंट हैं, जो दर्जनों वर्कफ़्लो के साथ काम करते हैं. कई टीमों ने इस ऐप्लिकेशन को तैयार करने के लिए अलग-अलग तरह के टूल और डेवलपमेंट के तरीकों का इस्तेमाल किया है, लेकिन जिन चीज़ों में अलग-अलग चीज़ें हैं वे सभी एक साथ मिलकर बेहतर परफ़ॉर्म करें.
इस चुनौती को पूरा करने के लिए, Adobe ने वेब कॉम्पोनेंट और Lit लाइब्रेरी का इस्तेमाल किया. Photoshop के यूज़र इंटरफ़ेस (यूआई) एलिमेंट, Adobe के स्पेक्ट्रम वेब कॉम्पोनेंट की लाइब्रेरी से आते हैं. यह Adobe के डिज़ाइन सिस्टम का एक लाइटवेट, बेहतर परफ़ॉर्म करने वाला इंप्लीमेंटेशन है, जो किसी भी फ़्रेमवर्क या किसी भी फ़्रेमवर्क के साथ काम करता है.
इसके अलावा, Photoshop का पूरा ऐप्लिकेशन लिट-आधारित वेब कॉम्पोनेंट का इस्तेमाल करके बनाया गया है. ब्राउज़र के पहले से मौजूद कॉम्पोनेंट मॉडल और शैडो डीओएम एनकैप्सुलेशन का इस्तेमाल करके, टीम को लगा कि Adobe की अन्य टीमों से मिले कुछ "आइलैंड" के रिऐक्ट कोड को आसानी से इंटिग्रेट किया जा सकता है.
वर्कबॉक्स की मदद से सर्विस वर्कर को कैश मेमोरी में सेव करना
सर्विस वर्कर, प्रोग्राम करने लायक लोकल प्रॉक्सी के तौर पर काम करते हैं, नेटवर्क के अनुरोधों में रुकावट डालते हैं और नेटवर्क से मिले डेटा, लंबे समय तक सेव रहने वाली कैश मेमोरी या दोनों का मिला-जुला डेटा इस्तेमाल करते हैं.
परफ़ॉर्मेंस को बेहतर बनाने के लिए, V8 टीम की कोशिशों के तहत, जब पहली बार सर्विस वर्कर, कैश मेमोरी में सेव किए गए WebAssembly रिस्पॉन्स के साथ जवाब देता है, तो Chrome कोड का ऑप्टिमाइज़ किया गया वर्शन जनरेट और सेव करता है. ऐसा मल्टी-मेगाबाइट WebAssembly स्क्रिप्ट के लिए भी किया जा सकता है, जो Photoshop के कोडबेस में आम हैं. ऐसा ही प्रीकंपलेशन तब होता है, जब किसी सर्विस वर्कर के install चरण के दौरान JavaScript को कैश मेमोरी में सेव किया जाता है. दोनों ही मामलों में, Chrome कम से कम रनटाइम ओवरहेड के साथ, कैश मेमोरी में सेव की गई स्क्रिप्ट के ऑप्टिमाइज़ किए गए वर्शन को लोड और एक्ज़ीक्यूट कर सकता है.
वेब पर Photoshop इस सुविधा का फ़ायदा लेने के लिए, ऐसे सर्विस वर्कर को डिप्लॉय करता है जो अपनी कई JavaScript और WebAssembly स्क्रिप्ट को प्री-कैश करता है. इन स्क्रिप्ट के यूआरएल, बिल्ड के समय जनरेट होते हैं. साथ ही, कैश मेमोरी को अप-टू-डेट रखने का लॉजिक मुश्किल हो सकता है. इसलिए, उन्होंने Workbox की मदद से, लाइब्रेरी के सेट का इस्तेमाल किया, ताकि बिल्ड प्रोसेस के तहत अपने सर्विस वर्कर को जनरेट किया जा सके.
वर्कबॉक्स पर आधारित सर्विस वर्कर के साथ, V8 इंजन की स्क्रिप्ट को कैश मेमोरी में सेव करने की सुविधा की वजह से, परफ़ॉर्मेंस में काफ़ी सुधार हुए. कोड को लागू करने वाले डिवाइस के आधार पर खास संख्याएं अलग-अलग होती हैं, लेकिन टीम का अनुमान है कि इन ऑप्टिमाइज़ेशन से कोड शुरू करने में लगने वाले समय में 75% की कमी आई है.
वेब पर Adobe के लिए अगला कदम क्या है
Photoshop के बीटा वर्शन को लॉन्च करना तो बस एक शुरुआत है. इसके अलावा, Photoshop के बीटा वर्शन को पूरी तरह लॉन्च करने की दिशा में, हमने पहले से ही इसकी परफ़ॉर्मेंस और सुविधाओं में कई सुधार किए हैं. Adobe, Photoshop के साथ नहीं रुक रहा है. Adobe क्रिएटिव क्लाउड को वेब पर तेज़ी से उपलब्ध कराने की योजना बना रहा है, जिससे यह क्रिएटिव कॉन्टेंट बनाने और साथ मिलकर काम करने, दोनों के लिए एक मुख्य प्लैटफ़ॉर्म बन जाएगा. इसकी मदद से, पहली बार कॉन्टेंट बनाने वाले लाखों क्रिएटर्स को अपनी कहानी बताने के साथ-साथ, उन्हें वेब पर नए तरीके से काम करने का मौका मिलेगा.
हम अपनी पूरी कोशिश कर रहे हैं. इसलिए, Chrome की टीम, वेब को और बेहतर बनाने के लिए साथ मिलकर काम करती रहेगी. इससे, हम नए वेब डेवलपर ईकोसिस्टम और Adobe के लिए ज़्यादा से ज़्यादा काम कर पाएंगे. हमें पसंद है कि Adobe के अन्य ब्राउज़र भी ब्राउज़र की इन आधुनिक सुविधाओं का इस्तेमाल करते हैं. इसलिए, हमें उम्मीद है कि Adobe अपने प्रॉडक्ट वहां भी उपलब्ध कराएगा. हम वेब को और बेहतर बनाने की लगातार कोशिश कर रहे हैं. इसलिए, आने वाले समय में होने वाले अपडेट के बारे में जानने के लिए हमारे साथ बने रहें!
वेब पर Photoshop को ऐक्सेस करने (बीटा वर्शन) के बारे में ज़्यादा जानने के लिए, Adobe सहायता केंद्र पर जाएं.