diff --git a/README.md b/README.md index 46071da..439bf54 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Dekupai 🍊 ### *Premium Glassmorphic AI Background Remover & Decoupage Studio* -Developed by **Turunçgil AI**, **Dekupai** is a state-of-the-art desktop application built on **ElectronJS** that leverages the cutting-edge **BiRefNet** (Bilateral Reference Network) deep learning model for extremely high-resolution, pixel-perfect background extraction and image matting. +Developed by **Trunçgil AI**, **Dekupai** is a state-of-the-art desktop application built on **ElectronJS** that leverages the cutting-edge **BiRefNet** (Bilateral Reference Network) deep learning model for extremely high-resolution, pixel-perfect background extraction and image matting. With a beautiful, modern **Glassmorphic interface** themed with glowing neon citrus accents, **Dekupai** bridges the gap between complex AI segmentation workflows and elite creator utilities, enabling instant edge-accurate transparent subject isolation, visual cropping, auto-trimming, custom background compositing, and professional asset exporting. @@ -9,7 +9,7 @@ With a beautiful, modern **Glassmorphic interface** themed with glowing neon cit ## ✨ Features -- 🍊 **Turunçgil Brand Accentuation**: Stunning glassmorphic dark theme styled with heavy back-filters (`backdrop-filter: blur(28px)`) and organic glowing neon orange and golden orbs. +- 🍊 **Trunçgil Brand Accentuation**: Stunning glassmorphic dark theme styled with heavy back-filters (`backdrop-filter: blur(28px)`) and organic glowing neon orange and golden orbs. - 🧠 **BiRefNet Neural Engine**: State-of-the-art segmentation that handles intricate visual details (e.g. hair, thin lines, translucent materials) using a lightweight CPU-optimized local inference pipeline. - ⚙️ **Integrated Environment Setup**: An automated initial setup overlay that checks, builds, and configures an isolated Python virtual environment (`.venv`) and downloads requirements automatically. - 📐 **Interactive Cropper Studio**: Full integration with `Cropper.js` enabling precise bounding boxes, standard aspect presets (Square, Story, Cinema, Portrait), 90-degree rotations, and horizontal/vertical mirroring. @@ -123,3 +123,11 @@ To package and compile **Dekupai** into standalone production binaries or instal * In Section 4, pick your export format (PNG, JPEG, WebP) and adjust the quality slider. * Click **Export Masterpiece**, choose your directory, and save. * Click **Show in File Explorer** in the success toast to find your exported file instantly! + +--- + +## 🍊 Credits & Acknowledgments + +**Dekupai** is developed under the corporate vision of **Trunçgil Teknoloji** by the software engineering and design expertise of **Ümit Tunç**. + +It integrates state-of-the-art AI-powered image segmentation, combining the deep-learning capabilities of **BiRefNet** with high-end glassmorphic client-side controls to deliver professional desktop matting pipelines directly to local workstations. diff --git a/index.html b/index.html index 806c782..8d82a1d 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,22 @@ + - Dekupai - Turunçgil AI Dekupaj + Dekupai - Trunçgil AI Dekupaj - + +
@@ -22,28 +26,40 @@
+ +
@@ -53,9 +69,12 @@
- - - + + +

Initializing AI Engine

@@ -91,7 +110,10 @@
@@ -105,7 +127,8 @@
- + @@ -132,27 +155,40 @@
- +
@@ -172,13 +208,21 @@
-
@@ -217,9 +261,12 @@ 2

Background Removal

- + @@ -242,7 +289,7 @@ 3

Background Settings

- +
@@ -275,12 +326,18 @@ @@ -314,7 +371,12 @@ @@ -331,8 +393,43 @@ + + + - + + \ No newline at end of file diff --git a/package.json b/package.json index 12721d9..34cb91a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "dekupai", "version": "1.0.0", - "description": "Dekupai - Turunçgil AI ile Kusursuz ve Hizli Dekupaj", + "description": "Dekupai - Trunçgil AI ile Kusursuz ve Hizli Dekupaj", "main": "main.js", "scripts": { "start": "electron .", @@ -27,7 +27,7 @@ "build": { "appId": "com.turuncgil.dekupai", "productName": "Dekupai", - "copyright": "Copyright © 2026 Turunçgil AI", + "copyright": "Copyright © 2026 Trunçgil AI", "directories": { "output": "dist" }, @@ -44,4 +44,4 @@ "category": "public.app-category.graphics-design" } } -} +} \ No newline at end of file diff --git a/renderer.js b/renderer.js index 169e283..21a6270 100644 --- a/renderer.js +++ b/renderer.js @@ -30,6 +30,9 @@ const elements = { winMin: document.getElementById('win-min'), winMax: document.getElementById('win-max'), winClose: document.getElementById('win-close'), + btnShowCredits: document.getElementById('btn-show-credits'), + creditsOverlay: document.getElementById('credits-overlay'), + btnCloseCredits: document.getElementById('btn-close-credits'), // Setup Wizard setupOverlay: document.getElementById('setup-overlay'), @@ -117,6 +120,16 @@ function setupTitlebarListeners() { elements.winMin.addEventListener('click', () => window.api.minimizeWindow()); elements.winMax.addEventListener('click', () => window.api.maximizeWindow()); elements.winClose.addEventListener('click', () => window.api.closeWindow()); + + // Show Credits Modal + elements.btnShowCredits.addEventListener('click', () => { + elements.creditsOverlay.classList.remove('hidden'); + }); + + // Close Credits Modal + elements.btnCloseCredits.addEventListener('click', () => { + elements.creditsOverlay.classList.add('hidden'); + }); } // Workspace Initialization diff --git a/styles.css b/styles.css index dbca5ae..22854a6 100644 --- a/styles.css +++ b/styles.css @@ -2,25 +2,25 @@ :root { --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; - + /* Harmonious Dark / Neon Palette */ --bg-dark: #0a0a0f; --panel-bg: rgba(16, 16, 24, 0.65); --panel-bg-inner: rgba(255, 255, 255, 0.03); --panel-border: rgba(255, 255, 255, 0.08); --panel-border-inner: rgba(255, 255, 255, 0.04); - + --text-main: #f3f4f6; --text-muted: #9ca3af; --text-muted-dark: #6b7280; - - /* Neon Accents - Turunçgil Orange & Gold Palette */ + + /* Neon Accents - Trunçgil Orange & Gold Palette */ --accent-purple: #ff7a00; --accent-purple-glow: rgba(255, 122, 0, 0.35); --accent-cyan: #ffb800; --accent-cyan-glow: rgba(255, 184, 0, 0.3); --accent-pink: #f97316; - + --danger: #ef4444; --danger-glow: rgba(239, 68, 68, 0.3); --success: #10b981; @@ -72,9 +72,20 @@ body { } @keyframes orb-pulse { - 0% { transform: scale(1) translate(0, 0); opacity: 0.25; } - 50% { transform: scale(1.15) translate(30px, -50px); opacity: 0.33; } - 100% { transform: scale(0.9) translate(-20px, 30px); opacity: 0.22; } + 0% { + transform: scale(1) translate(0, 0); + opacity: 0.25; + } + + 50% { + transform: scale(1.15) translate(30px, -50px); + opacity: 0.33; + } + + 100% { + transform: scale(0.9) translate(-20px, 30px); + opacity: 0.22; + } } /* --- SLEEK FRAMELESS TITLEBAR --- */ @@ -162,8 +173,10 @@ body { .app-workspace { grid-template-columns: 1fr; } + .control-tower { - display: none; /* Just simple responsive check */ + display: none; + /* Just simple responsive check */ } } @@ -212,7 +225,8 @@ body { cursor: pointer; } -.dropzone:hover, .dropzone.dragover { +.dropzone:hover, +.dropzone.dragover { border-color: var(--accent-purple); background: rgba(139, 92, 246, 0.04); box-shadow: 0 0 35px rgba(139, 92, 246, 0.1); @@ -274,7 +288,8 @@ body { letter-spacing: 1px; } -.or-separator::before, .or-separator::after { +.or-separator::before, +.or-separator::after { content: ''; flex: 1; height: 1px; @@ -305,16 +320,16 @@ body { justify-content: center; position: relative; background-color: #121216; - box-shadow: inset 0 4px 20px rgba(0,0,0,0.5); + box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.5); } /* Stunning Checkerboard Transparency Styling */ .checkerboard { - background-image: - linear-gradient(45deg, rgba(255,255,255,0.03) 25%, transparent 25%), - linear-gradient(-45deg, rgba(255,255,255,0.03) 25%, transparent 25%), - linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.03) 75%), - linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.03) 75%); + background-image: + linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%), + linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%), + linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; } @@ -480,7 +495,7 @@ body { .tower-group:not(.disabled-group) .step-badge { background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)); - border-color: rgba(255,255,255,0.1); + border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 10px rgba(139, 92, 246, 0.3); } @@ -663,13 +678,26 @@ body { } @keyframes spin { - 100% { transform: rotate(360deg); } + 100% { + transform: rotate(360deg); + } } @keyframes dash { - 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } - 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } - 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } } .loader-text { @@ -776,39 +804,57 @@ select option { letter-spacing: 0.6px; } -.color-swatches-grid, .gradient-swatches-grid { +.color-swatches-grid, +.gradient-swatches-grid { display: flex; flex-wrap: wrap; gap: 8px; } -.swatch, .grad-swatch { +.swatch, +.grad-swatch { width: 28px; height: 28px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: 0 4px 10px rgba(0,0,0,0.15); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } -.swatch:hover, .grad-swatch:hover { +.swatch:hover, +.grad-swatch:hover { transform: scale(1.15); z-index: 2; } -.swatch.active, .grad-swatch.active { +.swatch.active, +.grad-swatch.active { border-color: #fff; - box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0,0,0,0.3); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3); transform: scale(1.1); } /* Swatches */ -.swatch.white { background: #ffffff; } -.swatch.black { background: #000000; } -.swatch.red { background: #ef4444; } -.swatch.blue { background: #3b82f6; } -.swatch.green { background: #10b981; } +.swatch.white { + background: #ffffff; +} + +.swatch.black { + background: #000000; +} + +.swatch.red { + background: #ef4444; +} + +.swatch.blue { + background: #3b82f6; +} + +.swatch.green { + background: #10b981; +} .swatch.custom { background: rgba(255, 255, 255, 0.04); @@ -836,12 +882,29 @@ select option { } /* Premium Gradients */ -.grad-1 { background: linear-gradient(135deg, #a78bfa, #06b6d4); } -.grad-2 { background: linear-gradient(135deg, #f43f5e, #f97316); } -.grad-3 { background: linear-gradient(135deg, #10b981, #06b6d4); } -.grad-4 { background: linear-gradient(135deg, #ec4899, #8b5cf6); } -.grad-5 { background: linear-gradient(135deg, #3b82f6, #8b5cf6); } -.grad-6 { background: linear-gradient(135deg, #f59e0b, #ef4444); } +.grad-1 { + background: linear-gradient(135deg, #a78bfa, #06b6d4); +} + +.grad-2 { + background: linear-gradient(135deg, #f43f5e, #f97316); +} + +.grad-3 { + background: linear-gradient(135deg, #10b981, #06b6d4); +} + +.grad-4 { + background: linear-gradient(135deg, #ec4899, #8b5cf6); +} + +.grad-5 { + background: linear-gradient(135deg, #3b82f6, #8b5cf6); +} + +.grad-6 { + background: linear-gradient(135deg, #f59e0b, #ef4444); +} /* --- EXPORT STUDIO PANEL --- */ .export-settings-box { @@ -876,8 +939,8 @@ select option { /* Glass Slider Styling */ input[type="range"] { appearance: none; - background: rgba(255,255,255,0.06); - border: 1px solid rgba(255,255,255,0.04); + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.04); height: 6px; border-radius: 5px; outline: none; @@ -1010,7 +1073,8 @@ input[type="range"]::-webkit-slider-thumb:hover { border-radius: 50px; overflow: hidden; position: relative; - display: none; /* Shows during setup */ + display: none; + /* Shows during setup */ } .progress-bar { @@ -1046,7 +1110,7 @@ input[type="range"]::-webkit-slider-thumb:hover { border-left: 4px solid var(--accent-purple); z-index: 100000; animation: slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); - box-shadow: 0 20px 40px rgba(0,0,0,0.5); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); } .toast-notification.success { @@ -1095,23 +1159,49 @@ input[type="range"]::-webkit-slider-thumb:hover { /* --- ANIMATIONS --- */ @keyframes fade-in { - from { opacity: 0; } - to { opacity: 1; } + from { + opacity: 0; + } + + to { + opacity: 1; + } } @keyframes slide-down { - from { transform: translateY(-10px); opacity: 0; } - to { transform: translateY(0); opacity: 1; } + from { + transform: translateY(-10px); + opacity: 0; + } + + to { + transform: translateY(0); + opacity: 1; + } } @keyframes slide-in { - from { transform: translateX(50px); opacity: 0; } - to { transform: translateX(0); opacity: 1; } + from { + transform: translateX(50px); + opacity: 0; + } + + to { + transform: translateX(0); + opacity: 1; + } } @keyframes scale-up { - from { transform: translate(-50%, -40%) scale(0.95); opacity: 0; } - to { transform: translate(-50%, -50%) scale(1); opacity: 1; } + from { + transform: translate(-50%, -40%) scale(0.95); + opacity: 0; + } + + to { + transform: translate(-50%, -50%) scale(1); + opacity: 1; + } } .animated-float { @@ -1119,9 +1209,17 @@ input[type="range"]::-webkit-slider-thumb:hover { } @keyframes float { - 0% { transform: translateY(0px); } - 50% { transform: translateY(-8px); } - 100% { transform: translateY(0px); } + 0% { + transform: translateY(0px); + } + + 50% { + transform: translateY(-8px); + } + + 100% { + transform: translateY(0px); + } } /* --- HELPER CLASSES --- */ @@ -1129,6 +1227,15 @@ input[type="range"]::-webkit-slider-thumb:hover { display: none !important; } -.text-muted { color: var(--text-muted); } -.text-center { text-align: center; } -.py-2 { padding-top: 8px; padding-bottom: 8px; } +.text-muted { + color: var(--text-muted); +} + +.text-center { + text-align: center; +} + +.py-2 { + padding-top: 8px; + padding-bottom: 8px; +} \ No newline at end of file