Kampüste Enerji Var — Etkinlik Kelime Bulutu Posteri

30 Saniyede

Bir kurumsal sponsor üniversite etkinliklerine gidiyor; etkinlik bitiminden önce sosyal medyaya hazır, marka diline %100 uyumlu bir görsel istiyor. AI görsel üretim Türkçe karakterleri ve font tutarlılığını her zaman bozuyor; bir tasarımcıyı her etkinliğe atayıp 1 saat çalıştırmak da ölçeklemiyor. Kampüste Enerji Var bu boşluğu kapatıyor: izleyici QR’a bakıp tek kelime gönderir, operatör kalabalığın fotoğrafını yükler, sistem yüzlerin etrafına dolanan, ağırlık-sıralı, brand-locked bir 1920×1080 görsel üretir — birkaç tıkla, etkinlik bitmeden.

İş Problemi & Fırsat

Sponsor markalar etkinlikten anında paylaşılabilir görsel istiyor; çünkü içeriğin değeri “o gün, o anda” yayılmaktan geçiyor. AI görsel üretimde marka rengi, font, harf kasası ve Türkçe karakter desteği sürekli kayıyor — kurumsal kimlik kontrolünden geçmiyor. Manuel tasarım pahalı ve yavaş. Aynı anda etkinliğin asıl değeri kaçırılıyor: izleyici katılımı. Fırsat: izleyiciyi içeriğin üreticisi yapmak, sonucu brand-grade ve gerçek zamanlı üretmek. Kazanç hem sosyal etkileşim hem operasyon maliyeti.

Kullanıcı Deneyimi

Öğrenci (katılımcı) gözünden: QR’ı telefonuyla okutur; mobil form anında açılır. Üst başlıkta kendi üniversitesinin adı + etkinlik ayı/yılı yazıyor — “bu benim için” hissi. Email ve aklına gelen tek kelimeyi yazar, gönderir. ✓ “Kelimeniz alındı” kartı. 10 saniye sürer, hesap açmak/uygulama indirmek yok. Tek seferlik gönderim, telefon dolaşımına gerek yok.

Operatör (etkinlik anı) gözünden: Admin panelinden etkinlik oluşturur — Üniversite + Ay/Yıl + Etkinlik Adı. Otomatik kısa URL ve QR üretilir; QR’ı projektöre yansıtır veya basılı materyal hazırlar. Etkinlik boyunca canlı editörden her yeni kelimenin geldiğini WebSocket sayacıyla görür. Etkinlik sonunda salondan çekilen kalabalık fotoğrafını yükler; sistem yüzleri ve baş hattını otomatik tespit eder, kelimeleri yüzlerin üstüne basmayacak şekilde organik bir kompozisyona dizer. Otomatik tespitte bir kayma varsa kontur kontrol noktalarını tek tek sürükleyerek düzeltir. Tek tıkla 1920×1080 PNG indirir, sosyal medya kuyruğuna düşer.

Sahibin Amacı / Vizyon

Belirleyici karar: AI değil web-yerli kompozisyon. Üretilen her piksel kontrolünüzde olsun. Renk paleti (3 renk: beyaz, Enerjisa lime yeşili, açık camgöbeği), font (Montserrat 800/900), harf kasası (UPPERCASE), kelime boyut hiyerarşisi tek dosyada sabit; bir referans görsel (ref.jpg) ile her sprint sonu piksel düzeyinde karşılaştırma yapılır (bkz. marka-kilitli-tasarim-sistemi). İkinci belirleyici karar: etkinlik anına yetişmek. Bu yüzden tüm AI işleri (yüz/poz tespit) tarayıcıda, sunucusuz; veritabanı operasyonu hızlı, WebSocket ile anlık aktarım. Üçüncüsü: izleyici katılımı çekirdek — QR + kısa form. Daha büyük vizyon: 30. Yıl etkinlik serisi boyunca farklı üniversitelerde tekrarlanan bir formatın tek tıkla yeniden kurulabilen şablon haline gelmesi; sonraki markalarda da aynı pipeline (logolar + palet değişimi) ile çalıştırılması.

Nasıl Çalışır (sade)

1. Etkinlik kurulumu: Admin paneline girer, Üniversite + Ay/Yıl + Etkinlik Adı girer; otomatik URL slug ve QR kod üretilir.
2. Yayın: QR fiziksel veya ekranda yayınlanır. Kısa link (q.rhinorunner.net/<slug>) tek-harfli alt domain’den marka ana domain’ine yumuşak yönlendirir, böylece QR küçük basılabilir.
3. Katılım: Öğrenci QR’ı okutur, mobil formu açar, email + tek kelime girer, gönderir.
4. Toplama: Sunucu kelimeyi normalize eder (Türkçe karakter, boşluk, büyük/küçük standartlanır), aynı kelimenin varyantları tek “aggregate” altında sayılır.
5. Canlı izleme: Admin canlı editör panelinde her gelen kelimeyi WebSocket üzerinden anında görür; istediğini aktif/pasif yapar, rengini değiştirir.
6. Fotoğraf birleştirme: Etkinlik sonunda kalabalık fotoğrafı yüklenir. Tarayıcı içindeki MediaPipe yüzleri ve baş hattı konturunu çıkarır; gerekiyorsa admin elle düzeltir.
7. Yerleştirme: Algoritma kelimeleri ağırlık (frekans) sırasına göre, kontur Y üst sınırının üstünde, yüz kutularını es geçerek satır-packing ile yerleştirir.
8. Çıktı: Operatör tek tıkla 1920×1080 PNG indirir.

Teknik özet: React + Konva tuval; MediaPipe Tasks Vision tarayıcıda; Hono + Drizzle + Postgres backend; @hono/node-ws ile event-bazlı WebSocket pub/sub; Coolify Hetzner deploy.

Yeniden Kullanılabilir Yetenekler

Sinerjinin kalbi — her biri başka müşteri/sektöre taşınabilir:

• fotograf-farkinda-kelime-bulutu — Yüze, vücuda binmeyen, ağırlık dengeli kelime/etiket yerleşim motoru. Etkinlik posteri dışında çalışan tanıtım kartı, müşteri başarı hikayesi kapağı, insan-portreli sosyal kart üreten her markada hazır.
• tarayicida-yuz-poz-tespiti — Yüz ve poz tespitini tarayıcıda yapar; AI inference maliyeti yok
  • fotoğraf cihazdan çıkmaz (KVKK avantajı). Foto-yükleme, otomatik kırpma, AR efektleri, çağrı merkezi yüz blur senaryolarına taşınır.
• manuel-kontur-editoru — AI tespitinin asla %100 olmadığı gerçeği için “insan tek hamlede düzeltsin” akışı. Görsel maskeleme/kırpma, tıbbi görüntüde sınır işaretleme, doküman alan-tanımı gibi her “AI + insan onayı” akışında vazgeçilmez.
• qr-kelime-toplama-formu — Hesap açmadan, kayıt olmadan, etkinlik anında hızlı veri toplama. Konferans canlı oylama, mağaza açılışı dilek kutusu, sergi izlenim formu, akademik panel soru toplama senaryolarına direkt taşınır.
• kisa-url-redirect-host — Uzun marka domain’i + tek-harfli kısa subdomain ikilisi. QR fiziksel basımda küçük ve okunaklı; brand domain dokunulmaz. Her QR/SMS/kısa link kampanyasında uygulanır.
• canli-etkinlik-veri-yayini — Backend’e gelen veri admin paneline ve sahnedeki ekrana gerçek-zaman düşer; polling yok. Konferans oylama, IoT sensör dashboard, müzayede teklif, müşteri panik butonu gibi “an”a duyarlı her üründe altyapı.
• konva-tuval-poster-editoru — Tarayıcıda piksel-mükemmel 1920×1080 görsel editör; drag/drop, transform, anlık önizleme, tek tıkla PNG export. Sosyal kart üreten her marka, bayi self-servis poster, HR çalışan tanıtım kartı, eğitim sertifika üretici senaryolarında.
• marka-kilitli-tasarim-sistemi — Renk, font, kasa, hiyerarşi sertçe kilitli + referans görselle piksel doğrulamalı tasarım sistemi. Kurumsal kimlikten ödün vermeyen banka, enerji, telekom gibi markalarda + çok-bayili merkezi kontrol senaryolarında.
• turkce-kelime-normalizasyon — “ENERJI”, “Enerji”, “enerjı” hepsi tek aggregate’e iner. Anket, oylama, etiket bulutu, müşteri geri-bildirim grupplama, Türkçe arama autocomplete senaryolarında veri kalitesi temeli.

İş Etkisi / Sonuç

Pilot canlıda (kampusteenerjivar.rhinorunner.net). İlk fiili kampüs etkinliği öncesi son polish turları sürüyor; brand-locked çıktı kalitesi ref.jpg ile doğrulandı. Coolify multi-domain deploy (prod + kısa QR redirect host + staging) operasyona alındı. WebSocket canlı aktarım, MediaPipe tespit, manuel kontur editörü uçtan uca smoke-test geçmiş durumda. Toplam katılımcı sayısı, sosyal medya share oranı gibi etki metrikleri [?] — ilk fiili etkinlik sonrası ölçümlenecek.

Ekran görüntüleri

• — Admin etkinlik listesi (QR indir + canlı toplama durumu kartları)
• — Yeni etkinlik formu (Üniversite + Ay/Yıl combobox + Etkinlik Adı + URL slug)
• — Katılımcı public form (mobil görünüm, brand-locked tasarım, QR’dan ulaşılan kısa URL)
• — Canlı editör (fotoğraf + kontur + kelime bulutu
  • WebSocket sayacı)
• — Manuel kontur editörü (kontrol noktası sürükleme + spline eğri)
• — 1920×1080 PNG nihai çıktı
• — Alt bant (Enerjisa 30. Yıl + Bizimle Değişir logoları)

Teknik Detaylar (geliştiriciler için)

• Frontend: Vite + React 18 + TS + Tailwind. Routes: / (legacy editör), /admin (JWT korumalı liste), /admin/event/:id (canlı editör), /event/:slug (public form). Tuval Konva (PosterStage 1920×1080) ekranda CSS scale ile küçülür, export’ta 1:1 render edilir. State yönetimi zustand (src/store/poster-store.ts): editor durumu + layout sonucu + manuel override’lar burada.
• Yerleşim motoru (src/lib/layout-engine.ts): Kelimeler ağırlık sıralı, satır-packing’le paketlenir; her satır canvas genişliğine fit-checked. Y üst sınırı kontur eğrisinden okunur (kelimeler fotoğraf kenarını aşamaz). Yüz kutuları “forbidden zone”. Feather toleransı %75 (kelime kontur altına biraz inebilir, opak feather üstünde durur).
• Tespit (src/lib/mediapipe-detectors.ts, src/lib/contour-detector.ts): @mediapipe/tasks-vision FaceLandmarker + PoseLandmarker browser-side. Dense kontur ~12 kontrol noktasına resample edilir (src/lib/contour-default.ts); Catmull-Rom spline (src/lib/spline.ts) ile pürüzsüz eğri.
• Backend (server/): Hono + Drizzle ORM + Postgres. Tablolar: events (slug, posterConfig JSONB), submissions, word_aggregates (unique on event_id + normalized_word, isActive + manuel pozisyon/font/rotasyon override). Routes: auth.ts (JWT login), admin-events.ts, admin-words.ts, public-event.ts. Normalize edilmiş kelime: server/src/lib/normalize.ts.
• WebSocket: @hono/node-ws ile /ws/event/:slug. Server submission alınca abone client’lara word_update / word_patch / word_delete mesajı atar. Client src/lib/use-event-stream.ts + store reducer’ları (applyWordUpdate vb.).
• Auth: Tek-admin JWT (env’de ADMIN_EMAIL + bcrypt hash). Multi-user dışında.
• Export: Konva native toDataURL({pixelRatio: 1}) → 1920×1080 PNG. document.fonts.ready await edilir (Montserrat tam yüklenmeden export yapılırsa fallback font’a düşülür).
• Deploy (Coolify, Hetzner): 4 app — FE prod (kampusteenerjivar.rhinorunner.net), FE staging (etkinlik-foto.ahmetgo.com), API prod (api-etkinlik-foto.ahmetgo.com), API staging. Kısa QR redirect host (q.rhinorunner.net) index.html içindeki inline <script> ile location.replace ederek uzun domain’e dispatch eder — JS bundle yüklenmeden çalışır, flash yok. GitHub Actions → Coolify deploy API.
• Marka kontrolü: brief.md her sprint sonu ref.jpg ile karşılaştırma checklist’i barındırır; src/lib/design-tokens.ts tek-kaynak palette/font/case/boyut. marka-kilitli-tasarim-sistemi detayları için.

Tekrar Kullanım Notları

Strateji: Bu proje aslında bir “etkinlik anı katılım → brand-grade görsel” omurgası. Sponsor marka kelime cloud’u yerine “izleyici dilek/oy/yorum” verebilir; çıktı statik kart yerine canlı projeksiyon görseli olabilir. Aynı pipeline’ı taşıyabileceğimiz dikeyler:

• Bayi/distribütör toplantısı: “yıl hedefi” kelime bulutu, salon fotoğrafı
• Mağaza/şube açılışı: müşteri dilek QR’ı, açılış fotoğrafı kompozisyonu
• Üniversite mezuniyet: mezun dilek + kep atan kalabalık fotoğrafı
• Konferans/zirve: konuşmacı + dinleyici “en akılda kalan kelime” bulutu
• Çalışan etkinliği (kurum içi): değer kelimeleri + ekip fotoğrafı
• Spor etkinliği: taraftar slogan bulutu + tribün fotoğrafı

Markalaşma katmanı (palette, logolar, alt bant SVG) tek dosyadan değişir; pipeline aynı kalır. “Sıfır AI image cost + Türkçe karakter garanti” satış argümanı kurumsal kimlikten ödün vermeyen büyük müşterilerde fark yaratır.

Teknik: Taşırken (1) brand tokens (design-tokens.ts) tek dosyada — sponsor değişimi 5 dakika; (2) MediaPipe model dosyaları CDN’den geliyor — kurumsal kapalı ağda self-hosted mirror gerekebilir; (3) WebSocket Coolify Traefik arkasında — sticky session + timeout konfigüre edilmeli, yoksa uzun etkinliklerde reconnect fırtınası olur; (4) public form’da rate-limit/honeypot eklenmeli — UI seviyesinde tek-submit kontrolü var, backend hâlâ açık; (5) kısa QR redirect host yeni markaya taşınırken DNS A kaydı + Coolify multi-domain + index.html inline script üçü senkron güncellenmeli; (6) export’tan önce mutlaka document.fonts.ready — yoksa Montserrat fallback’e düşer ve marka tutarsızlığı oluşur.