AI çıktısını arayüze dönüştürmek: serbest HTML yerine bileşenler
Modelin ürettiği veriyi doğrula, izin verilen bileşenlere eşleştir ve yükleme ile hata durumlarını tasarla.
Yerel sesler kontrol ediliyor…
Kısaca
Modelin ürettiği veriyi doğrula, izin verilen bileşenlere eşleştir ve yükleme ile hata durumlarını tasarla.
Bu yazıda neler var?
Bir modelin cevabını ekranda göstermek ile modelin arayüz kodunu çalıştırmasına izin vermek farklı kararlardır. Kişisel bir uygulamada ilk deneme için küçük, önceden tanımlanmış bileşenler ve doğrulanmış veri daha denetlenebilir bir başlangıç sunar. Bu yazı üretimde ölçülmüş bir performans sonucu değil, bir uygulama tasarımıdır.
Önce veri sözleşmesi
Örneğin model yalnızca “özet”, “kontrol listesi” veya “kaynak kartı” türlerinden birini önerebilsin. Her türün zorunlu alanlarını, metin uzunluklarını ve izin verilen bağlantı biçimlerini belirle. Bilinmeyen türü ya da geçersiz adresi render etmek yerine reddet. Modelin verdiği bileşen veya paket adını dinamik olarak çalıştırma.
React metin içeriğini normal şekilde render etmeyi destekler. Ham HTML ekleme özelliği ise güvenilmeyen veri için ayrıca risk taşır. Veriyi doğrulamak tek başına her HTML kullanımını güvenli yapmaz; ham HTML gerekmiyorsa bu yolu hiç açmamak daha anlaşılırdır.
Bekleme ve hata da tasarımın parçası
Yüklenirken hangi bölümün hazır olmadığını göster. Suspense, destekleyen veri kaynağı veya tembel yüklenen bileşen için fallback sunabilir; sıradan bir effect içindeki isteği kendiliğinden yönetmez. Transition kullanmak da bütün asenkron işi otomatik olarak güvenli veya hızlı yapmaz. Kontrollü metin girişinin güncellemesini transition içine taşımak yerine yazma hissini koru.
Kendi kart sözleşmeni dene
Güvenli bir simülasyon. Gerçek istek, mesaj veya ödeme oluşturmaz; seçimler bu sayfada kalır.
İzinli türler: summary, source. source için HTTPS URL gerekir. Kod çalıştırılmaz.
A validated card.
Kabul testini küçük tut
Geçerli bir kart, eksik zorunlu alan, aşırı uzun metin ve izin verilmeyen bağlantıyla dene. Ekran okuyucu için bekleme ve hata mesajlarını kontrol et. Bir kullanıcı işlemi veri değiştiriyorsa onayı ayrıca al; model çıktısını yetki olarak kullanma. Aşağıdaki kontrol listesi arayüz sözleşmesini gözden geçirmek içindir, çalışan kod üretmez.
Üç kartlık bir sözlükle başla
İlk prototipte bir özet kartı, kontrol listesi ve kaynak kartı yeterli olabilir. Özet kartının başlığı ve kısa metni, kontrol listesinin sınırlı sayıda maddesi, kaynak kartının ise açıklaması ve adresi olsun. Modelin bu sözlüğü genişletmesine izin verme. İstenen tür listede yoksa uygulama bunu desteklenmeyen çıktı olarak ele alsın. Böylece hangi ekranların oluşabileceği geliştiricinin ve kullanıcının anlayabileceği bir sınır içinde kalır.
Örneğin kaynak kartındaki adresin gerçekten izin verdiğin bağlantı biçiminde olduğunu kontrol et. Kartın üzerinde yazan metin ile gittiği hedef farklıysa bunun okur için ne anlama geldiğini düşün. Bir şema yalnızca dize uzunluğunu denetliyorsa bağlantının güvenilir olduğunu kanıtlamaz. Uygulamanın amacı gerektiriyorsa bilinen alan adları veya açık bir dış bağlantı göstergesi gibi ek kurallar tasarla.
Görünüm ile yetkiyi aynı veri alanına koyma
Bir kartın üzerinde “Gönder” yazması onun mesaj göndermeye yetkili olduğu anlamına gelmesin. Görsel öneri, uygulanacak işlem ve kullanıcının kararı ayrı katmanlar olarak kalmalı. Model yalnızca bir eylem taslağı hazırlıyorsa, arayüz bunu son hedef ve içerikle birlikte göstermeli. Kullanıcı etkileşimi olmadan veri değiştiren bir çağrıya dönüşmemesi, özellikle sonraki sürümlerde yeni araçlar eklenirken önemlidir.
Bu ayrım küçük bir alışveriş listesinde bile işe yarar. Model ürün önerisi hazırlayabilir; ama öneriyi mağazaya sipariş olarak iletmek başka bir işlemdir. Aynı kart sözlüğünün iki davranışı sessizce birleştirmesine izin verirsen arayüz, kullanıcının beklemediği bir etki üretir. Önceki çalışmanın yetkileri yeni bileşenlerin ihtiyacını otomatik karşılamaz; sınırı her yeni işlemde kontrol et.
Bozuk çıktıyı tasarımın gerçek bir durumu yap
Yalnızca iyi görünen örneğe göre ekran hazırlama. Başlıksız kart, boş madde listesi, çok uzun kelime, yanlış URL ve bilinmeyen tür için beklediğin davranışı yaz. Hata kartının boyutu bütün sayfayı sıçratmamalı; kullanıcının yazdığı soru kaybolmamalı. Klavyeyle yeni sonuca ulaşılabiliyor mu ve durum mesajı ekran okuyucuya anlaşılır biçimde iletiliyor mu, ayrıca dene.
Son aşamada bir sürüm notu tut: desteklenen türler, sınırlar ve reddedilen örnekler. Model veya istem değiştiğinde aynı örnekleri yeniden çalıştır. Amaç her çıktıyı kabul etmek değil, uygulamanın neyi kabul ettiğini tutarlı biçimde açıklayabilmektir. Bu sözleşme, etkileyici bir ilk demodan bakım yapılabilen küçük bir ürüne geçerken en kullanışlı tasarım belgelerinden biri olur.
Bileşen sözleşmesini bir tabloya dök
Üç satırlı bir tablo hazırla: özet, kontrol listesi ve kaynak kartı. Her satıra zorunlu alanları, en büyük metin boyutunu ve bozuk veride gösterilecek sonucu yaz. Sonra bu tablodan haberi olmayan birinin aynı çıktıyı üretmeye çalıştığını düşün. Tür adları veya alan anlamları belirsizse bunu modelin tahmin etmesini beklemek yerine sözleşmede düzelt. Açık bir alan adı, uzun bir isteme eklenen tekrar cümlelerinden daha faydalı olabilir.
Deneme verisindeki başlığa bir HTML etiketi koy ve ekranda metin olarak kalıp kalmadığını kontrol et. Kaynak adresine izin vermediğin bir biçim ekle; bağlantının hiç oluşturulmamasını beklediğini not et. Bu örnekleri test ortamında kullan ve gerçek kullanıcı verisiyle birleştirme. Son olarak kartın anlaşılır adını, klavye sırasını ve boş sonuç metnini gözden geçir. Sözleşme yalnızca veri doğrulamayı değil, geçerli bilginin insanlar tarafından kullanılabilmesini de kapsamalıdır.
Kaynaklar
Sıradaki adım
n8n’i yerelde öğrenmek: ücretsiz lisans, gerçek maliyetler rehberiyle devam edebilir veya bu yazının çalışma notlarını PDF olarak indirebilirsin.
İsteğe bağlı ses. Otomatik başlamaz ve dış servis yüklemez.
Sık sorulan sorular
Modelden gelen JSON güvenli sayılır mı?
JSON bir veri biçimidir, güvenlik garantisi değildir. Beklenmeyen türler, aşırı büyük alanlar veya istenmeyen bağlantılar içerebilir. Şemayla doğrulayıp yalnızca tanıdığın bileşenlere eşlemek gerekir; doğrulama hatasında görünür ve anlaşılır bir sonuç üret.
Neden modeli doğrudan HTML üretmeye bırakmıyoruz?
Bu örnekte amaç küçük ve denetlenebilir bir arayüzdür. Önceden tanımlanmış bileşenler daha dar bir davranış alanı sunar. Ham HTML gerektiren özel bir senaryo varsa ayrı tehdit değerlendirmesi ve uygun temizleme yaklaşımı gerekir.
Her yeni kart için modele yeni paket mi tanıtmalıyım?
Hayır. Uygulamanın desteklediği türleri kendi kodunda tanımla. Modelin verdiği paket veya bileşen adını indirme ya da dinamik çalıştırma. Yeni bir bileşen türü normal ürün geliştirme ve doğrulama sürecinden geçmelidir.
Geçersiz çıktıyı kullanıcıya nasıl göstermeliyim?
Teknik ayrıntıları veya gizli model bağlamını dökmek yerine isteğin bu biçimde gösterilemediğini söyle. Mümkünse önceki geçerli sonucu koru ve yeniden deneme seçeneği sun. Hatanın kullanıcıya kaydettiği veriyi kaybettirmediğini test et.
Bu mimari AI sonucunun doğru olduğunu kanıtlar mı?
Hayır. Şema doğru biçimi, kaynak incelemesi ise iddianın dayanağını ele alır. İkisini ayrı değerlendir. Görsel olarak düzgün ve doğrulanmış alanlardan oluşan bir kart yine de yanlış bilgi taşıyabilir.