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

ora editor

Browse Source
This commit is contained in:
Bryce
2026-03-27 23:33:04 -07:00
parent cdc9ca2f92
commit c94988561c
36 changed files with 1564 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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>

150
tools/ora_editor/templates/editor.html
View File

@@ -132,6 +132,15 @@ function oraEditor() {
polygonWidth: 2,
polygonPreviewUrl: null,
// SAM rough mask state
isSamMode: false,
samIncludePoints: [],
samExcludePoints: [],
isSamGenerating: false,
samMaskPath: null,
samMaskUrl: null,
useSamAsStart: true,
// Mask extraction
maskSubject: '',
usePolygonHint: true,
@@ -301,6 +310,7 @@ function oraEditor() {
this.entityName = '';
this.maskSubject = '';
this.clearPolygon();
this.clearSamPoints();
this.scale = 100;
},
@@ -310,6 +320,11 @@ function oraEditor() {
this.isDrawing = false;
this.polygonPoints = [];
this.polygonPreviewUrl = null;
this.isSamMode = false;
this.samIncludePoints = [];
this.samExcludePoints = [];
this.samMaskPath = null;
this.samMaskUrl = null;
const canvas = document.getElementById('polygonCanvas');
if (canvas) {
canvas.style.display = 'none';
@@ -319,6 +334,8 @@ function oraEditor() {
async cancelAddMode() {
if (this.isDrawing) {
this.clearPolygon();
} else if (this.isSamMode) {
this.isSamMode = false;
} else {
this.exitAddMode();
}
@@ -585,6 +602,118 @@ function oraEditor() {
}
},
// === SAM Rough Mask ===
startSamMode() {
console.log('[ORA EDITOR] Starting SAM mode');
this.isSamMode = true;
this.samIncludePoints = [];
this.samExcludePoints = [];
this.samMaskPath = null;
this.samMaskUrl = null;
},
clearSamPoints() {
this.samIncludePoints = [];
this.samExcludePoints = [];
this.samMaskPath = null;
this.samMaskUrl = null;
},
handleSamClick(e) {
if (!this.isSamMode) return;
const container = document.getElementById('imageContainer');
if (!container) return;
const rect = container.getBoundingClientRect();
let x = (e.clientX - rect.left) / rect.width;
let y = (e.clientY - rect.top) / rect.height;
x = Math.max(0, Math.min(1, x));
y = Math.max(0, Math.min(1, y));
this.samIncludePoints.push({ x, y });
console.log('[SAM] Added include point:', x, y);
},
handleSamRightClick(e) {
if (!this.isSamMode) return;
e.preventDefault();
const container = document.getElementById('imageContainer');
if (!container) return;
const rect = container.getBoundingClientRect();
let x = (e.clientX - rect.left) / rect.width;
let y = (e.clientY - rect.top) / rect.height;
x = Math.max(0, Math.min(1, x));
y = Math.max(0, Math.min(1, y));
this.samExcludePoints.push({ x, y });
console.log('[SAM] Added exclude point:', x, y);
},
removeSamPoint(type, idx) {
if (type === 'include') {
this.samIncludePoints.splice(idx, 1);
} else {
this.samExcludePoints.splice(idx, 1);
}
},
async generateSamMask() {
if (this.samIncludePoints.length === 0 || !this.oraPath) return;
console.log('[ORA EDITOR] Generating SAM mask with', this.samIncludePoints.length, 'include points');
this.isSamGenerating = true;
try {
const response = await fetch('/api/sam/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
ora_path: this.oraPath,
include_points: this.samIncludePoints,
exclude_points: this.samExcludePoints,
comfy_url: this.comfyUrl
})
});
const data = await response.json();
console.log('[ORA EDITOR] SAM response:', data);
if (!data.success) throw new Error(data.error || 'Failed');
this.samMaskPath = data.mask_path;
this.samMaskUrl = data.mask_url;
this.isSamMode = false;
} catch (e) {
console.error('[ORA EDITOR] Error generating SAM mask:', e);
this.lastError = e.message;
} finally {
this.isSamGenerating = false;
}
},
useSamMask() {
if (this.samMaskPath) {
this.tempMaskPath = this.samMaskPath;
this.tempMaskUrl = this.samMaskUrl;
this.tempMaskPaths = [this.samMaskPath];
this.currentMaskIndex = 0;
this.showMaskModal = true;
}
},
discardSamMask() {
this.samMaskPath = null;
this.samMaskUrl = null;
this.samIncludePoints = [];
this.samExcludePoints = [];
},
// === Mask Extraction ===
async extractMask() {
if (!this.maskSubject.trim()) return;
@@ -593,17 +722,24 @@ function oraEditor() {
this.isExtracting = true;
this.lastError = '';
const requestBody = {
subject: this.maskSubject,
use_polygon: this.usePolygonHint && this.polygonPoints.length >= 3,
ora_path: this.oraPath,
comfy_url: this.comfyUrl,
count: this.maskCount
};
if (this.useSamAsStart && this.samMaskPath) {
requestBody.start_mask_path = this.samMaskPath;
console.log('[ORA EDITOR] Using SAM mask as starting point:', this.samMaskPath);
}
try {
const response = await fetch('/api/mask/extract', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
subject: this.maskSubject,
use_polygon: this.usePolygonHint && this.polygonPoints.length >= 3,
ora_path: this.oraPath,
comfy_url: this.comfyUrl,
count: this.maskCount
})
body: JSON.stringify(requestBody)
});
const data = await response.json();