Restructure SAM rough mask workflow for sidebar preview
- Add roughMaskThumbnailScale state with $watch to sync with main scale slider - Update sidebar thumbnail to use transform:scale() for consistent zoom between views - Modify openRoughMaskInNewWindow() to create HTML page with matching scale - Add denoise strength slider (10-100%) visible only when rough mask exists - Backend already supports denoise_strength parameter in prepare_mask_workflow_with_start() - Rough mask auto-clears after successful extraction - Add Playwright tests for UI changes and API parameter acceptance
This commit is contained in:
@@ -66,10 +66,10 @@
|
||||
|
||||
<!-- SAM Rough Mask -->
|
||||
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
||||
<h3 class="font-bold mb-3 text-gray-300">Rough Mask (SAM)</h3>
|
||||
<h3 class="font-bold mb-3 text-gray-300">Step 1: Rough Mask (Optional)</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<p class="text-xs text-gray-400">Click to mark include points (green). Right-click to mark exclude points (red).</p>
|
||||
<p class="text-xs text-gray-400">Click to mark include points (green). Right-click for exclude (red).</p>
|
||||
|
||||
<div x-show="samIncludePoints.length > 0 || samExcludePoints.length > 0" class="text-xs text-gray-300 space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
@@ -109,32 +109,47 @@
|
||||
<span x-show="isSamGenerating">Generating...</span>
|
||||
</button>
|
||||
|
||||
<div x-show="samMaskUrl" class="space-y-2">
|
||||
<p class="text-xs text-green-400">Rough mask ready!</p>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="useSamMask()"
|
||||
class="flex-1 bg-green-600 hover:bg-green-700 px-3 py-1.5 rounded text-sm"
|
||||
<div x-show="roughMaskUrl" class="space-y-2 bg-gray-700 rounded p-3 border border-green-600">
|
||||
<p class="text-xs text-green-400 font-semibold">Rough mask generated!</p>
|
||||
|
||||
<!-- Thumbnail preview with same scale as main view -->
|
||||
<div
|
||||
class="relative flex items-center justify-center bg-gray-800 rounded overflow-auto cursor-pointer"
|
||||
style="height: 200px;"
|
||||
@click.prevent="openRoughMaskInNewWindow()"
|
||||
>
|
||||
<div
|
||||
class="relative opacity-70 hover:opacity-100 transition"
|
||||
:style="`transform: scale(${roughMaskThumbnailScale / 100}); transform-origin: center center;`"
|
||||
>
|
||||
Use as Mask
|
||||
</button>
|
||||
<button
|
||||
@click="discardSamMask()"
|
||||
class="bg-gray-600 hover:bg-gray-500 px-3 py-1.5 rounded text-sm"
|
||||
>
|
||||
Discard
|
||||
</button>
|
||||
<img
|
||||
:src="roughMaskUrl"
|
||||
class="object-contain"
|
||||
style="width: ${imageWidth * roughMaskThumbnailScale / 100}px; height: ${imageHeight * roughMaskThumbnailScale / 100}px;"
|
||||
alt="Rough mask preview"
|
||||
>
|
||||
</div>
|
||||
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<span class="text-xs text-white bg-black bg-opacity-60 px-2 py-1 rounded">Click to view full size</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="discardRoughMask()"
|
||||
class="w-full bg-gray-600 hover:bg-gray-500 px-3 py-1.5 rounded text-sm"
|
||||
>
|
||||
Discard & Start Over
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Polygon tool -->
|
||||
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
||||
<h3 class="font-bold mb-3 text-gray-300">Polygon (Optional)</h3>
|
||||
<h3 class="font-bold mb-3 text-gray-300">Step 2: Polygon (Optional)</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<p class="text-xs text-gray-400">Draw polygon to hint AI where subject is. Leave blank for manual drawing in Krita.</p>
|
||||
<p class="text-xs text-gray-400">Draw polygon to hint AI where subject is. Skip if rough mask is clear enough.</p>
|
||||
|
||||
<label class="block text-xs text-gray-400 mb-1">Color: <input type="color" x-model="polygonColor" class="h-8 w-full rounded cursor-pointer"></label>
|
||||
<label class="block text-xs text-gray-400 mb-1">Width: <input type="number" x-model.number="polygonWidth" min="1" max="10" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1"></label>
|
||||
@@ -154,7 +169,7 @@
|
||||
|
||||
<!-- Mask extraction -->
|
||||
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
||||
<h3 class="font-bold mb-3 text-gray-300">Mask Extraction</h3>
|
||||
<h3 class="font-bold mb-3 text-gray-300">Step 3: Generate Final Mask</h3>
|
||||
|
||||
<div class="space-y-3">
|
||||
<input
|
||||
@@ -175,17 +190,30 @@
|
||||
<span class="text-sm">Use polygon hint</span>
|
||||
</label>
|
||||
|
||||
<label x-show="samMaskPath" class="flex items-center gap-2 cursor-pointer">
|
||||
<!-- Denoise strength slider (only shown when rough mask exists) -->
|
||||
<div x-show="roughMaskPath" class="bg-teal-900 bg-opacity-30 border border-teal-600 rounded p-3">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="text-xs text-teal-400 font-semibold">Denoise Strength</label>
|
||||
<span class="text-xs text-teal-300" x-text="denoiseStrength + '%'"></span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="useSamAsStart"
|
||||
:disabled="isExtracting || !samMaskPath"
|
||||
class="w-4 h-4 rounded"
|
||||
type="range"
|
||||
x-model.number="denoiseStrength"
|
||||
min="10"
|
||||
max="100"
|
||||
step="5"
|
||||
class="w-full accent-teal-500"
|
||||
>
|
||||
<span class="text-sm">Use SAM mask as starting point (0.8 denoise)</span>
|
||||
</label>
|
||||
<p class="text-xs text-gray-400 mt-1">Lower = stick closer to rough mask. Higher = more AI creativity.</p>
|
||||
</div>
|
||||
|
||||
<!-- Count selector -->
|
||||
<!-- Auto-mode indicator when rough mask exists -->
|
||||
<div x-show="roughMaskPath" class="flex items-center gap-2 text-xs text-teal-400">
|
||||
<span class="w-2 h-2 bg-teal-500 rounded-full animate-pulse"></span>
|
||||
<span>Using rough mask as starting point</span>
|
||||
</div>
|
||||
|
||||
<!-- Count selector -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-400">Generate:</label>
|
||||
<select
|
||||
@@ -213,8 +241,8 @@
|
||||
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 x-show="maskCount > 1">s</span></span>
|
||||
<span x-show="isExtracting">Extracting...</span>
|
||||
<span x-show="!isExtracting">Generate Mask<span x-show="maskCount > 1">s</span></span>
|
||||
<span x-show="isExtracting">Generating...</span>
|
||||
</button>
|
||||
|
||||
<div x-show="lastError" class="text-red-400 text-xs" x-text="lastError"></div>
|
||||
|
||||
Reference in New Issue
Block a user