fix: resolve space-in-argument bug and implement premium centered glassmorphic error overlay modal

index.html

@@ -441,6 +441,38 @@
     </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>

main.js

@@ -111,7 +111,7 @@ ipcMain.handle('remove-background', async (event, { inputPath, outputPath }) =>
     console.log(`[Main Process] Spawning background removal: ${venvPython} ${processScript}`);
     // Spawn venv python to run process.py
     const args = ['--input', inputPath, '--output', outputPath];
-    const process = spawn(venvPython, [processScript, ...args], { shell: true });
+    const process = spawn(venvPython, [processScript, ...args], { shell: false });
 
     let stderrData = '';
 

renderer.js

@@ -100,7 +100,12 @@ const elements = {
   toastBanner: document.getElementById('toast-banner'),
   toastTitle: document.getElementById('toast-title'),
   toastMessage: document.getElementById('toast-message'),
-  btnCloseToast: document.getElementById('btn-close-toast')
+  btnCloseToast: document.getElementById('btn-close-toast'),
+  
+  // Error Overlay Modal
+  errorOverlay: document.getElementById('error-overlay'),
+  errorOverlayLog: document.getElementById('error-overlay-log'),
+  btnCloseError: document.getElementById('btn-close-error')
 };
 
 // --- INITIALIZE & ENVIRONMENT CHECKS ---
@@ -133,6 +138,11 @@ function setupTitlebarListeners() {
   elements.btnCloseCredits.addEventListener('click', () => {
     elements.creditsOverlay.classList.add('hidden');
   });
+
+  // Close Error Modal
+  elements.btnCloseError.addEventListener('click', () => {
+    elements.errorOverlay.classList.add('hidden');
+  });
 }
 
 // Workspace Initialization
@@ -598,7 +608,11 @@ const TRANSLATIONS = {
     toastExportFailed: "Export Failed",
     toastExportFailedMsg: "Save operation failed.",
     toastExportError: "Export Error",
-    showInExplorer: "Show in File Explorer"
+    showInExplorer: "Show in File Explorer",
+    errorModalTitle: "Process Error",
+    errorModalSubtitle: "We encountered an issue while segmenting your image.",
+    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.",
+    closeBtn: "Close"
   },
   tr: {
     title: "Dekupai - Trunçgil AI Dekupaj",
@@ -682,7 +696,11 @@ const TRANSLATIONS = {
     toastExportFailed: "Dışa Aktarma Başarısız",
     toastExportFailedMsg: "Kaydetme işlemi başarısız oldu.",
     toastExportError: "Dışa Aktarma Hatası",
-    showInExplorer: "Dosya Gezgininde Göster"
+    showInExplorer: "Dosya Gezgininde Göster",
+    errorModalTitle: "İşlem Hatası",
+    errorModalSubtitle: "Görsel dekupe edilirken yapay zeka işleminde bir sorunla karşılaşıldı.",
+    errorModalSuggestion: "Dekupe etmek istediğiniz görsel, arka planıyla ayırt edilemeyecek kadar benzer veya karmaşık olabilir. Lütfen öznenin arka plandan daha net ayırt edilebildiği, daha yüksek kontrastlı başka bir görsel deneyin.",
+    closeBtn: "Kapat"
   },
   de: {
     title: "Dekupai - Trunçgil AI Dekupage",
@@ -766,7 +784,11 @@ const TRANSLATIONS = {
     toastExportFailed: "Export fehlgeschlagen",
     toastExportFailedMsg: "Speichervorgang fehlgeschlagen.",
     toastExportError: "Exportfehler",
-    showInExplorer: "Im Datei-Explorer anzeigen"
+    showInExplorer: "Im Datei-Explorer anzeigen",
+    errorModalTitle: "Verarbeitungsfehler",
+    errorModalSubtitle: "Beim Segmentieren Ihres Bildes ist ein Problem aufgetreten.",
+    errorModalSuggestion: "Das Motiv auf dem Bild, das Sie freistellen möchten, ist möglicherweise zu stark mit dem Hintergrund verschmolzen oder visuell nicht unterscheidbar. Bitte versuchen Sie es mit einem anderen Bild mit einem deutlicheren, kontrastreicheren Motiv.",
+    closeBtn: "Schließen"
   },
   ru: {
     title: "Dekupai - Trunçgil AI Декупаж",
@@ -850,7 +872,11 @@ const TRANSLATIONS = {
     toastExportFailed: "Ошибка экспорта",
     toastExportFailedMsg: "Операция сохранения не удалась.",
     toastExportError: "Ошибка экспорта",
-    showInExplorer: "Показать в проводнике"
+    showInExplorer: "Показать в проводнике",
+    errorModalTitle: "Ошибка обработки",
+    errorModalSubtitle: "При сегментации вашего изображения возникла проблема.",
+    errorModalSuggestion: "Объект на изображении, который вы хотите вырезать, может быть слишком сливающимся или визуально неотличимым от фона. Пожалуйста, попробуйте другое изображение с более четким и контрастным объектом.",
+    closeBtn: "Закрыть"
   },
   ar: {
     title: "Dekupai - Trunçgil AI إزالة الخلفية",
@@ -934,7 +960,11 @@ const TRANSLATIONS = {
     toastExportFailed: "فشل التصدير",
     toastExportFailedMsg: "فشلت عملية الحفظ.",
     toastExportError: "خطأ في التصدير",
-    showInExplorer: "عرض في مستكشف الملفات"
+    showInExplorer: "عرض في مستكشف الملفات",
+    errorModalTitle: "خطأ في المعالجة",
+    errorModalSubtitle: "واجهتنا مشكلة أثناء تقسيم صورتك باستخدام الذكاء الاصطناعي.",
+    errorModalSuggestion: "قد يكون العنصر في الصورة التي تريد قصها مدمجًا للغاية أو غير قابل للتمييز بصريًا عن خلفيته. يرجى محاولة استخدام صورة أخرى تحتوي على عنصر أكثر وضوحًا وتباينًا.",
+    closeBtn: "إغلاق"
   }
 };
 
@@ -1109,10 +1139,12 @@ async function executeBackgroundRemoval() {
       }, 300);
 
     } else {
-      showToast(getTrans('toastTitleError'), result.error || getTrans('toastSetupErrorMsg'), "error");
+      elements.errorOverlayLog.innerText = result.error || getTrans('toastSetupErrorMsg');
+      elements.errorOverlay.classList.remove('hidden');
     }
   } catch (err) {
-    showToast(getTrans('toastTitleError'), err.message, "error");
+    elements.errorOverlayLog.innerText = err.message;
+    elements.errorOverlay.classList.remove('hidden');
   } finally {
     elements.loaderBox.classList.add('hidden');
     elements.btnRemoveBg.classList.remove('hidden');