truncgit/dekupai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add interactive Credits panel for Umit Tunc under Truncgil Teknoloji

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-23 10:55:42 +03:00
parent 2556249a5f
commit c8d56b5e02
5 changed files with 325 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+10 -2
View File
@@ -1,7 +1,7 @@
# Dekupai 🍊 # Dekupai 🍊
### *Premium Glassmorphic AI Background Remover & Decoupage Studio* ### *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. 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 ## ✨ 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. - 🧠 **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. - ⚙️ **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. - 📐 **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. * In Section 4, pick your export format (PNG, JPEG, WebP) and adjust the quality slider.
* Click **Export Masterpiece**, choose your directory, and save. * Click **Export Masterpiece**, choose your directory, and save.
* Click **Show in File Explorer** in the success toast to find your exported file instantly! * 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.
index.html
+135 -38
View File
@@ -1,18 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dekupai - Turunçgil AI Dekupaj</title> <title>Dekupai - Trunçgil AI Dekupaj</title>
<!-- Google Fonts: Inter & Outfit --> <!-- Google Fonts: Inter & Outfit -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap"
rel="stylesheet">
<!-- CropperJS CSS from node_modules (linked locally) --> <!-- CropperJS CSS from node_modules (linked locally) -->
<link rel="stylesheet" href="node_modules/cropperjs/dist/cropper.css"> <link rel="stylesheet" href="node_modules/cropperjs/dist/cropper.css">
<!-- Main Stylesheet --> <!-- Main Stylesheet -->
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
</head> </head>
<body> <body>
<!-- Ambient Background Orbs --> <!-- Ambient Background Orbs -->
<div class="ambient-glow bg-orb-1"></div> <div class="ambient-glow bg-orb-1"></div>
@@ -22,28 +26,40 @@
<header class="app-titlebar"> <header class="app-titlebar">
<div class="titlebar-logo"> <div class="titlebar-logo">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 7L12 12L22 7L12 2Z" fill="url(#neon-grad)" stroke="#fff" stroke-opacity="0.2" stroke-width="1.5"/> <path d="M12 2L2 7L12 12L22 7L12 2Z" fill="url(#neon-grad)" stroke="#fff" stroke-opacity="0.2"
<path d="M2 17L12 22L22 17" stroke="url(#neon-grad)" stroke-width="2" stroke-linecap="round"/> stroke-width="1.5" />
<path d="M2 12L12 17L22 12" stroke="#a78bfa" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round"/> <path d="M2 17L12 22L22 17" stroke="url(#neon-grad)" stroke-width="2" stroke-linecap="round" />
<path d="M2 12L12 17L22 12" stroke="#a78bfa" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round" />
<defs> <defs>
<linearGradient id="neon-grad" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse"> <linearGradient id="neon-grad" x1="2" y1="2" x2="22" y2="22" gradientUnits="userSpaceOnUse">
<stop stop-color="#ff7a00"/> <stop stop-color="#ff7a00" />
<stop offset="1" stop-color="#ffb800"/> <stop offset="1" stop-color="#ffb800" />
</linearGradient> </linearGradient>
</defs> </defs>
</svg> </svg>
<span>DEKUPAI</span> <span>DEKUPAI</span>
<span class="badge">Turunçgil AI</span> <span class="badge">Trunçgil AI</span>
</div> </div>
<div class="titlebar-controls"> <div class="titlebar-controls">
<button class="win-btn info-btn" id="btn-show-credits" title="Credits & Info">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
</button>
<div class="divider-v" style="height: 16px; opacity: 0.15; margin: 0 4px; -webkit-app-region: no-drag;"></div>
<button class="win-btn min-btn" id="win-min" title="Minimize"> <button class="win-btn min-btn" id="win-min" title="Minimize">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="5" y1="12" x2="19" y2="12"></line></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
</button> </button>
<button class="win-btn max-btn" id="win-max" title="Maximize"> <button class="win-btn max-btn" id="win-max" title="Maximize">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><rect x="5" y="5" width="14" height="14" rx="2"></rect></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<rect x="5" y="5" width="14" height="14" rx="2"></rect>
</svg>
</button> </button>
<button class="win-btn close-btn" id="win-close" title="Close"> <button class="win-btn close-btn" id="win-close" title="Close">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button> </button>
</div> </div>
</header> </header>
@@ -53,9 +69,12 @@
<div class="setup-wizard text-center"> <div class="setup-wizard text-center">
<div class="wizard-header"> <div class="wizard-header">
<div class="glow-icon-container"> <div class="glow-icon-container">
<svg class="glow-icon animated-float" width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="glow-icon animated-float" width="64" height="64" viewBox="0 0 24 24" fill="none"
<path d="M12 2V6M12 18V22M4.93 4.93L7.76 7.76M16.24 16.24L19.07 19.07M2 12H6M18 12H22M4.93 19.07L7.76 16.24M16.24 7.76L19.07 4.93" stroke="url(#neon-grad)" stroke-width="2" stroke-linecap="round"/> xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="4" fill="url(#neon-grad)" opacity="0.3"/> <path
d="M12 2V6M12 18V22M4.93 4.93L7.76 7.76M16.24 16.24L19.07 19.07M2 12H6M18 12H22M4.93 19.07L7.76 16.24M16.24 7.76L19.07 4.93"
stroke="url(#neon-grad)" stroke-width="2" stroke-linecap="round" />
<circle cx="12" cy="12" r="4" fill="url(#neon-grad)" opacity="0.3" />
</svg> </svg>
</div> </div>
<h1>Initializing AI Engine</h1> <h1>Initializing AI Engine</h1>
@@ -91,7 +110,10 @@
<div class="wizard-actions"> <div class="wizard-actions">
<button class="btn btn-primary" id="btn-start-setup"> <button class="btn btn-primary" id="btn-start-setup">
<span>Configure Engine (Automatic)</span> <span>Configure Engine (Automatic)</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button> </button>
</div> </div>
</div> </div>
@@ -105,7 +127,8 @@
<div class="dropzone" id="dropzone"> <div class="dropzone" id="dropzone">
<div class="dropzone-content"> <div class="dropzone-content">
<div class="dropzone-glow-icon"> <div class="dropzone-glow-icon">
<svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle> <circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline> <polyline points="21 15 16 10 5 21"></polyline>
@@ -132,27 +155,40 @@
<div class="editor-controls glass-panel-inner"> <div class="editor-controls glass-panel-inner">
<div class="btn-group"> <div class="btn-group">
<button class="ctrl-btn" id="ctrl-crop-drag" title="Drag / Navigate Image" class="active"> <button class="ctrl-btn" id="ctrl-crop-drag" title="Drag / Navigate Image" class="active">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20"></path></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20"></path>
</svg>
</button> </button>
<button class="ctrl-btn" id="ctrl-crop-box" title="Crop Selection Box"> <button class="ctrl-btn" id="ctrl-crop-box" title="Crop Selection Box">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-2-2h-5m-9 0h5M3 8v8a2 2 0 0 0 2 2h8m9 0h-5"></path><path d="M10 2L2 10m20 4l-8 8"></path></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 16V8a2 2 0 0 0-2-2h-5m-9 0h5M3 8v8a2 2 0 0 0 2 2h8m9 0h-5"></path>
<path d="M10 2L2 10m20 4l-8 8"></path>
</svg>
</button> </button>
</div> </div>
<div class="divider-v"></div> <div class="divider-v"></div>
<div class="btn-group"> <div class="btn-group">
<button class="ctrl-btn" id="ctrl-rot-l" title="Rotate Left 90°"> <button class="ctrl-btn" id="ctrl-rot-l" title="Rotate Left 90°">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2v6h-6M21.34 8a10 10 0 1 0-.45 7"></path></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21.5 2v6h-6M21.34 8a10 10 0 1 0-.45 7"></path>
</svg>
</button> </button>
<button class="ctrl-btn" id="ctrl-rot-r" title="Rotate Right 90°"> <button class="ctrl-btn" id="ctrl-rot-r" title="Rotate Right 90°">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2.5 2v6h6M2.66 8a10 10 0 1 1 .45 7"></path></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M2.5 2v6h6M2.66 8a10 10 0 1 1 .45 7"></path>
</svg>
</button> </button>
<button class="ctrl-btn" id="ctrl-flip-h" title="Flip Horizontal"> <button class="ctrl-btn" id="ctrl-flip-h" title="Flip Horizontal">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20M7 8l-5 4 5 4M17 8l5 4-5 4"></path></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v20M2 12h20M7 8l-5 4 5 4M17 8l5 4-5 4"></path>
</svg>
</button> </button>
<button class="ctrl-btn" id="ctrl-flip-v" title="Flip Vertical"> <button class="ctrl-btn" id="ctrl-flip-v" title="Flip Vertical">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M2 12h20M8 7l4-5 4 5M8 17l4 5 4-5"></path></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v20M2 12h20M8 7l4-5 4 5M8 17l4 5 4-5"></path>
</svg>
</button> </button>
</div> </div>
@@ -172,13 +208,21 @@
<div class="divider-v"></div> <div class="divider-v"></div>
<button class="btn btn-secondary btn-sm glow-btn-purple" id="ctrl-auto-trim" title="Automatically shrink crop box to subject edges" disabled> <button class="btn btn-secondary btn-sm glow-btn-purple" id="ctrl-auto-trim"
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path><path d="M8 8h8v8H8z"></path></svg> title="Automatically shrink crop box to subject edges" disabled>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path>
<path d="M8 8h8v8H8z"></path>
</svg>
<span>Auto-Trim</span> <span>Auto-Trim</span>
</button> </button>
<button class="ctrl-btn btn-danger-icon" id="ctrl-reset" title="Reset Image State"> <button class="ctrl-btn btn-danger-icon" id="ctrl-reset" title="Reset Image State">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
<path d="M3 3v5h5"></path>
</svg>
</button> </button>
</div> </div>
</div> </div>
@@ -217,9 +261,12 @@
<span class="step-badge">2</span> <span class="step-badge">2</span>
<h3>Background Removal</h3> <h3>Background Removal</h3>
</div> </div>
<button class="btn btn-primary w-full" id="btn-remove-bg" disabled> <button class="btn btn-primary w-full" id="btn-remove-bg" disabled>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-2-2h-5m-9 0h5M3 8v8a2 2 0 0 0 2 2h8m9 0h-5"></path></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 16V8a2 2 0 0 0-2-2h-5m-9 0h5M3 8v8a2 2 0 0 0 2 2h8m9 0h-5"></path>
</svg>
<span>Extract Subject</span> <span>Extract Subject</span>
</button> </button>
@@ -242,7 +289,7 @@
<span class="step-badge">3</span> <span class="step-badge">3</span>
<h3>Background Settings</h3> <h3>Background Settings</h3>
</div> </div>
<div class="bg-mode-tabs glass-panel-inner"> <div class="bg-mode-tabs glass-panel-inner">
<button class="bg-tab active" data-mode="transparent" id="tab-bg-trans"> <button class="bg-tab active" data-mode="transparent" id="tab-bg-trans">
<span>Transparent</span> <span>Transparent</span>
@@ -266,7 +313,11 @@
<button class="swatch green" data-color="#10b981"></button> <button class="swatch green" data-color="#10b981"></button>
<button class="swatch custom" id="btn-custom-color-picker" title="Pick Custom Color"> <button class="swatch custom" id="btn-custom-color-picker" title="Pick Custom Color">
<input type="color" id="custom-color-picker" value="#a78bfa"> <input type="color" id="custom-color-picker" value="#a78bfa">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 14.7255 3.09032 17.1962 4.85857 19C5.34306 18.6653 5.96205 18.5 6.6 18.5C8.47772 18.5 10 20.0223 10 21.9C10 21.9335 9.99965 21.9669 9.99896 22H12Z"></path></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 14.7255 3.09032 17.1962 4.85857 19C5.34306 18.6653 5.96205 18.5 6.6 18.5C8.47772 18.5 10 20.0223 10 21.9C10 21.9335 9.99965 21.9669 9.99896 22H12Z">
</path>
</svg>
</button> </button>
</div> </div>
</div> </div>
@@ -275,12 +326,18 @@
<div class="bg-settings-subpanel hidden" id="subpanel-gradient"> <div class="bg-settings-subpanel hidden" id="subpanel-gradient">
<label class="panel-sublabel">Select High-End Gradient</label> <label class="panel-sublabel">Select High-End Gradient</label>
<div class="gradient-swatches-grid"> <div class="gradient-swatches-grid">
<button class="grad-swatch grad-1 active" data-gradient="linear-gradient(135deg, #a78bfa, #06b6d4)" title="Violet Cyan Glow"></button> <button class="grad-swatch grad-1 active" data-gradient="linear-gradient(135deg, #a78bfa, #06b6d4)"
<button class="grad-swatch grad-2" data-gradient="linear-gradient(135deg, #f43f5e, #f97316)" title="Sunset Horizon"></button> title="Violet Cyan Glow"></button>
<button class="grad-swatch grad-3" data-gradient="linear-gradient(135deg, #10b981, #06b6d4)" title="Emerald Sea"></button> <button class="grad-swatch grad-2" data-gradient="linear-gradient(135deg, #f43f5e, #f97316)"
<button class="grad-swatch grad-4" data-gradient="linear-gradient(135deg, #ec4899, #8b5cf6)" title="Cyber Punk Pink"></button> title="Sunset Horizon"></button>
<button class="grad-swatch grad-5" data-gradient="linear-gradient(135deg, #3b82f6, #8b5cf6)" title="Aether Blue"></button> <button class="grad-swatch grad-3" data-gradient="linear-gradient(135deg, #10b981, #06b6d4)"
<button class="grad-swatch grad-6" data-gradient="linear-gradient(135deg, #f59e0b, #ef4444)" title="Warm Ember"></button> title="Emerald Sea"></button>
<button class="grad-swatch grad-4" data-gradient="linear-gradient(135deg, #ec4899, #8b5cf6)"
title="Cyber Punk Pink"></button>
<button class="grad-swatch grad-5" data-gradient="linear-gradient(135deg, #3b82f6, #8b5cf6)"
title="Aether Blue"></button>
<button class="grad-swatch grad-6" data-gradient="linear-gradient(135deg, #f59e0b, #ef4444)"
title="Warm Ember"></button>
</div> </div>
</div> </div>
</section> </section>
@@ -314,7 +371,12 @@
</div> </div>
<button class="btn btn-primary glow-btn-cyan w-full" id="btn-export"> <button class="btn btn-primary glow-btn-cyan w-full" id="btn-export">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
<span>Export Masterpiece</span> <span>Export Masterpiece</span>
</button> </button>
</section> </section>
@@ -331,8 +393,43 @@
<button class="toast-close" id="btn-close-toast">&times;</button> <button class="toast-close" id="btn-close-toast">&times;</button>
</div> </div>
<!-- Credits Overlay Modal -->
<div class="overlay-container glass-panel hidden" id="credits-overlay" style="width: 440px; text-align: center; z-index: 100010;">
<div class="setup-wizard">
<div class="wizard-header">
<div class="glow-icon-container">
<svg class="glow-icon animated-float" width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" fill="url(#neon-grad)" opacity="0.3" stroke="url(#neon-grad)" stroke-width="1.5"/>
<path d="M12 12C12 13.6569 10.6569 15 9 15C7.34315 15 6 13.6569 6 12C6 10.3431 7.34315 9 9 9C10.6569 9 12 10.3431 12 12Z" fill="url(#neon-grad)" stroke="url(#neon-grad)" stroke-width="1.5"/>
<path d="M12 12C12 13.6569 13.3431 15 15 15C16.6569 15 18 13.6569 18 12C18 10.3431 16.6569 9 15 9C13.3431 9 12 10.3431 12 12Z" fill="url(#neon-grad)" stroke="url(#neon-grad)" stroke-width="1.5"/>
</svg>
</div>
<h1 style="font-size: 28px; margin-bottom: 2px; font-family: var(--font-heading);">DEKUPAI</h1>
<div style="font-size: 11px; font-weight: 700; color: #ff7a00; letter-spacing: 1.5px; margin-bottom: 12px; text-transform: uppercase;">Version 1.0.0</div>
<div class="glass-panel-inner" style="margin-top: 14px; text-align: center; display: flex; flex-direction: column; gap: 10px; padding: 20px !important;">
<p style="font-size: 13px; color: var(--text-muted); font-weight: 500;">Developed under the vision of</p>
<h2 style="font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: #ff7a00; text-shadow: 0 0 12px rgba(255, 122, 0, 0.35);">Trunçgil Teknoloji</h2>
<p style="font-size: 12px; color: var(--text-muted-dark); line-height: 1.4;">by the engineering expertise of</p>
<h3 style="font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: #fff;">Ümit Tunç</h3>
</div>
<div style="margin-top: 16px; font-size: 12px; color: var(--text-muted-dark); line-height: 1.5; padding: 0 10px;">
Dekupai is an advanced deep-learning desktop workspace that provides local, high-precision background removal using BiRefNet neural segmentation networks.
</div>
</div>
<div class="wizard-actions" style="margin-top: 10px; width: 100%;">
<button class="btn btn-secondary w-full" id="btn-close-credits">
<span>Close Credits</span>
</button>
</div>
</div>
</div>
<!-- Loaded locally in package.json dependencies --> <!-- Loaded locally in package.json dependencies -->
<script src="node_modules/cropperjs/dist/cropper.js"></script> <script src="node_modules/cropperjs/dist/cropper.js"></script>
<script src="renderer.js"></script> <script src="renderer.js"></script>
</body> </body>
</html>
</html>
package.json
+3 -3
View File
@@ -1,7 +1,7 @@
{ {
"name": "dekupai", "name": "dekupai",
"version": "1.0.0", "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", "main": "main.js",
"scripts": { "scripts": {
"start": "electron .", "start": "electron .",
@@ -27,7 +27,7 @@
"build": { "build": {
"appId": "com.turuncgil.dekupai", "appId": "com.turuncgil.dekupai",
"productName": "Dekupai", "productName": "Dekupai",
"copyright": "Copyright © 2026 Turunçgil AI", "copyright": "Copyright © 2026 Trunçgil AI",
"directories": { "directories": {
"output": "dist" "output": "dist"
}, },
@@ -44,4 +44,4 @@
"category": "public.app-category.graphics-design" "category": "public.app-category.graphics-design"
} }
} }
} }
renderer.js
+13
View File
@@ -30,6 +30,9 @@ const elements = {
winMin: document.getElementById('win-min'), winMin: document.getElementById('win-min'),
winMax: document.getElementById('win-max'), winMax: document.getElementById('win-max'),
winClose: document.getElementById('win-close'), winClose: document.getElementById('win-close'),
btnShowCredits: document.getElementById('btn-show-credits'),
creditsOverlay: document.getElementById('credits-overlay'),
btnCloseCredits: document.getElementById('btn-close-credits'),
// Setup Wizard // Setup Wizard
setupOverlay: document.getElementById('setup-overlay'), setupOverlay: document.getElementById('setup-overlay'),
@@ -117,6 +120,16 @@ function setupTitlebarListeners() {
elements.winMin.addEventListener('click', () => window.api.minimizeWindow()); elements.winMin.addEventListener('click', () => window.api.minimizeWindow());
elements.winMax.addEventListener('click', () => window.api.maximizeWindow()); elements.winMax.addEventListener('click', () => window.api.maximizeWindow());
elements.winClose.addEventListener('click', () => window.api.closeWindow()); 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 // Workspace Initialization
styles.css
+164 -57
View File
@@ -2,25 +2,25 @@
:root { :root {
--font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Harmonious Dark / Neon Palette */ /* Harmonious Dark / Neon Palette */
--bg-dark: #0a0a0f; --bg-dark: #0a0a0f;
--panel-bg: rgba(16, 16, 24, 0.65); --panel-bg: rgba(16, 16, 24, 0.65);
--panel-bg-inner: rgba(255, 255, 255, 0.03); --panel-bg-inner: rgba(255, 255, 255, 0.03);
--panel-border: rgba(255, 255, 255, 0.08); --panel-border: rgba(255, 255, 255, 0.08);
--panel-border-inner: rgba(255, 255, 255, 0.04); --panel-border-inner: rgba(255, 255, 255, 0.04);
--text-main: #f3f4f6; --text-main: #f3f4f6;
--text-muted: #9ca3af; --text-muted: #9ca3af;
--text-muted-dark: #6b7280; --text-muted-dark: #6b7280;
/* Neon Accents - Turunçgil Orange & Gold Palette */ /* Neon Accents - Trunçgil Orange & Gold Palette */
--accent-purple: #ff7a00; --accent-purple: #ff7a00;
--accent-purple-glow: rgba(255, 122, 0, 0.35); --accent-purple-glow: rgba(255, 122, 0, 0.35);
--accent-cyan: #ffb800; --accent-cyan: #ffb800;
--accent-cyan-glow: rgba(255, 184, 0, 0.3); --accent-cyan-glow: rgba(255, 184, 0, 0.3);
--accent-pink: #f97316; --accent-pink: #f97316;
--danger: #ef4444; --danger: #ef4444;
--danger-glow: rgba(239, 68, 68, 0.3); --danger-glow: rgba(239, 68, 68, 0.3);
--success: #10b981; --success: #10b981;
@@ -72,9 +72,20 @@ body {
} }
@keyframes orb-pulse { @keyframes orb-pulse {
0% { transform: scale(1) translate(0, 0); opacity: 0.25; } 0% {
50% { transform: scale(1.15) translate(30px, -50px); opacity: 0.33; } transform: scale(1) translate(0, 0);
100% { transform: scale(0.9) translate(-20px, 30px); opacity: 0.22; } 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 --- */ /* --- SLEEK FRAMELESS TITLEBAR --- */
@@ -162,8 +173,10 @@ body {
.app-workspace { .app-workspace {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.control-tower { .control-tower {
display: none; /* Just simple responsive check */ display: none;
/* Just simple responsive check */
} }
} }
@@ -212,7 +225,8 @@ body {
cursor: pointer; cursor: pointer;
} }
.dropzone:hover, .dropzone.dragover { .dropzone:hover,
.dropzone.dragover {
border-color: var(--accent-purple); border-color: var(--accent-purple);
background: rgba(139, 92, 246, 0.04); background: rgba(139, 92, 246, 0.04);
box-shadow: 0 0 35px rgba(139, 92, 246, 0.1); box-shadow: 0 0 35px rgba(139, 92, 246, 0.1);
@@ -274,7 +288,8 @@ body {
letter-spacing: 1px; letter-spacing: 1px;
} }
.or-separator::before, .or-separator::after { .or-separator::before,
.or-separator::after {
content: ''; content: '';
flex: 1; flex: 1;
height: 1px; height: 1px;
@@ -305,16 +320,16 @@ body {
justify-content: center; justify-content: center;
position: relative; position: relative;
background-color: #121216; 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 */ /* Stunning Checkerboard Transparency Styling */
.checkerboard { .checkerboard {
background-image: 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, 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%),
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-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
} }
@@ -480,7 +495,7 @@ body {
.tower-group:not(.disabled-group) .step-badge { .tower-group:not(.disabled-group) .step-badge {
background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)); 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); box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
} }
@@ -663,13 +678,26 @@ body {
} }
@keyframes spin { @keyframes spin {
100% { transform: rotate(360deg); } 100% {
transform: rotate(360deg);
}
} }
@keyframes dash { @keyframes dash {
0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 0% {
50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } stroke-dasharray: 1, 150;
100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
} }
.loader-text { .loader-text {
@@ -776,39 +804,57 @@ select option {
letter-spacing: 0.6px; letter-spacing: 0.6px;
} }
.color-swatches-grid, .gradient-swatches-grid { .color-swatches-grid,
.gradient-swatches-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
} }
.swatch, .grad-swatch { .swatch,
.grad-swatch {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 6px; border-radius: 6px;
border: 2px solid transparent; border: 2px solid transparent;
cursor: pointer; cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 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); transform: scale(1.15);
z-index: 2; z-index: 2;
} }
.swatch.active, .grad-swatch.active { .swatch.active,
.grad-swatch.active {
border-color: #fff; 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); transform: scale(1.1);
} }
/* Swatches */ /* Swatches */
.swatch.white { background: #ffffff; } .swatch.white {
.swatch.black { background: #000000; } background: #ffffff;
.swatch.red { background: #ef4444; } }
.swatch.blue { background: #3b82f6; }
.swatch.green { background: #10b981; } .swatch.black {
background: #000000;
}
.swatch.red {
background: #ef4444;
}
.swatch.blue {
background: #3b82f6;
}
.swatch.green {
background: #10b981;
}
.swatch.custom { .swatch.custom {
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04);
@@ -836,12 +882,29 @@ select option {
} }
/* Premium Gradients */ /* Premium Gradients */
.grad-1 { background: linear-gradient(135deg, #a78bfa, #06b6d4); } .grad-1 {
.grad-2 { background: linear-gradient(135deg, #f43f5e, #f97316); } background: linear-gradient(135deg, #a78bfa, #06b6d4);
.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-2 {
.grad-6 { background: linear-gradient(135deg, #f59e0b, #ef4444); } 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 STUDIO PANEL --- */
.export-settings-box { .export-settings-box {
@@ -876,8 +939,8 @@ select option {
/* Glass Slider Styling */ /* Glass Slider Styling */
input[type="range"] { input[type="range"] {
appearance: none; appearance: none;
background: rgba(255,255,255,0.06); background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255,255,255,0.04); border: 1px solid rgba(255, 255, 255, 0.04);
height: 6px; height: 6px;
border-radius: 5px; border-radius: 5px;
outline: none; outline: none;
@@ -1010,7 +1073,8 @@ input[type="range"]::-webkit-slider-thumb:hover {
border-radius: 50px; border-radius: 50px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
display: none; /* Shows during setup */ display: none;
/* Shows during setup */
} }
.progress-bar { .progress-bar {
@@ -1046,7 +1110,7 @@ input[type="range"]::-webkit-slider-thumb:hover {
border-left: 4px solid var(--accent-purple); border-left: 4px solid var(--accent-purple);
z-index: 100000; z-index: 100000;
animation: slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); 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 { .toast-notification.success {
@@ -1095,23 +1159,49 @@ input[type="range"]::-webkit-slider-thumb:hover {
/* --- ANIMATIONS --- */ /* --- ANIMATIONS --- */
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes slide-down { @keyframes slide-down {
from { transform: translateY(-10px); opacity: 0; } from {
to { transform: translateY(0); opacity: 1; } transform: translateY(-10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} }
@keyframes slide-in { @keyframes slide-in {
from { transform: translateX(50px); opacity: 0; } from {
to { transform: translateX(0); opacity: 1; } transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
} }
@keyframes scale-up { @keyframes scale-up {
from { transform: translate(-50%, -40%) scale(0.95); opacity: 0; } from {
to { transform: translate(-50%, -50%) scale(1); opacity: 1; } transform: translate(-50%, -40%) scale(0.95);
opacity: 0;
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
} }
.animated-float { .animated-float {
@@ -1119,9 +1209,17 @@ input[type="range"]::-webkit-slider-thumb:hover {
} }
@keyframes float { @keyframes float {
0% { transform: translateY(0px); } 0% {
50% { transform: translateY(-8px); } transform: translateY(0px);
100% { transform: translateY(0px); } }
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0px);
}
} }
/* --- HELPER CLASSES --- */ /* --- HELPER CLASSES --- */
@@ -1129,6 +1227,15 @@ input[type="range"]::-webkit-slider-thumb:hover {
display: none !important; display: none !important;
} }
.text-muted { color: var(--text-muted); } .text-muted {
.text-center { text-align: center; } color: var(--text-muted);
.py-2 { padding-top: 8px; padding-bottom: 8px; } }
.text-center {
text-align: center;
}
.py-2 {
padding-top: 8px;
padding-bottom: 8px;
}