Vue, Laravel ve Yapay Zeka ile Tarayıcı Tabanlı Piksel Sanatı ve Animasyon Editörü Geliştirdim

Son birkaç aydır Pixanima üzerinde çalışıyorum. Bu, tarayıcıda çalışan bir pixel-art ve animasyon editörü. İçine opsiyonel olarak entegre bir AI asistanı da var. Yayına girdi ve şimdi teknikal açıdan ilginç bulduğum bazı noktaları paylaşmak istiyorum: genel bir görüntü modelinin temiz pixel art çıkartması, atomik bir kredi sistemi, animasyon için AI ara geçişleri ve tüm iş modelinin neden tek bir mimari gerçeğe dayandığı.

Ne Yaptık?

Katmanlar, gruplar ve efektler ile pixel art çizin, bunu bir çerçeve zaman çizelgesinde animasyonlayın ve GIF / sprite sheet / PNG olarak dışa aktarın — tümü istemci tarafında, kurulum gerektirmeden. Üstüne, bir AI asistanı metin istemlerini sprite’lara, kesintisiz döşemelere ve paletlere dönüştürüyor, karakterlerin pozlarını değiştiriyor ve ara animasyon çerçevelerini üretiyor.

Frontend Vue 3 ile HTML canvas kullanarak inşa edildi; backend ise Laravel 12 (PHP 8.4). İşte öğrendiklerim.

Her şey tarayıcıda çalışıyor — ve bu, iş modelini belirledi

Tüm editör istemci tarafında çalışıyor. Projeler IndexedDB içinde yaşıyor; hiçbir şey yüklenecek. Bu, gizlilik ve hız açısından harika, ancak birçok insanın atladığı bir sonucu var: istemci tarafında bir özelliği anlamlı şekilde kilitleyemezsiniz. Çizim, katmanları ve dışa aktarma, kullanıcının tarayıcısında çalışıyorsa, bunların etrafında bir “profesyonel” ücretli alan oluşturmak hem zor hem de fiyat duyarlı hobi topluluğuna karşı düşmanca.

Bu nedenle tersine döndürdüm: editör tamamen ücretsiz, sonsuza dek. Tek ücretli şey AI — çünkü AI’nın gerçek bir marjinal maliyeti var ve bu arka uç gerektiriyor (ki bu aynı zamanda parayla çalışan kodu koruyor).

Genel bir modelin temiz pixel art çıkartması

Naif yaklaşım — “pixel art, 16 renklerden oluşan” bir difüzyon modeline istem yapıldığında, size pixel-art benzeri bir karışım veriyor: kenarları geçişli, yüzlerce renk, gerçek bir grid yok. Gerçek sprite olarak pek işe yaramaz.

Çözüm bir post-processing pipeline kullanmak. Model sadece ham giriş üretir; “pixel art” PHP’nin GD kütüphanesiyle deterministik bir şekilde daha sonra üretilir:

1. Prompt'tan normal bir resim oluştur (flux-schnell on Replicate)
2. Hedef grid'e alan daraltma (örneğin 32×32 hücre)
3. N renge kuantize et (imagetruecolortopalette) + opsiyonel sıralı dithering
4. Arka planda toleranslı bir köşe flood-fill ile anahtarlama → şeffaflık

Bu, “AI karışımı” ile gerçekten bir tuvale bırakıp üzerinde çalışabileceğiniz bir şey arasındaki farktır. Model, bir arayüzün arkasında değiştirilebilir, böylece aynı pipeline sprite’lar, döşemeler ve palet çıkarımı için de geçerlidir.

AI ara geçişi: animasyon hilesi

En çok mutlu olduğum özellik AI ara geçiş — ona iki anahtar çerçeve verirseniz, bunlar arasındaki çerçeveleri üretir.

Arka planda Google’ın FILM çerçeve enterpolasyon modelini iki çerçeve PNG’si üzerinde çalıştırıyor, bir mp4 alıyor ve ardından ffmpeg bunu sabit görüntülere ayırıyor. Her iç çerçeve aynı pixelizasyon işlemiyle geçiyor (videonun siyah arka planı anahtar olarak alınıyor) ve sonuçlar zaman çizelgesine gerçek, düzenlenebilir çerçeveler olarak ekleniyor. Bir animasyon aracı için, bu “sadece bir sprite editörü” olmanın üzerinde gerçek bir fark yaratıyor.

Kredi sistemi: ücret al → üret → başarısız olursa otomatik geri ödeme

AI her çağrıda para alıyor, bu yüzden kredilerin su sızdırmaz olması gerekiyor. İki kural: asla iki kez ücret alma ve asla bir başarısızlık için ücret alma.

Defter (credit_transactions) gerçeğin kaynağıdır; kullanıcı satırındaki bakiye sadece eşzamanlı bir önbellektir. Her ücret, kilitlenmiş, idempotent bir işlemdir:

DB::transaction(function (use ($userId, $cost, $reference) {
        $user = User::whereKey($userId)->lockForUpdate()->first();
        if ($user->credit_balance  $cost) {
            throw new InsufficientCreditsException(); // → HTTP 402
        }
        // $reference üzerinde idempotent: aynı referansa sahip bir tekrar denenen webhook ya da AI çağrısı
        // iki kez ücretlendirmez
        CreditTransaction::firstOrCreate(
            ['reference' => $reference],
            ['user_id' => $userId, 'amount' => -$cost, 'type' => 'spend'],
        );
        // ... önbellek bakiyesini güncelle
    });

AI uç noktası ücret al → üret → başarısız olduğunda otomatik geri ödeme yapar. Eğer Replicate hata verirse veya zaman aşımına uğrarsa, krediler doğrudan bakiyeye geri döner. Aynı idempotentlik anahtarı, bir hesabı iki kez kredi verme olasılığını koruyan Stripe webhook’unu verir.

Bunu test etmek için yazdığım testler gerçek bir hatayı buldu: credit_balance kitlesel atama yapılamaz (bu doğrudur, güvenlik için), bu nedenle bir update([...]) işlemi sessizce hiçbir şey yapmıyordu. Testler > sezgiler.

Para kazanma, açıkça ifade edildi

• Editör: sonsuza dek ücretsiz. Çizim/animasyon/dışa aktarma tamamen istemci tarafında; bunları kilitlemek gerektiği gibi değil.
• AI: ön ödemeli krediler, ham model maliyetinin üzerine marj eklenmiş, gerçek bir marj bırakmak için (ödeme ücretleri, deneme kredileri, geri ödemeler, altyapı, vergiler ve zaman ücretsiz değildir). Yeni hesaplar, denemeleri için ücretsiz krediler alır.

Geliştiriciler bazen marjdan çekinir, ancak bu sadece açgözlülük değil — bu, ücretsiz editörü sürdürülebilir kılan tek şey. “Kazandıkları için öderler” baskısı, özellikleri kısıtlama değil, yumuşak ticari kullanım notu ile yakalanıyor.

Teknoloji Yığını, Kısaca

• Frontend: Vue 3 SPA, canvas renderizasyonu, IndexedDB kalıcılığı, Vite.
• Backend: Laravel 12 / PHP 8.4, Sanctum (Bearer token), Socialite (Google/GitHub).
• AI: Replicate (FLUX üreteci, FLUX Kontext için poz düzenleme, FILM interpolasyon için), GD + ffmpeg pixelizasyon/animasyon pipeline’ı için.
• Ödemeler: Stripe Checkout + idempotent webhook’lar.
• Altyapı: Tek bir Hetzner kutusundaki Docker yığınları, sistem nginx’i arkasında + Cloudflare.

Deneyin / Eleştirin

Canlı ve ücretsiz pixanima.app üzerinde — kurulum yok, projeler tarayıcınızda kalıyor. Özellikle editör hissi ve AI özellikleri hakkında geri bildirim almak isterim. Şu anki aracınıza karşı bunu kullanmanızı sağlayacak ne olurdu?

Herhangi bir bölüm hakkında daha derin bir şekilde tartışmaya açığım — canvas renderizasyonu, pixelizasyon matematiği veya “ücretsiz araç + ücretli AI” modeli.