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>
|
||||
Reference in New Issue
Block a user