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

Restructure ORA editor into modular blueprints with browse dialog

Browse Source 
- 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:
Bryce
2026-03-27 21:29:27 -07:00
parent 17da8c475e
commit fb812e57bc
21 changed files with 2269 additions and 1794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
tools/ora_editor/templates/modals/browse.html Normal file
View 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
View 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
View 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
View 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>