notid/ai-game-2
1
0
Fork 0
Code Issues Pull Requests 1 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

32
tools/ora_editor/templates/modals/browse.html
View File

@@ -1,14 +1,25 @@
<!-- 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>
class="fixed inset-0 z-[50] pt-12 lg:pt-0">
<!-- Backdrop (below content, allows clicks to close) -->
<div @click="closeBrowseModal()" class="absolute inset-0 bg-black bg-opacity-75 lg:bg-opacity-75"></div>
<!-- Close button (top right, above backdrop) -->
<button
@click="closeBrowseModal()"
class="absolute top-4 right-4 z-[51] bg-gray-700 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-xl min-h-[2.5rem] touch-manipulation lg:top-4"
>✕</button>
<!-- Modal content - above backdrop, full screen on mobile, centered on desktop -->
<div class="absolute inset-0 pt-12 lg:pt-0 overflow-auto p-4 z-[51]">
<div class="max-w-2xl mx-auto h-full flex flex-col lg:bg-gray-800 lg:rounded-lg lg:p-6 lg:max-h-[80vh] lg:border lg:border-gray-600 lg:my-auto">
<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>
</div>
<!-- Directory listing -->
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 p-2" style="min-height: 300px;">
@@ -54,15 +65,16 @@
</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>
<div class="flex gap-4 justify-end lg:flex lg:justify-end flex-col">
<button
@click="openSelectedFile()"
:disabled="!browseSelectedPath"
class="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition"
class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
>
Open Selected
</button>
<button @click="closeBrowseModal()" class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation">Cancel</button>
</div>
</div>
</div>
</div>

50
tools/ora_editor/templates/modals/krita.html
View File

@@ -1,24 +1,38 @@
<!-- 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>
class="fixed inset-0 z-[50] pt-12 lg:pt-0">
<!-- Backdrop (allows clicks to close) -->
<div @click="closeKritaModal()" class="absolute inset-0 bg-black bg-opacity-75"></div>
<!-- Close button (top right, above backdrop) -->
<button
@click="closeKritaModal()"
class="absolute top-4 right-4 z-[51] bg-gray-700 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-xl min-h-[2.5rem] touch-manipulation lg:top-4"
>✕</button>
<!-- Modal content - above backdrop, full screen on mobile, centered on desktop -->
<div class="absolute inset-0 pt-12 lg:pt-0 overflow-auto p-4 z-[51]">
<div class="max-w-lg mx-auto h-full flex flex-col lg:bg-gray-800 lg:rounded-lg lg:p-6 lg:border lg:border-gray-600 lg:my-auto">
<h2 class="text-xl font-bold mb-4">Open in Krita (Desktop Only)</h2>
<p class="text-yellow-400 text-sm mb-4">⚠️ This feature only works on desktop. Mobile browsers cannot export to local filesystem.</p>
<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 lg:flex lg:justify-end flex-col">
<button
@click="copyKritaPath()"
:class="kritaPathCopied ? 'bg-green-600' : 'bg-blue-600 hover:bg-blue-700'"
class="w-full px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
x-text="kritaPathCopied ? 'Copied!' : 'Copy Path'"
></button>
<button @click="closeKritaModal()" class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation">Close</button>
</div>
</div>
</div>
</div>

138
tools/ora_editor/templates/modals/mask_preview.html
View File

@@ -1,71 +1,99 @@
<!-- 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
<span x-show="tempMaskPaths.length > 1" class="text-sm font-normal text-gray-400 ml-2">
(<span x-text="currentMaskIndex + 1"></span> / <span x-text="tempMaskPaths.length"></span>)
</span>
</h2>
<!-- View mode toggle -->
<div class="flex gap-2">
class="fixed inset-0 z-[50] pt-12 lg:pt-0">
<!-- Backdrop (allows clicks to close) -->
<div @click="closeMaskModal()" class="absolute inset-0 bg-black bg-opacity-75"></div>
<!-- Close button (top right, above backdrop) -->
<button
@click="closeMaskModal()"
class="absolute top-4 right-4 z-[51] bg-gray-700 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-xl min-h-[2.5rem] touch-manipulation lg:top-4"
>✕</button>
<!-- Modal content - above backdrop, full screen on mobile, centered on desktop -->
<div class="absolute inset-0 pt-12 lg:pt-0 overflow-auto p-4 z-[51]">
<div class="max-w-2xl mx-auto h-full flex flex-col lg:bg-gray-800 lg:rounded-lg lg:p-6 lg:max-h-[90vh] lg:border lg:border-gray-600 lg:my-auto">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 mb-4">
<h2 class="text-xl font-bold">
Extracted Mask
<span x-show="tempMaskPaths.length > 1" class="text-sm font-normal text-gray-400 ml-2">
(<span x-text="currentMaskIndex + 1"></span> / <span x-text="tempMaskPaths.length"></span>)
</span>
</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-2 rounded text-sm font-medium min-h-[2.5rem] touch-manipulation"
>With Background</button>
<button
@click="maskViewMode = 'masked-only'"
:class="maskViewMode === 'masked-only' ? 'bg-green-600' : 'bg-gray-600'"
class="px-3 py-2 rounded text-sm font-medium min-h-[2.5rem] touch-manipulation"
>Masked Only</button>
</div>
</div>
<div class="bg-gray-700 rounded mb-4 p-2 relative">
<!-- Navigation row (multiple masks) -->
<div x-show="tempMaskPaths.length > 1" class="flex items-center justify-between gap-2 mb-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>
@click="previousMask()"
:disabled="currentMaskIndex <= 0"
class="bg-gray-800 hover:bg-gray-600 disabled:bg-gray-700 rounded w-12 h-12 flex items-center justify-center text-2xl min-h-[3rem] touch-manipulation"
>←</button>
<span class="text-sm text-gray-300 font-bold">Mask <span x-text="currentMaskIndex + 1"></span> / <span x-text="tempMaskPaths.length"></span></span>
<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>
@click="nextMask()"
:disabled="currentMaskIndex >= tempMaskPaths.length - 1"
class="bg-gray-800 hover:bg-gray-600 disabled:bg-gray-700 rounded w-12 h-12 flex items-center justify-center text-2xl min-h-[3rem] touch-manipulation"
>→</button>
</div>
<!-- Image preview -->
<div class="relative bg-black rounded overflow-hidden" style="max-height: calc(100vh - 400px);">
<div class="flex items-center justify-center min-h-[200px]">
<!-- 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(100vh - 400px);"
>
<!-- Masked image (transparent where mask is black) -->
<img
x-show="currentMaskPath"
:src="'/api/image/masked?ora_path=' + encodeURIComponent(oraPath) + '&mask_path=' + encodeURIComponent(currentMaskPath)"
class="border border-gray-600"
:class="maskViewMode === 'with-bg' ? 'absolute inset-0' : ''"
style="max-width: 100%; max-height: calc(100vh - 400px);"
>
</div>
</div>
</div>
<div class="flex-1 overflow-auto bg-gray-700 rounded mb-4 flex items-center justify-center p-4 relative" style="min-height: 300px; max-height: 50vh;">
<!-- Left arrow for multiple masks -->
<div class="flex gap-4 justify-end lg:flex lg:justify-end flex-col">
<button
x-show="tempMaskPaths.length > 1 && currentMaskIndex > 0"
@click="previousMask()"
class="absolute left-2 z-10 bg-gray-800 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-2xl"
>←</button>
<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="currentMaskPath"
:src="'/api/image/masked?ora_path=' + encodeURIComponent(oraPath) + '&mask_path=' + encodeURIComponent(currentMaskPath)"
class="border border-gray-600"
:class="maskViewMode === 'with-bg' ? 'absolute inset-0' : ''"
style="max-width: 100%; max-height: calc(50vh - 2rem);"
>
</div>
<!-- Right arrow for multiple masks -->
@click="useCurrentMask()"
:disabled="isExtracting || !currentMaskPath"
class="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
>Use This Mask</button>
<button
x-show="tempMaskPaths.length > 1 && currentMaskIndex < tempMaskPaths.length - 1"
@click="nextMask()"
class="absolute right-2 z-10 bg-gray-800 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-2xl"
>→</button>
</div>
<div class="flex gap-4 justify-end">
<button @click="rerollMasks()" :disabled="isExtracting" class="bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 px-4 py-2 rounded transition flex items-center gap-2">
@click="rerollMasks()"
:disabled="isExtracting"
class="w-full bg-gray-600 hover:bg-gray-500 disabled:bg-gray-700 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>
Re-roll
</button>
<button @click="useCurrentMask()" :disabled="isExtracting || !currentMaskPath" 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>
<button
@click="closeMaskModal()"
:disabled="isExtracting"
class="w-full bg-red-600 hover:bg-red-700 disabled:bg-gray-600 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation"
>Cancel</button>
</div>
</div>
</div>
</div>

26
tools/ora_editor/templates/modals/settings.html
View File

@@ -1,9 +1,20 @@
<!-- 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>
class="fixed inset-0 z-[50] pt-12 lg:pt-0">
<!-- Backdrop (allows clicks to close) -->
<div @click="showSettings = false" class="absolute inset-0 bg-black bg-opacity-75"></div>
<!-- Close button (top right, above backdrop) -->
<button
@click="showSettings = false"
class="absolute top-4 right-4 z-[51] bg-gray-700 hover:bg-gray-600 rounded-full w-10 h-10 flex items-center justify-center text-xl min-h-[2.5rem] touch-manipulation lg:top-4"
>✕</button>
<!-- Modal content - above backdrop, full screen on mobile, centered on desktop -->
<div class="absolute inset-0 pt-12 lg:pt-0 overflow-auto p-4 z-[51]">
<div class="max-w-md mx-auto h-full flex flex-col lg:bg-gray-800 lg:rounded-lg lg:p-6 lg:border lg:border-gray-600 lg:my-auto">
<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>
@@ -11,13 +22,14 @@
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"
class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500 min-h-[2.5rem] touch-manipulation"
>
</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 class="flex gap-4 justify-end mt-4 lg:flex lg:justify-end flex-col">
<button @click="saveSettings()" class="w-full bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation">Save</button>
<button @click="showSettings = false" class="w-full bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded transition min-h-[2.5rem] touch-manipulation">Cancel</button>
</div>
</div>
</div>
</div>