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

fix: resolve Auto-Trim canvas CORS block with webSecurity, implement dynamic multi-language localization (EN, TR, DE, RU, AR) with English base

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-23 11:01:25 +03:00
parent dba9ac7642
commit 868d7519a4
3 changed files with 406 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+46 -36
View File
@@ -41,6 +41,16 @@
<span class="badge">Trunçgil AI</span>
</div>
<div class="titlebar-controls">
<!-- Language Switcher Selector -->
<div class="select-wrapper language-select-wrapper" style="width: 76px; height: 26px; margin-right: 8px; -webkit-app-region: no-drag;">
<select id="lang-select" style="padding: 2px 20px 2px 8px; font-size: 11px; height: 100%; border-radius: 6px; background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); font-weight: 600;">
<option value="en">EN</option>
<option value="tr">TR</option>
<option value="de">DE</option>
<option value="ru">RU</option>
<option value="ar">AR</option>
</select>
</div>
<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>
@@ -77,27 +87,27 @@
<circle cx="12" cy="12" r="4" fill="url(#neon-grad)" opacity="0.3" />
</svg>
</div>
<h1>Initializing AI Engine</h1>
<p class="subtitle">Dekupai requires a local Python environment to run the BiRefNet neural network models.</p>
<h1 data-i18n="initWizardTitle">Initializing AI Engine</h1>
<p class="subtitle" data-i18n="initWizardSubtitle">Dekupai requires a local Python environment to run the BiRefNet neural network models.</p>
</div>
<div class="setup-progress-box glass-panel-inner">
<div class="setup-steps">
<div class="step-item" id="step-venv">
<span class="step-dot"></span>
<span class="step-text">Creating isolated virtual environment (.venv)</span>
<span class="step-text" data-i18n="stepVenv">Creating isolated virtual environment (.venv)</span>
</div>
<div class="step-item" id="step-pip">
<span class="step-dot"></span>
<span class="step-text">Upgrading Python package installer (pip)</span>
<span class="step-text" data-i18n="stepPip">Upgrading Python package installer (pip)</span>
</div>
<div class="step-item" id="step-deps">
<span class="step-dot"></span>
<span class="step-text">Installing PyTorch AI Engine (CPU version)</span>
<span class="step-text" data-i18n="stepDeps">Installing PyTorch AI Engine (CPU version)</span>
</div>
<div class="step-item" id="step-libs">
<span class="step-dot"></span>
<span class="step-text">Installing HuggingFace Transformers & PIL library</span>
<span class="step-text" data-i18n="stepLibs">Installing HuggingFace Transformers & PIL library</span>
</div>
</div>
@@ -109,7 +119,7 @@
<div class="wizard-actions">
<button class="btn btn-primary" id="btn-start-setup">
<span>Configure Engine (Automatic)</span>
<span data-i18n="configureEngine">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>
@@ -134,11 +144,11 @@
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
</div>
<h2>Drag & Drop Image Here</h2>
<p class="dropzone-sub">Supports PNG, JPG, JPEG, or WebP formats</p>
<div class="or-separator"><span>OR</span></div>
<h2 data-i18n="dragDropText">Drag & Drop Image Here</h2>
<p class="dropzone-sub" data-i18n="dragDropSub">Supports PNG, JPG, JPEG, or WebP formats</p>
<div class="or-separator"><span data-i18n="orText">OR</span></div>
<button class="btn btn-glass" id="btn-browse">
<span>Browse Local Files</span>
<span data-i18n="browseFiles">Browse Local Files</span>
</button>
</div>
</div>
@@ -215,7 +225,7 @@
<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 data-i18n="autoTrim">Auto-Trim</span>
</button>
<button class="ctrl-btn btn-danger-icon" id="ctrl-reset" title="Reset Image State">
@@ -234,27 +244,27 @@
<section class="tower-group" id="sec-file-info">
<div class="tower-heading">
<span class="step-badge">1</span>
<h3>Source File</h3>
<h3 data-i18n="sourceFile">Source File</h3>
</div>
<div class="info-card glass-panel-inner" id="info-card-empty">
<p class="text-muted text-center py-2">No image loaded</p>
<p class="text-muted text-center py-2" data-i18n="noImage">No image loaded</p>
</div>
<div class="info-card glass-panel-inner hidden" id="info-card-loaded">
<div class="info-row">
<span class="label">Name</span>
<span class="label" data-i18n="fileName">Name</span>
<span class="val truncate" id="info-filename">-</span>
</div>
<div class="info-row">
<span class="label">Resolution</span>
<span class="label" data-i18n="fileResolution">Resolution</span>
<span class="val" id="info-resolution">-</span>
</div>
<div class="info-row">
<span class="label">Size</span>
<span class="label" data-i18n="fileSize">Size</span>
<span class="val" id="info-size">-</span>
</div>
<button class="btn btn-secondary btn-sm w-full" id="btn-change-image" style="margin-top: 10px; border-color: rgba(255, 122, 0, 0.2) !important;">
<svg width="14" height="14" 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="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
<span style="font-size: 11px;">Yeni Görsel Yükle</span>
<span style="font-size: 11px;" data-i18n="newImage">Import New Image</span>
</button>
</div>
</section>
@@ -263,7 +273,7 @@
<section class="tower-group" id="sec-ai-process">
<div class="tower-heading">
<span class="step-badge">2</span>
<h3>Background Removal</h3>
<h3 data-i18n="bgRemoval">Background Removal</h3>
</div>
<button class="btn btn-primary w-full" id="btn-remove-bg" disabled>
@@ -271,7 +281,7 @@
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 data-i18n="extractSubject">Extract Subject</span>
</button>
<!-- Loader panel inside -->
@@ -282,8 +292,8 @@
<circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
</svg>
</div>
<div class="loader-text" id="loader-text">Initializing AI Model...</div>
<div class="loader-subtext" id="loader-subtext">First launch downloads model (~200MB)</div>
<div class="loader-text" id="loader-text" data-i18n="initAI">Initializing AI Model...</div>
<div class="loader-subtext" id="loader-subtext" data-i18n="loadingWeights">First launch downloads model (~200MB)</div>
</div>
</section>
@@ -291,24 +301,24 @@
<section class="tower-group disabled-group" id="sec-canvas-bg">
<div class="tower-heading">
<span class="step-badge">3</span>
<h3>Background Settings</h3>
<h3 data-i18n="bgSettings">Background Settings</h3>
</div>
<div class="bg-mode-tabs glass-panel-inner">
<button class="bg-tab active" data-mode="transparent" id="tab-bg-trans">
<span>Transparent</span>
<span data-i18n="transparent">Transparent</span>
</button>
<button class="bg-tab" data-mode="solid" id="tab-bg-solid">
<span>Solid Color</span>
<span data-i18n="solidColor">Solid Color</span>
</button>
<button class="bg-tab" data-mode="gradient" id="tab-bg-grad">
<span>Gradient</span>
<span data-i18n="gradient">Gradient</span>
</button>
</div>
<!-- Solid Colors Panel -->
<div class="bg-settings-subpanel hidden" id="subpanel-solid">
<label class="panel-sublabel">Select Solid Fill</label>
<label class="panel-sublabel" data-i18n="selectSolid">Select Solid Fill</label>
<div class="color-swatches-grid">
<button class="swatch white active" data-color="#ffffff"></button>
<button class="swatch black" data-color="#000000"></button>
@@ -328,7 +338,7 @@
<!-- Gradients Panel -->
<div class="bg-settings-subpanel hidden" id="subpanel-gradient">
<label class="panel-sublabel">Select High-End Gradient</label>
<label class="panel-sublabel" data-i18n="selectGrad">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>
@@ -350,12 +360,12 @@
<section class="tower-group disabled-group" id="sec-export">
<div class="tower-heading">
<span class="step-badge">4</span>
<h3>Export Studio</h3>
<h3 data-i18n="exportStudio">Export Studio</h3>
</div>
<div class="export-settings-box glass-panel-inner">
<div class="settings-row">
<label for="export-format">Format</label>
<label for="export-format" data-i18n="format">Format</label>
<div class="select-wrapper">
<select id="export-format">
<option value="png">PNG (Lossless)</option>
@@ -367,7 +377,7 @@
<div class="settings-row hidden" id="row-quality-slider">
<div class="slider-labels">
<label for="export-quality">Quality</label>
<label for="export-quality" data-i18n="quality">Quality</label>
<span class="slider-val" id="export-quality-val">90%</span>
</div>
<input type="range" id="export-quality" min="10" max="100" value="90">
@@ -381,7 +391,7 @@
<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 data-i18n="exportMasterpiece">Export Masterpiece</span>
</button>
</section>
</aside>
@@ -412,20 +422,20 @@
<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>
<p style="font-size: 13px; color: var(--text-muted); font-weight: 500;" data-i18n="creditsVision">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>
<p style="font-size: 12px; color: var(--text-muted-dark); line-height: 1.4;" data-i18n="creditsExpertise">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;">
<div style="margin-top: 16px; font-size: 12px; color: var(--text-muted-dark); line-height: 1.5; padding: 0 10px;" data-i18n="creditsDesc">
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>
<span data-i18n="closeCredits">Close Credits</span>
</button>
</div>
</div>