Khoa: Sunucunun Yüzü — 3D Sunucu Panosunu Yapay Zeka ile Yaptım | FB Server #4

← Kurs

Ders 5 / 5

Khoa: Sunucunun Yüzü — 3D Sunucu Panosunu Yapay Zeka ile Yaptım | FB Server #4

18:30 · Intermediate · TR

←

Bu ders hakkında

FB Server kursunun bu dersinde sunucumuza bir yüz veriyoruz: Khoa. Işıktan parçacıklarla oluşan 3D bir figür; sunucuyu izliyor, sana dönüp bakıyor, Türkçe ve İngilizce konuşuyor, yedekleme, saldırı ve aşırı ısınma gibi 9 durumda rengi ve sesi değişiyor. Yanında Komuta Haritası: yapay zeka ekibinin kimlik kartları.

Hepsini kod yazmadan, sadece Claude ile konuşarak yaptık. Aşağıda fikirden canlı siteye kadar her adımı, yaşadığımız sorunlarla birlikte anlatıyorum.

▶ Canlı demo bu sayfada: Khoa’yı kendin dene: 9 durum, Komuta Haritası ve ajanların kimlik kartları. Panoya git ↓

Adım adım neler yaptık

  1. Fikir: Serra’ya bir yüz. Sunucumuzun sesi Serra’ya, bizi gerçek bir insan gibi takip eden dijital bir yüz istedim. ChatGPT ile Serra’nın portresini hazırladık, Meshy ve Tripo ile 3D kafaya çevirmeyi denedik. Modeller güzeldi ama indirmek ücretliydi ve dönen bir fotoğraf gibi durdu.
  2. Yön değişikliği: Sunucunun Yüzü. Gerçekçi kafa yerine özelliksiz bir insansı (humanoid) beden seçtik, sonra kasları görünen bir anatomi modeline (écorché) geçtik. Ücretsiz, CC BY lisanslı bir model kullandık ve yazarını sayfada gösterdik. Figür artık Serra değil, Sunucunun Yüzü oldu; bir gün sonra adını Khoa koyduk.
    Sunucunun Yüzü: ilk parçacık beden denemesi
  3. Parçacık beden. Claude, 3D modelin yüzeyinden binlerce nokta alan küçük bir araç yazdı ve bunları tek bir HTML sayfasına gömdü. three.js ile parıldayan (bloom) bir beden, yaklaşık 7 saniyede bir buluttan oluşan giriş animasyonu ve buna eşlik eden bir “oluşma” sesi yaptık. Baş ve gözler fareyi takip ediyor.
    Khoa: ışıktan parçacıklarla oluşan 3D beden ve pano
  4. Sunucuya kurulum. Khoa’yı fbserver’da, klasik konsol panosunun yanına ikinci bir panel olarak kurduk ve aralarında geçiş için bir PANELLER anahtarı ekledik. Eski dizüstünün ekranı tam kalite 3D’de kilitlendi; çözüm olarak parçacıkları azaltan bir hafif mod yaptık. HTTPS kurup web kamerasıyla yüz takibini de çalıştırdık.
    Khoa, fbserver üzerindeki sunucu panosunda
  5. Pano ve durumlar. Figürün çevresine sistem yükü, depolama, servisler, ağ, erişim ve son olaylar panellerini ekledik. Sonra 9 durum tasarladık: normal, yedekleme, saldırı, aşırı ısınma, bellek, disk, yüksek yük, güncelleme ve servis çöktü. Her durumda beden renk değiştiriyor, büyük bir başlık ve canlı gösterge çıkıyor, kısa bir ses çalıyor.
    Khoa saldırı durumunda: kırmızı beden ve tehdit göstergesi
  6. Khoa konuşuyor. Piper ile internetsiz çalışan bir ses kurduk. Sunucuda khoa say komutunu yazınca Khoa o cümleyi sesli okuyor ve istersen durumu da değiştiriyor. Konuşurken kamera yaklaşıyor, altyazılar kelime kelime beliriyor ve kolları yavaşça jest yapıyor.
    Khoa korkunç modda konuşurken
  7. Komuta Haritası. İkinci sayfada Khoa, yapay zeka ekibinin 8 üyesini ve sunucudaki uygulamaları görüyor. Bir ajan konuşunca Khoa ona dönüyor, kolunu kaldırıyor ve kimlik kartı açılıyor.
    Komuta Haritası: konuşan ajanın kimlik kartı açık
  8. GitHub. Bütün dosyaları herkes kendi panosunu yapabilsin diye ücretsiz olarak GitHub’a koyduk ve sürümleri sakladık (v1.1, v1.2).
  9. Herkese açık site: khoa.fbserver.net. Hostinger’da bir alt alan adı açtık, WordPress kurduk ve her değişiklikten önce WPvivid ile yedek aldık. Önce taslağı onayladık, sonra Claude, Khoa’yı iki Elementor bileşeni olan bir WordPress eklentisine (FB Khoa) çevirdi. Sitede gerçek sunucu verisi yok, sadece demo veri var. Varsayılan dil İngilizce; ziyaretçi Türkçeyi seçebiliyor.
    khoa.fbserver.net ana sayfası
  10. Türkçe ses. Claude 6 farklı Türkçe ses örneği hazırladı; aralarından “sunucunun sesi” dediğimiz daha yavaş, daha kalın ve hafif metalik yankılı sesi seçtik. Bütün Türkçe cümleler bu sesle yeniden kaydedildi.
  11. Sorunlar ve çözümler. İngilizce ana sayfa bir dakikalığına Türkçe göründü: iki sayfa aynı editörden kaydedilmişti. Sayfayı eski sürümden geri yükledik ve “her sayfa kendi editöründe” kuralını koyduk. Ajan kartlarında beyaz kenarlar vardı; kenarları temizleyip köşeleri yuvarladık. Panodaki bütün yazıları, tarihleri ve durum satırını Türkçeye çevirdik.
  12. Sonuç ve master prompt. Web sürümünü GitHub’a v1.3 olarak yükledik ve Claude her dosyanın birebir aynı olduğunu kontrol etti. Son olarak bu projeyi baştan yapmak isteyenler için bir master prompt yazdık; Promptlar sekmesinde Türkçe ve İngilizce olarak duruyor.
    Web sitesindeki Komuta Haritası ve ajan düğmeleri

Yol boyunca Claude her adımdan sonra kendi işini test etti: sayfayı açtı, hataları kontrol etti, masaüstü ve telefon boyutunda ekran görüntüsü aldı. Canlı demo, kaynak kod ve WordPress eklentisi Dosyalar sekmesinde ücretsiz.

Bu dersin videosu yakında yayında. Tarih değişirse bu sayfada güncellenecek.

Başlamadan önce

  • Claude hesabı (Claude masaüstü uygulaması önerilir)
  • Kod bilgisi gerekmez
  • İsteğe bağlı: eski bir bilgisayar ya da Ubuntu sunucu (yoksa demo veriyle çalışır)
  • İsteğe bağlı: WordPress sitesi (eklenti için)

Bu projeden

Bu ders, Face of the Server (Khoa) geliştirilirken ortaya çıktı.

Projeyi görüntüle