Restructure ORA editor into modular blueprints with browse dialog
- Split app.py into route blueprints (files, layers, images, polygon, mask, krita) - Create services layer (polygon_storage, comfyui, file_browser) - Extract config constants to config.py - Split templates into Jinja partials (base, components, modals) - Add browse dialog for visual file navigation - Add /api/browse endpoint for directory listing
This commit is contained in:
21
tools/ora_editor/templates/base.html
Normal file
21
tools/ora_editor/templates/base.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}ORA Editor{% endblock %}</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<style>
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: #374151; }
|
||||
::-webkit-scrollbar-thumb { background: #6B7280; border-radius: 4px; }
|
||||
</style>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="bg-gray-900 text-white">
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
72
tools/ora_editor/templates/components/canvas.html
Normal file
72
tools/ora_editor/templates/components/canvas.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
</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="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>
|
||||
</main>
|
||||
135
tools/ora_editor/templates/components/sidebar.html
Normal file
135
tools/ora_editor/templates/components/sidebar.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!-- Sidebar component for ORA Editor -->
|
||||
|
||||
<!-- REVIEW MODE SIDEBAR -->
|
||||
<template x-if="mode === 'review'">
|
||||
<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">Rename</button>
|
||||
<button @click="deleteLayer()" class="bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm">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>
|
||||
</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"
|
||||
>
|
||||
+ Add Masked Element
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- ADD MASKED ELEMENT MODE SIDEBAR -->
|
||||
<template x-if="mode === 'add'">
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<div class="space-y-3">
|
||||
<p class="text-xs text-gray-400">Draw polygon to hint AI where subject is. Leave blank for manual drawing in Krita.</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-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>
|
||||
</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>
|
||||
</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">Mask Extraction</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>
|
||||
|
||||
<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"
|
||||
>
|
||||
<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">Extract Mask</span>
|
||||
<span x-show="isExtracting">Extracting...</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"
|
||||
>
|
||||
← Back to Review Mode
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load Diff
68
tools/ora_editor/templates/modals/browse.html
Normal file
68
tools/ora_editor/templates/modals/browse.html
Normal file
@@ -0,0 +1,68 @@
|
||||
<!-- Browse modal for file selection -->
|
||||
|
||||
<div x-show="showBrowseModal" @keydown.escape.window="closeBrowseModal()"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
||||
<div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border border-gray-600" style="max-height: 80vh; display: flex; flex-direction: column;">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold">Open File</h2>
|
||||
<div class="text-sm text-gray-400">
|
||||
Current: <span x-text="browsePath || '/'"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Directory listing -->
|
||||
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 p-2" style="min-height: 300px;">
|
||||
<!-- Parent directory -->
|
||||
<div
|
||||
x-show="browsePath"
|
||||
@click="navigateBrowseParent()"
|
||||
class="flex items-center gap-2 p-2 hover:bg-gray-600 rounded cursor-pointer text-gray-300"
|
||||
>
|
||||
<span class="text-lg">📁</span>
|
||||
<span>..</span>
|
||||
</div>
|
||||
|
||||
<!-- Directories -->
|
||||
<template x-for="dir in browseDirectories" :key="'dir-' + dir.path">
|
||||
<div
|
||||
@click="navigateBrowseDirectory(dir.path)"
|
||||
class="flex items-center gap-2 p-2 hover:bg-gray-600 rounded cursor-pointer"
|
||||
>
|
||||
<span class="text-lg">📁</span>
|
||||
<span x-text="dir.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Files -->
|
||||
<template x-for="file in browseFiles" :key="'file-' + file.path">
|
||||
<div
|
||||
@click="selectBrowseFile(file)"
|
||||
@dblclick="openBrowseFile(file)"
|
||||
class="flex items-center gap-2 p-2 hover:bg-gray-600 rounded cursor-pointer"
|
||||
:class="{ 'bg-blue-600': browseSelectedPath === file.path }"
|
||||
>
|
||||
<span class="text-lg" x-text="file.type === 'ora' ? '📄' : '🖼️'"></span>
|
||||
<span x-text="file.name"></span>
|
||||
<span class="text-xs text-gray-400 ml-auto uppercase" x-text="file.type"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Empty state -->
|
||||
<div x-show="browseDirectories.length === 0 && browseFiles.length === 0" class="text-gray-400 text-center py-8">
|
||||
No PNG or ORA files in this directory
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex gap-4 justify-end">
|
||||
<button @click="closeBrowseModal()" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition">Cancel</button>
|
||||
<button
|
||||
@click="openSelectedFile()"
|
||||
:disabled="!browseSelectedPath"
|
||||
class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition"
|
||||
>
|
||||
Open Selected
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
24
tools/ora_editor/templates/modals/krita.html
Normal file
24
tools/ora_editor/templates/modals/krita.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!-- Krita modal for ORA Editor -->
|
||||
|
||||
<div x-show="showKritaModal" @keydown.escape.window="closeKritaModal()"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
||||
<div class="bg-gray-800 rounded-lg p-6 max-w-lg w-full mx-4 border border-gray-600">
|
||||
<h2 class="text-xl font-bold mb-4">Open in Krita</h2>
|
||||
|
||||
<p class="text-gray-300 mb-4">File exported to:</p>
|
||||
|
||||
<div class="bg-gray-700 rounded p-3 mb-4 font-mono text-sm text-green-400 break-all" x-text="kritaTempPath"></div>
|
||||
|
||||
<p class="text-gray-400 text-sm mb-4">Copy the path and open it in Krita manually. Browsers cannot open local files directly.</p>
|
||||
|
||||
<div class="flex gap-4 justify-end">
|
||||
<button
|
||||
@click="copyKritaPath()"
|
||||
:class="kritaPathCopied ? 'bg-green-600' : 'bg-blue-600 hover:bg-blue-700'"
|
||||
class="px-4 py-2 rounded transition"
|
||||
x-text="kritaPathCopied ? 'Copied!' : 'Copy Path'"
|
||||
></button>
|
||||
<button @click="closeKritaModal()" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
49
tools/ora_editor/templates/modals/mask_preview.html
Normal file
49
tools/ora_editor/templates/modals/mask_preview.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!-- Mask preview modal for ORA Editor -->
|
||||
|
||||
<div x-show="showMaskModal" @keydown.escape.window="closeMaskModal()"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
||||
<div class="bg-gray-800 rounded-lg p-6 max-w-2xl w-full mx-4 border border-gray-600" style="max-height: 90vh; display: flex; flex-direction: column;">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-bold">Extracted Mask</h2>
|
||||
<!-- View mode toggle -->
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="maskViewMode = 'with-bg'"
|
||||
:class="maskViewMode === 'with-bg' ? 'bg-blue-600' : 'bg-gray-600'"
|
||||
class="px-3 py-1 rounded text-sm font-medium"
|
||||
>With Background</button>
|
||||
<button
|
||||
@click="maskViewMode = 'masked-only'"
|
||||
:class="maskViewMode === 'masked-only' ? 'bg-green-600' : 'bg-gray-600'"
|
||||
class="px-3 py-1 rounded text-sm font-medium"
|
||||
>Masked Only</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 flex items-center justify-center p-4" style="min-height: 300px; max-height: 50vh;">
|
||||
<div class="relative" style="max-width: 100%; max-height: calc(50vh - 2rem);">
|
||||
<!-- Base image (shown in "with-bg" mode) -->
|
||||
<img
|
||||
x-show="maskViewMode === 'with-bg'"
|
||||
:src="'/api/image/base?ora_path=' + encodeURIComponent(oraPath)"
|
||||
class="border border-gray-600"
|
||||
style="max-width: 100%; max-height: calc(50vh - 2rem);"
|
||||
>
|
||||
<!-- Masked image (transparent where mask is black) -->
|
||||
<img
|
||||
x-show="tempMaskPath"
|
||||
:src="'/api/image/masked?ora_path=' + encodeURIComponent(oraPath) + '&mask_path=' + encodeURIComponent(tempMaskPath)"
|
||||
class="border border-gray-600"
|
||||
:class="maskViewMode === 'with-bg' ? 'absolute inset-0' : ''"
|
||||
style="max-width: 100%; max-height: calc(50vh - 2rem);"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 justify-end">
|
||||
<button @click="rerollMask()" :disabled="isExtracting" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-4 py-2 rounded transition">Re-roll</button>
|
||||
<button @click="useMask()" :disabled="isExtracting || !tempMaskPath" class="bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Use This Mask</button>
|
||||
<button @click="closeMaskModal()" :disabled="isExtracting" class="bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded transition">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
23
tools/ora_editor/templates/modals/settings.html
Normal file
23
tools/ora_editor/templates/modals/settings.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!-- Settings modal for ORA Editor -->
|
||||
|
||||
<div x-show="showSettings" @keydown.escape.window="showSettings = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
|
||||
<div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4 border border-gray-600">
|
||||
<h2 class="text-xl font-bold mb-4">Settings</h2>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm text-gray-300 mb-2">ComfyUI Server URL</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="comfyUrl"
|
||||
placeholder="127.0.0.1:8188"
|
||||
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 justify-end mt-4">
|
||||
<button @click="showSettings = false" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition">Cancel</button>
|
||||
<button @click="saveSettings()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded transition">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user