Yapay Zeka Destekli Otomatik Mockup ve Görsel Entegrasyon Sistemi
Mockup Studio, e-ticaret, Print-on-Demand (POD) ve dijital pazarlama sektörlerindeki seri görsel üretim darboğazını çözmek amacıyla tasarlanmış, yapay zeka entegrasyonuna hazır, otonom bir mockup oluşturma ve şablon kalibrasyon sistemidir.
Geleneksel manuel grafik tasarım süreçlerinin getirdiği zaman kaybını ve insan kaynaklı hataları elimine eden sistem; tasarımları hedef mockup görsellerine piksel hassasiyetinde, perspektif ve maskeleme kurallarına uygun olarak otomatik yerleştirir. Electron ve modern web teknolojileri üzerinde inşa edilen bu mimari, binlerce ürün görselini dakikalar içinde yüksek kalitede (high-fidelity) render edebilecek kapasitede kurgulanmıştır.
Endüstriyel ölçekteki e-ticaret operasyonlarında ürün varyasyonlarının görselleştirilmesi ciddi bir maliyet ve zaman kalemidir. Mockup Studio, bu operasyonel yükü tam otomatik bir pipeline'a dönüştürür.
- Otonom Görsel Entegrasyonu (LLM & CV Hazır): Gelişmiş dil modelleri (LLM) ve bilgisayarlı görü (Computer Vision) entegrasyonu ile şablonların hedef görsele mükemmel oturtulması hedeflenmiştir. Tasarımlar, kumaş kıvrımları, ışık ve perspektif dikkate alınarak görsele entegre edilir, böylece tasarımlar görsele tam olarak oturur.
- Görsel Kalitesi ve Piksel Hassasiyeti: Çıktı kalitesinden ödün verilmeden, e-ticaret standartlarına (yüksek çözünürlük, doğru renk uzayı, pürüzsüz kenarlar) uygun seri üretim sağlanır. Kusursuz görsel kalitesi ile son kullanıcının satın alma kararını doğrudan pozitif etkiler.
Sistem, platform bağımsız çalışabilmesi ve yüksek performanslı render alabilmesi için modern ve kurumsal standartlara uygun teknolojilerle geliştirilmiştir.
| Kategori | Teknoloji | Kullanım Amacı |
|---|---|---|
| Frontend Mimari | React.js (v19), Vite | Dinamik ve yüksek performanslı arayüz yönetimi, state senkronizasyonu |
| Masaüstü Ortamı | Electron.js | Çapraz platform masaüstü uygulama kabuğu ve donanım/işletim sistemi seviyesinde erişim |
| Görsel İşleme & Canvas | Konva.js, React-Konva, Sharp | Katmanlı görsel renderlama, maskeleme, piksel manipülasyonu ve yüksek hızlı arka plan imaj işleme |
| Veritabanı & Depolama | Better-SQLite3 | Performanslı, sunucusuz yerel veritabanı yönetimi ve konfigürasyon/metadata saklama |
| State Management | Zustand | Uygulama içi global durumların (şablonlar, görseller, varyasyonlar) hafif ve reaktif yönetimi |
| Veri İşleme | XLSX | Toplu ürün verilerinin, Excel formatlarında yüksek veri bütünlüğü ile içe/dışa aktarılması |
Sistem, asenkron bir veri akışı ve katmanlı bir işleme mimarisi üzerine kurgulanmıştır:
-
Veri İçe Aktarımı ve Parse Edilmesi: Kullanıcı veya dış bir sistem tarafından tasarımlar (PNG/JPG) ve ürün bilgileri (Excel/JSON) sisteme toplu olarak aktarılır.
-
Şablon Kalibrasyonu ve Bounding Box Yönetimi: Uygulama içerisindeki
BoundingBoxEditorveFineTuneEditormodülleri aracılığıyla (veya LLM desteğiyle otonom olarak) hedef mockup üzerindeki baskı alanları, perspektif açıları ve maskeleme (clipping) koordinatları belirlenir.
-
Arayüz Rendering (Main Canvas): Konva.js destekli
MainCanvas, belirlenen koordinatlara tasarımı dinamik olarak yerleştirir. Kesin piksel uyumu için anlık önizleme (Real-time preview) sunulur. -
Backend Görsel İşleme (Sharp Pipeline): Seri üretim (Batch export) başlatıldığında, Electron'un Node.js backend'i devreye girer.
Sharpkütüphanesi kullanılarak tasarımlar, ana görsellere yüksek hızda ve kayıpsız olarak işlenir. Bu süreç ana thread'i (UI thread) bloklamamak adına IPC üzerinden asenkron olarak yönetilir. -
Sonuç ve Dışa Aktarım: Hazırlanan binlerce e-ticaret görseli, isimlendirme standartlarına ve kategorize edilmiş klasör yapılarına uygun olarak yerel diske dışa aktarılır.
- Asenkron İşlem Yönetimi ve UI Thread Bloklanmaması: Yüksek çözünürlüklü görsellerin (4K+) toplu olarak işlenmesi sırasında uygulamanın donmamasını sağlamak adına, render işlemleri IPC (Inter-Process Communication) kanalları üzerinden ana process'ten (Node.js/Electron) izole edilmiş arka plan süreçlerine aktarılmıştır.
- Hassas Maskeleme (Clipping) ve Dinamik Adaptasyon: 2D canvas üzerinde tasarımların mockup içerisine oturtulması sürecinde, maskeleme algoritmalarının performanslı bir şekilde çalıştırılması için canvas rendering optimizasyonları yapılmıştır.
- LLM ve Şablon Eşleştirme Mimarisinin Hazırlığı: İleride entegre edilecek LLM modüllerinin JSON tabanlı üreteceği koordinat, ölçek ve stil talimatlarının, UI state'ine (Zustand) deterministik bir şekilde yansıması için esnek, ayrıştırılmış (decoupled) bir adaptör mimarisi tasarlanmıştır.
sold_out/
├── app/
│ ├── electron/
│ │ ├── main.js # Electron main process, IPC handler'ları ve asenkron I/O
│ │ └── preload.js # Context Bridge (Güvenli IPC ve API expose işlemleri)
│ ├── src/
│ │ ├── components/
│ │ │ ├── Canvas/ # Konva ile görsel işleme, render ve önizleme
│ │ │ │ ├── MainCanvas.jsx
│ │ │ │ ├── BoundingBoxEditor.jsx
│ │ │ │ └── FineTuneEditor.jsx
│ │ │ ├── DesignBar/ # Tasarım varlıkları ve kütüphane paneli
│ │ │ └── ToolPanel/ # Uygulama konfigürasyon ve araç panelleri
│ │ ├── store/ # Zustand ile merkezi state yönetimi
│ │ ├── utils/ # Sharp image processing ve helper modüller
│ │ ├── App.jsx # Ana React kök bileşeni
│ │ └── main.jsx # React DOM entry point
│ ├── package.json # Bağımlılıklar ve build scriptleri
│ └── vite.config.js # Vite derleme yapılandırması
└── README.md # Proje dokümantasyonu
- Tam Otonom LLM/CV Entegrasyonu: Kullanıcı müdahalesi olmadan, OpenCV ve Multi-modal (VLM) modeller kullanılarak mockup üzerindeki baskı alanının otomatik tespiti ve tasarımın perspektif ayarlarının otonom bir şekilde hesaplanması.
- Displacement Map (Işık/Gölge/Doku) Desteği: Tasarımın mockup üzerindeki kumaş kıvrımlarına ve dokulara fotogerçekçi bir şekilde entegre olması için displacement mapping algoritmalarının sisteme eklenmesi.
- Bulut Senkronizasyonu & Collaborative Çalışma: Yerel SQLite veritabanının bulut tabanlı bir sisteme (örn. PostgreSQL) entegre edilerek, takım halinde eşzamanlı çalışma yeteneğinin kazandırılması.
- Pazaryeri API Entegrasyonları: Üretilen nihai görsellerin doğrudan Etsy, Shopify veya Amazon mağazalarına REST/GraphQL API'leri üzerinden otomatik push edilmesi ve listeleme sürecinin uçtan uca otonomlaştırılması.