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

changes

Browse Source
This commit is contained in:
Bryce
2026-04-04 06:41:02 -07:00
parent 3fc5e9f215
commit 078b3a4cdd
26 changed files with 704 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
tools/ora_editor/templates/components/canvas.html
View File

@@ -1,110 +0,0 @@
<!-- Main canvas area component for ORA Editor -->
<main class="flex-1 bg-gray-800 rounded-lg border border-gray-700 p-4 relative overflow-auto" style="min-height: 600px;">
<div id="imageContainer"
class="relative inline-block origin-top-left"
:style="`width: ${imageWidth}px; height: ${imageHeight}px; transform: scale(${scale / 100});`">
<!-- Layer images stacked -->
<div class="relative w-full h-full">
<template x-for="layer in layers" :key="'layer-' + layer.name">
<div x-show="layer.visible" class="absolute inset-0 w-full h-full">
<img
:src="'/api/image/layer/' + encodeURIComponent(layer.name) + '?ora_path=' + encodeURIComponent(oraPath)"
class="absolute inset-0 w-full h-full object-contain pointer-events-none"
>
</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>
<!-- 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">
<div
class="absolute w-4 h-4 bg-white border-2 border-red-500 rounded-full cursor-move z-10"
style="transform: translate(-50%, -50%);"
:style="`left: ${point.x * 100}%; top: ${point.y * 100}%`"
@mousedown="startDragPoint($event, idx)"
@touchstart.prevent="startDragPoint($event, idx)"
></div>
</template>
</template>
<!-- Polygon overlay after drawing -->
<img
x-show="!isDrawing && polygonPreviewUrl"
:src="polygonPreviewUrl"
class="absolute inset-0 w-full h-full object-contain pointer-events-none"
alt="Polygon overlay"
>
<!-- Drawing canvas (only when actively drawing) -->
<canvas
id="polygonCanvas"
x-show="isDrawing"
:width="imageWidth"
: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>
</div>
<!-- Loading indicator -->
<div x-show="isLoading && !error" class="flex items-center justify-center h-full">
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
</div>
<!-- Error message -->
<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 && !isSamMode" class="mt-2 text-sm text-gray-400">
Use SAM rough mask or draw a polygon, then extract mask.
</div>
</main>

59
tools/ora_editor/templates/components/sidebar.html
View File

@@ -1,8 +1,34 @@
<!-- 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>
@@ -29,12 +55,12 @@
<!-- 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">Rename</button>
<button @click="deleteLayer()" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm">Delete</button>
<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">▲ Up</button>
<button @click="reorderLayer('down')" class="bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded text-sm">▼ Down</button>
<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>
@@ -42,7 +68,7 @@
<!-- 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"
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>
@@ -52,6 +78,11 @@
<!-- 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>
@@ -86,14 +117,14 @@
<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"
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-1.5 rounded text-sm transition"
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>
@@ -102,7 +133,7 @@
<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"
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>
@@ -136,7 +167,7 @@
<button
@click="discardRoughMask()"
class="w-full bg-gray-600 hover:bg-gray-500 px-3 py-1.5 rounded text-sm"
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>
@@ -155,15 +186,15 @@
<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-1.5 rounded text-sm transition">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-1.5 rounded text-sm transition">Done</button>
<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-1.5 rounded text-sm transition">Clear</button>
<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>
@@ -238,7 +269,7 @@
<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"
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>
@@ -252,7 +283,7 @@
<!-- Back to review mode -->
<button
@click="cancelAddMode()"
class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-lg"
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>