feat: add interactive Credits panel for Umit Tunc under Truncgil Teknoloji
This commit is contained in:
Ümit Tunç
@@ -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.
|
||||
|
||||
+126
-29
@@ -1,18 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<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) -->
|
||||
<link rel="stylesheet" href="node_modules/cropperjs/dist/cropper.css">
|
||||
<!-- Main Stylesheet -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Ambient Background Orbs -->
|
||||
<div class="ambient-glow bg-orb-1"></div>
|
||||
@@ -22,7 +26,8 @@
|
||||
<header class="app-titlebar">
|
||||
<div class="titlebar-logo">
|
||||
<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"
|
||||
stroke-width="1.5" />
|
||||
<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>
|
||||
@@ -33,17 +38,28 @@
|
||||
</defs>
|
||||
</svg>
|
||||
<span>DEKUPAI</span>
|
||||
<span class="badge">Turunçgil AI</span>
|
||||
<span class="badge">Trunçgil AI</span>
|
||||
</div>
|
||||
<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">
|
||||
<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 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 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>
|
||||
</div>
|
||||
</header>
|
||||
@@ -53,8 +69,11 @@
|
||||
<div class="setup-wizard text-center">
|
||||
<div class="wizard-header">
|
||||
<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">
|
||||
<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"/>
|
||||
<svg class="glow-icon animated-float" width="64" height="64" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<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>
|
||||
</div>
|
||||
@@ -91,7 +110,10 @@
|
||||
<div class="wizard-actions">
|
||||
<button class="btn btn-primary" id="btn-start-setup">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,7 +127,8 @@
|
||||
<div class="dropzone" id="dropzone">
|
||||
<div class="dropzone-content">
|
||||
<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>
|
||||
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
||||
<polyline points="21 15 16 10 5 21"></polyline>
|
||||
@@ -132,10 +155,15 @@
|
||||
<div class="editor-controls glass-panel-inner">
|
||||
<div class="btn-group">
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
@@ -143,16 +171,24 @@
|
||||
|
||||
<div class="btn-group">
|
||||
<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 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 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 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>
|
||||
</div>
|
||||
|
||||
@@ -172,13 +208,21 @@
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<button class="btn btn-secondary btn-sm glow-btn-purple" id="ctrl-auto-trim"
|
||||
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>
|
||||
</button>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -219,7 +263,10 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
|
||||
@@ -266,7 +313,11 @@
|
||||
<button class="swatch green" data-color="#10b981"></button>
|
||||
<button class="swatch custom" id="btn-custom-color-picker" title="Pick Custom Color">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -275,12 +326,18 @@
|
||||
<div class="bg-settings-subpanel hidden" id="subpanel-gradient">
|
||||
<label class="panel-sublabel">Select High-End Gradient</label>
|
||||
<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-2" data-gradient="linear-gradient(135deg, #f43f5e, #f97316)" title="Sunset Horizon"></button>
|
||||
<button class="grad-swatch grad-3" data-gradient="linear-gradient(135deg, #10b981, #06b6d4)" 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>
|
||||
<button class="grad-swatch grad-1 active" data-gradient="linear-gradient(135deg, #a78bfa, #06b6d4)"
|
||||
title="Violet Cyan Glow"></button>
|
||||
<button class="grad-swatch grad-2" data-gradient="linear-gradient(135deg, #f43f5e, #f97316)"
|
||||
title="Sunset Horizon"></button>
|
||||
<button class="grad-swatch grad-3" data-gradient="linear-gradient(135deg, #10b981, #06b6d4)"
|
||||
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>
|
||||
</section>
|
||||
@@ -314,7 +371,12 @@
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
</section>
|
||||
@@ -331,8 +393,43 @@
|
||||
<button class="toast-close" id="btn-close-toast">×</button>
|
||||
</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 -->
|
||||
<script src="node_modules/cropperjs/dist/cropper.js"></script>
|
||||
<script src="renderer.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+2
-2
@@ -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"
|
||||
},
|
||||
|
||||
+13
@@ -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
|
||||
|
||||
+148
-41
@@ -14,7 +14,7 @@
|
||||
--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;
|
||||
@@ -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;
|
||||
@@ -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,13 +804,15 @@ 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;
|
||||
@@ -792,23 +822,39 @@ select option {
|
||||
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);
|
||||
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 {
|
||||
@@ -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 {
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user