GPT-5.4 कंप्यूटर यूज़ ट्यूटोरियल: लाइव न्यूज़ डैशबोर्ड बनाएं

आंतरिक रूप से, GPT-5.4 कंप्यूटर-यूज़ एजेंट लूप के माध्यम से चलता है:

• एजेंट को वर्तमान URL के साथ कानबन बोर्ड का एक स्क्रीनशॉट मिलता है।
• मॉडल विज़ुअल लेआउट का विश्लेषण करता है और तय करता है कि टास्क कार्ड्स और कॉलम कहाँ स्थित हैं।
• GPT-5.4 निम्न जैसे UI एक्शंस प्रस्तावित करता है:
• कर्सर को किसी कार्ड पर ले जाना
• क्लिक करके पकड़े रखना
• कार्ड को दूसरे कॉलम में खींचना
• रनर इन एक्शंस को Playwright पॉइंटर ईवेंट्स के जरिए निष्पादित करता है।
• एक नया स्क्रीनशॉट कैप्चर कर मॉडल को वापस भेजा जाता है ताकि वह अपडेटेड बोर्ड स्टेट की पुष्टि कर सके।

यह प्रक्रिया तब तक जारी रहती है जब तक बोर्ड वांछित कॉन्फ़िगरेशन को प्रतिबिंबित न करने लगे।

इस उदाहरण की दिलचस्प बात यह है कि मॉडल कानबन एप्लिकेशन के किसी आंतरिक ज्ञान पर निर्भर नहीं करता। 

इसके बजाय, वह इंटरफेस की विज़ुअल स्टेट से ही पूरा तर्क करता है, स्क्रीनशॉट के आधार पर यह तय करता है कि कहाँ क्लिक करना है, क्या ड्रैग करना है और किन एलिमेंट्स को कहाँ ड्रॉप करना है। यह GPT-5.4 कंप्यूटर यूज़ का एक प्रमुख लाभ दिखाता है: डेवलपर बिना हर टूल के लिए कस्टम इंटीग्रेशन या API बनाए वर्कफ़्लो को ऑटोमेट कर सकते हैं।

पेंट कैनवास इंटरेक्शन

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

मैंने एजेंट को कैनवास पर अलग-अलग दृश्य स्केच करने को कहा, और GPT-5.4 ने रंग चुनकर, सही ड्रॉइंग क्षेत्र ढूँढकर, और ग्रिड भरकर यह कार्य सँभाला।

कानबन उदाहरण के विपरीत, जहाँ मुख्य चुनौती संरचित कार्ड्स को कॉलमों के बीच ले जाना थी, यह परिदृश्य ऐप की विज़ुअल स्टेट की व्याख्या करने और निम्न-स्तरीय इंटरैक्शन निर्णयों की एक शृंखला बनाने पर अधिक निर्भर है। इस डेमो में कंप्यूटर यूज़ ने यह ऐसे किया:

• कर्सर मूवमेंट और टार्गेटिंग: GPT-5.4 पहले स्केच इंटरफेस के लेआउट की व्याख्या करता है, जिसमें बाएँ तरफ रंग पैलेट और बीच में खाली पिक्सल-स्टाइल कैनवास शामिल है।
• टूल और रंग चयन: यह उपलब्ध पैलेट विकल्पों की पहचान करता है और ड्रॉ करने से पहले उपयुक्त रंग पर क्लिक करता है। कैप्चर की गई रन में, मॉडल रंग बदलता है और उन्हें जानबूझकर अलग-अलग क्षेत्रों के लिए उपयोग करता है।
• कैनवास इंटरेक्शन: किसी भी कैनवास API को कॉल करने के बजाय, एजेंट पूरी तरह UI एक्शंस के माध्यम से ऐप के साथ इंटरेक्ट करता है—पॉइंटर को विशिष्ट कोशिकाओं तक ले जाकर और उन्हें दोहरावदार पैटर्न में भरकर।
• स्टेट वेरिफिकेशन: प्रत्येक बैच के बाद, रनर एक नया स्क्रीनशॉट कैप्चर करता है और इसे मॉडल को लौटाता है ताकि वह जाँच सके कि अपेक्षित पैटर्न कैनवास पर दिखाई दे रहा है या नहीं।

दिलचस्प बात यह है कि GPT-5.4 बस अनियमित क्लिक नहीं कर रहा था। बल्कि, वह स्क्रीनशॉट फ़ीडबैक लूप का उपयोग करके यह तर्क कर रहा था कि ड्रॉइंग कहाँ जानी चाहिए, इस समय कौन-सा रंग चयनित है, और हर एक्शन के बाद कैनवास कैसे बदला है। 

बाद के फ़्रेमों में, आप साफ़ देख सकते हैं कि कैनवास खाली ग्रिड से एक संरचित रचना में विकसित हो रहा है जिसमें बड़े रंगीन क्षेत्र हैं, जो दिखाता है कि मॉडल कई टर्न्स में प्रगति और लेआउट दोनों के प्रति जागरूक था।

बुकिंग वर्कफ़्लो

इस वातावरण में, एजेंट एक सिम्युलेटेड बुकिंग वेबसाइट के साथ इंटरेक्ट करता है और उसे एक रिज़र्वेशन फ्लो पूरा करने के लिए कहा जाता है। यानी उसे एकल पृथक एक्शन हल करने के बजाय क्रम में कई UI स्टेट्स से गुज़रना पड़ता है।

इस डेमो में कंप्यूटर यूज़ ऐसे लागू होता है:

• इंटरफेस की समझ: GPT-5.4 वर्तमान स्क्रीन लेआउट की व्याख्या करके शुरू करता है, बटनों, फ़ॉर्म फ़ील्ड्स, कैलेंडर्स, ड्रॉपडाउन और कन्फर्मेशन कंट्रोल्स की पहचान करता है।
• कदम-दर-कदम नेविगेशन: एजेंट तय करता है कि वर्कफ़्लो का कौन-सा हिस्सा पहले पूरा करना है, जैसे कोई विकल्प चुनना, अगली स्क्रीन पर जाना, या फ़ॉर्म एलिमेंट खोलना।
• फ़ॉर्म-फिलिंग: यह आवश्यक मानों को टेक्स्ट बॉक्स में दर्ज करता है और ड्रॉपडाउन या डेट सेलेक्टर्स जैसे कंट्रोल्स के साथ इंटरेक्ट करता है।
• टर्न्स के पार स्टेट ट्रैकिंग: प्रत्येक एक्शन के बाद, रनर नया स्क्रीनशॉट कैप्चर करता है और उसे मॉडल को लौटाता है, जिससे मॉडल यह सत्यापित कर सके कि कौन-से फ़ील्ड पहले से पूरे हैं और क्या शेष है।
• कन्फर्मेशन और पूर्णता: आवश्यक इनपुट भर जाने पर, एजेंट अंतिम पुष्टि चरण तक बढ़ता है और जाँचता है कि रिज़र्वेशन सफलतापूर्वक पूरा हुआ या नहीं।

हालाँकि कानबन, पेंट और बुकिंग परिदृश्य सभी UI नियंत्रण दिखाते हैं, हमें उन्हें और व्यावहारिक एप्लीकेशन्स पर लागू करना है। 

अगले सेक्शन में, मैं इसी विचार का उपयोग करूँगा ताकि एक लाइव न्यूज़ डैशबोर्ड बनाया जा सके जो ताज़ा कहानियाँ जुटाए, परिणामों को संरचित करे, और उन्हें Codex एप्लिकेशन के अंदर एक नो-कोड वर्कफ़्लो का उपयोग करके एक उपयोगी इंटरफेस में रेंडर करे।

स्टेप 3: GPT-5.4 के साथ लाइव न्यूज़ डैशबोर्ड बनाना

इस स्टेप में, हम इन्हीं कंप्यूटर-यूज़ क्षमताओं को लागू करके एक लाइव न्यूज़ डैशबोर्ड बनाएँगे। लक्ष्य है एक छोटा डैशबोर्ड बनाना जहाँ उपयोगकर्ता AI, राजनीति, जलवायु, टेक्नोलॉजी, विज्ञान आदि जैसा कोई विषय चुन सके और सिस्टम तब:

• विश्वसनीय स्रोतों से ताज़ा खबरें जुटाए
• उन लेखों से प्रमुख जानकारी निकाले
• तीन संक्षिप्त सारांश जनरेट करे
• परिणामों को संरचित डैशबोर्ड फ़ॉर्मेट में रेंडर करे

एप्लिकेशन को मैन्युअली लिखने के बजाय, हम GPT-5.4 कंप्यूटर यूज़ वातावरण के भीतर Codex का उपयोग करेंगे और मौजूदा CUA रेपो के अंदर सीधे फीचर जनरेट कराने के लिए इसे निम्न प्रॉम्प्ट देंगे। 

क्योंकि Codex उसी वातावरण से जुड़ा है जिसका उपयोग CUA सैंपल ऐप करता है, एजेंट रेपो का विश्लेषण कर सकता है, तय कर सकता है कि डैशबोर्ड कहाँ होना चाहिए, और UI व लॉजिक को अपने-आप लागू कर सकता है।

प्रॉम्प्ट: 

Build a live News Dashboard in this repo.
Goal:
Create a dashboard where a user can enter a topic of interest, fetch the latest important news in real time from trusted sources, and render exactly 3 structured results that are meaningful and topic-relevant.
Requirements:
- The dashboard must allow the user to type a topic such as AI, politics, climate, health, science, or tech.
- Fetch live results at request time. Do not hardcode stories.
- Use trusted sources appropriate to the topic. Prefer official or well-known outlets.
- Return exactly 3 items.
- Each item must include:
  - HEADLINE
  - SOURCE
  - SUMMARY
- Summaries must be in your own words, concise, and clearly related to the article and topic.
- Avoid low-quality results such as homepages, category pages, generic aggregator wrappers, or meaningless titles.
- Prefer direct article URLs over search/aggregator wrapper links.
- Keep the UI minimal and consistent with the repo’s existing design language.
- Reuse the existing framework/tooling. Do not add new dependencies unless truly necessary.
Implementation plan:
1. Inspect the repo and place the dashboard in the existing app structure without breaking the current console.
2. Add a topic input UI with a search action and a loading/error state.
3. Add a server-side news fetch path that:
   - maps topics to trusted source sets
   - fetches recent results in real time
   - filters out irrelevant or low-quality matches
   - resolves direct article URLs where possible
   - extracts useful metadata for headline/source/summary
4. Render the dashboard with:
   - page title
   - topic
   - date
   - intro
   - exactly 3 cards/items
   - a structured export block that can be copied into another dashboard
5. Keep the export block in this exact format:
---BEGIN DASHBOARD CONTENT---
TITLE: News Brief — [TOPIC]
DATE: [today's date]
INTRO: Top 3 [TOPIC] updates from trusted sources.
ITEM 1:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
ITEM 2:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
ITEM 3:
HEADLINE: [headline]
SOURCE: [source name or URL]
SUMMARY: [2–4 sentences]
SOURCES_USED: [comma-separated list of sites used]
---END DASHBOARD CONTENT---
Deliverables:
- A working live dashboard route in the app
- Real-time topic search
- Exactly 3 relevant results per search
- Structured export block visible in the UI
- Short run instructions
- Basic tests for parsing/formatting logic if the repo already has a test runnerसंचालित द्वारा

प्रॉम्प्ट Codex को विस्तृत इम्प्लीमेंटेशन कोड के बजाय एक उच्च-स्तरीय विनिर्देश के रूप में काम करते हुए मौजूदा रेपो के भीतर एक लाइव न्यूज़ डैशबोर्ड बनाने का निर्देश देता है। 

Codex पहले प्रोजेक्ट स्ट्रक्चर का निरीक्षण करता है ताकि तय कर सके कि डैशबोर्ड UI और बैकएंड लॉजिक कहाँ जोड़े जाएँ। फिर यह टॉपिक इनपुट फ़ील्ड बनाता है, वास्तविक समय में विश्वसनीय स्रोतों से हाल के लेख लाता है, हेडलाइन, स्रोत और सारांश जैसी प्रमुख मेटाडेटा निकालता है, और प्रासंगिकता सुनिश्चित करने के लिए परिणामों को फ़िल्टर करता है। 

अंत में, यह ठीक तीन न्यूज़ आइटम्स को एक साफ-सुथरे, संरचित लेआउट में रेंडर करता है जिन्हें डैशबोर्ड में आसानी से देखा या एक्सपोर्ट किया जा सकता है।

GPT-5.4 कंप्यूटर यूज़ इस वर्कफ़्लो को सक्षम बनाता है क्योंकि मॉडल फीचर जनरेट करते समय डेवलपमेंट वातावरण का अवलोकन और उसके साथ इंटरेक्ट कर सकता है। 

कोड जनरेटर की तरह केवल काम करने के बजाय, Codex रेपो का विश्लेषण करता है, तय करता है कि नए कॉम्पोनेंट्स कहाँ होने चाहिए, और परिणामों की पुष्टि करते हुए क्रमिक रूप से डैशबोर्ड इम्प्लीमेंट करता है।

वर्कफ़्लो में कई प्रमुख स्टेप्स शामिल हैं:

• रेपोजिटरी निरीक्षण: Codex प्रोजेक्ट स्ट्रक्चर को स्कैन करता है ताकि पहचाने कि डैशबोर्ड UI और सहायक लॉजिक कहाँ जोड़े जाएँ।
• यूज़र इंटरफेस: यह एक टॉपिक इनपुट फ़ील्ड बनाता है जो उपयोगकर्ताओं को AI, जलवायु, या टेक्नोलॉजी जैसे विषयों की खोज करने देता है।
• रियल-टाइम न्यूज़ रिट्रीवल: सिस्टम हार्डकोडेड उदाहरणों पर निर्भर रहने के बजाय विश्वसनीय स्रोतों से हाल के लेख जुटाता है।
• फ़िल्टरिंग और सार-संक्षेप: GPT-5.4 हेडलाइन, स्रोत और सारांश जैसे उपयोगी मेटाडेटा निकालता है, यह सुनिश्चित करते हुए कि परिणाम चयनित विषय से प्रासंगिक रहें।
• संरचित रेंडरिंग: अंत में, डैशबोर्ड कार्ड-स्टाइल लेआउट में ठीक तीन न्यूज़ आइटम दिखाता है ताकि परिणाम आसानी से स्कैन किए जा सकें।

नोट: अंतिम डैशबोर्ड एक ही प्रॉम्प्ट से जनरेट नहीं हुआ था। इच्छित व्यवहार और आउटपुट फ़ॉर्मेट पाने के लिए कुछ आवृत्तियाँ और प्रॉम्प्ट परिष्कार करने पड़े। ऐसे प्रयोग चलाते समय, प्रॉम्प्ट और बाधाओं को समायोजित करते हुए कुछ ट्रायल-एंड-एरर की अपेक्षा रखें। साथ ही, सुनिश्चित करें कि आपका ब्राउज़र या सिस्टम स्वचालित ब्राउज़र इंटरेक्शन्स को ब्लॉक न कर रहा हो, क्योंकि ऐसे प्रतिबंध कंप्यूटर-यूज़ वर्कफ़्लोज़ में बाधा डाल सकते हैं।

निष्कर्ष

इस ट्यूटोरियल में, हमने देखा कि GPT-5.4 कंप्यूटर यूज़ का उपयोग ऐसे एजेंट बनाने में कैसे किया जा सकता है जो पारंपरिक API पर निर्भर होने के बजाय वास्तविक सॉफ़्टवेयर वातावरणों के साथ इंटरेक्ट करते हैं। OpenAI के CUA सैंपल ऐप का उपयोग करते हुए, हमने पहले देखा कि कंप्यूटर-यूज़ लूप कुछ सैंडबॉक्स परिदृश्यों में कैसे काम करता है—यानी मॉडल इंटरफेस का अवलोकन कैसे करता है, एक्शंस प्रस्तावित करता है, और स्क्रीनशॉट्स के जरिए परिणामों की पुष्टि करता है।

फिर हमने उसी अवधारणा को CUA वातावरण के भीतर Codex का उपयोग करके लाइव न्यूज़ डैशबोर्ड बनाने में लागू किया। एप्लिकेशन को मैन्युअली लिखने के बजाय, एक प्रॉम्प्ट उच्च-स्तरीय विनिर्देश के रूप में काम करता है, जिससे Codex रेपो का निरीक्षण कर सके, डैशबोर्ड के लिए UI और लॉजिक जनरेट कर सके, विश्वसनीय स्रोतों से ताज़ा समाचार जुटा सके, और परिणामों को संरचित फ़ॉर्मेट में रेंडर कर सके।

यहाँ से, आप इस विचार का विस्तार करके ऐसे एजेंट बना सकते हैं जो:

• इंटरनल डैशबोर्ड या रिपोर्टिंग टूल्स को ऑटोमेट करें
• रिसर्च पाइपलाइन्स जनरेट करें
• उद्योग प्रवृत्तियों को रियल-टाइम में ट्रैक करें
• मौजूदा रेपोजिटरीज़ के भीतर सीधे नए प्रोडक्ट फीचर्स का प्रोटोटाइप बनाएँ

जैसे-जैसे कंप्यूटर-यूज़ मॉडल्स बेहतर होते जाएँगे, वे अधिक जनरल-पर्पज़ डेवलपमेंट और ऑटोमेशन एजेंट्स के लिए रास्ता खोल सकते हैं जो सॉफ़्टवेयर इंटरफेस और कोडबेस—दोनों के साथ इंटरेक्ट करने में सक्षम हों।