Ajan dostu web siteleri oluşturun

Kasper Kulikowski

Omkar More

Web sitenizin yeni bir ziyaretçi türü var. Bazı kullanıcılar, manuel gezinmeden hedef odaklı yolculukları yapay zeka aracılarının yönetmesine geçiş yapıyor. Bu otonom sistemler, girişleri yorumlayabilir, plan yapabilir ve kullanıcı adına işlemleri gerçekleştirebilir.

Ancak web sitelerimizin çoğu, karmaşık fareyle üzerine gelme durumları, değişen düzenler ve akıcı hareketlerle insanlara hitap edecek şekilde tasarlanır. Bu işlev, temsilciler için çalışmıyor.

Ajanlar sitenizi nasıl görüntüler?

Temsilciler, web sitenizi monitörde görmez. Sitenizin makine tarafından okunabilir bir gösterimi üzerinde çalışırlar. Bu temsilin kalitesi, performanslarını belirler.

Ajanlar, web sitenizi 3 temel şekilde görüntüleyebilir: ekran görüntüleri, ham HTML ve erişilebilirlik ağacı.

Ekran görüntüleri

Temsilci, oluşturulan sayfanın anlık görüntüsünü alır ve öğeleri tanımlamak için bir görsel model kullanır. Ekran görüntüsüne göre, aracı sağ üstteki arama çubuğunun genel arama olduğunu, ortadaki kutunun ise büyük olasılıkla bir form alanı olduğunu anlayabilir. Temsilciler, önem düzeyini belirlemek için renk, boyut ve yakınlık gibi görsel ipuçlarından yararlanabilir. Büyük bir Sil düğmesi, küçük bir "Yardım" bağlantısına kıyasla daha dikkatli bir şekilde yorumlanabilir. Ancak ekran görüntülerini analiz etmek yavaş ve maliyetli (kullanılan jetonlar açısından) olabilir. Bu nedenle, yapının kafa karıştırıcı olduğu durumlarda yedek olarak kullanılması daha uygundur.

HTML

Ajan, DOM'u analiz eder ve HTML'yi okur. Öğelerin nasıl iç içe yerleştirildiğini, DOM ağacının mantıksal hiyerarşisini, yapıyı tanımlayan kimlikler ve sınıflar gibi özellikleri ve sitenin bilgi omurgasını oluşturan ham veri dizelerini anlar. Bu, ajanın öğeler arasındaki ilişkiyi anlamasına yardımcı olur.

Bir ürün kapsayıcısının içinde Hemen Satın Al düğmesi varsa aracı, bu düğmenin ilgili ürüne ait olduğunu varsayar.

Erişilebilirlik ağacı

Erişilebilirlik ağacı, DOM'u en önemli öğelere (roller, adlar ve etkileşimli öğelerin durumları) indirgeyen tarayıcıya özgü bir API'dir. Bu, yardımcı teknoloji tarafından kullanılan sayfanın anlamsal özetidir. Bir yapay zeka aracısı için, CSS'nin görsel "gürültüsünü" yok sayarak tamamen faydaya odaklanan yüksek kaliteli bir harita görevi görür. Bir temsilci, bu ağacı yorumlayarak her açma/kapatma düğmesinin, kaydırma çubuğunun ve giriş alanının işlevsel amacını öğrenebilir.

WebMCP araçları

WebMCP, web siteleri ile ajanlar arasındaki boşluğu kapatmak, amaç ve görevleri ajanlarla paylaşmak için önerilen bir web standardıdır. Bu işlem, JavaScript veya HTML ek açıklamaları olan araçlar tanımlanarak yapılır. Ajanlar, bu araçları standart etkinleştirmeye kıyasla daha hızlı ve doğru bir şekilde yorumlar.

WebMCP araçları müşteri desteği, e-ticaret, keşif ve daha birçok amaçla kullanılabilir. Satın alma gibi bazı işlemler hassastır. Kullanıcı etkileşimi için onay iletişim kutusu isteğinde bulunan bir komut ekleyebilirsiniz.

WebMCP kullanım alanlarını ve etkili araçlar oluşturmayı öğrenin.

Birleştirilmiş yöntemler

Tek bir girişe güvenmek anlamsal bir boşluk oluşturur. Örneğin, DOM'da bir aracı, CSS ve JavaScript ile bunu işlevsel bir düğme olarak yapılandırdığınızı bilmeden <div> görebilir. Ekran görüntülerinde, temsilci düğmenin ekrandaki yerini belirleyebilir ancak düğmenin amaçlanan hedefi veya tetiklemek üzere tasarlandığı işlem hakkında bilgi sahibi olamaz.

Bu nedenle modern ajanlar birden fazla modaliteyi birleştirir. Etkileşimli öğelerin temiz ve yapılandırılmış bir listesini almak için DOM'u ve erişilebilirlik ağacını kullanır. Ardından, düzeni, gruplandırmayı ve görsel ipuçlarını anlamak için bu listeyi görsel bir oluşturmayla çapraz referanslandırır.

Görevimiz, bu kanalların tümünde temiz sinyaller sağlamaktır.

Ajan dostu web siteleri oluşturma

Temsilcilerin web sitenizde gezinmesine yardımcı olmak için bir insanın veya temsilcinin yapması gereken tüm işlemler site arayüzünde açıkça belirtilmelidir. Aşağıda bazı en iyi uygulamaları görebilirsiniz:

• Hayalet öğelerden kaçının. Etkileşimli öğeleri gizleyen şeffaf yer paylaşımlarından kaçının. Aracı tarafından yapılan görsel analiz, şeffaf görünse bile kapalı olan düğümleri atabilir.
• Semantik HTML'yi kullanın. Semantik HTML ile işlem yapılabilir öğeler tasarlayın. Örneğin, değiştirilmiş <div> ve <span> öğeleri yerine <button> ve <a> etiketlerini kullanın. Aracı, eski öğeleri etkileşimli öğeler olarak tanır.
  • Semantik HTML kullanamıyorsanız öğeye her zaman uygun role ve tabindex özelliklerini ekleyin. Örneğin, <div role="button">.
  • <label> etiketlerine for özelliğini ekleyerek bunları girişlere bağlayın. Bu, yapay zeka aracısının, işlem dizesine doğrudan eklenen etiket metnini belirterek bir alanın amacını anlamasına yardımcı olur.
• Görsel ipuçları için CSS kullanın. CSS'de cursor: pointer olarak ayarlayın. Bu, işlem yapılabilirliğe ilişkin güçlü bir sinyaldir.
• Görsel analiz için minimum boyutu karşılayın. Bir işlemin tamamlanması için gereken tüm etkileşimli öğelerin, modelin görsel analizinde filtrelenmemesi için görünür ve 8 kare pikselden büyük olduğundan emin olun.
• Kararlı bir düzen sağlayın. Web sitenizin düzeni sürekli değişiyorsa (ör. ürün sayfasındaki alışveriş sepetine ekle düğmesi her ürün kategorisinde farklı bir konumdaysa) ekran görüntüsü alan aracılar büyük olasılıkla kafası karışır.
• API'yi destekleyen ajanlar için açık görevler ve işlemler tanımlamak üzere WebMCP araçları oluşturun.

Sonraki adımlar

Bir siteyi "ajanlara hazır" hale getirmek için önerdiğimiz her şey, siteleri insanlar için de daha iyi hale getirir.

Web sitelerini yapay zeka ajanlarıyla uyumlu hale getirmek, iyi yapılandırılmış, erişilebilir ve semantik web siteleri oluşturma konusundaki temel ilkelerine yeniden bağlı kalmak için bir teşviktir.

• Erişilebilirlik ağacınızı denetleyin: Sitenizin hiyerarşisinin makine tarafından okunabilir ve kararlı olduğundan emin olmak için mevcut araçları kullanın.
• Web sitelerinin ajanlarla etkileşim kurmasına yardımcı olmak için önerilen bir web standardı olan WebMCP hakkında bilgi edinin. API'ler, kaynak denemesiyle Chrome'da üretimde deneme amaçlı olarak kullanılabilir.