truncgit/dekupai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5a5e07d6fb51266d241ad507220b3acb3fa39aa1
dekupai/index.html
T

466 lines
24 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">
<!-- 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>
<div class="ambient-glow bg-orb-2"></div>
<!-- Custom Sleek Glass Titlebar -->
<header class="app-titlebar">
<div class="titlebar-logo">
<img src="docs/dekupai-logo.png" alt="Logo" style="width: 20px; height: 20px; object-fit: contain; border-radius: 4px;">
<span>DEKUPAI</span>
<span class="badge">Trunçgil AI</span>
</div>
<div class="titlebar-controls">
<!-- Language Switcher Selector -->
<div class="select-wrapper language-select-wrapper" style="width: 96px; 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">English</option>
<option value="tr">Türkçe</option>
<option value="de">Deutsch</option>
<option value="ru">Русский</option>
<option value="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>
<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>
</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>
</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>
</button>
</div>
</header>
<!-- Setup Overlay (Displayed if environment is missing) -->
<div class="overlay-container glass-panel hidden" id="setup-overlay">
<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" />
<circle cx="12" cy="12" r="4" fill="url(#neon-grad)" opacity="0.3" />
</svg>
</div>
<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" 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" 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" 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" data-i18n="stepLibs">Installing HuggingFace Transformers & PIL library</span>
</div>
</div>
<div class="progress-bar-container">
<div class="progress-bar" id="setup-progress-bar"></div>
</div>
<div class="progress-status" id="setup-status-text">Ready to configure environment.</div>
</div>
<div class="wizard-actions">
<button class="btn btn-primary" id="btn-start-setup">
<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>
</svg>
</button>
</div>
</div>
</div>
<!-- Main Grid Workspace -->
<main class="app-workspace">
<!-- Left Workspace Screen -->
<section class="workspace-viewport glass-panel">
<!-- Empty Dropzone State -->
<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">
<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>
</svg>
</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 data-i18n="browseFiles">Browse Local Files</span>
</button>
</div>
</div>
<!-- Editor Canvas Workspace -->
<div class="editor-container hidden" id="editor-container">
<!-- Checkerboard patterned preview -->
<div class="preview-canvas-wrapper checkerboard" id="canvas-wrapper">
<img id="image-element" src="" alt="Workspace Image">
<div class="canvas-ambient-backdrop" id="canvas-bg-overlay"></div>
</div>
<!-- Float Crop Workspace Controls -->
<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>
</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>
</button>
</div>
<div class="divider-v"></div>
<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>
</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>
</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>
</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>
</button>
</div>
<div class="divider-v"></div>
<!-- Aspect ratio selectors -->
<div class="aspect-presets select-wrapper">
<select id="crop-ratio-select">
<option value="NaN">Free Crop</option>
<option value="1">1:1 Square</option>
<option value="1.77777777778">16:9 Cinema</option>
<option value="1.33333333333">4:3 Photo</option>
<option value="0.75">3:4 Portrait</option>
<option value="0.5625">9:16 Story</option>
</select>
</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>
<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 data-i18n="autoTrim">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>
</button>
</div>
</div>
</section>
<!-- Right Control Panel Tower -->
<aside class="control-tower glass-panel">
<!-- Section 1: File Properties Info -->
<section class="tower-group" id="sec-file-info">
<div class="tower-heading">
<span class="step-badge">1</span>
<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" 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" data-i18n="fileName">Name</span>
<span class="val truncate" id="info-filename">-</span>
</div>
<div class="info-row">
<span class="label" data-i18n="fileResolution">Resolution</span>
<span class="val" id="info-resolution">-</span>
</div>
<div class="info-row">
<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;" data-i18n="newImage">Import New Image</span>
</button>
</div>
</section>
<!-- Section 2: AI Background Remover Panel -->
<section class="tower-group" id="sec-ai-process">
<div class="tower-heading">
<span class="step-badge">2</span>
<h3 data-i18n="bgRemoval">Background Removal</h3>
</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>
<span data-i18n="extractSubject">Extract Subject</span>
</button>
<!-- Loader panel inside -->
<div class="loader-box glass-panel-inner hidden" id="loader-box">
<div class="loader-ring-wrapper">
<div class="glow-ring"></div>
<svg class="loader-ring" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
</svg>
</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>
<!-- Section 3: Background Overlay Customizer -->
<section class="tower-group disabled-group" id="sec-canvas-bg">
<div class="tower-heading">
<span class="step-badge">3</span>
<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 data-i18n="transparent">Transparent</span>
</button>
<button class="bg-tab" data-mode="solid" id="tab-bg-solid">
<span data-i18n="solidColor">Solid Color</span>
</button>
<button class="bg-tab" data-mode="gradient" id="tab-bg-grad">
<span data-i18n="gradient">Gradient</span>
</button>
</div>
<!-- Solid Colors Panel -->
<div class="bg-settings-subpanel hidden" id="subpanel-solid">
<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>
<button class="swatch red" data-color="#ef4444"></button>
<button class="swatch blue" data-color="#3b82f6"></button>
<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>
</button>
</div>
</div>
<!-- Gradients Panel -->
<div class="bg-settings-subpanel hidden" id="subpanel-gradient">
<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>
<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>
<!-- Section 4: Export Engine Panel -->
<section class="tower-group disabled-group" id="sec-export">
<div class="tower-heading">
<span class="step-badge">4</span>
<h3 data-i18n="exportStudio">Export Studio</h3>
</div>
<div class="export-settings-box glass-panel-inner">
<div class="settings-row">
<label for="export-format" data-i18n="format">Format</label>
<div class="select-wrapper">
<select id="export-format">
<option value="png">PNG (Lossless)</option>
<option value="jpeg">JPEG (Solid BG)</option>
<option value="webp">WebP (Optimized)</option>
</select>
</div>
</div>
<div class="settings-row hidden" id="row-quality-slider">
<div class="slider-labels">
<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">
</div>
</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>
<span data-i18n="exportMasterpiece">Export Masterpiece</span>
</button>
</section>
</aside>
</main>
<!-- Global Alert/Notification Toast Banner -->
<div class="toast-notification glass-panel-inner hidden" id="toast-banner">
<div class="toast-icon" id="toast-icon"></div>
<div class="toast-content">
<div class="toast-title" id="toast-title">Notification</div>
<div class="toast-message" id="toast-message">Message details goes here.</div>
</div>
<button class="toast-close" id="btn-close-toast">&times;</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">
<img class="glow-icon animated-float" src="docs/dekupai-logo.png" alt="Logo" style="width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 0 15px rgba(255, 122, 0, 0.45)); border-radius: 8px;">
</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;" 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;" 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;" 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 data-i18n="closeCredits">Close Credits</span>
</button>
</div>
</div>
</div>
<!-- Error Overlay Modal (Displayed when background extraction fails) -->
<div class="overlay-container glass-panel hidden" id="error-overlay" style="width: 480px; text-align: center; z-index: 100020;">
<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 9v4M12 17h.01" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<h1 style="font-size: 24px; color: #ef4444; margin-bottom: 4px; font-family: var(--font-heading);" data-i18n="errorModalTitle">Process Error</h1>
<p class="subtitle" style="font-size: 12.5px;" data-i18n="errorModalSubtitle">We encountered an issue while segmenting your image.</p>
</div>
<div class="glass-panel-inner" style="margin-top: 10px; text-align: left; max-height: 180px; overflow-y: auto; background: rgba(239, 68, 68, 0.04); border-color: rgba(239, 68, 68, 0.15); padding: 14px !important;">
<div style="font-family: monospace; font-size: 11px; color: #f87171; white-space: pre-wrap; word-break: break-all; line-height: 1.4;" id="error-overlay-log">Error log details...</div>
</div>
<div class="glass-panel-inner" style="margin-top: 10px; text-align: center; background: rgba(255, 255, 255, 0.01); border-color: rgba(255, 255, 255, 0.04); padding: 16px !important;">
<p style="font-size: 12.5px; line-height: 1.5; color: var(--text-muted); font-weight: 500;" data-i18n="errorModalSuggestion">
The subject in the image you want to extract might be too blended or visually indistinguishable from its background. Please try another image with a clearer, higher-contrast subject.
</p>
</div>
<div class="wizard-actions" style="margin-top: 12px; width: 100%;">
<button class="btn btn-secondary w-full" id="btn-close-error" style="border-color: rgba(239, 68, 68, 0.2) !important;">
<span data-i18n="closeBtn">Close</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>
Reference in New Issue View Git Blame Copy Permalink