Ekran görüntüsünü Claude, GPT-4o veya Gemini ile HTML, React veya Vue koduna çeviren self-hosted yapay zeka aracı. PicToFrontend platformunun açık kodlu çekirdeği.
Screenshot to Code (kod adı: PicToFrontend), bir tasarım ekran görüntüsünü, web sayfası URL\'ini veya yazılı bir prompt\'u doğrudan üretime hazır frontend koduna çeviren self-hosted bir araçtır. Kullanıcı kendi API anahtarını getirir; sunucu sadece bir köprü görevi görür ve anahtarı saklamaz. Streaming yanıt sayesinde kullanıcı kodu yazılırken görür; iteratif "revise" akışı ile session bağlamını koruyarak çıktı düzeltilir. MVP\'den platforma geçiş 3 sprint × 2 hafta üzerinden planlanmıştır (toplam 237 story point).
Claude 3.5 Sonnet, GPT-4o, GPT-4o Mini ve Gemini 1.5 Flash arasında geçiş — her biri farklı kalite/maliyet noktası.
Kod, karakter karakter yazılır gibi gelir; tüm yanıtın bitmesini beklemeden ön izleme yapılır.
HTML, React veya Vue çıktısı seç — sistem prompt'u seçime göre uyarlanır.
Screenshot, URL veya text prompt ile başla — sekmeli arayüz.
"Revise" ile önceki çıktının bağlamını koruyarak yeniden üretim — session bazlı bağlam.
Her model farklı kredi maliyeti (1–2–3–5); negatif bakiye yarış durumuna karşı koruma.
API anahtarları sadece AI sağlayıcıya iletilir, sunucuda saklanmaz; kullanım yerinde kontrol edilir.
Aynı görselden iki ayrı varyant üretip yan yana karşılaştır — A/B değerlendirme.
4 farklı sağlayıcıdan model — kullanıcı kendi API anahtarını getirir
| Model | Sağlayıcı | Kredi | Tahmini Maliyet | En İyi Kullanım |
|---|---|---|---|---|
| GPT-4o Mini | OpenAI | 1 | ~$0.001 | Hızlı / basit UI |
| Gemini 1.5 Flash | 2 | ~$0.007 | Düşük maliyet + iyi kalite | |
| GPT-4o | OpenAI | 3 | ~$0.024 | Dengeli üretim |
| Claude 3.5 Sonnet | Anthropic | 5 | ~$0.035 | En iyi UI sonuçları |
Maliyetler tek üretim için tahmini; gerçek tutar input/output token sayısına göre değişir.
Görselden frontend kodu çıktısına 5 adım
Kullanıcı PNG, JPG, WEBP veya GIF dosyasını yükler ya da bir web adresi girer. Backend MIME tipini, dosya boyutunu (max 20 MB) ve URL'in özel IP/localhost olmadığını (SSRF koruması) doğrular.
Açılır menüden 4 AI modeli ve HTML/React/Vue/Bootstrap çıktısı seçilir. Sistem prompt'u framework seçimine göre uyarlanır; kredi maliyeti modele göre hesaplanır.
Kullanıcı kendi OpenAI / Anthropic / Google API anahtarını girer. Anahtar format kontrolünden geçer (sk-, sk-ant-, AIza-) ve sadece o istek için sağlayıcıya iletilir; sunucuda saklanmaz.
Backend FastAPI üzerinden sağlayıcıya streaming çağrı yapar. Yanıt parça parça frontend'e text/plain olarak akar. Kullanıcı kodu yazılırken görür; istediği an iptal edebilir.
Çıktı yerleşik kod editöründe görünür (syntax highlight). "Revise" butonu ile session bağlamı korunarak yeniden üretim yapılır; son 5 versiyon arasında geçiş yapılabilir.
Üç katman: Frontend (Next.js) · Backend (FastAPI) · DevOps (Docker + Cloudflare)
App Router yapısı; sekmeli giriş (Screenshot/URL/Text), state machine (idle / sending / streaming / success / error), syntax highlight kod editörü, varyant karşılaştırma sekmesi.
Streaming endpoint'ler (/api/generate, /from-url, /from-text), Pydantic ile tipli payload, SQLite + JWT auth (python-jose + passlib), in-app rate limit (10 req/60 sn/IP), Langfuse observability.
docker-compose.yml + docker-compose.staging.yml ile çoklu ortam; Nginx reverse proxy + HTTPS; Cloudflare Pages frontend; CI: lint + test + e2e + smoke.
Backend FastAPI üzerinde yayınlanan REST + streaming yüzeyleri
MVP\'den platforma · 6 hafta + sürdürülebilir genişleme
Self-hosted ürünün üretime alımı için 8 zorunlu kontrol
Wildcard (*) yok. ALLOWED_ORIGINS env değişkeniyle yalnızca üretim domain'ine izin verilir; allow_credentials=True bilinçli origin listesiyle birlikte kullanılır.
IP başına dakika başına 10 istek; aşıldığında 429 Too Many Requests döner. Nginx katmanı ek koruma için planlandı.
URL endpoint'leri localhost, 127.x, 10.x, 172.16-31.x, 192.168.x ve 169.254.x (cloud metadata) IP'lerini bloklar; metadata.google.internal gibi bilinen hostname'ler engelli.
Sadece image/png, jpeg, webp, gif kabul edilir; max 20 MB. İçerik diske yazılmaz, doğrudan AI sağlayıcısına iletilir.
Anahtarlar sunucuda saklanmaz, sadece istek sırasında provider'a iletilir. Loglarda mask_api_key() ile sk-ant-*** şeklinde gizlenir.
Session ID'leri UUIDv4 (öngörülemez); bellek içi tutulur, max 10 tur sonra geçersiz; TTL bazlı süresi dolma planlandı.
Container'lar non-root user (appuser/nextjs); read-only root filesystem ve --cap-drop=ALL üretimde planlanan adımlar arasında.
Reverse proxy seviyesinde TLS termination, otomatik Let's Encrypt yenilemesi; HSTS max-age=31536000 ve HTTP→HTTPS 301 yönlendirme.
Self-hosted çalışır. API anahtarınız kullanım yerinden çıkmaz.
MIT lisansı · API anahtarı sunucuda saklanmaz