GPT-5.4 Bilgisayar Kullanımı Eğitimi: Canlı Bir Haber Panosu Oluşturun

Kaputun altında GPT-5.4, bilgisayar kullanımı aracı döngüsünü çalıştırır:

• Aracı, geçerli URL ile birlikte Kanban panosunun bir ekran görüntüsünü alır.
• Model, görsel yerleşimi analiz eder ve görev kartlarının ve sütunların nerede olduğunu belirler.
• GPT-5.4 şu tür UI eylemleri önerir:
• imleci bir kartın üzerine taşımak
• tıklayıp basılı tutmak
• kartı başka bir sütuna sürüklemek
• Çalıştırıcı bu eylemleri Playwright işaretçi olaylarıyla uygular.
• Güncellenmiş pano durumunu doğrulayabilmesi için yeni bir ekran görüntüsü alınır ve modele geri gönderilir.

Süreç, pano istenen yapılandırmayı yansıtana kadar devam eder.

Bu örneği ilginç kılan; modelin Kanban uygulamasına dair hiçbir dahili bilgiye güvenmemesidir. 

Bunun yerine, ekran görüntüsüne dayanarak nereye tıklayıp sürükleyeceğini ve öğeleri nereye bırakacağını arayüzün görsel durumundan tamamen kendisi çıkarır. Bu, GPT-5.4 bilgisayar kullanımının önemli bir avantajını gösterir: geliştiriciler, her araç için özel tümleştirmeler veya API’ler inşa etmeksizin iş akışlarını otomatikleştirebilir.

Tuval (Paint) etkileşimi

Paint senaryosu, basit form doldurmadan ziyade görsel yerleşime, mekânsal akıl yürütmeye ve hassas imleç kontrolüne dayanan görevleri ele alır. Bu düzenekte aracı, bir çizim talimatı alır ve bunu doğrudan tarayıcı tabanlı karalama uygulaması içinde tamamlamak zorundadır. 

Aracıdan, tuval boyunca farklı sahneleri karalamasını istedim ve GPT-5.4; renkler seçerek, doğru çizim alanını bularak ve ızgarayı buna göre doldurarak görevi yerine getirdi.

Kanban örneğinde temel zorluk, yapılandırılmış kartları sütunlar arasında taşımakken; bu senaryoda uygulamanın görsel durumunu yorumlamak ve bir dizi düşük seviyeli etkileşim kararı almak çok daha belirleyicidir. Bu demoda bilgisayar kullanımı bunu şu şekilde yaptı:

• İmleç hareketi ve hedefleme: GPT-5.4 ilk olarak çizim arayüzünün düzenini, soldaki renk paletini ve ortadaki boş piksel tarzı tuvali yorumlar.
• Araç ve renk seçimi: Mevcut palet seçeneklerini belirler ve çizmeden önce uygun renge tıklar. Kaydedilen çalıştırmada model, renkleri değiştirir ve tuvalde farklı bölgeler oluşturmak için bunları bilinçli olarak kullanır.
• Tuval etkileşimi: Herhangi bir tuval API’sini çağırmak yerine aracı, imleci belirli hücrelere taşıyıp bunları tekrar eden desenlerle doldurarak uygulamayla tamamen UI eylemleri üzerinden etkileşime girer.
• Durum doğrulama: Her eylem grubundan sonra çalıştırıcı yeni bir ekran görüntüsü alır ve beklenen desenin tuvalde belirdiğini doğrulayabilmesi için modeli geri besler.

Dikkate değer bir nokta, GPT-5.4’ün rastgele tıklamıyor oluşuydu. Bunun yerine ekran görüntüsü geri besleme döngüsünü kullanarak çizimin nereye yapılması gerektiği, hangi rengin seçili olduğu ve her eylemden sonra tuvalin nasıl değiştiği üzerine akıl yürütüyordu. 

İlerleyen karelerde; tuvalin boş bir ızgaradan, büyük renkli bölgeler içeren yapılandırılmış bir kompozisyona evrildiğini net biçimde görebilirsiniz; bu da modelin birden çok tur boyunca hem ilerlemenin hem de yerleşimin farkında olduğunu gösterir.

Rezervasyon iş akışı

Bu ortamda aracı, simüle edilmiş bir rezervasyon web sitesiyle etkileşime girer ve bir rezervasyon akışını tamamlaması istenir. Bu da tekil, yalıtılmış bir eylemi çözmek yerine bir dizi UI durumundan sırayla geçmesi gerektiği anlamına gelir.

Bu demoda bilgisayar kullanımı şöyle uygulanır:

• Arayüzü anlama: GPT-5.4, geçerli ekran yerleşimini yorumlayarak düğmeleri, form alanlarını, takvimleri, açılır menüleri ve onay kontrollerini belirler.
• Adım adım gezinme: Aracı; bir seçeneği belirleme, sonraki ekrana geçme veya bir form öğesini açma gibi, iş akışının önce hangi kısmının tamamlanacağına karar verir.
• Form doldurma: Gerekli değerleri metin kutularına girer ve açılır menüler veya tarih seçiciler gibi denetimlerle etkileşime girer.
• Turlar arasında durum takibi: Her eylemden sonra çalıştırıcı yeni bir ekran görüntüsü alır ve modeli geri besler; böylece model hangi alanların tamamlandığını ve nelerin yapılması gerektiğini doğrular.
• Onay ve tamamlama: Gerekli girişler doldurulduğunda aracı nihai onay adımına ilerler ve rezervasyonun başarıyla tamamlandığını kontrol eder.

Kanban, Paint ve Rezervasyon senaryoları her ne kadar UI kontrolünü gösterse de, bunları daha pratik uygulamalara taşımamız gerekir. 

Bir sonraki bölümde, aynı fikri kullanarak, yakın tarihli haberleri toplayan, sonuçları yapılandıran ve bunları Codex uygulaması içinde kodsuz bir iş akışıyla kullanılabilir bir arayüzde sunan canlı bir haber panosu oluşturacağım.

Adım 3: GPT-5.4 ile canlı bir haber panosu oluşturma

Bu adımda, aynı bilgisayar kullanımı yeteneklerini kullanarak canlı bir haber panosu oluşturacağız. Hedef; kullanıcının AI, siyaset, iklim, teknoloji, bilim vb. gibi ilgi duyduğu bir konuyu seçebildiği küçük bir pano yaratmak ve sistemin ardından şunları yapmasıdır:

• Güvenilir kaynaklardan yakın tarihli haberleri toplamak
• Bu makalelerden kilit bilgileri çıkarmak
• Üç kısa özet üretmek
• Sonuçları yapılandırılmış bir pano biçiminde sunmak

Uygulamayı elle yazmak yerine, GPT-5.4 bilgisayar kullanımı ortamı içinde Codex’i kullanacak ve mevcut CUA deposunun içine özelliği doğrudan üretmesi için aşağıdaki istemi ileteceğiz. 

Codex, CUA örnek uygulamasıyla aynı ortama bağlı olduğu için aracı; depoyu analiz edebilir, panonun nerede yer alması gerektiğine karar verebilir ve UI ile mantığı otomatik olarak uygulayabilir.

İstem: 

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

Bu istem, ayrıntılı uygulama kodu olmak yerine yüksek düzeyli bir teknik şartname olarak davranarak Codex’e mevcut depo içinde canlı bir haber panosu inşa etmesini söyler. 

Codex, öncelikle proje yapısını inceleyerek pano UI’sinin ve arka uç mantığının nereye eklenmesi gerektiğini belirler. Ardından bir konu giriş alanı oluşturur, güvenilir kaynaklardan gerçek zamanlı olarak yakın tarihli makaleleri getirir, başlık, kaynak ve özet gibi kilit meta verileri çıkarır ve alakayı sağlamak için sonuçları süzer. 

Son olarak, panoda kolayca görüntülenip dışa aktarılabilen, temiz ve yapılandırılmış bir yerleşimde tam olarak üç haber öğesi sunar.

GPT-5.4 bilgisayar kullanımı, özelliği üretirken modelin geliştirme ortamını gözlemleyip onunla etkileşime girmesine olanak tanıyarak bu iş akışını mümkün kılar. 

Codex, salt bir kod üreteci gibi davranmak yerine depoyu analiz eder, yeni bileşenlerin nerede yer alması gerektiğini belirler ve sonuçları doğrularken panoyu artımlı olarak uygular.

İş akışı birkaç kilit adımı içerir:

• Depo incelemesi: Codex, pano UI’sinin ve destekleyici mantığın nereye eklenmesi gerektiğini belirlemek için proje yapısını tarar.
• Kullanıcı arayüzü: Kullanıcıların AI, iklim veya teknoloji gibi konuları arayabilmesini sağlayan bir konu giriş alanı oluşturur.
• Gerçek zamanlı haber alma: Sistem, sabit kodlanmış örneklere güvenmek yerine güvenilir kaynaklardan yakın tarihli makaleler toplar.
• Süzme ve özetleme: GPT-5.4, başlık, kaynak ve özet gibi faydalı meta verileri çıkarır ve sonuçların seçilen konuyla ilgili kalmasını sağlar.
• Yapılandırılmış sunum: Son olarak pano, sonuçların kolay taranabilmesi için tam olarak üç haber öğesini kart tarzı bir yerleşimde görüntüler.

Not: Nihai pano tek bir istemden üretilmedi. İstenen davranış ve çıktı biçimini elde etmek için birkaç yineleme ve istem iyileştirmesi gerekti. Benzer deneyleri çalıştırırken, istemi ve kısıtları ayarlarken deneme-yanılmayı bekleyin. Ayrıca, bilgisayar kullanımı iş akışlarını engelleyebileceklerinden, tarayıcınızın veya sisteminizin otomatik tarayıcı etkileşimlerini engellemediğinden emin olun.

Sonuç

Bu eğitimde, GPT-5.4 Bilgisayar Kullanımı’nın, geleneksel API’lere güvenmek yerine gerçek yazılım ortamlarıyla etkileşime giren aracıları oluşturmak için nasıl kullanılabileceğini inceledik. OpenAI’nin CUA örnek uygulamasını kullanarak önce bilgisayar kullanımı döngüsünün kum havuzu senaryoları üzerinden nasıl çalıştığını; yani modelin arayüzleri nasıl gözlemlediğini, eylemler önerdiğini ve ekran görüntüleriyle sonuçları doğruladığını gördük.

Ardından aynı konsepti CUA ortamında Codex kullanarak canlı bir haber panosu inşa etmek için uyguladık. Uygulamayı elle yazmak yerine bir istem, yüksek düzeyli bir şartname olarak hareket etti; bu sayede Codex depoyu inceleyip pano için UI ve mantığı oluşturdu, güvenilir kaynaklardan yakın tarihli haberleri aldı ve sonuçları yapılandırılmış bir biçimde sundu.

Buradan hareketle şu tür aracıları oluşturarak bu fikri daha da genişletebilirsiniz:

• Dahili panoları veya raporlama araçlarını otomatikleştirme
• Araştırma hatları oluşturma
• Sektör trendlerini gerçek zamanlı izleme
• Mevcut depoların içinde doğrudan yeni ürün özellikleri prototipleme

Bilgisayar kullanımı modelleri gelişmeye devam ettikçe; hem yazılım arayüzleriyle hem de kod tabanlarıyla etkileşime girebilen daha genel amaçlı geliştirme ve otomasyon aracılarına kapı aralayabilirler.