292 lines
15 KiB
HTML
292 lines
15 KiB
HTML
<!-- Sidebar component for ORA Editor -->
|
|
|
|
<!-- Scale slider (mobile only) -->
|
|
<div x-show="oraPath" class="lg:hidden bg-gray-800 rounded p-3 border border-gray-700 mb-4">
|
|
<div class="flex justify-between mb-2">
|
|
<span class="text-sm text-gray-300">Scale:</span>
|
|
<span class="text-sm text-gray-300" x-text="scale + '%'"></span>
|
|
</div>
|
|
<input
|
|
type="range"
|
|
x-model.number="scale"
|
|
min="10"
|
|
max="100"
|
|
step="5"
|
|
class="w-full accent-blue-500 h-2 lg:h-auto mb-2 touch-manipulation"
|
|
>
|
|
<div class="flex gap-2">
|
|
<button @click="scale = 25" class="flex-1 bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">25%</button>
|
|
<button @click="scale = 50" class="flex-1 bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">50%</button>
|
|
<button @click="scale = 100" class="flex-1 bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">100%</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- REVIEW MODE SIDEBAR -->
|
|
<template x-if="mode === 'review'">
|
|
<div>
|
|
<!-- Close dock button (mobile only) -->
|
|
<div class="lg:hidden flex justify-end mb-2">
|
|
<button @click="showDock = false" class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded min-h-[2.5rem] touch-manipulation">✕ Close Dock</button>
|
|
</div>
|
|
|
|
<!-- Layers panel -->
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
|
<h3 class="font-bold mb-3 text-gray-300">Layers</h3>
|
|
|
|
<div class="space-y-2 max-h-96 overflow-y-auto">
|
|
<template x-for="layer in layers" :key="layer.name">
|
|
<div
|
|
@click="selectedLayer = layer.name"
|
|
class="flex items-center gap-2 bg-gray-700 hover:bg-gray-650 rounded px-2 py-1 transition cursor-pointer"
|
|
:class="{ 'bg-gray-600': selectedLayer === layer.name }"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
:checked="layer.visible"
|
|
@change="toggleVisibility(layer.name, $event.target.checked)"
|
|
class="w-4 h-4 rounded"
|
|
title="Toggle visibility"
|
|
>
|
|
<span class="flex-1 text-sm truncate" x-text="layer.name"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Layer edit controls -->
|
|
<div x-show="selectedLayer" class="mt-3 pt-3 border-t border-gray-600 space-y-2">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<button @click="renameLayer()" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">Rename</button>
|
|
<button @click="deleteLayer()" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">Delete</button>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<button @click="reorderLayer('up')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">▲ Up</button>
|
|
<button @click="reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm min-h-[2.5rem] touch-manipulation">▼ Down</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add masked element button -->
|
|
<button
|
|
@click="enterAddMode()"
|
|
class="w-full bg-indigo-600 hover:bg-indigo-700 px-4 py-3 rounded-lg font-bold text-lg min-h-[3rem] touch-manipulation"
|
|
>
|
|
+ Add Masked Element
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ADD MASKED ELEMENT MODE SIDEBAR -->
|
|
<template x-if="mode === 'add'">
|
|
<div>
|
|
<!-- Close dock button (mobile only) -->
|
|
<div class="lg:hidden flex justify-end mb-2">
|
|
<button @click="showDock = false" class="bg-gray-700 hover:bg-gray-600 px-3 py-2 rounded min-h-[2.5rem] touch-manipulation">✕ Close Dock</button>
|
|
</div>
|
|
|
|
<!-- Entity name input -->
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
|
<h3 class="font-bold mb-3 text-gray-300">New Element</h3>
|
|
<input
|
|
type="text"
|
|
x-model="entityName"
|
|
placeholder="Element name (e.g., 'door')"
|
|
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none"
|
|
>
|
|
<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">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 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">
|
|
<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-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation"
|
|
>
|
|
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-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation"
|
|
>
|
|
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 min-h-[2.5rem] touch-manipulation"
|
|
>
|
|
<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="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;`"
|
|
>
|
|
<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-2 rounded text-sm min-h-[2.5rem] touch-manipulation"
|
|
>
|
|
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">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. 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>
|
|
|
|
<div class="flex gap-2">
|
|
<button @click="startDrawing()" :disabled="isDrawing" class="flex-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation">Start Drawing</button>
|
|
<button @click="finishDrawing()" :disabled="!isDrawing || polygonPoints.length < 3" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation">Done</button>
|
|
</div>
|
|
|
|
<div x-show="polygonPoints.length > 0">
|
|
<span class="text-xs text-gray-400">Points: </span><span x-text="polygonPoints.length"></span>
|
|
</div>
|
|
|
|
<button @click="clearPolygon()" :disabled="!isDrawing && polygonPoints.length === 0" class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-3 py-2 rounded text-sm transition min-h-[2.5rem] touch-manipulation">Clear</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mask extraction -->
|
|
<div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
|
<h3 class="font-bold mb-3 text-gray-300">Step 3: Generate Final Mask</h3>
|
|
|
|
<div class="space-y-3">
|
|
<input
|
|
type="text"
|
|
x-model="maskSubject"
|
|
placeholder="e.g., 'the wooden door'"
|
|
:disabled="isExtracting"
|
|
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:border-blue-500 outline-none disabled:bg-gray-800"
|
|
>
|
|
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
x-model="usePolygonHint"
|
|
:disabled="isExtracting || polygonPoints.length < 3"
|
|
class="w-4 h-4 rounded"
|
|
>
|
|
<span class="text-sm">Use polygon hint</span>
|
|
</label>
|
|
|
|
<!-- 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="range"
|
|
x-model.number="denoiseStrength"
|
|
min="10"
|
|
max="100"
|
|
step="5"
|
|
class="w-full accent-teal-500"
|
|
>
|
|
<p class="text-xs text-gray-400 mt-1">Lower = stick closer to rough mask. Higher = more AI creativity.</p>
|
|
</div>
|
|
|
|
<!-- 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
|
|
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 min-h-[2.5rem] touch-manipulation"
|
|
>
|
|
<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">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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back to review mode -->
|
|
<button
|
|
@click="cancelAddMode()"
|
|
class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-lg min-h-[2.5rem] touch-manipulation"
|
|
>
|
|
← Back to Review Mode
|
|
</button>
|
|
</div>
|
|
</template>
|