Prosicht AutoLabel
Görüntüye alan. İş akışına odak.
Prosicht Teknoloji · Sakarya Üniversitesi Teknokent · Ekip projesi
Tamamlandı · Şirket içinde aktif kullanımda
Çözdüğüm problem.
Prosicht AutoLabel; manuel çizim araçlarını, SAM3 destekli nesne seçimini ve YOLO dışa aktarma akışlarını aynı stüdyoda buluşturuyor. Prosicht Teknoloji’deki stajım boyunca arayüz, etkileşimler ve tema sistemi üzerinde çalıştım.
Etiketleme araçları ve paneller arttıkça görüntüye ayrılan alan daralabiliyor. Çalışma alanının, yoğun araç setini erişilebilir tutarken kullanıcının odağını görüntüde koruması gerekiyordu.
Tuvali merkeze alan kompakt bir düzen, gerektiğinde açılan paneller ve tutarlı bir tema sistemi geliştirdim. React arayüzünü REST API üzerinden FastAPI backend’iyle entegre ettim.
- React 18
- JavaScript ES6+
- JSX
- Vite
- Tailwind CSS
- Zustand
- Canvas 2D
- React Portal
- REST API
- YOLO
- SAM3
Benim katkılarım.
Görüntüyü merkeze alan düzen
Etiketler, nitelikler, model tahmini, takip, yorumlar ve geçmiş panellerini görselin üzerine binmek yerine tuvalin yerleşimini değiştiren bir yapıda geliştirdim.
Kompakt araç seti
Kaydırma, seçme, kutu ve poligon çizimi, anahtar nokta, SAM3 destekli seçim ve düzenleme akışlarını birleştiren 12 araçlı çalışma alanının arayüzüne katkıda bulundum.
18 kombinasyonlu tema sistemi
Dokuz renk ailesini açık ve koyu modla birleştiren dinamik HSL tema motorunu geliştirdim. Yüzey, kenarlık ve vurgu renklerini merkezi CSS değişkenleri üzerinden yönettim.
Ekrana uyum sağlayan menüler
Tablo ve kartlarda kırpılan menüler için React Portal tabanlı çözüm geliştirdim. Menü konumunu ekran sınırlarına göre hesaplayıp gerektiğinde yukarı açılmasını sağladım.
Proje panosu, yönetim ve dışa aktarma
Proje filtreleri, ilerleme grafikleri, kullanıcı yönetimi ve rol atama arayüzleri üzerinde çalıştım. YOLO çıktıları için klasör düzeni, filtre ve aralık seçenekleri sunan dışa aktarma sihirbazını geliştirdim.
Ürünün içinden.
Uygulamadan ekran görüntüleri. Ayrıntıları görmek için büyütebilirsin.
Kararların arkasında.
İki eksenli tema modeli
Renk ailesini ve açık/koyu görünümü birbirinden bağımsız yönettim; tema değerlerini ilk çizimden önce uyguladım.
Merkezi durum yönetimi
Arayüz durumlarını Zustand ile ortak bir yapıda ele aldım.
Panel ve tuval ilişkisi
Açılan panellerin görseli kapatması yerine tuval alanına uyum sağlamasını tercih ettim.
Taşma sınırlarından bağımsız menüler
React Portal ve dinamik konum hesabıyla menüleri üst öğelerin kırpma sınırlarından ayırdım.
Küçük bir etkileşim dene.
Örnek verilerle çalışan bağımsız konsept demo.
ProSicht
AutoLabel
Üç örnek kutu hazır. Bir kutuyu seçip taşıyabilir veya yeni kutu çizebilirsin.
Etiketler, konum ve dışa aktarım
Etiket listesi
3 etiketKutu konumu
Etiket çıktısı
Koordinatlar 1367 × 766 boyutundaki tam fabrika karesine göre normalleştirilir. Kopyalamak için çıktı metnini seçebilirsin.
Sınıf kimlikleri: 0 = Taşıma kafesi · 1 = İş istasyonu
Panoramik görünüm özgün oranı korur. Dışa aktarımda fabrika karesinin tamamı kullanılır.
Klavye: listeden etiketi seç, ok tuşlarıyla taşı (Shift: 10 piksel), Delete ile sil, Ctrl / ⌘ Z ile geri al. Escape çizimi iptal eder veya seçimi bırakır.
Etkileşimli yerel demo. Görsel ProSicht AutoLabel projesinden, kutular örnek etiketlerdir. Model çalıştırılmaz ve dosya yüklenmez.
Bu projeden kalan.
Çok araçlı bir arayüzü sade tutmak; yerleşim, durum yönetimi ve küçük etkileşim kararlarının birlikte çözülmesini gerektiriyor.
Rudder Cloud
Sıradaki çalışma
