Phase 4: Background Removal (Transformers.js)

- Added @xenova/transformers dependency
- useBackgroundRemoval hook with RMBG-1.4 model
- Client-side background removal with progress indicator
- Background removal button in properties panel (image elements only)
- ~170MB model cached after first download

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Khalid A
2026-04-21 01:19:03 -05:00
parent 2acf674aaa
commit 4a735e2f2e
5 changed files with 226 additions and 1 deletions

View File

@@ -490,6 +490,54 @@ input, textarea, select {
color: white;
}
.bg-removal-container {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.bg-removal-btn {
width: 100%;
padding: 0.75rem;
background: linear-gradient(135deg, #8b5cf6, #ec4899);
color: white;
border: none;
border-radius: var(--radius-md);
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.bg-removal-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.bg-removal-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.bg-removal-hint {
font-size: 0.7rem;
color: var(--text-muted);
margin: 0.5rem 0 0 0;
line-height: 1.4;
}
.spinner-small {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Responsive */
@media (max-width: 900px) {
.app-layout {