notid/ai-game-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add multi-mask extraction with count selector and navigation

Browse Source 
- 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:
Bryce
2026-03-27 21:36:20 -07:00
parent fb812e57bc
commit c8932fdbf8
5 changed files with 306 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
tools/ora_editor/templates/modals/mask_preview.html
View File

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