Add multi-mask extraction with count selector and navigation
- Add count selector (1-10) for generating multiple mask variations - Each mask gets a unique random seed - Add left/right arrow navigation in mask preview modal when multiple masks exist - Batch storage system for tracking multiple concurrent extractions - Webhook handler now uses batch_id:mask_index for routing responses
This commit is contained in:
@@ -110,13 +110,35 @@
|
||||
<span class="text-sm">Use polygon hint</span>
|
||||
</label>
|
||||
|
||||
<!-- Count selector -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-400">Generate:</label>
|
||||
<select
|
||||
x-model.number="maskCount"
|
||||
:disabled="isExtracting"
|
||||
class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-white disabled:bg-gray-800"
|
||||
>
|
||||
<option value="1">1 mask</option>
|
||||
<option value="2">2 masks</option>
|
||||
<option value="3">3 masks</option>
|
||||
<option value="4">4 masks</option>
|
||||
<option value="5">5 masks</option>
|
||||
<option value="6">6 masks</option>
|
||||
<option value="7">7 masks</option>
|
||||
<option value="8">8 masks</option>
|
||||
<option value="9">9 masks</option>
|
||||
<option value="10">10 masks</option>
|
||||
</select>
|
||||
<span class="text-xs text-gray-500">(different seeds)</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="extractMask()"
|
||||
:disabled="!maskSubject.trim() || isExtracting"
|
||||
class="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2"
|
||||
>
|
||||
<span x-show="isExtracting" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
|
||||
<span x-show="!isExtracting">Extract Mask</span>
|
||||
<span x-show="!isExtracting">Extract Mask<span x-show="maskCount > 1">s</span></span>
|
||||
<span x-show="isExtracting">Extracting...</span>
|
||||
</button>
|
||||
|
||||
|
||||
@@ -135,11 +135,14 @@ function oraEditor() {
|
||||
// Mask extraction
|
||||
maskSubject: '',
|
||||
usePolygonHint: true,
|
||||
maskCount: 3,
|
||||
isExtracting: false,
|
||||
maskViewMode: 'with-bg',
|
||||
showMaskModal: false,
|
||||
tempMaskPath: null,
|
||||
tempMaskUrl: null,
|
||||
tempMaskPaths: [],
|
||||
currentMaskIndex: 0,
|
||||
lastError: '',
|
||||
|
||||
// Settings
|
||||
@@ -586,7 +589,7 @@ function oraEditor() {
|
||||
async extractMask() {
|
||||
if (!this.maskSubject.trim()) return;
|
||||
|
||||
console.log('[ORA EDITOR] Extracting mask for:', this.maskSubject);
|
||||
console.log('[ORA EDITOR] Extracting', this.maskCount, 'masks for:', this.maskSubject);
|
||||
this.isExtracting = true;
|
||||
this.lastError = '';
|
||||
|
||||
@@ -598,7 +601,8 @@ function oraEditor() {
|
||||
subject: this.maskSubject,
|
||||
use_polygon: this.usePolygonHint && this.polygonPoints.length >= 3,
|
||||
ora_path: this.oraPath,
|
||||
comfy_url: this.comfyUrl
|
||||
comfy_url: this.comfyUrl,
|
||||
count: this.maskCount
|
||||
})
|
||||
});
|
||||
|
||||
@@ -608,8 +612,10 @@ function oraEditor() {
|
||||
|
||||
if (!data.success) throw new Error(data.error || 'Failed');
|
||||
|
||||
this.tempMaskPath = data.mask_path;
|
||||
this.tempMaskUrl = data.mask_url || '/api/file/mask?path=' + encodeURIComponent(data.mask_path);
|
||||
this.tempMaskPaths = data.mask_paths || [data.mask_path];
|
||||
this.currentMaskIndex = 0;
|
||||
this.tempMaskPath = this.tempMaskPaths[0];
|
||||
this.tempMaskUrl = data.mask_urls?.[0] || '/api/file/mask?path=' + encodeURIComponent(this.tempMaskPath);
|
||||
this.showMaskModal = true;
|
||||
} catch (e) {
|
||||
console.error('[ORA EDITOR] Error extracting mask:', e);
|
||||
@@ -618,13 +624,31 @@ function oraEditor() {
|
||||
this.isExtracting = false;
|
||||
}
|
||||
},
|
||||
|
||||
get currentMaskPath() {
|
||||
return this.tempMaskPaths[this.currentMaskIndex] || null;
|
||||
},
|
||||
|
||||
rerollMask() {
|
||||
previousMask() {
|
||||
if (this.currentMaskIndex > 0) {
|
||||
this.currentMaskIndex--;
|
||||
this.tempMaskPath = this.tempMaskPaths[this.currentMaskIndex];
|
||||
}
|
||||
},
|
||||
|
||||
nextMask() {
|
||||
if (this.currentMaskIndex < this.tempMaskPaths.length - 1) {
|
||||
this.currentMaskIndex++;
|
||||
this.tempMaskPath = this.tempMaskPaths[this.currentMaskIndex];
|
||||
}
|
||||
},
|
||||
|
||||
rerollMasks() {
|
||||
this.extractMask();
|
||||
},
|
||||
|
||||
async useMask() {
|
||||
if (!this.tempMaskPath) return;
|
||||
async useCurrentMask() {
|
||||
if (!this.currentMaskPath) return;
|
||||
|
||||
let finalEntityName = this.entityName || 'element';
|
||||
const existingLayers = this.layers.filter(l => l.name.startsWith(finalEntityName + '_'));
|
||||
@@ -634,7 +658,7 @@ function oraEditor() {
|
||||
}
|
||||
finalEntityName = `${finalEntityName}_${counter}`;
|
||||
|
||||
console.log('[ORA EDITOR] Adding layer:', finalEntityName);
|
||||
console.log('[ORA EDITOR] Adding layer:', finalEntityName, 'with mask:', this.currentMaskPath);
|
||||
|
||||
await fetch('/api/layer/add', {
|
||||
method: 'POST',
|
||||
@@ -642,7 +666,7 @@ function oraEditor() {
|
||||
body: JSON.stringify({
|
||||
ora_path: this.oraPath,
|
||||
entity_name: finalEntityName,
|
||||
mask_path: this.tempMaskPath
|
||||
mask_path: this.currentMaskPath
|
||||
})
|
||||
});
|
||||
|
||||
@@ -663,6 +687,8 @@ function oraEditor() {
|
||||
this.showMaskModal = false;
|
||||
this.tempMaskPath = null;
|
||||
this.tempMaskUrl = null;
|
||||
this.tempMaskPaths = [];
|
||||
this.currentMaskIndex = 0;
|
||||
},
|
||||
|
||||
// === Krita Integration ===
|
||||
|
||||
@@ -4,7 +4,12 @@
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
||||
<div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border border-gray-600" style="max-height: 90vh; display: flex; flex-direction: column;">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold">Extracted Mask</h2>
|
||||
<h2 class="text-xl font-bold">
|
||||
Extracted Mask
|
||||
<span x-show="tempMaskPaths.length > 1" class="text-sm font-normal text-gray-400 ml-2">
|
||||
(<span x-text="currentMaskIndex + 1"></span> / <span x-text="tempMaskPaths.length"></span>)
|
||||
</span>
|
||||
</h2>
|
||||
<!-- View mode toggle -->
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@@ -20,6 +25,52 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 flex items-center justify-center p-4 relative" style="min-height: 300px; max-height: 50vh;">
|
||||
<!-- Left arrow for multiple masks -->
|
||||
<button
|
||||
x-show="tempMaskPaths.length > 1 && currentMaskIndex > 0"
|
||||
@click="previousMask()"
|
||||
class="absolute left-2 z-10 bg-gray-800 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-2xl"
|
||||
>←</button>
|
||||
|
||||
<div class="relative" style="max-width: 100%; max-height: calc(50vh - 2rem);">
|
||||
<!-- Base image (shown in "with-bg" mode) -->
|
||||
<img
|
||||
x-show="maskViewMode === 'with-bg'"
|
||||
:src="'/api/image/base?ora_path=' + encodeURIComponent(oraPath)"
|
||||
class="border border-gray-600"
|
||||
style="max-width: 100%; max-height: calc(50vh - 2rem);"
|
||||
>
|
||||
<!-- Masked image (transparent where mask is black) -->
|
||||
<img
|
||||
x-show="currentMaskPath"
|
||||
:src="'/api/image/masked?ora_path=' + encodeURIComponent(oraPath) + '&mask_path=' + encodeURIComponent(currentMaskPath)"
|
||||
class="border border-gray-600"
|
||||
:class="maskViewMode === 'with-bg' ? 'absolute inset-0' : ''"
|
||||
style="max-width: 100%; max-height: calc(50vh - 2rem);"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Right arrow for multiple masks -->
|
||||
<button
|
||||
x-show="tempMaskPaths.length > 1 && currentMaskIndex < tempMaskPaths.length - 1"
|
||||
@click="nextMask()"
|
||||
class="absolute right-2 z-10 bg-gray-800 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-2xl"
|
||||
>→</button>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 justify-end">
|
||||
<button @click="rerollMasks()" :disabled="isExtracting" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-4 py-2 rounded transition flex items-center gap-2">
|
||||
<span x-show="isExtracting" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
|
||||
Re-roll
|
||||
</button>
|
||||
<button @click="useCurrentMask()" :disabled="isExtracting || !currentMaskPath" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Use This Mask</button>
|
||||
<button @click="closeMaskModal()" :disabled="isExtracting" class="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 flex items-center justify-center p-4" style="min-height: 300px; max-height: 50vh;">
|
||||
<div class="relative" style="max-width: 100%; max-height: calc(50vh - 2rem);">
|
||||
<!-- Base image (shown in "with-bg" mode) -->
|
||||
|
||||
Reference in New Issue
Block a user