Pixel Forge

Fotoğrafını yükle, çeşitli ayarlarla (piksel boyutu, renk paleti, dithering, parlaklık/kontrast/doygunluk, ızgara) piksel sanatına dönüştür ve PNG olarak indir.

• Frontend: saf HTML + CSS + JavaScript (build adımı yok)
• Görüntü işleme: Python + OpenCV (opencv-python-headless), Vercel Python serverless fonksiyonu olarak /api/pixelate altında çalışır

Tüm görüntü işleme sunucu tarafında (OpenCV) yapılır; tarayıcı sadece görseli küçültüp gönderir ve sonucu gösterir.

Proje yapısı

pixel-forge/
├── index.html          # sayfa (cihaz çerçeveli önizleme + kontrol paneli)
├── style.css            # tasarım
├── script.js             # yükleme, debounce, API çağrısı, indirme
├── api/
│   └── index.py          # FastAPI + OpenCV işleme fonksiyonu
├── requirements.txt       # Python bağımlılıkları
└── vercel.json            # fonksiyon zaman aşımı ayarı

Yerel geliştirme

Vercel CLI, hem statik dosyaları hem de Python fonksiyonunu birlikte çalıştırabilir:

npm i -g vercel
cd pixel-forge
vercel dev

Terminalde verilen adresi (genelde http://localhost:3000) tarayıcıda aç.

Not: vercel dev ilk çalıştırmada Python bağımlılıklarını (requirements.txt) otomatik kurar; bu biraz zaman alabilir.

GitHub'a yükleme

cd pixel-forge
git init
git add .
git commit -m "İlk sürüm: Pixel Forge"
git branch -M main
git remote add origin https://github.com/KULLANICI_ADIN/pixel-forge.git
git push -u origin main

Vercel'de canlıya alma

Seçenek A — Vercel Dashboard üzerinden (önerilen):

1. https://vercel.com adresine gir, GitHub hesabınla giriş yap
2. "Add New Project" → GitHub reponu (pixel-forge) seç
3. Framework olarak "Other" otomatik algılanır, ayar değiştirmene gerek yok
4. "Deploy" butonuna bas

Seçenek B — CLI ile:

cd pixel-forge
vercel        # önce preview deploy
vercel --prod # canlıya al

Deploy tamamlandığında Vercel sana https://pixel-forge-xxxx.vercel.app gibi bir canlı adres verecek.

Notlar / sınırlamalar

• Yüklenen görsel tarayıcıda en fazla 1024px kenara sıkıştırılıp sunucuya gönderilir (hız ve Vercel'in istek boyutu sınırı için).
• Her ayar değişikliğinde (slider vb.) 300ms bekleyip tek istek gönderilir (debounce) — sunucuyu gereksiz yormamak için.
• Vercel Hobby planında fonksiyon çalışma süresi sınırlıdır; vercel.json içinde maxDuration: 30 tanımlı, ihtiyaca göre artırılabilir (Pro planda 60 saniyeye kadar).
• Dithering (Floyd–Steinberg) küçük mozaik çözünürlüğünde çalıştığı için hızlıdır, ama çok küçük piksel boyutu (2-3px) seçildiğinde işlem biraz daha uzun sürebilir.