Gemini ile Kendi Kod Yazan Agent’larını Yarat: UI/UX Uzmanından Frontend Sihirbazına! 🧙♂️✨
Merhaba sevgili kod meraklıları! Yapay zeka dünyası hızla gelişiyor ve biz de bu gelişmelere ayak uydurarak kendi yapay zeka ajanlarımızı (agent) oluşturmanın heyecanını yaşıyoruz. Bu yazımızda, Google’ın güçlü yapay zeka modeli Gemini’yi kullanarak, Python ile nasıl frontend kodlama yapan ajanlar yaratabileceğimizi adım adım inceleyeceğiz.
Neden Kendi Agent’larını Oluşturalım?
Düşünsenize, bir fikriniz var ve bu fikri hayata geçirmek için bir frontend arayüzüne ihtiyacınız var. Ancak kodlama bilginiz sınırlı veya zamanınız kısıtlı. İşte tam bu noktada kendi yapay zeka ajanlarınız devreye giriyor!
Bu ajanlar:
* Zamandan tasarruf etmenizi sağlar: Tekrarlayan kodlama görevlerini otomatikleştirir.
* Verimliliği artırır: İnsan hatalarını en aza indirerek daha hızlı sonuçlar elde etmenizi sağlar.
* Yaratıcılığınızı destekler: Teknik detaylarla uğraşmak yerine, fikirlerinize odaklanmanıza olanak tanır.
* Öğrenmeyi teşvik eder: Yapay zeka ile etkileşimde bulunarak yeni şeyler öğrenmenizi sağlar.
Örnek Uygulama: UI/UX Uzmanı ve Frontend Uzmanı İşbirliği
Şimdi, hayalimizdeki uygulamayı inşa etmek için iki farklı ajan tasarlayalım:
1. UI/UX Uzmanı Agent: Bu ajan, kullanıcının girdiği prompt’u analiz ederek, en iyi kullanıcı deneyimini sağlayacak bir arayüz tasarımı oluşturur. Hangi renklerin kullanılacağına, hangi öğelerin nereye yerleştirileceğine ve genel tasarım prensiplerine karar verir.
2. Frontend Uzmanı Agent: Bu ajan ise, UI/UX uzmanının oluşturduğu tasarıma göre frontend kodunu (HTML, CSS, JavaScript) yazar. Tasarımı birebir uygulayarak, işlevsel ve estetik bir arayüz oluşturur.
Adım Adım Uygulama:
1. Ortamı Hazırlama:
* Öncelikle Python’ın kurulu olduğundan emin olun.
* Gerekli kütüphaneleri yükleyin:
“`bash
pip install google-generativeai
“`
* Google AI Studio’dan bir API anahtarı alın ve güvenli bir şekilde saklayın.
2. UI/UX Uzmanı Agent’ı Oluşturma:
İlk ajanı sadece “tasarım yap” demekten öteye taşıyalım. Ona belirli bir persona (kimlik) ve çıktı formatı verelim. Böylece Frontend ajanı, gelen veriyi daha kolay işleyebilir.
def ui_ux_agent(user_input, model):
"""
Kullanıcı isteğini analiz eder ve detaylı bir tasarım spesifikasyonu oluşturur.
"""
print(f"🎨 UI/UX Ajanı çalışıyor: '{user_input}' için tasarım yapılıyor...")
prompt = f"""
Sen dünya çapında ödüllü bir UI/UX Tasarımcısısın.
Görevin: Aşağıdaki kullanıcı isteğini analiz etmek ve bir Frontend geliştiricinin
doğrudan kodlayabileceği kadar net bir tasarım belgesi oluşturmaktır.
Kullanıcı İsteği: "{user_input}"
Lütfen çıktıyı şu başlıklar altında maddeler halinde ver:
1. **Tasarım Konsepti ve Atmosfer:** (Örn: Minimalist, Kurumsal, Eğlenceli)
2. **Renk Paleti:** (En az 3 renk ve HEX kodları: #FFFFFF gibi)
3. **Tipografi:** (Başlık ve metin font önerileri)
4. **Bileşen Yerleşimi (Layout):** Header, Main, Footer detayları.
5. **Kullanıcı Deneyimi (UX) Akışı:** Kullanıcı sayfada nasıl gezinecek?
Çıktın sadece tasarım detaylarını içermeli, kod içermemeli.
"""
try:
response = model.generate_content(prompt)
print("✅ Tasarım tamamlandı.")
return response.text
except Exception as e:
return f"Hata oluştu: {e}"3. Frontend Uzmanı Agent
Frontend ajanını da geliştirelim. Ona, UI/UX ajanından gelen metni tek bir HTML dosyası (içinde CSS ve JS barındıran) olarak vermesini söyleyelim. Ayrıca Markdown formatlarını temizlemesi için yönlendirelim.
def frontend_agent(design_spec, model):
"""
Tasarım spesifikasyonunu alır ve çalışan HTML/CSS/JS koduna dönüştürür.
"""
print("💻 Frontend Ajanı çalışıyor: Kod yazılıyor...")
prompt = f"""
Sen kıdemli bir Frontend Geliştiricisisin.
Görevin: Aşağıdaki tasarım spesifikasyonunu birebir uygulayan tek bir HTML dosyası yazmak.
Tasarım Spesifikasyonu:
{design_spec}
Kurallar:
1. Kod, HTML, CSS (satır içi veya <style>) ve JavaScript (<script>) içermelidir.
2. Modern, responsive (mobil uyumlu) ve şık bir tasarım (CSS Flexbox/Grid) kullan.
3. Tasarım spesifikasyonundaki renkleri ve yapıyı KESİNLİKLE uygula.
4. Çıktı olarak SADECE HTML kodunu ver. Açıklama metni yazma.
5. Kodun en başına `<!DOCTYPE html>` eklemeyi unutma.
"""
try:
response = model.generate_content(prompt)
print("✅ Kodlama tamamlandı.")
return response.text
except Exception as e:
return f"Hata oluştu: {e}"3. Tam ve Çalışan Program Kodu
Aşağıdaki kod bloğu, tüm süreci birleştirir. API anahtarını girdikten sonra kodu çalıştırdığında, senin için uygulama.html adında bir dosya oluşturacaktır. Bu dosyayı tarayıcıda açarak sonucu görebilirsin.
Gereksinim: pip install google-generativeai
import google.generativeai as genai
import os
# ==========================================
# AYARLAR
# ==========================================
# Lütfen buraya kendi Google AI Studio API anahtarınızı yapıştırın
API_KEY = "BURAYA_API_ANAHTARINIZI_YAZIN"
# Kullanıcının hayalindeki uygulama
KULLANICI_ISTEGI = "Karanlık mod temalı, yapılacaklar listesi (Todo App). Görev ekleme, silme ve üzerini çizme özelliği olsun. Turuncu ve Gri tonları kullanılsın."
# ==========================================
# AJAN FONKSİYONLARI
# ==========================================
def setup_gemini():
"""Gemini modelini yapılandırır."""
if API_KEY == "BURAYA_API_ANAHTARINIZI_YAZIN":
raise ValueError("Lütfen geçerli bir API anahtarı girin!")
genai.configure(api_key=API_KEY)
# 'gemini-pro' veya daha yeni bir model kullanabilirsiniz
return genai.GenerativeModel('gemini-1.5-flash')
def run_ui_ux_agent(model, user_request):
"""Tasarımcı Ajan"""
print("\n--- 1. ADIM: UI/UX Ajanı Sahneye Çıkıyor ---")
prompt = f"""
Sen uzman bir UI/UX tasarımcısısın.
Kullanıcı İsteği: "{user_request}"
Bu istek için profesyonel bir tasarım raporu hazırla.
Şunları içersin: Renk paleti (Hex kodları), Font stili, Yerleşim planı ve Buton tasarımları.
"""
response = model.generate_content(prompt)
return response.text
def run_frontend_agent(model, design_spec):
"""Geliştirici Ajan"""
print("\n--- 2. ADIM: Frontend Ajanı Kodluyor ---")
prompt = f"""
Sen uzman bir Frontend geliştiricisisin.
Aşağıdaki tasarım yönergelerini kullanarak TEK BİR HTML dosyası oluştur.
Bu dosya CSS (Modern, estetik) ve JavaScript (İşlevsel) kodlarını içinde barındırmalıdır.
Tasarım Yönergesi:
{design_spec}
ÖNEMLİ:
- Sadece kod bloğunu ver.
- Kodun başına veya sonuna açıklama metni ekleme.
- Markdown işaretlerini (```html gibi) temizle.
"""
response = model.generate_content(prompt)
# Gemini bazen markdown formatında ```html ... ``` döndürür, bunları temizleyelim
clean_code = response.text.replace("```html", "").replace("```", "").strip()
return clean_code
def save_to_file(code, filename="uygulama.html"):
"""Sonucu dosyaya kaydeder"""
print(f"\n--- 3. ADIM: Uygulama '{filename}' olarak kaydediliyor ---")
with open(filename, "w", encoding="utf-8") as f:
f.write(code)
print(f"Başarılı! '{filename}' dosyasını tarayıcınızda açabilirsiniz.")
# ==========================================
# ANA PROGRAM AKIŞI
# ==========================================
if __name__ == "__main__":
try:
# 1. Modeli hazırla
model = setup_gemini()
# 2. UI/UX Ajanını çalıştır
tasarim_plani = run_ui_ux_agent(model, KULLANICI_ISTEGI)
print(f"\n[UI/UX Raporu Özeti]:\n{tasarim_plani[:200]}...\n(Devamı frontend ajanına iletildi)")
# 3. Frontend Ajanını çalıştır
final_kod = run_frontend_agent(model, tasarim_plani)
# 4. Sonucu kaydet
save_to_file(final_kod)
except Exception as e:
print(f"\nBir hata oluştu: {e}")4. Sonuçları Değerlendirme ve İyileştirme:
* Gemini’nin oluşturduğu kodları inceleyin ve gerekli gördüğünüz yerlerde düzenlemeler yapın.
* Daha iyi sonuçlar elde etmek için prompt’ları daha detaylı ve spesifik hale getirin.
* Farklı Gemini modellerini deneyerek (örneğin, `gemini-pro-vision`), daha gelişmiş özelliklerden yararlanın.
İpuçları ve Püf Noktaları:
* Prompt Mühendisliği: İyi bir prompt, iyi bir sonuç demektir. Ne kadar detaylı ve açıklayıcı olursanız, Gemini o kadar iyi bir yanıt verecektir.
* Iteratif Geliştirme: İlk denemede mükemmel sonuçlar beklemeyin. Sürekli deneyerek, prompt’ları ve kodları iyileştirin.
* Dokümantasyon: Gemini’nin dokümantasyonunu inceleyerek, modelin yeteneklerini daha iyi anlayın.
* Topluluk: Diğer geliştiricilerle etkileşimde bulunun, fikir alışverişi yapın ve sorunlarınıza çözüm arayın.
Sonuç:
Gemini ile kendi kod yazan agent’larınızı oluşturmak, yapay zeka dünyasına heyecan verici bir adım atmanızı sağlar. Bu yazıda, temel bir örnek üzerinden nasıl başlayabileceğinizi gösterdik. Unutmayın, pratik yaparak ve sürekli öğrenerek bu alanda uzmanlaşabilirsiniz.
Hadi, kendi agent’larınızı yaratmaya başlayın ve hayallerinizdeki uygulamaları hayata geçirin! 😊
