हमने अपने ChatGPT‑बेस्ड ब्राउज़र, Atlas के पीछे का नया आर्किटेक्चर, OWL कैसे बनाया

Ken Rockot, टेक्निकल स्टाफ़ के मेंबर और Goodger, इंजीनियरिंग प्रमुख, ChatGPT Atlas द्वारा

पिछले हफ़्ते, हमने ChatGPT Atlas लॉन्च किया⁠, जो ChatGPT के साथ वेब ब्राउज़ करने का एक नया तरीका है. एक सारी ख़ासियतों वाला वेब ब्राउज़र होने के अलावा, Atlas भविष्य की एक झलक देता है: एक ऐसी दुनिया जहां आप इंटरनेट पर ChatGPT को अपने साथ ला सकते हैं, सवाल पूछ सकते हैं, सुझाव दे सकते हैं और आपके लिए टास्क पूरा कर सकते हैं. इस पोस्ट में, हम प्रोडक्ट के सबसे कॉम्प्लेक्स इंजीनियरिंग पहलुओं में से एक को उजागर करते हैं: कैसे हमने ChatGPT को एक ऐसे ब्राउज़र में बदल दिया जो आगे बढ़ने के साथ और ज़्यादा मददगार होता जाता है.

ChatGPT को वेब के लिए एक सच्चा को-पायलट बनाने का मतलब था ब्राउज़र के पूरे आर्किटेक्चर की दोबारा कल्पना करना: Atlas को Chromium रनटाइम से अलग करना. इसमें Chromium को इंटीग्रेट करने का एक नया तरीका डेवलप करना शामिल था, जो हमें अपने प्रोडक्ट के लक्ष्यों को पूरा करने में मदद करता है: इंस्टेंट स्टार्टअप, और टैब्स खोलने पर भी प्रतिक्रिया, और एजेंटिक यूज़ केसेस के लिए एक मज़बूत फ़ाउंडेशन तैयार करना.

Chromium एक नेचुरल बिल्डिंग ब्लॉक था. ये एक मज़बूत सिक्यूरिटी मॉडल, स्थापित परफ़ॉर्मेंस क्रेडेंशियल्स और बेजोड़ वेब कम्पैटिबिलिटी के साथ एक बेहतरीन वेब इंजन प्रदान करता है. इसके अलावा, इसे एक ग्लोबल कम्युनिटी द्वारा डेवेलोप\ किया गया है जो इसे लगातार बेहतर बनाता रहता है. ये मॉडर्न डेस्कटॉप वेब ब्राउज़र्स के लिए एक आम विकल्प है.

हमारी टैलेंटेड डिज़ाइन टीम ने यूज़र अनुभव के लिए महत्वाकांक्षी लक्ष्य रखे थे, जिसमें एजेंट मोड जैसे फ़ीचर्स के लिए समृद्ध एनिमेशन और विज़ुअल इफ़ेक्ट्स शामिल थे. इसके लिए हमारी इंजीनियरिंग टीम को हमारे UI (SwiftUI, AppKit और मेटल) के लिए सबसे मॉडर्ननेटिव फ़्रेमवर्क का फ़ायदा उठाने की ज़रुरत थी, बजाय इसके कि हम सिर्फ़ ओपन सोर्स क्रोमियम UX को रीस्किन करें. नतीजन, Atlas का UI पूरे ऐप्लिकेशन UX का एक पूरी तरह नया रूप है.

हमारे पास दूसरे प्रोडक्ट गोल्स भी थे जैसे कि तेज़ी से स्टार्टअप टाइम्स और परफ़ॉर्मेंस को नुकसान पहुंचाए बिना सैकड़ों टैब को सपोर्ट करना. इन गोल्स को क्रोमियम के साथ प्राप्त करना चुनौतीपूर्ण था, जो बूट अनुक्रम, थ्रेडिंग मॉडल और टैब मॉडल से संबंधित कई जानकारियों के बारे में राय रखता है. हमने यहां बड़े बदलाव करने पर विचार किया, लेकिन हम Chromium के लिए अपने पैच को लक्षित रखना चाहते थे ताकि हम नए वर्ज़न्स को जल्दी से इंटीग्रेट कर सकें. ये पक्का करने के लिए कि हमारी डेवलपमेंट वेलोसिटी मैक्सिमम गति से बढ़े, हमें Chromium रनटाइम को इंटीग्रेट करने और चलाने के लिए एक अलग तरीके की ज़रुरत थी.

हमारे तकनीकी निवेश के लिए एक लिटमस टेस्ट न सिर्फ़ ये था कि ये तेज़ी से एक्सपेरिमेंटेशन, इटरेशन और नए फ़ीचर्स की डिलीवरी को सक्षम करेगा – यह हमें OpenAI की इंजीनियरिंग कल्चर के मुख्य भाग को बनाए रखने में भी सक्षम करेगा: पहले दिन से शिपिंग. हरेक नया इंजीनियर अपने पहले दिन की दोपहर में एक छोटा-सा बदलाव करता है और उसे जोड़ता है. हमें ये पक्का करना था कि ये मुमकिन है, भले ही Chromium की जांच और निर्माण में घंटों लग सकते हैं.

इन चुनौतियों का हमारा जवाब एक नया आर्किटेक्चरल लेयर का निर्माण करना था जिसे हम OWL कहते हैं: OpenAI का वेब लेयर. OWL हमारा Chromium इंटीग्रेशन है, जिसमें Chromium का ब्राउज़र प्रोसेस को मुख्य Atlas ऐप प्रोसेस के बाहर रन करना शामिल है.

इसके बारे में इस तरह से सोचें: Chromium ने टैब को अलग-अलग प्रोसेसेस में मूव करके ब्राउज़र्स में क्रांति ला दी. हम Chromium को मेन ऐप्लिकेशन प्रोसेस से बाहर निकालकर एक अलग सर्विस लेयर में ले जाकर इस आईडिया को और आगे ले जा रहे हैं. इस बदलाव से अनेक फ़ायदे सामने आएंगे:

• एक ज़्यादा सिंपल, मॉडर्न ऐप: Atlas लगभग पूरी तरह से SwiftUI और AppKit में बनाया गया है. एक भाषा, एक टेक स्टैक, एक साफ़ कोडबेस.
• तेज़ स्टार्टअप: Chromium बैकग्राउंड में एसिंक्रोनस तरीके से बूट होता है. Atlas इंतज़ार नहीं करता — पिक्सेल्स लगभग तुरंत ही स्क्रीन पर आ जाते हैं.
• जंक और क्रैश से आइसोलेशन: Chromium एक पॉवरफ़ुल और कॉम्प्लेक्स वेब इंजन है. अगर इसका मुख्य थ्रेड अटक भी गया, तो Atlas नहीं रुकता है. अगर ये क्रैश हो जाए, तो भी Atlas चालू रहेगा.
• मर्ज से होने वाली कम परेशानियां: क्योंकि हम Chromium ओपन सोर्स UI पर ज्यादा काम नहीं कर रहे हैं, इसलिए अपस्ट्रीम Chromium के मुकाबले हमारा अंतर बहुत छोटा है और इसे बनाए रखना आसान है.
• तेज़ सुधार: ज़्यादातर इंजीनियर्स को कभी भी लोकल तौर पर Chromium बनाने की ज़रुरत नहीं होती. OWL इंटर्नल तरीके से एक प्री-बिल्ट बाइनरी के तौर पर भेजा जाता है, इसलिए Atlas बिल्ड्स में घंटों नहीं बल्कि मिनटों का समय लगता है.

चूंकि हमारी टीम के ज़्यादातर इंजीनियर नियमित तौर पर सोर्स से Chromium नहीं बनाते हैं, इसलिए डेवलपमेंट बहुत तेज़ी से हो सकता है—यहां तक ​​कि टीम के नए मेंबर्स भी अपने पहले दोपहर में सरल बदलावों को मर्ज कर सकते हैं.

एक हाई लेवल पर, Atlas ब्राउज़र OWL क्लाइंट है, और Chromium ब्राउज़र प्रोसेस OWL होस्ट है. वे IPC, ख़ास तौर से Mojo⁠(एक नई विंडो में खुलेगा), Chromium के अपने मेसेज-पासिंग सिस्टम पर कम्युनिकेट करते हैं. हमने Mojo के लिए कस्टम Swift (और यहां तक ​​कि TypeScript) बाइंडिंग्स लिखी, ताकि हमारा Swift ऐप सीधे होस्ट-साइड इंटरफ़ेस को कॉल कर सके.

OWL क्लाइंट लाइब्रेरी एक सिंपल पब्लिक Swift API को उजागर करती है, जो होस्ट की सर्विस लेयर द्वारा उजागर किए गए कई अहम कॉन्सेप्ट्स को ऐब्स्ट्रैक्ट करती है:

• सेशन: होस्ट को ग्लोबल तौर से कॉन्फ़िगर और कंट्रोल करें
• प्रोफ़ाइल: किसी ख़ास यूज़र प्रोफ़ाइल के लिए ब्राउज़र स्टेट मैनेज करें
• WebView: व्यक्तिगत वेब कंटेंट्स को कंट्रोल और एम्बेड करें (जैसे रेंडर, इनपुट, नेविगेट, ज़ूम, आदि)
• WebContentRenderer: इनपुट ईवेंट्स को Chromium की रेंडरिंग पाइपलाइन में फ़ॉरवर्ड करें और रेंडरर से फ़ीडबैक पाएं
• LayerHost/Client: UI और Chromium के बीच कंपोज़िटिंग जानकारी एक्सचेंज करें

बुकमार्क, डाउनलोड, एक्सटेंशन और ऑटोफ़िल जैसे हाई-लेवल फ़ीचर्स को मैनेज करने के लिए सर्विस एंडपॉइंट्स की एक विस्तृत रेंज भी उपलब्ध है.

WebViews, जो क्लाइंट ऐप में म्यूच्यूअली एक्सक्लूसिव प्रेज़ेंटेशन स्पेस शेयर करते हैं, उन्हें एक शेयर्ड कंपोज़िटिंग कंटेनर में और उसके बाहर स्वैप किया जाता है. जोइसे कि, एक ब्राउज़र विंडो में अक्सर एक शेयर्ड कंटेनर दिखाई देता है और टैब स्ट्रिप में एक टैब को सिलेक्ट करने से उस टैब का WebView कंटेनर में बदल जाता है. Chromium की साइड पर, ये कंटेनर gfx::AcceleratedWidget से मैच करता है जो आखिरकार CALayer द्वारा सपोर्टेड होता है. हम उस लेयर की कॉन्टेक्स्ट ID को क्लाइंट के सामने प्रदर्शित करते हैं, जहां NSView उसे निजी CALayerHost API का इस्तेमाल करके एम्बेड करता है.

ड्रॉपडाउन या कलर पिकर जैसे ख़ास मामले, जिन्हें Chromium अलग पॉपअप विजेट में प्रस्तुत करता है, उसी अप्रोच का इस्तेमाल करते हैं. उनके पास content::WebContents नहीं है, लेकिन उनके पास content::RenderWidgetHostView है, जिसमें उनका अपना gfx::AcceleratedWidget है, इसलिए वही डेलिगेटेड रेंडरिंग मॉडल लागू होता है.OWL इंटर्नल तौर पर व्यू ज्योमेट्री को Chromium साइड के साथ सिंक में रखता है, इसलिए GPU कंपोज़िटर को उसके हिसाब से अपडेट किया जा सकता है और हमेशा सही साइज़ और डिवाइस स्केल के लेयर कंटेंट्स बना सकता है.हम इस तकनीक का दोबारा इस्तेमाल Chromium के अपने नेटिव Views UI के तत्वों को Atlas में चुनिंदा तौर पर प्रोजेक्ट करने के लिए भी करते हैं (ये SwiftUI में स्क्रैच से रीप्लेसमेंट्स बनाए बिना परमिशन प्रॉम्प्ट्स जैसे फ़ीचर्स को जल्दी से बूटस्ट्रैप करने के लिए भी मददगार है). ये तकनीक macOS पर इंस्टॉल करने लायक वेब ऐप्स के लिए Chromium के मौजूदा इंफ़्रास्ट्रक्चर से काफ़ी हद तक प्रेरित है.इनपुट इवेंट्स: क्रैक करना और फ़ॉर्वर्ड करनाChromium UI प्लैटफ़ॉर्म ईवेंट्स (जैसे macOS NSEvents) को रेंडरर्स को फ़ॉर्वर्ड करने से पहले Blink के WebInputEvent मॉडल में ट्रांसलेट करता है. लेकिन चूंकि OWL Chromium को एक छिपे हुए प्रोसेस में रन करता है, इसलिए हम Swift क्लाइंट लाइब्रेरी के अंदर खुद ही ट्रांसलेट करते हैं और पहले से ट्रांसलेटेड इवेंट्स को Chromium तक फ़ॉर्वर्ड करते हैं.वहां से, वे उसी लाइफ़सायकल को फ़ॉलो करते हैं जिसे रियल इनपुट इवेंट्स आम तौर पर वेब कंटेंट के लिए फ़ॉलो करती हैं. इसमें क्लाइंट को इवेंट्स वापस लौटाना शामिल है, जब भी कोई पेज ये इंगित करता है कि उसने इवेंट को हैंडल नहीं किया है. जब ऐसा होता है, तो हम NSEvent को दोबारा बनाते हैं और बाकी ऐप को इनपुट को संहैंडल करने का मौका देते हैं.एजेंट मोड: स्पेशल केसेसAtlas का एजेंटिक ब्राउज़िंग फ़ीचर रेंडरिंग, इनपुट इवेंट फ़ॉरवर्डिंग, और डेटा स्टोरेज के हमारे तरीकों के लिए कुछ यूनिक चुनौतियां पेश करती है.हमारा कंप्यूटर इस्तेमाल मॉडल इनपुट के तौर पर स्क्रीन की एक सिंगल इमेज की अपेक्षा करता है. लेकिन कुछ UI एलिमेंट्स, जैसे ड्रॉपडाउन्स, टैब की सीमाओं के बाहर अलग विंडो में रेंडर होते हैं. एजेंट मोड में, हम उन पॉपअप को सही कोआर्डिनेट्स पर मुख्य पेज इमेज में वापस एक साथ लाते हैं, ताकि मॉडल एक फ़्रेम में पूरा कॉन्टेक्स्ट देख सके.

इनपुट के लिए, हम वही सिद्धांत लागू करते हैं: एजेंट द्वारा जेनरेट किए गए इवेंट्स को सीधे रेंडरर तक भेजा जाता है, कभी भी विशेषाधिकार प्राप्त ब्राउज़र लेयर के ज़रिये नहीं. ये ऑटोमेटेड कंट्रोल के तहत भी सैंडबॉक्स सीमा को संरक्षित रखता है. जैसे कि, हम नहीं चाहते कि इस तरह के इवेंट्स ऐसे कीबोर्ड शॉर्टकट्स बनाए जो ब्राउज़र को ऐसी चीज़ें करने के लिए मजबूर करें जो दिखाई जा रही वेब कंटेंट से नहीं जुड़ी हुई हों.

एजेंट ब्राउज़िंग एक थोड़े समय वाले "लॉग-आउट" कॉन्टेक्स्ट में भी चल सकती है. यूज़र की मौजूदा इन्कॉग्निटो प्रोफ़ाइल को शेयर करने के बजाय, जो स्टेट लीक कर सकती है, हम अलग-थलग, इन-मेमोरी स्टोर्स को स्पिन करने के लिए Chromium के स्टोरेजपार्टिशन इंफ़्रास्ट्रक्चर का इस्तेमाल करते हैं. हरेक एजेंट सेशन नए सिरे से शुरू होता है, और जब ये ख़त्म होता है, तो सभी कुकीज़ और साइट डेटा खारिज कर दिए जाते हैं. आप एक से ज़्यादा "लॉग-आउट" एजेंट सेशन रन कर सकते हैं, हरेक अपने ब्राउज़र टैब में, और हरेक दूसरे से पूरी तरह से अलग.

ये सब ग्लोबल Chromium कम्युनिटी और मॉडर्न वेब की नींव रखने वाले उनके बेहतरीन काम के बिना मुमकिन नहीं होता. OWL उस आधार पर एक नए तरीके से बनाता है: इंजन को ऐप से अलग करके, मॉडर्न नेटिव फ़्रेमवर्क के साथ एक वर्ल्ड-क्लास वेब प्लैटफ़ॉर्म को ब्लेंड करके, और एक तेज़, ज़्यादा फ़्लेक्सिबल आर्किटेक्चर को अनलॉक करके.

ब्राउज़र Chromium को किस तरह होल्ड करता है, इस पर दोबारा विचार करके, हम नए तरह के अनुभवों के लिए जगह बना रहे हैं: ज़्यादा स्मूथ स्टार्टअप्स, ज़्यादा समृद्ध UI, बाकी OS के साथ ज़्यादा टाइट इंटीग्रेशन, और आईडिया की स्पीड से आगे बढ़ने वाला एक डेवलपमेंट लूप. अगर यह चुनौती आपको पसंद आती है, तो Atlas पर एक सॉफ़्टवेयर इंजीनियर, Atlas⁠, सॉफ़्टवेयर इंजीनियर, iOS⁠ और अन्य⁠ भूमिकाओं में काम करने के लिए हमारी ओपनिंग्स चेक करें.

chatgpt.com/atlas⁠(एक नई विंडो में खुलेगा) पर Atlas को आज़माएं.