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:
2026-03-27 21:36:20 -07:00
parent fb812e57bc
commit c8932fdbf8
5 changed files with 306 additions and 142 deletions

View File

@@ -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>