ChatGPT veya Gemini’den Gelen HTML Kodu Nasıl Çalıştırılır ve Sayfa Canlı Nasıl Görülür

ChatGPT ya da Gemini’den gelen HTML kodunu çalıştırmanın en hızlı yolu, ücretsiz AI Code Harvester eklentisinde Göster’e basmaktır: sayfan yeni bir sekmede canlı açılır, bilgisayar, tablet ve telefon boyutunda görmen için düğmeler vardır ve hiç dosya kaydetmen gerekmez. Eklenti olmadan kodu index.html adlı bir dosyaya kopyalar ve üstüne çift tıklarsın, aşağıda anlatıldığı gibi.

Sohbetteki kod neden henüz bir web sayfası değil

ChatGPT ya da Gemini “bir web sitesi yaptığında” aslında sana metin verir: bir HTML bloğu (sayfanın iskeleti), çoğu zaman bir CSS bloğu (renkler ve düzen) ve bir JavaScript bloğu (düğmeler ve işlemler). Bir tarif düşün. Bütün kelimeler orada ama yemeği henüz kimse pişirmedi. Web tarayıcısı, tarifi bakabileceğin bir şeye çeviren fırındır.

Bazı sohbetler kendi küçük önizlemesini gösterir ama her zaman değil, her kod türü için değil ve sohbetten çıkınca kaybolur. Sayfayı düzgünce, farklı ekran boyutlarında görmek ve sonra yine dönebilmek istiyorsan onu kendin çalıştırman gerekir.

Kolay yol: Göster’e bas

AI Code Harvester, ücretsiz bir Chrome eklentisi (tarayıcıya tek bir yeni özellik kazandıran küçük bir ek). ChatGPT ve Gemini sayfalarında durur, yanıttaki kod bloklarını bulur ve biri bir web sayfasıysa onu sana gösterir. İşte kısa bir video, sonra adımlar.

1. Eklentiyi kur. Chrome Web Store’dan ekle. Ücretsizdir ve kayıt gerektirmez.
2. Yapay zekadan bir sayfa iste. Örneğin: “Küçük bir fırın için, sipariş düğmeli tek sayfalık bir web sitesi yap. Bana index.html, style.css ve app.js ver.” Dosyalara isim vermek yardımcı olur.
3. Yanıtın bitmesini bekle. Sayfadaki küçük Code Harvester paneli bulduğu dosyaları listeler.
4. Göster’e bas. Sayfan yeni bir sekmede açılır. Paneli ekranın kenarına ince bir çekmece olarak park ettiysen Göster düğmesi çekmecenin üzerindedir.
5. Üç boyut düğmesini dene: Bilgisayar, Tablet ve Telefon. Sayfanın bilgisayar, tablet ve telefon ekranına nasıl sığdığını gösterirler.
6. Memnun değil misin? Yapay zekadan bir değişiklik iste. Yanıt verince önizleme kendiliğinden yenilenir, böylece istemeye ve bakmaya devam edebilirsin.
7. Daha fazla yer mi istiyorsun? Panelde Aç ⤢’ya bas. Workspace; Önizleme sekmesi, Yeniden yükle düğmesi ve hangi dosyaya bakacağını seçtiğin bir listeyle açılır.

Parçaları nasıl birleştirir? Bir web sayfası diğer dosyalarını genelde isimleriyle ister, örneğin style.css ve app.js. Eklenti bunları aynı yanıtta bulur ve sayfanın içine yerleştirir; sayfa, dosyalar yan yana kaydedilmiş gibi görünür ve çalışır. Yanıtta birden fazla HTML sayfası varsa açılır bir liste hangisine bakacağını seçmene izin verir.

Yapay zekanın yazdığı kodu çalıştırmak güvenli mi?

Önizleme, programcıların sandbox dediği kilitli bir odada çalışır. Sayfa kendini çizebilir ve kendi düğmelerini çalıştırabilir ama eklentiye, tarayıcına ya da verilerine erişimi yoktur. Sayfa internetten bir kitaplık yüklerse bu da yalnızca o kilitli odanın içinde olur. Yine de kod koddur; okumadığın bir sayfaya, bir yabancıdan gelen herhangi bir dosya gibi davran. Önizleme bilgisayarında oluşturulur ve bize hiçbir şey yüklenmez.

Eklenti yok mu? Elle yöntemi

Hiçbir araç olmadan da işe yarar. Sadece birkaç adım daha vardır ve her değişiklikten sonra tekrarlarsın.

1. HTML bloğunu kopyala, sohbetten.
2. Not Defteri’ne yapıştır (ya da herhangi bir düz metin düzenleyicisine) ve index.html olarak kaydet. Kaydetme penceresinde “Tüm dosyalar”ı seç ki index.html.txt olarak bitmesin.
3. CSS ve JavaScript bloklarıyla da aynısını yap, HTML’in istediği isimlerle (örneğin style.css ve app.js), aynı klasörde.
4. index.html’e çift tıkla. Tarayıcında gerçek bir sayfa olarak açılır.
5. Bir şey mi değiştirdin? Yeni kodu eski dosyanın üstüne kaydet ve tarayıcıda yenile’ye bas.

Her zamanki tökezleme noktası, çıplak görünen ya da düğmeleri hiçbir şey yapmayan bir sayfadır. Çoğu zaman bir dosya adı HTML’in istediğiyle uyuşmaz. Eklentinin önizlemesinde isimler farklıysa doğru türdeki bir sonraki kullanılmamış dosyayı alır, yani bunu hoş görür. Elle yaparken adı kendin düzeltmen gerekir.

Önizleme yanlış görününce

• Boş ya da yarım görünüyor. Son yanıt kodun yalnızca bir kısmını içeriyor olabilir, örneğin tek bir değişen dosya. Yapay zekadan “eksiksiz dosyaları bana yeniden ver” demesini iste.
• Resimler eksik. Bir sohbet resim dosyası gönderemez. Web adreslerinden resimler kullan ya da kendi resimlerini sonra ekle.
• Düğmeler hiçbir şey yapmıyor. Panelin listesinde bir JavaScript dosyası ara. Yapay zeka onu başka bir yanıta koyduysa bütün dosyaları tek yanıtta iste.
• Bilgisayarda iyi, telefonda bozuk. Telefon’a bas, neyin yanlış olduğuna bak ve yapay zekadan “küçük ekranlara uyarla” demesini iste.
• Giriş ya da veritabanı gerektiren sayfalar. Burada yalnızca nasıl göründüklerini görürsün, nasıl davrandıklarını değil. Gerçek bir sunucuya ihtiyaçları var.

Yapay zekadan iyi önizlenen sayfalar iste

• Bütün dosyaları tek yanıtta iste, her bloğun üstüne dosya adı yazılı olsun.
• Basit bir sayfa için tek dosya iste: “CSS ve JavaScript’i HTML’in içine koy”.
• Kim için olduğunu söyle: “telefonda güzel görünmeli”.
• Tek seferde tek şeyi değiştir. Neyin ters gittiğini görmek daha kolay olur.

Sayfa doğru göründüğünde sıradaki soru, onu başkalarının görmesi için nasıl yayına alacağındır. Yapay zekanın yaptığı web sayfası nerede yayınlanır rehberimiz ücretsiz ve ücretli seçenekleri sade bir dille anlatır. AI Code Harvester önizlemeden fazlasını yapar: her şeyi ZIP olarak indirebilir (istersen kendi klasörlerinle), tek bir sayfa dışa aktarabilir ya da sohbeti başka bir yapay zekaya taşıyabilir. ChatGPT ve Gemini sohbetlerini okur ve bilgisayarında çalışır. Chrome Web Store’dan ekle.

Başlamadan önce bilmekte fayda var

Sıkça Sorulan Sorular