ora editor
This commit is contained in:
@@ -17,6 +17,40 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- SAM Include points (green) -->
|
||||
<template x-if="mode === 'add' && isSamMode">
|
||||
<template x-for="(point, idx) in samIncludePoints" :key="'sam-include-' + idx">
|
||||
<div
|
||||
class="absolute w-5 h-5 bg-green-500 border-2 border-white rounded-full cursor-move z-20 flex items-center justify-center text-xs font-bold text-white"
|
||||
style="transform: translate(-50%, -50%);"
|
||||
:style="`left: ${point.x * 100}%; top: ${point.y * 100}%`"
|
||||
@contextmenu.prevent="removeSamPoint('include', idx)"
|
||||
x-text="idx + 1"
|
||||
></div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- SAM Exclude points (red) -->
|
||||
<template x-if="mode === 'add' && isSamMode">
|
||||
<template x-for="(point, idx) in samExcludePoints" :key="'sam-exclude-' + idx">
|
||||
<div
|
||||
class="absolute w-5 h-5 bg-red-500 border-2 border-white rounded-full cursor-move z-20 flex items-center justify-center text-xs font-bold text-white"
|
||||
style="transform: translate(-50%, -50%);"
|
||||
:style="`left: ${point.x * 100}%; top: ${point.y * 100}%`"
|
||||
@contextmenu.prevent="removeSamPoint('exclude', idx)"
|
||||
x-text="'X'"
|
||||
></div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- SAM mask preview overlay -->
|
||||
<img
|
||||
x-show="samMaskUrl"
|
||||
:src="samMaskUrl"
|
||||
class="absolute inset-0 w-full h-full object-contain pointer-events-none z-15 opacity-50"
|
||||
alt="SAM mask preview"
|
||||
>
|
||||
|
||||
<!-- Polygon points markers (draggable) - shown in add mode -->
|
||||
<template x-if="mode === 'add' && polygonPoints.length > 0">
|
||||
<template x-for="(point, idx) in polygonPoints" :key="'point-' + idx">
|
||||
@@ -46,6 +80,15 @@
|
||||
:height="imageHeight"
|
||||
class="absolute inset-0 cursor-crosshair pointer-events-auto border-2 border-dashed border-blue-500 opacity-90"
|
||||
></canvas>
|
||||
|
||||
<!-- SAM click canvas -->
|
||||
<div
|
||||
x-show="isSamMode"
|
||||
id="samCanvas"
|
||||
class="absolute inset-0 cursor-crosshair z-10"
|
||||
@click="handleSamClick($event)"
|
||||
@contextmenu.prevent="handleSamRightClick($event)"
|
||||
></div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -60,13 +103,16 @@
|
||||
<div x-show="error" class="text-red-400 text-center mt-8" x-text="error"></div>
|
||||
|
||||
<!-- Mode-specific instructions -->
|
||||
<div x-show="isSamMode" class="mt-2 text-sm text-gray-400">
|
||||
Left-click to add include points (green). Right-click to add exclude points (red). Right-click on point to remove.
|
||||
</div>
|
||||
<div x-show="isDrawing" class="mt-2 text-sm text-gray-400">
|
||||
Click to add points. Drag points to adjust. Double-click or Enter to finish, Escape to cancel.
|
||||
</div>
|
||||
<div x-show="mode === 'add' && !isDrawing && polygonPoints.length >= 3" class="mt-2 text-sm text-gray-400">
|
||||
Drag points to adjust polygon, then extract mask or open in Krita.
|
||||
</div>
|
||||
<div x-show="mode === 'add' && !isDrawing && !polygonPreviewUrl && polygonPoints.length < 3" class="mt-2 text-sm text-gray-400">
|
||||
Draw a polygon (optional) then extract mask, or use Open in Krita to annotation manually.
|
||||
<div x-show="mode === 'add' && !isDrawing && !polygonPreviewUrl && polygonPoints.length < 3 && !isSamMode" class="mt-2 text-sm text-gray-400">
|
||||
Use SAM rough mask or draw a polygon, then extract mask.
|
||||
</div>
|
||||
</main>
|
||||
@@ -64,6 +64,71 @@
|
||||
<p class="text-xs text-gray-400 mt-1">Will create layer: <span x-text="entityName ? entityName + '_0' : 'element_0'"></span></p>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<span class="w-3 h-3 bg-green-500 rounded-full"></span>
|
||||
<span>Include: <span x-text="samIncludePoints.length"></span></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 bg-red-500 rounded-full"></span>
|
||||
<span>Exclude: <span x-text="samExcludePoints.length"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="startSamMode()"
|
||||
:disabled="isSamMode"
|
||||
class="flex-1 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-600 px-3 py-1.5 rounded text-sm transition"
|
||||
>
|
||||
Start
|
||||
</button>
|
||||
<button
|
||||
@click="clearSamPoints()"
|
||||
:disabled="samIncludePoints.length === 0 && samExcludePoints.length === 0"
|
||||
class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-1.5 rounded text-sm transition"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="generateSamMask()"
|
||||
:disabled="samIncludePoints.length === 0 || isSamGenerating"
|
||||
class="w-full bg-teal-600 hover:bg-teal-700 disabled:bg-gray-600 px-4 py-2 rounded transition flex items-center justify-center gap-2"
|
||||
>
|
||||
<span x-show="isSamGenerating" class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-white"></span>
|
||||
<span x-show="!isSamGenerating">Generate Rough Mask</span>
|
||||
<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"
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
</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>
|
||||
@@ -110,6 +175,16 @@
|
||||
<span class="text-sm">Use polygon hint</span>
|
||||
</label>
|
||||
|
||||
<label x-show="samMaskPath" class="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="useSamAsStart"
|
||||
:disabled="isExtracting || !samMaskPath"
|
||||
class="w-4 h-4 rounded"
|
||||
>
|
||||
<span class="text-sm">Use SAM mask as starting point (0.8 denoise)</span>
|
||||
</label>
|
||||
|
||||
<!-- Count selector -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-400">Generate:</label>
|
||||
|
||||
Reference in New Issue
Block a user